Hello World com Blazor - Teams

O Blazor permite-lhe criar UIs Web interativas com C#, em vez de JavaScript.

Pode criar uma aplicação de separador e uma aplicação de bot com o Blazor e a versão mais recente do Visual Studio.

Captura de ecrã da aplicação Blazor a apresentar o separador Bot e a saída da Extensão de Mensagem depois de concluir com êxito o guia passo a passo.

Observação

O Teams Toolkit não suporta a capacidade de extensão de mensagens.

Pré-requisitos

8 minutos restantes

Eis uma lista das ferramentas necessárias para criar e implementar a sua aplicação.

	Instalar	Para usar...
	Visual Studio 2022	Pode instalar a versão empresarial no Visual Studio 2022 e instalar as cargas de trabalho de desenvolvimento web e ASP.NET. Utilize a versão mais recente.
	Microsoft Teams	Microsoft Teams para colaborar com todas as pessoas com quem trabalha através de aplicações para chat, reuniões e ligar para todos num único local.
	Microsoft Edge (recomendado) ou Google Chrome	Um navegador com ferramentas de desenvolvedor.
	Túnel de desenvolvimento	As funcionalidades da aplicação Teams (bots de conversação, extensões de mensagens e webhooks recebidos) precisam de ligações de entrada. Um túnel liga o seu sistema de desenvolvimento ao Teams. O túnel Dev é uma ferramenta avançada para abrir de forma segura o seu localhost na Internet e controlar quem tem acesso. O túnel Dev está disponível no Visual Studio 2022 versão 17.7.0 ou posterior. ou também pode utilizar o ngrok como um túnel para ligar o seu sistema de desenvolvimento ao Teams. Não é necessário para aplicações que incluam apenas separadores. Este pacote é instalado no diretório do projeto (com o npm `devDependencies`).

Depois de instalar as ferramentas necessárias, configure o ambiente de desenvolvimento.

Instalar o Microsoft Teams Toolkit

O Toolkit do Teams ajuda a simplificar o processo de desenvolvimento com ferramentas para aprovisionar e implementar recursos na cloud para a sua aplicação, publicar na Microsoft Teams Store e muito mais.
Pode utilizar o toolkit com o Visual Studio ou a CLI (interface de linha de comandos) denominada teamsfx.

Visual Studio
Linha de comando

Transfira a versão mais recente do Visual Studio.
Abra vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exe a partir da pasta de transferências.
Selecione Continuar na página Do Instalador do Visual Studio para configurar a instalação.
Selecione ASP.NET e desenvolvimento Web em Cargas de trabalho.
Selecione Ferramentas de desenvolvimento do Microsoft Teams em Detalhes de instalação.
Selecione Instalar.

O Visual Studio é instalado dentro de alguns minutos.

Para instalar a CLI do TeamsFx, utilize o npm gestor de pacotes:

npm install -g @microsoft/teamsfx-cli

Consoante a configuração, poderá ter de utilizar sudo para instalar a CLI:

sudo npm install -g --unsafe-perm @microsoft/teamsfx-cli

Esta condição é mais comum em sistemas Linux e macOS.

Certifique-se de que adiciona a cache global do npm ao seu PATH. Normalmente, este passo é feito como parte do instalador do Node.js.

Pode utilizar a CLI com o teamsfx comando . Verifique se o comando está a funcionar ao executar teamsfx -h.

Cuidado

Antes de poder executar o TeamsFx nos terminais do PowerShell, tem de ativar a política de execução assinada remotamente para o PowerShell.

Configurar o seu inquilino de desenvolvimento do Teams

Um inquilino é como um espaço ou um contentor para a sua organização no Teams, onde conversa, partilha ficheiros e executa reuniões. Este espaço também é onde carrega e testa a sua aplicação personalizada. Vamos verificar se está pronto para programar com o inquilino.

Ativar o carregamento de aplicações personalizadas

Depois de criar o aplicativo, você deve carregar seu aplicativo no Teams sem distribuí-lo. Este processo é conhecido como carregamento de aplicações personalizadas. Inicie sessão na sua conta do Microsoft 365 para ver esta opção.

No cliente do Teams, selecione o ícone Aplicações .
Selecione Gerenciar seus aplicativos.
Selecione Carregar uma aplicação.
Procure a opção Carregar uma aplicação personalizada. Se vir a opção, o carregamento de aplicações personalizadas está ativado.

Observação

Contacte o administrador do Teams se não tiver a opção de carregar uma aplicação personalizada.

Criar um inquilino gratuito para programadores do Teams (opcional)

Se não tiver uma conta de programador do Teams, pode obtê-la gratuitamente. Adira ao programa de programador do Microsoft 365!

Acesse o Programa para desenvolvedores do Microsoft 365.
Selecione Aderir Agora e siga as instruções apresentadas no ecrã.
No ecrã de boas-vindas, selecione Configurar a subscrição E5.
Configurar a conta de administrador. Depois de terminar, é apresentado o ecrã seguinte.
Inicie sessão no Teams com a conta de administrador que acabou de configurar. Verifique se tem a opção Carregar uma aplicação personalizada no Teams.

Obter uma conta gratuita do Azure

Se quiser alojar a sua aplicação ou aceder a recursos no Azure, tem de ter uma subscrição do Azure. Crie uma conta gratuita antes de começar.

Agora, tem todas as ferramentas para configurar a sua conta. Em seguida, vamos configurar o seu ambiente de desenvolvimento e começar a criar! Selecione a aplicação que pretende criar primeiro.

Criar uma área de trabalho de projeto para a sua aplicação de separador

7 minutos restantes

Abra o Visual Studio.
Selecione Criar um novo projeto.

É apresentada a página Criar um novo projeto .
Na caixa de pesquisa, introduza Microsoft Teams. Nos resultados da pesquisa, selecione Aplicação Microsoft Teams.
Selecione Avançar.
Introduza Nome do projeto e selecione Criar.
Selecione Tabulação como a capacidade da sua aplicação.
Selecione Criar.

A sua aplicação de separador Teams é criada dentro de alguns segundos.

Uma recapitulação rápida da criação de uma aplicação de separador do Teams.

Veja esta breve recapitulação para criar uma aplicação de separador do Teams.

Representação gráfica mostra o processo de criação da aplicação de separador Teams.

Ver uma apresentação do código fonte da aplicação de separador Teams

Após a criação do projeto, tem os componentes para criar uma aplicação pessoal básica. Pode ver a estrutura do diretório do projeto no painel Explorador de Soluções do Visual Studio.

Captura de ecrã do Explorador de soluções a mostrar os componentes para criar uma aplicação pessoal básica.

O Teams Toolkit cria uma estrutura para o seu projeto com base nas capacidades que selecionou. Entre outros ficheiros, o Teams Toolkit mantém:

Nome da pasta	Conteúdos
Ícones do aplicativo	Os ícones do aplicativo são armazenados como arquivos PNG em `color.png` e `outline.png`.
`manifest.json`	O manifesto da aplicação (anteriormente denominado manifesto da aplicação Teams) para publicação através do Portal do Programador do Teams é armazenado no `Properties/manifest.json`.
`BackendController.cs`	É fornecido um controlador de back-end no `Controllers/BackendController.cs` para ajudar na autenticação.
`Pages/Tab.razor`	O manifesto da aplicação para publicação através do Portal do Programador do Teams é armazenado no `Properties/manifest.json`.
`TeamsFx.cs` e `JS/src/index.js`	O conteúdo é utilizado para inicializar comunicações com o anfitrião do Teams.

Pode adicionar outras funcionalidades de back-end ao adicionar outros controladores ASP.NET Core à sua aplicação.

Criar e executar a sua primeira aplicação de separador do Teams

6 minutos restantes

Depois de configurar a área de trabalho do projeto com o Teams Toolkit, crie o seu projeto de separador.

Para criar e executar a sua aplicação:

Selecione Project>Teams Toolkit>Preparar Dependências de Aplicações do Teams.
Inicie sessão na sua conta do Microsoft 365 e, em seguida, selecione Continuar.
Selecione Depurar>Iniciar Depuração ou selecione F5.
Se for apresentada uma caixa de diálogo Aviso de Segurança , selecione Sim.
Selecione Adicionar para instalar a sua aplicação no Teams.

Parabéns, a sua primeira aplicação de separador está em execução no seu ambiente local!
Para permitir que a sua aplicação obtenha os detalhes do utilizador com o Microsoft Graph, selecione Autorizar.
Selecione Aceitar.
As suas fotografias e detalhes são apresentados no seu Separador Pessoal.

Pode realizar atividades de depuração normais, como definir pontos de interrupção, como se fosse outra aplicação Web. O aplicativo dá suporte à recarga dinâmica. Se alterar qualquer ficheiro no projeto, a página será recarregada.
Pare a depuração no Visual Studio.

Pré-visualizar a sua primeira aplicação de separador do Teams

5 minutos restantes

Aprendeu a criar, criar e executar a aplicação Teams com capacidade de separador. Os passos finais seguintes são implementar a sua aplicação no Azure e Pré-visualizar no Teams:

Vamos implementar a primeira aplicação com capacidade de separador no Microsoft Azure com o Teams Toolkit.

Para aprovisionar a sua aplicação de separador no Azure

Selecione ProjectTeams ToolkitProvision (Aprovisionamento doToolkit> do Project > Teams) na Cloud.
Introduza os detalhes da subscrição e do grupo de recursos na caixa de diálogo Aprovisionamento:
1. Selecione o nome da subscrição na lista pendente.
2. Selecione seu Grupo de recursos na lista suspensa.
3. Se não tiver um grupo de recursos existente, pode criar um novo grupo de recursos. Para criar um novo grupo de recursos, selecione Novo> introduza o nome > do recurso, selecione OK. Selecione uma localização na nova lista pendente de localização do grupo de recursos.
4. Selecione Aprovisionar.
É apresentada uma caixa de diálogo de aviso do Teams Toolkit .
Selecione Aprovisionar.

O aprovisionamento no grupo de recursos na cloud demora alguns minutos.
Clique em OK.
Selecione Ver Recursos Aprovisionados para ver no portal do Azure.
Inicie sessão no portal do Azure.

É apresentado o seu app-dev-rg.

Os recursos são aprovisionados no portal do Azure.

Para implementar a sua aplicação de separador na cloud

Selecione Project>Teams Toolkit>Deploy to the Cloud....
Clique em OK.

A sua aplicação de separador foi implementada com êxito na cloud!

Para pré-visualizar a sua aplicação de separador no Teams

SelecionePré-visualização doToolkit> do Project> Teams no Teams.
Selecione Adicionar.

Parabéns, a sua primeira aplicação de separador está em execução no seu ambiente do Azure!
Selecione Autorizar para permitir que a sua aplicação obtenha os detalhes do utilizador com o Microsoft Graph.
Selecione Aceitar.

As suas fotografias e detalhes são apresentados no seu Separador Pessoal.

Criar uma área de trabalho de projeto para a sua aplicação de bot

4 minutos restantes

Inicie o desenvolvimento de aplicações do Teams ao criar a sua primeira aplicação. Esta aplicação utiliza a capacidade do bot.

Captura de ecrã a mostrar a área de trabalho da sua aplicação de bot.

Criar o projeto de bot

Abra o Visual Studio.
Selecione Criar um novo projeto.

É apresentada a página Criar um novo projeto .
Na caixa de pesquisa, introduza Microsoft Teams. Nos resultados da pesquisa, selecione Aplicação Microsoft Teams.
Selecione Avançar.

É apresentada a janela Configurar o novo projeto .
Introduza Nome do projeto e selecione Criar.

É apresentada a janela Criar uma nova aplicação do Teams .
Selecione a funcionalidade da aplicação Teams.
Selecione a aplicação Bot de Comandos como a capacidade para a sua aplicação.
Selecione Criar.

A sua aplicação de bot do Teams é criada dentro de alguns segundos.

Uma recapitulação rápida da criação de uma aplicação de bot do Teams.

Veja esta breve recapitulação para criar uma aplicação de bot do Teams.

Representação gráfica mostra o processo de criação da aplicação de bot jTeams.

Ver uma apresentação do código fonte da aplicação de bot do Teams

Após a criação do projeto, tem os componentes para criar uma aplicação pessoal básica. Pode ver a estrutura do diretório do projeto na área Explorador de Soluções do Visual Studio mais recente.

Captura de ecrã do Explorador de Soluções com o BlazorApp realçado.

O Teams Toolkit cria uma estrutura para o seu projeto com base nas capacidades que selecionou. Entre outros ficheiros, o Teams Toolkit mantém:

Nome da pasta	Conteúdos
Ícones do aplicativo	Os ícones do aplicativo são armazenados como arquivos PNG em `color.png` e `outline.png`.
`manifest.json`	O manifesto da aplicação para publicação através do Portal do Programador do Teams é armazenado no `Properties/manifest.json`.
`BackendController.cs`	É fornecido um controlador de back-end no `Controllers/BackendController.cs` para ajudar na autenticação.
`TeamsFx.cs` e `JS/src/index.js`	O conteúdo é utilizado para inicializar comunicações com o anfitrião do Teams.

Pode adicionar outras funcionalidades de back-end ao adicionar outros controladores ASP.NET Core à sua aplicação.

Criar e executar a sua primeira aplicação de bot

3 minutos restantes

Para compilar e executar seu aplicativo localmente:

Criar um túnel

túnel dev
ngrok

Abra o Visual Studio.
Selecione Criar um novo projeto.
Na caixa de pesquisa, introduza ASP.NET. Nos resultados da pesquisa, selecione ASP.NET Core Web App.
Selecione Avançar.
Introduza Nome do projeto e selecione Seguinte.
Selecione Criar.

É apresentada uma janela de descrição geral.
Na lista pendente de depuração, selecione Túneis de Desenvolvimento (sem túnel ativo)>Criar um Túnel....

Uma janela pop-up será exibida.
Atualize os seguintes detalhes na janela de pop-up:
1. Conta: introduza uma conta Microsoft ou GitHub.
2. Nome: introduza um nome para o túnel.
3. Tipo de Túnel: na lista pendente, selecione Temporário.
4. Acesso: na lista pendente, selecione Público.
Clique em OK.

É apresentada uma janela de pop-up que mostra que o túnel dev foi criado com êxito.
Clique em OK.

Pode encontrar o túnel que criou na lista pendente de depuração da seguinte forma:
Selecione F5 para executar a aplicação no modo de depuração.
Se for apresentada uma caixa de diálogo Aviso de Segurança , selecione Sim.

Uma janela pop-up será exibida.
Selecione Continuar.

A home page do túnel dev é aberta numa nova janela do browser e o túnel dev está agora ativo.
Aceda ao Visual Studio e selecione Ver > Saída.
No menu pendente Consola de saída , selecione Túneis Dev.

A consola Output (Saída ) mostra o URL do túnel dev.

Utilize ngrok ou Linha de Comandos para criar um túnel para os pontos finais HTTPS publicamente disponíveis do servidor Web em execução local. Execute o seguinte comando no ngrok:

ngrok http --host-header=localhost 3978

Dica

Se encontrar ERR_NGROK_4018, siga os passos indicados na Linha de Comandos para se inscrever e autenticar o ngrok. Em seguida, execute o comando ngrok http --host-header=localhost 3978.

A janela mostra o URL HTTPS.

Captura de ecrã a mostrar o URL https do ngrok.

Selecione Project>Teams Toolkit>Preparar Dependências de Aplicações do Teams.
Inicie sessão na sua conta do Microsoft 365 e, em seguida, selecione Continuar.
Selecione Depurar>Iniciar Depuração ou selecione F5 para executar a sua aplicação no modo de depuração.
Selecione Adicionar.

Agora, o bot está a ser executado com êxito no Teams! Depois de a aplicação ser carregada, é aberta uma sessão de chat com o bot.

Pode escrever helloworld para mostrar um cartão de introdução para um Cartão Ajustável.

Pode realizar atividades de depuração normais, como definir pontos de interrupção, como se fosse outra aplicação Web. O aplicativo dá suporte à recarga dinâmica. Se alterar qualquer ficheiro no projeto, a página será recarregada.

Saiba como resolver problemas se a sua aplicação não for executada localmente.

Para executar com êxito a sua aplicação no Teams, certifique-se de que ativou o carregamento de aplicações personalizadas na sua conta do Teams. Pode saber mais sobre o carregamento de aplicações personalizadas na secção de pré-requisitos.

Pré-visualizar a sua primeira aplicação de bot

2 minutos restantes

Para aprovisionar a aplicação bot no Azure

Selecione ProjectTeams ToolkitProvision (Aprovisionamento doToolkit> do Project > Teams) na Cloud.
Introduza os detalhes da subscrição e do grupo de recursos na caixa de diálogo Aprovisionamento:
1. Selecione o nome da subscrição na lista pendente.
2. Selecione seu Grupo de recursos na lista suspensa.
3. Se não tiver um grupo de recursos existente, pode criar um novo grupo de recursos. Para criar um novo grupo de recursos, selecione Novo> introduza o nome > do recurso, selecione OK. Selecione uma localização na nova lista pendente de localização do grupo de recursos.
4. Selecione Aprovisionar.
  
  É apresentada uma caixa de diálogo de aviso do Teams Toolkit .
Selecione Aprovisionar.

O aprovisionamento no grupo de recursos na cloud demora alguns minutos.
Após a conclusão do aprovisionamento, selecione OK.
Selecione Ver Recursos Aprovisionados para ver no portal do Azure.
Inicie sessão no portal do Azure.

É apresentado o seu app-dev-rg.

Os seus recursos são aprovisionados no portal do Azure!

Para implementar a aplicação bot na cloud

Selecione Project Teams ToolkitDeploy to the Cloud (Implementar noProject>Teams Toolkit> na Cloud).
Clique em OK.

A sua aplicação de bot foi implementada com êxito na cloud!

Para pré-visualizar a sua aplicação de bot no Teams

SelecionePré-visualização doToolkit> do Project> Teams no Teams.
Selecione Adicionar.

Agora, o bot está a ser executado com êxito no Teams! Depois de a aplicação ser carregada, é aberta uma sessão de chat com o bot.
Pode escrever helloworld para mostrar um cartão de introdução para um Cartão Ajustável.

Parabéns!

100% concluído!

Já o fez!

Criou duas aplicações, cada uma com uma capacidade diferente: uma aplicação de separador e uma aplicação de bot.

Concluiu o tutorial para criar aplicações com o Blazor.

Partilhar via

Criar seu primeiro aplicativo usando o Blazor