Question

应用架构

现在我们熟悉了 Firebase 和 AngularFire，我们就来看一下 app 如何设计：

如上图所示，我们将使用 Firebase 作为数据存储。在 Ionic 应用中使用 AngularFire 来与 Firebase 交互。Ionic 应用同时也使用 ngCordova 与 Cordova 插件交互以使用设备功能。在我们将要制作的聊天应用中，Firebase 的角色是管理聊天数据。在我们的聊天应用中，我们需要在 Firebase 集合中创建两个终端：

• 在线用户：这个终端存储所有的在线用户
• 聊天：这个终端将存储两个用户之前的聊天信息

作为聊天应用的一部分，我们允许用户以下操作：

• 发送文本信息
• 从相册分享图片
• 照相并分享
• 分享用户地理位置 我们将把所有数据都存放到 Firebase 中。你是不是在想，图片要囊个存咧？好吧，这就是聪明之处了；我们将会把图片转成 base64 格式然后将

base64-encode 的字符串存放到 Firebase。 至于用户位置信息，我们只保存用户的坐标，然后在其他用户界面上复制坐标就可以了。

也可以使用 Google Static Maps API（谷歌静态地图 API）来分享地理信息：

https://developers.google.com/maps/documentation/staticmaps/

认证

我们将使用 Google Open ID 认证服务来认证用户。同时我们也会使用 Corodva 的

ng-cordova-oauth 插件与 Firebase 的 oAuth 组合来做认证服务。 Cordova 插件通过浏览器内置插件来管理弹出认证和获取 token。然后此 token 会被传到 Firebase 认证以及案例一个 session。这些在我们开始开发 app 的时候会越来越清晰。

应用工作流

用户启动 app 的时候，我们将展示应用首页，有一个滑动框和一个 按钮。

Login

到目前为止应用只支持 Google 登录。用户点击 按钮的时候，他将被重定向到 Google 登录页面。登录成功之后，app 提供了访问之后，用户将被新红顶乡到首页，在这里 Google oAuth 提供的 token 将被发送到 Firebase 来建立 session（会话）。 然后，用户将被重定向到有三个标签页的页面。标签页一是由所有在线用户组成。标签页二是由当前正在聊天中的用户组成，最后，标签页三是由设置屏幕和 选项所组成。当用户点击标签页一或者标签页二的列表中的用户的时候，用户将被带到聊天页面，此页将展示与选中用户之间的聊天记录（如果有的话）。这样设计 app 以使事情简单化并能涵盖其他一些主题，可以帮助你更好的理解移动混合应用开发的完整生态系统。

Login
Lougout

app 预览

继续进行之前，我们先快速查看一下最终输出，因为在开发完成之前我们是看不到任何输出结果的。下图左边展示的是 屏幕。下图右边显示的一个三个标签页的是 屏幕：

登录 Login主页 Home

下午左边展示的是聊天界面，右边显示的地图屏幕是用户分享的地理位置信息的展示：

数据结构

默认每次集合增加新的数据集的时候，Firebase 都会通知所有的客户端。当我们创建一个普通的聊天时的时候，我们只需要连通知所有连接到 app 的用户，不用做其他多余的事情。但是，由于我们是关注一对一的聊天应用，我们需要一些逻辑来帮助我们管理参与双方的用户之间的通讯。当用户登录的时候，我们使用当前用户详情来更新在线用户集合。这将会通知所有的已登录用户。一旦某用户离线的时候，我们从在线用户集合中移除此用户。

我们使用 Firebase Authentication 来存储登录信息。在 Forge 中看不到任何已注册用户信息。 现在用户已登录，那么他将出现在在线用户中。如果用户 B 想要和用户 A 聊天，我们需要创建一个新的终端，仅供用户 A 和用户 B 通讯。

创建一个新的动态终端的逻辑有点复杂，步骤如下：

• 分辨用户 A 和用户 B 的邮件地址
• 对用户 A 和用户的邮件地址执行哈希函数。当我们以不同顺序传入相同数组的时候，这个哈希函数都会返回同一个字符串
• 使用以上哈希字符串，我们在聊天集合内创建一个新的终端
• 如果用户 B 对用户 A 发起了聊天，用户 B 将创建一个动态终端，根据用户 B 向用户 A 发送的第一个信息，将会触发在聊天集合内运行一个监听器。 这个监听器将会检查信息发送对象是否是已登录用户。如果是，将会通知用户 A。

有点复杂，但是却能很好的工作。

我在一个 node-webkit 桌面版聊天应用中实现了相同的逻辑。可以在此处查看： 现在我们对数据如何架构有了想法，我们需要考虑一下要用到哪些 Cordova 插件。

http://thejackalofjavascript.com/one-to-one-chat-client/

Cordova 插件

我们将要用到以下插件（除了模块自动下载的之外）：

• cordova-plugin-inappbrowser：这个用来管理 Google 认证
• cordova-plugin-media-capture：用来照相并与其他用户分享
• com.synconset.imagepicker：用来从相册获取一张图片
• cordova-plugin-file：在将图片转成 base64 的时候与文件系统交互
• cordova-plugin-geolocation：用来获取用户的 Geo 坐标 插件会在具体使用的时候学习。

Github 上的代码

本章代码已经开源在 Github 上： 如果有任何问题可以发起 issue，我们尽力为大家解答。我也会解决读者报告的所有 bug。

https://github.com/learning-ionic