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... | |
|---|---|---|
| Required | ||
| Visual Studio versão 17.2.0 versão prévia 2.1 | Selecione Visual Studio Enterprise versão prévia de 2022 (versão 17.2.0 versão prévia 2.1). | |
| Microsoft Teams | Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chat, reuniões e chamadas - tudo em um só lugar. | |
| Microsoft Edge (recomendado) ou Google Chrome | Um navegador com ferramentas de desenvolvedor. |
Preparar o ambiente de desenvolvimento
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 como uma Interface de Linha de Comando (chamada teamsfx).
Você pode usar a versão mais recente do Visual Studio para desenvolver aplicativos do Teams com o Blazor Server no .NET.
Para instalar a extensão do Kit de Ferramentas do Microsoft Teams:
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 lateralmente e testa seu aplicativo. Vamos verificar se você está pronto para desenvolver com o locatário.
Habilitar a opção sideload
Depois de criar o aplicativo, você deve carregar seu aplicativo no Teams sem distribuí-lo. Esse processo é conhecido como sideload. Entre em sua conta do Microsoft 365 para exibir essa opção.
Você já tem um locatário e tem acesso ao administrador? Vamos marcar se você realmente fizer isso!
Verifique se você pode carregar aplicativos de sideload no Teams:
No cliente do Teams, selecione Ícone aplicativos .
Selecione Gerenciar seus aplicativos.
Selecione Fazer o upload de um aplicativo personalizado. Se você vir Carregar uma opção de aplicativo personalizado, os aplicativos de sideload estarão habilitados.
Observação
Se o Teams não mostrar a opção de carregar um aplicativo personalizado, conecte-se ao administrador do Teams.
Criar um locatário de desenvolvedor gratuito 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. Crie uma conta gratuita antes de começar.
Agora você tem todas as ferramentas e configurou suas contas. Em seguida, vamos configurar seu ambiente de desenvolvimento e começar a criar!
Criar workspace de projeto para seu aplicativo de guia
Inicie o desenvolvimento de aplicativos do Teams criando seu primeiro aplicativo. Este aplicativo usa o recurso de guia.
Este tutorial orienta você nas etapas para criar, executar e implantar seu primeiro aplicativo do Teams usando o .NET/Blazor.
Nesta seção, você pode aprender:
- Como configurar um novo projeto de guia com o Teams Toolkit
- Sobre a estrutura de diretório do seu aplicativo
Criar seu projeto de guia
Use o Teams Toolkit para criar seu projeto de primeira guia. O kit de ferramentas leva você através de uma série de páginas para criar e configurar seu projeto de aplicativo do Teams:
- Criar uma nova página de projeto : selecione o tipo de projeto.
- Configure sua nova página de projeto : insira os detalhes do projeto.
- Criar uma nova página de aplicativo do Teams : selecione os recursos do aplicativo Teams.
Para criar seu workspace de projeto de guia
Abra a versão mais recente do Visual Studio.
Selecione Criar um novo projeto.
A página Criar um novo projeto é exibida.
Selecione os detalhes do projeto.
Selecione o tipo de projeto:
Pesquise o Microsoft Teams na lista suspensa de modelos.
Selecione Aplicativo do Microsoft Teams como o modelo.
Selecione Avançar.
A página Configurar seu novo projeto é exibida.
Configure os novos detalhes do projeto.
Selecione a seguinte configuração de projeto:
Insira um nome adequado para seu projeto.
Observação
Você pode observar que o nome do projeto inserido é preenchido automaticamente como o nome da solução também. Se desejar, você pode alterar o nome da solução sem afetar o nome do projeto.
Selecione o caminho da pasta em que você deseja criar o workspace do projeto.
Insira um nome de solução diferente, se desejar.
Verifique a opção para salvar o projeto e a solução na mesma pasta, se desejar. Para este tutorial, você não precisa dessa opção.
Selecione Criar.
A página Criar um novo aplicativo do Teams é exibida.
Selecione Recurso de aplicativo do Teams.
Selecionar recurso de aplicativo:
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 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.
Selecione sua conta do Microsoft 365 ou Adicione uma conta para entrar.
Selecione Depurar>Iniciar Depuração ou selecione F5 para executar seu aplicativo no modo de depuração.
Saiba o que acontece quando você executa seu aplicativo localmente no depurador.
Ao selecionar F5, o Teams Toolkit:
- Registra seu aplicativo no Azure Active Directory.
- Registra seu aplicativo para sideload no Teams.
- Inicia o back-end do aplicativo em execução localmente.
- Inicia o front-end do aplicativo hospedado localmente.
- Inicia o Teams em um navegador da Web com um comando para instruir o Teams a carregar o aplicativo de lado (a URL está registrada dentro do manifesto do aplicativo).
Instale o certificado SSL autoassinado para depuração local, se solicitado.
O Teams é carregado em um navegador da Web.
Selecione Adicionar quando solicitado para instalar o aplicativo no Teams.
Parabéns, seu primeiro aplicativo de guias está em execução em seu ambiente local!
Mova-se pela página para exibir os detalhes do usuário.
Selecione Autorizar para permitir que seu aplicativo recupere os detalhes do usuário usando o Microsoft Graph.
O aplicativo solicita permissão para conceder acesso para exibir detalhes do usuário.
Selecione Aceitar para permitir que seu aplicativo acesse os detalhes do usuário.
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.
Saiba como solucionar problemas se o aplicativo não for executado localmente.
Para executar seu aplicativo no Teams, você precisa de uma conta de desenvolvimento do Microsoft 365 que permita o sideload do aplicativo. Você pode saber mais sobre isso na seção Pré-requisitos.
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:
- Provisionar seu aplicativo de guias na nuvem: você pode provisionar seu aplicativo de guias na nuvem.
- Implantar seu aplicativo de guia na nuvem: você pode implantar seu aplicativo de guias na nuvem.
- Visualizar seu aplicativo de guia no Teams: seu aplicativo de guia é aberto no Teams.
Vamos implantar o primeiro aplicativo com recursos de guia no Azure usando o Teams Toolkit.
Para provisionar seu aplicativo de guias na nuvem
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 Nome da assinatura .
- Selecione o grupo de recursos na lista suspensa Grupo de recursos ou selecione Novo para adicionar o grupo de recursos gerado para seu aplicativo.
- Selecione sua Região, se o novo grupo de recursos for criado.
- Selecione Provisionar.
O aviso de provisionamento é exibido.
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 em sua conta portal do Azure no prompt de entrada.
Seu aplicativo-dev-rg é exibido.
Seus recursos estão provisionados no portal do Azure!
Para implantar seu aplicativo de guia na nuvem
Selecione Implantarkit >de ferramentasdo 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 quando solicitado para instalar o aplicativo no Teams.
Parabéns, seu primeiro aplicativo de guias está em execução em seu ambiente do Azure!
Mova-se pela página para exibir os detalhes do usuário.
Selecione Autorizar para permitir que seu aplicativo recupere os detalhes do usuário usando o Microsoft Graph.
O aplicativo solicita permissão para conceder acesso para exibir detalhes do usuário.
Selecione Aceitar para permitir que seu aplicativo acesse os detalhes do usuário.
Sua fotografia e detalhes aparecem em sua Guia Pessoal.
Criar 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.
Este tutorial orienta você nas etapas para criar, executar e implantar seu primeiro aplicativo do Teams usando o .NET/Blazor.
Nesta seção, você pode aprender:
- Como configurar um novo projeto de bot com o Teams Toolkit
- Sobre a estrutura de diretório do seu aplicativo
Criar seu projeto de bot
Use o Teams Toolkit para criar seu primeiro projeto. O kit de ferramentas leva você através de uma série de páginas para criar e configurar seu projeto de aplicativo do Teams:
- Criar uma nova página de projeto : selecione o tipo de projeto.
- Configure sua nova página de projeto : insira os detalhes do projeto.
- Criar uma nova página de aplicativo do Teams : selecione os recursos do aplicativo Teams.
Para criar seu workspace de projeto de bot
Abra a versão mais recente do Visual Studio.
Selecione Criar um novo projeto.
A janela Criar um novo projeto é exibida.
Selecione os detalhes do projeto.
Selecione o tipo de projeto:
Selecione Microsoft Teams em Todas as plataformas lista suspensa.
Selecione Aplicativo do Microsoft Teams como o modelo.
Selecione Avançar.
A janela Configurar seu novo projeto é exibida.
Configure os novos detalhes do projeto.
Selecione os seguintes detalhes de configuração do projeto:
Insira um nome adequado para seu projeto.
Observação
Você pode observar que o nome do projeto inserido é preenchido automaticamente como o nome da solução também. Se desejar, você pode alterar o nome da solução sem afetar o nome do projeto.
Selecione o caminho da pasta em que você deseja criar o workspace do projeto.
Insira um nome de solução diferente, se desejar.
Verifique a opção para salvar o projeto e a solução na mesma pasta, se desejar. Para este tutorial, você não precisa dessa opção.
Selecione Criar.
A janela Criar um novo aplicativo do Teams é exibida.
Selecione Recurso de aplicativo do Teams.
Selecionar recurso de aplicativo:
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:
Use o ngrok ou o prompt de comando para criar um túnel para os pontos de extremidade HTTPS disponíveis publicamente do servidor Web localmente. Execute o seguinte comando no ngrok:
ngrok http --host-header=localhost 5130Selecione Kitde Ferramentas> do Project> TeamsPreparar Dependências de Aplicativo do Teams.
Selecione sua conta do Microsoft 365 ou Adicione uma conta para entrar.
Selecione Depurar>Iniciar Depuração ou selecione F5 para executar seu aplicativo no modo de depuração.
Saiba o que acontece quando você executa seu aplicativo localmente no depurador.
Ao selecionar F5, o Teams Toolkit:
- Registra seu aplicativo no Azure Active Directory.
- Registra seu aplicativo para sideload no Teams.
- Inicia o back-end do aplicativo em execução localmente.
- Inicia o front-end do aplicativo hospedado localmente.
- Inicia o Teams em um navegador da Web com um comando para instruir o Teams a carregar o aplicativo de lado (a URL está registrada dentro do manifesto do aplicativo).
Observação
Quando você executa o aplicativo pela primeira vez, todas as dependências são baixadas e o aplicativo é criado. Uma janela do navegador é aberta automaticamente quando a compilação é concluída. Esse processo pode levar de 3 a 5 minutos para ser concluído.
Seu navegador da Web começa a executar o aplicativo.
Selecione Adicionar quando solicitado a sideload do aplicativo no Teams em seu computador local.
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
welcomepara mostrar um cartão de introdução e digitarlearnpara ir para cartão adaptável e documentação de comando de bot.
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 sideload em sua conta do Teams. Você pode saber mais sobre sideload na seção Pré-requisitos.
Visualizar seu primeiro aplicativo bot
Você aprendeu a criar, compilar e executar o aplicativo teams com a funcionalidade do bot. As seguintes etapas finais são implantar seu aplicativo no Azure e visualizar no Teams:
- Provisionar seu aplicativo bot na nuvem: você pode provisionar seu aplicativo bot na nuvem.
- Implantar seu aplicativo bot na nuvem: você pode implantar seu aplicativo bot na nuvem.
- Visualizar seu aplicativo bot no Teams: seu aplicativo bot é aberto no Teams.
Vamos implantar o primeiro aplicativo bot no Azure usando o Teams Toolkit.
Para provisionar seu aplicativo bot na nuvem
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 Nome da assinatura .
Selecione o grupo de recursos na lista suspensa Grupo de recursos ou selecione Novo para adicionar o grupo de recursos gerado para seu aplicativo.
Selecione sua Região, se o novo grupo de recursos for criado.
Selecione Provisionar.
O aviso de provisionamento é exibido.
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 em sua conta portal do Azure no prompt de entrada.
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 quando solicitado para instalar o aplicativo no Teams.
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
welcomepara mostrar um cartão de introdução.
Você pode digitar
learnpara ir para a documentação de comando adaptável cartão e bot.
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
Enviar e exibir comentários de