| 随着Google的Android手机和苹果的iPhone手机的逐渐普及，越来越多开发者加入到移动应用开发的大军当中。目前移动终端中的冠亚军AnBluemix
是一个开放式 PaaS，其中包括许多由 IBM、第三方团体，甚至是像您这样的用户所创建的嵌入式预定义服务。这些服务是中间件（例如，数据库），适用于您的
Web 应用程序。
根据 Bluemix 文档，所有这些服务都必须实现 RESTful API，您可以从现代浏览器等
JavaScript 环境访问它。
Apache Cordova (PhoneGap) 是一个基于 HTML5、CSS3
和 JavaScript 的移动应用开发框架。Cordova 将所有这些 Web 资源都包装为一个应用程序，在移动设备上充当一个
Web 服务器，并使用 Ajax。
在 Cordova 开发过程中，可以将 Bluemix 服务用作 Ajax
的资源。本文将演示通过使用 Bluemix Mobile Data 服务构建一个 Android Cordova
应用程序（联系人应用程序）的步骤。
备注：本例基于 Windows 7。
步骤 1. 在 Bluemix 上创建一个移动样板
1.在您的 Web 浏览器中，登录到 Bluemix。
2.在 Bluemix 仪表板中，单击 CREATE AN APP 按钮并选择
Mobile Cloud 样板：
3.在样板中配置您的混合应用程序需要使用的后端服务（如 Mobile Data
服务），然后单击 CREATE APPLICATION：
4.输入应用程序名称，并为 Host 值输入惟一的名称（Bluemix
不允许重复的主机名），然后单击 CREATE：
仪表板上已添加了 Bluemix 应用程序：
5.单击该应用程序链接，打开应用程序的概述页面。记录应用程序的 ID，稍后您需要用到它：
6.单击在 ID 左侧的 Download SDKs 链接，选择 JavaScript
SDK，将 SDK 的内容解压缩到您选择的目录：
如果需要的话，请参考 JavaScript SDK 中的 API 文档获得有关的内容。
步骤 2. 创建一个 Cordova 项目
1.在 PC 上打开命令提示符，并选择一个目录作为您的工作区，比如 c:/workspace/android。工作区是一个文件夹，用于存储您的
Cordova 项目。
2.使用 Node.js npm 命令安装 Cordova：
以这种方式安装 Cordova 为快速构建 Cordova 应用提供了
便利工具。
3.通过按以下顺序运行命令，创建一个 Cordova 项目：
cordova create demo com.ibm.demo MyDemo
cd demo
cordova platform add android |
cordova platform add android 命令可以创建 Android 支持，因为您已经安装了
Android SDK。
4.为 Cordova 添加必要的插件，运行以下命令：
cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.console |
或者，运行以下命令来添加其他插件：
cordova plugin add org.apache.cordova.camera
cordova plugin add org.apache.cordova.contacts
cordova plugin add org.apache.cordova.dialogs
cordova plugin add org.apache.cordova.geolocation |
5.在 demo 子目录中，将根路径中的 www 文件夹替换为您先前从我的
DevOps Services 项目下载的扩展 www-raw.zip 中解压缩出来的 www 文件夹。
6.从 Cordova 项目的根目录运行模拟器，以验证一切都正常：
模拟器显示了您所创建的应用程序的初始界面。在文本框中，键入 Jim，以便显示名为
Jim Halpert 的联系人： 在 Android 模拟器中的应用程序截屏，显示了联系人，以便响应输入
步骤 3. 实现 Bluemix Mobile Data API
现在，将要链接应用程序与 Bluemix，使得信息能够存储在云中的 Mobile Data 层：
1.您需要使用两个模块 — IBMBaaS 和 IBMData，它们来自您在步骤
1.6 中下载的 SDK。将 IBMData.js 和 IBMBaaS.js 复制到解压缩出来的原始代码的
www/js/plugin 文件夹。
2.在 project_name/www/js/storage 文件夹中创建一个新的
JavaScript 文件，将它命名为 blue-store.js。
3.使用您喜欢的编辑器，将下面的代码添加到 blue-store.js
脚本，输入步骤 1.5 中在第一行显示的应用程序密钥；
IBMBaaS.initializeSDK("place your bluemix app key here");
IBMData.initializeService();
var data = IBMData.getService();
var query = data.Query.ofType("Person");
var BlueStore = function(successCallback, errorCallback) {
this.findByName = function(searchKey, callback) {
var employees = [];
query.find().then(function(people) {
people.forEach(function(person) {
var fullName = person.get("firstName") + " " + person.get("lastName");
if(fullName.toLowerCase().indexOf(searchKey.toLowerCase()) > -1){
employees.push(person.get());
}
});
callback(employees);
});
}
this.findById = function(myid, callback) {
console.log(myid);
query.find({id:myid}).then(function(person) {
//callLater(callback, person[0].get());//callback(person);
callback(person[0].get());
});
}
var callLater = function(callback, data) {
if (callback) {
setTimeout(function() {
callback(data);
});
}
}
callLater(successCallback);
} |
4.在 project_name/www/js/main.js 中，将
init 函数中的 MemoryStore 替换为 BlueStore。
5.在 project_name/www 文件夹中的 index.html
中修改 JavaScript 标记，添加 Bluemix JavaScript 库和 BlueStore
脚本。当应用程序在模拟器中或在真实设备上运行时，会自动添加 Cordova.js。最终的 HTML 代码应该如下所示：
<script src="js/plugin/IBMBaaS.js"></script>
<script src="js/plugin/IBMData.js"></script>
<script src="cordova.js"></script>
<script src="lib/jquery-1.8.2.min.js"></script>
<script src="js/storage/blue-store.js"></script>
<script src="js/HomeView.js"></script>
<script src="js/EmployeeView.js"></script>
<script src="js/main.js"></script>
</body>
</html> |
这就是您将需要的所有 JavaScript；删除其他任何东西。
6.检查根文件夹中的 config.xml 文件，确保 index.html
是引导页面，并且 Bluemix 网站在跨域白名单中：
<content src="index.html" />
<access origin="https://mobile.ng.bluemix.net" />
</widget> |
没有必要检查已生成的 Andr??oidManifest.xml 文件。
7.运行模拟器并测试：
Bluemix 应用程序是可以访问的，但它尚未没有包含任何数据。
步骤 4. 将数据添加到 Mobile Data 服务
1.使用类似于下面的方法将您的数据转换成 JSON 字符串，然后将其保存到一个文本文件：
[{"id":1, "firstName":"Robin", "lastName":"Shi", "title":"Vice President, North East",
"managerId":0, "city":"New York, NY", "cellPhone":"212-999-8888", "officePhone":"212-999-8887",
"email":"ryan@ibm.com"},...] |
（ID、FIRSTNAME 和 LASTNAME 属性是必需的。）
2.在 Bluemix 仪表板中，找到并单击 Mobile Data 服务：
应用程序的 Mobile Data 服务的截屏
3.在服务详情页面，拖动/单击文本文件进行拨号： 拖动/单击拨号的截屏
4.在 Import Data 对话框中，在 Class Name 字段输入
Person： Imort Data 对话框的截屏
5.单击 Import 将数据上传到服务器端： 数据类列表的截屏
6.将您的肖像照片放进 Cordova 项目的 project_name/www/img
文件夹。调用每个文件 Firstname_Lastname（与 JSON 对象中的匹配）。例如，对于在步骤
4.1 所示的记录，图像文件名应该是 Robin_Shi.jpg。
步骤 5. 运行应用程序
1.在模拟器中启动应用程序。在启动时，应用程序将打开 index.html
页面，其中只显示了应用程序的标题和一个空文本框：
2.输入联系人的姓名或姓名的一部分。onkeyup 被触发并从云中检索该联系人的姓名与职位：
3.选中联系人，并将页面滑动到该联系人的详细信息页面：
如果您安装了步骤 2.4 中的可选插件，那么您还可以将联系人添加到本地通讯录中，并使用相机更改其肖像，您甚至可以在这个页面上用
GPS 找到自己。
结束语
Bluemix 为基于 Web 的应用程序或移动应用程序提供了简单而又强大的解决方案。该开放平台也涉及许多用作服务的
IBM 产品，这使得 Bluemix 成为 IT 领域的瑞士军刀。
|
