开发第一个Meeting App
今天我們來(lái)看一下如何使用c# net6 來(lái)開發(fā)一個(gè) teams的 meeting app。首先先確保本地安裝了最新版本的 net6。創(chuàng)建一個(gè)目錄，然后在目錄下輸入下面的命令行，讓 dotnet 來(lái)生成一個(gè)初步的asp.net core 代碼框架。
dotnet new razor代碼框架生成如下的目錄和文件，我們可以刪除不需要的文件：Error.cshtml.cs,?Error.cshtml,?Index.cshtml,?Index.cshtml.cs,?Privacy.cshtml?和?Privacy.cshtml.cs。
如果我們不需要默認(rèn)的頁(yè)面風(fēng)格，我們還可以刪除掉?_ViewStart.cshtml。
然后，我們?yōu)榱苏{(diào)試方便，我們調(diào)整一下端口。打開?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"}},...接下來(lái)我們打開 Program.cs 文件，刪除如下這行，這樣就不會(huì)強(qiáng)制跳轉(zhuǎn)到 https 了。
app.UseHttpsRedirection();這些準(zhǔn)備工作完成后，我們就可以嘗試運(yùn)行一下，如下：
可以看到，我們的程序已經(jīng)在監(jiān)聽 5000 和 5001 端口了。
然后我們使用下面這個(gè)命令來(lái)啟動(dòng) ngork，讓端口 5000 可以暴露到公網(wǎng)上，這樣 Teams 就可以發(fā)送請(qǐng)求到我們的接口了。
ngrok http 5000記下 ngrok 生成的一個(gè)臨時(shí)的公網(wǎng) url。后面會(huì)用到。
回到我們的代碼，在Pages目錄下增加兩個(gè)文件，一個(gè)是Configure.cshtml文件，這個(gè)頁(yè)面是用來(lái)配置的。內(nèi)容如下：
@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>上面代碼里有兩個(gè)關(guān)鍵部分，第一個(gè)是 mainPageUrl，里面就使用到了前面保存下來(lái)的ngrok的url，第二個(gè)關(guān)鍵是調(diào)用 Teams SDK的順序，顯示初始化?.initialize()，然后是.registerOnSaveHandler(，最后是告訴 teams，配置頁(yè)面好了，.settings.setValidityState(true)。
第二個(gè)頁(yè)面是?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>這個(gè)頁(yè)面比較簡(jiǎn)單，只是做個(gè)sample，后面我們?cè)贂?huì)展開講這個(gè)。
代碼完成后，我們就可以打開 Teams 的 App Studio，新增一個(gè)app，然后在 Tab 中進(jìn)行如下的配置。
完成后，我們就可以把這個(gè) app 安裝到一個(gè) meeting中去。選擇一個(gè)會(huì)議，點(diǎn)擊安裝后，就可以看到如下界面，這個(gè)就是我們的 Configure.cshtml 的頁(yè)面所顯示的內(nèi)容。
點(diǎn)擊?Save?按鈕后，就可以在會(huì)議聊天界面和會(huì)議詳情界面里看到多了一個(gè)tab，名字叫 MeetingAppDemo，這個(gè)名字也是在 Configure.cshtml 里指定的，而 tab 的內(nèi)容是由 MainPage.cshtml 里的內(nèi)容。
可以看到我們已經(jīng)完成了我們第一個(gè) teams meeting app，比較簡(jiǎn)陋，不過開發(fā)過程也足夠簡(jiǎn)單。我們后面再來(lái)展開在這個(gè) tab 里我們可以做什么事情。
總結(jié)
以上是生活随笔為你收集整理的开发第一个Meeting App的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++ 的万能头文件，你知道多少？
- 下一篇： 万能头文件