使用 Bluemix、Watson 和 Apache Cordova 创建混合移动应用程序
tviu2868
7年前
<p>您拥有一个不错的 Web 应用程序，它非常酷，受到的好品如潮。很不错，对吧？是的，除了它不是移动应用程序，未被应用商店收录。您错过了智能手机和移动设备用户的巨大市场。您知道需要移动化，但不熟悉 iOS，也不了解 Swift 或 Objective-C，而且从未编写过 Android 应用程序，更别提 Windows Phone 应用程序！您一筹莫展。有大量的知识和技术需要学习，而您没有时间。如果有一种更简单的解决方案该多好，所幸真有这么一个解决方案。</p> <p>本文将介绍如何将现有的 Web 应用程序 <em>轻松</em> 转换成混合移动应用程序。混合移动应用程序是使用大家熟知且喜爱的工具（JavaScript、HTML5 和 CSS）构建的。它们封装在一个很薄的原生代码层中，能够访问设备功能，包括位置、加速计、摄像头、联系人等。它们在 iOS、Android、Windows Phone 和其他平台上原生地运行。此外，您可以将它们提交到应用商店。</p> <p>但本教程不会止步于此。我还会介绍 IBM Bluemix 知识，使您能开始在云中托管应用程序。您的用户群是否在不断增长？没有问题。Bluemix 也会相应地增长。您可以从小规模开始，并轻松地扩展。</p> <p>最后，为了让您的应用程序更加完美，我将介绍IBM Watson 提供的一些认知服务。我们将通过 Brewery Master 查看这些服务的实际应用，Brewery Master 是一个托管在 Bluemix 上的应用程序，它利用了 Bluemix 上也有提供的一些尖端 Watson 服务。</p> <h2><strong>构建您的混合应用程序需要做的准备工作</strong></h2> <ul> <li>一个 Bluemix 帐户。</li> <li>一个 DevOps 服务帐户。</li> <li>Java 开发工具包 (JDK) 7 。</li> <li>Apache Cordova – 轻松地将 Web 应用程序转换为混合移动应用程序。</li> <li>Xcode 6 – 构建 iOS 应用程序的工具集，以及其他资源。（iOS 需要它。）*</li> <li>Android 软件开发工具包 (SDK) 。（Android 需要它。）</li> <li>Node.js - 构建快速、可扩展的应用程序。</li> </ul> <p>*备注：iOS 需要 Mac、XCode 6。如果您计划在 iOS 设备上运行该应用程序，还需要加入 iOS 开发人员计划 。</p> <h2><strong>概述</strong></h2> <p>在本文中，我将使用一个托管在 Bluemix 上的现有 Web 应用程序 Brewery Master ，展示如何创建混合移动应用程序。学完本教程后，您将能够在 iOS 和 Android 上原生运行 Brewery Master，并在 Windows Phone 上进行更多探索。</p> <p>如果您已经有一个 Web 应用程序，可以使用它代替 Brewery Master，将它转换为混合移动应用程序。只需按照本文操作，在恰当的时机将 Brewer Master 源代码替换为您自己的代码。要获得最佳的结果，您的 Web 应用程序应该采用一种响应式设计，也就是说，它必须针对不同的屏幕尺寸适当地动态调整布局。</p> <p>关于 Brewery Master</p> <p>Brewery Master 托管在 IBM Bluemix 上，后者是一个平台即服务 (PAAS) 提供者。有了 Bluemix，构建您的应用程序，将非常有趣的服务集成到应用程序中，将应用程序托管在云中，扩展应用程序来满足任何需求就会变得非常容易。</p> <p>Brewery Master 利用了 4 个 Bluemix 服务并在 Node.js 上运行：</p> <ul> <li><a href="/misc/goto?guid=4959729237233388029" rel="nofollow,noindex">Watson Personality Insights</a></li> <li><a href="/misc/goto?guid=4959729237324953275" rel="nofollow,noindex">Insights for 推ter</a></li> <li><a href="/misc/goto?guid=4959729237409015728" rel="nofollow,noindex">Cloudant NoSQL DB</a></li> <li><a href="/misc/goto?guid=4959729237492611863" rel="nofollow,noindex">SDK for Node.js</a></li> </ul> <p>所有这些服务都能轻松集成到您自己的应用程序中。请查阅 Bluemix 了解更多信息。</p> <h2><strong>第 1 步. 为 Android 和 iOS 创建和配置一个混合移动项目</strong></h2> <p>在本节中，将使用 Apache Cordova 创建基础项目，用它为 iOS 和 Android 构建您的混合 Web 应用程序。Apache Cordova 是一组设备 API，允许移动应用程序开发人员从 JavaScript 访问原生的移动设备功能，比如摄像头和加速计。它可与各种各样的 UI 框架结合使用，让用户仅使用 HTML、CSS 和 JavaScript 就能开发智能手机应用程序。</p> <ol> <li>下载并安装 Node.js 。</li> <li>使用 Node Package Manager (npm)（其中随带了 Node.js），安装 Apache Cordova 命令行工具。 <pre> npm install -g cordova</pre> </li> <li>创建混合移动项目。 <pre> cd $HOME cordova create CordovaBreweryMaster com.dimascio.brewery "Brewery Master"</pre> </li> <li>配置混合移动项目。 <ol> <li>导航到 Cordova 项目目录 <pre> cd CordovaBreweryMaster</pre> </li> <li>添加对将原生地运行您的混合应用程序的平台的支持。下面包含了 Windows Phone，但本教程不会提供针对该平台的操作说明。 <pre> cordova platform add ios</pre> <pre> cordova platform add android</pre> <pre> cordova platform add wp8</pre> </li> <li>确认上述平台已添加。 <pre> cordova platform ls</pre> </li> <li>添加原生的地理位置支持。 <pre> cordova plugin add org.apache.cordova.geolocation</pre> </li> <li>确认插件已添加。 <pre> cordova plugin ls</pre> </li> </ol> </li> <li>从 IBM DevOps 服务下载项目源代码。此代码包含一个完整的 Apache Cordova 项目，该项目能构建 iOS 和 Android 混合移动应用程序。 <pre> git clone https://username:password@hub.jazz.net/git/dimascio/CordovaBreweryMaster $HOME/git/CordovaBreweryMaster</pre> <p>其中： username:password 是您的 DevOps Services 凭证。</p> </li> <li>将 Brewery Master Web 应用程序源代码从新克隆的 git repo 复制到您本地的 Cordova 项目。 <p>或者，将您自己的 Web 应用程序源代码复制到 Cordova 项目的 www 目录。</p> <pre> cp -R $HOME/git/CordovaBreweryMaster/www $HOME/CordovaBreweryMaster/www</pre> </li> <li>将下面的内容放在项目根目录 $HOME/CordovaBreweryMaster/ 下一个名为 config.xml 的文件中。这是 Brewery Master 的 Cordova 配置。 <pre> <?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" href="https://brewerymaster.mybluemix.net"> 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></pre> </li> </ol> <p>此文件向 Cordova 提供了各种不同的元素，Cordova 使用这些元素配置应用程序的不同方面，比如应用程序名称、描述、图标、设备特性、首选项等。</p> <h2><strong>第 2 步. 为 Android 和 iOS 构建该应用程序</strong></h2> <p>现在已设置和配置好您的项目，可以构建该混合移动应用程序了。首先为 Android 和 iOS 设置一个构建环境，此操作只需执行一次。</p> <p>配置 Android 构建环境</p> <p>备注：Intel x86 Emulator Accelerator（HAXM 安装程序）提供了更高的 Android 模拟器性能，但不是必须使用它。</p> <ol> <li>下载 Android SDK 。</li> <li>将 $ANDROID_HOME 解压到您最喜欢的位置，例如 /path/to/my/android-sdk-platform 。</li> <li>将 $ANDROID_HOME 添加到 PATH 环境变量，例如 export PATH=$PATH:$ANDROID_HOME/tools 。</li> <li>启动 Android SDK Manager。 <pre> $ANDROID_HOME/tools/android</pre> </li> <li>选择下面的两个屏幕上所示的已选中选项，单击 <strong>Install 1 package...</strong></li> </ol> <p style="text-align: center;"><img src="https://simg.open-open.com/show/918a4b4e5cbb0c5f91e082413ee3a49c.png"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/5a90804d037e66c8b8c1202bc099cc30.png" alt="使用 Bluemix、Watson 和 Apache Cordova 创建混合移动应用程序" width="550" height="696"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/eeddee77c26c1e7bd7c37dce37501a23.png"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/cc30f0f0640dc22fb817d308d465f812.png" alt="使用 Bluemix、Watson 和 Apache Cordova 创建混合移动应用程序" width="550" height="907"></p> <p>配置 iOS 构建环境</p> <ol> <li>如果计划在 iOS 设备上运行您的应用程序，那么您必须是 iOS 开发人员计划 的成员。</li> <li>安装 Xcode 6 。</li> </ol> <p>构建混合应用程序</p> <ol> <li>导航到项目目录。 <pre> cd $HOME/CordovaBreweryMaster</pre> </li> <li>在每个平台上构建该应用程序：iOS、Android 和 Windows Phone 上。 <pre> cordova build ios</pre> <pre> cordova build android</pre> <pre> cordova build wp8</pre> <p>构建输出结果将存储在 $HOME/CordovaBreweryMaster/platform/<platform> 。</p> <p>其中 <platform> 是 ios、android、wp8 等。在后面几节中，我们将再次访问每个平台目录来运行该应用程序。</p> </li> </ol> <h2><strong>在 Android 和 iOS 上运行混合移动应用程序</strong></h2> <p>在本节中，将使用以下工具运行该应用程序：</p> <ul> <li>iOS 模拟器</li> <li>Android 设备</li> <li>Android 模拟器</li> </ul> <p>设置 iOS 模拟器并运行混合应用程序</p> <ol> <li>将目录更改为 iOS 平台。 <pre> cd $HOME/CordovaBreweryMaster/platform/ios</pre> </li> <li>启动 Xcode 并打开 Brewery Master.xcodeproj 。</li> <li>选择一个 iOS 设备，例如 iPhone 6。</li> </ol> <p><img src="https://simg.open-open.com/show/ef54e42206989123d8e46704456b53b5.png"></p> <p> </p> <p>4.单击 <strong>Build and then run the current scheme</strong> 按钮。</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/20a0a710ac4b2f3d70a321d601b15f76.png"></p> <p> </p> <p>5.该应用程序现在已在 iOS 模拟器中运行。尝试一下！</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/cf61cdd14bf50e836c33b19d31b8acf4.png"> <img src="https://simg.open-open.com/show/16185cd74b1f676ab10c26a318c88682.png"> <img src="https://simg.open-open.com/show/7c7ebe005ab36f3393af515e5e8e93e2.png"></p> <p><strong>在 Android 设备上设置和运行混合应用程序</strong></p> <ol> <li>更改目录，如下所示。 <pre> cd $HOME/CordovaBreweryMaster/platform/android/ant-build</pre> </li> <li>将 MainActivity-debug.apk 复制到您的 Android 设备。</li> <li>双击 .apk 安装。</li> <li>启动 Brewery Master！</li> </ol> <p><strong>设置 Android 模拟器</strong></p> <p>使用 Android 模拟器运行应用程序很容易，但设置模拟器有点繁琐。幸运的是，您已在配置 Android 构建环境时完成了大部分工作。</p> <ol> <li>下载 Android 系统镜像。 <pre> $ANDROID_HOME/tools/android sdk</pre> </li> <li>创建一个 Android 虚拟设备。 <pre> $ANDROID_HOME/tools/android avd</pre> <img src="https://simg.open-open.com/show/9b380e34c8ccc57afe12e08dc193757b.png"></li> </ol> <p>3.单击 <strong>Device Definitions</strong> 按钮。</p> <p>4.选择一个设备，例如 Nexus 5 by Google。</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/4b84795c6fdf2ba6a3a4be786012da7d.png"></p> <p>5.单击 <strong>Create AVD...</strong> 。</p> <p>6.确保字段 Target 、 CPU/ABI 和 Skin 已填入如下信息，然后单击 <strong>OK</strong> ，在下一个屏幕上再次单击 <strong>OK</strong> 。</p> <p style="text-align: center;"> </p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/b5ab7ab589e1ab52e019bf62e9cd9354.png"> <img src="https://simg.open-open.com/show/6c94c7082058e1167767593d77ebf073.png"> <img src="https://simg.open-open.com/show/65c358cfc785cbb59de37d27a45f5ea8.png"></p> <p>在 Androif 模拟器中运行该应用程序</p> <ol> <li>执行以下步骤来启动 Android 模拟器： <pre> cd $HOME/CordovaBreweryMaster</pre> <pre> cordova build android</pre> <pre> ./platforms/android/cordova/run –emulator -nobuild</pre> </li> <li>等待片刻，有时模拟器启动速度可能很慢。</li> </ol> <p> </p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/ae2cfa7b0418a3dec4db3612cc013f7f.png"></p> <p>3.应用程序启动后，您看到附近啤酒厂的列表。尝试一下！查看每个啤酒厂的啤酒列表，探索一些认知元素，比如 Brewery 的 Vibe，或者向 Waston 询问有关啤酒的问题。</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/844ff3e6185fe84ec19bf60325b3ab5a.png"> <img src="https://simg.open-open.com/show/9760cc5c47fa3c306bf20cd493afc495.png"> <img src="https://simg.open-open.com/show/03577afb3701f59e963558d26a77f118.png"></p> <p>4.下面介绍的 Vibe 和 Ask Watson 功能使用了 Bluemix 提供的 IBM Watson 服务 ( Watson Personality Insights )。</p> <p>备注：Bluemix 中没有提供啤酒语料库。Bluemix Watson Question and Answer 服务目前提供了旅游和医疗领域的语料库。</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/962da9cc784c0beb79eac64df4cce89a.png"> <img src="https://simg.open-open.com/show/c9178af4a8bd04212ede5ec4c408ebe1.png"></p> <h2>结束语</h2> <p>大功告成。您的应用程序现在已在 iOS 和 Android 上原生地运行！此外，您已开始使用 Bluemix，能够访问大量的服务，其中包括 IBM Watson 提供的认知服务。接下来会发生什么？您的应用程序的用户肯定会极速增长。您毫不费力地就获得了 Bluemix 和扩展应用程序来满足任何需求所需的工具！</p> <p> </p> <p>来自：http://www.ibm.com/developerworks/cn/mobile/mo-transform-existing-web-app-to-hybrid-mobile/index.html?ca=drs-</p> <p> </p>