Schnellstart: Erstellen einer benutzerdefinierten persönlichen Registerkarte mit Node.js und dem Generator für Microsoft TeamsQuickstart: Create a custom personal tab with Node.js and the Yeoman Generator for Microsoft Teams

Hinweis

Diese Schnellstartleiste folgt den Schritten im Artikel Erstellen des ersten Microsoft Teams-App -Wikis, die im Microsoft officedev GitHub-Repository gefunden wurden.This quickstart follows the steps outlined in the Build Your First Microsoft Teams App Wiki found in the Microsoft OfficeDev GitHub repository.

In diesem Schnellstart werden Sie durch das Erstellen einer benutzerdefinierten persönlichen Registerkarte mithilfe des Teams-Landarbeits- Generatorsgehen.In this quickstart we'll walk-through creating a custom personal tab using the Teams Yeoman generator. Wir laden die Anwendung auch in Team hoch.We'll also upload the application to Team.

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 will 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-Entwicklerprogramm fü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. Weitere Informationen finden Sie unter Willkommen beim Office 365 Entwicklerprogramms.See Welcome to the Office 365 Developer Program.

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:

  • Jeder Text-Editor oder jede IDE.Any text editor or IDE. Sie können Visual Studio-Code kostenlos installieren und verwenden.You can install and use Visual Studio Code for free.

  • Node. js/NPM.Node.js/npm. Sie sollten die neueste LTS-Version verwenden.You should use the latest LTS version. Der Knoten Paket-Manager (NPM) wird mit der Installation von Node. js auf Ihrem System installiert.The Node Package Manager (npm) will install into your system with the installation of Node.js.

  • Nachdem Sie Node. js erfolgreich installiert haben, installieren Sie die Pakete "Autobauer" und " Schluck-CLI ", indem Sie an der Eingabeaufforderung Folgendes eingeben:After you've successfully installed Node.js, install the Yeoman and gulp-cli packages by typing the following in your command prompt:

npm install yo gulp-cli --global
  • Installieren Sie den Microsoft Teams apps-Generator, indem Sie an der Eingabeaufforderung Folgendes eingeben:Install the Microsoft Teams Apps generator by typing the following in your command prompt:
npm install generator-teams --global

Erstellen des ProjektsGenerate your project

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

  • Navigieren Sie zum Starten des Generators zu Ihrem neuen Verzeichnis, und geben Sie den folgenden Befehl ein:To start the generator, navigate to your new directory and type the following command:

yo teams
  • Als nächstes geben Sie eine Reihe von Werten an, die in der Manifest. JSON -Datei Ihrer Anwendung verwendet werden:Next, you'll provide a series of values that will be used in your application's manifest.json file:

Screenshot des Generators wird geöffnet

Wie lautet Ihr Lösungsname?What is your solution name?

Dies ist Ihr Projektname.This is your project name. Sie können den vorgeschlagenen Namen übernehmen, indem Sie die EINGABETASTE drücken.You can accept the suggested name by pressing enter.

Wohin möchten Sie die Daten verschieben?Where do you want to place the files?

Sie befinden sich derzeit im Projektverzeichnis.You're currently in your project directory. Drücken Sie die EINGABETASTE.Press enter.

Titel Ihres Microsoft Teams-App-Projekts?Title of your Microsoft Teams app project?

Dies ist der Name Ihres App-Pakets und wird im App-Manifest und in der Beschreibung verwendet.This is your app package name and will be used in the app manifest and description.

Ihren Namen (Firma)? (Max 32 Zeichen)Your (company) name? (max 32 characters)

Der Name Ihres Unternehmens wird im App-Manifest verwendet.Your company name will be used in the app manifest.


Welche manifestVersion möchten Sie verwenden?Which manifest version would you like to use?

Wählen Sie das Standardschema aus.Select the default schema.

Geben Sie Ihre Microsoft Partner-ID ein (sofern vorhanden). (Leer lassen, um zu überspringen)Enter your Microsoft Partner Id, if you have one? (Leave blank to skip)

Dieses Feld ist nicht erforderlich und sollte nur verwendet werden, wenn Sie bereits Teil des Microsoft Partner-Netzwerkssind.This field isn't required and should only be used if you're already part of the Microsoft Partner Network.

Was möchten Sie Ihrem Projekt hinzufügen?What do you want to add to your project?

* Wählen Sie eine Registerkarte aus.Select ( * ) A Tab.

Die URL, unter der Sie diese Lösung hosten werden?The URL where you will host this solution?

Standardmäßig schlägt der Generator eine Azure-Websites-URL vor.By default the generator suggests an Azure Web Sites URL. Sie testen ihre app nur lokal, daher ist für die Ausführung dieses Schnellstarts keine gültige URL erforderlich.You'll only be testing your app locally, therefore, a valid URL is not necessary to complete this quickstart.

Möchten Sie Test Framework und erste Tests einschließen? (j/N)Would you like to include Test framework and initial tests? (y/N)

Wählen Sie kein Test Framework für dieses Projekt einschließen aus.Choose not to include a test framework for this project. Der Standardwert ist yes; Geben Sie nein.The default is yes; enter n.

Möchten Sie Azure Applications-Einblicke für Telemetrie verwenden? (j/N)Would you like to use Azure Applications Insights for telemetry? (y/N)

Wählen Sie nicht aus, um Azure Application Insightseinzubeziehen.Choose not to include Azure Application Insights. Der Standardwert ist Nein; Geben Sie nein.The default is no; enter n.

Standardregisterkarten Name (maximal 16 Zeichen)?Default Tab Name (max 16 characters)?

Nennen Sie die Registerkarte. Dieser Registerkartenname wird im gesamten Projekt als Datei-URL-Pfadkomponente verwendet.Name your tab. This tab name will be used throughout your project as a file/URL path component.

Möchten Sie eine konfigurierbare oder statische RegisterkarteErstellen?Do you want to create a configurable or static tab?

Verwenden Sie die Pfeiltasten, um statische Registerkarte auszuwählen.Use the arrow keys to select static tab.

Wichtig

In der Pfadkomponente yourDefaultTabNameTab, auf die in diesem Schnellstart verwiesen wird, handelt es sich um den Wert, den Sie im Generator für den standardmäßigen Registerkartennamen sowie die RegisterKarte Word eingegeben haben.The path component yourDefaultTabNameTab, referenced in this quickstart, is the value that you entered in the generator for Default Tab Name plus the word Tab.

Beispiel: DefaultTabName: mytab => /MyTabTab/For example: DefaultTabName: MyTab => /MyTabTab/

Erstellen Ihrer persönlichen RegisterkarteCreate your personal tab

Zum Hinzufügen einer persönlichen Registerkarte zu dieser Anwendung erstellen Sie eine Inhaltsseite und aktualisieren vorhandene Dateien:To add a personal tab to this application you'll create a content page and update existing files:

  • Erstellen Sie in Ihrem Code-Editor eine neue HTML-Datei personal.html , und fügen Sie das folgende Markup hinzu:In your code editor, create a new HTML file, personal.html and add the following 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>
  • Speichern Sie personal.html im Webordner ihrer Anwendung:Save personal.html in your application's web folder:
./src/app/web/<yourDefaultTabNameTab>/personal.html
  • Öffnen Sie manifest.js im Code-Editor:Open manifest.json in your code editor:
./src/manifest/manifest.json/

Fügen Sie Folgendes zum leeren staticTabs Array hinzu ( staticTabs":[] ), und fügen Sie das folgende JSON-Objekt hinzu:Add the following to the empty staticTabs array (staticTabs":[]) and add the following JSON object:

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

Denken Sie daran, die "contentURL" -Pfadkomponente yourDefaultTabNameTab mit Ihrem tatsächlichen Registerkartennamen zu aktualisieren.Remember to update the "contentURL" path component yourDefaultTabNameTab with your actual tab name.

  • Speichern Sie die aktualisierte manifest.js.Save the updated manifest.json.

  • Die Inhaltsseite muss in einem IFRAME bereitgestellt werden.Your content page must be served in an IFrame. Öffnen Sie Tab. TS in Ihrem Code-Editor:Open Tab.ts in your code editor:

./src/app/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.ts
  • Fügen Sie der Liste der iframe-Dekorateure Folgendes hinzu:Add the following to the list of IFrame decorators:
 @PreventIframe("/<yourDefaultAppName>TabNameTab>/personal.html")
  • Achten Sie darauf, die aktualisierte Registerkarte. TS -Datei zu speichern.Make sure to save the updated Tab.ts file. Der Tab-Code ist abgeschlossen.Your tab code is complete.

Erstellen und Ausführen der AnwendungBuild and Run Your Application

Öffnen Sie im Projektverzeichnis eine Eingabeaufforderung, um die nächsten Aufgaben abzuschließen.Open a command prompt in your project directory to complete the next tasks.

Erstellen des App-PaketsCreate the app package

Sie benötigen ein App-Paket, um Ihre Registerkarte in Microsoft Teams zu testen.You'll need an app package to test your tab in Teams. Es handelt sich um einen ZIP-Ordner, der die folgenden erforderlichen Dateien enthält:It's a zip folder that contains the following required 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.
  • Eine Manifest. JSON -Datei, die die Attribute Ihrer APP angibt.A manifest.json file that specifies the attributes of your app.

Das Paket wird über eine Schluck Aufgabe erstellt, mit der die Manifest. JSON-Datei überprüft und der ZIP-Ordner ./package directoryin generiert wird.The package is created via a gulp task that validates the manifest.json file and generates the zip folder in the ./package directory. Geben Sie an der Eingabeaufforderung Folgendes ein:In the command prompt enter:

gulp manifest

Erstellen der AnwendungBuild your application

Der Befehl Build stapelt die Lösung in den Ordner ./dist-Ordner. .The build command transpiles your solution into the ./dist folder. Geben Sie als nächstes Folgendes ein:Next,enter:

gulp build

Ausführen Ihrer Anwendung in localhostRun your application in localhost

Starten Sie einen lokalen Webserver, indem Sie Folgendes eingeben:Start a local web server by entering the following:

gulp serve

Geben http://localhost:3007/<yourDefaultAppNameTab>/ Sie in Ihren Browser ein, und zeigen Sie die Startseite der Anwendung an:Enter http://localhost:3007/<yourDefaultAppNameTab>/ in your browser and view your application's home page:

Screenshot der Startseite

Um Ihre persönliche Registerkarte anzuzeigen, wechseln Sie zu http://localhost:3007/<yourDefaultAppNameTab>/personal.htmlTo view your personal tab, go to http://localhost:3007/<yourDefaultAppNameTab>/personal.html

Screenshot der persönlichen Registerkarte

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. Teams nicht zulassen lokales Hosting daher müssen Sie entweder Ihre Registerkarte in einer öffentlichen URL veröffentlichen oder einen Proxy verwenden, der den lokalen Port einer URL mit Internetverbindung verfügbar macht.Teams doesn't allow local hosting, therefore, you 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.

Um Ihre Tab-Erweiterung zu testen, verwenden Sie ngrok, das in diese Anwendung integriert ist.To test your tab extension, you'll use ngrok, which is built into this application. Ngrok ist ein Reverse-Proxy-Software Tool, mit dem ein Tunnel zu den öffentlich verfügbaren HTTPS-Endpunkten des lokal ausgeführten Webservers erstellt wird.Ngrok is a reverse proxy software tool that will create a tunnel to your locally running web server's publicly-available HTTPS endpoints. Die Webendpunkte Ihres Servers sind während der aktuellen Sitzung auf Ihrem lokalen Computer verfügbar.Your server's web endpoints will be available during the current session on your local machine. Wenn der Computer heruntergefahren wird oder in den Standbymodus wechselt, steht der Dienst nicht mehr zur Verfügung.When the machine is shut down or goes to sleep the service will no longer be available.

Beenden Sie in der Eingabeaufforderung localhost, und geben Sie Folgendes ein:In your command prompt, exit localhost and enter the following:

gulp ngrok-serve

Wichtig

Nachdem die Registerkarte über ngrokin Microsoft Teams hochgeladen und erfolgreich gespeichert wurde, können Sie Sie in Teams anzeigen, bis Ihre Tunnelsitzung endet.After your tab has been uploaded to Microsoft teams, via ngrok, and successfully saved, you can view it in Teams until your tunnel session ends.

Hochladen Ihrer Anwendung in Microsoft TeamsUpload your application to Teams

  • Ö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.
  • Wählen Sie im YourTeams -Bereich auf der linken Seite das ... Menü neben dem Team aus, das Sie zum Testen der Registerkarte verwenden, und wählen Sie Team verwaltenaus.In the YourTeams panel on the left, select the ... menu next to the team that you're using to test your tab and choose Manage team.
  • Wählen Sie im Hauptbereich apps in der Registerkartenleiste aus, und wählen Sie eine benutzerdefinierte App hochladen , die sich in der unteren rechten Ecke der Seite befindet.In the main panel select Apps from the tab bar and choose Upload a custom app located in the lower right-hand corner of the page.
  • Öffnen Sie Ihr Projektverzeichnis, navigieren Sie zum Ordner ./Paket , wählen Sie den Ordner zip aus, klicken Sie mit der rechten Maustaste, und wählen Sie Öffnenaus.Open your project directory, browse to the ./package folder, select the zip folder, right-click, and choose Open. Ihre Registerkarte wird in Teams hochgeladen.Your tab will upload into Teams.

Anzeigen Ihrer persönlichen RegisterkartenView your personal tabs

Wählen Sie in der navbar, die sich auf der linken Seite des Teams-Clients befindet, das ... Menü aus, und wählen Sie Ihre APP aus der Liste aus.In the navbar located at the far-left of the Teams client, select the ... menu and choose your app from the list.