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.