Teams开发（一），为Teams添加一个tab

https://github.com/OfficeDev/generator-teams

首先需要在powershell中，使用npm安装yeoman的teams项目模板（generator-teams)，如果没有安装yeoman，使用如下命令同时安装yeoman和teams项目模板：

npm install yo generator-teams --global

如果已经安装了yeoman，只安装teams项目模板（generator-teams）即可：

npm install generator-teams --global

安装完成之后，我们创建一个teamsdemo文件夹，使用powershell进入这个文件夹，然后使用yo teams命令启动项目创建向导，创建teams项目：

如图所示，可以选择项目里包含的模块（可以多选），分别是Tab，Bot，Outgoing Webhook，Conector以及Message Extension，本篇博客将添加并演示Tab功能模块。

然后需要指定一个用来host项目的url：

这个Url是你将要部署项目代码的一个服务器地址，为了方便，我使用Azure的app service，我在Azure中创建了一个App Service如下，其中右侧的URL（以azurewebsites.net结尾的）就是上面创建项目用到的Url：

当创建完成后，需要配置“Deployment credentials”也就是部署账号，指定一个用户名和密码如下，这个在后续步骤会用到。

然后在“Deployment options”也就是部署选项中，选择“Local Git Repository”选项然后“OK”，这时候服务器端的配置就结束了。回到我们的项目中，继续创建Teams项目。

创建完成之后，使用Code打开项目，项目结构如下所示 （如果过程中出现错误，试一下翻 墙）：

现在我们来使用Local Git Repository的方式将项目部署刚刚创建的App service上，在Code上打开powershell：“View-> Integrated Terminal”，然后在当前目录初始化git：

然后使用gulp build来编译项目：

结束之后，使用git 命令提交代码：

然后创建Azure上的git库：

其中以https开头的这个url，就是刚刚创建的App service的“Git clone url”：

最后将代码push过去（这里需要用到刚才创建的部署账号的密码）：

结束之后，打开App service：https://demo.azurewebsites.net/，如果成功部署， 会看到如下信息：

我在部署的时候出现过部署失败，错误信息中有“Local gulp not found in D:\home\site\repository”。如果出现出个问题，可以打开package.json文件，将“devDependencies”下面的这些依赖项全部剪切到“dependencies”中，然后重新提交代码和部署即可。

 

部署成功之后，就可以在teams中添加这个tab了，首先打开teams，选择Store：

然后选择上传自定义的app，在下拉菜单中选择为我或者我的team上传：

回到项目中，打开“package”文件夹，将其中的压缩包上传上去：

上传完成后会自动打开tab安装和配置页面，首先选择一个team，点击安装：

然后选择“Set up”

接下来指定一个名字并保存：

这时候我们就可以在Teams里看到这个tab了：