2. Developing Mobile Applications
Training in Bangalore
Native Look & Feel
Web-Technologies (HTML, JavaScript, CSS)
Setup
Architecture
Development
APIs
WHAT IT'S ALL ABOUT
9. Better Known as PhoneGap (http://phonegap.com/)
Nitobi Adobe Apache
Native Wrapper for Web-App
Mixing Native- and Web-Code
Plugins for Feature Access
cordova.apache.org (http://cordova.apache.org/)
Current Version: 3.4.1
License: Apache 2.0
12. HTML enhanced for web apps!
angularjs.org
JavaScript-Framework for Rich Browser Applications
Brings Core UI Concepts like MVC to Browser
Extends HTML instead of abstract it
Lets You Extend HTML to Your Needs (Directives)
angularjs.org (https://angularjs.org/)
Current Version: 1.2.16
License: MIT
by
13. Frontend-Framework
CSS Optimized for Mobile App
AngularJS Directives and Services
Touch Support
Navigation
Menus & Dialogs
Cordova Plugin(s)
ionicframework.com(http://ionicframework.com/)
Current Version: 1.0.0-beta.6
License: MIT
16. Create and Navigate to an Empty Folder
Run ionic start myFirstApp tabs to Create a New Ionic Application
Navigate to Project Folder cd myFirstApp
Run ionic serve (Ignore Error on Console)
Browser to http://localhost:8100 (http://localhost:8100)
Play around with the App!
Kill Dev-Server in Console with CTRL+C
Do the Same Again with ionic start mySecondApp sidemenu
HANDSON
18. <?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionicframework.starter" version="0.0.1" xmlns="http://www.w3.org/ns/w
idgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>HelloCordova</name>
<description>
An Ionic Framework and Cordova project.
</description>
<author email="hi@ionicframework" href="http://ionicframework.com/">
Ionic Framework Team
</author>
<content src="index.html" />
<access origin="*" />
<preference name="fullscreen" value="true" />
<preference name="webviewbounce" value="false" />
<preference name="UIWebViewBounce" value="false" />
<preference name="DisallowOverscroll" value="true" />
<!-- Don't store local date in an iCloud backup. Turn this to "cloud" to enable s
torage
to be sent to iCloud. Note: enabling this could result in Apple rejecting yo
ur app.
-->
<preference name="BackupWebStorage" value="none" />
<feature name="StatusBar">
<param name="ios-package" value="CDVStatusBar" onload="true" />
</feature>
</widget>
CONFIG.XML
20. Required to Configure and Build Cordova Project
Run cordova to See All Available Commands
Commands to Configure Project
Commands to Build Project
CORDOVA CLI
21. Ionic Consists of Two Things:
Framework (also Available via Bower)
Command Line Interface (via NPM)
CLI Not Required to Develop Ionic App
Different Versioning
Run ionic to See All Available Commands
Shortcuts to Cordova CLI
create and serve
login and upload
IONIC CLI
22. Node Package, Installed via npm install -g ripple-emulator
Emulates Android Device in Browser
Requires Android as Platform
Start Server and Open Browser: ripple emulate
RIPPLE EMULATOR
23. Android
Android SDK Required
cordova platform add android or ionic platform android
cordova emulate android or ionic emulate android
Take a Nap or Drink Some Coffee ...
iOS
Xcode, iOS Simulator and ios-sim Required
cordova platform add ios or ionic platform ios
cordova emulate ios or ionic emulate ios
PLATFORM SIMULATORS
24. Create a New Cordova Project (not Ionic)
Compare Project Structure to Ionic Project (config.xml)
Delete Cordova Project
Add Android Platform to Ionic Project via ionic
Remove Android Platform via cordova
Add Android Platform Again via cordova
Run ionic serve , Open App in Browser and Check Console for JS Errors
Run Ripple Emulator and Check Console for JS Errors
Run cordova serve , Open App in Browser and Check Console for JS Errors
HANDSON
26. API Documentation: docs.angularjs.org/api (https://docs.angularjs.org/api)
Pay Attention: Documentation for latest Build (Select Box at The Top Left Corner)
Basic Tutorial: docs.angularjs.org/tutorial (https://docs.angularjs.org/tutorial)
Great Tutorial Videos: egghead.io (https://egghead.io/)
ANGULARJS
27. API Doc and Guides at ionicframework.com/docs (http://ionicframework.com/docs/)
Lot of Live Demos and Code Examples
All Directive Starts with Prefix ion (Nice!)
All Services Uses $ionic Prefix (Bad Practice?)
Uses Angular-UI Router
IONIC
29. Avoid Overlapping Elements (Popups, Overlays)
Try to Keep the DOM Small, Create Multiple Small States
HTML Tables Are Sluggish
Transport Really Needed Data Only
Use Caching
Minimize Code
Test Performance on Real and Old Devices
PERFORMANCE HINTS
30. Subfolders in hooks
Something Executable (with Hash-Bang)
See README (https://github.com/apache/cordova-lib/blob/master/cordova-lib/templates/hooks-README.md) for a List Of Available Hooks
Can Be Used to Build Frontend (Modify www Content)
Pay Attention: No www Folder No Valid Cordova Project!
HOOKS
31. FABULOUS ANGULARJS BUILD SYSTEM
Helps to Structure Code
Dev-Mode with Server, Proxy and LiveReload
SASS 3.2 and LESS 1.5 support
Spec and End-2-End Test
Mock Data for Tests and Dev-Mode
Running Bower to Install and Update Frontend Dependencies
Project- and Per-Developer Configuration as well as Command Line Arguments
Building Distribution with
Annotating AngularJS Dependencies (Transform to Array-Notation)
Code Minimization
Running End-2-End Tests Against Build Application
FABS
32. Clone GitHub Repo pburgmer/et-ka-2014-ionic-tutorial-app (https://github.com/pburgmer/et-ka-2014-ionic-tutorial-app)
to Get an Ionic App with fabs as Build-System
Run npm install in Project Folder
Create before_prepare Hook
Run Grunt Build: grunt clean prepare compile
Create a Symlink (if not exists) from build-output/compiled to www
or Clean www and Copy Content from build-output/compiled to It
Add Android as Platform
Run cordova prepare
Take a Look at platform/android/www to Ensure Minified Version Is Used
HANDSON
33. TIB Academy
Second Floor and Third Floor,
5/3 BEML Layout,
Varathur Road,
Thubarahalli,
Kundalahalli Gate,
Bangalore – 66
Landmark – Behind Kundalahalli Gate bus stop,
Opposite to
SKR Convention Mall,
Next to AXIS Bank.
