學習日誌

2014年10月29日星期三

ionic 開發總結與心得

學習 ionic 開發對於本來熟悉 WEB Angular開發的工程師，應該會學習是非常簡單的一件事情，在學習的過程會發現有大多的時間是在撰寫 AngularJS，所以對於本來就熟悉AngularJS的開發者，只是多學習ionic 的幾個指令而己，但對於完全不熟習AngularJS的開發者的學習門檻會在這邊。

以下是這次在鐵人賽分享的主要內容，分成二個部份:

第一是基本功的部份，這個部份是HTML+CSS 與 AngularJS的學習，重點會放在 AngularJS 的 routing 與基本的 AngularJS 的用法；第二是實作練習，重點會在如果可以透過 http 與後台的webapi 取得 json data，做一個雙向binding的練習，進階的部份可以學習 service 與 directive 的使用，以利於元件的封裝與程式的維護。

鐵人賽心得

鐡人賽對我來說是迫使把學習的東西轉化成可以描述文章非常好的機會，藉由這次的分享讓我把之前對ionic 的知識整理成比較有條理且有架構的文章，希望這一系列的文章對於想開發ionic 的人是很有幫助的，我必須承認裡面是有很多地方都沒有描述很清楚的地方，因為報名時只想好大致要分享的內容，每個六日再把下週的文章一口氣的寫完，但要很詳細的描述好文章內容，就必須要花很多時間撰寫，所以這次就以大方向為主的描述內容，未來有時間應該會好好再花一些時間整理成 gitbook。

2014年10月28日星期二

ionic 開發時常見問題與相關資源

之前介紹 ionic 相關開發的文章告一個段落，細節的部份無法在這一次介紹的清楚的，請大家透過的資源去自行學習了

相關資源

官方網站: http://ionicframework.com/

官方討論區: http://forum.ionicframework.com/

目前ionic 還在beta階段，所以目前相關的討論有限，請利用官方的討論區或是 stackoverflow 來使用

官方的tutorial : http://ionicframework.com/tutorials/intro-tutorial/

weather tutorial : http://www.binpress.com/tutorial/a-simple-weather-forecast-app-with-ionic-framework-and-forecastio/107

angular 官網 : https://angularjs.org/

CodeSchool : http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro

官方 Demo Example

https://github.com/driftyco/ionic-demo

https://github.com/driftyco/ionic-weather

常見問題

ANDROID_HOME is not set and "android" command not in your PATH

在建立Android Project 最常發生的就是 android home 或是 Ant 的問題，可以參考

http://ionicframework.com/docs/ionic-cli-faq/#android-sdk

alert [ERROR] Error initializing Cordova: class not found

之前在開發的時侯，一開始都會有這個錯誤訊息出現，最後找到的問題都是 cordova 相關版本的問題，所以最後都是以更新 ionic 的版本才解掉這個問題

這是我之前在討論區提出的問題 http://forum.ionicframework.com/t/when-i-build-android-app-it-alert-error-error-initializing-cordova-class-not-found/8059/7

開發工具

Sublime : http://www.sublimetext.com/

Atom : https://atom.io/

xcode : 開發ios工具，但請先買一台Mac 電腦

eclipse : 開發 Android 使用

https://www.eclipse.org/downloads/

https://developer.android.com/sdk/installing/studio.html

2014年10月27日星期一

ionic 編釋成 native app

目前官方支援的 mobile 有 IOS 與 Android ，在編釋mobile native 之前我們必須要先create ios 或是 android 的 project ，以下是以ios為例

詳細資料可以參考：http://ionicframework.com/docs/guide/installation.html

在ionic專案中建立一個 ios Project

在 ionic 專案中的 platforms 會出現一個ios 的目錄

若有安裝Xcode 直接在 ios click xxxx.xcodeproj

以上己經完成了建立ios 的 project ，接下來就是要編釋 ios 的Project 了，所以在command line 中執行 ionic build

........ (略) ........

試run一下虛擬器

要可以Deploy到手機的部份這邊就不介紹了，IOS 的部份是比較複雜的，請參考 IOS 相關開發手冊的書籍，但可能要先了解一下如何購買一個開發者帳號到最後面deploy到手機，如果是 Android 就簡單多了，作法大致上與建立ionic ios Project 差不多，但只要是 Android 的手機接到電腦，電腦可以連接到Android 的device 時通常就可以把 app deploy到手機了，但因為Android 的手機實在是太多了，每一家的開啟開發者模式又不一樣，所以這邊就不介紹了

在window的電腦可以直接把 apk 放到 Android device 就可以安裝了