Erstellen und Ausführen ihrer ersten Microsoft Teams-AppBuild and run your first Microsoft Teams app

Sie können direkt in die Microsoft Teams-Entwicklung wechseln, indem Sie eine persönliche RegisterkarteErstellen, die "Hello, World!" anzeigt.You can jump right into Microsoft Teams development by building a personal tab that displays "Hello, World!"

1. Erstellen des App-Projekts1. Create your app project

Verwenden Sie das Microsoft Teams-Toolkit in Visual Studio Code, um Ihr erstes App-Projekt einzurichten.Use the Microsoft Teams Toolkit in Visual Studio Code to set up your first app project.

  1. Wählen Sie in Visual Studio Code Microsoft Teams in der linken Aktivitäts Leiste aus, und wählen Sie neue Teams-app erstellenaus. Screenshot, der zeigt, wie Sie eine neue APP mit dem Visual Studio Code Teams-Toolkit erstellen.
  2. Geben Sie einen Namen für Ihre Teams-App ein.Enter a name for your Teams app. (Dies ist der Standardname für Ihre APP und auch der Name des App-Projektverzeichnisses auf Ihrem lokalen Computer.)(This is the default name for your app and also the name of the app project directory on your local machine.)
  3. Wählen Sie auf dem Bildschirm Funktionen hinzufügen die Option Tab und dann dann weiteraus.On the Add capabilities screen, select Tab then Next. Screenshot, der zeigt, wie Sie eine neue APP mit dem Visual Studio Code Teams-Toolkit erstellen.
  4. Aktivieren Sie die Option persönliche Registerkarte , und klicken Sie unten auf dem Bildschirm auf Fertig stellen , um Ihr Projekt zu konfigurieren.Check the Personal tab option and select Finish at the bottom of the screen to configure your project.

2. Grundlegendes zu wichtigen App-Projektkomponenten2. Understand important app project components

Nachdem das Toolkit Ihr Projekt konfiguriert hat, müssen Sie die Komponenten zum Erstellen einer einfachen persönlichen Registerkarte für Teams.Once the toolkit configures your project, you have the components to build a basic personal tab for Teams. Die Projektverzeichnisse und-Dateien werden im Bereich "Explorer" von Visual Studio Code angezeigt.The project directories and files display in the Explorer area of Visual Studio Code.

Screenshot, der zeigt, wie Sie eine neue APP mit dem Visual Studio Code Teams-Toolkit erstellen.

Lassen Sie uns einen Moment Zeit nehmen, um einige der wichtigsten Dateien zu verstehen, mit denen Microsoft Teams-App-Entwickler arbeiten.Let's take a moment to understand some of the key files Teams app developers work with.

App-Manifest ( manifest.json )App manifest (manifest.json)

Im Verzeichnis befindet .publish sich das App-Manifest als Ausgangspunkt für ein beliebiges App-Projekt.Located in the .publish directory, the app manifest is the starting point for any app project. Das Manifest definiert die grundlegenden Attribute Ihrer APP und verweist auf erforderliche Ressourcen.The manifest defines your app's fundamental attributes and points to required resources. Wenn Sie eine App installieren, analysiert Microsoft Teams das Manifest, um zu verstehen, wie Ihre APP auf dem Client gerendert wird.When you install an app, Teams parses the manifest to understand how to render your app in the client.

App-GerüsteApp scaffolding

Das Toolkit erstellt automatisch ein Gerüst für Sie im src Verzeichnis basierend auf den Funktionen, die Sie während der Installation hinzugefügt haben.The toolkit automatically creates scaffolding for you in the src directory based on the capabilities you added during setup.

Wenn Sie beispielsweise während des Setups eine RegisterkarteErstellen, App.js ist die Datei im src/components Verzeichnis wichtig, da Sie die Initialisierung und das Routing Ihrer APP übernimmt.If you create a tab during setup, for example, the App.js file in the src/components directory is important because it handles the initialization and routing of your app. Das Microsoft Teams SDK wird aufgerufen, um die Kommunikation zwischen Ihrer APP und ihren Teams herzustellen.It calls the Microsoft Teams SDK to establish communication between your app and Teams.

App-Paket ( Development.zip )App package (Development.zip)

Im Verzeichnis befindet .publish , benötigen Sie das App-Paket, um Ihre APP in Microsoft Teams querladen.Located in the .publish directory, you need the app package to sideload your app in Teams. Das Paket wird auch verwendet, wenn im App-Katalog oder AppSource Ihrer Organisation veröffentlicht wird. AppSourceThe package is also used when publishing to your organization's app catalog or AppSource.

Hier finden Sie einige Details zu den App-Paketdateien:Here are some details about the app package files:

NameName TypType GrößeSize Speicherort des ManifestsManifest location Toolkit-DateinameToolkit filename
App-ManifestApp manifest .json .publish/manifest.json
Farb LogoColor logo .png 192 × 192 Pixel192×192 pixels icon.color .publish/color.png
Gliederungs LogoOutline logo .png 32 × 32 Pixel32×32 pixels icon.outline .publish/outline.png

3. führen Sie Ihre APP aus.3. Run your app

Im Interesse der Zeit erstellen und führen Sie Ihre APP lokal aus.In the interest of time, you'll build and run your app locally.

(Diese Informationen sind auch im Toolkit verfügbar README .)(This information is also available in the toolkit README.)

  1. Wechseln Sie in einem Terminal zum Stammverzeichnis des App-Projekts, und führen Sie es aus npm install .In a terminal, go to the root directory of your app project and run npm install.
  2. Ausführen npm start .Run npm start. Nach Abschluss des Vorgangs wird ein erfolgreiches kompiliert!Once complete, there's a Compiled successfully! Nachricht im Terminal.message in the terminal.
  3. Öffnen Sie einen Browser, und wechseln Sie zu https://localhost:3000 , um eine leere Webseite mit dem Namen Microsoft Teams-Registerkarteanzuzeigen. (Keine Sorge, dass auf der Seite kein Inhalt angezeigt wird.)Open a browser and go to https://localhost:3000 to view a blank webpage called Microsoft Teams Tab. (Don't worry that you can't see any content on the page.)
    Screenshot, der zeigt, wie Sie eine neue APP mit dem Visual Studio Code Teams-Toolkit erstellen.

4. Einrichten eines sicheren Tunnels für Ihre APP4. Set up a secure tunnel to your app

Ihre APP ist auf Ihrem lokalen Webserver aktiv.Your app is up and running on your local web server. Wenn Sie Ihre APP in Microsoft Teams ausführen möchten, müssen Sie den localhost Zugriff über HTTPS vornehmen.To run your app in Teams, you must make your localhost accessible through HTTPS.

Installieren Sie ngrok , falls noch nicht geschehen.Install ngrok if you haven't already. Wenn Sie dieses Tool ausführen, erstellen Sie zwei global verfügbare URLs, die auf Ihren lokalen Webserver ( http://localhost:3000 ) deuten.When you run this tool, you create two globally available URLs that point to your local web server (http://localhost:3000). Sie benötigen die Weiterleitungs-URL, die mit beginnt HTTPS .You need the forwarding URL that begins with HTTPS.

  1. Öffnen Sie ein neues Terminal, und führen Sie es aus ngrok http 3000 .Open a new terminal and run ngrok http 3000.
  2. Kopieren Sie die von Ihnen angegebene HTTPS-URL (siehe das folgende Beispiel).Copy the HTTPS URL you're provided (see the following example). Screenshot, der zeigt, wie Sie eine neue APP mit dem Visual Studio Code Teams-Toolkit erstellen.
  3. Öffnen Sie in Ihrem .publish Verzeichnis Development.env .In your .publish directory, open Development.env.
  4. Ersetzen Sie den baseUrl0 Wert durch die kopierte URL.Replace the baseUrl0 value with the copied URL. (Ändern Sie beispielsweise baseUrl0=http://localhost:3000 in baseUrl0=https://85528b2b3ba5.ngrok.io .)(For example, change baseUrl0=http://localhost:3000 to baseUrl0=https://85528b2b3ba5.ngrok.io.)

Das App-Manifest zeigt jetzt auf die Stelle, an der Sie die APP hosten.Your app manifest now points to where you're hosting the app.

5. querladen ihrer app in Microsoft Teams5. Sideload your app in Teams

Wenn Ihre APP über HTTPS läuft und darauf zugegriffen werden kann, sind Sie bereit, Sie in Microsoft Teams hochzuladen.With your app running and accessible via HTTPS, you're ready to upload it to Teams.

Tipp

Überprüfen Sie vor dem Sideloading Ihrer APP auf Probleme, die die Validierungsfunktion des Toolkitsverwenden.Before sideloading your app, check for issues using the toolkit's validation feature. Fehler müssen behoben sein, damit die APP erfolgreich querladen.Errors must be fixed to successfully sideload the app.

  1. Melden Sie sich mit Ihrem Konto beim Microsoft Teams-Client an, das App-Sideloading zulässt.Log in to the Teams client with your account that allows app sideloading. (Wenn Sie nicht sicher sind, dass dies der Fall ist, erfahren Sie mehr über das Einrichten eines Teams-entwicklungskontos.)(If you aren't sure you have that, learn about getting a Teams development account.)
  2. Wählen Sie appsaus, und wählen Sie dann benutzerdefinierte App hochladenaus.Select Apps, then choose Upload a custom app.
  3. Wechseln Sie zu Ihrem APP .publish -Projektordner, und wählen Sie aus Development.zip .Go to your app project .publish folder and select Development.zip. Eine modale Installation wird angezeigt.An installation modal displays. Screenshot, der zeigt, wie Sie eine neue APP mit dem Visual Studio Code Teams-Toolkit erstellen.
  4. Wählen Sie Hinzufügen aus, um Ihre APP zu installieren.Select Add to install your app. Screenshot, der zeigt, wie Sie eine neue APP mit dem Visual Studio Code Teams-Toolkit erstellen.

🎉 Herzlichen Glückwunsch!🎉 Congratulations! Ihre APP wird in Microsoft Teams gestartet.Your app is running in Teams.

Nächster SchrittNext step

Erweitern Sie auf der persönlichen Registerkarte, die Sie gerade erstellt haben, oder erstellen Sie eine andere Art von Teams-app.Expand on the personal tab you just created or build another type of Teams app.