Freigeben über

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

Wir haben die Erweiterung Microsoft 365 Agents Toolkit (früher als Teams Toolkit bezeichnet) in Visual Studio Code eingeführt. Diese Version wird mit vielen neuen App-Entwicklungsfeatures bereitgestellt. Es wird empfohlen, agents 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 JavaScript

Befolgen Sie die Schritt-für-Schritt-Anleitung, um Ihre Registerkarten-App mit JavaScript zu erstellen.

Es ist ein Problem aufgetreten.

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.

Es ist ein Problem aufgetreten.

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.

    Standardregisterkarte

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

    Standard HTML-Registerkarte

Es ist ein Problem aufgetreten.

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 AppsMicrosoft Teams Store 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.

    Hinzufügen der Registerkarte

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

    Persönliche Registerkarte 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 .

Es ist ein Problem aufgetreten.

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>

Es ist ein Problem aufgetreten.

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.

Es ist ein Problem aufgetreten.

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.

Es ist ein Problem aufgetreten.

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.

    Standardregisterkarte

    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.

Es ist ein Problem aufgetreten.

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.

Es ist ein Problem aufgetreten.

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.

Es ist ein Problem aufgetreten.

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.

    Registerkarte „Persönlich“

    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.

Screenshot der Blazor-App mit der Anzeige der Registerkarte, des Bots und der Nachrichtenerweiterungsausgabe, nachdem der Schritt-für-Schritt-Leitfaden für Blazor erfolgreich abgeschlossen wurde.

Hinweis

Agents 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 Agents Toolkits

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

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

So installieren Sie die Agents Toolkit-Erweiterung:

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

  2. Öffnen Sie die Visual Studio-Installerdatei (.exe) aus Ihrem Downloadordner.

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

    Screenshot: Visual Studio-Installer mit rot hervorgehobenen Weiteroptionen.

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

  5. Wählen Sie unter Installationsdetails die Option Microsoft 365 Agents Toolkit aus.

  6. Wählen Sie Installieren aus.

    Screenshot: Visual Studio Enterprise Vorschau mit rot hervorgehobener Option Asp.NET, Webentwicklung und Microsoft Teams-Entwicklungstools unter Installationsdetails und Installation.

    Visual Studio ist in wenigen Minuten installiert.

Es ist ein Problem aufgetreten.

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.

Aktivieren des Benutzerdefinierten App-Uploads

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!

So ü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 App hochladen aus. Wenn die Option Benutzerdefinierte App hochladen angezeigt wird, ist der benutzerdefinierte App-Upload aktiviert.

    Screenshot: Option zum Hochladen einer benutzerdefinierten App in Teams

    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.

    Screenshot des Microsoft 365-Entwicklerprogramms mit Ihren Microsoft 365-Entwicklerabonnements für die Blazor-App.

  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.

Holen Sie sich ein kostenloses Azure-Konto

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.

Screenshot der Blazor-App, die die endgültige Ausgabe der Registerkarten-App anzeigt, nachdem der Schritt-für-Schritt-Leitfaden für Blazor erfolgreich abgeschlossen wurde.

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 Agents-Toolkit
  2. Informationen zur Verzeichnisstruktur Ihrer App

Erstellen eines Registerkartenprojekts

Verwenden Sie das Agents 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.

    Screenshot von Visual Studio mit rot hervorgehobener Option

    Die Seite Neues Projekt erstellen wird angezeigt.

  3. Wählen Sie den Projekttyp und die Details aus:

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

    2. Wählen Sie Microsoft 365 Agents als Vorlage aus.

    3. Wählen Sie Weiter aus.

      Screenshot: Erstellen eines neuen Projekts mit rot hervorgehobener Option

      Die Seite Neues Projekt konfigurieren wird angezeigt.

  4. Konfigurieren Sie die neuen Projektdetails:

    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.

      Screenshot: Konfigurieren Des neuen Projekts mit rot hervorgehobener Option

      Die Seite Neue Teams-Anwendung erstellen wird angezeigt.

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

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

    2. Wählen Sie Erstellen aus.

      Screenshot: Erstellen einer neuen Teams-Anwendung mit rot hervorgehobenen Optionen

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

    Screenshot von Visual Studio mit Tipps für die ersten Schritte beim Erstellen Ihrer App.

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

    Die grafische Darstellung zeigt den Prozess zum Erstellen der Teams-Registerkarte app1.

Es ist ein Problem aufgetreten.

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.

Screenshot des Projektmappen-Explorers mit den Komponenten zum Erstellen einer einfachen persönlichen App.

Agents Toolkit erstellt ein Gerüst für Ihr Projekt basierend auf den von Ihnen ausgewählten Funktionen. Agents 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 agents Toolkit eingerichtet haben, erstellen Sie Ihr Registerkartenprojekt.

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

  1. Wählen Sie Project>Microsoft 365 Agents Toolkit>Microsoft 365-Konto auswählen aus.

    Screenshot: Visual Studio mit den Optionen

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

    Screenshot des Microsoft 365-Kontos mit rot hervorgehobener Option

  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, Agents 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.

    Screenshot: Sicherheitswarnung mit hervorgehobener Option

    Teams wird in einem Webbrowser geladen.

  5. Klicken Sie auf Hinzufügen.

    Screenshot des Dialogfelds

  6. Wählen Sie Öffnen aus, um die App im persönlichen Bereich zu öffnen.

    Screenshot des Dialogfelds zur Bereichsauswahl mit hervorgehobener Option

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

    Screenshot: Die erste Registerkarten-App wird in Ihrer lokalen Umgebung ausgeführt.

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

  8. 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.

    Screenshot: Option

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

    Screenshot der angeforderten Berechtigungen mit den App-Informationen

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

    Screenshot: Grundlegende Informationen, die auf der Persönlichen Registerkarte Ihrer App in Teams angezeigt werden

    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.

  10. Beenden Sie das Debuggen in Visual Studio.

Es ist ein Problem aufgetreten.

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 auf Azure und die Vorschau in Teams:

  1. Bereitstellen Ihrer Registerkarten-App in der Cloud
  2. Bereitstellen Ihrer Registerkarten-App in der Cloud
  3. Anzeigen einer Vorschau Ihrer Registerkarten-App in Teams

Wir stellen die erste App mit Registerkartenfunktion auf Azure mithilfe des Agents Toolkits bereit.

So stellen Sie Ihre Registerkarten-App in der Cloud bereit

  1. Wählen Sie Project>Microsoft 365 Agents Toolkit>Provision in the Cloud aus.

    Screenshot: Visual Studio mit den Optionen

  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.

    Screenshot der rot hervorgehobenen Option

    Die Bereitstellungswarnung wird angezeigt.

  3. Wählen Sie Bereitstellen aus.

    Screenshot: Agents Toolkit mit rot hervorgehobener Bereitstellung

    Die Bereitstellung Ihrer Ressourcengruppe in der Cloud dauert einige Minuten.

  4. Klicken Sie nach Abschluss der Bereitstellung auf OK.

    Screenshot der Agents Toolkit-App mit rot hervorgehobener Option

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

    Screenshot des Agents-Toolkits mit rot hervorgehobener Option

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

    Ihre app-dev-rg wird angezeigt.

    Screenshot: Blazorapp-dev-rg mit den im Azure-Portal bereitgestellten Ressourcen

    Ihre Ressourcen werden im Azure-Portal bereitgestellt!

Es ist ein Problem aufgetreten.

So stellen Sie Ihre Registerkarten-App in der Cloud bereit

  1. Wählen Sie Project>Microsoft 365 Agents Toolkit>Deploy to the Cloud (In der Cloud bereitstellen) aus.

    Screenshot: Visual Studio mit rot hervorgehobenen Optionen

  2. Wählen Sie OK aus.

    Screenshot: Mit Agents Toolkit erstellte App mit rot hervorgehobener Option

    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>Microsoft 365 Agents Toolkit Preview>in Teams aus.

    Screenshot von Visual Studio mit den Optionen

    Teams wird in einem Webbrowser geladen.

  2. Klicken Sie auf Hinzufügen.

    Screenshot des Dialogfelds

  3. Wählen Sie Öffnen aus, um die App im persönlichen Bereich zu öffnen.

    Screenshot des Dialogfelds zur Bereichsauswahl mit hervorgehobener Option

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

    Screenshot: Persönliche Registerkarte Ihrer App in Teams

    Navigieren Sie durch die Seite, um die Benutzerdetails anzuzeigen.

  4. 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.

    Screenshot: Option

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

    Screenshot der angeforderten Berechtigungen mit den App-Informationen

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

    Screenshot: App mit persönlicher Registerkarte mit grundlegenden Informationen

Es ist ein Problem aufgetreten.

Glückwünsche

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" 
]

Aktivieren persönlicher Registerkarten-Apps für die Erweiterbarkeit von Anrufen

Sie können Persönliche Apps erstellen, die in PSTN-Anrufe (Public Switched Telephone Network) und Teams-to-Teams-Anrufe integriert werden. Verwenden Sie den richtigen Bereich und Kontext, um Apps zu erstellen, die Registerkartentyp, statischen Bereich, persönlichen Kontext und Besprechungsseitenbereiche verwenden.

Weitere Informationen finden Sie unter Buildregisterkarten für Aufrufe.

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.

Die Grafik zeigt, wie eine Offlineregisterkarte im mobilen Teams-Client funktioniert.

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. 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.

    Screenshot: Öffnen des Codebeispiels 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.

    Screenshot: Hinzufügen der Offline-Registerkarten-App zu Teams

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

Es ist ein Problem aufgetreten.

Bewährte Methoden für Registerkarten in Teams Mobile

Informationen zum Optimieren der Leistung Ihrer Registerkarte in den Teams Android- und iOS-Clients finden Sie unter Bewährte Methoden für Teams Mobile.

Schrittweise Anleitung

Weitere Informationen zum Erstellen einer Registerkarte mit C# finden Sie unter Erstellen Ihrer ersten Registerkarten-App mit C sharp.

Codebeispiel

Beispielname Beschreibung .NET Node.js Manifest
Registerkarte "Persönlich" In diesem Beispiel wird die Entwicklung einer benutzerdefinierten persönlichen Registerkarte für Microsoft Teams veranschaulicht, die ASP.NET Core MVC verwendet, um die Benutzerinteraktion zu verbessern. View View View
Persönliche Offlineregisterkarte Diese Beispiel-App veranschaulicht eine CRUD-Anwendung, die offline in Microsoft Teams funktioniert und Benutzern ermöglicht, Daten ohne Internetverbindung zu verwalten und automatisch mit Blob Storage zu synchronisieren, wenn die Verbindung wiederhergestellt wird. – View View

Nächster Schritt

Erstellen einer Kanal- oder Gruppenregisterkarte

Siehe auch

  • Last updated on