hybrid mobile development with apache cordova,angularjs and ionic
TRANSCRIPT
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