Criar seu primeiro aplicativo usando o Blazor
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.
Observação
O Teams Toolkit não suporta a capacidade de extensão de mensagens.
Pré-requisitos
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.
Transfira a versão mais recente do Visual Studio.
Abra
vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exea 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.
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!
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
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.
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.
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
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
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:
- Selecione o nome da subscrição na lista pendente.
- Selecione seu Grupo de recursos na lista suspensa.
- 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.
- 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
Inicie o desenvolvimento de aplicações do Teams ao criar a sua primeira aplicação. Esta aplicação utiliza a capacidade do 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.
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.
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
Para compilar e executar seu aplicativo localmente:
Criar um túnel
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:
- Conta: introduza uma conta Microsoft ou GitHub.
- Nome: introduza um nome para o túnel.
- Tipo de Túnel: na lista pendente, selecione Temporário.
- 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.
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
helloworldpara 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
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:
Selecione o nome da subscrição na lista pendente.
Selecione seu Grupo de recursos na lista suspensa.
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.
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
helloworldpara mostrar um cartão de introdução para um Cartão Ajustável.
Parabéns!
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.
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.
Comentários
Brevemente: Ao longo de 2024, vamos descontinuar progressivamente o GitHub Issues como mecanismo de feedback para conteúdos e substituí-lo por um novo sistema de feedback. Para obter mais informações, veja: https://aka.ms/ContentUserFeedback.
Submeter e ver comentários