使用 Bluemix、Watson 和 Apache Cordova 创建混合移动应用程序（1）

look_w

第 1 步. 为 Android 和 iOS 创建和配置一个混合移动项目在本节中，将使用   创建基础项目，用它为 iOS 和 Android 构建您的混合 Web 应用程序。Apache Cordova 是一组设备 API，允许移动应用程序开发人员从 JavaScript 访问原生的移动设备功能，比如摄像头和加速计。它可与各种各样的 UI 框架结合使用，让用户仅使用 HTML、CSS 和 JavaScript 就能开发智能手机应用程序。

• 下载并安装  。
• 使用 Node Package Manager (npm)（其中随带了 Node.js），安装 Apache Cordova 命令行工具。

  1	npm install -g cordova

  
  
  
  
• 创建混合移动项目。

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

  
  
  
  
• 配置混合移动项目。
  • 导航到 Cordova 项目目录

    1	cd CordovaBreweryMaster

    
    
    
    
  • 添加对将原生地运行您的混合应用程序的平台的支持。下面包含了 Windows Phone，但本教程不会提供针对该平台的操作说明。

    1	cordova platform add ios

    
    
    
    

    1	cordova platform add android

    
    
    
    

    1	cordova platform add wp8

    
    
    
    
  • 确认上述平台已添加。

    1	cordova platform ls

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

    1	cordova plugin add org.apache.cordova.geolocation

    
    
    
    
  • 确认插件已添加。

    1	cordova plugin ls

    
    
    
    
• 从 IBM DevOps 服务下载项目源代码。此代码包含一个完整的 Apache Cordova 项目，该项目能构建 iOS 和 Android 混合移动应用程序。

  1 2	git clone <a href="https://username:password@hub.jazz.net/git/dimascio/CordovaBreweryMaster">https://<em>username:password</em>@hub.jazz.net/git/dimascio/CordovaBreweryMaster</a> $HOME/git/CordovaBreweryMaster

  
  
  
  其中：username:password 是您的 DevOps Services 凭证。
  
• 将 Brewery Master Web 应用程序源代码从新克隆的 git repo 复制到您本地的 Cordova 项目。或者，将您自己的 Web 应用程序源代码复制到 Cordova 项目的 www 目录。
  

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

  
  
  
  
• 将下面的内容放在项目根目录 $HOME/CordovaBreweryMaster/ 下一个名为 config.xml 的文件中。这是 Brewery Master 的 Cordova 配置。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

  <?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>

  
  
  
  

此文件向 Cordova 提供了各种不同的元素，Cordova 使用这些元素配置应用程序的不同方面，比如应用程序名称、描述、图标、设备特性、首选项等。请参阅   了解细节。