2015年4月16日 星期四

Hybrid Apps開發系列之2：第一個專案

Ionic/Cordova專案開發環境設定好之後，選擇自己習慣的開發工具（本系列以NetBeans 8.0為開發工具），便可進行專案開發。Ionic專案可以web browser（本系列以google chrome為測試browser）檢視執行結果，所以mobile SDK可先不設定。不過，Ionic畢竟是用來開發mobile apps的框架，部分功能還是必須在行動平台上才能執行，browser上並無法看到執行結果。

建立第一個Ionic專案

開啟cmd.exe，切換到打算放置Ionic專案的資料夾，例如：

C:\Ionic>
輸入下列指令
C:\Ionic>ionic start todo blank
start是建立新專案的指令，todo則是新專案的名稱，會在此處建立名為todo，並產生ionic專案。最後一個參數則是指令Ionic提供的樣板，blank代表產生空的樣板。目前，Ionic共提供三種樣板：
 因此，如果輸入
C:\Ionic>ionic start todo tabs
或
C:\Ionic>ionic start todo sidemenu
將分別產生頁籤 (tabs) 與側邊選單 (side menu)式的專案內容。

專案建好之後，todo資料夾內將會產生下列資料：
圖1. www資料夾為專案主要程式碼所在

隨後，便可進行程式的編輯。以NetBeans 8.x為例：使用HTML5 Application with Existing Sources選項，建立起HTML5類型的專案。
圖2. 以HTML5 Application with Existing Sources建立專案
並將todo\www資料夾，做為專案的Site Root：
圖3. 以www資料夾做為NetBeans專案的Site Root
NetBeans專案建好之後，其中index.html，js\app.js兩個檔案是與app執行直接相關的兩個檔案。
圖4. todo\www下的檔案結構

App的版面設定檔：index.html

Ionic專案通常會在index.html內設定app版面 (layout)，而非當成單一頁面或首頁進行內容編輯。Ionic blank樣板產生的index.html如下：
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  6.     <title></title>
  7.  
  8.     <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  9.     <link href="css/style.css" rel="stylesheet">
  10.  
  11.     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
  12.     <link href="css/ionic.app.css" rel="stylesheet">
  13.     -->
  14.  
  15.     <!-- ionic/angularjs js -->
  16.     <script src="lib/ionic/js/ionic.bundle.js"></script>
  17.  
  18.     <!-- cordova script (this will be a 404 during development) -->
  19.     <script src="cordova.js"></script>
  20.  
  21.     <!-- your app's js -->
  22.     <script src="js/app.js"></script>
  23.   </head>
  24.   <body ng-app="starter">
  25.     <ion-pane>
  26.       <ion-header-bar class="bar-stable">
  27.         <h1 class="title">Ionic Blank Starter</h1>
  28.       </ion-header-bar>
  29.       <ion-content>     
  30.       </ion-content>
  31.     </ion-pane>
  32.   </body>
  33. </html>

App的主程式：app.js

除了index.html當成app的樣板外，Ionic專案的主程式則是app.js。blank樣板產生的app.js如下：
  1. angular.module('starter', ['ionic'])
  2. .run(function($ionicPlatform) {
  3.   $ionicPlatform.ready(function() {
  4.     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
  5.     // for form inputs)
  6.     if(window.cordova && window.cordova.plugins.Keyboard) {
  7.       cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
  8.     }
  9.     if(window.StatusBar) {
  10.       StatusBar.styleDefault();
  11.     }
  12.   });
  13. })

執行Ionic專案

雖然index.html主要作用是app的樣板，但仍可以直接在index.html內編輯頁面內容，例如改寫27行的標題文字，以及在30行<ion-content>指令內加入任意內容：
  1.     <ion-pane>
  2.       <ion-header-bar class="bar-stable">
  3.         <h1 class="title">空白專案</h1>
  4.       </ion-header-bar>
  5.       <ion-content>
  6.           首頁內容
  7.       </ion-content>
  8.     </ion-pane>
經此修改後，從cmd視窗切換到Ionic專案所在資料夾，再輸入"ionic serve"指令，便可從browser檢視執行結果（注意：微軟IE無法執行）
C:\Ionic>cd todo
C:\Ionic\todo>ionic serve

在手機/Emulator上檢視執行結果

如果想在手機或模擬器(emulator)，例如Android手機上檢視執行結果，則必須先為Ionic專案加入手機平台：
C:\Ionic\todo>ionic platform add android
隨後在Android SDK安裝設定好的情況下，輸入build指令：
C:\Ionic\todo>ionic build

最後再以ionic emulate(模擬器)或ionic run(手機以USB接上電腦，並已順利驅動)執行app： 
C:\Ionic\todo>ionic emulate
或
C:\Ionic\todo>ionic run
手機執行畫面如下所示：
圖5. Android手機執行todo專案的畫面

Ionic相關指令

從cmd視窗執行ionic時可給予下列指令：
張貼者： 於
標籤： , , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)