Ionic 筆記

What Technologies does it use?

AngularJS https://angularjs.org/
Apache Cordova https://cordova.apache.org/
Node.js https://nodejs.org/
Bower https://bower.io/
Sass http://sass-lang.com/
Gulp http://gulpjs.com/
Git https://git-scm.com/

Apache Cordova API

類似JVM跟OS溝通所以可以跨平台
三層

HTML
Cordova
Mobile OS

Install

$ npm install cordova ionic bower -g
$ ionic --help
echo $PATH

Basic Use

ionic start [options] <PATH> [template]
ionic start app123 tabs
ionic start hello blank

[template]:

tabs: 最下面三個tab
sidemenu: 按hambarger
blank: 空白

Web
ionic serve

打開ios simulator
ionic run ios

好用網站

Docs http://ionicframework.com/docs/
Icon http://ionicons.com/
Ionic Cloud https://ionic.io/cloud
線上模擬 http://play.ionic.io/
Config.xml http://cordova.apache.org/docs/en/latest/config_ref/index.html
Cordova Plugin https://cordova.apache.org/docs/en/latest/
ngCordova Plugin http://ngcordova.com/docs/plugins/

Ionic Server

ADB

在~/Library/Android/sdk/platform-tools
$ adb install [path-to-your-apk-file]
待補

Publishing 發布

詳細：http://ionicframework.com/docs/guide/publishing.html

Android

下載SDK or Android Studio
ionic platform add android
ionic build android --release
取得了一個未簽名的apk

前往該資料夾
$ cd /platforms/android/build/outputs/apk/ => HelloWorld-release-unsigned.apk

產生金鑰
$ keytool -genkey -v -keystore my-release-key.keystore -alias your_alias_name -keyalg RSA -keysize 2048 -validity 10000

簽名apk檔
$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keyst 大专栏 Ionic 筆記ore HelloWorld-release-unsigned.apk your_alias_name

前往android sdk資料夾
$ ~/Library/Android/sdk/build-tools/25.0.0

將以簽名的apk檔優化
$ ./zipalign -v 4 /platforms/android/build/outputs/apk/HelloWorld-release-unsigned.apk HelloWorld.apk

iOS

ionic platform add ios
ionic build ios --release
Open Xcode

Packages

$ bower install ngCordova --save
www/index.html加上
<script src="lib/ngCordova/dist/ng-cordova.js"></script>

偵測裝置資訊

$ cordova plugin add cordova-plugin-device

開發人員工具

chrome://inspect

install