Building Mobile
HTML5 Apps
With Angular.JS + Ionic Framework
Uri Shaked, DroidCon Tel-Aviv
About the Speaker
Hi, my name is Uri!
Some facts about me:
○ Angular.JS GDE
○ I dance Salsa
○ Teach Web Technologies Cours...
Cross Platform Apps Overview
○ Native Apps / Non JS Frameworks
○ JS Frameworks (e.g. titanium)
○ Cordova / PhoneGap
○ HTML...
Angular.JS
○ Popular MV* Framework by Google
○ Large community, Enterprise adoption
○ Extend HTML capabilities with Direct...
Apache Cordova
○ Open Source hybrid HTML5 app platform,
originally known as “PhoneGap”
○ Large ecosystem with many plugins...
Ionic Framework
○ Built on top of Cordova, Angular.JS
○ Mobile-app Focused
○ Provides CSS Components, Javascript
Controlle...
Does this really work?
○ Yes, I have built an Android app with Ionic:
http://bit.ly/RuedaAndroid
What do we get?
○ Tabbed controllers
○ Complete navigation history
○ Gestures: Pull to Refresh & Swipe to delete
○ Sidebar...
System Configuration
Install Java, Android SDK and Ant, and add
them all to your PATH.
Important: Make sure you add both t...
It’s show time!
○ npm install -g ionic cordova
○ ionic start droidcon
○ cd droidcon
○ ionic platform android
○ (start geny...
Let’s add a Sidebar
○ Sidebar Controller:
http://ionicframework.com/docs/api/directive/ionSideMenus/
○ Hamburger Button:
h...
Debugging locally with Chrome
Simply run the following command:
ionic serve
It will fire up a web server on port 8100 with...
Remote Debugging with Chrome
○ Connect your device
○ Go to chrome://inspect
○ Find your app instance, and click inspect
○ ...
Plugin’ to Camera
○ Run the following command:
cordova plugin add org.apache.cordova.camera
○ Then call the method navigat...
That's all Folks!
I hope that you had fun and learned
something new :-)
Upcoming SlideShare
Loading in...5
×

HTML5 App Skills for Android Developers

589

Published on

Android developer? Let me show you what HTML5 can do for you. We will learn how to leverage the power of HTML5, Cordova (a.k.a. phonegap) and AngularJS combined with a set of high-quality widgets especially built for mobile apps to create the next generation of multi-platform mobile apps with ease.

As presented in DroidCon Tel Aviv 2014 by:
Uri Shaked, GDG Tel Aviv
http://il.droidcon.com

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
589
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 App Skills for Android Developers

  1. 1. Building Mobile HTML5 Apps With Angular.JS + Ionic Framework Uri Shaked, DroidCon Tel-Aviv
  2. 2. About the Speaker Hi, my name is Uri! Some facts about me: ○ Angular.JS GDE ○ I dance Salsa ○ Teach Web Technologies Course @ Technion ○ Working for WatchDox ○ Love building (and breaking) stuff ○ Creator of angular-moment (and more…)
  3. 3. Cross Platform Apps Overview ○ Native Apps / Non JS Frameworks ○ JS Frameworks (e.g. titanium) ○ Cordova / PhoneGap ○ HTML5 Apps
  4. 4. Angular.JS ○ Popular MV* Framework by Google ○ Large community, Enterprise adoption ○ Extend HTML capabilities with Directives and two-way Data-Binding ○ Dependency Injection, Application Architecture and Easy-to-Test code
  5. 5. Apache Cordova ○ Open Source hybrid HTML5 app platform, originally known as “PhoneGap” ○ Large ecosystem with many plugins ○ Supports Android, iOS, Windows Mobile, Blackberry, Tizen, Firefox OS...
  6. 6. Ionic Framework ○ Built on top of Cordova, Angular.JS ○ Mobile-app Focused ○ Provides CSS Components, Javascript Controllers and CLI wrapper around Cordova
  7. 7. Does this really work? ○ Yes, I have built an Android app with Ionic: http://bit.ly/RuedaAndroid
  8. 8. What do we get? ○ Tabbed controllers ○ Complete navigation history ○ Gestures: Pull to Refresh & Swipe to delete ○ Sidebar Directive ○ Lists & Form Controls ○ Ionicons - Over 500 ready-to-use icons
  9. 9. System Configuration Install Java, Android SDK and Ant, and add them all to your PATH. Important: Make sure you add both tools and platform-tools from the Android SDK to your PATH.
  10. 10. It’s show time! ○ npm install -g ionic cordova ○ ionic start droidcon ○ cd droidcon ○ ionic platform android ○ (start genymotion or connect your device) ○ ionic run android That’s all!
  11. 11. Let’s add a Sidebar ○ Sidebar Controller: http://ionicframework.com/docs/api/directive/ionSideMenus/ ○ Hamburger Button: http://ionicframework.com/docs/api/directive/menuToggle/
  12. 12. Debugging locally with Chrome Simply run the following command: ionic serve It will fire up a web server on port 8100 with livereload enabled, and open your browser automatically.
  13. 13. Remote Debugging with Chrome ○ Connect your device ○ Go to chrome://inspect ○ Find your app instance, and click inspect ○ Kittens will mate
  14. 14. Plugin’ to Camera ○ Run the following command: cordova plugin add org.apache.cordova.camera ○ Then call the method navigator. camera.getPicture() ○ Even better: use ngCordova
  15. 15. That's all Folks! I hope that you had fun and learned something new :-)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×