Tutorial: Develop Mobile Applications with AngularJS

Tutorial: Develop Mobile Applications with AngularJS

• 1.
  Tutorial Develop Mobile Applicationswith AngularJS
• 2.
  Philipp Burgmer Software Engineer/ Consultant / Trainer Focus: Frontend, Web Technologies WeigleWilczek GmbH [email protected] ABOUT ME
• 3.
  WeigleWilczek / W11k SoftwareDesign, Development & Maintenance Consulting, Trainings & Project Kickoff Web Applications with AngularJS Native Rich Clients with Eclipse RCP ABOUT US
• 4.
  Developing Mobile Applications NativeLook & Feel Web-Technologies (HTML, JavaScript, CSS) Setup Architecture Development APIs WHAT IT'S ALL ABOUT
• 5.
  SETUP
• 6.
  Installed and inPath: Node.JS - node - brew install node Node Package Manager - npm Git - git - brew install git Ruby - ruby Compass - compass - [sudo] gem install compass
• 7.
  Optional: Android SDK developer.android.com/sdk (http://developer.android.com/sdk/index.html)or brew install android Launch Android SDK Manager ( android or Help (http://developer.android.com/tools/help/sdk-manager.html)) Install Following Packages: Xcode and iOS 7 Simulator on MacOS
• 8.
  Apache Cordova -[sudo] npm install -g cordova Ionic - [sudo] npm install -g ionic Optional: Ripple Emulator - [sudo] npm install -g ripple-emulator iOS Sim - [sudo] npm install -g ios-sim
• 9.
  ARCHITECTURE
• 10.
  Mobile OS WebView Ionic AngularJS Cordova Application THE BIGPICTURE
• 11.
  Better Known asPhoneGap (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.
  229 Plugins Native JavaScript org.apache.cordova Camera Battery Status Console Contacts Device Information + Motion + Orientation Dialogs File + File Transfer CORDOVA PLUGINS
• 13.
  Distributioin of Cordova Serviceslike PhoneGap Build phonegap.com (http://phonegap.com/) Developed by Adobe License: Apache 2.0
• 14.
  HTML enhanced forweb 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
• 15.
  Frontend-Framework CSS Optimized forMobile 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.
  Similar to Ionic Frontend-Framework Cordovaand AngularJS based Directives and Services onsenui.io (http://onsenui.io/) Current Version 1.0.4 License: Apache 2.0
• 17.
  OUR FIRST APP
• 18.
  Create and Navigateto 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
• 19.
  PROJECT STRUCTURE Cordova hooks merges platforms plugins www config.xml Ionic ionic.project Custom scss bower.json Gulpfile.js package.json
• 20.
  <?xml version='1.0' encoding='utf-8'?> <widgetid="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
• 21.
  TOOLS
• 22.
  Required to Configureand Build Cordova Project Run cordova to See All Available Commands Commands to Configure Project Commands to Build Project CORDOVA CLI
• 23.
  Ionic Consists ofTwo 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
• 24.
  Node Package, Installedvia npm install -g ripple-emulator Emulates Android Device in Browser Requires Android as Platform Start Server and Open Browser: ripple emulate RIPPLE EMULATOR
• 25.
  Android Android SDK Required cordovaplatform 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
• 26.
  Create a NewCordova 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
• 27.
  APIS
• 28.
  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
• 29.
  API Doc andGuides 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
• 30.
  OPTIMISATION
• 31.
  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
• 32.
  Subfolders in hooks SomethingExecutable (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
• 33.
  Helps to StructureCode 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 FABULOUS ANGULARJS BUILD SYSTEM
• 34.
  Clone GitHub Repopburgmer/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
• 35.
  Philipp Burgmer [email protected] www.w11k.com (http://www.w11k.com) www.thecodecampus.de(http://www.thecodecampus.de)