電筒王app 第二版: 使用cordova開發
用 ionic(UI Framework) + 加上ngCordova 的plugin套件來完成
第一版是用eclipse 開發android,eclipsed開發起來效能緩慢不說
想控制閃光燈,找到一些片段,拼拼湊湊,勉強完成
且因為一些samsung手機對webview的顯示 常會有圖片不一致的情況
因為沒甚麼效能特殊考量,故第二版捨棄native,改用hybrid app
- Cordova & Ionic 開發
- 前置作業
<ProjectsRoot> = d:\proejct\nodejs\
<ProjectPath> = d:\project\nodejs\wiiapp2\
for windows and mac
安裝nodejs
$sudo npm install -g bower
$sudo npm install –g cordova ionic - 設計UI
1.使用ionic提供的線上設計工具 creator
https://creator.ionic.io/app/designer/94bfa13f90a0#command-line
設計好後,可以將ui下載,或是用指令列安裝到本機
2.安裝UI範本 from creator project
$ <ProjectsRoot>ionic start WiiApp2 creator:94xfx13x90x0
安裝時需要輸入ionic creator 之帳號密碼
3.設定platform ios/android
$<ProjectPath>cordova platform add android -
$<ProjectPath>cordova platform add ios
ps:移除方式cordova platform rm android - 安裝ngCordova (提供手機周邊相關plugin)
$ <ProjectPath>bower install ngCordova
安裝後就可於/www/index.html中引用ngCordova<script src="lib/ngCordova/dist/ng-cordova.js"></script> <script src="cordova.js"></script> - 安裝閃光燈plugin ngCordova
Latest npm stable version
$ <ProjectPath>\cordova plugin add cordova-plugin-flashlightps1:其他安裝方法
$ <ProjectPath>\cordova plugin add https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin.gitps2:移除方法
$ <ProjectPath>\cordova plugin remove cordova-plugin-flashlight -
開始開發程式(ionic ui + angularjs )
/www/js/controllers.js (Controller控制器)
/www/js/routes.js (routing路由)
/www/js/services.js (Model服務)
/www/templates/*.html (View)
/www/index.html
ionic UI doc: http://ionicframework.com/docs/
angular doc: https://docs.angularjs.org/tutorial -
測試方式
Android
1.開啟手機debug模式
http://mobileai.net/2014/02/24/htc-usb-debug-mode/
2.$ <ProjectPath>debug-android.bat (客製)
....
$ <ProjectPath>ionic build android
$ <ProjectPath>ionic run androidps1:用AVD debug: $<ProjectPath>cordova emulate android
IOS
於mac os中執行
$ <ProjectPath>ionic build ios
第一次會提示安裝xcodebuilder
後續於mac os內偵錯及編譯
-
關於google play/apple store上架流程
需要申請開發帳號及繳交上架費用
並使用private key簽署apk 這邊不多做說明 -
google play 商店
https://play.google.com/store/apps/details?id=tw.wii.app&hl=zh_TW
apple store
- 參考
1.UI : ionic creator
https://creator.ionic.io/app/login
2.plugin: ngCordova
http://ngcordova.com/
3.cross platform mobile app framework : cordova
https://cordova.apache.org/
4.IDE 開發工具
https://blogs.msdn.microsoft.com/msdntaiwan/2014/05/19/app-visual-studio-2013-apache-cordova-phonegap/