Hinzufügen eines Outlook-Add-Ins zu einer Teams-App

Artikel
05/02/2024

Tipp

In diesem Artikel erfahren Sie, wie Sie eine kombinierte Teams-App und ein Office-Add-In erstellen, indem Sie mit einer neu erstellten Teams-App und einem Outlook-Add-In beginnen. Eine Übersicht über den allgemeinen Prozess des Zusammenführens von Teams-Apps und Office-Add-Ins, einschließlich vorhandener Teams-Apps und Add-Ins, die bereits verwendet werden, finden Sie unter Allgemeine Anleitung zum Kombinieren eines Outlook-Add-Ins und einer Teams-App.

Einführung

Outlook-Add-Ins sind Web-Apps , die die Funktionalität von Outlook erweitern. Mit einem Outlook-Add-In haben Sie folgende Möglichkeiten:

Lesen und Schreiben von E-Mail-Nachrichten und Teilnahme an Besprechungseinladungen, Antworten, Absagen und Terminen.
Liest die Eigenschaften des Postfachs des Benutzers.
Automatisches Reagieren auf Ereignisse, z. B. das Senden einer E-Mail.
Integration in externe Dienste, einschließlich CRM- und Projektmanagementtools.
Fügen Sie benutzerdefinierte Menübandschaltflächen oder Menüelemente hinzu, um bestimmte Aufgaben auszuführen.

Die Integration eines Outlook-Add-Ins in eine Teams-Anwendung ermöglicht Szenarien, die keines von beiden unabhängig voneinander erreicht werden kann. Stellen Sie sich ein Szenario vor, in dem ein Vertriebsmitarbeiter einen angepassten Rabatt in einer E-Mail an einen Kunden einfügen und das Angebot in einer Back-End-Datenbank aufzeichnen kann. Der Vertriebsleiter kann auch Daten zu allen Rabatten anzeigen, die auf einer Teams-Registerkarte angeboten wurden. Weitere Informationen finden Sie unter Beispiel für Rabattangebote.

Die Übersicht über Outlook-Add-Ins enthält Informationen zu den Funktionen von Outlook-Add-Ins, wie sie strukturiert sind, wie sie sich bei älteren Möglichkeiten zur Erweiterung von Outlook verbessern, auf welchen Plattformen das Add-In ausgeführt werden kann (Windows, Mac, Mobilgeräte und das Web), und wie Sie mit der Erstellung eines Add-Ins beginnen.

Dieser Artikel führt Sie durch die Schritte zum Hinzufügen eines Outlook-Add-Ins zu einer Teams-App, zum Testen und anschließenden Bereitstellen in Azure.

Voraussetzungen

Bevor Sie beginnen, stellen Sie sicher, dass Sie die folgenden Anforderungen erfüllen:

Ein Microsoft 365-Konto, das Teams zum Testen der Anwendung enthält. Alternativ können Sie über separate Abonnements für Microsoft 365 und Teams verfügen. Beispielsweise ein Testkonto mit *.onmicrosoft.com über das Microsoft 365-Entwicklerprogramm.
Ihr Microsoft 365-Konto wird als Konto in Outlook desktop hinzugefügt. Weitere Informationen finden Sie unter Hinzufügen eines E-Mail-Kontos zu Outlook.
Ein Azure-Konto mit aktivem Abonnement zum Bereitstellen der Teams-App in Azure. Wenn Sie noch keins besitzen, können Sie Ihr kostenloses Azure-Konto erstellen.
Eine Teams-App, die mit der neuesten Version des Teams-Toolkits erstellt wurde.

Hinzufügen eines Outlook-Add-Ins zu einer Teams-App

So fügen Sie einer Teams-App ein Outlook-Add-In hinzu:

Bereiten Sie das Teams-App-Projekt vor.
Erstellen Sie ein Office-Add-In-Projekt, das anfänglich von Ihrem Teams-App-Projekt getrennt ist.
Führen Sie das Manifest aus dem Outlook-Add-In-Projekt mit dem einheitlichen Manifest für Microsoft 365 zusammen.
Kopieren Sie die Outlook-Add-In-Dateien in das Teams-App-Projekt.
Bearbeiten Sie die Toolkonfigurationsdateien.
Gleichzeitiges lokales Ausführen der App und des Add-Ins
Verschieben Sie die Anwendung in Azure.

Vorbereiten des Teams-App-Projekts

Trennen Sie zunächst den Quellcode für die Registerkarte (oder den Bot) in einen eigenen Unterordner. Bei diesen Anweisungen wird davon ausgegangen, dass das Projekt anfänglich über die folgende Struktur verfügt. Verwenden Sie zum Erstellen eines Teams-App-Projekts mit dieser Struktur die neueste Version des Teams-Toolkits.

|-- .vscode/
|-- appPackage/
|-- build
|-- env/
|-- infra/
|-- node_modules/
|-- src/
|-- .gitignore
|-- .localConfigs
|-- .webappignore
|-- package-lock.json
|-- package.json
|-- teamsapp.local.yml
|-- teamsapp.yml
|-- tsconfig.json
|-- web.config

Hinweis

Wenn Sie mit einem neuen Teams-Registerkartenprojekt arbeiten, sind der ordner node_modules und die package-lock.json datei nicht vorhanden. Die node_modules wird in einem späteren Schritt erstellt, wenn Sie im Stammverzeichnis des Projekts ausführen npm install . Der Buildordner ist erst vorhanden, wenn Sie ein Buildskript für das Projekt ausführen.

Führen Sie die folgenden Schritte aus, um den Quellcode für die Registerkarte oder den Bot zu trennen:

Erstellen Sie einen Ordner unter dem Stamm der Registerkarte (oder des Bots).

Hinweis

Der Einfachheit halber geht der Rest dieses Artikels davon aus, dass die vorhandene Teams-App eine Registerkarte ist. Wenn Sie mit einem Bot begonnen haben, ersetzen Sie in allen diesen Anweisungen "tab" durch "bot", einschließlich des Inhalts, den Sie in verschiedenen Dateien hinzufügen oder bearbeiten.
Kopieren Sie den Ordner infra in den neuen Unterordner, und löschen Sie die azure.parameters.json Datei dann aus dem neuenTab-Infra-Ordner>.
Verschieben Sie die Ordner node_modules und src in den neuen Unterordner.

Verschieben Sie die .webappignoreDateien , package-lock.json, package.json, tsconfig.jsonund web.config in den neuen Unterordner.

|-- .vscode/
|-- appPackage/
|-- build
|-- env/
|-- infra/
|-- tab/
|-- |-- infra/
|-- |-- node_modules/
|-- |-- src/
|-- |-- .webappignore
|-- |-- package-lock.json
|-- |-- package.json
|-- |-- tsconfig.json
|-- |-- web.config
|-- .gitignore
|-- .localConfigs
|-- teamsapp.local.yml
|-- teamsapp.yml

Löschen Sie in der package.json , die Sie gerade in den Registerkartenordner verschoben haben, das Skript mit dem Namen dev:teamsfx aus dem scripts -Objekt. Dieses Skript wird im nächsten Schritt einem neuen package.json hinzugefügt.

Erstellen Sie eine neue Datei namens package.json im Stammverzeichnis des Projekts, und fügen Sie den folgenden Inhalt hinzu:

{
    "name": "CombinedTabAndAddin",
    "version": "0.0.1",
    "author": "Contoso",
    "scripts": {
        "dev:teamsfx": "env-cmd --silent -f .localConfigs npm run start:tab",
        "build:tab": "cd tab && npm run build",
        "install:tab": "cd tab && npm install",
        "start:tab": "cd tab && npm run start",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
        "@microsoft/teamsfx-cli": "2.0.2-alpha.4f379e6ab.0",
        "@microsoft/teamsfx-run-utils": "alpha",
        "env-cmd": "^10.1.0",
        "office-addin-dev-settings": "^2.0.3",
        "ncp": "^2.0.0"
    }
}

Ändern Sie die nameEigenschaften , versionund author nach Bedarf.
Öffnen Sie die teamsapp.yml Datei im Stammverzeichnis des Projekts, suchen Sie die Zeile ignoreFile: .webappignore, und ändern Sie sie in ignoreFile: ./tab/.webappignore.
Öffnen Sie die teamsapp.local.yml Datei im Stammverzeichnis des Projekts, suchen Sie die Zeile args: install --no-audit, und ändern Sie diese in args: run install:tab --no-audit.
Öffnen Sie TERMINAL in Visual Studio Code. Navigieren Sie zum Stamm des Projekts, und führen Sie aus npm install. Im Projektstamm werden ein neuer node_modules Ordner und eine neue package.lock.json Datei erstellt.
Führen Sie als Nächstes aus npm run install:tab. Ein neuer node_modules Ordner und eine neue package.lock.json Datei werden im Registerkartenordner erstellt, sofern sie noch nicht vorhanden sind.
Stellen Sie sicher, dass Sie die Registerkarte mit den folgenden Schritten querladen können:
1. Öffnen Sie Teams Toolkit.
2. Vergewissern Sie sich im Abschnitt KONTEN , dass Sie beim Microsoft 365-Konto angemeldet sind.
3. Wählen Sie In Visual Studio Codeausführenanzeigen> aus.
4. Wählen Sie im Dropdownmenü AUSFÜHREN UND DEBUGGENdie Option Debuggen in Teams (Edge) aus, und drücken Sie F5.
  
  Das Projekt wird erstellt und ausgeführt. Dieser Vorgang kann einige Minuten dauern. Nach Abschluss des Vorgangs wird Teams in einem Browser mit einer Aufforderung zum Hinzufügen Ihrer Registerkarten-App geöffnet.
  
  Hinweis
  
  Wenn Sie zum ersten Mal eine Teams-App auf diesem Computer debuggen, werden Sie aufgefordert, ein SSL-Zertifikat zu installieren. Wählen Sie Installieren und dann Ja zur zweiten Eingabeaufforderung aus. Melden Sie sich bei Ihrem Microsoft 365-Konto an, wenn Sie dazu aufgefordert werden.
5. Klicken Sie auf Hinzufügen.
6. Um das Debuggen zu beenden und die App zu deinstallieren, wählen Sie Debuggen in Visual Studio Code ausführen>beenden aus.

Erstellen eines Outlook-Add-In-Projekts

Öffnen Sie eine zweite instance von Visual Studio Code.
Wählen Sie teams Toolkit in der Aktivitätsleiste aus.
Wählen Sie Neue App erstellen aus.
Wählen Sie im Dropdownmenü Option auswählen die OptionAufgabenbereich des Outlook-Add-Ins> aus.
Wählen Sie den Ordner aus, in dem Sie das Add-In erstellen möchten.
Geben Sie dem Projekt einen Namen (ohne Leerzeichen) an, wenn Sie dazu aufgefordert werden.

Teams Toolkit erstellt das Projekt mit Basisdateien und Gerüsten und öffnet es in einem neuen Visual Studio Code-Fenster. Sie verwenden dieses Projekt als Quelle für Dateien und Markups, die Sie dem Teams-Projekt hinzufügen.
Obwohl Sie dieses Projekt nicht entwickeln werden, führen Sie die folgenden Schritte aus, um zu überprüfen, ob es aus Visual Studio Code quergeladen werden kann, bevor Sie fortfahren:
1. Stellen Sie sicher, dass der Outlook-Desktop geschlossen ist.
2. Öffnen Sie Visual Studio Code.
3. Wählen Sie teams Toolkit in der Aktivitätsleiste aus.
4. Vergewissern Sie sich im Abschnitt KONTEN , dass Sie bei Microsoft 365 angemeldet sind.
5. Wählen Sie In Visual Studio Codeausführenanzeigen> aus.
6. Wählen Sie im Dropdownmenü AUSFÜHREN UND DEBUGGENdie Option Outlook Desktop (Edge Chromium) aus, und drücken Sie F5.
  
  Das Projekt wird erstellt, und ein Webpack dev-server-Fenster wird geöffnet. Dieser Vorgang kann einige Minuten dauern und ein Outlook-Desktopfenster wird geöffnet.
7. Wechseln Sie zu Outlook.
8. Öffnen Sie den Posteingang Ihrer Microsoft 365-Kontoidentität.
9. Öffnen Sie eine beliebige Nachricht.
  
  Eine Contoso-Add-In-Registerkarte mit zwei Schaltflächen wird im Menüband Start angezeigt (oder im Menüband Nachricht , wenn Sie die Nachricht in einem eigenen Fenster öffnen).
10. Wählen Sie die Schaltfläche Aufgabenbereich anzeigen aus. Ein Aufgabenbereich wird geöffnet.
11. Wählen Sie die Schaltfläche Aktion ausführen aus. Am oberen Rand der Nachricht wird eine kleine Benachrichtigung angezeigt.
12. Um das Debuggen zu beenden und das Add-In zu deinstallieren, wählen Sie Debuggen in Visual Studio Code ausführen>beenden aus. Wenn das Webpack dev-server-Fenster nicht geschlossen wird, öffnen Sie das Visual Studio Code-TERMINAL im Stammverzeichnis des Projekts, und führen Sie aus npm stop.

Zusammenführen des Manifests

Das Manifest der Teams-App wird zum Zeitpunkt des Debuggens und Querladens (oder der Buildzeit) aus der manifest.json Datei im Ordner \appPackage des Teams-Projekts generiert. Diese Datei ist eine Vorlage für ein Manifest. In diesem Artikel wird sie als Vorlage oder Manifestvorlage bezeichnet. Der Großteil des Markups wird in der Vorlage hartcodiert, aber es gibt auch einige Konfigurationsdateien, die Daten enthalten, die dem endgültig generierten Manifest hinzugefügt werden. Führen Sie in diesem Verfahren die folgenden Aufgaben aus:

Kopieren Sie Markup aus dem Manifest des Add-Ins in die Manifestvorlage der Teams-App.
Bearbeiten Sie die Konfigurationsdateien.

Sofern nicht anders angegeben, ist \appPackage\manifest.jsondie Datei, die Sie ändern, .

Kopieren Sie die Eigenschaftswerte "$schema" und "manifestVersion" aus dem Manifest des Add-Ins in die entsprechenden Eigenschaften der Manifestvorlagendatei der Teams-App.
Ändern Sie die Eigenschaftswerte "name.full", "description.short" und "description.full" nach Bedarf, um die Tatsache widerzuspiegeln, dass ein Outlook-Add-In Teil der App ist.
Führen Sie dies auch für den Wert "name.short" aus.

Es wird empfohlen, die ${{TEAMSFX_ENV}} am Ende des Namens beizubehalten. Diese Variable wird beim Debuggen auf localhost durch die Zeichenfolge "local" und durch "dev" ersetzt, wenn Sie entweder aus einer Remotedomäne oder im Produktionsmodus debuggen.

Hinweis

In der Vergangenheit wird in der Office-Add-In-Entwicklerdokumentation der Begriff "Dev" oder "Entwicklungsmodus" verwendet, um auf die Ausführung des Add-Ins auf einem localhost zu verweisen. Es verwendet den Begriff "Prod" oder "Produktionsmodus", um sich auf die Ausführung des Add-Ins auf einem Remotehost für das Staging oder die Produktion zu beziehen. In der Teams-Entwicklerdokumentation wird der Begriff "lokal" verwendet, um auf die Ausführung des Add-Ins auf einem localhost zu verweisen, und der Begriff "dev" bezieht sich auf die Ausführung des Add-Ins auf einem Remotehost für das Remotedebuggen, was normalerweise als "Staging" bezeichnet wird. Wir arbeiten daran, die Terminologie konsistent zu erhalten.

Der folgende JSON-Code ist ein Beispiel:
```
"short": "Contoso Tab and Add-in-${{TEAMSFX_ENV}}",
```
Hinweis

Der Wert "name.short" wird sowohl in der Teams-Registerkartenfunktion als auch im Outlook-Add-In angezeigt. Hier ein paar Beispiele:
- Dies ist die Bezeichnung unter der Startschaltfläche der Registerkarte Teams.
- Es handelt sich um den Inhalt der Titelleiste des Aufgabenbereichs des Add-Ins.
Wenn Sie den Wert "name.short" von seinem Standardwert (dem Namen des Projekts gefolgt von der ${{TEAMSFX_ENV}} Variablen) geändert haben, nehmen Sie genau die gleiche Änderung an allen Stellen vor, an denen der Projektname in den folgenden beiden Dateien im Stammverzeichnis des Projekts angezeigt wird: teamsapp.yml und teamsapp.local.yml.
Wenn in der Teams-Manifestvorlage kein Array "authorization.permissions.resourceSpecific" vorhanden ist, kopieren Sie es aus dem Add-In-Manifest als Eigenschaft der obersten Ebene. Wenn bereits eins in der Teams-Vorlage vorhanden ist, kopieren Sie alle Objekte aus dem Array im Add-In-Manifest in das Array in der Teams-Vorlage. Der folgende JSON-Code ist ein Beispiel:
```
"authorization": {
    "permissions": {
        "resourceSpecific": [
            {
                "name": "MailboxItem.Read.User",
                "type": "Delegated"
            }
        ]
    }
},
```
Suchen Sie in der env/.env.local Datei nach den Zeilen, die den TAB_DOMAIN Variablen und TAB_ENDPOINT Werte zuweisen. Fügen Sie die folgenden Zeilen direkt darunter hinzu:
```
ADDIN_DOMAIN=localhost:3000
ADDIN_ENDPOINT=https://localhost:3000
```
Fügen Sie in der env/.env.dev Datei die folgende Zeile unterhalb des TAB_ENDPOINT= ... Linie:
```
ADDIN_ENDPOINT=
```
Fügen Sie in der Teams-Manifestvorlage den Platzhalter "${{ADDIN_DOMAIN}}", oben "validDomains" im Array hinzu. Das Teams-Toolkit ersetzt dies durch eine localhost-Domäne, wenn Sie lokal entwickeln. Wenn Sie die fertige kombinierte App im Staging oder in der Produktion bereitstellen, wie unter Verschieben der Anwendung in Azure beschrieben, ersetzt Teams Toolkit den Platzhalter durch den Staging-/Produktions-URI. Der folgende JSON-Code ist ein Beispiel:
```
"validDomains": [
    "${{ADDIN_DOMAIN}}",

    // other domains or placeholders
],
```
Kopieren Sie die gesamte Eigenschaft "extensions" aus dem Manifest des Add-Ins als Eigenschaft der obersten Ebene in die Teams-App-Manifestvorlage.

Kopieren der Outlook-Add-In-Dateien in das Teams-App-Projekt

Erstellen Sie einen Ordner der obersten Ebene namens add-in im Teams-App-Projekt .
Kopieren Sie die folgenden Dateien und Ordner aus dem Add-In-Projekt in den Add-In-Ordner des Teams-App-Projekts .
- /appPackage
- /infra
- /Src
- .eslintrc.json
- babel.config.json
- package-lock.json
- package.json
- tsconfig.json
- webpack.config.js

Wenn Sie den Kopiervorgang abgeschlossen haben, löschen Sie die manifest.json Datei im Ordner /add-in/appPackage .

Ihre Ordnerstruktur muss nun wie im folgenden Beispiel aussehen:

|-- .vscode/
|-- add-in/
|-- |-- appPackage/assets/
|-- |-- infra/
|-- |-- src/
|-- |-- .eslintrc.json
|-- |-- babel.config.json
|-- |-- package-lock.json
|-- |-- package.json
|-- |-- tsconfig.json
|-- |-- webpack.config.js
|-- appPackage/
|-- build\appPackage/
|-- env/
|-- infra/
|-- node_modules/
|-- tab/
|-- |-- infra/
|-- |-- node_modules/
|-- |-- src/
|-- |-- .webappignore
|-- |-- package-lock.json
|-- |-- package.json
|-- |-- tsconfig.json
|-- |-- web.config
|-- .gitignore
|-- .localConfigs
|-- package.json
|-- teamsapp.local.yml
|-- teamsapp.yml

Bearbeiten der Toolkonfigurationsdateien

Öffnen Sie die package.json Datei im Stammverzeichnis des Projekts.

Fügen Sie dem Objekt "scripts" die folgenden Skripts hinzu:

"install:add-in": "cd add-in && npm install",
"postinstall": "npm run install:add-in && npm run install:tab",
"build:add-in": "cd add-in && npm run build",
"build:add-in:dev": "cd add-in && npm run build:dev",
"build": "npm run build:tab && npm run build:add-in",

Öffnen Sie die package.json Datei im Add-In-Ordner (nicht im Registerkartenordner oder im Stammverzeichnis des Projekts).

Drei der Skripts im scripts -Objekt verfügen wie in den folgenden Beispielen über einen manifest.json Parameter:

"start": "office-addin-debugging start appPackage/manifest.json",
"stop": "office-addin-debugging stop appPackage/manifest.json",
"validate": "office-addin-manifest validate appPackage/manifest.json",

Ändern Sie appPackage/manifest.json im Skript in .../appPackage/build/appPackage.local.zipstart Wenn Sie fertig sind, muss die Zeile wie folgt aussehen:

"start": "office-addin-debugging start ../appPackage/build/appPackage.local.zip",

Ändern Sie in den validate Skripts und stop den Parameter in ../appPackage/build/manifest.local.json. Wenn Sie fertig sind, müssen die Updates wie folgt aussehen:

"stop": "office-addin-debugging stop ../appPackage/build/manifest.local.json",
"validate": "office-addin-manifest validate ../appPackage/build/manifest.local.json",

Öffnen Sie terminal in Visual Studio Code.
Navigieren Sie zum Add-In-Ordner , und führen Sie den Befehl aus npm install.
Öffnen Sie webpack.config.js die Datei im Add-In-Ordner.
Ändern Sie die Zeile from: "appPackage/manifest*.json", in from: "../appPackage/build/manifest*.json",.
Öffnen Sie im Stammverzeichnis des Projekts die teamsapp.local.yml Datei, und suchen Sie den provision Abschnitt. Verwenden Sie das # Zeichen, um die Zeilen auskommentieren, die die Manifestvorlage überprüfen. Dies ist erforderlich, da das Teams-Manifestüberprüfungssystem noch nicht mit den Änderungen kompatibel ist, die Sie an der Manifestvorlage vorgenommen haben. Wenn Sie fertig sind, sollten die Zeilen wie der folgende Code aussehen:
```
# - uses: teamsApp/validateManifest
#   with:
#     # Path to manifest template
#     manifestPath: ./appPackage/manifest.json 
```
Stellen Sie sicher, dass Sie nur den teamsApp/validateManifest Abschnitt auskommentieren. Kommentieren Sie den teamsManifest/validateAppPackage Abschnitt nicht aus.
Wiederholen Sie den vorherigen Schritt für die teamsapp.yml Datei. Die drei Zeilen befinden sich sowohl in den provision Abschnitten als auch in den publish Abschnitten. Kommentieren Sie sie an beiden Stellen aus.
Öffnen Sie die .vscode\tasks.json Datei im Add-In-Projekt , und kopieren Sie alle Aufgaben im tasks Array. Fügen Sie sie dem tasks Array derselben Datei im Teams-Projekt hinzu. Entfernen Sie keine der Aufgaben, die bereits vorhanden sind. Stellen Sie sicher, dass alle Aufgaben durch Kommas getrennt sind.

Fügen Sie in jedem der Aufgabenobjekte, die Sie gerade kopiert haben, die folgende options Eigenschaft hinzu, um sicherzustellen, dass diese Aufgaben im Add-In-Ordner ausgeführt werden.

"options": {
    "cwd": "${workspaceFolder}/add-in/"
}

Wenn Sie fertig sind, muss die Debug: Outlook Desktop Aufgabe beispielsweise wie der folgende JSON-Code angezeigt werden.

{
    "label": "Debug: Outlook Desktop",
    "type": "npm",
    "script": "start",
    "dependsOn": [
      "Check OS",
      "Install"
    ],
    "presentation": {
      "clear": true,
      "panel": "dedicated",
    },
    problemMatcher": [],
    "options": {
        "cwd": "${workspaceFolder}/add-in/"
    }
}

Fügen Sie dem Aufgabenarray in der Datei des Projekts die .vscode\tasks.json folgende Aufgabe hinzu. Mit dieser Aufgabe wird unter anderem das endgültige Manifest erstellt.

{
    // Create the debug resources.
    // See https://aka.ms/teamsfx-tasks/provision to know the details and how to customize the args.
    "label": "Create resources",
    "type": "teamsfx",
    "command": "provision",
    "args": {
        "template": "${workspaceFolder}/teamsapp.local.yml",
        "env": "local"
    }
},

Fügen Sie dem Tasks-Array die folgende Aufgabe hinzu. Beachten Sie, dass eine Start Add-in Locally Aufgabe hinzugefügt wird, die die Aufgabe der Registerkarten-App Create resources mit der Debugaufgabe des Add-Ins kombiniert und angibt, dass sie in dieser Reihenfolge ausgeführt werden müssen.
```
{
    "label": "Start Add-in Locally",
    "dependsOn": [
        "Create resources",
        "Debug: Outlook Desktop"
    ],
    "dependsOrder": "sequence"
},
```
Fügen Sie dem Tasks-Array die folgende Aufgabe hinzu. Es kombiniert die Start Teams App Locally Aufgabe mit und Start Add-in Locally gibt an, dass sie in dieser Reihenfolge ausgeführt werden müssen.
```
 {
     "label": "Start App and Add-in Locally",
     "dependsOn": [
         "Start Teams App Locally",
         "Start Add-in Locally"
     ],
     "dependsOrder": "sequence"
 },
```

Öffnen Sie die .vscode\launch.json Datei im Projekt, das die Benutzeroberfläche "AUSFÜHREN UND DEBUGGEN " in Visual Studio Code konfiguriert, und fügen Sie die folgenden beiden Objekte am Anfang des Arrays "configurations" hinzu.

{
    "name": "Launch Add-in Outlook Desktop (Edge Chromium)",
    "type": "msedge",
    "request": "attach",
    "port": 9229,
    "timeout": 600000,
    "webRoot": "${workspaceRoot}",
    "preLaunchTask": "Start Add-in Locally",
    "postDebugTask": "Stop Debug"
},
{
    "name": "Launch App and Add-in Outlook Desktop (Edge Chromium)",
    "type": "msedge",
    "request": "attach",
    "port": 9229,
    "timeout": 600000,
    "webRoot": "${workspaceRoot}",
    "preLaunchTask": "Start App and Add-in Locally",
    "postDebugTask": "Stop Debug"
},

Benennen Sie im compounds Abschnitt derselben Datei die Debug in Teams (Edge) Verbindung in Launch App Debug (Edge) um, und benennen Sie die Debug in Teams (Chrome) Verbindung in um Launch App Debug (Chrome).
Stellen Sie sicher, dass Sie die Add-In-Funktion der Teams-App mit den folgenden Schritten in Outlook querladen können:
1. Stellen Sie sicher, dass der Outlook-Desktop geschlossen ist.
2. Öffnen Sie Visual Studio Code.
3. Wählen Sie teams Toolkit in der Aktivitätsleiste aus.
4. Vergewissern Sie sich im Abschnitt KONTEN , dass Sie bei Microsoft 365 angemeldet sind.
5. Wählen Sie In Visual Studio Codeausführenanzeigen> aus.
6. Wählen Sie im Dropdownmenü AUSFÜHREN UND DEBUGGEN die Option Add-In Outlook Desktop starten (Edge Chromium) aus, und drücken Sie F5. Das Projekt wird erstellt, und ein Webpack dev-server-Fenster wird geöffnet. Dieser Vorgang kann einige Minuten dauern und ein Outlook-Desktopfenster wird geöffnet.
7. Wechseln Sie zu Outlook.
8. Öffnen Sie den Posteingang Ihrer Microsoft 365-Kontoidentität.
9. Öffnen Sie eine beliebige Nachricht.
  
  Eine Contoso-Add-In-Registerkarte mit zwei Schaltflächen wird im Menüband Start angezeigt (oder im Menüband Nachricht , wenn Sie die Nachricht in einem eigenen Fenster öffnen).
10. Wählen Sie die Schaltfläche Aufgabenbereich anzeigen aus. Ein Aufgabenbereich wird geöffnet.
11. Wählen Sie die Schaltfläche Aktion ausführen aus. Am oberen Rand der Nachricht wird eine kleine Benachrichtigung angezeigt.
12. Um das Debuggen zu beenden und das Add-In zu deinstallieren, wählen Sie Debuggen in Visual Studio Code ausführen>beenden aus. Wenn das Webpack dev-server-Fenster nicht geschlossen wird, öffnen Sie das Visual Studio Code-TERMINAL im Stammverzeichnis des Projekts, und führen Sie aus npm stop.

Gleichzeitiges lokales Ausführen der App und des Add-Ins

Sie können die App und das Add-In gleichzeitig querladen und ausführen, aber der Debugger kann nicht zuverlässig anfügen, wenn beide ausgeführt werden. Führen Sie zum Debuggen also jeweils nur einzeln aus.

Informationen zum Debuggen der App finden Sie im letzten Schritt des Abschnitts Vorbereiten des Teams-App-Projekts .

Informationen zum Debuggen des Add-Ins finden Sie im letzten Schritt des Abschnitts Bearbeiten der Toolkonfigurationsdateien .

Führen Sie die folgenden Schritte aus, um zu sehen, wie die App und das Add-In gleichzeitig ausgeführt werden.

Stellen Sie sicher, dass der Outlook-Desktop geschlossen ist.
Öffnen Sie Visual Studio Code.
Wählen Sie teams Toolkit in der Aktivitätsleiste aus.
Vergewissern Sie sich im Abschnitt KONTEN , dass Sie bei Microsoft 365 angemeldet sind.
Wählen Sie In Visual Studio Codeausführenanzeigen> aus.
Wählen Sie im Dropdownmenü AUSFÜHREN UND DEBUGGENdie Option App und Add-In Outlook Desktop starten (Edge Chromium) aus, und drücken Sie F5. Das Projekt wird erstellt, und ein Webpack dev-server-Fenster wird geöffnet. Die Registerkarten-App wird im Visual Studio Code-Terminal gehostet. Dieser Vorgang kann einige Minuten dauern, und die folgenden Aktionen werden ausgeführt:
- Teams wird in einem Browser mit einer Aufforderung zum Hinzufügen Ihrer Registerkarten-App geöffnet. Wenn Teams zum Zeitpunkt des Öffnens des Outlook-Desktops noch nicht geöffnet wurde, ist beim automatischen Querladen ein Fehler aufgetreten. Sie können es manuell querladen, um zu sehen, wie die App und das Add-In gleichzeitig ausgeführt werden. Anweisungen zum Querladen finden Sie unter Hochladen Ihrer App in Teams. Die hochzuladende manifest.zip-Datei finden Sie unter C:\Users\{yourname}\AppData\Local\Temp.
- Outlook-Desktop wird geöffnet.
Wählen Sie in der Teams-Eingabeaufforderung Hinzufügen aus, und die Registerkarte wird geöffnet.
Wechseln Sie zu Outlook.
Öffnen Sie in Outlook den Posteingang Ihrer Microsoft 365-Kontoidentität.
Öffnen Sie eine beliebige Nachricht.

Eine Contoso-Add-In-Registerkarte mit zwei Schaltflächen wird im Menüband Start angezeigt (oder im Menüband Nachricht , wenn Sie die Nachricht in einem eigenen Fenster öffnen).
Wählen Sie die Schaltfläche Aufgabenbereich anzeigen aus. Ein Aufgabenbereich wird geöffnet.
Wählen Sie die Schaltfläche Aktion ausführen aus. Am oberen Rand der Nachricht wird eine kleine Benachrichtigung angezeigt.
Um das Debuggen zu beenden und das Add-In zu deinstallieren, wählen Sie Debuggen in Visual Studio Code ausführen>beenden aus. Wenn das Webpack dev-server-Fenster nicht geschlossen wird, öffnen Sie das Visual Studio Code-TERMINAL im Stammverzeichnis des Projekts, und führen Sie aus npm stop.
Wenn Sie die Teams-Registerkarten-App manuell querladen mussten, entfernen Sie sie aus Teams, wie unter Entfernen Ihrer App beschrieben.

Verschieben der Anwendung nach Azure

Öffnen Sie die teamsapp.yml Datei im Stammverzeichnis des Projekts, und suchen Sie die Zeile deploymentName: Create-resources-for-tab. Ändern Sie es zu deploymentName: Create-resources-for-tab-and-addin.
Fügen Sie in derselben Datei den folgenden Code am Ende des provision: Abschnitts hinzu.

Hinweis

Der Einzug ist in YAML aussagekräftig. - uses Daher sollten anweisungen - name zwei Leerzeichen eingerückt werden, with Anweisungen sollten an usesausgerichtet werden, und die untergeordneten Elemente von with sollten zwei weitere Leerzeichen eingezogen werden.
```
provision:

  -- other YAML omitted --

  - uses: azureStorage/enableStaticWebsite
    with:
      storageResourceId: ${{ADDIN_AZURE_STORAGE_RESOURCE_ID}}
      indexPage: index.html
      errorPage: error.html
```

Ersetzen Sie in derselben Datei den gesamten deploy: Abschnitt durch den folgenden Code. Diese Änderungen berücksichtigen die neue Ordnerstruktur und die Tatsache, dass sowohl Add-In- als auch Registerkartendateien bereitgestellt werden müssen.

deploy:
  - name: InstallAllCapabilities
    uses: cli/runNpmCommand # Run npm command
    with:
      args: install

  - name: BuildAllCapabilities
    uses: cli/runNpmCommand # Run npm command
    with:
      args: run build --if-present

  - name: DeployTab
    uses: azureAppService/zipDeploy
    with:
      artifactFolder: tab
      ignoreFile: ./tab/.webappignore
      # The ID of the cloud resource where the tab app will be deployed.
      # This key will be generated by arm/deploy action automatically.
      resourceId: ${{TAB_AZURE_APP_SERVICE_RESOURCE_ID}} 

  - name: DeployAddin
    uses: azureStorage/deploy
    with:
      workingDirectory: .
      # Deploy base folder
      artifactFolder: add-in/dist
      # The ID of the cloud resource where the add-in will be deployed.
      resourceId: ${{ADDIN_AZURE_STORAGE_RESOURCE_ID}}

Öffnen Sie die infra/azure.parameters.json Datei im Stammverzeichnis des Projekts, und ersetzen Sie den Inhalt durch den folgenden JSON-Code:

{
    "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
    "contentVersion": "1.0.0.0",
    "parameters": {
      "resourceBaseName": {
        "value": "tabandaddin${{RESOURCE_SUFFIX}}"
      },
      "webAppSku": {
        "value": "F1"
      },
      "storageSku": {
        "value": "Standard_LRS"
      }
    }
}

Öffnen Sie die infra/azure.bicep Datei im Stammverzeichnis des Projekts (nicht im Tab- oder Add-In-Unterordner), und ersetzen Sie den Inhalt durch den folgenden Code:

// Params for Teams tab resources
@maxLength(20)
@minLength(4)
@description('Used to generate names for all resources in this file')
param resourceBaseName string
param webAppSku string
param serverfarmsName string = resourceBaseName
param webAppName string = resourceBaseName
param location string = resourceGroup().location
param storageSku string
param storageName string = resourceBaseName

module tabModule '../tab/infra/azure.bicep' = {
  name: 'tabModule'
  params: {
    resourceBaseName: resourceBaseName
    webAppSku: webAppSku
    serverfarmsName: serverfarmsName
    webAppName: webAppName
    location: location
  }
}

module addinModule '../add-in/infra/azure.bicep' = {
  name: 'addinModule'
  params: {
    resourceBaseName: resourceBaseName
    storageSku: storageSku
    storageName: storageName
    location: location
  }
}

// The output will be persisted in .env.{envName}. Visit https://aka.ms/teamsfx-actions/arm-deploy for more details.
output TAB_AZURE_APP_SERVICE_RESOURCE_ID string = tabModule.outputs.TAB_AZURE_APP_SERVICE_RESOURCE_ID // used in deploy stage
output TAB_DOMAIN string = tabModule.outputs.TAB_DOMAIN
output TAB_ENDPOINT string = tabModule.outputs.TAB_ENDPOINT

output ADDIN_AZURE_STORAGE_RESOURCE_ID string = addinModule.outputs.ADDIN_AZURE_STORAGE_RESOURCE_ID // used in deploy stage
output ADDIN_DOMAIN string = addinModule.outputs.ADDIN_DOMAIN
output ADDIN_ENDPOINT string = addinModule.outputs.ADDIN_ENDPOINT

Öffnen Sie in Visual Studio Code teams Toolkit.
Stellen Sie im Abschnitt KONTEN sicher, dass Sie bei Ihrem Azure-Konto angemeldet sind (zusätzlich zur Anmeldung bei Ihrem Microsoft 365-Konto). Weitere Informationen zum Anmelden finden Sie unter Übung: Erstellen von Azure-Ressourcen zum Hosten einer Teams-Registerkarten-App , und scrollen Sie zum Abschnitt Anmelden bei Azure in Teams Toolkit .
Wählen Sie im Abschnitt LIFECYCLE des Teams Toolkits die Option Bereitstellen aus. Dies kann einige Minuten dauern. Möglicherweise werden Sie aufgefordert, eine Ihrer Azure-Ressourcengruppen auszuwählen.
Wenn die Bereitstellung abgeschlossen ist, wählen Sie Bereitstellen aus, um Ihren App-Code in Azure bereitzustellen.

Ausführen der Registerkartenfunktion über die Remotebereitstellung

Wählen Sie in Visual Studio CodeDie Option Ausführen anzeigen> aus.
Wählen Sie im Dropdownmenü Remote in Teams (Edge) starten oder Remote in Teams starten (Chrome) aus.
Drücken Sie F5, um eine Vorschau Ihrer Teams-Registerkartenfunktion anzuzeigen.

Ausführen der Add-In-Funktion über die Remotebereitstellung

Kopieren Sie die Produktions-URL aus der ADDIN_ENDPOINTenv/.env.dev -Datei.
Bearbeiten Sie \add-in\webpack.config.js die Datei, und ändern Sie urlProd den konstanten Wert in den soeben kopierten Wert. Achten Sie darauf, am Ende der URL ein "/" hinzuzufügen.
Navigieren Sie im Visual Studio Code-TERMINAL zum Stammverzeichnis des Projekts, und führen Sie dann aus npm run build:add-in.
Kopieren Sie die Datei \add-in\dist\manifest.dev.json in den \appPackage Ordner.
Benennen Sie die Kopie im Ordner in \appPackage um manifest.addinPreview.json.
Führen Sie im TERMINAL aus npx office-addin-dev-settings sideload .\appPackage\manifest.addinPreview.json. Dieser Vorgang kann einige Minuten dauern und den Outlook-Desktop öffnen. (Wenn Sie aufgefordert werden, zu installieren office-addin-dev-settings, antworten Sie mit "Ja".)
Wechseln Sie zu Outlook.
Öffnen Sie den Posteingang Ihrer Microsoft 365-Kontoidentität.
Öffnen Sie eine beliebige Nachricht.

Eine Contoso-Add-In-Registerkarte mit zwei Schaltflächen wird im Menüband Start angezeigt (oder im Menüband Nachricht , wenn Sie die Nachricht in einem eigenen Fenster öffnen).
Wählen Sie die Schaltfläche Aufgabenbereich anzeigen aus. Ein Aufgabenbereich wird geöffnet.
Wählen Sie die Schaltfläche Aktion ausführen aus. Am oberen Rand der Nachricht wird eine kleine Benachrichtigung angezeigt.

Was kommt als nächstes

Es gibt weitere häufig vorgeschlagene nächste Schritte, z. B.:

Fügen Sie die Authentifizierung hinzu, und führen Sie einen Graph-API Aufruf aus. Informationen zur Registerkartenfunktion finden Sie unter Hinzufügen des einmaligen Anmeldens zur Teams-App. Informationen zur Add-In-Funktion finden Sie unter Aktivieren des einmaligen Anmeldens (Single Sign-On, SSO) in einem Office-Add-In.
Einrichten von CI/CD-Pipelines
Rufen Sie eine Back-End-API auf.

Freigeben über

Hinzufügen eines Outlook-Add-Ins zu einer Teams-App

Einführung

Voraussetzungen

Hinzufügen eines Outlook-Add-Ins zu einer Teams-App

Vorbereiten des Teams-App-Projekts

Erstellen eines Outlook-Add-In-Projekts

Zusammenführen des Manifests

Kopieren der Outlook-Add-In-Dateien in das Teams-App-Projekt

Bearbeiten der Toolkonfigurationsdateien

Gleichzeitiges lokales Ausführen der App und des Add-Ins

Verschieben der Anwendung nach Azure

Ausführen der Registerkartenfunktion über die Remotebereitstellung

Ausführen der Add-In-Funktion über die Remotebereitstellung

Was kommt als nächstes

Siehe auch

Zusätzliche Ressourcen