Building Hybrid Mobile Apps with Apache cordova,AngularJS and Ionic

Ermias Bayu – 1007-14-504-010

Osmania University Computer Science III

Semester

@girayegebaw

github.com/hackarada

Overview

• Mobile Apps Introduction

• Development Options• Cordova• Angular Js• Ionic Framework• Demo

Mobile Apps ?

Development Options

Things to Consider• Which mobile platforms do you wish to target?• Do you want to distribute your application via app stores?• Are you looking to utilize the capabilities of the mobile

device?• What are the technical abilities of your development team?• Does the one-size-fit-all approach of hybrid really live up to its

promise?

Built using the device’s native programming language, native apps only run on their designated platform.

A native application (native app) is an application program that has been developed for use on a particular platform or device.

Native apps

Downside

More Platforms. More Problems.

•Proficiency in each platform required

•Timely & expensive

•Maintenance Cost

•Platform Instability

Mobile web applications run in the device’s browser and operate across all platforms

Mobile web apps

Downside

• Only few device APIs can be accessed(i.e Partial integration: (GPS, gyroscope, accelerometer, file upload)

• Performance is based on browser and network connection

• Entirely separate code bases• Monetization and security issues for Developers• Limited Graphics

What is The Solution ?

Hybrid apps

Hybrid apps are a cross between native apps and mobile

web apps

• Ionic is a bunch of UI elements made in HTML5 & • CSS3 that covers a lot of the mobile interactions• The big advantage of Ionic is all the UI components are AngularJS

Directives• HTML5 framework for hybrid mobile apps.• Build on angular, sass.• Uses cordova/phonegap for creating running building deploying mobile

apps.• Contains lots of mobile optimised css and javascript components.

• Native like performance and beautifully designed

• Native Focused• Performance Obsessed• Hardware accelerated animations• Minimal DOM Manipulation• Remove 300ms tap delay

• Plain old CSS• Sass• 80+ reusable mixins

• Boilerplate app structure ready for customization• Preconfigured tools: Gulp, Sass, Bower, etc.

Platform independent (iOS, Android etc.)

HTML5, CSS3 & JS

Limited performance

Quick development

Direct access to native APIs with Cordova

Current technologies provide frame works like ionic and cross

walk

Set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript

• HTML5 that acts like native• Phonegap renamed to Cordova• Web wrapped in native layer• Direct access to native APIs• Familiar web dev environment• Develop a single code base (web platform)

Platforms

● Android

● Blackberry

● FirefoxOS

● iOS

● Tizen

● WebOS

● Windows Phone 7

● Windows Phone

Battery Status

Camera

Contacts

Device Orientation

Dialogs

File Transfer

Geolocation

Globalization

In-App Browser

Media

CaptureSplashscreen

Statusbar

Vibration

Plugins

Proven for large-scale app development

Extends the HTML vocabulary

UI Components using Directives and Services

A structural MVC framework for dynamic web Apps.It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly

Demo and Sample Apps

https://github.com/hackarada/ioconf

showcase.ionicframework.com

Thank You2015