Erste Schritte mit der Microsoft Teams-Plattform mit Node. js und App StudioGet started on the Microsoft Teams platform with Node.js and App Studio

Die Microsoft Teams -Entwicklerplattform erleichtert Ihnen das Erweitern von Teams und die nahtlose Integration ihrer eigenen Anwendungen und Dienste in den Arbeitsbereich "Teams".The Microsoft Teams developer platform makes it easy for you to extend Teams and integrate your own applications and services seamlessly into the Teams workspace. Diese Apps können dann an Ihr Unternehmen oder für Teams auf der ganzen Welt verteilt werden.These apps can then be distributed to your enterprise or for teams around the world.

Um Microsoft Teams zu erweitern, müssen Sie eine Microsoft Teams-app erstellen.To extend Microsoft Teams, you need to create a Microsoft Teams app. Eine Microsoft Teams-APP ist eine Webanwendung, die Sie hosten.A Microsoft Teams app is a web application that you host. Diese APP kann dann in Microsoft Teams in den Arbeitsbereich des Benutzers integriert werden.This app can then be integrated into the user's workspace in Teams.

Vorbereiten der EntwicklungsumgebungPrepare your development environment

Das erste, was Sie tun müssen, ist die Vorbereitung Ihrer Entwicklungsumgebung.The first thing you'll need to do is prepare your development environment. Sie müssen sicherstellen, dass das Hochladen von benutzerdefinierten Apps für die Office 365 Organisation aktiviert ist, in der Sie Ihre APP erstellen möchten.You'll need to make sure custom app uploading is enabled for the Office 365 organization you want to build your app in. Wenn Sie einen dedizierten Entwicklungsmandanten benötigen, können Sie sich für das Office 365 Entwicklerprogrammregistrieren.If you need a dedicated development tenant, you can sign up for the Office 365 developer program. Weitere Informationen finden Sie unter Einrichten der Entwicklungsumgebung.For additional information see Setup your development environment.

Herunterladen und Hosten Ihrer APPDownload and host your app

Führen Sie die folgenden Schritte aus, um eine einfache "Hello World"-app in Microsoft Teams herunterzuladen und zu hosten.Follow these steps to download and host a simple "hello world" app in Teams.

Abrufen von VoraussetzungenGet prerequisites

Um dieses Lernprogramm abzuschließen, benötigen Sie die folgenden Tools.To complete this tutorial, you need the following tools. Wenn Sie diese nicht bereits haben, können Sie Sie über diese Links installieren.If you don't already have them you can install them from these links.

Wenn Sie Optionen zum Hinzufügen git, node npm, und code dem Pfad während der Installation sehen, wählen Sie, um dies zu tun.If you see options to add git, node, npm, and code to the PATH during installation, choose to do so. Das ist praktisch.It will be handy.

Stellen Sie sicher, dass die Tools verfügbar sind, indem Sie Folgendes in einem Terminalfenster ausführen:Verify that the tools are available by running the following in a terminal window:

Hinweis

Verwenden Sie das Terminal-Fenster, mit dem Sie sich am besten auf Ihrer Plattform vertraut machen.Use the terminal window that you are most comfortable with on your platform. In diesen Beispielen wird bash verwendet (in git enthalten), diese Skripts werden jedoch auf den meisten Plattformen ausgeführt.These examples use Bash (which is included in Git), but these scripts will run on most platforms.

$ git --version
git version 2.19.0.windows.1

$ node -v
v8.9.3

$ npm -v
5.5.1

$ gulp -v
CLI version 4.0.2

Möglicherweise haben Sie eine andere Version dieser Anwendungen.You may have a different version of these applications. Dies sollte kein Problem sein, außer für "schlucken".This should not be a problem, except for gulp. Für Schluck müssen Sie Version 4.0.0 oder höher verwenden.For gulp you'll need to use version 4.0.0 or later.

Wenn Sie keinen Schluck installiert haben (oder die falsche Version installiert haben), tun Sie dies jetzt, npm install gulp indem Sie in Ihrem Terminal-Fenster ausführen.If you don't have gulp installed (or have the wrong version installed), do so now by running npm install gulp in your terminal window.

Wenn Sie Visual Studio Code installiert haben, können Sie die Installation überprüfen, indem Sie Folgendes durchführen:If you have installed Visual Studio Code, you can verify the installation by running:

code --version
1.28.2
929bacba01ef658b873545e26034d1a8067445e9

Sie können weiterhin dieses Terminalfenster verwenden, um die Befehle auszuführen, die in diesem Lernprogramm folgen.You can continue to use this terminal window to run the commands that follow in this tutorial.

Herunterladen des BeispielsDownload the sample

Wir haben ein einfaches Hello, World bereitgestellt!We have provided a simple Hello, World! Beispiel für die ersten Schritte.sample to get you started. Führen Sie in einem Terminalfenster den folgenden Befehl aus, um das Beispiel-Repository auf Ihren lokalen Computer zu klonen:In a terminal window, run the following command to clone the sample repository to your local machine:

git clone https://github.com/OfficeDev/msteams-samples-hello-world-nodejs.git

Tipp

Sie können dieses Repo abzweigen , wenn Sie Ihre Änderungen an Ihrem GitHub-Repo zum späteren Nachschlagen ändern und einchecken möchten.You can fork this repo if you want to modify and check in your changes to your GitHub repo for future reference.

Erstellen und Ausführen des BeispielsBuild and run the sample

Nachdem das Repository geklont wurde, wechseln Sie in das Verzeichnis, in dem sich das Beispiel befindet:Once the repo is cloned, change to the directory that holds the sample:

cd msteams-samples-hello-world-nodejs

Um das Beispiel zu erstellen, müssen Sie alle Abhängigkeiten installieren.In order to build the sample, you need to install all its dependencies. Führen Sie dazu den folgenden Befehl aus:Run the following command to do this:

npm install

Sie sollten eine Reihe von Abhängigkeiten erhalten, die installiert werden.You should see a bunch of dependencies getting installed. Nachdem Sie fertig sind, können Sie die app ausführen:Once they are finished, you can run the app:

npm start

Wenn die Hello-World-App gestartet wird, App started listening on port 3333 wird Sie im Terminalfenster angezeigt.When the hello-world app starts, it displays App started listening on port 3333 in the terminal window.

Hinweis

Wenn in der obigen Meldung eine andere Portnummer angezeigt wird, liegt dies daran, dass Sie eine Umgebungsvariable für die Port Umgebung festgelegt haben.If you see a different port number displayed in the message above, it is because you have a PORT environment variable set. Sie können diesen Port weiterhin verwenden oder Ihre Umgebungsvariable in 3333 ändern.You can continue to use that port or change your environment variable to 3333.

Nun können Sie ein Browserfenster öffnen und zu den folgenden URLs navigieren, um zu überprüfen, ob alle App-URLs geladen werden:At this point, you can open a browser window and navigate to the following URLs to verify that all the app URLs are loading:

Hosten der Beispiel-AppHost the sample app

Beachten Sie, dass apps in Microsoft Teams Webanwendungen sind, die eine oder mehrere Funktionen verfügbar machen.Remember that apps in Microsoft Teams are web applications exposing one or more capabilities. Damit die Microsoft Teams-Plattform Ihre APP lädt, muss Ihre APP über das Internet erreichbar sein.For the Teams platform to load your app, your app must be reachable from the internet. Damit Ihre APP über das Internet erreichbar ist, müssen Sie Ihre APP hosten .To make your app reachable from the internet, you need to host your app.

Für lokale Tests können Sie die APP auf Ihrem lokalen Computer ausführen und einen Tunnel mit einem Webendpunkt erstellen.For local testing you can run the app on your local machine and create a tunnel to it with a web endpoint. ngrok ist ein kostenloses Tool, mit dem Sie genau dies tun können.ngrok is a free tool that lets you do just that. Mit ngrok können Sie eine Webadresse wie https://d0ac14a5.ngrok.io (diese URL ist nur ein Beispiel) erhalten.With ngrok you can get a web address such as https://d0ac14a5.ngrok.io (this URL is just an example). Sie können ngrok für Ihre Umgebung herunterladen und installieren .You can download and install ngrok for your environment. Stellen Sie sicher, dass Sie Sie an einen Speicherort PATHin Ihrem hinzufügen.Make sure you add it to a location in your PATH.

Nachdem Sie es installiert haben, können Sie ein neues Terminalfenster öffnen und den folgenden Befehl ausführen, um einen Tunnel zu erstellen.Once you install it, you can open a new terminal window and run the following command to create a tunnel. Im Beispiel wird Port 3333 verwendet, stellen Sie daher sicher, dass Sie es hier angeben.The sample uses port 3333, so be sure to specify it here.

ngrok http 3333 -host-header=localhost:3333

Ngrok wird Anfragen aus dem Internet abhören und diese an Ihre APP weiterleiten, die auf Port 3333 läuft.Ngrok will listen to requests from the internet and will route them to your app running on port 3333. Sie können überprüfen, ob Sie Ihren Browser öffnen https://d0ac14a5.ngrok.io/hello und die Hello-Seite Ihrer App laden.You can verify by opening your browser and going to https://d0ac14a5.ngrok.io/hello to load your app's hello page. Achten Sie darauf, dass Sie die von ngrok in ihrer Konsolensitzung angezeigte Weiterleitungsadresse anstelle dieser URL verwenden.Please be sure to use the forwarding address displayed by ngrok in your console session instead of this URL.

Hinweis

Wenn Sie einen anderen Port im Schritt " Build" und "ausführen " verwendet haben, stellen Sie sicher, dass Sie die gleiche Portnummer zum Einrichten des ngrok -Tunnels verwenden.If you have used a different port in the build and run step above, make sure you use the same port number to setup the ngrok tunnel.

Tipp

Es empfiehlt sich, ngrok in einem anderen Terminalfenster auszuführen, damit es ausgeführt wird, ohne dass die Knoten-App gestört wird, die Sie später möglicherweise beenden, neu erstellen und erneut ausführen müssen.It is a good idea to run ngrok in a different terminal window to keep it running without interfering with the node app which you might later have to stop, rebuild and rerun. In diesem Fenster werden in der ngrok -Sitzung nützliche Debuginformationen zurückgegeben.The ngrok session will return useful debugging information in this window.

Es gibt eine kostenpflichtige Version von ngrok , die persistente Namen zulässt.There is a paid version of ngrok that allows persistent names. Wenn Sie die kostenlose Version verwenden, ist Ihre APP nur während der aktuellen Sitzung auf dem Entwicklungscomputer verfügbar.If you use the free version your app will only be available during the current session on your development machine. Wenn der Computer heruntergefahren wird oder in den Standbymodus wechselt, steht der Dienst nicht mehr zur Verfügung.If the machine is shut down or goes to sleep the service will no longer be available. Denken Sie daran, wenn Sie die APP für Tests von anderen Benutzern freigeben.Remember this when sharing the app for testing by other users. Wenn Sie den Dienst neu starten müssen, wird eine neue Adresse zurückgegeben, und Sie müssen jeden Ort aktualisieren, an dem diese Adresse verwendet wird.If you have to restart the service it will return a new address and you will have to update every place that uses that address.

Notieren Sie sich die URL Ihrer APP, da Sie dies später benötigen, wenn Sie die app in Microsoft Teams mithilfe von App Studio registrieren.Remember, make a note of the URL of your app because you will need this later when you register the app with Teams using App studio. Der Editor funktioniert zu diesem Zweck einwandfrei.Notepad works fine for this purpose.

Bereitstellen der APP für Microsoft TeamsDeploy your app to Microsoft Teams

An diesem Punkt haben Sie eine APP, die im Internet gehostet wird, aber Sie haben keine Möglichkeit, Microsoft Teams mitzuteilen, wo Sie suchen sollen oder sogar, was Ihre APP heißt.At this point you have an app hosted on the internet, but you have no way yet of telling Teams where to look for it, or even what your app is called. Dafür müssen Sie nun ein App-Paket erstellen.To do this you now have to create an app package. Dies ist kaum mehr als eine Textdatei, die das App-Manifest und einige Symbole enthält, die der Microsoft Teams-Client zum ordnungsgemäßen anzeigen und Branding Ihrer APP verwendet.This is little more than a text file that contains the app manifest and some icons that the Teams client will use to properly display and brand your app. Sie können dieses app-Paket manuell erstellen, oder Sie können APP Studio verwenden, ein Tool, das in Microsoft Teams ausgeführt wird, um den Registrierungsvorgang für die APP zu vereinfachen.You can manually create this app package, or you can use App Studio, a tool that runs in Teams that will simplify the process of registering the app. App Studio ist die empfohlene Methode zum Erstellen und Aktualisieren des App-Pakets.App Studio is the recommended way of creating and updating the app package.

Für beide Methoden ist Folgendes erforderlich:For either method you will need the following:

  • Die URL, über die Ihre APP im Internet gefunden werden kann.The URL where your app can be found on the internet.
  • Symbole, mit denen Microsoft Teams Ihre APP brandingieren kann.Icons that Teams will use to brand your app. Das Beispiel enthält Platzhaltersymbole, die sich in "src\static\images.The sample comes with placeholder icons located in "src\static\images. Bei Bedarf stellt App Studio auch Standardsymbole bereit.App Studio also will provide default icons if needed.

Aktualisieren des App-Pakets mithilfe von App StudioUse App Studio to update the app package

App Studio ist eine Teams-APP, die Sie im Microsoft Teams Store installieren können.App Studio is a Teams app that you can install from the Teams store. Es vereinfacht das Erstellen und Registrieren einer App.It simplifies the creation and registration of an app.

Wenn Sie App Studio in Microsoft Teams installieren möchten, klicken Sie auf das App Store-Symbol unten in der linken Leiste, und suchen Sie nach App Studio.To install App Studio in Teams, click on the app store icon at the bottom of the left hand bar, and search for App Studio.

Finding App Studio in the Store View

Wenn Sie die Kachel für App Studio gefunden haben, klicken Sie darauf, und wählen Sie im Dialogfeld Installieren aus, das eingeblendet wird.Once you find the tile for App Studio, click on it and choose install in the dialog that pops up.

Installing App Studio

Sobald App Studio installiert ist, klicken Sie auf die Registerkarte Manifest-Editor, um mit der Erstellung des App-Pakets für Ihre Teams-APP zu beginnen.Once App Studio is installed click on the Manifest editor tab to begin creating the app package for your Teams app.

App Studio

Das Beispiel enthält ein eigenes vordefiniertes Manifest und wurde entwickelt, um ein App-Paket zu erstellen, wenn das Projekt erstellt wird.The sample comes with its own pre-made manifest, and is designed to build an app package when the project is built. In .net erfolgt dies in Visual Studio und auf Node js erfolgt dies durch Eingabe gulp an der Befehlszeile im Stammverzeichnis des Projekts.On .NET this is done in Visual Studio, and on Node JS this is done by typing gulp at the command line in the root directory of the project.

$ gulp
[13:39:27] Using gulpfile ~\documents\github\msteams-samples-hello-world-nodejs\gulpfile.js
[13:39:27] Starting 'clean'...
[13:39:27] Starting 'generate-manifest'...
[13:39:27] Finished 'generate-manifest' after 11 ms
[13:39:27] Finished 'clean' after 21 ms
[13:39:27] Starting 'default'...
Build completed. Output in manifest folder
[13:39:27] Finished 'default' after 62 μs

Der Name des generierten App-Pakets lautet helloworldapp.zip.The name of the generated app package is helloworldapp.zip. Sie können nach dieser Datei suchen, wenn der Speicherort im verwendeten Tool nicht eindeutig ist.You can search for this file if the location is not clear in the tool you are using.

Im nächsten Teil dieser exemplarischen Vorgehensweise ändern Sie dieses app-Paket, indem Sie die Kachel Importieren einer vorhandenen APP im Manifest-Editor auswählen.In the next part of this walkthrough you are going to modify this app package by selecting the Import an existing app tile in the Manifest Editor.

Importing an existing app

Wenn das App-Paket importiert wurde, sollte App Studio wie folgt aussehen:Once the app package has been imported App Studio should look like this:

Importing the app package

Klicken Sie auf die Kachel für Ihre neu importierte APP, Hello World.Click on the tile for your newly imported app, Hello World.

Newly imported app view

Es gibt eine Liste der Schritte auf der linken Seite des Manifest-Editors und rechts eine Liste von Eigenschaften, die für jeden dieser Schritte ausgefüllt werden müssen.There is a list of steps in the left-hand side of the Manifest editor, and on the right a list of properties that need to be filled in for each of those steps. Da Sie mit einer Beispiel-App begonnen haben, sind viele der Informationen bereits ausgefüllt. Die nächsten Schritte führen Sie durch die Änderung der Teile, die noch aktualisiert werden müssen.Since you started with a sample app, much of the information is already filled out. The next steps will walk you through changing the parts that still need to be updated.

App-DetailsApp details

Klicken Sie unter Detailsauf den Eintrag App-Details .Click on the App details entry under Details. Klicken Sie auf die Schaltfläche generieren , um eine neue APP-ID zu erstellen.Click the Generate button to create a new app id.

Die neue APP-ID sollte etwa wie folgt aussehen: 2322041b-72bf-459d-b107-f4f335bc35bd .Your new app id should look something like: 2322041b-72bf-459d-b107-f4f335bc35bd.

Sehen Sie sich die restlichen App-Details im rechten Bereich an, und machen Sie sich mit einigen Einträgen wie Entwickler Informationen und Brandingvertraut.Look through the rest of the App details in the right hand pane, and familiarize yourself with some of the entries such as Developer information and Branding. Diese Abschnitte sind wichtig, wenn Sie eine neue APP für die Verteilung schreiben.These sections are important if you are writing a new app for distribution.

Funktionen: RegisterkartenCapabilities: Tabs

Registerkarten gehören zu den einfachsten Elementen, die einer Teams-app hinzugefügt werden.Tabs are among the simplest elements to add to a Teams app. Die Beispiel-App unterstützt bereits mehrere Registerkarten, und Sie können Sie wie folgt aktivieren.The sample app already supports several tabs, and you can enable them as follows.

Registerkarte "Team"Team tab

Ihre APP kann nur eine Team Registerkarte haben.Your app can only have one Team tab.

Adding a Teams tab

In diesem Beispiel wird auf der Registerkarte "Team" die Konfigurationsseite angezeigt.In this sample, the Team tab is where your configuration page goes. Klicken Sie am Ende des Eintrags auf das Symbol ... , und wählen Sie im Dropdownmenü Bearbeiten aus.Click on the ... symbol at the end of the entry and choose Edit from the drop-down. Ändern Sie die URL https://yourteamsapp.ngrok.io/configure dahin, wo yourteamsapp.ngrok.io Sie durch die URL ersetzt werden soll, die Sie beim Hosten Ihrer APP oben verwendet haben.Change the URL to https://yourteamsapp.ngrok.io/configure where yourteamsapp.ngrok.io should be replaced by the URL that you used above when hosting your app.

Persönliche RegisterkartenPersonal tabs

Ihre APP kann bis zu 16 Registerkarten haben, einschließlich der Registerkarte Team.Your app can have up to 16 tabs, including the team tab.

Persönliche Registerkarten werden auf der Registerkarte Team unterschiedlich dargestellt. Die Registerkarte "Hello" sollte bereits in der Liste "persönliche Registerkarten" angezeigt werden.Personal tabs are represented differently from the team tab. You should see Hello Tab already listed in the personal tabs list. Im Moment verfügt er über einen Platzhalterwert com.contoso.helloworld.hellotab .At the moment it has a placeholder value com.contoso.helloworld.hellotab. Klicken Sie am Ende des Eintrags auf das Symbol ... , und wählen Sie im Dropdownmenü Bearbeiten aus.Click on the ... symbol at the end of the entry and choose Edit from the drop-down. Das folgende Dialogfeld wird angezeigt.The following dialog will appear.

Adding a personal tab dialog

Es gibt zwei Felder, die Sie mit ihrer App-URL aktualisieren müssen.There are two fields that you need to update with your app URL.

  • Ändern der Inhalts-URL in https://yourteamsapp.ngrok.io/helloChange Content URL to https://yourteamsapp.ngrok.io/hello
  • Website-URL ändern in https://yourteamsapp.ngrok.io/helloChange Website URL to https://yourteamsapp.ngrok.io/hello

Wo yourteamsapp.ngrok.io sollte durch die URL ersetzt werden, die Sie beim Hosten Ihrer APP oben verwendet haben.Where yourteamsapp.ngrok.io should be replaced by the URL that you used above when hosting your app.

BotsBots

Bots sind die gängigste Methode zum Hinzufügen von Funktionen zu Ihrer APP.Bots are the most common way to add functionality to your app. Das Beispiel "Hello World" verfügt bereits über einen bot als Teil des Beispiels, wurde aber noch nicht bei Microsoft registriert.The hello world sample already has a bot as part of the sample, but it has not been registered with Microsoft yet.

Adding a bot

Dem bot, der aus dem Beispiel importiert wurde, ist noch keine APP-ID zugeordnet.The bot that was imported from the sample does not have an App ID associated with it yet. Sie müssen einen neuen bot erstellen, damit App Studio eine neue APP-ID erstellen und bei Microsoft registrieren kann.You will have to create a new bot so that App Studio can create a new App ID and register it with Microsoft. Beachten Sie, dass dies die APP-ID für den Bot ist, die sich von der APP-ID unterscheidet, die wir in einem früheren Schritt für die App erstellt haben.Note that this is the App ID for the bot, which is different from the App ID that we created for the app in a earlier step. Jeder bot in einer APP benötigt eine eigene APP-ID.Each bot in an app requires its own App ID.

Klicken Sie in der Liste bot neben dem importierten bot auf die Schaltfläche Löschen .Click the delete button next to the Imported bot in the bot list.

Jetzt sind keine Bots mehr verfügbar, die angezeigt werden sollen.Now there are no bots left to show. Klicken Sie auf Setup.Click Setup. Dadurch wird das Dialogfeld " bot einrichten " angezeigt.This will display the Set up a bot dialog.

Adding a bot dialog

Fügen Sie einen bot-Namen wie ein Contoso bot , und wählen Sie alle drei Schaltflächen unter Bereich.Add a bot name such as Contoso bot, and select all three buttons under scope.

Wählen Sie Create bot aus, um das Dialogfeld zu schließen.Choose Create bot to exit the dialog. App Studio wird einen Moment Zeit damit verbringen, ihren bot bei Microsoft zu registrieren, und sollte dann Ihren neuen bot in der bot-Liste anzeigen.App Studio will spend a moment registering your bot with Microsoft, and then should display your new bot in the bot list. Jetzt wäre ein guter Zeitpunkt, eine Textdatei im Editor zu öffnen und ihre neue bot-ID zu kopieren und in diese einzufügen.Now would be a good time to open a text file in notepad and copy and paste your new bot id into it. Sie benötigen die ID später.You will need this id later.

Klicken Sie auf Neues Kennwort generieren, und notieren Sie sich das Kennwort in derselben Textdatei, in der Sie Ihre bot-APP-ID notiert haben.Click Generate New Password, and make a note of the password in the same text file you noted your Bot app ID in. Dies ist das einzige Mal, wenn Ihr Kennwort angezeigt wird, deshalb sollten Sie dies jetzt tun.This is the only time your password will be shown, so be sure to do this now.

Aktualisieren Sie die bot-Endpunktadresse auf https://yourteamsapp.ngrok.io/api/messages , wobei yourteamsapp.ngrok.io die URL ersetzt werden soll, die Sie beim Hosten Ihrer APP oben verwendet haben.Update the Bot endpoint address to https://yourteamsapp.ngrok.io/api/messages, where yourteamsapp.ngrok.io should be replaced by the URL that you used above when hosting your app.

Jetzt wäre ein guter Zeitpunkt, um Ihre Textdatei zu speichern, wenn Sie dies noch nicht getan haben.Now would be a good time to save your text file if you have not done so already. Sie werden diese Informationen später in dieser exemplarischen Vorgehensweise zu ihrer gehosteten app hinzufügen, um eine sichere Kommunikation mit Ihrem bot zu ermöglichen.You will add this information to your hosted app later in this walkthrough, which will allow secure communication with your bot.

Messaging-ErweiterungenMessaging extensions

Mithilfe von Messaging Erweiterungen können Benutzer nach Informationen von Ihrem Dienst Fragen und diese Informationen in Form von Karten direkt in die Kanal Unterhaltung Posten.Messaging extensions let users ask for information from your service and post that information, in the form of cards, right into the channel conversation. Messaging Erweiterungen werden am unteren Rand des Felds verfassen angezeigt.Messaging extensions appear along the bottom of the compose box.

Klicken Sie unter Funktionen in der linken Spalte von App Studio auf Messaging Erweiterungen , um mit der Konfiguration der Messaging Erweiterung zu beginnen.Click on Messaging extensions under Capabilities in the left hand column of App Studio to begin configuring the messaging extension.

Adding a messaging extension

Die Beispiel-Messaging-Erweiterung wird im rechten Bereich unter Messaging Extensionsaufgeführt.The sample messaging extension is listed in the right hand pane under Messaging Extensions. Klicken Sie erneut auf Löschen , um diesen Eintrag zu entfernen, und klicken Sie dann auf die Schaltfläche Einrichten , indem Sie die gleichen Schritte ausführen, die Sie für Bots befolgt haben.Click Delete again to remove this entry, and then click the Set up button following the same steps as you followed for bots. Dadurch wird das Dialogfeld Messaging Erweiterung angezeigt.This will display the Messaging Extension dialog.

Wählen Sie die Registerkarte vorhandenen bot verwenden aus, und Wählen Sie dann eines meiner vorhandenen Bots aus.Select the Use existing bot tab, then Select from one of my existing bots. Wählen Sie im Dropdownmenü den bot aus, den Sie im obigen Abschnitt erstellt haben.In the drop-down menu, select the bot you created in the section above. Fügen Sie einen bot-Namen hinzu, und klicken Sie auf Speichern , um das Dialogfeld zu schließen.Add a Bot name and click Save to close the dialog.

Klicken Sie im Abschnitt Command auf Hinzufügen.Under the Command section, click Add. Wir fügen einen suchbasierten Befehl hinzu, wählen Sie also die Option Benutzer können Ihren Dienst Abfragen ... aus.We're adding a search-based command, so choose the Allow users to query your service... option.

Geben Sie im Dialogfeld neuer Befehl die folgenden Werte ein.In the New command dialog enter the following values.

Unter neuer Befehl:Under New command:

  • Befehls-ID = getRandomTextCommand ID = getRandomText
  • Title = Abrufen von zufälligen Texten zum SpaßTitle = Get some random text for fun
  • Description = ruft einige zufällige Text und BilderDescription = Gets some random text and images

Unter Parameter:Under Parameter:

  • Name = cardTitleName = cardTitle
  • Title = KartentitelTitle = Card title
  • Description = zu verwendender KartentitelDescription = Card title to use

Nachdem Sie die Informationen eingegeben haben, klicken Sie auf Speichern , um das Dialogfeld zu schließen.Once you're entered the information, click Save to close the dialog.

Registrieren Ihrer APP in Microsoft TeamsRegister your app in Teams

Sie haben nun die Eingabe der Details Ihrer APP abgeschlossen, jedoch bleiben zwei Schritte.You have now completed entering the details of your app, but two steps remain. Zunächst müssen Sie den Abschnitt Test and Distribute von App Studio verwenden, um Ihre APP in Microsoft Teams zu installieren, und zweitens müssen Sie die gehostete Anwendung mit der APP-ID und dem Kennwort für Ihren bot aktualisieren.First you must use the Test and Distribute section of App Studio to install your app in Teams, and second you must update your hosted application with the App ID and password for your bot. Beachten Sie, dass im Beispiel die gleiche APP-ID und das gleiche Kennwort für die bot-und die Messaging-Erweiterung verwendet werden.Remember that the sample expects to use the same App ID and password for both the bot and the messaging extension.

Klicken Sie in der linken Spalte von App Studio auf das Element Testen und verteilen unter Fertig stellen .Click on the Test and distribute item under Finish in the left hand column of App Studio.

Testing your app

Um Ihre APP in Teams hochzuladen, klicken Sie unter Test and Distributeauf die Schaltfläche Installieren .In order to upload your app to Teams, click the Install button under Test and Distribute.

Adding a messaging extension dialog

Klicken Sie im Abschnitt zu einem Team hinzufügen auf das Suchfeld , und wählen Sie ein Team aus, dem Sie die Beispiel-app hinzufügen möchten.Click on the Search box in the Add to a team section and select a team to add the sample app to. Normalerweise möchten Sie ein spezielles Team für Tests einrichten.Usually you will want to set up a special team for testing.

Klicken Sie unten im Dialogfeld auf die Schaltfläche Installieren .Click the Install button at the bottom of the dialog.

Dadurch wird der APP Studio-Teil dieser exemplarischen Vorgehensweise abgeschlossen.This finishes the App Studio portion of this walkthrough. Ihre APP sollte jetzt in Microsoft Teams ausgeführt werden, die bot-und die Messaging-Erweiterung funktionieren jedoch erst, wenn Sie die Umgebung für gehostete Anwendungen so aktualisieren, dass Sie wissen, was die APP-IDs und Kennwörter sind.You should now see your app running in Teams, however the bot and the messaging extension will not work until you update the hosted applications environment to know what the App IDs and passwords are.

The finished app

Aktualisieren der gehosteten AppUpdate your hosted app

Für die Beispiel-App müssen die folgenden Umgebungsvariablen auf die Werte festgelegt werden, auf die Sie zuvor hingewiesen haben.The sample app requires the following environment variables to be set to the values you made a note of earlier.

MICROSOFT_APP_ID=<YOUR BOT'S APP ID>
MICROSOFT_APP_PASSWORD=<YOUR BOT'S PASSWORD>
WEBSITE_NODE_DEFAULT_VERSION=8.9.4

Die Vorgehensweise unterscheidet sich je nachdem, wie Sie Ihre APP gehostet haben.How you do that differs depending on how you hosted your app. Wichtig bei der Verwendung von Umgebungsvariablen ist, dass diese Werte Teil Ihrer Umgebung sind – Sie können über den Code Ihrer APP auf Sie zugreifen, aber Sie werden nicht für Drittanbieter verfügbar gemacht, die die Dateien, aus denen Ihre Website besteht, möglicherweise untersuchen.The important thing about using environment variables is that these values are part of your environment - they can be accessed by the code for your app, but they are not exposed to third parties who might examine the files that make up your site.

Wenn Sie die APP mit ngrok durchführen, müssen Sie einige lokale Umgebungsvariablen einrichten.If you are running the app using ngrok you'll need to set up some local environment variables. Es gibt viele Möglichkeiten, dies zu tun, aber am einfachsten ist es, wenn Sie Visual Studio Code verwenden, eine Startkonfigurationhinzuzufügen:There are many ways to do this, but the easiest, if you are using Visual Studio Code, is to add a launch configuration:

{
    "type": "node",
    "request": "launch",
    "name": "Launch - Teams Debug",
    "program": "${workspaceRoot}/src/app.js",
    "cwd": "${workspaceFolder}/src",
    "env": {
        "BASE_URI": "https://yourNgrokURL.ngrok.io",
        "MICROSOFT_APP_ID": "00000000-0000-0000-0000-000000000000",
        "MICROSOFT_APP_PASSWORD": "yourBotAppPassword",
        "NODE_DEBUG": "botbuilder",
        "SUPPRESS_NO_CONFIG_WARNING": "y",
        "NODE_CONFIG_DIR": "../config"
    }
}

Dabei gilt:Where:

MICROSOFT_APP_ID und MICROSOFT_APP_PASSWORD ist jeweils die ID und das Kennwort für Ihren bot.MICROSOFT_APP_ID and MICROSOFT_APP_PASSWORD is the ID and password, respectively, for your bot. In NODE_DEBUG erfahren Sie, was in Ihrem bot in der Visual Studio-Code-Debug-Konsole geschieht.NODE_DEBUG will show you what's happening in your bot in the Visual Studio Code debug console. NODE_CONFIG_DIR verweist auf das Verzeichnis im Stammverzeichnis des Repositorys (Standardmäßig wird bei der lokalen Ausführung der APP im Ordner src nach dieser gesucht).NODE_CONFIG_DIR points to the directory at the root of the repository (by default, when the app is run locally, it looks for it in the src folder).

Hinweis

Wenn Sie NPM nicht von früher im Lernprogramm angehalten haben, müssen Sie in der npm stop Reihenfolge ausgeführt werden, dass Visual Studio Code Ihre Start Konfigurationsvariablen ordnungsgemäß Pickup.If you have not stopped npm from earlier in the tutorial, you'll need to run npm stop in order for Visual Studio Code to pickup your launch configuration variables correctly.

Konfigurieren der Registerkarte "App"Configure the app tab

Nachdem Sie die app in einem Team installiert haben, müssen Sie Sie so konfigurieren, dass Inhalte angezeigt werden.Once you install the app into a team, you will need to configure it to show content. Wechseln Sie zu einem Kanal im Team, und klicken Sie auf die Schaltfläche "+" , um eine neue Registerkarte hinzuzufügen. Sie können dann in Hello World der Liste Registerkarte hinzufügen auswählen.Go to a channel in the team and click on the '+' button to add a new tab. You can then choose Hello World from the Add a tab list. Anschließend wird ein Konfigurationsdialogfeld angezeigt.You will then be presented with a configuration dialog. In diesem Dialogfeld können Sie auswählen, welche Registerkarte in diesem Kanal angezeigt werden soll.This dialog will let you choose which tab to display in this channel. Sobald Sie die Registerkarte ausgewählt haben und Save auf klicken, können Hello World Sie die Registerkarte anzeigen, die mit der ausgewählten Registerkarte geladen wurde.Once you select the tab and click on Save you can see the Hello World tab loaded with the tab you chose.

Testen Sie Ihren bot in Microsoft TeamsTest your bot in Teams

Sie können nun mit dem bot in Microsoft Teams interagieren.You can now interact with the bot in Teams. Wählen Sie einen Kanal im Team aus, in dem Sie Ihre APP registriert @your-bot-namehaben, und geben Sie gefolgt von Ihrer Nachricht ein.Choose a channel in the team where you registered your app, and type @your-bot-name, followed by your message. Dies wird als ** @Erwähnung**bezeichnet.This is called an @mention. Jede Nachricht, die Sie an den bot senden, wird als Antwort an Sie zurückgesendet.Whatever message you send to the bot will be sent back to you as a reply.

Testen der Messaging ErweiterungTest your messaging extension

Um Ihre Messaging Erweiterung zu testen, können Sie auf die drei Punkte unter dem Eingabefeld in ihrer Unterhaltungsansicht klicken.To test your messaging extension, you can click on the three dots below the input box in your conversation view. Ein Menü wird mit der "Hello World"- app in diesem Popup angezeigt.A menu will pop up with the 'Hello World' app in it. Wenn Sie darauf klicken, wird eine Reihe von zufälligen Texten angezeigt.When you click it, you will see a number of random texts. Sie können eine von Ihnen auswählen, und Sie wird in Ihre Unterhaltung eingefügt.You can choose any one of them and it will be inserted it into your conversation.

<img width="430px" title="Menü "Messaging Erweiterung"" src="~/assets/images/samples-hello-world-messaging-extensions-menu.png" />

Wählen Sie einen der zufälligen Texte aus, und Sie sehen eine Karte, die formatiert und mit ihrer eigenen Nachricht am unteren Rand gesendet werden kann.Choose one of the random texts, and you will see a card formatted and ready to send with your own message at the bottom.