Criar seu primeiro aplicativo usando o Blazor
O Blazor permite criar UIs web interativas usando C#, em vez de JavaScript.
Você pode criar um aplicativo de guia e um aplicativo bot com o Blazor e a versão mais recente do Visual Studio.
Observação
Atualmente, o Teams Toolkit não dá suporte ao recurso de extensão de mensagem.
Pré-requisitos
Aqui está uma lista de ferramentas necessárias para criar e implantar seu aplicativo.
| Instalar | Para usar... | |
|---|---|---|
| Visual Studio 2022 | Você pode instalar a versão corporativa no Visual Studio 2022 e instalar as cargas de trabalho ASP.NET e desenvolvimento da Web. Use a versão mais recente. | |
| Microsoft Teams | Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chat, reuniões e chamar tudo em um só lugar. | |
| Microsoft Edge (recomendado) ou Google Chrome | Um navegador com ferramentas de desenvolvedor. | |
| Túnel de desenvolvimento | Os recursos do aplicativo Teams (bots de conversa, extensões de mensagem e webhooks de entrada) precisam de conexões de entrada. Um túnel conecta seu sistema de desenvolvimento ao Teams. O túnel de desenvolvimento é uma ferramenta poderosa para abrir com segurança seu localhost para a Internet e controlar quem tem acesso. O túnel de desenvolvimento está disponível no Visual Studio 2022 versão 17.7.0 ou posterior. ou você também pode usar o ngrok como um túnel para conectar seu sistema de desenvolvimento ao Teams. Não é necessário para aplicativos que incluem apenas guias. Esse pacote é instalado no diretório do projeto (usando npm devDependencies). |
Depois de instalar as ferramentas necessárias, configure o ambiente de desenvolvimento.
Instalar o Kit de Ferramentas do Microsoft Teams
O Kit de Ferramentas do Teams ajuda a simplificar o processo de desenvolvimento com ferramentas para provisionar e implantar recursos de nuvem para seu aplicativo, publicar na Microsoft Teams Store e muito mais.
Você pode usar o kit de ferramentas com o Visual Studio ou a CLI (interface de linha de comando) chamada teamsfx.
Baixe a versão mais recente do Visual Studio.
Abra
vs_enterprise__3bed52501a604464b1eff2ce580fd4eb.exena pasta de download.Selecione Continuar na página Instalador do Visual Studio para configurar sua instalação.
Selecione ASP.NET e desenvolvimento da Web emCargas de Trabalho.
Selecione Ferramentas de desenvolvimento do Microsoft Teams em Detalhes de instalação.
Selecione Instalar.
Seu Visual Studio é instalado em alguns minutos.
Configurar seu locatário de desenvolvimento do Teams
Um locatário é como um espaço ou um contêiner para sua organização no Teams, onde você conversa, compartilha arquivos e executa reuniões. Esse espaço também é onde você carrega e testa seu aplicativo personalizado. Vamos verificar se você está pronto para desenvolver com o locatário.
Habilitar o upload de aplicativo personalizado
Depois de criar o aplicativo, você deve carregar seu aplicativo no Teams sem distribuí-lo. Esse processo é conhecido como upload de aplicativo personalizado. Entre em sua conta do Microsoft 365 para exibir essa opção.
No cliente do Teams, selecione Ícone aplicativos .
Selecione Gerenciar seus aplicativos.
Selecione Carregar um aplicativo.
Procure a opção para Carregar um aplicativo personalizado. Se você vir a opção, o upload de aplicativo personalizado estará habilitado.
Observação
Entre em contato com o administrador do Teams, se você não tiver a opção de carregar um aplicativo personalizado.
Create um locatário gratuito do desenvolvedor do Teams (opcional)
Se você não tiver uma conta de desenvolvedor do Teams, poderá obtê-la gratuitamente. Ingresse no programa de desenvolvedor do Microsoft 365!
Selecione Ingressar Agora e siga as instruções na tela.
Na tela de boas-vindas, selecione Configurar assinatura do E5.
Configurar a conta de administrador. Depois de concluir, a tela a seguir será exibida.
Entre no Teams usando a conta de administrador que você acabou de configurar. Verifique se você tem a opção Carregar um aplicativo personalizado no Teams.
Obter uma conta gratuita do Azure
Se você deseja hospedar seu aplicativo ou acessar recursos no Azure, deverá ter uma assinatura do Azure. Create uma conta gratuita antes de começar.
Agora você tem todas as ferramentas para configurar sua conta. Em seguida, vamos configurar seu ambiente de desenvolvimento e começar a criar! Selecione o aplicativo que você deseja criar primeiro.
Create workspace do projeto para seu aplicativo de guias
Abra o Visual Studio.
Selecione Create um novo projeto.
A Create uma nova página de projeto é exibida.
Na caixa de pesquisa, insira Microsoft Teams. Nos resultados da pesquisa, selecione Aplicativo do Microsoft Teams.
Selecione Avançar.
Insira o nome do projeto e selecione Create.
Selecione a Guia como a funcionalidade do seu aplicativo.
Selecione Criar.
Seu aplicativo de guia teams é criado em alguns segundos.
Uma recapitulação rápida da criação de um aplicativo de guia do Teams.
Assista a esta breve recapitulação para criar um aplicativo de guia do Teams.
Faça um tour pelo código-fonte do aplicativo de guia teams
Após a criação do projeto, você tem os componentes para criar um aplicativo pessoal básico. Você pode exibir a estrutura do diretório do projeto no painel Gerenciador de Soluções do Visual Studio.
O Teams Toolkit cria um scaffolding para seu projeto com base nos recursos selecionados. Entre outros arquivos, 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 do aplicativo (anteriormente chamado de manifesto de aplicativo do Teams) para publicação por meio do Portal do Desenvolvedor para Teams é armazenado em Properties/manifest.json. |
BackendController.cs |
Um controlador de back-end é fornecido para ajudar na Controllers/BackendController.cs autenticação. |
Pages/Tab.razor |
O manifesto do aplicativo para publicação por meio do Portal do Desenvolvedor para Teams é armazenado em Properties/manifest.json. |
TeamsFx.cs e JS/src/index.js |
O conteúdo é usado para inicializar comunicações com o host do Teams. |
Você pode adicionar a funcionalidade de back-end adicionando outros controladores ASP.NET Core ao seu aplicativo.
Criar e executar seu primeiro aplicativo de guia do Teams
Depois de configurar o workspace do projeto com o Teams Toolkit, crie seu projeto de guia.
Para criar e executar seu aplicativo:
Selecione Kitde Ferramentas> do Project> TeamsPreparar Dependências de Aplicativo do Teams.
Entre em sua conta do Microsoft 365 e selecione Continuar.
Selecione Depurar>Iniciar Depuração ou selecione F5.
Se uma caixa de diálogo Aviso de Segurança for exibida, selecione Sim.
Selecione Adicionar para instalar seu aplicativo no Teams.
Parabéns, seu primeiro aplicativo de guias está em execução em seu ambiente local!
Para permitir que seu aplicativo recupere os detalhes do usuário usando o Microsoft Graph, selecione Autorizar.
Selecione Aceitar.
Sua fotografia e detalhes aparecem em sua Guia Pessoal.
Você pode fazer atividades normais de depuração, como definir pontos de interrupção, como se fosse qualquer outro aplicativo Web. O aplicativo dá suporte à recarga dinâmica. Se você alterar qualquer arquivo dentro do projeto, a página será recarregada.
Pare de depurar no Visual Studio.
Visualizar seu primeiro aplicativo de guia do Teams
Você aprendeu a criar, compilar e executar o aplicativo teams com a funcionalidade de guia. As seguintes etapas finais são implantar seu aplicativo no Azure e visualizar no Teams:
Vamos implantar o primeiro aplicativo com funcionalidade de guia no Microsoft Azure usando o Teams Toolkit.
Para provisionar seu aplicativo de guias no Azure
Selecione ProvisionamentodeKit de> Ferramentas do Project > Teamsna Nuvem.
Insira os detalhes da assinatura e do grupo de recursos na caixa de diálogo Provisionar :
- Selecione o nome da assinatura na lista suspensa.
- Selecione seu Grupo de recursos na lista suspensa.
- Se você não tiver um grupo de recursos existente, poderá criar um novo grupo de recursos. Para criar um novo grupo de recursos, selecione Novo> insira o nome > do recurso, selecione OK. Selecione um local na lista suspensa local do novo grupo de recursos.
- Selecione Provisionar.
Uma caixa de diálogo de aviso do Teams Toolkit é exibida.
Selecione Provisionar.
Leva alguns minutos para o grupo de recursos provisionar na nuvem.
Clique em OK.
Selecione Exibir Recursos Provisionados para exibir no portal do Azure.
Entre no portal do Azure.
Seu aplicativo-dev-rg é exibido.
Seus recursos são provisionados no portal do Azure.
Para implantar seu aplicativo de guia na nuvem
Selecione Implantar kitde ferramentas> do Project> Teamsna nuvem....
Clique em OK.
Seu aplicativo de guias é implantado com êxito na nuvem!
Para visualizar seu aplicativo de guia no Teams
Selecione Visualização do Kitde Ferramentas> do Project > Teamsno Teams.
Selecione Adicionar.
Parabéns, seu primeiro aplicativo de guias está em execução em seu ambiente do Azure!
Selecione Autorizar para permitir que seu aplicativo recupere os detalhes do usuário usando o Microsoft Graph.
Selecione Aceitar.
Sua fotografia e detalhes aparecem em sua Guia Pessoal.
Create workspace de projeto para seu aplicativo bot
Inicie o desenvolvimento de aplicativos do Teams criando seu primeiro aplicativo. Este aplicativo usa a funcionalidade do bot.
Create seu projeto de bot
Abra o Visual Studio.
Selecione Create um novo projeto.
A Create uma nova página de projeto é exibida.
Na caixa de pesquisa, insira Microsoft Teams. Nos resultados da pesquisa, selecione Aplicativo do Microsoft Teams.
Selecione Avançar.
A janela Configurar seu novo projeto é exibida.
Insira o nome do projeto e selecione Create.
O Create uma nova janela de aplicativo do Teams é exibida.
Selecione Recurso de aplicativo do Teams.
Selecione o aplicativo Bot de Comando como a funcionalidade do seu aplicativo.
Selecione Criar.
Seu aplicativo bot do Teams é criado em alguns segundos.
Uma recapitulação rápida da criação de um aplicativo bot do Teams.
Assista a esta breve recapitulação para criar um aplicativo bot do Teams.
Faça um tour pelo código-fonte do aplicativo bot do Teams
Após a criação do projeto, você tem os componentes para criar um aplicativo pessoal básico. Você pode exibir a estrutura do diretório do projeto na área Gerenciador de Soluções do Visual Studio mais recente.
O Teams Toolkit cria um scaffolding para seu projeto com base nos recursos selecionados. Entre outros arquivos, 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 do aplicativo para publicação por meio do Portal do Desenvolvedor para Teams é armazenado em Properties/manifest.json. |
BackendController.cs |
Um controlador de back-end é fornecido para ajudar na Controllers/BackendController.cs autenticação. |
TeamsFx.cs e JS/src/index.js |
O conteúdo é usado para inicializar comunicações com o host do Teams. |
Você pode adicionar a funcionalidade de back-end adicionando outros controladores ASP.NET Core ao seu aplicativo.
Criar e executar seu primeiro aplicativo bot
Para compilar e executar seu aplicativo localmente:
Create um túnel
Abra o Visual Studio.
Selecione Create um novo projeto.
Na caixa de pesquisa, insira ASP.NET. Nos resultados da pesquisa, selecione ASP.NET Core Aplicativo Web.
Selecione Avançar.
Insira o nome do projeto e selecione Avançar.
Selecione Criar.
Uma janela de visão geral é exibida.
Na lista suspensa de depuração, selecione Túneis de Desenvolvimento (nenhum túnel ativo)>Create um túnel....
Uma janela pop-up será exibida.
Atualize os seguintes detalhes na janela pop-up:
- Conta: insira uma conta Microsoft ou GitHub.
- Nome: insira um nome para o túnel.
- Tipo de túnel: na lista suspensa, selecione Temporário.
- Acesso: Na lista suspensa, selecione Público.
Clique em OK.
Uma janela pop-up aparece mostrando que o túnel de desenvolvimento foi criado com êxito.
Clique em OK.
Você pode encontrar o túnel que você criou na lista suspensa de depuração da seguinte maneira:
Selecione F5 para executar o aplicativo no modo de depuração.
Se uma caixa de diálogo Aviso de Segurança for exibida, selecione Sim.
Uma janela pop-up será exibida.
Selecione Continuar.
A página inicial do túnel de desenvolvimento é aberta em uma nova janela do navegador e o túnel de desenvolvimento agora está ativo.
Vá para o Visual Studio, selecione Exibir > Saída.
No menu suspenso Do console de saída , selecione Túneis de Desenvolvimento.
O console de saída mostra a URL do túnel de desenvolvimento.
Selecione Kitde Ferramentas> do Project> TeamsPreparar Dependências de Aplicativo do Teams.
Entre em sua conta do Microsoft 365 e selecione Continuar.
Selecione Depurar>Iniciar Depuração ou selecione F5 para executar seu aplicativo no modo de depuração.
Selecione Adicionar.
Agora o bot está sendo executado com êxito no Teams! Depois que o aplicativo é carregado, uma sessão de chat com o bot é aberta.
Você pode digitar
helloworldpara mostrar um cartão de introdução para um Cartão Adaptável.
Você pode fazer atividades normais de depuração, como definir pontos de interrupção, como se fosse qualquer outro aplicativo Web. O aplicativo dá suporte à recarga dinâmica. Se você alterar qualquer arquivo dentro do projeto, a página será recarregada.
Saiba como solucionar problemas se o aplicativo não for executado localmente.
Para executar seu aplicativo com êxito no Teams, verifique se você habilitou o carregamento de aplicativo personalizado em sua conta do Teams. Você pode saber mais sobre o upload de aplicativo personalizado na seção pré-requisitos.
Visualizar seu primeiro aplicativo bot
Para provisionar seu aplicativo bot no Azure
Selecione ProvisionamentodeKit de> Ferramentas do Project > Teamsna Nuvem.
Insira os detalhes da assinatura e do grupo de recursos na caixa de diálogo Provisionar :
Selecione o nome da assinatura na lista suspensa.
Selecione seu Grupo de recursos na lista suspensa.
Se você não tiver um grupo de recursos existente, poderá criar um novo grupo de recursos. Para criar um novo grupo de recursos, selecione Novo> insira o nome > do recurso, selecione OK. Selecione um local na lista suspensa local do novo grupo de recursos.
Selecione Provisionar.
Uma caixa de diálogo de aviso do Teams Toolkit é exibida.
Selecione Provisionar.
Leva alguns minutos para o grupo de recursos provisionar na nuvem.
Depois que a provisão for concluída, selecione OK.
Selecione Exibir Recursos Provisionados para exibir no portal do Azure.
Entre no portal do Azure.
Seu aplicativo-dev-rg é exibido.
Seus recursos estão provisionados no portal do Azure!
Para implantar seu aplicativo bot na nuvem
Selecione Implantarkit >de ferramentasdo Project > Teamsna nuvem.
Clique em OK.
Seu aplicativo bot é implantado com êxito na nuvem!
Para visualizar seu aplicativo bot no Teams
Selecione Visualização do Kitde Ferramentas> do Project > Teamsno Teams.
Selecione Adicionar.
Agora o bot está sendo executado com êxito no Teams! Depois que o aplicativo é carregado, uma sessão de chat com o bot é aberta.
Você pode digitar
helloworldpara mostrar um cartão de introdução para um Cartão Adaptável.
Parabéns!
Você fez isso!
Você criou dois aplicativos, cada um com um recurso diferente: um aplicativo de guia e um aplicativo bot.
Você concluiu o tutorial para criar aplicativos 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
Em breve: Ao longo de 2024, eliminaremos os problemas do GitHub como o mecanismo de comentários para conteúdo e o substituiremos por um novo sistema de comentários. Para obter mais informações, consulte https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de