[MAN鐵人賽]Day 15:AngularJS - Using Phonegap to create hybrid app | Blackie的失敗筆記 - 點部落

2013-10-23

[MAN鐵人賽]Day 15:AngularJS - Using Phonegap to create hybrid app

5827
0
Android

摘要:[MAN鐵人賽]Day 15:AngularJS - Localization

簡單的架構流程：

詳細組成架構如下圖解：

Setup

Phonegap在新版2.9.0之後開始支援NodeJS安裝並建立專案檔，大幅減化了專案建立的麻煩（以前都要打一堆指令才建立的出來..NodeJS好棒）

安裝NodeJS請參考Node.js 台灣社群協作電子書

安裝完可透過下面一行指令簡單透過NPM安裝Phonegap

$ sudo npm install -g phonegap

接者我們來建立第一個Hello World with Phonegap

建立Phonegap專案
```
 $ phonegap create helloworld
```
切換至建立專案的資料夾路徑下
```
 $ cd helloworld
```
建立屬於該專案的phonegap 平台程式
```
 phonegap run android
```
或
```
 phonegap run ios
```
執行他會幫你先測試你目前的環境能不能建置相關平台，若不行則會幫你下載所需的檔案或程式後才進行平台程式的產生。下面以iOS的平台程式產生為例：
建立完的目錄會產生以下的內容：

其中www為你運作的實際html,js,css與資源檔案放置的位置,而platforms則是你透過步驟3索建立的每個平台的程式資料(包含各平台可運行的專案檔)，而因為執行的平台產生指令不同所產生內容也不同，但不管如何產生的結果就是該平台可以直接開發的專案程式碼與檔案。

iOS:

Android:
直接執行各專案就可以看到下面的app畫面

ios: 點選資料夾內的HelloWorld.xcodeproj即可打開xcode專案，並直接透過畫面左上的選項選擇模擬器與按下run即可透過模擬運作執行該APP

android: 先開啟eclipse後透過import的方式載入已建立的android專案資料夾，之後一樣可透過執行模擬器的方式模擬執行該APP

Running Phonegap with JQM

上面快地教大家如何建立Phonegap專案並建立APP，皆下來我們將透過簡單的修改HTML並使用JQM來修改呈現的樣貌。

首先下載jQuery與JQM，這邊要注意一下JQM支援的jQuery版本為何(目前JQM 1.3.2對應支援的jQuery為1.9.1)

下載完之後我們先將檔案放置專案內並將HTML頁面加入js與css的檔案參考路徑，如下(以iOS放入相關js為例)：

folder

而index.html做下面的修改：

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.1.3.2.min.css" />
    <title>Hello World</title>
</head>
<body>
    <div data-role="page">
        <div data-role="header">
            <h1>Single page</h1>
        </div><!-- /header -->

        <div data-role="content">   
            <p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>      
            <p>Just view the source and copy the code to get started. All the CSS and JS is linked to the jQuery CDN versions so this is super easy to set up. Remember to include a meta viewport tag in the head to set the zoom level.</p>
            <p>This template is standard HTML document with a single "page" container inside, unlike a <a href="multipage-template.html" data-ajax="false">multi-page template</a> that has multiple pages within it. We strongly recommend building your site or app as a series of separate pages like this because it's cleaner, more lightweight and works better without JavaScript.</p>
        </div><!-- /content -->
        <div data-role="footer">
            <h4>Footer content</h4>
        </div><!-- /footer -->
    </div><!-- /page -->
    <!--phonegap-->
    <script type="text/javascript" src="phonegap.js"></script>
    <!--JQM-->
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.3.2.min.js"></script>
    <!--Custom-->
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>
</html>

接著，我們透過xcode重新用模擬器執行該app即可看到下方的樣子：

jqmPhonegap