Erstellen Ihrer ersten App mit Blazor
Mit Blazor können Sie interaktive Webbenutzeroberfläche mithilfe von C# anstelle von JavaScript erstellen.
Sie können eine Registerkarten-App und eine Bot-App mit Blazor und der neuesten Version von Visual Studio erstellen.
Hinweis
Das Teams-Toolkit unterstützt die Nachrichtenerweiterungsfunktion nicht.
Voraussetzungen
Hier finden Sie eine Liste der Tools, die Sie zum Erstellen und Bereitstellen Ihrer App benötigen.
| Installieren | Zum Benutzen... | |
|---|---|---|
| Visual Studio 2022 | Sie können die Unternehmensversion in Visual Studio 2022 und die Workloads ASP.NET und Webentwicklung installieren. Verwenden Sie die neueste Version. | |
| Microsoft Teams | Microsoft Teams für die Zusammenarbeit mit allen, mit denen Sie arbeiten, über Apps für Chats, Besprechungen und Anrufe an einem Ort. | |
| Microsoft Edge (empfohlen) oder Google Chrome | Ein Browser mit Entwicklertools. | |
| Entwicklungstunnel | Teams-App-Features (Konversationsbots, Nachrichtenerweiterungen und eingehende Webhooks) erfordern eingehende Verbindungen. Ein Tunnel verbindet Ihr Entwicklungssystem mit Teams. Dev Tunnel ist ein leistungsstarkes Tool, um Ihren Localhost sicher für das Internet zu öffnen und zu steuern, wer Zugriff hat. Dev Tunnel ist in Visual Studio 2022 Version 17.7.0 oder höher verfügbar. Oder Sie können ngrok auch als Tunnel verwenden, um Ihr Entwicklungssystem mit Teams zu verbinden. Dies ist nicht für Apps erforderlich, die nur Registerkarten enthalten. Dieses Paket wird im Projektverzeichnis installiert (mit npm devDependencies). |
Nachdem Sie die erforderlichen Tools installiert haben, richten Sie die Entwicklungsumgebung ein.
Installieren des Microsoft Teams-Toolkits
Das Teams-Toolkit vereinfacht den Entwicklungsprozess mit Tools zum Bereitstellen und Bereitstellen von Cloudressourcen für Ihre App, Veröffentlichen im Microsoft Teams Store und mehr.
Sie können das Toolkit mit Visual Studio oder der CLI (Befehlszeilenschnittstelle) mit dem Namen teamsfxverwenden.
Laden Sie die neueste Version von Visual Studio herunter.
Öffnen Sie
vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exein Ihrem Downloadordner.Wählen Sie auf der Seite Visual Studio-Installer die Option Weiter aus, um Ihre Installation zu konfigurieren.
Wählen Sie ASP.NET und Webentwicklung unter Workloads aus.
Wählen Sie unter Installationsdetailsdie Option Microsoft Teams-Entwicklungstools aus.
Wählen Sie Installieren aus.
Visual Studio ist in wenigen Minuten installiert.
Einrichten Ihres Teams-Entwicklungsmandanten
Ein Mandant ist wie ein Raum oder Container für Ihre Organisation in Teams, in dem Sie chatten, Dateien freigeben und Besprechungen ausführen. In diesem Bereich laden Sie auch Ihre benutzerdefinierte App hoch und testen sie. Lassen Sie uns überprüfen, ob Sie bereit sind, mit dem Mandanten zu entwickeln.
Aktivieren des Benutzerdefinierten App-Uploads
Nachdem Sie die App erstellt haben, müssen Sie ihre App in Teams laden, ohne sie zu verteilen. Dieser Vorgang wird als benutzerdefinierter App-Upload bezeichnet. Melden Sie sich bei Ihrem Microsoft 365-Konto an, um diese Option anzuzeigen.
Wählen Sie im Teams-Client das Symbol Apps aus.
Wählen Sie Verwalten Ihrer Apps aus.
Wählen Sie App hochladen aus.
Suchen Sie nach der Option Hochladen einer benutzerdefinierten App. Wenn die Option angezeigt wird, ist der benutzerdefinierte App-Upload aktiviert.
Hinweis
Wenden Sie sich an den Teams-Administrator, wenn Sie nicht die Möglichkeit haben, eine benutzerdefinierte App hochzuladen.
Erstellen eines kostenlosen Teams-Entwicklermandanten (optional)
Wenn Sie nicht über ein Teams-Entwicklerkonto verfügen, können Sie es kostenlos erhalten. Nehmen Sie am Microsoft 365-Entwicklerprogramm teil!
Gehen Sie zu Microsoft 365-Entwicklerprogramm.
Wählen Sie Jetzt beitreten aus, und folgen Sie den Anweisungen auf dem Bildschirm.
Wählen Sie auf der Willkommensseite E5-Abonnement einrichten aus.
Einrichten Ihres Administratorkontos. Nachdem Sie fertig sind, wird der folgende Bildschirm angezeigt.
Melden Sie sich bei Teams mit dem Administratorkonto an, das Sie gerade eingerichtet haben. Vergewissern Sie sich, dass Sie über die Option Benutzerdefinierte App hochladen in Teams verfügen.
Abrufen eines kostenlosen Azure-Kontos
Wenn Sie Ihre App hosten oder auf Ressourcen in Azure zugreifen möchten, benötigen Sie ein Azure-Abonnement. Erstellen Sie ein kostenloses Konto , bevor Sie beginnen.
Jetzt verfügen Sie über alle Tools zum Einrichten Ihres Kontos. Richten Sie als Nächstes Ihre Entwicklungsumgebung ein, und beginnen Sie mit dem Erstellen! Wählen Sie die App aus, die Sie zuerst erstellen möchten.
Erstellen eines Projektarbeitsbereichs für Ihre Registerkarten-App
Öffnen Sie Visual Studio.
Wählen Sie Neues Projekt erstellen aus.
Die Seite Neues Projekt erstellen wird angezeigt.
Geben Sie im Suchfeld Microsoft Teams ein. Wählen Sie in den Suchergebnissen Microsoft Teams-App aus.
Wählen Sie Weiter aus.
Geben Sie Projektname ein , und wählen Sie Erstellen aus.
Wählen Sie tab als Funktion für Ihre App aus.
Wählen Sie Erstellen aus.
Ihre Teams-Registerkarten-App wird in wenigen Sekunden erstellt.
Eine kurze Zusammenfassung der Erstellung einer Teams-Registerkarten-App.
Sehen Sie sich diese kurze Zusammenfassung zum Erstellen einer Teams-Registerkarten-App an.
Machen Sie einen Überblick über den Quellcode für die Teams-Registerkarten-App
Nach der Projekterstellung verfügen Sie über die Komponenten zum Erstellen einer einfachen persönlichen App. Sie können die Projektverzeichnisstruktur im Bereich Projektmappen-Explorer von Visual Studio anzeigen.
Teams Toolkit erstellt ein Gerüst für Ihr Projekt basierend auf den von Ihnen ausgewählten Funktionen. Teams Toolkit verwaltet unter anderem Folgendes:
| Ordnername | Inhalt |
|---|---|
| App-Symbole | Die App-Symbole werden als PNG-Dateien in color.png und outline.png gespeichert. |
manifest.json |
Das App-Manifest (zuvor als Teams-App-Manifest bezeichnet) für die Veröffentlichung über das Entwicklerportal für Teams wird in Properties/manifest.jsongespeichert. |
BackendController.cs |
Ein Back-End-Controller wird in Controllers/BackendController.cs zur Unterstützung bei der Authentifizierung bereitgestellt. |
Pages/Tab.razor |
Das App-Manifest für die Veröffentlichung über das Entwicklerportal für Teams wird in Properties/manifest.jsongespeichert. |
TeamsFx.cs und JS/src/index.js |
Der Inhalt wird zum Initialisieren der Kommunikation mit dem Teams-Host verwendet. |
Sie können Back-End-Funktionen hinzufügen, indem Sie Ihrer Anwendung weitere ASP.NET Core-Controller hinzufügen.
Erstellen und Ausführen Ihrer ersten Teams-Registerkarten-App
Nachdem Sie Ihren Projektarbeitsbereich mit Teams Toolkit eingerichtet haben, erstellen Sie Ihr Registerkartenprojekt.
So erstellen Sie Ihre App und führen sie aus:
Wählen Sie ProjectTeams Toolkit>Prepare Teams App Dependencies (Teams-App-Abhängigkeiten> vorbereiten) aus.
Melden Sie sich bei Ihrem Microsoft 365-Konto an, und wählen Sie dann Weiter aus.
Wählen Sie Debuggen>Debuggen starten oder F5 aus.
Wenn ein Dialogfeld Sicherheitswarnung angezeigt wird, wählen Sie Ja aus.
Wählen Sie Hinzufügen aus, um Ihre App in Teams zu installieren.
Herzlichen Glückwunsch, Ihre erste Registerkarten-App wird in Ihrer lokalen Umgebung ausgeführt!
Wählen Sie Autorisieren aus, damit Ihre App Benutzerdetails mithilfe von Microsoft Graph abrufen kann.
Wählen Sie Annehmen aus.
Ihr Foto und Ihre Details werden auf Ihrer Persönlichen Registerkarte angezeigt.
Sie können normale Debugaktivitäten ausführen, z. B. das Festlegen von Haltepunkten, als ob es sich um eine andere Webanwendung handeln würde. Die App unterstützt Hot Reloading. Wenn Sie eine Datei innerhalb des Projekts ändern, wird die Seite erneut geladen.
Beenden Sie das Debuggen in Visual Studio.
Vorschau Ihrer ersten Teams-Registerkarten-App
Sie haben gelernt, eine Teams-App mit Registerkartenfunktion zu erstellen, zu erstellen und auszuführen. Die folgenden letzten Schritte sind die Bereitstellung Ihrer App in Azure und der Vorschau in Teams:
Wir stellen die erste App mit Registerkartenfunktion in Microsoft Azure mithilfe des Teams-Toolkits bereit.
So stellen Sie Ihre Registerkarten-App in Azure bereit
Wählen Sie Project>Teams Toolkit>Provision in the Cloud aus.
Geben Sie im Dialogfeld Bereitstellen die Details zu Abonnement und Ressourcengruppe ein :
- Wählen Sie in der Dropdownliste Ihren Abonnementnamen aus.
- Wählen Sie Ihre Ressourcengruppe aus der Dropdownliste aus.
- Wenn Sie nicht über eine vorhandene Ressourcengruppe verfügen, können Sie eine neue Ressourcengruppe erstellen. Um eine neue Ressourcengruppe zu erstellen, wählen Sie Neu> aus, geben Sie den Ressourcennamen > ein und wählen Sie OK aus. Wählen Sie einen Standort aus der Dropdownliste neuer Ressourcengruppenstandort aus.
- Wählen Sie Bereitstellen aus.
Ein Teams Toolkit-Warnungsdialogfeld wird angezeigt.
Wählen Sie Bereitstellen aus.
Die Bereitstellung Ihrer Ressourcengruppe in der Cloud dauert einige Minuten.
Wählen Sie OK aus.
Wählen Sie Bereitgestellte Ressourcen anzeigen aus, um sie im Azure-Portal anzuzeigen.
Melden Sie sich bei Ihrem Azure-Portal an.
Ihre app-dev-rg wird angezeigt.
Ihre Ressourcen werden im Azure-Portal bereitgestellt.
So stellen Sie Ihre Registerkarten-App in der Cloud bereit
Wählen Sie ProjectTeams Toolkit>Deploy to the Cloud... (In > der Cloud bereitstellen) aus.
Wählen Sie OK aus.
Ihre Registerkarten-App wurde erfolgreich in der Cloud bereitgestellt!
So zeigen Sie eine Vorschau Ihrer Registerkarten-App in Teams an
Wählen Sie Project>Teams Toolkit>Preview in Teams aus.
Klicken Sie auf Hinzufügen.
Herzlichen Glückwunsch, Ihre erste Registerkarten-App wird in Ihrer Azure-Umgebung ausgeführt!
Wählen Sie Autorisieren aus, damit Ihre App Benutzerdetails mithilfe von Microsoft Graph abrufen kann.
Wählen Sie Annehmen aus.
Ihr Foto und Ihre Details werden auf Ihrer Persönlichen Registerkarte angezeigt.
Erstellen eines Projektarbeitsbereichs für Ihre Bot-App
Starten Sie die Teams-App-Entwicklung, indem Sie Ihre erste App erstellen. Diese App verwendet die Botfunktion.
Erstellen Ihres Botprojekts
Öffnen Sie Visual Studio.
Wählen Sie Neues Projekt erstellen aus.
Die Seite Neues Projekt erstellen wird angezeigt.
Geben Sie im Suchfeld Microsoft Teams ein. Wählen Sie in den Suchergebnissen Microsoft Teams-App aus.
Wählen Sie Weiter aus.
Das Fenster Neues Projekt konfigurieren wird angezeigt.
Geben Sie Projektname ein , und wählen Sie Erstellen aus.
Das Fenster Neue Teams-Anwendung erstellen wird angezeigt.
Wählen Sie Teams-App-Feature aus.
Wählen Sie die Befehlsbot-App als Funktion für Ihre App aus.
Wählen Sie Erstellen aus.
Ihre Teams-Bot-App wird in wenigen Sekunden erstellt.
Eine kurze Zusammenfassung der Erstellung einer Teams-Bot-App.
Sehen Sie sich diese kurze Zusammenfassung zum Erstellen einer Teams-Bot-App an.
Machen Sie eine Tour durch den Quellcode für die Teams-Bot-App
Nach der Projekterstellung verfügen Sie über die Komponenten zum Erstellen einer einfachen persönlichen App. Sie können die Projektverzeichnisstruktur im Bereich Projektmappen-Explorer des aktuellen Visual Studio anzeigen.
Teams Toolkit erstellt ein Gerüst für Ihr Projekt basierend auf den von Ihnen ausgewählten Funktionen. Teams Toolkit verwaltet unter anderem Folgendes:
| Ordnername | Inhalt |
|---|---|
| App-Symbole | Die App-Symbole werden als PNG-Dateien in color.png und outline.png gespeichert. |
manifest.json |
Das App-Manifest für die Veröffentlichung über das Entwicklerportal für Teams wird in Properties/manifest.jsongespeichert. |
BackendController.cs |
Ein Back-End-Controller wird in Controllers/BackendController.cs zur Unterstützung bei der Authentifizierung bereitgestellt. |
TeamsFx.cs und JS/src/index.js |
Der Inhalt wird zum Initialisieren der Kommunikation mit dem Teams-Host verwendet. |
Sie können Back-End-Funktionen hinzufügen, indem Sie Ihrer Anwendung weitere ASP.NET Core-Controller hinzufügen.
Erstellen und Ausführen Ihrer ersten Bot-App
So erstellen Sie Ihre App und führen sie lokal aus:
Erstellen eines Tunnels
Öffnen Sie Visual Studio.
Wählen Sie Neues Projekt erstellen aus.
Geben Sie im Suchfeld ASP.NET ein. Wählen Sie in den Suchergebnissen ASP.NET Core Web App aus.
Wählen Sie Weiter aus.
Geben Sie Projektname ein , und wählen Sie Weiter aus.
Wählen Sie Erstellen aus.
Ein Übersichtsfenster wird angezeigt.
Wählen Sie in der Dropdownliste Debug die Option Dev Tunnels (kein aktiver Tunnel)>Tunnel erstellen... aus.
Ein Popupfenster wird geöffnet.
Aktualisieren Sie die folgenden Details im Popupfenster:
- Konto: Geben Sie ein Microsoft- oder GitHub-Konto ein.
- Name: Geben Sie einen Namen für Ihren Tunnel ein.
- Tunneltyp: Wählen Sie in der Dropdownliste die Option Temporär aus.
- Zugriff: Wählen Sie in der Dropdownliste Öffentlich aus.
Wählen Sie OK aus.
Ein Popupfenster wird angezeigt, in dem angezeigt wird, dass der Entwicklungstunnel erfolgreich erstellt wurde.
Wählen Sie OK aus.
Sie finden den tunnel, den Sie erstellt haben, in der Debug-Dropdownliste wie folgt:
Wählen Sie F5 aus, um die Anwendung im Debugmodus auszuführen.
Wenn ein Dialogfeld Sicherheitswarnung angezeigt wird, wählen Sie Ja aus.
Ein Popupfenster wird geöffnet.
Wählen Sie Weiter.
Die Dev Tunnel-Startseite wird in einem neuen Browserfenster geöffnet, und der Entwicklungstunnel ist jetzt aktiv.
Wechseln Sie zu Visual Studio, und wählen Sie Ausgabe anzeigen >aus.
Wählen Sie im Dropdownmenü Ausgabekonsoledie Option Dev Tunnels aus.
In der Ausgabekonsole wird die Dev Tunnel-URL angezeigt.
Wählen Sie ProjectTeams Toolkit>Prepare Teams App Dependencies (Teams-App-Abhängigkeiten> vorbereiten) aus.
Melden Sie sich bei Ihrem Microsoft 365-Konto an, und wählen Sie dann Weiter aus.
Wählen Sie Debuggen>Debuggen starten oder F5 aus, um Ihre App im Debugmodus auszuführen.
Klicken Sie auf Hinzufügen.
Jetzt wird der Bot erfolgreich in Teams ausgeführt! Nachdem die App geladen wurde, wird eine Chatsitzung mit dem Bot geöffnet.
Sie können eingeben
helloworld, um eine Einführungskarte für eine adaptive Karte anzuzeigen.
Sie können normale Debugaktivitäten ausführen, z. B. das Festlegen von Haltepunkten, als ob es sich um eine andere Webanwendung handeln würde. Die App unterstützt Hot Reloading. Wenn Sie eine Datei innerhalb des Projekts ändern, wird die Seite erneut geladen.
Erfahren Sie, wie Sie Probleme beheben, wenn Ihre App nicht lokal ausgeführt wird.
Um Ihre App in Teams erfolgreich auszuführen, stellen Sie sicher, dass Sie den benutzerdefinierten App-Upload in Ihrem Teams-Konto aktiviert haben. Weitere Informationen zum Hochladen benutzerdefinierter Apps finden Sie im Abschnitt voraussetzungen.
Vorschau Ihrer ersten Bot-App
So stellen Sie Ihre Bot-App in Azure bereit
Wählen Sie Project>Teams Toolkit>Provision in the Cloud aus.
Geben Sie im Dialogfeld Bereitstellen die Details zu Abonnement und Ressourcengruppe ein :
Wählen Sie in der Dropdownliste Ihren Abonnementnamen aus.
Wählen Sie Ihre Ressourcengruppe aus der Dropdownliste aus.
Wenn Sie nicht über eine vorhandene Ressourcengruppe verfügen, können Sie eine neue Ressourcengruppe erstellen. Um eine neue Ressourcengruppe zu erstellen, wählen Sie Neu> aus, geben Sie den Ressourcennamen > ein und wählen Sie OK aus. Wählen Sie einen Standort aus der Dropdownliste neuer Ressourcengruppenstandort aus.
Wählen Sie Bereitstellen aus.
Ein Teams Toolkit-Warnungsdialogfeld wird angezeigt.
Wählen Sie Bereitstellen aus.
Die Bereitstellung Ihrer Ressourcengruppe in der Cloud dauert einige Minuten.
Klicken Sie nach Abschluss der Bereitstellung auf OK.
Wählen Sie Bereitgestellte Ressourcen anzeigen aus, um sie im Azure-Portal anzuzeigen.
Melden Sie sich bei Ihrem Azure-Portal an.
Ihre app-dev-rg wird angezeigt.
Ihre Ressourcen werden im Azure-Portal bereitgestellt!
So stellen Sie Ihre Bot-App in der Cloud bereit
Wählen Sie ProjectTeams Toolkit>Deploy to the Cloud (In> der Cloud bereitstellen) aus.
Wählen Sie OK aus.
Ihre Bot-App wurde erfolgreich in der Cloud bereitgestellt!
So zeigen Sie eine Vorschau Ihrer Bot-App in Teams an
Wählen Sie Project>Teams Toolkit>Preview in Teams aus.
Klicken Sie auf Hinzufügen.
Jetzt wird der Bot erfolgreich in Teams ausgeführt! Nachdem die App geladen wurde, wird eine Chatsitzung mit dem Bot geöffnet.
Sie können eingeben
helloworld, um eine Einführungskarte für eine adaptive Karte anzuzeigen.
Herzlichen Glückwunsch!
Sie haben es geschafft!
Sie haben zwei Apps mit jeweils unterschiedlichen Funktionen erstellt: eine Registerkarten-App und eine Bot-App.
Sie haben das Tutorial zum Erstellen von Apps mit Blazor abgeschlossen.
Liegt ein Problem mit diesem Abschnitt vor? Wenn ja, senden Sie uns Feedback, damit wir den Abschnitt verbessern können.
Platform Docs