I hear you like realtime memes - 1504020511
Last updated
Was this helpful?
Last updated
Was this helpful?
视频发布时间
2014年6月25日
视频介绍
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.
视频推介语
暂无，待补充。
翻译
润稿
终审
原始链接
中文字幕
翻译流水号
加入字幕组
lch
任皓
--
1504020511
大家好 我是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大会有一个不错的演讲
在那里我们会研究冲突的解决方案
或者避免出现冲突 并且展现详细的技术细节
感谢你的收看
