Freigeben über

Erstellen einer konfigurierbaren Registerkarte

  • Artikel

Stellen Sie sicher, dass Alle Voraussetzungen erfüllt sind, um Ihre konfigurierbare 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 konfigurierbaren 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

Generieren Ihrer Anwendung mit einer konfigurierbaren Registerkarte

  1. Erstellen Sie an der Eingabeaufforderung ein neues Verzeichnis für Die konfigurierbare 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:

    Screenshot: Generator zum Aktualisieren von manifest.json Dateien

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)

    Der Name Ihres Unternehmens kann im App-Manifest verwendet werden. 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 zum Hosten dieser Lösung?

    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 für die Registerkarte Konfigurierbar auszuwählen.

  • Welche Bereiche sollen für Ihre Registerkarte verwendet werden?

    Zur Auswahl stehen Team oder Gruppenchat.

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

  • Soll diese Registerkarte in SharePoint Online verfügbar sein? (Y/n)

    Geben Sie "n" ein.

Wichtig

Die Pfadkomponente yourDefaultTabNameTab ist der Wert, den Sie im Generator für Standardregisterkartenname eingegeben haben, plus das Wort Tab. Beispiel: DefaultTabName ist zuerst MyTab, dann /MyTabTab/.

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. Geben Sie an der Eingabeaufforderung den folgenden Befehl ein:

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. Um die Registerkartenkonfigurationsseite anzuzeigen, wechseln Sie zu http://localhost:3007/<yourDefaultAppNameTab>/config.html.

    Konfigurationsseite für Registerkarten

Einrichten eines sicheren Tunnels zu Ihrer Registerkarte

Um einen sicheren Tunnel zu Ihrer Registerkarte einzurichten, beenden Sie den localhost, und geben Sie den folgenden Befehl ein:

gulp ngrok-serve

Wichtig

Nachdem Ihre Registerkarte über ngrok in Microsoft Teams hochgeladen und erfolgreich gespeichert wurde, können Sie diese in Microsoft Teams anzeigen, bis Ihre Tunnelsitzung endet. Wenn Sie die ngrok-Sitzung neu starten, müssen Sie Ihre App mit der neuen URL aktualisieren.

Hochladen Ihrer Anwendung in Microsoft 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 des App-Pakets und dann Öffnen aus.

    Screenshot: Hochladen einer Kanalregisterkarte

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

    Wenn Hinzufügen nicht im Dialogfeld angezeigt wird, entfernen Sie den folgenden Code aus dem Manifest des ZIP-Ordners des hochgeladenen App-Pakets. Zippen Sie den Ordner erneut, und laden Sie ihn in Teams hoch.

    "staticTabs": [],
"bots": [],
"connectors": [],
"composeExtensions": [],

  5. Befolgen Sie die Anweisungen zum Hinzufügen einer Registerkarte. Es gibt ein benutzerdefiniertes Konfigurationsdialogfeld für Ihre konfigurierbare Registerkarte.

  6. Klicken Sie auf Speichern, und Ihre Registerkarte wird der Registerkartenleiste des Kanals hinzugefügt.

    Screenshot: Registerkarte

    Ihre konfigurierbare Registerkarte wurde erfolgreich erstellt und in Teams hinzugefügt.

Erstellen einer benutzerdefinierten konfigurierbaren 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

Generieren Ihrer Anwendung mit einer konfigurierbaren Registerkarte

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

  2. Wechseln Sie zum Ordner Microsoft_Teams-Samples>samples>tab-channel-group>razor-csharp, und öffnen Sie channelGroupTab.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:

    • https://localhost:3978/
    • https://localhost:3978/privacy
    • https://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(options => options.EnableEndpointRouting = false);
}

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 verweist, wird Index.cshtml als Startseite für Ihre Anwendung angezeigt.

Tab.cs

Diese C#-Datei enthält eine Methode, die während der Konfiguration von Tab.cshtml aufgerufen wird.

AppManifest-Ordner

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 Microsoft Teams verwendet werden können. Wenn ein Benutzer Ihre Registerkarte hinzufügen oder aktualisieren möchte, lädt Teams die configurationUrl in Ihrem Manifest angegebene, bettet sie in einen Iframe ein und rendert sie auf Ihrer Registerkarte.

.csproj

Klicken Sie im Visual Studio-Projektmappen-Explorerfenster 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>

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

Stellen Sie sicher, dass die Eingabeaufforderung bei aktivem ngrok ausgeführt wird, und notieren Sie sich die URL.

Aktualisieren Ihrer Anwendung

  1. Öffnen Sie Visual Studio Projektmappen-Explorer, wechseln Sie zum Ordner Freigegebene Seiten>, öffnen Sie _Layout.cshtml, und fügen Sie Dem Abschnitt tags 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.2.0/js/MicrosoftTeams.min.js" 
  integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
  crossorigin="anonymous" >
</script>

    Wichtig

    Kopieren Sie nicht die <script src="...">-URLs von dieser Seite, und fügen Sie sie nicht ein, da sie nicht die neueste Version darstellen. Um die neueste Version von TeamsJS zu erhalten, wechseln Sie immer zur Microsoft Teams JavaScript-API.

  2. Fügen Sie einen Aufruf von microsoftTeams.app.initialize(); in das script-Tag ein.

  3. Wechseln Sie in Visual Studio Projektmappen-Explorer zum Ordner Pages, und öffnen Sie Tab.cshtml.

    In Tab.cshtml bietet die Anwendung dem Benutzer zwei Optionen zum Anzeigen der Registerkarte mit einem roten oder grauen Symbol. Die Schaltfläche Grau auswählen oder Rot auswählen löst saveGray() bzw saveRed() . legt fest pages.config.setValidityState(true), und aktiviert Speichern auf der Konfigurationsseite. Dieser Code teilt Teams mit, dass die Konfiguration der Anforderungen abgeschlossen ist, und Sie können mit der Installation fortfahren. Die Parameter von pages.config.setConfig sind festgelegt. Schließlich wird aufgerufen, saveEvent.notifySuccess() um anzugeben, dass die Inhalts-URL erfolgreich aufgelöst wurde.

  4. Aktualisieren Sie die Werte websiteUrl und contentUrl jeder Funktion mit der HTTPS-ngrok-URL zu Ihrer Registerkarte.

    Ihr Code sollte jetzt Folgendes enthalten, wobei y8rCgT2b durch Ihre ngrok-URL ersetzt wurde:

    
    let saveGray = () => {
        microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
            microsoftTeams.pages.config.setConfig({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                entityId: "grayIconTab",
                suggestedDisplayName: "MyNewTab",
                removeUrl: ""
            });
            saveEvent.notifySuccess();
        });
    }

    let saveRed = () => {
        microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
            microsoftTeams.pages.config.setConfig({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                entityId: "redIconTab",
                suggestedDisplayName: "MyNewTab",
                removeUrl: ""
            });
            saveEvent.notifySuccess();
        });
    }

  5. Speichern Sie das aktualisierte Tab.cshtml.

Erstellen und Ausführen Ihrer Anwendung

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

  2. Stellen Sie sicher, dass ngrok ordnungsgemäß ausgeführt wird und funktioniert, indem Sie Ihren Browser öffnen und über die ngrok-HTTPS-URL, die in Ihrem Eingabeaufforderungsfenster bereitgestellt wurde, zu Ihrer Inhaltsseite wechseln.

    Tipp

    Es müssen sowohl Ihre Anwendung in Visual Studio als auch ngrok ausgeführt werden, um die in diesem Artikel beschriebenen Schritte auszuführen. Wenn Sie die Ausführung Ihrer Anwendung in Visual Studio beenden müssen, um daran zu arbeiten, lassen Sie ngrok weiterhin aktiv. Sie überwacht das Routing der Anforderung Ihrer Anwendung und setzt es fort, wenn sie in Visual Studio neu gestartet wird. Wenn Sie den ngrok-Dienst neu starten müssen, wird eine neue URL zurückgegeben, und Sie müssen Ihre Anwendung mit der neuen URL aktualisieren.

Aktualisieren Ihres App-Pakets mit dem Entwicklerportal

  1. Wechseln Sie zu Teams. Wenn Sie die webbasierte Version verwenden, können Sie Ihren Front-End-Code mithilfe der Entwicklertools Ihres Browsers überprüfen.

  2. Wechseln Sie zum Entwicklerportal.

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

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

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

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

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

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

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

  9. Aktualisieren Sie in App-URLs die Datenschutzrichtlinie auf https://<yourngrokurl>/privacy und die Nutzungsbedingungen auf https://<yourngrokurl>/tou, und speichern Sie.

  10. Wählen Sie unter App-Featuresdie Option Gruppierungs- und Kanal-App aus. Aktualisieren Sie die Konfigurations-URL mit https://<yourngrokurl>/tab, und wählen Sie den Bereich Ihrer Registerkarte aus.

  11. Wählen Sie Speichern.

  12. 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 Microsoft Teams angezeigt.

  2. Wählen Sie Zu Team hinzufügen aus, um die Registerkarte in einem Team einzurichten. Konfigurieren Sie Ihre Registerkarte, und klicken Sie auf Speichern. Ihre Registerkarte ist jetzt in Microsoft Teams verfügbar.

    Screenshot: Die Kanalregisterkarte wird hochgeladen.

    Ihre konfigurierbare Registerkarte wurde erfolgreich erstellt und in Teams hinzugefügt.

Erstellen einer benutzerdefinierten konfigurierbaren 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

Generieren Ihrer Anwendung mit einer konfigurierbaren Registerkarte

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

  2. Wechseln Sie zum Ordner Microsoft-Teams-Samples>samples>tab-channel-group>mvc-csharp, und öffnen Sie ChannelGroupTabMVC.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:

    • https://localhost:3978/
    • https://localhost:3978/privacy
    • https://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(options => options.EnableEndpointRouting = false);
}

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 Microsoft Teams verwendet werden können.

.csproj

Klicken Sie im Visual Studio-Projektmappen-Explorerfenster 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

ChannelGroup.cs stellt ein Nachrichtenobjekt und Methoden dar, die während der Konfiguration von den Controllern aufgerufen werden können.

Ansichten

Die verschiedenen Ansichten in ASP.NET Core MVC sind:

  • 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 verweist, kann Index.cshtml als Startseite für Ihre Anwendung angezeigt werden.

  • Freigegeben: Das Teilansichtsmarkup _Layout.cshtml enthält die gesamte Seitenstruktur der Anwendung und freigegebene visuelle Elemente, die ebenfalls auf die Teams-Bibliothek verweisen.

Controller

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

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

Stellen Sie sicher, dass die Eingabeaufforderung bei aktivem ngrok ausgeführt wird, und notieren Sie sich die URL.

Aktualisieren Ihrer Anwendung

  1. Öffnen Sie Visual Studio Projektmappen-Explorer, wechseln Sie zum Ordner Ansichten>Freigegeben, öffnen Sie _Layout.cshtml, und fügen Sie dem Abschnitt tags 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.2.0/js/MicrosoftTeams.min.js" 
  integrity="sha384yBjE++eHeBPzIg+IKl9OHFqMbSdrzY2S/LW3qeitc5vqXewEYRWegByWzBN/chRh" 
  crossorigin="anonymous" >
</script>

    Wichtig

    Kopieren Sie nicht die <script src="...">-URLs von dieser Seite, und fügen Sie sie nicht ein, da sie nicht die neueste Version darstellen. Um die neueste Version des SDK zu erhalten, wechseln Sie immer zu Microsoft Teams JavaScript-API.

  2. Fügen Sie einen Aufruf von microsoftTeams.app.initialize(); in das script-Tag ein.

  3. Wechseln Sie in Visual Studio Projektmappen-Explorer zum Ordner Tab, und öffnen Sie Tab.cshtml.

    In Tab.cshtml bietet die Anwendung dem Benutzer zwei Optionen zum Anzeigen der Registerkarte mit einem roten oder grauen Symbol. Die Schaltfläche Grau auswählen oder Rot auswählen löst saveGray() bzw saveRed() . legt fest pages.config.setValidityState(true), und aktiviert Speichern auf der Konfigurationsseite. Dieser Code teilt Teams mit, dass die Konfiguration der Anforderungen abgeschlossen ist, und Sie können mit der Installation fortfahren. Die Parameter von pages.config.setConfig sind festgelegt. Schließlich wird saveEvent.notifySuccess() aufgerufen, um anzugeben, dass die Inhalts-URL erfolgreich aufgelöst wurde.

  4. Aktualisieren Sie die Werte websiteUrl und contentUrl jeder Funktion mit der HTTPS-ngrok-URL zu Ihrer Registerkarte.

    Ihr Code sollte jetzt Folgendes enthalten, wobei y8rCgT2b durch Ihre ngrok-URL ersetzt wurde:

    
    let saveGray = () => {
        microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
            microsoftTeams.pages.config.setConfig({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                entityId: "grayIconTab",
                suggestedDisplayName: "MyNewTab",
                removeUrl:""
            });
            saveEvent.notifySuccess();
        });
    }

    let saveRed = () => {
        microsoftTeams.pages.config.registerOnSaveHandler((saveEvent) => {
            microsoftTeams.pages.config.setConfig({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                entityId: "redIconTab",
                suggestedDisplayName: "MyNewTab",
                removeUrl:""
            });
            saveEvent.notifySuccess();
        });
    }

  5. Stellen Sie sicher, dass Sie die aktualisierte Datei Tab.cshtml speichern.

Erstellen und Ausführen Ihrer Anwendung

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

  2. Stellen Sie sicher, dass ngrok ordnungsgemäß ausgeführt wird und funktioniert, indem Sie Ihren Browser öffnen und über die ngrok-HTTPS-URL, die in Ihrem Eingabeaufforderungsfenster bereitgestellt wurde, zu Ihrer Inhaltsseite wechseln.

    Tipp

    Es müssen sowohl Ihre Anwendung in Visual Studio als auch ngrok ausgeführt werden, um die in diesem Artikel beschriebenen Schritte auszuführen. Wenn Sie die Ausführung Ihrer Anwendung in Visual Studio beenden müssen, um daran zu arbeiten, lassen Sie ngrok weiterhin aktiv. Sie überwacht das Routing der Anforderung Ihrer Anwendung und setzt es fort, wenn sie in Visual Studio neu gestartet wird. Wenn Sie den ngrok-Dienst neu starten müssen, wird eine neue URL zurückgegeben, und Sie müssen Ihre Anwendung mit der neuen URL aktualisieren.

Aktualisieren Ihres App-Pakets mit dem Entwicklerportal

  1. Wechseln Sie zu Teams. Wenn Sie die webbasierte Version verwenden, können Sie Ihren Front-End-Code mithilfe der Entwicklertools Ihres Browsers überprüfen.

  2. Wechseln Sie zum Entwicklerportal.

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

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

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

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

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

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

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

  9. Aktualisieren Sie in App-URLs die Datenschutzrichtlinie auf https://<yourngrokurl>/privacy und die Nutzungsbedingungen auf https://<yourngrokurl>/tou, und speichern Sie.

  10. Wählen Sie unter App-Featuresdie Option Gruppierungs- und Kanal-App aus. Aktualisieren Sie die Konfigurations-URL mit https://<yourngrokurl>/tab, und wählen Sie den Bereich Ihrer Registerkarte aus.

  11. Wählen Sie Speichern.

  12. 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 Microsoft Teams angezeigt.

  2. Wählen Sie Zu Team hinzufügen aus, um die Registerkarte in einem Team einzurichten. Konfigurieren Sie Ihre Registerkarte, und klicken Sie auf Speichern. Ihre Registerkarte ist jetzt in Microsoft Teams verfügbar.

    Screenshot: Die Kanalregisterkarte wird in Teams hochgeladen.

    Ihre konfigurierbare Registerkarte wurde erfolgreich erstellt und in Teams hinzugefügt.

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 Ausgabe der Registerkarte, des Bots und der Nachrichtenerweiterung, nachdem der Schritt-für-Schritt-Leitfaden für Blazor erfolgreich abgeschlossen wurde.

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, mit denen Sie über Apps für Chats, Besprechungen und Anrufe zusammenarbeiten – alles 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.

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.

    Screenshot: Visual Studio-Installer mit rot hervorgehobenen Weiteroptionen.

  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.

    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.

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

    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.

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

Screenshot der Blazor-App, die die endgültige Ausgabe der Registerkarten-App anzeigt, nachdem die Schritt-für-Schritt-Anleitung 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 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.

    Screenshot: Visual Studio mit rot hervorgehobener Option

    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.

      Screenshot: Erstellen eines neuen Projekts mit rot hervorgehobener Option

      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.

      Screenshot: Bildschirm zum Konfigurieren Ihres neuen Projekts in Visual Studio

      Die Seite Neue Teams-Anwendung erstellen wird angezeigt.

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

    App-Feature auswählen:

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

    2. Wählen Sie Erstellen aus.

    Screenshot: Seite zum Erstellen einer neuen Teams-Registerkartenanwendung

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

Screenshot: Tipps für die ersten Schritte beim Erstellen Ihrer App in Visual Studio

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.

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

Nach der Projekterstellung verfügen Sie über die Komponenten zum Erstellen einer einfachen persönlichen App. Sie können die Projektverzeichnisstruktur im Bereich Projektmappen-Explorer von Visual Studio anzeigen.

Screenshot: Projektmappen-Explorer mit den Komponenten zum Erstellen einer einfachen persönlichen App in Visual Studio

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.

    Screenshot: Auswählen der Option zum Vorbereiten von Teams-App-Abhängigkeiten für Ihr Projekt in Visual Studio

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

    Screenshot: Option zum Auswählen eines Microsoft 365-Kontos

  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, die benutzerdefinierte App hochzuladen (die URL wird im Anwendungsmanifest registriert).

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

    Screenshot: Option zum Auswählen von

    Teams wird in einem Webbrowser geladen.

  5. Wählen Sie Zu einem Team hinzufügen aus, wenn Sie aufgefordert werden, die App in Teams zu installieren.

    Screenshot: Option zum Hinzufügen Ihrer Blazor-App zu einem Team

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

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

    Screenshot: Option zum Autorisieren von Benutzerdetails in Ihrer Registerkarten-App

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

    Screenshot: Option zum Akzeptieren der angeforderten Berechtigung

    Ihr Foto und Ihre Details werden auf der Kanalregisterkarte angezeigt.

    Screenshot der Kanalregisterkarte mit grundlegenden Informationen

    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 zu den 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 die Bereitstellung Ihrer App in Azure und der 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.

    Screenshot: Auswählen der Bereitstellung in den Cloudoptionen für das Projekt in Visual Studio

  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: Dialogfeld

    Die Bereitstellungswarnung wird angezeigt.

  3. Wählen Sie Bereitstellen aus.

    Screenshot: Option zum Auswählen der Bereitstellung in der angezeigten Teams Toolkit-Warnung

    Die Bereitstellung Ihrer Ressourcengruppe in der Cloud dauert einige Minuten.

  4. Klicken Sie nach Abschluss der Bereitstellung auf OK.

    Der Screenshot zeigt, dass Ihre App erfolgreich in der Cloud bereitgestellt wurde.

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

    Screenshot: Option zum Anzeigen bereitgestellter Ressourcen im Dialogfeld

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

    Ihre app-dev-rg wird angezeigt.

    Screenshot: Blazor-App mit den im Azure-Portal bereitgestellten Ressourcen

    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.

    Screenshot: Auswählen der Option zum Bereitstellen in der Cloud für Ihr Projekt in Visual Studio

  2. Wählen Sie OK aus.

    Screenshot: 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>Teams Toolkit>Preview in Teams aus.

    Screenshot: Auswählen der Vorschau in den Teams-Optionen für Ihr Projekt in Visual Studio

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

    Screenshot: Option zum Hinzufügen Ihrer Blazor-App in Teams

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

    Der Screenshot zeigt, dass Ihre App in Ihrer Azure-Umgebung ausgeführt wird.

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

    Screenshot: Option

  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.

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

    Screenshot: Persönliche Registerkarte mit grundlegenden Informationen

Glückwunsch

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

Migrieren der konfigurierbaren Registerkarte zur statischen Registerkarte

Hinweis

Verwenden Sie das App-Manifest v1.16 oder höher, um die konfigurierbare Registerkarte zur statischen Registerkarte zu migrieren.

Die Funktion für statische Registerkarten wurde erweitert, um Gruppenchat, Kanäle und Besprechungen zu unterstützen. Auf statischen Registerkarten gibt es kein Konfigurationsdialogfeld, sodass Benutzer die Registerkarte sofort anheften können. Sie haben die Möglichkeit, Ihre Registerkarte zu konfigurieren, nachdem sie angeheftet wurde, da Sie mithilfe der setConfig APIs die contentUrländern können. Dies kann hilfreich sein, um die Landing Page bei Bedarf zu ändern. Wenn Sie mehrere statische Registerkarten im Manifest deklarieren und die App im Kanalbereich hinzufügen, wird nur die erste Registerkarte im Manifest angezeigt.

Sie können Ihre vorhandene konfigurierbare Registerkarte auf eine statische Registerkarte aktualisieren und der statischen Registerkarte verschiedene Bereiche hinzufügen. So ändern Sie die konfigurierbare Registerkarte in eine statische Registerkarte:

  1. Verschieben Sie Ihre Konfigurationslogik aus Ihrem configurationUrl Codebereich in Ihren contentUrl Codebereich.

  2. Fügen Sie die staticTabs Eigenschaft ihrem App-Manifest mit scopes den Parametern und context hinzu. 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)" 
  }
],

    Weitere Informationen finden Sie unter Konfigurationsseite und statische Registerkarte.

Wenn Ihre App konfigurierbare Registerkarten unterstützt, müssen Sie die configurableTab Eigenschaft weiterhin in Ihrem App-Manifest beibehalten, um die Abwärtskompatibilität der zuvor angehefteten Registerkarten sicherzustellen. Da Sie jetzt nur noch statische Registerkarten anheften können, ist es wichtig, dass vorherige konfigurierbare Registerkarten weiterhin unterstützt werden.

Nächster Schritt

Erstellen einer Inhaltsseite

Siehe auch