Erstellen von Agile Poker mit dem Live Share SDK

Mit dem Live Share SDK können Sie Apps für die Zusammenarbeit erstellen und weitere Möglichkeiten zur Zusammenarbeit und Verbindung über Teams entdecken. Sie können Apps erstellen, um Inhalte wie Filme ansehen, Livespiele usw. in Teams Einzelanrufen, Gruppenanrufen, Planen von Besprechungen und Besprechungen zu teilen.

Diese Schritt-für-Schritt-Anleitung hilft Ihnen beim Erstellen einer Agile Poker-Beispiel-App mit dem Live Share SDK. Die folgende Ausgabe wird angezeigt:

Voraussetzungen

5 Minuten verbleibend

Sie installieren die folgenden Tools und richten Ihre Entwicklungsumgebung ein:

	Installieren	Zum Benutzen...
	Microsoft Teams	Microsoft Teams für die Zusammenarbeit mit allen, mit denen Sie arbeiten, über Apps für Chats, Besprechungen und Anrufe 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.
	Node.js und NPM	Back-End-JavaScript-Laufzeitumgebung. Weitere Informationen finden Sie unter Node.js Versionskompatibilitätstabelle für den Projekttyp.
	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.

Erstellen und Ausführen der Agile Poker-Beispiel-App

4 Minuten verbleibend

Wechseln Sie zur Agile Poker-Beispiel-App.
Klonen Sie das Live Share SDK-Repository, um die Beispiel-App zu testen:
```
  git clone https://github.com/microsoft/live-share-sdk.git
```
Öffnen Sie ein Terminalfenster.
Führen Sie den folgenden Befehl aus, um zum Ordner der Agile Poker-Beispiel-App zu wechseln:
```
cd live-share-sdk\samples\javascript\22.react-agile-poker
```
Führen Sie den folgenden Befehl aus, um das Abhängigkeitspaket zu installieren:
```
npm install
```
Führen Sie den folgenden Befehl aus, um den Client und den lokalen Server zu starten:
```
npm run start
```
Eine neue Browserregisterkarte öffnet ein http://localhost:3000 Fenster, und das Agile Poker-Spiel wird angezeigt.
Öffnen Sie ein neues ngrok-Terminalfenster, um einen Tunnel zu erstellen und Ihre App lokal bereitzustellen.
Führen Sie den folgenden Befehl aus, um einen Tunnel zu erstellen. Die Beispiel-App verwendet Port 3000:
```
ngrok http 3000--host-header=localhost
```
Der ngrok-Tunnel wird erstellt.

Einrichten der Manifestdatei und Hochladen Ihrer App

3 Minuten verbleibend

Sie müssen die Manifestdatei einrichten und das manifest.zip-Paket in Teams hochladen.

Öffnen Sie die manifest.json-Datei , und aktualisieren Sie die folgenden Informationen.
- Legen Sie auf Microsoft-App-ID fest"ID".
- Ersetzen Sie alle Vorkommen von <<BASE_URI_DOMAIN>> durch Ihren vollqualifizierten ngrok- oder devtunnel-Domänennamen.
Erstellen Sie eine .zip-Datei mit den folgenden Dateien, die im Manifestordner vorhanden sind:
- manifest.json
- outline.png
- color.png
Erstellen Sie eine Besprechung in Teams mit einigen Referenten und Teilnehmern.
Nehmen Sie an der Besprechung teil.
Nachdem die Besprechung gestartet wurde, wählen Sie Apps aus.
Wählen Sie im Popupfenster Apps verwalten aus.
Wählen Sie App hochladen aus.
Wählen Sie die .zip Datei aus, die Sie im Ordner Manifest erstellt haben, und wählen Sie Öffnen aus.
Klicken Sie auf Hinzufügen.
Wechseln Sie zurück zur Seite mit den Besprechungsdetails, und wählen Sie Apps>Agile Poker-App aus.
Klicken Sie auf Speichern.

Die Agile Poker-App wird dem Seitenbereich der Teams-Besprechung hinzugefügt.