Toilet Paper 3

Mobile X-platform development with Ionic 2

Problem

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.

Solution

Take the hybrid app framework Ionic 2. With this open-source framework, apps can be developed for mobile operating systems on the basis of HTML5, CSS, Sass and JavaScript and executed on various platforms via WebView.

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.

Example

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.

Ionic Screenshot