html5 app skills for android developers
DESCRIPTION
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.comTRANSCRIPT
Building Mobile HTML5 AppsWith 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 Course @ Technion
○ Working for WatchDox
○ Love building (and breaking) stuff
○ Creator of angular-moment (and more…)
Cross Platform Apps Overview
○ Native Apps / Non JS Frameworks
○ JS Frameworks (e.g. titanium)
○ Cordova / PhoneGap
○ HTML5 Apps
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
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...
Ionic Framework
○ Built on top of Cordova, Angular.JS
○ Mobile-app Focused
○ Provides CSS Components, Javascript
Controllers and CLI wrapper around
Cordova
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 Directive○ Lists & Form Controls○ Ionicons - Over 500 ready-to-use icons
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.
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 androidThat’s all!
Let’s add a Sidebar
○ Sidebar Controller:http://ionicframework.com/docs/api/directive/ionSideMenus/
○ Hamburger Button:http://ionicframework.com/docs/api/directive/menuToggle/
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.
Remote Debugging with Chrome
○ Connect your device
○ Go to chrome://inspect
○ Find your app instance, and click inspect
○ Kittens will mate
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
That's all Folks!
I hope that you had fun and learned
something new :-)