1、分享的目的
这个项目是bruce和我一同开发的项目，这个项目在前期jeff跟Sophie都有不同的参与，今天由我来给大家分享一下这个项目。
之前在接手现有的gmail add-on跟calendar add-on的时候，代码扔过来，也运行不起来，只能结合线上的产品去猜测他的代码逻辑。当时在想如果有一个分享的话，这个项目就很着手，有更多的信心。所以今天的分享也是这个目的，带大家熟悉这个项目，方便下次pick这个项目的同事很快的着手这个项目。
2、项目背景
我们这次工作所做的Google GSuite add-on项目是把之前已有的calendar add-on与 gmail add-on做一个结合。calendar add-on和 gmail add-on是两个独立的app，通过结合在一起就变成一个，有统一的登录认证。现在项目状况是已经过审，但是现在线上没有，应该是待发布状态
3、三步走
待会儿的分享我会通过三个步骤来分析我们这个GSuite add-on这个项目。
代码是为业务服务的，只有了解业务才能更好地理解代码。
首先呢我先带大家体验下我们的产品，看我们的产品做了哪些事情。
然后我们会结合产品来看我们的项目代码，看这些功能是如何实现的。
最后我们通过项目去了解下GSuite的一些相关技术。
产品层面
1、 GSuite Add-on是啥？
Suite是套装的意思，就是我们常用的Google一整套办公工具的意思。包括gmail, docs，form, sheet 等等。
而add-on呢 就是基于GSuite 开发的第三方应用。通过第三方add-on，Google Gsuite就有了更好的用户体验
他又分为两种 Gmail Add-on and Editor Add-on。他们分别使用不同的开发文档。采用不同的授权方式跟界面交互方式也不一样。
2、安装
安装已发布的add-on 有三种安装方式，第一种可以从G Suite Marketplace 安装。第二种加号安装。第三种settings get add-on安装。
G Suite marketplace: https://gsuite.google.com/marketplace
和 chorme web store https://chrome.google.com/webstore/category/extensions?hl=en-US
3、产品体验
gmail 体验地址: https://mail.google.com/mail/u/0/#inbox
calendar 体验地址: https://calendar.google.com/calendar/r?tab=wc
calendar add-on就是run在 calendar页面。第一次安装进入的时候会有一个授权，授权add-on可以使用google哪些服务。
点击展示的就是homepage页面，因为没有登录，显示的是登录页面。
点击日历的时间创建一个事件。我们可以在add conferening 这个位置看到两个我们两个事件。这个才是我们calendar add-on真正要做的事儿。这两个事件是通过对项目的配置文件进行配置然后展示出来的。我们选择一个add conference可以触发一个方法。这里因为没有登录然后被阻断了。通过登录我们的RC账号，然后在进行一个第三方授权，我们就可以继续操作下去。这个地方登录之后呢，在gmail的部分也会同时登录。登录成功后继续刚才的操作，成功地插入conference的data。这个conference的样式包括刚才的login in按钮都是google集成的模块，我们直接调他的模块，给他数据就可以了。等过点击下拉会create 一个meeting，然后点击上面的save我们的conference针对这个event conference才算创建成功。
创建成功后，通过鼠标悬浮上去，我们就可以看到我们创建的RC meeting。点击就可以直接参加会议。
calendar的主页只是做一个展示，展示登录RC账号的一些信息。还有一些操作引导。
gmail add-on是run在google的gmail的页面。我们可以在右侧看到GSuite add-on的icon，点击可以看到他的主页因为在calendar有做登录，这里也就登录了。这里也只是展示登录账号的个人信息。
我们选择打开一封邮件，会触发项目的一个方法。他会检索邮件的收件人，发件人去我们的RC服务上去找匹配邮箱地址的联系人展示在这里。点击每个人联系人我们可以查看他的更多信息，可以进行发消息跟打电话的操作。同时也会展示最近的消息跟通话记录。只不过消息跟通话记录不会实时更新，需要刷新页面才能看到。没有联系人的时候会显示一个空。
Google GSuite add-on的项目（？？？？？）
1、项目存放
我们的源代码存放位置在 integration-apps 下的gsuite-addon文件夹。源代码用ts边写转义成js，然后通过clasp push的命令推送到目标代码库，真实跑的项目。
.clasp.json 会配置项目的scriptId 会推送到google对应项目上去。
2、工具介绍（如何安装）
deploy from manifest安装
3、代码
点击打开项目这个是我们真正在跑的一个项目，代码是javascript编写运行在app script平台，他run在后端，而不是前端。主要先看两个文件appscipt.json跟code.gs。 appscript.json 主要是项目的一些配置，code.js是他的主入口。
appscipt.json。dependencies 项目使用的高级服务跟库。
oauthScopes，使我们项目向google请求授权使用的服务范围。
urlFetchWhitelist 请求的白名单，只有设置白名单，对应的链接才能打开，请求这个地址的资源的请求才能发送出去。
addOns 这里有两个子集 calendar跟gmail。gmail的contextualTriggers跟homepageTrigger两个方法分别什么时候触发。canledar配置的方法在事件的下拉选择可以看到在选择时候触发。logoUrl有个坑只能是google photo库的图片地址才行。
刚才看到的触发方法在这里code.gs，是程序的入口。
onGmailHomePage 打开gmail的首页。onGmailMessage 打开一封具体的邮件。 选择一个conference会触发createConference。这几个方法都是通过CardBuilder会返回Card然后展示出来。
看项目，项目比较简单，appscript没有引入的概念。代码简单做了一个分层，MVC。view主要是用来生成试图。
4、调试
Console.log() 类似于日志，执行过的都会被记录下来
Logger.log() 调试，刚执行过的方法可以看到打印，步数多了就看不到了
5、发布
两个发布平台G Suite Marketplace，Chrome Web Store。 gmail add-on 只能发布到G Suite Marketplace而
editor add-ons可以发布到两个平台上。
发布氛围prviate跟public。public 类型需要审核，需要几天。
技术
网友评论