利用 Cloudant 在 Bluemix 上自动化 Famo.us 移动应用程序（2）
|
- UID
- 1066743
|
利用 Cloudant 在 Bluemix 上自动化 Famo.us 移动应用程序（2）
步骤 1：探索应用程序在手机的浏览器中打开本文，然后单击 Run the app in phone browser（在手机浏览器中运行应用） 按钮，它在 下面。（Safari 用户：为了让 PouchDB 能够写入本地数据库，不要使用隐私浏览模式。）在启动应用程序时，您需要知道它同步了浏览器本地 JSON 数据库与 Cloudant，然后实时地构建定制 Famo.us 用户界面。尝试与应用程序进行交互：
- 使用拇指滚动列表并选择一篇文章打开查看。
- 点击 Video 按钮。选择一个视频打开查看。
- 如果有可能的话，请在多种移动设备上试用该应用。
步骤 2：分叉和探索项目代码单击本文的 Get the code（获得代码） 按钮，它在 下面，然后在 IBM DevOps 服务上分叉该项目：单击 EDIT CODE 按钮（如果尚未登录，请输入您的 DevOps Services 凭据），然后点击菜单上的 FORK 按钮，创建一个新的项目。
检查项目的目录结构和密钥文件：
- CouchDBdoc.txt — 自定义用户界面的 JSON 文档的副本。（您稍后需要将该文件的内容添加到您的 Cloudant 数据库。）
- Gruntfile.js：利用包含在 grunt 子目录下的文件，形成该项目的构建指令。
- package.json：npm 描述符通过 Node.js 安装社区贡献的 支持模块，这是您的构建脚本所需要的模块。
- setcors.sh：一个 cURL 脚本，用于为 Cloudant 实例配置 Cross Origin Resource Sharing (CORS)。
- app：该目录包含 Famo.us 移动应用程序的源代码。
- app/src/widgets/MobileListApp.js：Famo.us 应用程序模板的源代码（可重用的 Famo.us 小部件）。
- app/src/main.js：主应用程序代码。
- app/lib/*：Famo.us 移动应用程序所使用的库，包括 PouchDB。
- app/style/*：Famo.us 移动应用程序所使用的 CSS 样式表。您可以在这里添加自定义的用户界面样式。
- dist/*：在 DevOps 服务中的 Bluemix 部署管道支持。
- dist/public：由构建进程创建的目录，包含可用于归档和部署到 Bluemix 的构建工件。
- dist/manifest.yml：在将应用程序部署到 Bluemix 中使用的清单。
JSON 文档如何控制用户界面定制 检查 CouchDBdoc.txt 文件，查看如何通过 Famo.us 应用程序模板从 JSON 数据合成应用程序的用户界面。您可以看到 JSON 文档中的关键字（articles、videos、tablabels 和 color），以及 app/src/widgets/MobileListApp.js 用户界面模板的自定义选项之间的对应关系。
读取并解析 JSON 文档的代码创建 MobileListApp 实例，然后在 app/main.js 中自定义窗口小部件。在实例化过程中，定制代码（如这一部分的 main.js 中的第 2 行至第 6 行所示）作为 options 对象被传入窗口小部件：
1
2
3
4
5
6
7
8
9
| pd.get('449291021476f91c50e0177ccdaa0311', function(err, res) {
var myApp = new MobileListApp({ title: res.title,
tablabels: res.tablabels,
contentlists:[ res.articles, res.videos],
color: res.color
});
mainContext.add(myApp.layout);
});
});
|
|
|
|
|
|
|
