Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
-
Upload
ermias-bayu -
Category
Software
-
view
402 -
download
0
Transcript of Hybrid Mobile Development with Apache Cordova,AngularJs and ionic
![Page 1: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/1.jpg)
Building Hybrid Mobile Apps with Apache cordova,AngularJS and Ionic
![Page 2: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/2.jpg)
Ermias Bayu – 1007-14-504-010
Osmania University Computer Science III
Semester
@girayegebaw
github.com/hackarada
![Page 3: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/3.jpg)
Overview
• Mobile Apps Introduction
• Development Options• Cordova• Angular Js• Ionic Framework• Demo
![Page 4: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/4.jpg)
Mobile Apps ?
![Page 5: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/5.jpg)
Development Options
![Page 6: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/6.jpg)
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?
![Page 7: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/7.jpg)
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
![Page 8: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/8.jpg)
Downside
More Platforms. More Problems.
![Page 9: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/9.jpg)
•Proficiency in each platform required
•Timely & expensive
•Maintenance Cost
•Platform Instability
![Page 10: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/10.jpg)
Mobile web applications run in the device’s browser and operate across all platforms
Mobile web apps
![Page 11: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/11.jpg)
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
![Page 12: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/12.jpg)
What is The Solution ?
![Page 13: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/13.jpg)
Hybrid apps
![Page 14: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/14.jpg)
Hybrid apps are a cross between native apps and mobile
web apps
![Page 15: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/15.jpg)
![Page 16: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/16.jpg)
![Page 17: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/17.jpg)
• 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
![Page 18: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/18.jpg)
• 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.
![Page 19: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/19.jpg)
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
![Page 20: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/20.jpg)
Set of device APIs that allow a mobile app developer to access native device function such as the camera or accelerometer from JavaScript
![Page 21: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/21.jpg)
• 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)
![Page 22: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/22.jpg)
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
![Page 23: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/23.jpg)
![Page 24: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/24.jpg)
Proven for large-scale app development
Extends the HTML vocabulary
UI Components using Directives and Services
![Page 25: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/25.jpg)
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
![Page 26: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/26.jpg)
Demo and Sample Apps
https://github.com/hackarada/ioconf
showcase.ionicframework.com
![Page 27: Hybrid Mobile Development with Apache Cordova,AngularJs and ionic](https://reader036.fdocuments.us/reader036/viewer/2022062523/58eeee3b1a28abe65b8b45d1/html5/thumbnails/27.jpg)
Thank You2015