Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

1,025 views

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
  • Be the first to comment

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 :-)

×