Ionic (pt. 2): How to create a hybrid application

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>  <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>  <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:

 <ion-side-menu-content> <ion-header-bar class="bar-dark"> <h1 class="title">Todo</h1> </ion-header-bar> <ion-content>  <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!

2019-05-22

Marcin Wasilewski

Frontend Developer

Navigate the changing IT landscape

Some highlighted content that we want to draw attention to to link to our other resources. It usually contains a link .

Button Text