Just a Computer Graphics Studio & My Life

之前聽正在創業的朋友想用Ionic來開發多平台Mobile App,因為想要減少開發成本,只要一個人就能開發iOS和Android等平台。如今有機會來嘗試,又遇Cordova這個平台,其實它的前身是PhoneGap。先不管它們如此複雜的身世背景,直接來安裝與開發 Ionic,就能知道它用來開發Mobile App有多神奇!

ionic.png

直接參考官方教學:Start building with Ionic!

只要三個步驟,就能在本機端運行範例專案!在此我已Mac OS X來撰寫紀錄。第四步驟是我自己額外加入喔~

Install Ionic 安裝

First, install Node.js. Then, install the latest Cordova and Ionic command-line tools. Follow the Android and iOS platform guides to install required platform dependencies.

Note: iOS development requires Mac OS X. iOS simulator through the Ionic CLI requires the ios-sim npm package, which can be installed with the command sudo npm -g install ios-sim.

npm install -g cordova ionic

.

Start a project 開始專案

Create an Ionic project using one of our ready-made app templates, or a blank one to start fresh.

ionic start myApp tabs

.

ionic tutorial.png

這裡有三種範例可以選擇。

Run it 運行

Use the Ionic tool to build, test, and run your apps (or use Cordova directly). Make sure to substitute iOS with Android to build for Android.

Then, try Ionic View to share your apps with testers and clients or to easily test on new devices.

cd myApp
ionic platform add ios
ionic build ios
ionic emulate ios

.

我們可以將開發好的App上傳到Ionic平台,然後下載Ionic View App(iOS和Android皆可),輸入ID後就能直接在手機上測試,再也不需要透過手機連接電腦來測試App囉~

Upload 上傳

ionic upload

.

上傳後會看到專案ID,可以分享給他人來測試。

Uploading app….

Saved app_id, writing to ionic.io.bundle.min.js…

Successfully uploaded (735b2113)

Share your beautiful app with someone:

$ ionic share EMAIL

Saved api_key, writing to ionic.io.bundle.min.js…

這是網頁上的Ionic平台,登入後可見自己上傳的App專案。

ionic tutorial2.png

這是Ionic View App登入帳號後,看到自己剛才上傳的App專案。

ionic tutorial3.jpg

開發的時候可以有三種測試方式Web、iOS、Android。到專案資料夾後輸入對應的指令如下⋯⋯

To run your app in the browser (great for initial development):

ionic serve

.

我是使用Chrome來縮放視窗,看起來真的還滿像在手機跑App。

ionic-web2

To run on iOS:

ionic run ios

.

想要在iOS模擬器上運行我們的專案,當然也就要先安裝Xcode,輸入指令後會去找iOS模擬器的所在地,此時不要手機連接電腦,因為它會以實機為優先。我還沒成功在實機上運行,似乎需要什麼設定。

ionic-ios

To run on Android:

ionic run android

.

還沒試過Android模擬器,有順利成功的人請教我XD~

官方詳細視頻教學:

.

照著視頻教學,很快就能建置好環境囉~

參考:Start building with Ionic!Share your apps with the world

廣告

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: