使用 Bluemix、Watson 和 Apache Cordova 創建混合移動應用程序

您擁有一個不錯的 Web 應用程序，它非常酷，受到的好品如潮。很不錯，對吧？是的，除了它不是移動應用程序，未被應用商店收錄。您錯過了智能手機和移動設備用戶的巨大市場。您知道需要移動化，但不熟悉 iOS，也不了解 Swift 或 Objective-C，而且從未編寫過 Android 應用程序，更別提 Windows Phone 應用程序！您一籌莫展。有大量的知識和技術需要學習，而您沒有時間。如果有一種更簡單的解決方案該多好，所幸真有這么一個解決方案。

本文將介紹如何將現有的 Web 應用程序 輕松 轉換成混合移動應用程序。混合移動應用程序是使用大家熟知且喜愛的工具（JavaScript、HTML5 和 CSS）構建的。它們封裝在一個很薄的原生代碼層中，能夠訪問設備功能，包括位置、加速計、攝像頭、聯系人等。它們在 iOS、Android、Windows Phone 和其他平臺上原生地運行。此外，您可以將它們提交到應用商店。

但本教程不會止步于此。我還會介紹 IBM Bluemix 知識，使您能開始在云中托管應用程序。您的用戶群是否在不斷增長？沒有問題。Bluemix 也會相應地增長。您可以從小規模開始，并輕松地擴展。

最后，為了讓您的應用程序更加完美，我將介紹IBM Watson 提供的一些認知服務。我們將通過 Brewery Master 查看這些服務的實際應用，Brewery Master 是一個托管在 Bluemix 上的應用程序，它利用了 Bluemix 上也有提供的一些尖端 Watson 服務。

構建您的混合應用程序需要做的準備工作

• 一個 Bluemix 帳戶。
• 一個 DevOps 服務帳戶。
• Java 開發工具包 (JDK) 7 。
• Apache Cordova – 輕松地將 Web 應用程序轉換為混合移動應用程序。
• Xcode 6 – 構建 iOS 應用程序的工具集，以及其他資源。（iOS 需要它。）*
• Android 軟件開發工具包 (SDK) 。（Android 需要它。）
• Node.js - 構建快速、可擴展的應用程序。

*備注：iOS 需要 Mac、XCode 6。如果您計劃在 iOS 設備上運行該應用程序，還需要加入 iOS 開發人員計劃 。

概述

在本文中，我將使用一個托管在 Bluemix 上的現有 Web 應用程序 Brewery Master ，展示如何創建混合移動應用程序。學完本教程后，您將能夠在 iOS 和 Android 上原生運行 Brewery Master，并在 Windows Phone 上進行更多探索。

如果您已經有一個 Web 應用程序，可以使用它代替 Brewery Master，將它轉換為混合移動應用程序。只需按照本文操作，在恰當的時機將 Brewer Master 源代碼替換為您自己的代碼。要獲得最佳的結果，您的 Web 應用程序應該采用一種響應式設計，也就是說，它必須針對不同的屏幕尺寸適當地動態調整布局。

關于 Brewery Master

Brewery Master 托管在 IBM Bluemix 上，后者是一個平臺即服務 (PAAS) 提供者。有了 Bluemix，構建您的應用程序，將非常有趣的服務集成到應用程序中，將應用程序托管在云中，擴展應用程序來滿足任何需求就會變得非常容易。

Brewery Master 利用了 4 個 Bluemix 服務并在 Node.js 上運行：

• Watson Personality Insights
• Insights for 推ter
• Cloudant NoSQL DB
• SDK for Node.js

所有這些服務都能輕松集成到您自己的應用程序中。請查閱 Bluemix 了解更多信息。

第 1 步. 為 Android 和 iOS 創建和配置一個混合移動項目

在本節中，將使用 Apache Cordova 創建基礎項目，用它為 iOS 和 Android 構建您的混合 Web 應用程序。Apache Cordova 是一組設備 API，允許移動應用程序開發人員從 JavaScript 訪問原生的移動設備功能，比如攝像頭和加速計。它可與各種各樣的 UI 框架結合使用，讓用戶僅使用 HTML、CSS 和 JavaScript 就能開發智能手機應用程序。

1. 下載并安裝 Node.js 。
2. 使用 Node Package Manager (npm)（其中隨帶了 Node.js），安裝 Apache Cordova 命令行工具。

   npm install -g cordova

3. 創建混合移動項目。

   cd $HOME cordova create CordovaBreweryMaster com.dimascio.brewery "Brewery Master"

4. 配置混合移動項目。
   1. 導航到 Cordova 項目目錄

      cd CordovaBreweryMaster

   2. 添加對將原生地運行您的混合應用程序的平臺的支持。下面包含了 Windows Phone，但本教程不會提供針對該平臺的操作說明。

      cordova platform add ios

      cordova platform add android

      cordova platform add wp8

   3. 確認上述平臺已添加。

      cordova platform ls

   4. 添加原生的地理位置支持。

      cordova plugin add org.apache.cordova.geolocation

   5. 確認插件已添加。

      cordova plugin ls

5. 從 IBM DevOps 服務下載項目源代碼。此代碼包含一個完整的 Apache Cordova 項目，該項目能構建 iOS 和 Android 混合移動應用程序。

   git clone https://username:password@hub.jazz.net/git/dimascio/CordovaBreweryMaster
   $HOME/git/CordovaBreweryMaster

   其中： username:password 是您的 DevOps Services 憑證。

6. 將 Brewery Master Web 應用程序源代碼從新克隆的 git repo 復制到您本地的 Cordova 項目。

   或者，將您自己的 Web 應用程序源代碼復制到 Cordova 項目的 www 目錄。

   cp -R $HOME/git/CordovaBreweryMaster/www $HOME/CordovaBreweryMaster/www

7. 將下面的內容放在項目根目錄 $HOME/CordovaBreweryMaster/ 下一個名為 config.xml 的文件中。這是 Brewery Master 的 Cordova 配置。

   <?xml version='1.0' encoding='utf-8'?>
   <widget id="com.dimascio.brewery" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
      <name>Brewery Master</name>
      <description>
        Brewery Master - beer, cognitive style
      </description>
      <author email="cdimascio@gmail.com" >
        Carmine DiMascio
      </author>
      <content src="index.html"/>
      <access origin="*"/>
   
      <icon src="res/icon/logo.png"/>
   
      <platform name="ios">
        <!-- images are determined by width and height. The following are supported -->
        <splash src="res/icon/logo.png" width="320" height="480"/>
        <splash src="res/icon/logo.png" width="640" height="960"/>
        <splash src="res/icon/logo.png" width="768" height="1024"/>
        <splash src="res/icon/logo.png" width="1536" height="2048"/>
        <splash src="res/icon/logo.png" width="1024" height="768"/>
        <splash src="res/icon/logo.png" width="2048" height="1536"/>
        <splash src="res/icon/logo.png" width="640" height="1136"/>
        <splash src="res/icon/logo.png" width="750" height="1334"/>
        <splash src="res/icon/logo.png" width="1242" height="2208"/>
        <splash src="res/icon/logo.png" width="2208" height="1242"/>
      </platform>
   
      <preference name="BackupWebStorage" value="local"/>
      <preference name="permissions" value="none"/>
   </widget>

此文件向 Cordova 提供了各種不同的元素，Cordova 使用這些元素配置應用程序的不同方面，比如應用程序名稱、描述、圖標、設備特性、首選項等。

第 2 步. 為 Android 和 iOS 構建該應用程序

現在已設置和配置好您的項目，可以構建該混合移動應用程序了。首先為 Android 和 iOS 設置一個構建環境，此操作只需執行一次。

配置 Android 構建環境

備注：Intel x86 Emulator Accelerator（HAXM 安裝程序）提供了更高的 Android 模擬器性能，但不是必須使用它。

1. 下載 Android SDK 。
2. 將 $ANDROID_HOME 解壓到您最喜歡的位置，例如 /path/to/my/android-sdk-platform 。
3. 將 $ANDROID_HOME 添加到 PATH 環境變量，例如 export PATH=$PATH:$ANDROID_HOME/tools 。
4. 啟動 Android SDK Manager。

   $ANDROID_HOME/tools/android

5. 選擇下面的兩個屏幕上所示的已選中選項，單擊 Install 1 package...

配置 iOS 構建環境

1. 如果計劃在 iOS 設備上運行您的應用程序，那么您必須是 iOS 開發人員計劃 的成員。
2. 安裝 Xcode 6 。

構建混合應用程序

1. 導航到項目目錄。

   cd $HOME/CordovaBreweryMaster

2. 在每個平臺上構建該應用程序：iOS、Android 和 Windows Phone 上。

   cordova build ios

   cordova build android

   cordova build wp8

   構建輸出結果將存儲在 $HOME/CordovaBreweryMaster/platform/<platform> 。

   其中 <platform> 是 ios、android、wp8 等。在后面幾節中，我們將再次訪問每個平臺目錄來運行該應用程序。

在 Android 和 iOS 上運行混合移動應用程序

在本節中，將使用以下工具運行該應用程序：

• iOS 模擬器
• Android 設備
• Android 模擬器

設置 iOS 模擬器并運行混合應用程序

1. 將目錄更改為 iOS 平臺。

   cd $HOME/CordovaBreweryMaster/platform/ios

2. 啟動 Xcode 并打開 Brewery Master.xcodeproj 。
3. 選擇一個 iOS 設備，例如 iPhone 6。

 

4.單擊 Build and then run the current scheme 按鈕。

 

5.該應用程序現在已在 iOS 模擬器中運行。嘗試一下！

在 Android 設備上設置和運行混合應用程序

1. 更改目錄，如下所示。

   cd $HOME/CordovaBreweryMaster/platform/android/ant-build

2. 將 MainActivity-debug.apk 復制到您的 Android 設備。
3. 雙擊 .apk 安裝。
4. 啟動 Brewery Master！

設置 Android 模擬器

使用 Android 模擬器運行應用程序很容易，但設置模擬器有點繁瑣。幸運的是，您已在配置 Android 構建環境時完成了大部分工作。

1. 下載 Android 系統鏡像。

   $ANDROID_HOME/tools/android sdk

2. 創建一個 Android 虛擬設備。

   $ANDROID_HOME/tools/android avd

   

3.單擊 Device Definitions 按鈕。

4.選擇一個設備，例如 Nexus 5 by Google。

5.單擊 Create AVD... 。

6.確保字段 Target 、 CPU/ABI 和 Skin 已填入如下信息，然后單擊 OK ，在下一個屏幕上再次單擊 OK 。

 

在 Androif 模擬器中運行該應用程序

1. 執行以下步驟來啟動 Android 模擬器：

   cd $HOME/CordovaBreweryMaster

   cordova build android

   ./platforms/android/cordova/run –emulator -nobuild

2. 等待片刻，有時模擬器啟動速度可能很慢。

 

3.應用程序啟動后，您看到附近啤酒廠的列表。嘗試一下！查看每個啤酒廠的啤酒列表，探索一些認知元素，比如 Brewery 的 Vibe，或者向 Waston 詢問有關啤酒的問題。

4.下面介紹的 Vibe 和 Ask Watson 功能使用了 Bluemix 提供的 IBM Watson 服務 ( Watson Personality Insights )。

備注：Bluemix 中沒有提供啤酒語料庫。Bluemix Watson Question and Answer 服務目前提供了旅游和醫療領域的語料庫。

結束語

大功告成。您的應用程序現在已在 iOS 和 Android 上原生地運行！此外，您已開始使用 Bluemix，能夠訪問大量的服務，其中包括 IBM Watson 提供的認知服務。接下來會發生什么？您的應用程序的用戶肯定會極速增長。您毫不費力地就獲得了 Bluemix 和擴展應用程序來滿足任何需求所需的工具！

 

來自：http://www.ibm.com/developerworks/cn/mobile/mo-transform-existing-web-app-to-hybrid-mobile/index.html?ca=drs-