Mobile Hybrid Development

March 20, 2017

Introduction

In a world dominated by smartphones, we need to have tools to develop software for them. There are two ways to do this. We can develop applications using native code, for example using Java to make Android applications, or swift/obj-c for IOS or, on the other hand, we can make hybrid applications using some frameworks.

The best feature of hybrid apps is the time and money that you can save. You only need to develop one hybrid app and the framework builds it for the different platforms (IOS, Android, Windows Phone, and Blackberry).

Now you can search for different frameworks on the market. I choose one, Ionic, because it has the biggest community and the most resources. Ionic combines AngularJS with HTML5+CSS (SASS) and uses Cordova to access native API functions.

Ionic Framework

ionic_logo

Ionic is a free, open source, framework SDK based on AngularJS and Cordova that offers a mobile component library and tools to build interactive apps. Ionic rejected the idea that mobile web apps had to be clunky, slow, and non-native. With Ionic, you’ll be able to build hybrid mobile apps that look and feel just like native mobile apps. Ionic utilizes AngularJS to provide the application with structure, while Ionic itself focuses on the user interface. Ionic’s components are powerfully simple and they offer somewhat simpler building blocks that can be combined to deliver rich user interfaces.

Today, Ionic powers over 1.5 million mobile apps and websites (and even some desktop apps!) built by small startups up to Fortune 500 companies. So, if you are in doubt about the community around it, look at the projects on GitHub, templates, forums, and you can decide for yourself.

ionic model

The combination of these technologies makes Ionic a really feature-rich platform for building your mobile apps.

Features

Ionic uses Apache Cordova, which gives us access to a native API, so we can use the camera, GPS, etc.
Making apps with Ionic is very easy and fast, and you have tools like Ionic Creator to mockup and create apps online.

Ionic Creator

Ionic respects the design and conventions of platforms. For example, if you put a tab menu in your app. In Android, it shows it on the top of the screen, but in IOS you can see it at the bottom.
You can quickly create a project with starter templates
It is easy to learn. You only need to know HTML, CSS, and JavaScript.

Quick Start

First, we need node.js installed in our system.
Installation of Ionic and Cordova

$ npm install -g ionic cordova
Creating an app using starter templates

$ ionic start myapp sidemenu

$ cd myapp

$ ionic serve –lab

And you are ready! You have a hybrid application.

Pay attention to the differences between Android and iPhone design.

tabs

Here’s another example:

ionic serve

Structure

Hooks: Cordova hooks folder allows you to execute a JavaScript code during the multiple phases of building your app

Platforms: Platform folder that holds the native added platform project files (Android or iOS).

Plugins: Folder generated and used by Cordova to store the plugins that were installed.

bower.json: File used by Bower package manager that holds a reference to our installed packages and where we can add packages to our application.

gulpfile.js: Task Configuration file used by Gulp Task Runner. Here you can define tasks such as copying JS to another folder, minifying CSS and JS, and much more.

package.json: Definition file used by npm (another package manager) where we define packages to be installed and can specify scripts to run.

config.xml: The Cordova config file that specifies the app name, version, and preferences.

www: Folder where all your application’s HTML, JavaScript and CSS is stored and run.

scss: Folder where the SASS files that get compiled at runtime are stored.

structure