Erstellen einer benutzerdefinierten Kanal-und Gruppenregisterkarte mit ASP.net-Kern-MVCCreate a Custom Channel and Group Tab with ASP.NET Core MVC

In diesem Schnellstart werden wir durch das Erstellen einer benutzerdefinierten Kanal-Gruppe-Registerkarte mit C#-und ASP.net-Kern-MVC Schritt halten.In this quickstart we'll walk-through creating a custom channel/group tab with C# and ASP.Net Core MVC. Wir verwenden auch App Studio für Microsoft Teams , um Ihr App-Manifest abzuschließen und die Registerkarte in Teams bereitzustellen.We'll also use App Studio for Microsoft Teams to finalize your app manifest and deploy your tab to Teams.

VoraussetzungenPrerequisites

  • Um diesen Schnellstart abzuschließen, benötigen Sie einen Office 365 Mandanten und ein Team, das mit aktiviertem Hochladen benutzerdefinierter apps zulassen konfiguriert ist.To complete this quickstart you'll need an Office 365 tenant and a team configured with Allow uploading custom apps enabled. Weitere Informationen finden Sie unter Vorbereiten des Office 365 Mandanten.To learn more, see Prepare your Office 365 tenant.

    • Wenn Sie derzeit kein Office 365 Konto haben, können Sie sich über das Office 365-Entwicklerprogrammfür ein kostenloses Abonnement anmelden.If you don't currently have an Office 365 account, you can sign up for a free subscription through the Office 365 Developer Program. Das Abonnement bleibt aktiv, solange Sie es für die laufende Entwicklung verwenden.The subscription will remain active as long as you're using it for ongoing development.
  • Sie verwenden App Studio, um Ihre Anwendung in Microsoft Teams zu importieren.You'll use App Studio to import your application to Teams. Um App Studio zu installieren **** , wählen Sie Apps Store-App in der unteren linken Ecke der Teams-App aus, und suchen Sie nach App Studio.To install App Studio select Apps Store App at the bottom-left corner of the Teams app, and search for App Studio. Nachdem Sie die Kachel gefunden haben, wählen Sie Sie aus, und wählen Sie im Dialogfeld Popupfenster installieren aus.Once you find the tile, select it and choose install in the pop-up window dialog box.

Dieses Projekt erfordert außerdem, dass in Ihrer Entwicklungsumgebung Folgendes installiert ist:In addition, this project requires that you have the following installed in your development environment:

  • Die aktuelle Version die Visual Studio-IDE mit installierter .net-Kern plattformübergreifender Entwicklungs Arbeitslast.The current version the Visual Studio IDE with the .NET CORE cross-platform development workload installed. Wenn Sie noch nicht über Visual Studio verfügen, können Sie die neueste Microsoft Visual Studio Community -Version kostenlos herunterladen und installieren.If you don't already have Visual Studio, you can download and install the latest Microsoft Visual Studio Community version for free.

  • Das ngrok -Reverseproxy-Tool.The ngrok reverse proxy tool. Sie verwenden ngrok, um einen Tunnel zu den öffentlich verfügbaren HTTPS-Endpunkten des lokal ausgeführten Webservers zu erstellen.You'll use ngrok to create a tunnel to your locally running web server's publicly-available HTTPS endpoints. Sie können es hier herunterladen.You can download it here.

Abrufen des QuellcodesGet the source code

Öffnen Sie eine Eingabeaufforderung, und erstellen Sie ein neues Verzeichnis für Ihr Tab-Projekt.Open a command prompt and create a new directory for your tab project. Wir haben ein einfaches Kanalgruppen-Registerkarten Projekt zur Verfügung gestellt, damit Sie loslegen können.We have provided a simple Channel Group Tab project to get you started. Zum Abrufen des Quellcodes können Sie den ZIP-Ordner herunterladen und die Dateien extrahieren oder das Beispiel-Repository in Ihr neues Verzeichnis kopieren:To retrieve the source code you can download the zip folder and extract the files or clone the sample repository into your new directory:

git clone https://github.com/OfficeDev/microsoft-teams-sample-tabs.git

Nachdem Sie den Quellcode haben, öffnen Sie Visual Studio, und wählen Sie Projekt oder Lösung öffnenaus.Once you have the source code, open Visual Studio and select Open a project or solution. Navigieren Sie zum Anwendungsverzeichnis der Registerkarte, und öffnen Sie ChannelGroupTabMVC. sln.Navigate to the tab application directory and open ChannelGroupTabMVC.sln.

Drücken Sie zum Erstellen und Ausführen der Anwendung F5 , oder wählen Sie im Menü Debuggen die Option Debuggen starten aus.To build and run your application press F5 or choose Start Debugging from the Debug menu. Navigieren Sie in einem Browser zu den folgenden URLs, und überprüfen Sie, ob die Anwendung ordnungsgemäß geladen wurde:In a browser, navigate to the URLs below and verify that the application loaded properly:

  • http://localhost:44360
  • http://localhost:44360/privacy
  • http://localhost:44360/tou

Überprüfen des QuellcodesReview the source code

Startup.csStartup.cs

Dieses Projekt wurde aus einer leeren Vorlage für ASP.net Core 2,2-Webanwendungen erstellt, wobei das Kontrollkästchen Erweiterte Konfiguration für HTTPS beim Setup aktiviert ist.This project was created from an ASP.NET Core 2.2 Web Application empty template with the Advanced - Configure for HTTPS check box selected at setup. Die MVC-Dienste werden von der Dependency Injection Framework- ConfigureServices() Methode registriert.The MVC services are registered by the dependency injection framework's ConfigureServices() method. Darüber hinaus wird die Bereitstellung statischer Inhalte nicht standardmäßig durch die leere Vorlage aktiviert, sodass der Methode die statische Datei Middleware hinzugefügt wird Configure() :Additionally, the empty template doesn't enable serving static content by default, so the static files middleware is added to the Configure() method:

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

WWWRoot-Ordnerwwwroot folder

In ASP.net Core ist der Webstammordner, in dem die Anwendung nach statischen Dateien sucht.In ASP.NET Core, the web root folder is where the application looks for static files.

AppManifest-OrdnerAppManifest folder

Dieser Ordner enthält die folgenden erforderlichen App-Paketdateien:This folder contains the following required app package files:

  • Ein vollfarbiges Symbol , das 192 x 192 Pixel misst.A full color icon measuring 192 x 192 pixels.
  • Ein transparentes Umrisssymbol , das 32 x 32 Pixel misst.A transparent outline icon measuring 32 x 32 pixels.
  • Ein manifest.jsfür die Datei, die die Attribute Ihrer APP angibt.A manifest.json file that specifies the attributes of your app.

Diese Dateien müssen in einem App-Paket gezippt werden, damit Sie Ihre Registerkarte in Microsoft Teams hochladen können.These files need to be zipped in an app package for use in uploading your tab to Teams.

. csproj.csproj

Klicken Sie im Fenster Visual Studio Projektmappen-Explorer mit der rechten Maustaste auf das Projekt, und wählen Sie Projektdatei bearbeitenaus.In the Visual Studio Solution Explorer window right-click on the project and select Edit Project File. Unten in der Datei sehen Sie den Code, der Ihren ZIP-Ordner erstellt und aktualisiert, wenn die Anwendung erstellt wird:At the bottom of the file you'll see the code that creates and updates your zip folder when the application builds:

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

ModelleModels

ChannelGroup.cs zeigt ein Message-Objekt und Methoden an, die während der Konfiguration von den Controllern aufgerufen werden.ChannelGroup.cs presents a Message object and methods that will be called from the Controllers during configuration.

AnsichtenViews

HomeHome

ASP.net Core behandelt Dateien namens " Index " als Standard/Homepage für die Website.ASP.NET Core treats files called Index as the default/home page for the site. Wenn Ihre Browser-URL auf den Stamm der Website zeigt, wird Index. cshtml als Startseite für Ihre Anwendung angezeigt.When your browser URL points to the root of the site, Index.cshtml will be displayed as the home page for your application.

SharedShared

Das Markup _Layout. cshtml der partiellen Ansicht enthält die gesamte Seitenstruktur der Anwendung sowie freigegebene visuelle Elemente.The partial view markup _Layout.cshtml contains the application's overall page structure and shared visual elements. Außerdem wird auf die Microsoft Teams-Bibliothek verwiesen.It will also reference the Teams Library.

ControllerControllers

Die Controller verwenden die ViewBag-Eigenschaft, um Werte dynamisch zu den Ansichten zu übertragen.The controllers use the ViewBag property to transfer values dynamically to the Views.

Einrichten eines sicheren Tunnels für die RegisterkarteEstablish a secure tunnel to your tab

Microsoft Teams ist ein vollständig Cloud-basiertes Produkt und erfordert, dass Ihre Registerkarteninhalte über HTTPS-Endpunkte in der Cloud verfügbar sind.Microsoft Teams is an entirely cloud-based product and requires that your tab content be available from the cloud using HTTPS endpoints. In Microsoft Teams wird kein lokales Hosting zugelassen.Teams doesn't allow local hosting. Sie müssen entweder Ihre Registerkarte in einer öffentlichen URL veröffentlichen oder einen Proxy verwenden, der Ihren lokalen Port für eine mit dem Internet verbundene URL verfügbar macht.You'll need to either publish your tab to a public URL, or use a proxy that will expose your local port to an internet-facing URL.

Zum Testen der Registerkarte verwenden Sie ngrok.To test your tab you'll use ngrok. Die Webendpunkte Ihres Servers sind verfügbar, während ngrok auf Ihrem lokalen Computer läuft.Your server's web endpoints will be available while ngrok is running on your local machine. Wenn Sie ngrok schließen, sind die URLs unterschiedlich, wenn Sie das nächste Mal starten.If you close ngrok, the URLs will be different the next time you start it.

  • Öffnen Sie eine Eingabeaufforderung im Stammverzeichnis des Projektverzeichnisses, und führen Sie den folgenden Befehl aus:Open a command prompt in the root of your project directory and run the following command:
ngrok http https://localhost:443560 -host-header="localhost:44360"
  • Ngrok wird Anfragen aus dem Internet abhören und wird Sie an Ihre Anwendung weiterleiten, wenn Sie auf Port 44355 läuft.Ngrok will listen to requests from the internet and will route them to your application when it is running on port 44355. Es sollte ähneln https://y8rCgT2b.ngrok.io/ , wo y8rCgT2b durch ihre ngrok Alpha-numerische HTTPS-URL ersetzt wird.It should resemble https://y8rCgT2b.ngrok.io/ where y8rCgT2b is replaced by your ngrok alpha-numeric HTTPS URL.

  • Achten Sie darauf, die Eingabeaufforderung mit ngrok beizubehalten, und notieren Sie sich die URL, die Sie später benötigen.Be sure to keep the command prompt with ngrok running and to make note of the URL — you'll need it later.

Aktualisieren Ihrer AnwendungUpdate your application

In Tab. cshtml zeigt die Anwendung dem Benutzer zwei Optionsschaltflächen zum Anzeigen der Registerkarte mit einem roten oder grauen Symbol an.Within Tab.cshtml the application presents the user with two option buttons for displaying the tab with either a red or gray icon. Wenn Sie die Option grau auswählen oder Rote Schaltfläche auswählen auswählen, wird saveGray() saveRed() settings.setValidityState(true) die Schaltfläche Speichern auf der Konfigurationsseite ausgelöst oder aktiviert.Choosing the Select Gray or Select Red button fires saveGray() or saveRed(), respectively, sets settings.setValidityState(true), and enables the Save button on the configuration page. Mit diesem Code können Teams wissen, dass Sie die Konfigurationsanforderungen erfüllt haben und die Installation fortgesetzt werden kann.This code lets Teams know that you have satisfied the configuration requirements and the installation can proceed. Bei Save werden die Parameter von settings.setSettings festgelegt.On save, the parameters of settings.setSettings are set. Schließlich saveEvent.notifySuccess() wird aufgerufen, um anzugeben, dass die Inhalts-URL erfolgreich aufgelöst wurde.Finally, saveEvent.notifySuccess() is called to indicate that the content URL has successfully resolved.

_Layout. cshtml_Layout.cshtml

Damit Ihre Registerkarte in Teams angezeigt wird, müssen Sie das Microsoft Teams-JavaScript-Client-SDK einschließen und microsoftTeams.initialize() nach dem Laden einer Seite einen Anruf hinzufügen.For your tab to display in Teams, you must include the Microsoft Teams JavaScript client SDK and include a call to microsoftTeams.initialize() after your page loads. So kommunizieren Ihr Tab und der Microsoft Teams-Client:This is how your tab and the Teams client communicate:

  • Navigieren Sie zum freigegebenen Ordner, öffnen Sie _Layout. cshtml, und fügen Sie dem <head> -Tag Folgendes hinzu:Navigate to the Shared folder, open _Layout.cshtml, and add the following to the <head> tag:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>

Wichtig

Kopieren/fügen Sie die <script src="..."> URLs nicht von dieser Seite ein, da Sie möglicherweise nicht die neueste Version darstellen.Don't copy/paste the <script src="..."> URLs from this page, as they may not represent the latest version. Um die neueste Version des SDK zu erhalten, wechseln Sie immer zu: Microsoft Teams-JavaScript-API.To get the latest version of the SDK, always go to: Microsoft Teams JavaScript API.

Tab. cshtmlTab.cshtml

Öffnen Sie Tab. cshtml , und aktualisieren <script> Sie die Embedded wie folgt:Open Tab.cshtml and update the embedded <script> as follows:

  • Rufen microsoftTeams.initialize()Sie am oberen Rand des Skripts auf.At the top of the script, call microsoftTeams.initialize().

  • Aktualisieren Sie websiteUrl die contentUrl -und-Werte in jeder Funktion mit der HTTPS-ngrok-URL zu ihrer Registerkarte.Update the websiteUrl and contentUrl values in each function with the HTTPS ngrok URL to your tab.

Ihr Code sollte jetzt wie folgt aussehen, wenn y8rCgT2b durch ihre ngrok-URL ersetzt wird:Your code should now look like the following with y8rCgT2b replaced with your ngrok URL:

    microsoftTeams.initialize();

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

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

Stellen Sie sicher, dass die aktualisierte Registerkarte. cshtmlgespeichert ist.Make sure to save the updated Tab.cshtml.

Erstellen und Ausführen der AnwendungBuild and run your application

  • Drücken Sie in Visual Studio F5, oder wählen Sie im Menü Debuggen die Option Debuggen starten aus.In Visual Studio press F5, or choose Start Debugging from the Debug menu. Stellen Sie sicher, dass ngrok ausgeführt wird und ordnungsgemäß funktioniert, indem Sie Ihren Browser öffnen und zu ihrer Inhaltsseite über die ngrok-HTTPS-URL wechseln, die in Ihrem Eingabeaufforderungsfenster bereitgestellt wurde.Verify that ngrok is running and working properly by opening your browser and going to your content page via the ngrok HTTPS URL that was provided in your command prompt window.

Tipp

Sie müssen sowohl Ihre Anwendung in Visual Studio als auch ngrok ausführen, um diesen Schnellstart abzuschließen.You need to have both your application in Visual Studio and ngrok running to complete this quickstart. Wenn Sie die Ausführung der Anwendung in Visual Studio beenden müssen, um damit zu arbeiten, halten Sie ngrokauf dem laufenden.If you need to stop running your application in Visual Studio to work on it keep ngrok running. Sie wird weiterhin überwacht und setzt die Weiterleitung der Anforderung Ihrer Anwendung fort, wenn Sie in Visual Studio neu gestartet wird.It will continue to listen and will resume routing your application's request when it restarts in Visual Studio. 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.If you have to restart the ngrok service it will return a new URL and you'll have to update your application with the new URL.

Hochladen der Registerkarte in Microsoft Teams mit App StudioUpload your tab to Teams with App Studio

Hinweis

Wir verwenden App Studio, um Ihre Manifest. JSON -Datei zu bearbeiten und das abgeschlossene Paket in Microsoft Teams hochzuladen.We use App Studio to edit your manifest.json file and upload the completed package to Teams. Sie können die Datei " Manifest. JSON " auch manuell bearbeiten, wenn Sie dies bevorzugen.You can also manually edit the manifest.json file if you prefer. Wenn Sie dies tun, müssen Sie die Lösung erneut erstellen, um die Datei "Tab. zip" zu erstellen, die hochgeladen werden soll.If you do, be sure to build the solution again to create the tab.zip file to upload.

  • Öffnen Sie den Microsoft Teams-Client.Open the Microsoft Teams client. Wenn Sie die webbasierte Version verwenden, können Sie den Front-End-Code mithilfe der EntwicklertoolsIhres Browsers überprüfen.If you use the web based version you can inspect your front-end code using your browser's developer tools.

  • Öffnen Sie App Studio, und wählen Sie die Registerkarte Manifest-Editor aus.Open App studio and select the Manifest editor tab.

  • Wählen Sie die Kachel Importieren einer vorhandenen APP im Manifest-Editor aus, um mit der Aktualisierung des App-Pakets für Ihre Registerkarte zu beginnen. Der Quellcode enthält ein eigenes teilweise vollständiges Manifest.Select the Import an existing app tile in the Manifest editor to begin updating the app package for your tab. The source code comes with its own partially complete manifest. Der Name Ihres App-Pakets lautet Tab. zip.The name of your app package is tab.zip. Es sollte hier gefunden werden:It should be found here:

/bin/Debug/netcoreapp2.2/tab.zip
  • Upload Tab. zip in App Studio.Upload tab.zip to App Studio.

Aktualisieren des App-Pakets mit dem Manifest-EditorUpdate your app package with Manifest editor

Nachdem Sie Ihr App-Paket in App Studio hochgeladen haben, müssen Sie die Konfiguration fertig stellen.Once you've uploaded your app package into App Studio, you'll need to finish configuring it.

  • Wählen Sie die Kachel für Ihre neu importierte Registerkarte im rechten Bereich der Willkommensseite des Manifest-Editors aus.Select the tile for your newly imported tab in the right panel of the Manifest editor welcome page.

Auf der linken Seite des Manifest-Editors finden Sie eine Liste mit Schritten und auf der rechten Seite eine Liste mit Eigenschaften, die für jeden dieser Schritte Werte enthalten müssen.There's a list of steps in the left-hand side of the Manifest editor, and on the right, a list of properties that need to have values for each of those steps. Ein Großteil der Informationen wurde von Ihrem Manifest. JSON bereitgestellt, aber es gibt ein paar Felder, die Sie aktualisieren müssen:Much of the information has been provided by your manifest.json but there are a few fields that you'll need to update:

Details: App-DetailsDetails: App details

  • Wählen Sie unter Identifikation generieren aus, um die Platzhalter-ID durch die erforderliche GUID für die Registerkarte zu ersetzen.Under Identification select Generate to replace the placeholder id with the required GUID for your tab.

  • Aktualisieren Sie unter Entwickler Informationen das Feld Website-URL mit Ihrer ngrok -HTTPS-URL.Under Developer information update the Website URL field with your ngrok HTTPS URL.

  • Aktualisieren Sie unter App-URLs die Datenschutzbestimmungen und Nutzungsbedingungen für URL-Felder mit Ihrer ngrok -HTTPS-URL.Under App URLs update the Privacy statement and Terms of use URL fields with your ngrok HTTPS URL. Denken Sie daran, die /Privacy -und /tou -Pfade am Ende der URLs einzubeziehen.Remember to include the /privacy and /tou paths at the end of the URLs.

Funktionen: RegisterkartenCapabilities: Tabs

Im Abschnitt Tabs :In the Tabs section:

  • Wählen Sie unter Team Tab die Option Hinzufügenaus.Under Team Tab select Add.

  • Aktualisieren Sie im Popupfenster der Registerkarte "Team" die Konfigurations https://<yourngrokurl>/tab- URL auf.In the Team tab pop-up window update the Configuration URL to https://<yourngrokurl>/tab.

  • Stellen Sie schließlich sicher, dass die Konfiguration aktualisiert werden kann? Team-und Gruppenchat Felder werden überprüft, und wählen Sie Speichernaus.Finally, make sure the can update configuration? Team, and Group chat boxes are checked and select Save.

Fertig stellen: Domänen und BerechtigungenFinish: Domains and permissions

Im Abschnitt Domains and Permissions sollte die Domäne aus Ihrem Registerkarten Feld Ihre ngrok- <yourngrokurl>.ngrok.io/URL ohne das Präfix "https" enthalten.In the Domains and permissions section, the Domains from your tabs field should contain your ngrok URL without the HTTPS prefix - <yourngrokurl>.ngrok.io/.

Testen und verteilen: Testen und verteilenTest and distribute: Test and distribute

Wichtig

Im Feld Beschreibung auf der rechten Seite wird die folgende Warnung angezeigt:In the Description field on the right you'll see the following warning:

⚠ "das Array" validDomains "kann keine Tunneling-Website enthalten..."⚠ "The 'validDomains' array cannot contain a tunneling site..."

Diese Warnung kann beim Testen der Registerkarte ignoriert werden.This warning can be ignored while testing your tab.

Im Abschnitt Testen und verteilen :In the Test and distribute section:

  • Installieren auswählen.Select Install.

  • Geben Sie in das Popupfenster Hinzufügen zu einem Team oder Chat Feld Ihr Team ein, und wählen Sie Installierenaus.In the pop-up window's Add to a team or chat field enter your team and select Install.

  • Wählen Sie im nächsten Popupfenster den Team Kanal aus, in dem die Registerkarte angezeigt werden soll, und wählen Sie Einrichtenaus.In the next pop-up window choose the team channel where you would like the tab displayed and select Set up.

  • Wählen Sie im letzten Popupfenster einen Wert für die Registerkartenseite aus (entweder ein rotes oder graues Symbol), und wählen Sie Speichernaus.In the final pop-up window select a value for the tab page (either a red or gray icon) and select Save.

Navigieren Sie zum Anzeigen der Registerkarte zu dem Team, auf dem Sie es installiert haben, und wählen Sie es in der Registerkartenleiste aus.To view your tab, navigate to the team you installed it on, and select it from the tab bar. Die Seite, die Sie während der Konfiguration ausgewählt haben, sollte angezeigt werden.The page that you chose during configuration should be displayed.

Hochladen der Registerkarte in Microsoft Teams mit App StudioUpload your tab to Teams with App Studio

Hinweis

Wir verwenden App Studio, um Ihre Manifest. JSON -Datei zu bearbeiten und das abgeschlossene Paket in Microsoft Teams hochzuladen.We use App Studio to edit your manifest.json file and upload the completed package to Teams. Sie können die Datei " Manifest. JSON " auch manuell bearbeiten, wenn Sie dies bevorzugen.You can also manually edit the manifest.json file if you prefer. Wenn Sie dies tun, müssen Sie die Lösung erneut erstellen, um die Datei "Tab. zip" zu erstellen, die hochgeladen werden soll.If you do, be sure to build the solution again to create the tab.zip file to upload.

  • Öffnen Sie den Microsoft Teams-Client.Open the Microsoft Teams client. Wenn Sie die webbasierte Version verwenden, können Sie den Front-End-Code mithilfe der EntwicklertoolsIhres Browsers überprüfen.If you use the web based version you can inspect your front-end code using your browser's developer tools.

  • Öffnen Sie die APP Studio-app, und wählen Sie die Registerkarte Manifest-Editor aus.Open the App Studio app and select the Manifest editor tab.

  • Wählen Sie die Kachel Importieren einer vorhandenen APP im Manifest-Editor aus, um mit der Aktualisierung des App-Pakets für Ihre Registerkarte zu beginnen. Der Quellcode enthält ein eigenes teilweise vollständiges Manifest.Select the Import an existing app tile in the Manifest editor to begin updating the app package for your tab. The source code comes with its own partially complete manifest. Der Name Ihres App-Pakets lautet Tab. zip.The name of your app package is tab.zip. Es sollte hier gefunden werden:It should be found here:

/bin/Debug/netcoreapp2.2/tab.zip
  • Upload Tab. zip in App Studio.Upload tab.zip to App Studio.

Aktualisieren des App-Pakets mit dem Manifest-EditorUpdate your app package with Manifest editor

Nachdem Sie Ihr App-Paket in App Studio hochgeladen haben, müssen Sie die Konfiguration fertig stellen.Once you've uploaded your app package into App Studio, you'll need to finish configuring it.

  • Wählen Sie die Kachel für Ihre neu importierte Registerkarte im rechten Bereich der Willkommensseite des Manifest-Editors aus.Select the tile for your newly imported tab in the right panel of the Manifest editor welcome page.

Auf der linken Seite des Manifest-Editors finden Sie eine Liste mit Schritten und auf der rechten Seite eine Liste mit Eigenschaften, die für jeden dieser Schritte Werte enthalten müssen.There's a list of steps in the left-hand side of the Manifest editor, and on the right, a list of properties that need to have values for each of those steps. Ein Großteil der Informationen wurde von Ihrem Manifest. JSON bereitgestellt, aber es gibt ein paar Felder, die Sie aktualisieren müssen:Much of the information has been provided by your manifest.json but there are a few fields that you'll need to update:

Details: App-DetailsDetails: App details

  • Wählen Sie unter Identifikation generieren aus, um eine neue APP-ID für Ihre APP zu generieren.Under Identification select Generate to generate a new App Id for your app.

  • Aktualisieren Sie unter Entwickler Informationen das Feld Website-URL mit Ihrer ngrok -HTTPS-URL.Under Developer information update the Website URL field with your ngrok HTTPS URL.

  • Aktualisieren Sie unter App https://<yourngrokurl>/privacy -URLs die Datenschutzbestimmungen und Nutzungsbedingungen für https://<yourngrokurl>/tou>.Under App URLs update the Privacy statement to https://<yourngrokurl>/privacy and Terms of use to https://<yourngrokurl>/tou>.

Funktionen: RegisterkartenCapabilities: Tabs

Im Abschnitt Tabs :In the Tabs section:

  • Wählen Sie unter Team Tab die Option Hinzufügenaus.Under Team Tab select Add.

  • Aktualisieren Sie im Popupfenster der Registerkarte "Team" die Konfigurations https://<yourngrokurl>/tab- URL auf.In the Team tab pop-up window update the Configuration URL to https://<yourngrokurl>/tab.

  • Stellen Sie schließlich sicher, dass die Konfiguration aktualisiert werden kann? Team-und Gruppenchat Felder werden überprüft, und wählen Sie Speichernaus.Finally, make sure the can update configuration? Team, and Group chat boxes are checked and select Save.

Fertig stellen: Domänen und BerechtigungenFinish: Domains and permissions

Im Abschnitt Domains and Permissions sollte die Domäne aus Ihrem Registerkarten Feld Ihre ngrok- <yourngrokurl>.ngrok.io/URL ohne das Präfix "https" enthalten.In the Domains and permissions section, the Domains from your tabs field should contain your ngrok URL without the HTTPS prefix - <yourngrokurl>.ngrok.io/.

Fertig stellen: Testen und verteilenFinish: Test and distribute

Wichtig

Im Feld Beschreibung auf der rechten Seite wird die folgende Warnung angezeigt:In the Description field on the right you'll see the following warning:

⚠ "das Array" validDomains "kann keine Tunneling-Website enthalten..."⚠ "The 'validDomains' array cannot contain a tunneling site..."

Diese Warnung kann beim Testen der Registerkarte ignoriert werden.This warning can be ignored while testing your tab.

Im Abschnitt Testen und verteilen :In the Test and distribute section:

  • Installieren auswählen.Select Install.

  • Geben Sie in das Popupfenster Hinzufügen zu einem Team oder Chat Feld Ihr Team ein, und wählen Sie Installierenaus.In the pop-up window's Add to a team or chat field enter your team and select Install.

  • Wählen Sie im nächsten Popupfenster den Team Kanal aus, in dem die Registerkarte angezeigt werden soll, und wählen Sie Einrichtenaus.In the next pop-up window choose the team channel where you would like the tab displayed and select Set up.

  • Wählen Sie im letzten Popupfenster einen Wert für die Registerkartenseite aus (entweder ein rotes oder graues Symbol), und wählen Sie Speichernaus.In the final pop-up window select a value for the tab page (either a red or gray icon) and select Save.

Navigieren Sie zum Anzeigen der Registerkarte zu dem Team, auf dem Sie es installiert haben, und wählen Sie es in der Registerkartenleiste aus.To view your tab, navigate to the team you installed it on, and select it from the tab bar. Die Seite, die Sie während der Konfiguration ausgewählt haben, sollte angezeigt werden.The page that you chose during configuration should be displayed.