The customer orders the development of a mobile application which runs on the common platforms iOS, Android and Windows Phone. The budget and the available project duration are simply not sufficient to develop all the applications natively. There is also a lack of relevant technical know-how for all the platforms in the team.
The app logic is implemented based on Angular 2 and also provides a lot of UI elements (dialogues, floating action buttons, loading spinners, etc.) which adapt to the familiar look & feel on the relevant target OS. The application can easily be themed by simple CSS or by overwriting Sass variables. Apache Cordova is required for access to native features of the operating system (Bluetooth, Location Service, camera, etc.).
With the Ionic CLI, the framework also provides a tool with which a project can initially be created and built for many different platforms. It also takes on the scaling of icons and splash screens for the target platform and relevant display resolutions. So that you do not constantly have to execute the project on a device or emulator, a development server can be started locally. Hence, you can start and debug the app in the browser with well-known tools.
Ionic 2 and Cordova can be installed via npm and require NodeJS.
With the following command, the basic framework of a mobile application can be created:
$ ionic start myNewApp --v2
The result is a folder called myNewApp, which contains a project which is already executable and thus provides a good starting point for the further development.
Under Mac, a finished iOS product is created, which can be opened with Xcode and executed on an iPhone. If you would now like to add an Android project, for example, this is done with the command:
$ ionic platform add android
A few seconds later, we will find a finished Android project, which can be opened in Android Studio and executed on an emulator or device. Alternatively, the project can also be executed directly on the emulator or a connected device with the following command:
$ ionic run android
The result is displayed in the right picture.
Thomas Wankerl, Senior Software Architect, New Business