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如下：
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
  </head>
  <body ng-app="starter">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>     
      </ion-content>
    </ion-pane>
  </body>
</html>

App的主程式：app.js

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

執行Ionic專案

雖然index.html主要作用是app的樣板，但仍可以直接在index.html內編輯頁面內容，例如改寫27行的標題文字，以及在30行<ion-content>指令內加入任意內容：
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">空白專案</h1>
      </ion-header-bar>
      <ion-content>
          首頁內容
      </ion-content>
    </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)