开发第一个Meeting App

今天我们来看一下如何使用c# net6 来开发一个 teams的 meeting app。首先先确保本地安装了最新版本的 net6。创建一个目录，然后在目录下输入下面的命令行，让 dotnet 来生成一个初步的asp.net core 代码框架。

dotnet new razor

代码框架生成如下的目录和文件，我们可以删除不需要的文件：Error.cshtml.cs, Error.cshtml, Index.cshtml, Index.cshtml.cs, Privacy.cshtml 和 Privacy.cshtml.cs。

如果我们不需要默认的页面风格，我们还可以删除掉 _ViewStart.cshtml。

然后，我们为了调试方便，我们调整一下端口。打开 Properties\launchSettings.json 文件，把 http 的端口都改成 5000, 把https的端口改成 5001。改完后的文件和如下的类似：

{"iisSettings": {"windowsAuthentication": false,"anonymousAuthentication": true,"iisExpress": {"applicationUrl": "http://localhost:5000","sslPort": 44350}},"profiles": {"FirstMeetingApp": {"commandName": "Project","dotnetRunMessages": true,"launchBrowser": true,"applicationUrl": "https://localhost:5001;http://localhost:5000","environmentVariables": {"ASPNETCORE_ENVIRONMENT": "Development"}},...

接下来我们打开 Program.cs 文件，删除如下这行，这样就不会强制跳转到 https 了。

app.UseHttpsRedirection();

这些准备工作完成后，我们就可以尝试运行一下，如下：

可以看到，我们的程序已经在监听 5000 和 5001 端口了。

然后我们使用下面这个命令来启动 ngork，让端口 5000 可以暴露到公网上，这样 Teams 就可以发送请求到我们的接口了。

ngrok http 5000

记下 ngrok 生成的一个临时的公网 url。后面会用到。

回到我们的代码，在Pages目录下增加两个文件，一个是Configure.cshtml文件，这个页面是用来配置的。内容如下：

@page "/configure"<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Demo</title>
</head>
<body>My first Meeting App <br><script src="https://statics.teams.cdn.office.net/sdk/v1.10.0/js/MicrosoftTeams.min.js" crossorigin="anonymous"></script><script>const mainPageUrl = 'https://e9a8-49-189-236-3.ngrok.io/MainPage';microsoftTeams.initialize();microsoftTeams.appInitialization.notifySuccess();microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {microsoftTeams.settings.setSettings({entityID: "MeetingApp Demo",contentUrl: mainPageUrl,suggestedTabName: "MeetingApp Demo",websiteUrl: mainPageUrl,});saveEvent.notifySuccess();});microsoftTeams.settings.setValidityState(true);</script>
</body>
</html>

上面代码里有两个关键部分，第一个是 mainPageUrl，里面就使用到了前面保存下来的ngrok的url，第二个关键是调用 Teams SDK的顺序，显示初始化 .initialize()，然后是.registerOnSaveHandler(，最后是告诉 teams，配置页面好了，.settings.setValidityState(true)。

第二个页面是 MainPage.cshtml，也放在 Pages 目录下：

@page "/MainPage"<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><link rel="stylesheet" href="/static/styles.css"><script src="https://statics.teams.cdn.office.net/sdk/v1.10.0/js/MicrosoftTeams.min.js"integrity="sha384-6oUzHUqESdbT3hNPDDZUa/OunUj5SoxuMXNek1Dwe6AmChzqc6EJhjVrJ93DY/Bv"crossorigin="anonymous"></script>
</head>
<body><h1>MainPage</h1>
</body>
</html>

这个页面比较简单，只是做个sample，后面我们再会展开讲这个。

代码完成后，我们就可以打开 Teams 的 App Studio，新增一个app，然后在 Tab 中进行如下的配置。

完成后，我们就可以把这个 app 安装到一个 meeting中去。选择一个会议，点击安装后，就可以看到如下界面，这个就是我们的 Configure.cshtml 的页面所显示的内容。

点击 Save 按钮后，就可以在会议聊天界面和会议详情界面里看到多了一个tab，名字叫 MeetingAppDemo，这个名字也是在 Configure.cshtml 里指定的，而 tab 的内容是由 MainPage.cshtml 里的内容。

可以看到我们已经完成了我们第一个 teams meeting app，比较简陋，不过开发过程也足够简单。我们后面再来展开在这个 tab 里我们可以做什么事情。

开发第一个Meeting App相关推荐

Android开发实战---一个汽车销售APP，有汽车列表页、汽车详情页、贷款计算页3个界面。
Android开发实战设计并实现一个汽车销售APP,要求至少有汽车列表页.汽车详情页.贷款计算页3个界面. 已开源:https://github.com/yan123666/wlf 实现结果: 1.计 ...
Win10 UWP开发系列：使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
1个人，100天业余时间，用Flutter开发完一个商业APP，手握5家大厂offer
这个一个淘电商APP,同类型的APP有花生日记.好省.折800等等,基本上一个常规电商APP该有的,这个项目都有了.目前,该项目的完成度为80%,剩余的20%因为没有后台项目支持,所以无法完成. 为啥 ...
android 蓝牙速率测试软件,安卓蓝牙4.0开发测试一个测试 APP - 下载 - 搜珍网
压缩包 : MyBleTestDemo.rar 列表 MyBleTestDemo/.classpath MyBleTestDemo/.project MyBleTestDemo/.settings/o ...
vue 手机端答题页面_从0开始，手把手教你用Vue开发一个答题App
项目演示项目源码配套讲解视频教程说明本教程适合对Vue基础知识有一点了解,但不懂得综合运用,还未曾使用Vue从头开发过一个小型App的读者.本教程不对所有的Vue知识点进行讲解,而是手把手一步 ...
从0开始，手把手教你用Vue开发一个答题App
项目演示项目演示项目源码项目源码配套讲解视频配套讲解视频第一节配套讲解视频第二节教程说明本教程适合对Vue基础知识有一点了解,但不懂得综合运用,还未曾使用Vue从头开发过一个小型App ...
Android TV开发总结（三）构建一个TV app的焦点控制及遇到的坑
原文:Android TV开发总结(三)构建一个TV app的焦点控制及遇到的坑版权声明:我已委托"维权骑士"(rightknights.com)为我的文章进行维权行动.转载务必 ...
Android Studio下载、安装、配置及连接真机开发第一个App ——入门选手快进
最近的安卓测试给我心态搞蹦了,问也没人问,难受简直了!又是一轮自学之路(说实话这一路上教会我一个很大的道理就是一定要有愿意帮助你的老师,还有自己的自觉,一样也不能少.前者没有的话只能后者补了呜呜呜 ...
安卓开发由一个APP拉起另一个APP的方法总结
安卓开发由一个APP拉起另一个APP的方法总结最近公司在对接第三方应用的时候有两个需求:1.要由我们的客户端拉起第三方的客户端,并且传值.2.要让第三方客户端能够拉起我们的客户端,并可以根据传递过来 ...

开发第一个Meeting App

开发第一个Meeting App相关推荐

最新文章

热门文章