Building Mobile Apps with Cordova , AngularJS and Ionic
-
Upload
kadhem-soltani -
Category
Technology
-
view
1.652 -
download
5
Transcript of Building Mobile Apps with Cordova , AngularJS and Ionic
Building Mobile Apps with Cordova , AngularJS and Ionic
Who am I ?
• Soltani Kadhem
• Web & Mobile Developer at Novavision-it
• Website: www.kadhem-soltani.com
• Twitter : @kadhem_soltani
Agenda
1. Why make mobile app
2. Hybrid VS Native
3. What is Cordova ?
4. What is AngularJS ?
5. What is Ionic Framework ?
6. Q&A
7. Coding Time
Why make mobile apps?
Why make mobile apps ?
• You want to make mobile app because:
– The world is moving
– Everybody's making mobile apps these day
– For your business
– ...
Why make mobile apps ?
• But:
– You're not mobile app developer?
– You don't know Java, Objective-C , c#?
– You want to build app that run everywhere
– ……….
Let's try Hybrid!
Hybrid vs Native
Hybrid VS Native
• Native Apps
● Platform specific
● Respective development tools
● Time consuming
● Expensive development
More Platforms, More Problems
You need cool web technologies..
Hybrid VS Native
• Hybrid Apps
● Platform independent (iOS, Android etc.)
● HTML5, CSS3 & JS
● Quick development
● Direct access to native APIs with Cordova
Apache Cordova is a platform for building native mobile applications using HTML, CSS and JavaScript
• 2009: PhoneGap started at Nitobi • 2011: PhoneGap purchased by Adobe • 2012: PhoneGap donated from Adobe to Apache • Software Foundation, and renamed as Cordova • Today: PhoneGap is a distribution of Cordova
PhoneGap vs. Cordova
What is Cordova
• Platforms
● Android ● Blackberry ● FirefoxOS ● iOS ● Tizen ● WebOS ● Windows Phone 7 ● Windows Phone 8
What is Cordova
• Plugins
● Battery Status ● Camera ● Contacts ● Device Orientation ● Dialogs ● File Transfer ● Geolocation ● Media Capture ● Network Information ● Splashscreen ● Statusbar ● Vibration
Single Page Application Framework
What is ?
- MVC Framework. - Developed by Google and the community
is:
What is ?
Directives
What is ?
Controller & scope
What is ?
Model
What is ?
Routing
What is ?
• A Front-end framework for mobile apps • Contains a lot of mobile-optimized HTML, CSS and JS
components • Best Friend with AngularJs • Uses Cordova to create, build, run, deploy mobile apps
is:
What is ?
What is
Ionic solves multiple device resolution issues
List
Tabs
Pull To Refresh
Side Menu
Install Ionic & Cordova Globally
npm install -g ionic cordova
Ionic Templates
ionic start app blank ionic start app tabs ionic start app sidemenu
Add Platform, Build & Emulate
Test on web browser
ionic serve
Add mobile platform (Android or iOS)
ionic platform add [android/ios]
Run test on device/emulator
ionic [run/emulate] [ android/ios]
Do you have any question?
< Coding Time />
Thank you!