Tutorial: Erstellen einer Aufgabenverwaltungs-App - Teams

Der Microsoft Teams-Connector ist eine MVC-Beispielanwendung (Model-View-Controller) für die Aufgabenverwaltung und wird mithilfe der vorlage für ASP.NET-Webanwendung generiert. Der Großteil des Codes bezieht sich entweder auf die grundlegende MVC-Konfiguration oder das Aufgabenverwaltungssystem. Sie können Ihren vorhandenen Connector für Microsoft 365-Gruppen hinzufügen oder einen neuen in Teams erstellen.

Typen von Connectorcodes

ConnectorController.cs: Einrichten und Speichern von Aktionen.
TaskController.cs: Erstellen und Aktualisieren von Aktionen.

Wichtige Features des Microsoft Teams-Connectors

Simuliert ein echtes Aufgabenverwaltungssystem.
Ermöglicht Benutzern das Erstellen und Anzeigen von Aufgaben.
Generiert Inhalte nach dem Zufallsprinzip.
Simuliert Benachrichtigungen, die an den Microsoft Teams-Kanal gesendet werden sollen.

Diese Schritt-für-Schritt-Anleitung hilft Ihnen beim Erstellen und Testen eines Connectors in Microsoft Teams. Die folgende Ausgabe wird angezeigt:

Screenshot der Ausgabe des Buildteamconnectors, nachdem Sie die Schritt-für-Schritt-Anleitung erfolgreich abgeschlossen haben.

Voraussetzungen

10 Minuten verbleibend

Stellen Sie sicher, dass Sie die folgenden Tools installieren und Ihre Entwicklungsumgebung einrichten:

	Installieren	Zum Benutzen...
	Microsoft Teams	Microsoft Teams für die Zusammenarbeit mit allen Personen, mit denen Sie über Apps für Chats, Besprechungen und Anrufe zusammenarbeiten, alles an einem Ort.
	Visual Studio 2022	Sie können die Unternehmensversion in Visual Studio 2022 und die Workloads ASP.NET und Webentwicklung installieren. Verwenden Sie die neueste Version.
	.NET Core SDK	Angepasste Bindungen für lokales Debuggen und Bereitstellungen von Azure Functions-Apps. Verwenden Sie die neueste Version, oder installieren Sie die portable Version.
	Entwicklungstunnel	Teams-App-Features (Konversationsbots, Nachrichtenerweiterungen und eingehende Webhooks) erfordern eingehende Verbindungen. Ein Tunnel verbindet Ihr Entwicklungssystem mit Teams. Dev Tunnel ist ein leistungsstarkes Tool, um Ihren Localhost sicher für das Internet zu öffnen und zu steuern, wer Zugriff hat. Dev Tunnel ist in Visual Studio 2022 Version 17.7.0 oder höher verfügbar. Oder Sie können ngrok auch als Tunnel verwenden, um Ihr Entwicklungssystem mit Teams zu verbinden. Dies ist nicht für Apps erforderlich, die nur Registerkarten enthalten. Dieses Paket wird im Projektverzeichnis installiert (mit npm `devDependencies`).

Hinweis

Nachdem Sie ngrok heruntergeladen haben, registrieren Sie sich, und installieren Sie authtoken.

Einrichten einer lokalen Umgebung

9 Minuten verbleibend

Öffnen Sie Microsoft-Teams-Samples.
Wählen Sie Code aus.
Wählen Sie im Dropdownmenü Mit GitHub Desktop öffnen aus.
Wählen Sie Klonen aus.

Entwicklervorschau aktivieren

8 Minuten verbleibend

Aktivieren Sie das Hochladen von Apps in der Verwaltungskonsole Ihres Mandanten.
1. Melden Sie sich mit Ihren Administratoranmeldeinformationen beim Microsoft 365 Admin Center an.
2. Wählen Sie im linken Bereich Alle anzeigen aus.
3. Wählen Sie Teams aus.
Wählen Sie im linken Bereich Teams-Apps aus.
Wählen Sie Setuprichtlinien aus.
Wählen Sie Global (organisationsweite Standardeinstellung) aus.
Aktivieren Sie die Umschaltfläche Benutzerdefinierte Apps hochladen .
Klicken Sie auf Speichern.

Ihr Testmandant kann jetzt den Upload benutzerdefinierter Apps zulassen.

Tipp

Der Upload benutzerdefinierter Apps dauert einige Zeit, bis er aktiv wird.
Wechseln Sie zu Microsoft Teams.
Wählen Sie in der oberen rechten Ecke Ihrer Teams die Option ... aus.
Wählen Sie Über>Entwicklervorschauaus.
Wählen Sie Zur Entwicklervorschau wechseln aus.

Konfigurieren Des Connectors

7 Minuten verbleibend

Öffnen Sie TeamsToDoAppconnector.sln in Visual Studio aus dem geklonten Repository.

Erstellen eines Tunnels
- Entwicklungstunnel
- ngrok
1. Öffnen Sie Visual Studio.
2. Wählen Sie Neues Projekt erstellen aus.
3. Geben Sie im Suchfeld ASP.NET ein. Wählen Sie in den Suchergebnissen ASP.NET Core Web App aus.
4. Wählen Sie Weiter aus.
5. Geben Sie Projektname ein , und wählen Sie Weiter aus.
6. Wählen Sie Erstellen aus.
  
  Ein Übersichtsfenster wird angezeigt.
7. Wählen Sie in der Dropdownliste Debug die Option Dev Tunnels (kein aktiver Tunnel)>Tunnel erstellen... aus.
  
  Ein Popupfenster wird geöffnet.
8. Aktualisieren Sie die folgenden Details im Popupfenster:
  1. Konto: Geben Sie ein Microsoft- oder GitHub-Konto ein.
  2. Name: Geben Sie einen Namen für Ihren Tunnel ein.
  3. Tunneltyp: Wählen Sie in der Dropdownliste die Option Temporär aus.
  4. Zugriff: Wählen Sie in der Dropdownliste Öffentlich aus.
9. Wählen Sie OK aus.
  
  Ein Popupfenster wird angezeigt, in dem angezeigt wird, dass der Entwicklungstunnel erfolgreich erstellt wurde.
10. Wählen Sie OK aus.
  
  Sie finden den tunnel, den Sie erstellt haben, in der Debug-Dropdownliste wie folgt:
11. Wählen Sie F5 aus, um die Anwendung im Debugmodus auszuführen.
12. Wenn ein Dialogfeld Sicherheitswarnung angezeigt wird, wählen Sie Ja aus.
  
  Ein Popupfenster wird geöffnet.
13. Wählen Sie Weiter.
  
  Die Dev Tunnel-Startseite wird in einem neuen Browserfenster geöffnet, und der Entwicklungstunnel ist jetzt aktiv.
14. Wechseln Sie zu Visual Studio, und wählen Sie Ausgabe anzeigen >aus.
15. Wählen Sie im Dropdownmenü Ausgabekonsoledie Option Dev Tunnels aus.
  
  In der Ausgabekonsole wird die Dev Tunnel-URL angezeigt.
Verwenden Sie ngrok oder die Eingabeaufforderung, um einen Tunnel zu den öffentlich verfügbaren HTTPS-Endpunkten Ihres lokal ausgeführten Webservers zu erstellen. Führen Sie den folgenden Befehl in ngrok aus:
```
ngrok http --host-header=localhost 3978
```
Tipp

Wenn sie auf ERR_NGROK_4018 stoßen, führen Sie die Schritte in der Eingabeaufforderung aus, um sich zu registrieren und ngrok zu authentifizieren. Führen Sie anschließend den Befehl ngrok http --host-header=localhost 3978 aus.

Im Fenster wird die HTTPS-URL angezeigt.
Wechseln Sie zum Connector Developer Portal.
Wählen Sie Neuer Connector.
Geben Sie die folgenden Details ein, um einen neuen Connector zu registrieren:
- Connectorname.
- Logo
- Kurze Beschreibung Ihrer App (maximal 10 Wörter)
- Ausführliche Beschreibung der Funktionsweise ihres Connectors (3-5 Sätze)
- Unternehmenswebsite.
- Konfigurationsseite für Ihren Connector als https://[BASE_URI]/connector/setup.
- Legen Sie Gültige Domänen auf fest https>//[Base URI].
- Wählen Sie Ja aus, um die Aktion auf Connectorkarten zu aktivieren.
- Legen Sie die Aktions-URL auf fest https://[BASE_URI]/Task/Update.
- Wählen Sie Ich stimme den Geschäftsbedingungen der Vereinbarung für App-Entwickler zu.
- Klicken Sie auf Speichern.
Sie haben erfolgreich einen neuen Connector registriert. Das Fenster wird mit der registrierten Connector-ID angezeigt.

Tipp

Speichern Sie die Connector-ID zur späteren Referenz.
Öffnen Sie die Datei TeamsToDoAppConnector.csproj aus dem geklonten Repository.
Wechseln Sie in Ihrem geklonten Repository zu Microsoft-Teams-Samples>samples>connector-todo-notification>csharp.
Öffnen Sie die appsettings.json-Datei in Visual Studio, und führen Sie die folgenden Updates aus.
- Ersetzen Sie durch BASE_URLngork URL oder dev tunnel URL.
- Ersetzen Sie durch CONNECTOR_ID die erstellte Connector-ID.
Navigieren Sie in Ihrem geklonten Repository zu Microsoft-Teams-Samples>samples>connector-todo-notification>csharp>TeamsAppPackages.
Öffnen Sie die manifest.json-Datei in Visual Studio, und nehmen Sie die folgenden Änderungen vor:
- Ersetzen Sie durch CONNECTOR_ID die erstellte Connector-ID.
- Ersetzen Sie VALID-DOMAIN in Ihre ngrok- ODER Entwicklungstunneldomäne mit Ausnahme von https://.
Press F5 to run the project. Eine Webseite wird geöffnet.

Testen des Connectors in Microsoft Teams

6 Minuten verbleibend

Erstellen Sie eine .zip-Datei mit den folgenden Dateien, die im Manifestordner vorhanden sind:
- manifest.json
- outline-icon.png
- color-icon.png
Wechseln Sie zu Microsoft Teams.
1. Wählen Sie im linken Bereich das Symbol Apps aus.
2. Wählen Sie Verwalten Ihrer Apps aus.
3. Wählen Sie App hochladen aus.
4. Suchen Sie nach der Option Hochladen einer benutzerdefinierten App.
Wählen Sie die .zip Datei aus, die Sie im Ordner Manifest erstellt haben, und wählen Sie Öffnen aus.
Wählen Sie Zu einem Team hinzufügen aus.
Wählen Sie den Team- oder Kanalnamen aus der Liste aus.
Wählen Sie Connector einrichten aus.
Suchen Sie im linken Bereich den Microsoft Teams ToDo-Connector in der Suchleiste, und wählen Sie Konfigurieren aus.
Wählen Sie entweder Erstellt oder Aktualisiert auf der Registrierungsseite und dann Speichern aus.

Nach der Konfiguration wird im Kanal eine Benachrichtigung mit einem Link zum Task-Manager-Portal angezeigt.
Wechseln Sie zum Task-Manager-Portal.
Wählen Sie Neu erstellen aus.
Geben Sie die Details des neuen Vorgangs ein:
- Titel
- Beschreibung
- Zuweisen zu
Klicken Sie auf Speichern.

Die Nachrichtenkarte wird im registrierten Teams-Kanal angezeigt.

Tipp

Sie können die auf der Nachrichtenkarte verfügbaren Aktionsschaltflächen ausprobieren.