Toilet Paper 79

Mobile X-platform development with Ionic 2


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.


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.


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

Wir verwenden Cookies, um unsere Webseite für Sie zu optimieren. Mit dem Besuch unserer Webseite erklären Sie sich damit einverstanden. // Our website is using cookies to improve your experience. By continuing to browse the site, you are agreeing to our use of cookies.

Weitere Informationen finden Sie in unserer Datenschutzerklärung. // For more information, please refer to our privacy policy.

contact icon

Contact us now