使用Angular及Teams ToolKit建立Teams App

Lou Chang 收錄於 Teams TeamsApp

2022-07-25 2022-07-25 約 1400 字預計閱讀 3 分鐘

/images/remote/180802567-37b4627f-b926-4b47-9e08-cc3849011f12_18076428108634587456.png

在B站看到 2021年9月在對岸微軟 Reactor 關於 Teams App 的活動，也剛剛好~公司也有小小的需求希望能在 Teams 上做一些操作，所以就順便動手研究了。

爬了很多文看了很多Doc，發現大部分都是用 React 寫的，關於 Angular 的部分可以說是幾乎沒有（不知道是太少人用還是太Easy🤣）。

所以這篇就記錄一下研究的過程！

準備 Microsoft 365 組織

Prepare your Microsoft 365 tenant - Teams | Microsoft Docs

申請免費的 Microsoft 365 Developer Program

必要開發工具

Visual Studio Code
1

choco install vscode -y

Teams Toolkit extension

1

code --install-extension TeamsDevApp.ms-teams-vscode-extension

Node.js LTS

有裝 NVM 的直接下此 Command 就好
1

nvm install lts
沒有的話就用 Chocolatey 或到Node.js 官網下載了
1

choco install nodejs-lts -y
TeamsFx CLI
1

npm install -g @microsoft/teamsfx-cli
Angular Cli
1

npm install -g @angular/cli

建立步驟

建立一個新資料夾
1 2

cd D:\ mkdir Demo

在此資料夾內以範本建立專案

1
2
3


teamsfx new template hello-world-tab-without-sso --folder "./Demo"
cd ./Demo/hello-world-tab-without-sso
code .

將 tabs 資料夾內全部檔案刪除, 並新增 Angular 專案
1 2

ng new tabs cd ./tabs

加入Teams App 在 Compiler 時必要套件

1
2


 npm install @microsoft/teams-js
 npm install @types/node env-cmd cross-env --save-dev #後兩套件是對於開發環境變數做操做的, 如不需要可以不用裝(根據TeamsToolKit預設是有安裝的)

開啟 tabs內的Package.json 加入以下命令

1
2
3
4


 "dev:teamsfx": "env-cmd --silent -f .env.teamsfx.local npm run start",
 "install:teamsfx": "npm install",
 "build:teamsfx": "cross-env-shell \"env-cmd -f .env.teamsfx.${TEAMS_FX_ENV} npm run build\"",
 "build:teamsfx:dev": "cross-env TEAMS_FX_ENV=dev npm run build:teamsfx"

點選 Teams ToolKit, 並點選編輯 manifest
編輯 manifest , 修改以下欄位

安裝時所顯示的畫面
建立 Teams Config Component
1

ng new TeamsConfig

import teams-js 並寫入設定(❗不加此設定,會無法顯示❗)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


    import { Component, OnInit } from '@angular/core';

    import * as microsoftTeams from '@microsoft/teams-js';//引入 teams-js

    @Component({
    selector: 'app-teams-config',
    templateUrl: './teams-config.component.html',
    styleUrls: ['./teams-config.component.scss']
    })
    export class TeamsConfigComponent implements OnInit {

    constructor() { }

    ngOnInit(): void {
        // Initialize the Microsoft Teams SDK
        microsoftTeams.initialize();

        microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
            const baseUrl = window.location.protocol + '//' + window.location.host + '/';
            microsoftTeams.settings.setSettings({
                suggestedDisplayName: 'Tab Test',
                entityId: 'index', // 與 manifast內的staticTabs底下entityId需相同
                contentUrl: baseUrl,
                websiteUrl: baseUrl,
            });
            saveEvent.notifySuccess();
        });


        microsoftTeams.settings.setValidityState(true);
      }
    }

編輯 teams-config.component.html
建立 Tab Component 並撰寫內容
1

ng new tab

修改 app-routing.module.ts及app.module.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


//app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabComponent } from './components/tab/tab.component';
import { TeamsConfigComponent } from './components/teams-config/teams-config.component';

const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: '/tab' },
    { path: 'tab', component: TabComponent },
    { path: 'config', component: TeamsConfigComponent },
    { path: '**', pathMatch: 'full', redirectTo: '/tab' }, // catch any unfound routes and redirect to home page
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
})
export class AppRoutingModule {}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TabComponent } from './components/tab/tab.component';
import { TeamsConfigComponent } from './components/teams-config/teams-config.component';

@NgModule({
    declarations: [AppComponent, TabComponent, TeamsConfigComponent],
    imports: [BrowserModule, AppRoutingModule],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

修改完別忘了將 app.component.html也加上 <router-outlet></router-outlet>

建立開發測試用途的自簽憑證 (Self-Signed Certificate), 並放入tabs資料夾的根目錄
修改 package.json的 scripts,將 ng serve修改為下列命令列
1

ng serve --ssl --ssl-key server.key --ssl-cert server.crt
因Teams App要Tab顯示內容,包含的網頁必須是有 SSL ,所以要為Angular加入憑證
F5執行
- 執行時會看到 OUTPUT跑出下圖內容
- compiler成功後就會自動開啟網頁版Teams
- 因選擇Add to a teams(加入到團隊頻道), 故此處要選擇團隊頻道
- 此處顯示的是 teams-config.component.html的內容
- 點選 about 裡面顯示的是 manifast 上的內容
- 加入安裝完後, 顯示的是 tab.component.html的內容