Ionic Walk-through

Hybrid Front-end Mobile SDK

Speaker: Li-Wei, Lu

What is hybrid app

Cordova v.s. PhoneGap

Text

PhoneGap is a distribution of Apache Cordova. You can think of Apache  Cordova as the engine that powers PhoneGap, similar to how WebKit is  the engine that powers Chrome or Safari.

Ref: http://www.quora.com/What-is-the-difference-between-PhoneGap-and-Cordova-and-why-would-I-select-one-over-another

Ionic Framework

• whatever Web View API is available to native apps on a given platform

• Support Platform:
  • We support iOS 6+, and Android 4.0+ (though 2.3 should work).

Installation - iOS

• iOS SDK

  • http://cordova.apache.org/docs/en/3.3.0/guide_platforms_ios_index.md.html#iOS%20Platform%20Guide

  • Steps

    • install Xcode

    • install ios-sim

      • sudo npm -g install ios-sim

    • install Ionic

      • sudo npm install -g cordova ionic

Installation - Android

• Android SDK
  • http://ionicframework.com/docs/ionic-cli-faq/#android-sdk
  • http://learn.ionicframework.com/videos/windows-android/
  • Our goal: have the SDK installed, install Java, install Ant, install emulator

• Steps

  • install Java

    • https://support.apple.com/kb/dl1572?locale=zh_TW

  • install ant - apache ant(java library)

    • $ brew install ant

  • install Android SDK

    • https://developer.android.com/sdk/index.html

Installation - Android

• Steps

  • Change Path

    • vim ~/.bash_profile

    • export PATH=${PATH}:/Applications/Android\ Studio.app/sdk/platform-tools:/Applications/Android\ Studio.app/sdk/tools
      export JAVA_HOME=$(/usr/libexec/java_home)
      export PATH=${JAVA_HOME}/bin:$PATH
      export PATH=/usr/local/bin:$PATH

  • install Genymotion - for emulation

Start a New Project

• Ref: http://ionicframework.com/docs/cli/start.html

• Steps

  • $ ionic start myApp sidemenu

  • $ ionic platform add ios

  • $ ionic build ios

  • $ ionic emulate iOS

• Template

  • http://codepen.io/ionic/public-list/

• Resources

  • http://market.ionic.io/

     

Structure Overview

── bower.json     // bower dependencies
── config.xml      // cordova configuration

── gulpfile.js       // gulp tasks
── hooks             // custom cordova hooks to execute on specific        commands
── ionic.project  // ionic configuration
── package.json // node dependencies
── platforms       // iOS/Android specific builds will reside here
── plugins           // where your cordova/ionic plugins will be installed
── scss                // scss code, which will output to www/css/
── www              // application - JS code and libs, CSS, images, etc.

Testing

• Ref: http://ionicframework.com/docs/cli/start.html

• Using Browser

  • $ionic serve

• Using simulator

  • $ionic ios emulate

• Using Ionic View

  • $ionic upload

Publish Your App

• Android
  http://ionicframework.com/docs/guide/publishing.html

• IOS
  https://medium.com/@_qzapaia/deploy-an-ionic-app-to-the-ios-app-store-702c79a2dd97

MoreTips

• Angular UI Router
  • http://angular-ui.github.io/ui-router/site/
• ngCordova Plugin
  • Ex: Using Camera Pluging
    • http://learn.ionicframework.com/formulas/cordova-camera/
    • http://plugins.cordova.io/#/package/org.apache.cordova.camera
  • Sample Code
    • https://github.com/driftyco/ionic-example-cordova-camera

Thank you!