电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 利用 Cloudant 在 Bluemix 上自动化 Famo.us 移动应用程序（2） [打印本页]

作者: look_w 时间: 2018-11-2 16:51 标题: 利用 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);
});
});

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)