您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
 
   
 
 
     
   
 订阅
  捐助
利用服务构建一个混合移动应用程序
 
作者:廖煜嵘 来源:51CTO 发布于 2015-6-12
   次浏览      
 

随着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:

npm install -g 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 项目的根目录运行模拟器,以验证一切都正常:

cordova emulate android

模拟器显示了您所创建的应用程序的初始界面。在文本框中,键入 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.运行模拟器并测试:

cordova emulate android

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 领域的瑞士军刀。

   
次浏览       
 
相关文章

手机软件测试用例设计实践
手机客户端UI测试分析
iPhone消息推送机制实现与探讨
Android手机开发(一)
 
相关文档

Android_UI官方设计教程
手机开发平台介绍
android拍照及上传功能
Android讲义智能手机开发
相关课程

Android高级移动应用程序
Android系统开发
Android应用开发
手机软件测试
最新活动计划
软件架构设计方法、案例与实践 8-23[特惠]
Linux内核编程及设备驱动 8-15[北京]
Python、数据分析与机器学习 8-23[特惠]
嵌入式软件架构设计 8-22[线上]
QT应用开发 9-5[北京]

android人机界面指南
Android手机开发(一)
Android手机开发(二)
Android手机开发(三)
Android手机开发(四)
iPhone消息推送机制实现探讨
手机软件测试用例设计实践
手机客户端UI测试分析
手机软件自动化测试研究报告
更多...   

Android高级移动应用程序
Android应用开发
Android系统开发
手机软件测试
嵌入式软件测试
Android软、硬、云整合

领先IT公司 android开发平台最佳实践
北京 Android开发技术进阶
某新能源领域企业 Android开发技术
某航天公司 Android、IOS应用软件开发
阿尔卡特 Linux内核驱动
艾默生 嵌入式软件架构设计
西门子 嵌入式架构设计
更多...