Erstellen einer Registerkarte

Registerkarte mit JavaScript erstellen

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

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 Ihrem 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-Dekorateure Folgendes hinzu:

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

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

Erstellen Ihres App-Pakets

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

Erstellen und Ausführen Ihrer Anwendung

Erstellen Ihrer Anwendung

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

gulp build

Ausführen Ihrer Anwendung

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

   gulp serve
   

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

   

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

   

Einrichten eines sicheren Tunnels zu Ihrer Registerkarte

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

gulp ngrok-serve

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

Hochladen Ihrer Anwendung in Teams

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

2. Wählen Sie "Apps> verwalten" aus. Hochladen einer App>Laden Sie eine benutzerdefinierte App hoch.

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

   

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

   

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

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

Erstellen einer Registerkarte mit ASP.NET Core

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

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

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

Im Folgenden finden Sie die Schritte zum Erstellen einer Registerkarte:

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 wählen Sie im Debugmenü Ihrer Anwendung die Option Debuggen starten aus, 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>

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

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

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

Aktualisieren und Ausführen Ihrer Anwendung

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

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

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

3. Klicken Sie auf Speichern.

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

Einrichten eines sicheren Tunnels zu Ihrer Registerkarte

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

ngrok http 3978 --host-header=localhost

Aktualisieren Ihres App-Pakets mit dem Entwicklerportal

1. Wechseln Sie zum Entwicklerportal.

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

3. Der Dateiname des App-Pakets lautet tab.zipund befindet sich im /bin/Debug/netcoreapp3.1/tab.zip Pfad.

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

5. Eine Standard-App-ID wird erstellt und im Abschnitt " Grundlegende Informationen " eingetragen.

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. Geben Sie unter Website (muss eine gültige HTTPS-URL sein) Ihre ngrok HTTPS-URL an.

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

9. Wählen Sie unter App-Featuresdie Option Persönliche App>Erstellen Sie Ihre erste persönliche App-Registerkarte. 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 als personalTab aus der Dropdown-Liste aus, und wählen Sie Bestätigen.

10. Wählen Sie Speichern.

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

Anzeigen einer Vorschau Ihrer App in Teams

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

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

   

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

Erstellen einer Registerkarte mit ASP.NET Core MVC

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

2. Klonen Sie das Beispielrepository mit dem folgenden Befehl in Ihr neues Verzeichnis. Sie können aber auch den Quellcode herunterladen und die Dateien extrahieren:

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

Im Folgenden finden Sie die Schritte zum Erstellen einer Registerkarte:

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 wählen Sie im Debugmenü Ihrer Anwendung die Option Debuggen starten aus, 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>

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

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

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

Aktualisieren und Ausführen Ihrer Anwendung

1. Öffnen Sie den Visual Studio-Lösungsexplorer, und wechseln Sie zum Ordner 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 im Visual Studio-Projektmappen-Explorer die Datei "PersonalTab.cshtml" aus dem Ordner"Ansichten>" und fügen Sie die <script> Tags hinzumicrosoftTeams.app.initialize().

3. Klicken Sie auf Speichern.

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

Einrichten eines sicheren Tunnels zu Ihrer Registerkarte

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

ngrok http 3978 --host-header=localhost

Aktualisieren Ihres App-Pakets mit dem Entwicklerportal

1. Wechseln Sie zum Entwicklerportal.

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

3. Der 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 " Grundlegende Informationen " eingetragen.

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. Geben Sie unter Website (muss eine gültige HTTPS-URL sein) Ihre ngrok HTTPS-URL an.

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

9. Wählen Sie unter App-Featuresdie Option Persönliche App>Erstellen Sie Ihre erste persönliche App-Registerkarte. 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 als personalTab aus der Dropdown-Liste aus, und wählen Sie Bestätigen.

10. Wählen Sie Speichern.

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

Anzeigen einer Vorschau Ihrer App in Teams

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

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

   

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

Mit Blazor können Sie interaktive Webbenutzeroberflächen mit 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.

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

Vorbereiten der Entwicklungsumgebung

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

Agents Toolkit installieren

Das Agents Toolkit hilft dabei, den Entwicklungsprozess mit Tools zum Bereitstellen und Bereitstellen von Cloud-Ressourcen für Ihre App, zur Veröffentlichung im Teams Store und vielem mehr zu vereinfachen. Sie können Agents Toolkit mit Visual Studio oder als Befehlszeilenschnittstelle von Agents Toolkit verwenden.

npm install -g @microsoft/teamsfx-cli

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

Einrichten Ihres Teams-Entwicklungsmandanten

Ein Mandant ist wie ein Raum oder Container für Ihre Organisation in Teams, in dem Sie chatten, Dateien freigeben und Besprechungen abhalten. In diesen Bereich können Sie auch Ihre benutzerdefinierte App hochladen und testen. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.

Benutzerdefinierten App-Upload 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.

Haben Sie bereits einen Mandanten und Administratorzugriff? Lassen Sie uns überprüfen, ob Sie das 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.

   

   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 kein Teams-Entwicklerkonto haben, können Sie es kostenlos erhalten. Treten Sie dem Microsoft 365-Entwicklerprogramm bei!

1. Gehen Sie zu Microsoft 365-Entwicklerprogramm.

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

3. Wählen Sie auf dem Willkommensbildschirm E5-Abonnement einrichten aus.

4. Einrichten Ihres Administratorkontos. Nach Abschluss des Vorgangs wird der folgende Bildschirm angezeigt.

   

5. Melden Sie sich mit dem soeben eingerichteten Administratorkonto bei Teams an. Stellen Sie sicher, dass die Option "Benutzerdefinierte App hochladen " in Teams vorhanden ist.

Kostenloses Azure-Konto anfordern

Wenn Sie Ihre App hosten oder auf Ressourcen in Azure zugreifen möchten, müssen Sie über ein Azure-Abonnement verfügen. Erstellen Sie ein kostenloses Konto , bevor Sie beginnen.

Jetzt haben Sie alle Tools und Ihre Konten eingerichtet. Als Nächstes richten wir deine Entwicklungsumgebung ein und beginnen mit dem Erstellen!

Erstellen eines Projektarbeitsbereichs für Ihre Registerkarten-App

Beginnen Sie mit der Entwicklung von Apps in Teams, indem Sie Ihre erste App erstellen. Diese App verwendet die Registerkartenfunktion.

Dieses Tutorial führt Sie durch das Erstellen, Ausführen und Bereitstellen Ihrer ersten Teams-App mit .NET/Blazor.

Auf dieser Seite erfahren Sie Folgendes:

1. So richten Sie mit dem Agents Toolkit ein neues Registerkartenprojekt ein
2. Informationen zur Verzeichnisstruktur Ihrer App

Erstellen Ihres Registerkartenprojekts

Verwenden Sie das Agents-Toolkit, um Ihr erstes Registerkartenprojekt zu erstellen. Das Toolkit führt Sie durch eine Reihe von Seiten zum Erstellen und Konfigurieren Ihres Teams-App-Projekts:

1. Erstellen Sie eine neue Projektseite : Wählen Sie den Projekttyp aus.
2. Konfigurieren Sie Ihre neue Projektseite: Geben Sie die Projektdetails ein.
3. Erstellen Sie eine neue Teams-Anwendungsseite : Wählen Sie die Teams-App-Funktionen aus.

So erstellen Sie Ihren Projektarbeitsbereich für Registerkarten

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

2. Wähle "Neues Projekt erstellen" aus.

   

   Die Seite Neues Projekt erstellen wird angezeigt.

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

   1. Suchen Sie aus der Vorlagen-Dropdownliste nach Microsoft 365 .

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

   3. Wählen Sie Weiter aus.

      

      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

      Der eingegebene Projektname wird automatisch ebenfalls als Projektmappenname ausgefüllt. Sie können 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 bei Bedarf einen anderen Lösungsnamen ein.

   4. Aktivieren Sie die Option zum Speichern des Projekts und der Projektmappe im selben Ordner, wenn Sie möchten. Für dieses Tutorial benötigen Sie diese Option nicht.

   5. Wählen Sie Erstellen aus.

      

      Die Seite "Neue Teams-Anwendung erstellen " wird angezeigt.

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

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

   2. Wählen Sie Erstellen aus.

      

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

   

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

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

   

Unternehmen Sie eine Tour durch den Quellcode der Teams-Registerkarten-App

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

Agents Toolkit erstellt basierend auf den ausgewählten Funktionen ein Gerüst für Ihr Projekt. Neben anderen Dateien verwaltet Agents Toolkit:

Sie können Back-End-Funktionalität hinzufügen, indem Sie Ihrer Anwendung andere 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 und führen Sie Ihre App aus:

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

   

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

   

3. Wählen Sie 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 zum Hochladen in Teams.
   3. Startet das lokal ausgeführte Anwendungs-Back-End.
   4. Startet das lokal gehostete Anwendungsfront-End.
   5. Starten Sie Teams in einem Webbrowser mit einem Befehl, um Teams anzuweisen, eine benutzerdefinierte App hochzuladen (die URL ist im Anwendungsmanifest registriert).

4. Installieren Sie falls erforderlich das selbstsignierte SSL-Zertifikat für lokales Debuggen.

   

   Teams wird in einem Webbrowser geladen.

5. Klicken Sie auf Hinzufügen.

   

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

   

   Herzlichen Glückwunsch, Ihre 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 Erteilen des Zugriffs zum Anzeigen von Benutzerdetails an.

   

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

   

   Das Foto und die Details werden auf Ihrer persönlichen Registerkarte angezeigt.

   

   Sie können normale Debugaktivitäten, z. B. das Setzen von Haltepunkten, wie jede andere Webanwendung ausführen. Die App unterstützt Hot Reloading. Wenn Sie eine Datei innerhalb des Projekts ändern, wird die Seite neu geladen.

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

   Um Ihre App in Teams ausführen zu können, benötigen Sie ein Microsoft 365-Entwicklungskonto, das das Hochladen benutzerdefinierter Apps ermöglicht. Weitere Informationen dazu finden Sie im Abschnitt Voraussetzungen.

10. Beenden Sie das Debuggen in Visual Studio.

Vorschau Ihrer ersten Teams-Registerkarten-App

Sie haben gelernt, die Teams-App mit Registerkartenfunktion zu erstellen, zu erstellen und auszuführen. Führen Sie die folgenden letzten Schritte aus, um Ihre App in Azure bereitzustellen und eine Vorschau in Teams anzuzeigen. Führen Sie die folgenden Schritte aus:

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

Stellen wir die erste App mit Registerkartenfunktion in Azure mithilfe des Agents Toolkit bereit.

So stellen Sie Ihre Registerkarten-App in der Cloud bereit

1. Wählen Sie Project>aus Microsoft 365 Agents Toolkit>in der Cloud bereitstellen.

   

2. Geben Sie die Details des Abonnements und der Ressourcengruppe im Dialogfeld "Bereitstellen " ein:

   1. Wählen Sie den Abonnementnamen aus der Dropdownliste Abonnementname aus.
   2. Wählen Sie die Ressourcengruppe aus der Dropdownliste Ressourcengruppe aus, oder wählen Sie 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.

   

   Bereitstellen von Warnanzeigen.

3. Wählen Sie "Bereitstellen" aus.

   

   Es dauert einige Minuten, bis Ihre Ressourcengruppe in der Cloud bereitgestellt ist.

4. Nachdem die Bereitstellung abgeschlossen ist, wählen Sie OK aus.

   

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

   

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

   Ihre app-dev-rg wird angezeigt.

   

   Ihre Ressourcen werden im Azure-Portal bereitgestellt!

So stellen Sie Ihre Registerkarten-App in der Cloud bereit

1. Wählen Sie Project>aus: Microsoft 365 Agents Toolkit>:In der Cloud bereitstellen.

   

2. Wählen Sie OK aus.

   

   Ihre Registerkarten-App wurde erfolgreich in der Cloud bereitgestellt!

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

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

   

   Teams wird in einem Webbrowser geladen.

2. Klicken Sie auf Hinzufügen.

   

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

   

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

   

   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 Erteilen des Zugriffs zum Anzeigen von Benutzerdetails an.

   

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

   

   Das Foto und die Details werden auf Ihrer persönlichen Registerkarte angezeigt.

   

Glückwünsche

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