# I hear you like realtime memes - 1504020511

![video\_screenshot](https://2300623831-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M42R_LUyJKgBHlKjSRa%2F-M42Rc6P9yocNdfaP271%2F-M42RtApGH8IzprY1Pu1%2F_M3z_vu45to.jpg?generation=1585974613858746\&alt=media)

&#x20;**视频发布时间**

> 2014年6月25日

&#x20;**视频介绍**

> Learn how to quickly and easily make your app collaborative with the Drive Realtime API. Give your users the power of Google Docs-style realtime collaboration with no server, no sweat.

&#x20;**视频推介语**&#x20;

> 暂无，待补充。

## 译者信息

| 翻译  | 润稿 | 终审 | 原始链接                                                     | 中文字幕                                                     | 翻译流水号      | 加入字幕组                                                                                                                                                                                          |
| --- | -- | -- | -------------------------------------------------------- | -------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| lch | 任皓 | -- | [ Youtube ](https://www.youtube.com/watch?v=_M3z_vu45to) | [ Youtube ](https://www.youtube.com/watch?v=rCzhSjmZiy4) | 1504020511 | [ 加入 GDG 字幕组 ](https://github.com/gdsub/pub/tree/420613f9ff598576d7b4321d0b83923050d0d03d/Android/089-Android-Develop-In-Google-IO-2014/%7B%7B%20book.host%20%7D%7D/join_translator/README.md) |

## 解说词中文版：

大家好 我是Brian 基于Google Drive Realtime API的程序开发人员(谷歌云存储平台协作服务应用程序接口）

所有人都喜欢玩梗（meme） 尤其是当他们（如gene相对于基因，meme常见译名为模因，指可以复制进化的文化基因）

得到了一张可爱的猫咪图的时候（此处meme：制作的一个可能爆炸性传播的简单图文或视频，如奶茶妹妹，Duang等）

但并非所有人都擅长想出一个好的meme

也许你有了一张可以用来制作meme的

完美的背景图片 但是你还是需要一点小小的帮助

来想出同样完美的标题文字

那为什么我们不写一个在线协作的meme生成应用

好让你和朋友们一起来meme呢

那么一个在线协作meme编辑器应用该长什么样呢

它看起来可能是这样的

你需要一个框来选择你想用来

做背景的图片 然后我们还需要

有文本框来允许你在顶部 中部和下部

来输入标题文字

由于这是一个通用的meme编辑器应用

我们还希望能够有像Google Docs那样的

多人合作模式

这意味着 当一个用户输入 删除或者编辑

这其中任何一个框里的内容

我们也想要实时地看到

他们做了些什么

那么我们用传统的方式

是怎样构建这个通用meme应用呢

嗯 第一件事就是设计我们的服务器

因为我们要有

多人协作的功能 这个服务器

必须要处理更多负载

每次敲击键盘的时候

我们都会得到一个请求

这意味着大量访问数据库的流量以及大量

对我们应用服务器的请求

就算是我们解决了服务器的问题

我们还必须实现多人协作

这意味着要解决冲突的问题

如果一个用户插入文本然后另一个用户删除文本

我们必须用一种解决方案来使

所有用户最后得到相同的结果

当然我们必须自行处理所有这些琐碎的事

我们还必须处理认证和访问控制

我们必须实现网络模块

然后写一大堆的粘合代码把所有这些整合到一起

当我们处理完这些东西之后

我们才能开始着手去做有趣的那部分

这里我们要提供极佳的用户体验然后构建一个最棒的meme应用

但是我们在这并不是来讨论

怎么通过这种相当困难的途径来做这件事

我们这里要谈论的是如何使用Drive Realtime API来完成它

这东西看起来就像这样

遇到所有的上面的困难的话

我们只需要用Realtime API来替换

你只需要搭建一个伟大的meme应用

搭建你的用户交互界面

专注于如何让你的应用更精彩

它是怎么做到如此简单的呢

嗯 就像是呈现出来的那样 使用Drive Realtime API

构建一个多人协作应用简直易如反掌

你现在构建一个多人协作应用相当简单

而且比你构建一个传统意义上的非多人协作应用

要花费更少的工夫

这是因为你不需要服务端代码

你不必处理持久化存储

或者身份验证等等事务

你只要构建客户端的HTML CSS以及JavaScript

专注于提升用户体验

那么接下来我们就一步一步地来看我们应该

怎么用Realtime API来构建我们的meme应用

我们首先需要做的

就是包含一个加载Realtime API的模板

接着我们需要从我们想从叫做

Realtime数据模型的地方读写数据

由于这是一个多人协作应用

我们还需要处理来自其他用户的改动

所以我们先来配置这个模板

我保证这不会很麻烦

首先我们需要包含的

就是标准Google API加载脚本

现在这个脚本和你用来

加载Google+按钮以及Google Drive API

或者其他的Google API的脚本一样

就只是一些复制粘贴的代码

接下来我们就需要

调用JavaScript函数来加载这些API

函数名是gapi.load

我们提供了一个所需的Google API的列表

在我们这个例子中 我们需要的是Realtime API

但是我们可能也想要添加一些验证码

或者是分享对话框又或是Drive API

以及其他类似的东西

我们能提供所需要的所有API

一旦所有东西都被加载完毕 我们会得到一个回调

我们可以直接用它来绑定到我们的UI上

这就是我们的模板

现在我们就可以着手开始实现真正酷的那一部分了

也就是我们用来从实时数据模块来读写数据的那部分

那么什么是实时数据模型呢

我们现在就来谈谈

看起来像是一个高大上的东西 但是实时数据模型

只是一个很多数据结构的集合

就像一个内存的数据模型

Realtime 数据模型中很酷的一块就是

Google帮你处理所有的协作

以及存储工作

所以你只需要从Realtime数据模型中读写数据

就像是在读写内存的数据一样 你只需要编写位于上层的

用户交互界面 剩余的事情都可以帮你处理

那么我们来看几个例子来了解一下

实时数据模型到底是怎么构建的

我们可以用各种不同的对象来构建它

但在这个例子中我们用协作图

以及协作字符串来构建

协作图就好像一个JavaScript的关联数组

除了我们会自动融合改变

基于按键的更改来处理协作

协作字符串就像是一个JavaScript字符串

除了我们会逐字符地比较来保证

最终结果是每个人得到相同的文本

那我们现在就来开始构建我们的数据模型

在根部我们延展出一个协作图

我们把它创造性地称为“根”

事实上 每一个Realtime数据模型

在它们的根部都有一个协作图

这是我们为你自动创建的

作为提供的一系列便利之一

这里可以储存你的应用

需要的所有数据

在我们这个例子中需要三个不同的字符串

即顶部 中部和底部的文本

我们这里用协作字符串

因为我们想实现基于字符的协作

如果我们不需要基于字符的协作

就好比这个例子中图片的URL

我们在这里用一个纯JavaScript字符串就好了

只要把它放到协作map中

就像是一个本地的数据结构

接着我们看看从数据模型中

读取和写入数据

对于读取 比如说我们要获取图片的URL

我们只要在协作map上调用get函数

就像是一个内存map一样

我们得到了图片的URL 就是那只可爱的猫的图片

如果我想更新它 比如换成一只更可爱的猫

我们只要调用set就行了

这看起来十分简单 因为它就是如此简单

这跑起来就像一个先前常规的JavaScript对象一般

但是在底层我们做的

就是序列化它然后发送到服务器

处理协作以及处理持久化

这一切都是自动为你做的

还有一件需要知道的事情是

要做到这些和构建一个

无协作的应用有所区别的是

你需要响应来自其他用户的事件

而不仅仅是本地用户

在Realtime API中 我们对于协作对象

提供事件监听就像DOM元素一样

你可以为协作字符串添加事件监听

可以为HTML的input元素添加事件监听

或者把这些通过一些粘合代码结合在一起

如果你不想像这样

把字符串和文本框连接起来

我们提供了一个叫做字符串绑定的智能组件

字符串绑定会为你自动

连接起协作字符串与一个input元素

之间的所有事件

所以我们要做的就是调用绑定字符串然后提供

绑定字符串以及input元素

我们会自动处理所有事件以及所有的

协作工作

这里我们还需要额外做一些工作

来使文本框工作 我们也需要在图片更新之后

有一个预览

然后让预览的图片更新

我们想让它在数据模型中的任何数据改变的时候发生变化

这里我们就需要使用到

一个叫做对象改变事件监听的东西

对象改变事件监听就是

一个监听任何时间任何对象

或者其任何子对象改变的东西

在我们的例子中 我们会把它添加到根

随着它被添加到根 我们就制造了一个

可以监听数据模型里

任何时间发生的任何事的监听器

然后我们就能更新我们的预览图片

这就是了

我们已经构建了一个协作meme编辑器应用

所以当你准备开始写代码的时候

在我们的开发者网页上有一个很赞的快速开始指南

在那里你可以一步一步地跟着实例代码学习

它会带着你制作一个小型演示应用

如果你对实时API

工作的技术细节感兴趣的话

我们去年的Google I/O大会有一个不错的演讲

在那里我们会研究冲突的解决方案

或者避免出现冲突 并且展现详细的技术细节

感谢你的收看
