Erstellen einer Kanal- oder Gruppenregisterkarte

Erstellen einer benutzerdefinierten Kanal- oder Gruppenregisterkarte

Sie können eine Kanal- oder Gruppenregisterkarte mit Node.js und yeoman Generator, ASP.NETCore oder ASP.NETCore MVC erstellen.

Erstellen eines benutzerdefinierten Kanals und einer gruppenregisterkarte mit Node.js und dem Yeoman-Generator

Hinweis

Dieser Artikel folgt den Schritten, die im Build Ihres ersten Microsoft Teams App-Wiki im Microsoft OfficeDev GitHub-Repository beschrieben sind.

Sie können eine benutzerdefinierte Kanal- oder Gruppenregisterkarte mithilfe des Teams Yeoman-Generatorserstellen.

Voraussetzungen für Apps

Sie müssen die folgenden Voraussetzungen verstehen:

  • Sie müssen einen Office 365 Mandanten und ein Team mit aktivierter Option "Hochladen benutzerdefinierter Apps zulassen" konfiguriert haben. Weitere Informationen finden Sie unter Vorbereiten Ihres Office 365 Mandanten.

    Hinweis

    Wenn Sie derzeit kein Office 365 Konto haben, können Sie sich über das Office 365-Entwicklerprogramm für ein kostenloses Abonnement registrieren. Das Abonnement bleibt aktiv, solange Sie es für die fortlaufende Entwicklung verwenden. Willkommen beim Office 365-Entwicklerprogramm.

Darüber hinaus muss für dieses Projekt Folgendes in Ihrer Entwicklungsumgebung installiert sein:

  • Ein beliebiger Text-Editor oder eine beliebige IDE. Sie können Visual Studio Code kostenlos installieren und verwenden.

  • Node.js/npm. Verwenden Sie die neueste LTS-Version. Die Node Paket-Manager (npm) wird mit der Installation von Node.js in Ihrem System installiert.

  • Nachdem Sie Node.js erfolgreich installiert haben, installieren Sie die Yeoman- und gulp-cli-Pakete, indem Sie in der Eingabeaufforderung Folgendes eingeben:

    npm install yo gulp-cli --global
    
  • Installieren Sie den Microsoft Teams Apps-Generator, indem Sie in der Eingabeaufforderung Folgendes eingeben:

    npm install generator-teams --global
    

Generieren Ihres Projekts

So generieren Sie Ihr Projekt

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

  2. Um den Generator zu starten, wechseln Sie zu Ihrem neuen Verzeichnis, und geben Sie den folgenden Befehl ein:

    yo teams
    
  3. Geben Sie als Nächstes eine Reihe von Werten an, die in der Manifest.json-Datei Ihrer Anwendung verwendet werden:

    Screenshot zum Öffnen des Generators

    Wie lautet der Name Ihrer Lösung?

    Dies ist ihr Projektname. Sie können den vorgeschlagenen Namen akzeptieren, indem Sie die EINGABETASTE drücken.

    Wohin möchten Sie die Daten verschieben?

    Sie befinden sich derzeit in Ihrem Projektverzeichnis. Drücken Sie die EINGABETASTE.

    Titel Ihres Microsoft Teams App-Projekts?

    Dies ist der Name Ihres App-Pakets und wird im App-Manifest und in der Beschreibung verwendet. Geben Sie einen Titel ein, oder drücken Sie die EINGABETASTE, um den Standardnamen zu übernehmen.

    Ihr (Firmen-)Name? (max. 32 Zeichen)

    Ihr Firmenname wird im App-Manifest verwendet. Geben Sie einen Firmennamen ein, oder drücken Sie die EINGABETASTE, um den Standardnamen zu übernehmen.

    Welche Manifestversion möchten Sie verwenden?

    Wählen Sie das Standardschema aus.

    Schnelles Gerüst? (J/n)

    Der Standardwert ist "ja". Geben Sie n ein, um Ihre Microsoft Partner-ID einzugeben.

    Geben Sie Ihre Microsoft Partner-ID ein, wenn Sie eine haben? (Leer lassen, um zu überspringen)

    Dieses Feld ist nicht erforderlich und sollte nur verwendet werden, wenn Sie bereits Teil des Microsoft Partner Networksind.

    Was möchten Sie Ihrem Projekt hinzufügen?

    Select ( ) A * Tab.

    Die URL, unter der Sie diese Lösung hosten werden?

    Standardmäßig schlägt der Generator eine Azure-Website-URL vor. Sie testen Ihre App nur lokal, daher ist keine gültige URL erforderlich.

    Möchten Sie eine Ladeanzeige anzeigen, wenn Ihre App/Registerkarte geladen wird?

    Schließen Sie beim Laden ihrer App oder Registerkarte keine Ladeanzeige ein. The default is no, enter n.

    Möchten Sie, dass persönliche Apps ohne eine Registerkarten-Kopfleiste dargestellt werden?

    Verwenden Sie keine persönlichen Apps, die ohne Registerkartenkopfleiste gerendert werden sollen. Der Standardwert ist "Nein", geben Sie "n" ein.

    Möchten Sie testframework und erste Tests einbeziehen? (y/N)

    Schließen Sie kein Testframework für dieses Projekt ein. Der Standardwert ist "ja". geben Sie n ein.

    Möchten Sie Azure Applications Insights für Telemetrie verwenden? (y/N)

    Wählen Sie aus, dass Azure Application Insightsnicht eingeschlossen werden soll. Der Standardwert ist "nein". geben Sie n ein.

    Standardregisterkartenname (max. 16 Zeichen)?

    Nennen Sie Ihre Registerkarte. Dieser Registerkartenname wird im gesamten Projekt als Datei- oder URL-Pfadkomponente verwendet.

    Welche Art von Registerkarte möchten Sie erstellen?

    Verwenden Sie die Pfeiltasten, um die konfigurierbare Registerkarte auszuwählen.

    Welche Bereiche möchten Sie für Ihre Registerkarte verwenden?

    Sie können ein Team oder einen Gruppenchat auswählen.

    Benötigen Sie Azure AD Single-Sign-On-Unterstützung für die Registerkarte?

    Wählen Sie, Azure AD Single Sign-On-Unterstützung für die Registerkarte nicht einzuschließen. Der Standardwert ist "Ja", geben Sie "n" ein.

    Soll diese Registerkarte in SharePoint Online verfügbar sein? (J/n)

    Geben Sie n ein.

    Wichtig

    The path component yourDefaultTabNameTab, is the value that you entered in the generator for Default Tab Name plus the word Tab.

    Beispiel: DefaultTabName: MyTab > /MyTabTab/

  4. Wechseln Sie in Visual Studio Code oder einem beliebigen Code-Editor zu Ihrem Projektverzeichnis, und öffnen Sie die folgende Datei:

    ./src/app/scripts/<yourDefaultTabNameTab>/<yourDefaultTabNameTab>.tsx
    
  5. Suchen Sie die Methode, und fügen Sie oben im render() Containercode das folgende Tag und den folgenden <div> Inhalt <PanelBody> hinzu:

        <PanelBody>
            <div style={styles.section}>
                Hello World! Yo Teams rocks!
            </div>
        </PanelBody>
    
  6. Stellen Sie sicher, dass Sie die aktualisierte Datei speichern.

Erstellen und Ausführen der Anwendung

Öffnen Sie an einer Eingabeaufforderung Das Projektverzeichnis, um die nächsten Aufgaben auszuführen.

Erstellen des App-Pakets

Sie müssen über ein App-Paket verfügen, um Ihre Registerkarte in Teams zu testen. Es handelt sich um einen ZIP-Ordner, der die folgenden erforderlichen Dateien enthält:

  • Ein Vollfarbsymbol mit einer Auflösung von 192 x 192 Pixeln.
  • Ein transparentes Gliederungssymbol mit einer Auflösung von 32 x 32 Pixeln.
  • Eine Manifest.json-Datei, die die Attribute Ihrer App angibt.

Das Paket wird über eine gulp-Aufgabe erstellt, die die Datei manifest.json überprüft und den ZIP-Ordner im Verzeichnis ./package generiert. Geben Sie an der Eingabeaufforderung den folgenden Befehl ein:

gulp manifest

Erstellen Der Anwendung

Der Buildbefehl transpiliert Ihre Lösung in den Ordner ./dist. Geben Sie in der Eingabeaufforderung den folgenden Befehl ein:

gulp build

Ausführen der Anwendung in localhost

  1. Starten Sie einen lokalen Webserver, indem Sie in der Eingabeaufforderung Folgendes eingeben:

    gulp serve
    
  2. Geben Sie in Ihren Browser ein, ersetzen Sie http://localhost:3007/<yourDefaultAppNameTab>/ IhreDefaultAppNameTab durch ihren Registerkartennamen, und zeigen Sie die Startseite Ihrer Anwendung an, wie in der folgenden Abbildung dargestellt:

    Screenshot der Startseite

  3. Um die Registerkartenkonfigurationsseite anzuzeigen, wechseln Sie zu https://localhost:3007/<yourDefaultAppNameTab>/config.html . Es wird Folgendes gezeigt:

    Screenshot der Konfigurationsseite

Einrichten eines sicheren Tunnels zu Ihrer Registerkarte

Microsoft Teams ist ein cloudbasiertes Produkt und erfordert, dass Ihre Registerkarteninhalte über HTTPS-Endpunkte aus der Cloud verfügbar sind. Teams lässt kein lokales Hosting zu. Sie müssen Ihre Registerkarte entweder auf einer öffentlichen URL veröffentlichen oder einen Proxy verwenden, der Ihren lokalen Port für eine internetbasierte URL verfügbar macht.

Verwenden Sie zum Testen der Registerkartenerweiterung ngrok,das in diese Anwendung integriert ist. Ngrok ist ein Reverseproxysoftwaretool, das einen Tunnel zu den öffentlich verfügbaren HTTPS-Endpunkten Ihres lokal ausgeführten Webservers erstellt. Die Webendpunkte Ihres Servers sind während der aktuellen Sitzung auf Ihrem Computer verfügbar. Wenn der Computer heruntergefahren wird oder in den Ruhezustand wechselt, ist der Dienst nicht mehr verfügbar.

Beenden Sie an der Eingabeaufforderung "localhost", und geben Sie Folgendes ein:

gulp ngrok-serve

Wichtig

Nachdem Ihre Registerkarte in Microsoft Teams hochgeladen und erfolgreich gespeichert wurde, können Sie sie im Registerkartenkatalog anzeigen, sie der Registerkartenleiste hinzufügen und damit interagieren, bis Ihre ngrok-Tunnelsitzung endet. Wenn Sie Ihre ngrok-Sitzung neu starten, müssen Sie Ihre App mit der neuen URL aktualisieren.

Hochladen Der Anwendung Teams

So laden Sie Ihre Anwendung in Teams hoch

  1. Wechseln Sie zu Microsoft Teams. Wenn Sie die webbasierte Version verwenden, können Sie Ihren Front-End-Code mithilfe der EntwicklertoolsIhres Browsers überprüfen.

  2. Wählen Sie in Ihren Teams im linken Bereich die Auslassungspunkte ●●● neben dem Team aus, das Sie zum Testen Ihrer Registerkarte verwenden, und wählen Sie "Team verwalten" aus.

  3. Wählen Sie im Hauptbereich in der Registerkartenleiste Apps aus, und wählen Sie Hochladen eine benutzerdefinierte App in der unteren rechten Ecke der Seite aus.

  4. Wechseln Sie zum Projektverzeichnis, navigieren Sie zum Ordner "./package", wählen Sie den ZIP-Ordner des App-Pakets aus, und wählen Sie "Öffnen" aus.

    Kanalregisterkarte hinzugefügt

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

  6. Kehren Sie zu Ihrem Team zurück, wählen Sie den Kanal aus, in dem Sie die Registerkarte anzeigen möchten, wählen Sie ➕ aus der Registerkartenleiste und dann Ihre Registerkarte aus dem Katalog aus.

  7. Befolgen Sie die Anweisungen zum Hinzufügen einer Registerkarte. Es gibt ein benutzerdefiniertes Konfigurationsdialogfeld für Die Kanal- oder Gruppenregisterkarte.

  8. Wählen Sie Speichern aus, und Ihre Registerkarte wird der Registerkartenleiste des Kanals hinzugefügt.

    Registerkarte "Kanal" hochgeladen

Nächster Schritt

Siehe auch