How we do it: Ionic in mobile app development

Recently we closed another project developed together with our Belgian partner Digitopia. Before that we had the opportunity to work together on many interesting cooperations, such as Touch & Go, Snake or Wallibi. This time we were involved in a mobile application development for a large pharmaceutical conference - the final product worked as a product catalog on touch screen devices.

It was important to present Client’s products in an intuitive way. Each user of the application can see the general information presented in the product pages and, if necessary, sends them to his/her email as a single PDF file. Deadline of the project was strictly fixed and under no circumstances could be exceeded. Our biggest challenge was to create the application in less than a month, so it could perfectly work during the event that happened on the 15th of December 2015.

Expectations and objectives in app development

1. development of modern mobile application in a short time;
2. adapting the application for touch screens and mobile devices (iOS and Android);
3. using Ionic (HTML5 framework);
4. displaying information about the company, their offer and other additional content in a clear and logical manner;
5. easy user interaction with the application and the possibility of sending product pages to the email account.

Technologies

The project, created in HTML5, was based on the IONIC framework. We also used technologies such as Apache Cordova, Sass and Django. The idea was that the application will be displayed on touch screens in the 1360 x 768 - 1920 x 1080 resolution (full HD) and that it will be adaptable to mobile devices (such as smartphones).

Ionic app User Interface (UI)

Interface has been prepared in Dutch and French and translations were stored in the json file. By using the button on the homepage you can change the language. For the purpose of the event we have also prepared a version of single language with a default Dutch - in this version users were unable to change it. The main objective of the project was to present clients products in an attractive way. To do this it was important to have suitable filters and a transparent product page with tabs. Thanks to that users can find relevant information, photos or products related to the one they are viewing at the moment.

Sending the product page

It was important to allow users to send a product page to an email. They can do it via the form - it requires only entering the necessary data and creating the content of message. To enable writing, we used a special Angular virtual keyboard. We adapted its layout and styled it in such a way, that visually matched the rest of the application. Email template is compliant with all modern browsers and a message with chosen product page is being sent as a PDF attachment.

The application, in addition to being a product catalog, also played the marketing role - because of that it was important that the content was attractive. We also wanted to add animated transitions that are used in the menu to encourage potential customers to familiarize themselves with the products messaging.

By using the Django framework we created functionality that enables subscribing to the newsletter. We also prepared a special panel to read the user data, such as:

• ID of the device from which the subscription was made;
• the date of subscription;
• email address.

The panel also enables to export subscription lists to json or xml files.

Using Ionic in mobile app development

Ionic was completely new for us, therefore before starting work on the project we spent a lot of time on learning what we can do with it and analyzing given possibilities. After few first days, which were dedicated to studying the basics of this technology, we were positively surprised by the fast pace at which the application was created and the ease of work.

Although customer wanted the design to be pixl project, the application was created in a really short time - we met the deadline and completed the app before the date of the event.

The important thing was to present Ionic’s work on a mobile devices during the event. However, due to the lengthy process of loading an application IOS App Store, we started looking for other solutions. With help came Ionic, which is based on AngularJS (JavaScript framework) and Cordova (mobile platform) - it allowed us to pack the app/website to the output file that can be run on the phone.

In order to facilitate the presentation of the mobile version of the app we used Ionic View, which makes working on the project much easier and more convenient. The only thing clients have to do is install Ionic View on their phones. Then they will be given the ID number of application that is stored in the cloud. Thanks to that all interested parties can instantly see the application on their mobile devices and clients are also relieved from the constant installations of updates. All they have to do is click the "Synchronize" button and the app will update itself to the latest version that is uploaded by developers.

Summary

Ionic is a framework that we can honestly recommend as a software house. It allows you to create both simple and more complicated applications. Short development time and a ease of work translate into a budget of the project.

Do you like the possibility of using Ionic in your next project? You can also check out the Ionic (pt. 1): Learn about frontend oriented SDK article on our blog, where you will find more information about the technical aspect of this type of work.

Haven't read first part of my article? No problem, you can check it out here - we can wait for you! ;)

Your first application

We can start working on our first application – the first thing we have to do is create a simple template with a to-do list. For this purpose open the "index.html" file, which is located in the "www" folder and enter the code:

<body>

<ion-side-menus>

<ion-side-menu-content>

</ion-side-menu-content>

<ion-side-menu side="left">

</ion-side-menu>

</ion-side-menus>

</body>

With this we can create a side flyout menu. The code placed in the <ion-side-menu> will contain items that slide from the left side, what is defined by adding the side ="left" attribute. In the <ion-side-menu-content> we have to place the content of the application.

Our next step will be to enter the command:

$ ionic serve

It allows us to launch our app from the browser window, and any change performed on our files will automatically refresh the window. The problem here is that currently nothing will be displayed - we have not created an AngularJS application, which would start the custom tags (just like <ion-side-menus>).

In „www/js/app.js” file we have to place the code

angular.module('todo', ['ionic'])

We have to come back to index.html and add an ng-app attribute in body tag

<body ng-app="todo">

At this moment our app is initiated, but it lacks content. After the actualization, it should look like this:

<body ng-app="todo">

<ion-side-menus>

<!-- Center content -->

<ion-side-menu-content>

<ion-header-bar class="bar-dark">

<h1 class="title">Todo</h1>

</ion-header-bar>

<ion-content>

</ion-content>

</ion-side-menu-content>



<!-- Left menu -->

<ion-side-menu side="left">

<ion-header-bar class="bar-dark">

<h1 class="title">Projects</h1>

</ion-header-bar>

</ion-side-menu>



</ion-side-menus>

</body>

You will be able to see the headline, and by clicking and dragging to the right side you will uncover the side menu.

Ionic has many components patterned after the native ones, and can be added to the project in very simple way. I highly recommend learning a bit more about it and taking some time to test how they work.

For our project we will generate the list by using the Angular ng-repeat loop:

<!-- Center content -->

<ion-side-menu-content>

<ion-header-bar class="bar-dark">

<h1 class="title">Todo</h1>

</ion-header-bar>

<ion-content>

<!-- our list and list items -->

<ion-list>

<ion-item ng-repeat="task in tasks">

{{task.title}}

</ion-item>

</ion-list>

</ion-content>

</ion-side-menu-content>

We have to add a controller and data that will be displayed in our application. By adding ng-controller="TodoCtrl" to the body atribute in app.js file, we will create controller with exemplary data:

angular.module('todo', ['ionic'])

.controller('TodoCtrl', function($scope) {
$scope.tasks = [
{ title: 'Collect coins' },
{ title: 'Eat mushrooms' },
{ title: 'Get high enough to grab the flag' },
{ title: 'Find the Princess' }
];
});

Now our application is starting to take some shape, but we still have to take care of management of lists elements, what is very easily described on Ionics official website.

Quality assurance and compilation

To be sure, whether our application is correctly displayed, we can run Ionic Lab, which will open the app in the browser with specific settings and system classes.

$ ionic serve --lab

I would also like to say a little bit more about how we can run our application by using Android system.

We can generate the *.apk file, which can be installed and initiated by downloading it on smartphone or tablet. To do it we have to write the following command, which will generate the file in platforms/android/build/outputs/apk catalog.

$ ionic build android

We also have access to Ionic View, about which I talked in the first part of this series. Until we don’t have the final version of our application, we should test it with this tool. By logging in onto the Ionic account, we can install Ionic View app (available in Play Store or AppStore).

At this moment our application is sent to our account after executting the following command – we can now view it on our phone with the Ionic View app.

$ ionic upload

Created app will have its own identification number, which lets other people view our app on their own phones if they also have Ionic View installed. All they need to do is to know the application id number.

This method of testing apps on iOS app is very convenient, because it bypasses the necessity of working on Mac computer, you also don't have to pay a subscription fee if you want to manage a developers account.

Publishing the application

Right now we need to bear some unavoidable costs to share our app in application stores. In Play Store we have to pay 25$ for the developers account and go through the verification process, which usually takes about a day. When it comes to the AppStore, the whole process in not as convenient. We have to pay 99$/year for a developers account (without which we can’t share our app) and, additionally, Apple is quite strict when it comes to guidelines – the quality assurance can last for a week, and if they have some remarks, the whole process can have even a longer delay.

Alternative solutions

PhoneGap – built by Cordova and developed by Adobe, it does not require SDK installation for compilation of your application – whole process can be done in the cloud,

Intel XDA –this programming environment is based on Cordova has an visual editor, which allows to develop your app through dragging and dropping components into the workspace (similar to Eclipse editor),

Appcelerator Titanium – platform which has its own tool set and contains copywritten IDE (based on Eclipse editor), that allows for the development of native or hybrid programs with the usage of your own API.

I personally think that, among other solutions, Ionic is the most user-friendly. Its increasing popularity helps in developing more and more plug-ins and extensions every day.

Summary

Have you ever dreamed about creating a mobile application, but your lack of time for exploration of new environments effectively discouraged you to do so? You can be sure that Ionic allows you to achieve those dreams with only the knowledge of JavaScript! Admittedly, hybrid applications will never reach the performance of the ones written natively, therefore developers, who create this kind of apps, don’t have to be worry about their jobs. However, the many things you can achieve without the knowledge of Objective-C or Java will surely positively surprise you!