Erstellen einer Registerkarte

Registerkarten in Chats, Kanälen oder Besprechungen verhalten sich eher wie Apps, da Sie nur eine Registerkarte pro App an den linken Bereich anheften können, um den Zugriff zu erleichtern.

Wichtig

• Informationen zum Erstellen einer Registerkarte mit dem Teams-Toolkit finden Sie unter Erstellen Ihrer ersten Registerkarten-App mit JavaScript.
• Wir haben die Teams Toolkit-Übersichtserweiterung in Visual Studio Code eingeführt. Diese Version wird mit vielen neuen App-Entwicklungsfeatures bereitgestellt. Es wird empfohlen, teams Toolkit v5 zum Erstellen Ihrer Teams-App zu verwenden.

Stellen Sie sicher, dass Sie über alle Voraussetzungen verfügen, um Ihre Registerkarte zu erstellen.

Hinweis

Dieses Thema enthält Version 2.0.x der Microsoft Teams JavaScript-Clientbibliothek (TeamsJS). Wenn Sie eine frühere Version verwenden, finden Sie in der Übersicht über die TeamsJS-Bibliothek Anleitungen zu den Unterschieden zwischen den neuesten Versionen von TeamsJS und früheren Versionen.

Erstellen einer Registerkarte mit Node.js

1. Installieren Sie an der Eingabeaufforderung die Pakete Yeoman und gulp-cli, indem Sie nach der Installation von Node.js den folgenden Befehl eingeben:

   npm install yo gulp-cli --global
   

2. Installieren Sie an der Eingabeaufforderung den Microsoft Teams-App-Generator, indem Sie den folgenden Befehl eingeben:

   npm install generator-teams --global
   

Im Folgenden werden die Schritte zum Erstellen einer Registerkarte beschrieben:

1. Generieren Ihrer Anwendung mit einer Registerkarte
2. Hinzufügen einer Inhaltsseite zur Registerkarte
3. Erstellen Ihres App-Pakets
4. Erstellen und Ausführen Ihrer Anwendung
5. Einrichten eines sicheren Tunnels zu Ihrer Registerkarte
6. Hochladen Ihrer Anwendung in Microsoft Teams

Generieren Ihrer Anwendung mit einer Registerkarte

1. Erstellen Sie an der Eingabeaufforderung ein neues Verzeichnis für Ihre Registerkarte.

2. Geben Sie den folgenden Befehl in Ihr neues Verzeichnis ein, um den Microsoft Teams-App-Generator zu starten:

   yo teams
   

3. Stellen Sie Ihre Werte für eine Reihe von Fragen bereit, die vom Microsoft Teams-App-Generator zum Aktualisieren Ihrer manifest.json Datei aufgefordert werden.

   

   Reihe von Fragen zum Aktualisieren Ihrer manifest.json-Datei

   • Wie lautet der Name Ihrer Lösung?

     Der Lösungsname ist Ihr Projektname. Sie können den vorgeschlagenen Namen annehmen, indem Sie die EINGABETASTE drücken.

   • Wohin möchten Sie die Daten verschieben?

     Sie befinden sich in Ihrem Projektverzeichnis. Drücken Sie die EINGABETASTE.

   • Titel Ihres Microsoft Teams App-Projektes?

     Der Titel ist der Name Ihres App-Pakets und wird im App-Manifest und in der Beschreibung verwendet. Geben Sie einen Titel ein, oder drücken Sie die EINGABETASTE, um den Standardnamen zu übernehmen.

   • Ihr (Firmen-)Name? (max. 32 Zeichen)

     Ihr Firmenname wird im App-Manifest verwendet. Geben Sie einen Firmennamen ein, oder drücken Sie die EINGABETASTE, um den Standardnamen zu übernehmen.

   • Welche Manifestversion möchten Sie verwenden?

     Wählen Sie das Standardschema aus.

   • Schnelles Gerüst? (Y/n)

     Der Standardwert ist "ja". geben Sie n ein, um Ihre Microsoft Partner-ID einzugeben.

   • Geben Sie Ihre Microsoft-Partner-ID ein, wenn Sie eine haben? (Zum Überspringen leer lassen)

     Dieses Feld ist nicht erforderlich und darf nur verwendet werden, wenn Sie bereits Teil des Microsoft Cloud-Partnerprogramms sind, das früher als Microsoft Partner Network bezeichnet wurde.

   • Was möchten Sie zu Ihrem Projekt hinzufügen?

     Wählen Sie ( * ) Eine Registerkarte aus.

   • Die URL, unter der Sie diese Lösung hosten möchten?:

     Standardmäßig schlägt der Generator eine Azure-Website-URL vor. Sie testen Ihre App nur lokal, daher ist keine gültige URL erforderlich.

   • Soll ein Ladeindikator angezeigt werden, während Ihre App/Registerkarte geladen wird?

     Legen Sie fest, dass beim Laden Ihrer App oder Registerkarte keine Ladeanzeige eingeschlossen werden soll. Der Standardwert ist "nein", geben Sie "n" ein.

   • Möchten Sie, dass persönliche Apps ohne eine Registerkarten-Kopfleiste dargestellt werden?

     Legen Sie fest, keine persönliche Apps ohne Registerkarten-Kopfzeilenleiste dargestellt werden sollen. Der Standardwert ist "nein", geben Sie "n" ein.

   • Möchten Sie testframework und anfängliche Tests einschließen? (y/N)

     Legen Sie fest, kein Testframework für dieses Projekt einzuschließen. Der Standardwert ist "nein", geben Sie "n" ein.

   • Möchten Sie ESLint-Unterstützung einbeziehen? (y/N)

     Legen Sie fest, keine ESLint-Unterstützung einzuschließen. Der Standardwert ist "nein", geben Sie "n" ein.

   • Möchten Sie Azure Applications Insights für Telemetriedaten verwenden? (y/N)

     Legen Sie fest, Azure Application Insightsnichteinzuschließen. Die Standardeinstellung ist "nein". geben Sie "n" ein.

   • Standardregisterkartenname (max. 16 Zeichen)?

     Benennen Sie Ihre Registerkarte. Dieser Registerkartenname wird im gesamten Projekt als eine Datei- oder URL-Pfadkomponente verwendet.

   • Welche Art von Registerkarte möchten Sie erstellen?

     Verwenden Sie die Pfeiltasten, um Persönlich (statisch) auszuwählen.

   • Benötigen Sie Microsoft Entra Unterstützung für einmaliges Anmelden für die Registerkarte?

     Wählen Sie aus, Microsoft Entra Unterstützung für einmaliges Anmelden für die Registerkarte nicht einzuschließen. Der Standardwert ist ja, geben Sie n ein.

   Hinweis

   Auf einer Registerkarte wird die Registerkarten-Startseite nur angezeigt, wenn der Benutzer die Zurück-Schaltfläche auswählt (oder aus der Registerkarte heraus bewegt) und zur Startseite zurückkehrt. Die Registerkarte behält den vorherigen Zustand nicht beabsichtigt bei oder behält sie nicht bei.

Hinzufügen einer Inhaltsseite zur Registerkarte

Erstellen Sie eine Inhaltsseite, und aktualisieren Sie die vorhandenen Dateien der Registerkartenanwendung:

1. Erstellen Sie eine neue personal.html-Datei in Ihrem Visual Studio Code mit dem folgenden Markup:

   <!DOCTYPE html>
   <html>
       <head>
           <meta charset="UTF-8">
           <title>
               <!-- Todo: add your a title here -->
           </title>
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <!-- inject:css -->
           <!-- endinject -->
       </head>
           <body>
               <h1>Personal Tab</h1>
               <p><img src="/assets/icon.png"></p>
               <p>This is your personal tab!</p>
           </body>
   </html>
   

2. Speichern Sie personal.html im Ordner public Ihrer Anwendung am folgenden Speicherort:

   ./src/public/<yourDefaultTabNameTab>/personal.html
   

3. Öffnen Sie manifest.json aus dem folgenden Speicherort in Ihrem Visual Studio Code:

    ./src/manifest/manifest.json
   

4. Fügen Sie dem leeren staticTabs-Array (staticTabs":[]) Folgendes hinzu, und fügen Sie das folgende JSON-Objekt hinzu:

   {
       "entityId": "personalTab",
       "name": "Personal Tab ",
       "contentUrl": "https://{{PUBLIC_HOSTNAME}}/<yourDefaultTabNameTab>/personal.html",
       "websiteUrl": "https://{{PUBLIC_HOSTNAME}}",
       "scopes": ["personal"]
   }
   

   Wichtig

   Die Pfadkomponente yourDefaultTabNameTab ist der Wert, den Sie im Generator für Standardregisterkartenname eingegeben haben, plus das Wort Tab.

   Beispiel: DefaultTabName ist MyTab dann /MyTabTab/

5. Aktualisieren Sie die contentURL-Pfadkomponente yourDefaultTabNameTabTab mit Ihrem tatsächlichen Registerkartennamen.

6. Speichern Sie die aktualisierte manifest.json-Datei.

7. Öffnen Sie Tab.ts in Visual Studio Code über den folgenden Pfad, um Ihre Inhaltsseite in einem iFrame bereitzustellen:

   ./src/server/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts
   

8. Fügen Sie der Liste der iFrame-Decorators Folgendes hinzu:

    @PreventIframe("/<yourDefaultTabName Tab>/personal.html")
   

9. Speichern Sie die aktualisierte Datei. Ihr Registerkartencode ist vollständig.

Erstellen Ihres App-Pakets

Sie benötigen ein App-Paket, um Ihre Anwendung in Microsoft Teams erstellen und ausführen zu können. Das App-Paket wird über eine gulp-Aufgabe erstellt, welche die manifest.json-Datei überprüft und den ZIP-Ordner im Verzeichnis ./package generiert. Verwenden Sie an der Eingabeaufforderung den Befehl gulp manifest.

Erstellen und Ausführen Ihrer Anwendung

Erstellen Ihrer Anwendung

Geben Sie an der Eingabeaufforderung den folgenden Befehl ein, um Ihre Lösung in den Ordner ./dist zu transpilieren (transkompilieren):

gulp build

Ausführen Ihrer Anwendung

1. Geben Sie an der Eingabeaufforderung den folgenden Befehl ein, um einen lokalen Webserver zu starten:

   gulp serve
   

2. Geben Sie http://localhost:3007/<yourDefaultAppNameTab>/ in Ihren Browser ein, um die Startseite Ihrer Anwendung anzuzeigen.

   

3. Navigieren Sie http://localhost:3007/<yourDefaultAppNameTab>/personal.html, um Ihre Registerkarte anzuzeigen.

   

Einrichten eines sicheren Tunnels zu Ihrer Registerkarte

Beenden Sie an der Eingabeaufforderung den localhost, und geben Sie den folgenden Befehl ein, um einen sicheren Tunnel zu Ihrer Registerkarte einzurichten:

gulp ngrok-serve

Nachdem Ihre Registerkarte über ngrok in Microsoft Teams hochgeladen und erfolgreich gespeichert wurde, können Sie sie in Teams anzeigen, bis Ihre Tunnelsitzung endet.

Hochladen Ihrer Anwendung in Teams

1. Wechseln Sie zu Teams, und wählen Sie Apps aus.

2. Wählen Sie Apps verwalten>App> hochladenBenutzerdefinierte App hochladen aus.

3. Wechseln Sie zu Ihrem Projektverzeichnis, navigieren Sie zum Ordner ./package, wählen Sie den ZIP-Ordner aus und dann Öffnen.

   

4. Wählen Sie Hinzufügen im Dialogfeld aus. Ihre Registerkarte wird in Teams hochgeladen.

   

5. Wählen Sie im linken Bereich von Teams die Auslassungspunkte ●●● und dann Ihre hochgeladene App aus, um Ihre Registerkarte anzuzeigen.

   Ihre Registerkarte wurde erfolgreich erstellt und in Teams hinzugefügt. Sie können Ihre Registerkarten auch in Teams neu anordnen .

Erstellen einer Registerkarte mit ASP.NET Core

1. Erstellen Sie an der Eingabeaufforderung ein neues Verzeichnis für Ihr Registerkartenprojekt.

2. Klonen Sie das Beispielrepository mit dem folgenden Befehl in Ihr neues Verzeichnis, oder laden Sie den Quellcode herunter, und extrahieren Sie die Dateien:

   git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
   

Im Folgenden werden die Schritte zum Erstellen einer Registerkarte beschrieben:

1. Generieren Ihrer Anwendung mit einer Registerkarte
2. Aktualisieren und Ausführen Ihre Anwendung
3. Einrichten eines sicheren Tunnels zu Ihrer Registerkarte
4. Aktualisieren Ihres App-Pakets mit dem Entwicklerportal
5. Vorschau Ihrer App in Teams

Generieren Ihrer Anwendung mit einer Registerkarte

1. Öffnen Sie Visual Studio, und wählen Sie Öffnen eines Projekt oder einer Lösung aus.

2. Wechseln Sie zu Ordner Microsoft_Teams-Samples>samples>tab-personal>razor-csharp, und öffnen Sie PersonalTab.sln.

3. Wählen Sie in Visual Studio F5 aus, oder klicken Sie im Menü Debuggen Ihrer Anwendung auf Debuggen starten, um zu überprüfen, ob die Anwendung ordnungsgemäß geladen wurde. Wechseln Sie in einem Browser zu den folgenden URLs:

   • <http://localhost:3978/>
   • <http://localhost:3978/personalTab>
   • <http://localhost:3978/privacy>
   • <http://localhost:3978/tou>

Überprüfen des Quellcodes

Startup.cs

Dieses Projekt wurde aus einer leeren Vorlage für ASP.NET Core 3.1-Webanwendungen erstellt, wobei das Kontrollkästchen Erweitert – Für HTTPS konfigurieren beim Setup aktiviert ist. Die MVC-Dienste werden von der ConfigureServices()-Methode des Frameworks für die Abhängigkeitsinjektion registriert. Außerdem ermöglicht die leere Vorlage nicht die standardmäßige Bereitstellung statischer Inhalte, sodass die Middleware für statische Dateien der Methode Configure() mit dem folgenden Code hinzugefügt wird:

public void ConfigureServices(IServiceCollection services)
  {
      services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

Webstammordner

In ASP.NET Core sucht die Anwendung im Webstammordner nach statischen Dateien.

Index.cshtml

ASP.NET Core behandelt Dateien namens Index als Standard- oder Startseite für die Website. Wenn Ihre Browser-URL auf das Stammverzeichnis der Website zeigt, wird Index.cshtml als Startseite für Ihre Anwendung angezeigt.

Ordner „AppManifest“

Dieser Ordner enthält die folgenden erforderlichen App-Paketdateien:

• Ein Vollfarbsymbol mit einer Größe von 192 x 192 Pixeln.
• Ein transparentes Kontursymbol mit einer Größe von 32 x 32 Pixeln.
• Eine manifest.json-Datei, welche die Attribute Ihrer App angibt.

Diese Dateien müssen in einem App-Paket gezippt werden, damit sie beim Hochladen Ihrer Registerkarte in Teams verwendet werden können. Teams lädt die contentUrl in Ihrem Manifest angegebene, bettet sie in einen iframe> ein <und rendert sie auf Ihrer Registerkarte.

.csproj

Klicken Sie im Visual Studio-Lösungsexplorer mit der rechten Maustaste auf das Projekt, und wählen Sie Projektdatei bearbeiten aus. Am Ende der Datei können Sie den folgenden Code sehen, der Ihren ZIP-Ordner erstellt und aktualisiert, wenn die Anwendung erstellt wird:

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Aktualisieren und Ausführen Ihrer Anwendung

1. Öffnen Sie den Visual Studio-Lösungsexplorer, und wechseln Sie zum Ordner Pages>Shared, öffnen Sie _Layout.cshtml, und fügen Sie dem Abschnitt <head>-Kategorien Folgendes hinzu:

   <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
   <script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>
   

2. Öffnen Sie in Visual Studio Projektmappen-Explorer PersonalTab.cshtml im Ordner Pages, und fügen Sie die <script> Tags hinzumicrosoftTeams.app.initialize().

3. Klicken Sie auf Speichern.

4. Wählen Sie in Visual Studio F5 oder Debuggen starten im Menü Debuggen Ihrer Anwendung aus.

Einrichten eines sicheren Tunnels zu Ihrer Registerkarte

Führen Sie an der Eingabeaufforderung im Stammverzeichnis Ihres Projektverzeichnisses den folgenden Befehl aus, um einen sicheren Tunnel zu Ihrer Registerkarte einzurichten:

ngrok http 3978 --host-header=localhost

Aktualisieren Ihres App-Pakets mit dem Entwicklerportal

1. Wechseln Sie zum Entwicklerportal.

2. Öffnen Sie Apps, und wählen Sie App importieren aus.

3. Der Dateiname des App-Pakets lautet tab.zip und ist unter pfad /bin/Debug/netcoreapp3.1/tab.zip verfügbar.

4. Wählen Sie tab.zip aus, und öffnen Sie es im Entwicklerportal.

5. Eine Standard-App-ID wird erstellt und im Abschnitt Allgemeine Informationen aufgefüllt.

6. Fügen Sie die Kurz- und Langbeschreibung für Ihre App unter Beschreibungen hinzu.

7. Fügen Sie in Entwicklerinformationen die erforderlichen Details hinzu, und geben Sie unter Website (muss eine gültige HTTPS-URL sein) Ihre ngrok-HTTPS-URL ein.

8. Aktualisieren Sie unter App-URLs die Datenschutzrichtlinie auf https://<yourngrokurl>/privacy und die Nutzungsbedingungen auf, https://<yourngrokurl>/tou und wählen Sie Speichern aus.

9. Wählen Sie unter App-Features die Option Persönliche App>Erstellen Sie Ihre erste persönliche App-Registerkarte aus, geben Sie den Namen ein, und aktualisieren Sie die Inhalts-URL mit https://<yourngrokurl>/personalTab. Lassen Sie das Feld Website-URL leer, wählen Sie kontext as personalTab aus der Dropdownliste aus, und wählen Sie Bestätigen aus.

10. Wählen Sie Speichern.

11. Im Abschnitt "Domänen" müssen Domänen auf Ihren Registerkarten Ihre ngrok-URL ohne das HTTPS-Präfix <yourngrokurl>.ngrok.io enthalten.

Anzeigen einer Vorschau Ihrer App in Teams

1. Wählen Sie auf der Symbolleiste des Entwicklerportals Vorschau in Teams aus. Das Entwicklerportal informiert Sie darüber, dass Ihre benutzerdefinierte App erfolgreich hochgeladen wurde. Die Seite Hinzufügen wird für Ihre App in Teams angezeigt.

2. Wählen Sie Hinzufügen aus, um die Registerkarte in Teams zu laden. Ihre Registerkarte ist jetzt in Teams verfügbar.

   

   Ihre Registerkarte wurde erfolgreich erstellt und in Teams hinzugefügt. Sie können Ihre Registerkarte auch in Teams neu anordnen .

Erstellen einer Registerkarte mit ASP.NET Core MVC

1. Erstellen Sie an der Eingabeaufforderung ein neues Verzeichnis für Ihr Registerkartenprojekt.

2. Klonen Sie das Beispielrepository mit dem folgenden Befehl in Ihr neues Verzeichnis, oder laden Sie den Quellcode herunter, und extrahieren Sie die Dateien:

   git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
   

Im Folgenden werden die Schritte zum Erstellen einer Registerkarte beschrieben:

1. Generieren Ihrer Anwendung mit einer Registerkarte
2. Aktualisieren und Ausführen der Anwendung
3. Einrichten eines sicheren Tunnels zu Ihrer Registerkarte
4. Aktualisieren Ihres App-Pakets mit dem Entwicklerportal
5. Vorschau Ihrer App in Teams

Generieren Ihrer Anwendung mit einer Registerkarte

1. Öffnen Sie Visual Studio, und wählen Sie Öffnen eines Projekt oder einer Lösung aus.

2. Wechseln Sie zum Ordner Microsoft-Teams-Samples>samples>tab-personal>mvc-csharp, und öffnen SiePersonalTabMVC.sln in Visual Studio.

3. Wählen Sie in Visual Studio F5 aus, oder klicken Sie im Menü Debuggen Ihrer Anwendung auf Debuggen starten, um zu überprüfen, ob die Anwendung ordnungsgemäß geladen wurde. Wechseln Sie in einem Browser zu den folgenden URLs:

   • <http://localhost:3978>
   • <http://localhost:3978/personalTab>
   • <http://localhost:3978/privacy>
   • <http://localhost:3978/tou>

Überprüfen des Quellcodes

Startup.cs

Dieses Projekt wurde aus einer leeren Vorlage für ASP.NET Core 3.1-Webanwendungen erstellt, wobei das Kontrollkästchen Erweitert – Für HTTPS konfigurieren beim Setup aktiviert ist. Die MVC-Dienste werden von der ConfigureServices()-Methode des Frameworks für die Abhängigkeitsinjektion registriert. Außerdem ermöglicht die leere Vorlage nicht die standardmäßige Bereitstellung statischer Inhalte, sodass die Middleware für statische Dateien der Methode Configure() mit dem folgenden Code hinzugefügt wird:

public void ConfigureServices(IServiceCollection services)
  {
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

Webstammordner

In ASP.NET Core sucht die Anwendung im Webstammordner nach statischen Dateien.

Ordner „AppManifest“

Dieser Ordner enthält die folgenden erforderlichen App-Paketdateien:

• Ein Vollfarbsymbol mit einer Größe von 192 x 192 Pixeln.
• Ein transparentes Kontursymbol mit einer Größe von 32 x 32 Pixeln.
• Eine manifest.json-Datei, welche die Attribute Ihrer App angibt.

Diese Dateien müssen in einem App-Paket gezippt werden, damit sie beim Hochladen Ihrer Registerkarte in Teams verwendet werden können. Teams lädt die contentUrl in Ihrem Manifest angegebene, bettet sie in einen iFrame ein und rendert sie auf Ihrer Registerkarte.

.csproj

Klicken Sie im Visual Studio-Lösungsexplorer mit der rechten Maustaste auf das Projekt, und wählen Sie Projektdatei bearbeiten aus. Am Ende der Datei sehen Sie den folgenden Code, der Ihren ZIP-Ordner erstellt und aktualisiert, wenn die Anwendung erstellt wird:

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

Modelle

PersonalTab.cs stellt ein Nachrichtenobjekt und Methoden dar, die vom PersonalTabController aufgerufen werden, wenn ein Benutzer eine Schaltfläche in der PersonalTab-Ansicht auswählt.

Ansichten

Diese Ansichten sind verschiedenen Ansichten in ASP.NET Core MVC:

• Startseite: ASP.NET Core behandelt Dateien namens Index als die Standard- oder Startseite für die Website. Wenn Ihre Browser-URL auf das Stammverzeichnis der Website zeigt, wird Index.cshtml als Startseite für Ihre Anwendung angezeigt.

• Freigegeben: Das Markup der Teilansicht _Layout.cshtml enthält die allgemeine Seitenstruktur der Anwendung und freigegebene visuelle Elemente. Außerdem wird auf die Teams-Bibliothek verwiesen.

Controller

Die Controller verwenden die ViewBag-Eigenschaft, um Werte dynamisch in die Ansichten zu übertragen.

Aktualisieren und Ausführen Ihrer Anwendung

1. Öffnen Sie den Visual Studio-Lösungsexplorer, und wechseln Sie zum Ordner Views>Shared, öffnen Sie _Layout.cshtml, und fügen Sie dem Abschnitt <head>-Kategorien Folgendes hinzu:

   <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
   <script src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js" integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4" crossorigin="anonymous"></script>
   

2. Öffnen Sie in Visual Studio Projektmappen-Explorer PersonalTab.cshtml im Ordner "Views>PersonalTab", und fügen Sie innerhalb der <script> Tags hinzumicrosoftTeams.app.initialize().

3. Klicken Sie auf Speichern.

4. Wählen Sie in Visual Studio F5 oder Debuggen starten im Menü Debuggen Ihrer Anwendung aus.

Einrichten eines sicheren Tunnels zu Ihrer Registerkarte

Führen Sie an der Eingabeaufforderung im Stammverzeichnis Ihres Projektverzeichnisses den folgenden Befehl aus, um einen sicheren Tunnel zu Ihrer Registerkarte einzurichten:

ngrok http 3978 --host-header=localhost

Aktualisieren Ihres App-Pakets mit dem Entwicklerportal

1. Wechseln Sie zum Entwicklerportal.

2. Öffnen Sie Apps, und wählen Sie App importieren aus.

3. Der Name Ihres App-Pakets lautet tab.zip. Es ist im folgenden Pfad verfügbar:

   /bin/Debug/netcoreapp3.1/tab.zip
   

4. Wählen Sie tab.zip aus, und öffnen Sie es im Entwicklerportal.

5. Eine Standard-App-ID wird erstellt und im Abschnitt Allgemeine Informationen aufgefüllt.

6. Fügen Sie die Kurz- und Langbeschreibung für Ihre App unter Beschreibungen hinzu.

7. Fügen Sie unter Entwicklerinformationen die erforderlichen Details hinzu, und geben Sie unter Website (muss eine gültige HTTPS-URL sein) Ihre ngrok-HTTPS-URL an.

8. Aktualisieren Sie unter App-URLs die Datenschutzrichtlinie auf https://<yourngrokurl>/privacy und die Nutzungsbedingungen auf, https://<yourngrokurl>/tou und wählen Sie Speichern aus.

9. Wählen Sie unter App-Features die Option Persönliche App>Erstellen Sie Ihre erste persönliche App-Registerkarte aus, geben Sie den Namen ein, und aktualisieren Sie die Inhalts-URL mit https://<yourngrokurl>/personalTab. Lassen Sie das Feld Website-URL leer, wählen Sie kontext as personalTab aus der Dropdownliste aus, und wählen Sie Bestätigen aus.

10. Wählen Sie Speichern.

11. Im Abschnitt „Domänen“ müssen Domänen auf Ihren Registerkarten Ihre ngrok-URL ohne das HTTPS-Präfix <yourngrokurl>.ngrok.io enthalten.

Anzeigen einer Vorschau Ihrer App in Teams

1. Wählen Sie auf der Symbolleiste des Entwicklerportals Vorschau in Teams aus. Das Entwicklerportal informiert Sie darüber, dass Ihre benutzerdefinierte App erfolgreich hochgeladen wurde. Die Seite Hinzufügen wird für Ihre App in Teams angezeigt.

2. Wählen Sie Hinzufügen aus, um die Registerkarte in Teams zu laden. Ihre Registerkarte ist jetzt in Teams verfügbar.

   

   Ihre Registerkarte wurde erfolgreich erstellt und in Teams hinzugefügt. Sie können Ihre Registerkarte auch in Teams neu anordnen .

Mit Blazor können Sie interaktive Webbenutzeroberfläche mithilfe von C# anstelle von JavaScript erstellen. Sie können eine Registerkarten-App und eine Bot-App mit Blazor und der neuesten Version von Visual Studio erstellen.

Hinweis

Das Teams-Toolkit unterstützt die Nachrichtenerweiterungsfunktion nicht.

Hier finden Sie eine Liste der Tools, die Sie zum Erstellen und Bereitstellen Ihrer App benötigen.

	Installieren	Zum Benutzen...
Required
	Visual Studio, Version 17.2.0, Vorschauversion 2.1	Wählen Sie Visual Studio Enterprise 2022 Preview (Version 17.2.0, Vorschauversion 2.1) aus.
	Microsoft Teams	Microsoft Teams für die Zusammenarbeit mit allen Personen, mit denen Sie arbeiten, über Apps für Chats, Besprechungen und Anrufe an einem Ort.
	Microsoft Edge (empfohlen) oder Google Chrome	Ein Browser mit Entwicklertools.

Vorbereiten der Entwicklungsumgebung

Nachdem Sie die erforderlichen Tools installiert haben, richten Sie die Entwicklungsumgebung ein.

Installieren des Microsoft Teams-Toolkits

Das Teams Toolkit vereinfacht den Entwicklungsprozess mit Tools zum Bereitstellen und Bereitstellen von Cloudressourcen für Ihre App, veröffentlichen sie im Teams Store und vieles mehr. Sie können das Toolkit mit Visual Studio oder als Befehlszeilenschnittstelle (namens teamsfx) verwenden.

Neueste Version von Visual Studio

Sie können die neueste Version von Visual Studio verwenden, um Teams-Apps mit Blazor Server in .NET zu entwickeln.

So installieren Sie die Microsoft Teams Toolkit-Erweiterung:

1. Laden Sie die neueste Version von Visual Studio herunter.

2. Öffnen Sie vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe in Ihrem Downloadordner.

3. Wählen Sie auf der Seite Visual Studio-Installer die Option Weiter aus, um Ihre Installation zu konfigurieren.

   

4. Wählen Sie ASP.NET und Webentwicklung unter Workloads aus.

5. Wählen Sie unter Installationsdetailsdie Option Microsoft Teams-Entwicklungstools aus.

6. Wählen Sie Installieren aus.

   

   Visual Studio ist in wenigen Minuten installiert.

Befehlszeile

Verwenden Sie den Paket-Manager, um die npm TeamsFx-CLI zu installieren:

npm install -g @microsoft/teamsfx-cli

Abhängig von Ihrer Konfiguration müssen Sie möglicherweise verwenden sudo , um die CLI zu installieren:

sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli

Diese Bedingung tritt häufiger auf Linux- und macOS-Systemen auf.

Stellen Sie sicher, dass Sie den globalen npm-Cache zu Path hinzufügen. Dieser Schritt wird normalerweise als Teil des Node.js-Installationsprogramms ausgeführt.

Sie können die CLI mit dem teamsfx Befehl verwenden. Überprüfen Sie, ob der Befehl funktioniert, indem Sie ausführen teamsfx -h.

Achtung

Bevor Sie TeamsFx in PowerShell-Terminals ausführen können, müssen Sie die remote signierte Ausführungsrichtlinie für PowerShell aktivieren.

Einrichten Ihres Teams-Entwicklungsmandanten

Ein Mandant ist wie ein Raum oder Container für Ihre organization in Teams, in dem Sie chatten, Dateien freigeben und Besprechungen ausführen. In diesem Bereich laden Sie auch Ihre benutzerdefinierte App hoch und testen sie. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.

Option zum Hochladen benutzerdefinierter Apps aktivieren

Nachdem Sie die App erstellt haben, müssen Sie ihre App in Teams laden, ohne sie zu verteilen. Dieser Vorgang wird als benutzerdefinierter App-Upload bezeichnet. Melden Sie sich bei Ihrem Microsoft 365-Konto an, um diese Option anzuzeigen.

Verfügen Sie bereits über einen Mandanten und den Administratorzugriff? Lassen Sie uns überprüfen, ob Sie dies wirklich tun!

Überprüfen Sie, ob Sie eine benutzerdefinierte App in Teams hochladen können:

1. Wählen Sie im Teams-Client Apps aus.

2. Wählen Sie Verwalten Ihrer Apps aus.

3. Wählen Sie Benutzerdefinierte App hochladen aus. Wenn die Option Benutzerdefinierte App hochladen angezeigt wird, ist der benutzerdefinierte App-Upload aktiviert.

   

   Hinweis

   Wenden Sie sich an Ihren Teams-Administrator, wenn Sie die Option zum Hochladen einer benutzerdefinierten App nicht finden.

Erstellen eines kostenlosen Teams-Entwicklermandanten (optional)

Wenn Sie nicht über ein Teams-Entwicklerkonto verfügen, können Sie es kostenlos erhalten. Nehmen Sie am Microsoft 365-Entwicklerprogramm teil!

1. Gehen Sie zu Microsoft 365-Entwicklerprogramm.

2. Wählen Sie Jetzt beitreten aus, und folgen Sie den Anweisungen auf dem Bildschirm.

3. Wählen Sie auf der Willkommensseite E5-Abonnement einrichten aus.

4. Einrichten Ihres Administratorkontos. Nachdem Sie fertig sind, wird der folgende Bildschirm angezeigt.

   

5. Melden Sie sich bei Teams mit dem Administratorkonto an, das Sie gerade eingerichtet haben. Vergewissern Sie sich, dass Sie über die Option Benutzerdefinierte App hochladen in Teams verfügen.

Abrufen eines kostenlosen Azure-Kontos

Wenn Sie Ihre App hosten oder auf Ressourcen in Azure zugreifen möchten, benötigen Sie ein Azure-Abonnement. Erstellen Sie ein kostenloses Konto , bevor Sie beginnen.

Jetzt verfügen Sie über alle Tools und richten Ihre Konten ein. Richten Sie als Nächstes Ihre Entwicklungsumgebung ein, und beginnen Sie mit dem Erstellen!

Erstellen eines Projektarbeitsbereichs für Ihre Registerkarten-App

Starten Sie die Teams-App-Entwicklung, indem Sie Ihre erste App erstellen. Diese App verwendet die Tabulatorfunktion.

Dieses Tutorial führt Sie durch die Schritte zum Erstellen, Ausführen und Bereitstellen Ihrer ersten Teams-App mithilfe von .NET/Blazor.

Auf dieser Seite erfahren Sie Folgendes:

1. Einrichten eines neuen Registerkartenprojekts mit dem Teams-Toolkit
2. Informationen zur Verzeichnisstruktur Ihrer App

Erstellen eines Registerkartenprojekts

Verwenden Sie das Teams-Toolkit, um Ihr erstes Registerkartenprojekt zu erstellen. Das Toolkit führt Sie durch eine Reihe von Seiten, um Ihr Teams-App-Projekt zu erstellen und zu konfigurieren:

1. Neue Projektseite erstellen : Sie können den Projekttyp auswählen.
2. Neue Projektseite konfigurieren : Sie können die Projektdetails eingeben.
3. Neue Teams-Anwendungsseite erstellen : Sie können die Teams-App-Funktionen auswählen.

So erstellen Sie ihren Registerkartenprojektarbeitsbereich

1. Öffnen Sie die neueste Version von Visual Studio.

2. Wählen Sie Neues Projekt erstellen aus.

   

   Die Seite Neues Projekt erstellen wird angezeigt.

3. Wählen Sie die Projektdetails aus.

   Wählen Sie den Projekttyp aus:

   1. Suchen Sie in der Dropdownliste vorlagen nach Microsoft Teams .

   2. Wählen Sie Microsoft Teams-App als Vorlage aus.

   3. Wählen Sie Weiter aus.

      

      Die Seite Neues Projekt konfigurieren wird angezeigt.

4. Konfigurieren Sie die neuen Projektdetails.

   Wählen Sie die folgende Projektkonfiguration aus:

   1. Geben Sie einen geeigneten Namen für Ihr Projekt ein.

      Hinweis

      Sie können beachten, dass der von Ihnen eingegebene Projektname automatisch auch als Projektmappenname eingegeben wird. Wenn Sie möchten, können Sie den Projektmappennamen ohne Auswirkungen auf den Projektnamen ändern.

   2. Wählen Sie den Ordnerpfad aus, in dem Sie den Projektarbeitsbereich erstellen möchten.

   3. Geben Sie ggf. einen anderen Lösungsnamen ein.

   4. Aktivieren Sie die Option, um das Projekt und die Projektmappe bei Bedarf im gleichen Ordner zu speichern. Für dieses Tutorial benötigen Sie diese Option nicht.

   5. Wählen Sie Erstellen aus.

      

      Die Seite Neue Teams-Anwendung erstellen wird angezeigt.

5. Wählen Sie Teams-App-Feature aus.

   1. Wählen Sie die Registerkarte als Funktion für Ihre App aus.

   2. Wählen Sie Erstellen aus.

   

   Ihre Teams-Registerkarten-App wird in wenigen Sekunden erstellt.

   

   Eine kurze Zusammenfassung der Erstellung einer Teams-Registerkarten-App.

   Sehen Sie sich diese kurze Zusammenfassung zum Erstellen einer Teams-Registerkarten-App an.

   

Machen Sie einen Überblick über den Quellcode für die Teams-Registerkarten-App

Nach der Projekterstellung verfügen Sie über die Komponenten, um eine einfache Registerkarten-App zu erstellen. Sie können die Projektverzeichnisstruktur im Bereich Projektmappen-Explorer von Visual Studio anzeigen.

Teams Toolkit erstellt ein Gerüst für Ihr Projekt basierend auf den von Ihnen ausgewählten Funktionen. Teams Toolkit verwaltet unter anderem Folgendes:

Ordnername	Inhalt
App-Symbole	Die App-Symbole werden als PNG-Dateien in color.png und outline.png gespeichert.
manifest.json	Das App-Manifest für die Veröffentlichung über das Entwicklerportal für Teams wird in Properties/manifest.jsongespeichert.
BackendController.cs	Ein Back-End-Controller wird in Controllers/BackendController.cs zur Unterstützung bei der Authentifizierung bereitgestellt.
Pages/Tab.razor	Das App-Manifest für die Veröffentlichung über das Entwicklerportal für Teams wird in Properties/manifest.jsongespeichert.
TeamsFx.cs und JS/src/index.js	Der Inhalt wird zum Initialisieren der Kommunikation mit dem Teams-Host verwendet.

Sie können Back-End-Funktionen hinzufügen, indem Sie Ihrer Anwendung weitere ASP.NET Core Controller hinzufügen.

Erstellen und Ausführen Ihrer ersten Teams-Registerkarten-App

Nachdem Sie Ihren Projektarbeitsbereich mit Teams Toolkit eingerichtet haben, erstellen Sie Ihr Registerkartenprojekt.

So erstellen Sie Ihre App und führen sie aus:

1. Wählen Sie ProjectTeams Toolkit>Prepare Teams App Dependencies (Teams-App-Abhängigkeiten> vorbereiten) aus.

   

2. Wählen Sie Ihr Microsoft 365-Konto oder Konto hinzufügen aus , um sich anzumelden.

   

3. Wählen Sie Debuggen>Debuggen starten oder F5 aus, um Ihre App im Debugmodus auszuführen.

   Erfahren Sie, was geschieht, wenn Sie Ihre App lokal im Debugger ausführen.

   Wenn Sie F5 auswählen, Teams Toolkit:

   1. Registriert Ihre Anwendung bei Microsoft Entra ID.
   2. Registriert Ihre Anwendung für das Hochladen in Teams.
   3. Startet ihr Anwendungs-Back-End, das lokal ausgeführt wird.
   4. Startet ihr lokal gehostetes Anwendungs-Front-End.
   5. Startet Teams in einem Webbrowser mit einem Befehl, um Teams anzuweisen, eine benutzerdefinierte App hochzuladen (die URL wird im Anwendungsmanifest registriert).

4. Installieren Sie bei Bedarf das selbstsignierte SSL-Zertifikat für das lokale Debuggen.

   

   Teams wird in einem Webbrowser geladen.

5. Wählen Sie Hinzufügen aus, wenn Sie aufgefordert werden, die App in Teams zu installieren.

   

   Herzlichen Glückwunsch, Ihre erste Registerkarten-App wird in Ihrer lokalen Umgebung ausgeführt!

   

6. Navigieren Sie durch die Seite, um die Benutzerdetails anzuzeigen.

7. Wählen Sie Autorisieren aus, damit Ihre App Benutzerdetails mithilfe von Microsoft Graph abrufen kann.

   Die App fordert die Berechtigung zum Gewähren des Zugriffs zum Anzeigen von Benutzerdetails an.

   

8. Wählen Sie Akzeptieren aus, damit Ihre App auf Benutzerdetails zugreifen kann.

   

   Ihr Foto und Ihre Details werden auf Ihrer Persönlichen Registerkarte angezeigt.

   

   Sie können normale Debugaktivitäten ausführen, z. B. das Festlegen von Haltepunkten, als ob es sich um eine andere Webanwendung handeln würde. Die App unterstützt Hot Reloading. Wenn Sie eine Datei innerhalb des Projekts ändern, wird die Seite erneut geladen.

   Erfahren Sie, wie Sie Probleme beheben, wenn Ihre App nicht lokal ausgeführt wird.

   Zum Ausführen Ihrer App in Teams benötigen Sie ein Microsoft 365-Entwicklungskonto, das das Hochladen benutzerdefinierter Apps ermöglicht. Weitere Informationen hierzu finden Sie im Abschnitt Voraussetzungen.

9. Beenden Sie das Debuggen in Visual Studio.

Vorschau Ihrer ersten Teams-Registerkarten-App

Sie haben gelernt, eine Teams-App mit Registerkartenfunktion zu erstellen, zu erstellen und auszuführen. Die folgenden letzten Schritte sind das Bereitstellen Ihrer App in Azure und die Vorschau in Teams:

1. Bereitstellen Ihrer Registerkarten-App in der Cloud: Sie können Ihre Registerkarten-App in der Cloud bereitstellen.

2. Bereitstellen Ihrer Registerkarten-App in der Cloud: Sie können Ihre Registerkarten-App in der Cloud bereitstellen.

3. Vorschau Ihrer Registerkarten-App in Teams: Sie können eine Vorschau Ihrer Registerkarten-App in Teams anzeigen.

   Wir stellen die erste App mit Registerkartenfunktion in Azure mithilfe des Teams-Toolkits bereit.

So stellen Sie Ihre Registerkarten-App in der Cloud bereit

1. Wählen Sie Project>Teams Toolkit>Provision in the Cloud aus.

   

2. Geben Sie im Dialogfeld Bereitstellen die Details zu Abonnement und Ressourcengruppe ein :

   1. Wählen Sie den Abonnementnamen in der Dropdownliste Abonnementname aus.
   2. Wählen Sie die Ressourcengruppe in der Dropdownliste Ressourcengruppe oder Neu aus, um die für Ihre App generierte Ressourcengruppe hinzuzufügen.
   3. Wählen Sie Ihre Region aus, wenn eine neue Ressourcengruppe erstellt wird.
   4. Wählen Sie Bereitstellen aus.

   

   Die Bereitstellungswarnung wird angezeigt.

3. Wählen Sie Bereitstellen aus.

   

   Die Bereitstellung Ihrer Ressourcengruppe in der Cloud dauert einige Minuten.

4. Klicken Sie nach Abschluss der Bereitstellung auf OK.

   

5. Wählen Sie Bereitgestellte Ressourcen anzeigen aus, um Azure-Portal anzuzeigen.

   

6. Melden Sie sich bei Ihrem Azure-Portal-Konto bei der Anmeldeaufforderung an.

   Ihre app-dev-rg wird angezeigt.

   

   Ihre Ressourcen werden im Azure-Portal bereitgestellt!

So stellen Sie Ihre Registerkarten-App in der Cloud bereit

1. Wählen Sie ProjectTeams Toolkit>Deploy to the Cloud (In> der Cloud bereitstellen) aus.

   

2. Wählen Sie OK aus.

   

   Ihre Registerkarten-App wurde erfolgreich in der Cloud bereitgestellt!

So zeigen Sie eine Vorschau Ihrer Registerkarten-App in Teams an

1. Wählen Sie Project>Teams Toolkit>Preview in Teams aus.

   

2. Wählen Sie Hinzufügen aus, wenn Sie aufgefordert werden, die App in Teams zu installieren.

   

   Herzlichen Glückwunsch, Ihre erste Registerkarten-App wird in Ihrer Azure-Umgebung ausgeführt!

   

   Navigieren Sie durch die Seite, um die Benutzerdetails anzuzeigen.

3. Wählen Sie Autorisieren aus, damit Ihre App Benutzerdetails mithilfe von Microsoft Graph abrufen kann.

   Die App fordert die Berechtigung zum Gewähren des Zugriffs zum Anzeigen von Benutzerdetails an.

   

4. Wählen Sie Akzeptieren aus, damit Ihre App auf Benutzerdetails zugreifen kann.

   

   Ihr Foto und Ihre Details werden auf Ihrer Persönlichen Registerkarte angezeigt.

   

Glückwunsch

Sie haben das Tutorial zum Erstellen einer Registerkarten-App mit Blazor abgeschlossen.

Registerkarten neu anordnen

Ab Manifestversion 1.7 können Entwickler alle Registerkarten in ihrer persönlichen App neu anordnen. Sie können die Registerkarte Botchat , die standardmäßig immer auf die erste Position festgelegt ist, an eine beliebige Stelle in der Kopfzeile der persönlichen App-Registerkarte verschieben. Es werden zwei reservierte entityId-Schlüsselwörter für die Registerkarte deklariert, Unterhaltungen und Info.

Wenn Sie einen Bot mit einem persönlichen Bereich erstellen, wird er standardmäßig in der ersten Registerkartenposition in einer persönlichen App angezeigt. Wenn Sie ihn an eine andere Position verschieben möchten, müssen Sie Ihrem Manifest ein statisches Registerkartenobjekt mit dem reservierten Schlüsselwort Unterhaltungen hinzufügen. Die Registerkarte Unterhaltung wird im Web und auf dem Desktop angezeigt, je nachdem, wo Sie die Unterhaltungsregisterkarte im staticTabs Array hinzufügen.

{
   "staticTabs":[
      {
         
      },
      {
         "entityId":"conversations",
         "scopes":[
            "personal"
         ]
      }
   ]
}

Hinweis

Auf mobilgeräten werden Registerkarten wie in staticTabsdefiniert neu angeordnet.

Mit dieser Eigenschaft können Sie auch die Standardzielfunktion für Ihre App festlegen. Sie können die App so konfigurieren, dass sie standardmäßig als Registerkarte oder als Bot geöffnet wird. Weitere Informationen finden Sie unter Konfigurieren der Standardzielfunktion.

Erweitern statischer Registerkarten auf Gruppenchats, Kanäle und Besprechungen

Hinweis

Um Ihre statische Registerkarte auf Gruppenchats, Kanäle und Besprechungen zu erweitern, verwenden Sie das App-Manifest v1.16 oder höher.

Sie können statische Registerkarten auf Gruppenchats, Kanäle und Besprechungen erweitern. Anstelle angehefteter App-Inhalte können Sie Registerkarten erstellen, die sich eher wie Apps verhalten, da Sie nur eine Registerkarte pro App anheften können, z. B. eine einzelne YouTube-App-Registerkarte anheften.

Um Ihre statischen Registerkarten auf Gruppenchats, Kanäle und Besprechungen zu erweitern, aktualisieren Sie Ihr App-Manifest mit den scopes Parametern und context in der staticTabs -Eigenschaft. Wenn Sie mehrere statische Registerkarten im Manifest deklarieren und die App im Kanalbereich hinzufügen, wird nur die erste Registerkarte im Manifest angezeigt.

Im Folgenden finden Sie ein Beispiel für ein App-Manifest, in dem eine statische Registerkarte definiert ist, die in allen Bereichen und Kontexten in Teams funktioniert:

"staticTabs": [ 
  { 
     "entityId": "homeTab", 
     "scopes": [ 
       "personal", 
       "groupChat", 
       "team"
      ], 
     "context": [ 
       "personalTab",
       "channelTab", 
       "privateChatTab", 
       "meetingChatTab", 
       "meetingDetailsTab", 
       "meetingSidePanel", 
       "meetingStage" 
      ], 
      "name": "Contoso", 
      "contentUrl": "https://contoso.com/content (displayed in Teams canvas)", 
      "websiteUrl": "https://contoso.com/content (displayed in web browser)" 
  }
], 

Wenn im App-Manifest kein Kontext definiert ist, berücksichtigt Teams standardmäßig den folgenden Kontext:

"context": [ 
   "personalTab",
   "channelTab",
   "privateChatTab", 
   "meetingChatTab", 
   "meetingDetailsTab", 
   "meetingStage" 
]

Anpassen Ihrer statischen Registerkarte in Chats oder Besprechungen

Zum Anpassen Ihrer statischen Registerkartenoberfläche in Chats, Kanälen oder Besprechungen können Sie die setConfig APIs auf der Registerkarte verwenden, um und contentUrlwebsiteUrlzu aktualisieren. Es folgt ein Beispiel:

pages.config.setConfig({ 
  "contentUrl": "https://wwww.contoso.com/teamsapp/thread/" + context.threadId,
   ...}

Nur contentUrl und websiteUrl Änderungen werden für setConfigunterstützt, andere Eigenschaften können für statische Registerkarten nicht geändert werden.

Offline-Registerkarten

Hinweis

Persönliche Registerkarten mit Offlinefunktionen werden nur auf Teams auf Android-Geräten unterstützt.

Sie können eine persönliche Registerkarte erstellen, die in Teams ohne Internetverbindung funktioniert. Von einer Offline-Registerkarte profitieren Benutzer, die in Bereichen mit schlechter oder keiner Netzwerkabdeckung arbeiten, z. B. Außendienstmitarbeiter oder Mitarbeiter in Service und Produktion. Benutzer können die folgenden Aufgaben auf einer Offlineregisterkarte ausführen:

• Zeichnen Sie Daten über Formulare auf, die Bilder und Videos enthalten können.
• Zeigen Sie Details zu zuvor übermittelten Anforderungen, Vorfällen oder Formularen an.

Wenn das Gerät des Benutzers erneut eine Verbindung mit dem Internet hergestellt hat, synchronisiert die Registerkarte die lokal gespeicherten Daten automatisch mit einem Azure Blob Storage. Durch diese Aktion wird sichergestellt, dass alle offline vom Benutzer vorgenommenen Änderungen in einem zentralen Speicher aktualisiert werden, sodass die Datenkonsistenz im gesamten organization beibehalten wird.

Erstellen einer Offlineregisterkarte

Bevor Sie mit dem Erstellen einer Offlineregisterkarte beginnen, stellen Sie sicher, dass sie die Voraussetzungen zum Erstellen einer persönlichen Registerkarte erfüllen.

1. Erstellen Sie eine Azure Blob Storage-Instanz. Notieren Sie sich das Konto und den Containernamen zur späteren Verwendung.

2. Klonen Sie das Microsoft Teams-Beispielrepository .

3. Navigieren Sie im geklonten Repository zu beispiel>tab-support-offline>nodejs , und öffnen Sie den Ordner in Visual Studio Code.

   

4. Wechseln Sie unter EXPLORER zu Server>blobStoreOperations.js , und ersetzen Sie {{ account-Name }} und {{ container-Name }} durch die Werte Ihres Azure Blob Storage-Kontos und Containers.

5. Drücken Sie F5 , um die App zu debuggen. Teams wird in einem Browserfenster geöffnet, wenn der Build abgeschlossen ist.

6. Melden Sie sich mit Ihrem Microsoft 365-Konto an, wenn Sie dazu aufgefordert werden.

7. Wählen Sie Hinzufügen aus, wenn ein Dialogfeld geöffnet wird, damit Sie die Registerkarten-App zu Teams hinzufügen können.

   

Herzlichen Glückwunsch! Sie haben erfolgreich eine Teams-Registerkarte mit Offlinefunktionen erstellt.

Codebeispiel

Beispielname	Beschreibung	.NET	Node.js	Manifest
Registerkarte "Persönlich"	Beispiel-App, die eine benutzerdefinierte persönliche Registerkarte mit ASP.NET Kern für Gruppenchat, Kanäle und Besprechungen darstellt.	View	View	View
Persönliche Offlineregisterkarte	Die Beispiel-App zeigt eine persönliche Registerkarten-App, die in Microsoft Teams offline funktioniert.	–	View	View

Nächster Schritt

Erstellen einer Kanal- oder Gruppenregisterkarte

Siehe auch

• Erstellen von Registerkarten für Teams
• Erstellen einer Kanalregisterkarte oder Gruppenregisterkarte
• Für Teams über persönliche App oder Registerkarte freigeben
• Entwicklerportal für Teams
• App-Manifestschema für Teams
• Registerkarten auf mobilen Geräten