Criar seu primeiro aplicativo usando C #

Artigo
Developer (Iniciante)
5 minutos para concluir

Inicie o desenvolvimento de aplicativos do Microsoft Teams criando seu primeiro aplicativo com uma guia, um bot e uma funcionalidade de extensão de mensagem.

Esse aplicativo terá todos os recursos e cada um terá sua própria interface do usuário e experiência do usuário:

Diagrama mostrando que esse aplicativo tem três recursos.

Neste tutorial, você aprenderá:

Como configurar um novo projeto.
Como criar três aplicativos com uma funcionalidade diferente cada: guia, bot e extensão de mensagem usando C# e Visual Studio 2019.
Como implantar seu aplicativo no Portal do Desenvolvedor.

Pré-requisitos

4 minutos restantes

Aqui está uma lista de ferramentas que você precisará instalar para criar e implantar um aplicativo do Teams.

	Instalar	Para usar...
Required
	Visual Studio 2019 Instale uma das duas cargas de trabalho a seguir: • ASP.NET desenvolvimento para a Web • Desenvolvimento multiplataforma do .NET Core	.NET. Você pode instalar a edição gratuita da comunidade do Visual Studio 2019 e instalar as cargas de trabalho também.
	Git	Git para usar o repositório de aplicativos C# de exemplo do GitHub.
	ngrok	Os recursos do aplicativo Teams (bot de conversação e extensão de mensagem) exigem conexões de entrada. Você precisa expor seu sistema de desenvolvimento ao Teams por meio de um túnel. Um túnel não é necessário para aplicativos que incluem apenas guias. Esse pacote é instalado no diretório do projeto (usando npm `devDependencies`).
	Kit de ferramentas do Teams	Uma extensão do Visual Studio 2019 que cria um scaffolding de projeto para seu aplicativo. Use a versão mais recente.
	Portal do Desenvolvedor do Teams	Portal baseado na Web para configurar, gerenciar e distribuir seu aplicativo do Teams, inclusive para sua organização ou para a loja do Teams.
	Microsoft Teams	O Microsoft Teams para colaborar com todos com quem você trabalha por meio de aplicativos para chats, reuniões, chamadas - tudo em um só lugar.
Opcional
	Ferramentas do Azure para Visual Studio Code CLI do Microsoft Azure	Ferramentas do Azure para acessar dados armazenados ou implantar um back-end baseado em nuvem para seu aplicativo Teams no Azure.

Verificar a instalação do git

Se a instalação do Visual Studio solicitar que você adicione git ao caminho, selecione-o.

Para verificar a versão do git instalada:

Abra uma janela de terminal.
Execute o seguinte comando para verificar a git versão instalada no computador:
```
$ git --version
```
Exemplo de saída: git version 2.17.1.windows.2

Instalar o Kit de Ferramentas do Teams

O Kit de Ferramentas do Teams ajuda a simplificar o processo de desenvolvimento com ferramentas para criar um scaffolding de projeto para seu aplicativo. Ele cria a estrutura de diretório necessária para todos os recursos selecionados com os arquivos necessários em vigor, prontos para compilar o projeto.

O Kit de Ferramentas do Teams está disponível como uma extensão do Visual Studio 2019.

Para instalar a extensão do Kit de Ferramentas do Teams:

Abra o Visual Studio 2019 e selecione As Extensões Gerenciam > Extensões.
Na caixa de pesquisa, insira o Kit de Ferramentas do Teams.
Selecione Baixar ao lado do Kit de Ferramentas do Teams.

As alterações estarão disponíveis depois que você fechar o Visual Studio 2019. É necessário, pois o Visual Studio 2019 deve ser reiniciado após a instalação da extensão.
Selecione Fechar.
Feche o Visual Studio 2019.

O instalador do VSIX é aberto com instruções para instalar a extensão.
Siga as instruções do instalador do VSIX para concluir a instalação do kit de ferramentas.
Abra o Visual Studio 2019 novamente.

Os Aplicativos do Teams estarão disponíveis como um modelo no Visual Studio 2019.

Você também pode encontrar o Kit de Ferramentas do Teams no Visual Studio Code Marketplace.

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ê faz sideload e testa seu aplicativo. Vamos verificar se você está pronto para desenvolver com o locatário.

Verificar a opção de 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.

Observação

O sideload é necessário para visualizar e testar aplicativos no ambiente local do Teams. Se ele não estiver habilitado, você não poderá visualizar e testar seu aplicativo no Teams localmente.

Você já tem um locatário e tem acesso de administrador? Vamos verificar se você realmente faz!

Verifique se você pode fazer sideload de aplicativos no Teams:

No cliente do Teams, selecione o ícone da Loja.
Selecione Gerenciar seus aplicativos.
Procure a opção para carregar um aplicativo personalizado. Se você vir a opção, o sideload de aplicativos estará habilitado.

Observação

Se o Teams não mostrar a opção de carregar um aplicativo personalizado, fale com o administrador do Teams.

Criar um locatário de desenvolvedor gratuito do Teams (opcional)

Se você não tiver uma conta do Teams, poderá obtê-la gratuitamente. Participe do programa de desenvolvedor do Microsoft 365!

Acesse o Programa para desenvolvedores 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ê quiser 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 configura suas contas. Em seguida, vamos configurar seu ambiente de desenvolvimento e começar a criar!

Observação

Use uma janela de terminal adequada em sua plataforma. Esses exemplos usam o Git Bash, mas podem ser executados na maioria das plataformas.

Abra a versão mais recente do Visual Studio e instale as atualizações.

Você pode usar a mesma janela de terminal para executar os comandos neste tutorial.

Baixar o exemplo

Para este tutorial, use o Hello, World! exemplo em C#. Você pode baixá-lo e cloná-lo do GitHub.

Para usar esse exemplo, clone o repositório de exemplo de uma das seguintes maneiras:

Usando o Git Bash
Usando o Visual Studio 2019

Para usar o Git Bash para clonar o repositório de exemplo

Execute o seguinte comando em uma janela de terminal para clonar o repositório de exemplo em seu computador:
```
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
```
O repositório de exemplo para o aplicativo C# é clonado no computador no local padrão.

Dica

Você pode bifurcar esse repositório para modificar e salvar suas alterações no GitHub.

Você pode exibir o repositório clonado abrindo-o no Visual Studio 2019.

Para usar o Visual Studio 2019 para clonar o repositório de exemplo

Abra o Visual Studio 2019.
Selecione Clonar um repositório.
Insira https://github.com/OfficeDev/Microsoft-Teams-Samples.git como caminho para clonar o repositório:
Insira o local onde você deseja clonar o repositório e selecione Clonar.

O repositório de exemplo é clonado e o Visual Studio é aberto. Você pode exibir o repositório clonado no Gerenciador de Soluções.

Agora que você clonou o repositório de exemplo, vamos criar seu primeiro aplicativo C# para o Teams.

Compilar e executar seu primeiro aplicativo em C#

3 minutos restantes

Depois de clonar o repositório para o aplicativo de exemplo C#, você pode compilar e executar o aplicativo em seu ambiente local.

Nesta página, você aprenderá a:

Desenvolver seu primeiro aplicativo
Implantar seu aplicativo de exemplo localmente

Desenvolver seu primeiro aplicativo

Você pode exibir a estrutura do projeto no Gerenciador de Soluções depois que o workspace for criado. Agora, você deve compilar e executar seu aplicativo.

Para compilar e executar o exemplo clonado

Abra o arquivo de solução Microsoft.Teams.Samples.HelloWorld.sln no diretório Microsoft-Teams-Samples/samples/app-hello-world/csharp do exemplo.
Selecione o menu Projeto e selecione Propriedades do Microsoft.Teams.Samples.HelloWorld.Web.
Selecione Depurar no painel esquerdo da janela Propriedades .
Mova-se pela tela para exibir as Configurações do Servidor Web.
Faça as seguintes configurações no painel Depurar :
- Defina a URL do Aplicativo como http://localhost:3333/.
- Limpar Habilitar SSL.
Selecione Compilar Solução no menu Compilar.
Selecione a tecla F5 ou inicie a depuração no menu Depurar para executar o exemplo.

Quando o aplicativo é iniciado, uma janela do navegador é aberta. Ele mostra a raiz do seu aplicativo. Você pode acessar as seguintes URLs para verificar se todas as URLs do aplicativo estão sendo carregadas:
- https://localhost:3333/
- https://localhost:3333/hello
- https://localhost:3333/first
- https://localhost:3333/second
Observação

Se você receber um erro Could not find a part of the path … bin\roslyn\csc.exe, atualize o pacote com o comando Update-Package Microsoft.CodeDom.Providers.DotNetCompilerPlatform -r.

Implantar seu aplicativo de exemplo localmente

Os aplicativos do Microsoft Teams são aplicativos Web que fornecem um ou mais recursos. Disponibilizar seu aplicativo na Internet para que a plataforma teams possa carregá-lo. Hospede seu aplicativo usando ngrok para criar um túnel para o processo local em seu computador.

Depois de hospedar seu aplicativo, anote sua URL raiz, como https://yourteamsapp.ngrok.io ou https://yourteamsapp.azurewebsites.net.

Túnel usando ngrok

Depois de instalar o ngrok, você pode criar um túnel para implantar seu aplicativo localmente:

Abra uma nova janela de terminal.
Execute o comando a seguir para criar um túnel. O aplicativo de exemplo usa a porta 3333.
```
ngrok http 3333 -host-header=localhost:3333
```
O túnel ngrok é criado. Veja um exemplo:

Você pode tentar adicionar hello, firstou à second URL do túnel ngrok para exibir páginas de guias diferentes do aplicativo.

O Ngrok escuta solicitações da Internet e as roteia para seu aplicativo em execução na porta 3333.

Para verificar a implantação local do aplicativo:

Abra o navegador.
Carregue seu aplicativo usando a seguinte URL:

https://<forwarding address in ngrok console session>/

Aqui está um exemplo da URL:
Anote o endereço de encaminhamento no console do ngrok. Você precisa dessa URL para implantar seu aplicativo no Teams.

Observação

Se você usou uma porta diferente durante o build, use o mesmo número da porta para configurar o ngrok túnel.

Dica

É uma boa ideia executar em uma ngrok janela de terminal diferente. Ele ajuda a evitar ngrok interferir no aplicativo, quando você precisará parar, recriar e executar novamente o aplicativo. A ngrok sessão fornece informações úteis de depuração nesta janela.

Importante

Se você usar a versão gratuita do ngrok, seu aplicativo estará disponível somente durante a sessão atual em seu computador de desenvolvimento. Ele não estará disponível se a máquina estiver desligada ou estiver dormindo. Quando você reinicia o serviço, ele retorna um novo endereço. Em seguida, você deve atualizar cada local que usa o endereço desatualizado. Lembre-se desta etapa ao compartilhar o aplicativo para teste.

Configurar seu primeiro aplicativo C# usando o Portal do Desenvolvedor

2 minutos restantes

Você pode usar o Portal do Desenvolvedor para carregar o pacote do aplicativo no Teams e configurar os recursos do aplicativo. O Portal do Desenvolvedor é um aplicativo do Teams que simplifica a criação e o registro de um aplicativo. Instale na loja do Teams!

Depois de criar e testar seu aplicativo teams, você pode configurá-lo e visualizá-lo usando o Portal do Desenvolvedor.

Nesta página, você aprenderá a configurar o pacote do aplicativo no Portal do Desenvolvedor.

Opção Publicar no Visual Studio 2019

Este tutorial usa o Portal do Desenvolvedor para configurar as funcionalidades do aplicativo e publicar seu aplicativo.

No entanto, o Visual Studio 2019 tem suporte interno para implantação de aplicativos em diferentes provedores, incluindo o Azure:

Imagem mostrando o item de menu Publicar no Azure no Visual Studio 2019

O Microsoft Azure hospeda seu aplicativo .NET em uma camada gratuita. Ele usa uma infraestrutura compartilhada que é suficiente para executar o Hello World exemplo. Para obter mais informações, consulte criar uma nova conta gratuita do Azure.

Se você usar essa opção, poderá inserir os detalhes do site do Azure e dos recursos do Azure e publicar seu aplicativo.

Para este tutorial, você não precisa usar esta etapa.

Configurar o pacote do aplicativo no Portal do Desenvolvedor

Você pode usar o Portal do Desenvolvedor para configurar o pacote do aplicativo e seus recursos. O Portal do Desenvolvedor é um aplicativo do Teams que simplifica a criação e o registro de um aplicativo. Instale na loja do Teams!

A configuração do pacote do aplicativo inclui:

Importando o pacote do aplicativo para o Portal do Desenvolvedor
Configurando funcionalidades do aplicativo

Importar o pacote do aplicativo no Portal do Desenvolvedor

Para importar o pacote do aplicativo:

Abra o Microsoft Teams.
Selecione o ícone da Loja na barra à esquerda.
Pesquise o Portal do Desenvolvedor na barra de pesquisa e selecione Portal do Desenvolvedor.
Selecione Abrir.

O Portal do Desenvolvedor é aberto.
Selecione a guia Aplicativos .
Selecione Importar aplicativo.
Selecione o pacote do aplicativo helloworldapp.zip no seguinte caminho na estrutura de diretório do repositório de exemplo C#:

<path to cloned C# repo>/Source/Repos/Microsoft-Teams-Samples/samples/app-hello-world/csharp/Microsoft.Teams.Samples.HelloWorld.Web/bin/Debug/netcoreapp3.1

O Olá, Mundo aplicativo é importado no Portal do Desenvolvedor.

Faça um tour pelo seu aplicativo no Portal do Desenvolvedor

Depois de importar seu aplicativo para o Portal do Desenvolvedor, você pode exibir seus detalhes, incluindo o arquivo de manifesto.

Exibir informações do aplicativo

Selecione Informações Básicas no painel esquerdo do Portal do Desenvolvedor.
Observe as seguintes informações das informações básicas:
- ID do aplicativo
- Informações do desenvolvedor
- URLs do aplicativo
Selecione Identidade Visual no painel esquerdo para exibir as informações de identidade visual.

Esses detalhes serão importantes se você estiver escrevendo um novo aplicativo para distribuição.

Exibir recursos do aplicativo

Selecione Recursos do aplicativo no painel esquerdo do Portal do Desenvolvedor.

Os recursos do aplicativo aparecem no painel direito. Você pode exibir cartões para aplicativo pessoal, Bot e Extensão de Mensagem.

Exibir o manifesto do aplicativo

Use o arquivo de manifesto para configurar recursos, recursos necessários e outros atributos importantes para seu aplicativo.

Para exibir o manifesto do aplicativo:

Selecione Publicar no painel esquerdo para abrir a lista suspensa e, em seguida, selecione Pacote do aplicativo.

O arquivo de manifesto aparece no painel direito.

Configurar os recursos do aplicativo

Depois de importar seu aplicativo para o Portal do Desenvolvedor, a próxima etapa é configurar os recursos do aplicativo. O Portal do Desenvolvedor contém todas as informações do aplicativo em seções diferentes. Isso facilita a configuração dos recursos do aplicativo.

Usando o Portal do Desenvolvedor, você pode:

Configurar o aplicativo de guia pessoal
Configurar bot
Configurar a extensão de mensagem

Configurar o aplicativo de guia pessoal

Para configurar o aplicativo de guia pessoal:

Selecione o ícone no cartão de aplicativo Pessoal no painel Recursos do aplicativo e selecione Editar.

Os detalhes da guia Olá são exibidos.
Selecione o ícone da guia Olá e selecione Editar para abrir os detalhes do aplicativo para atualização.
Insira os detalhes do aplicativo para a guia Olá em Adicionar uma guia ao seu aplicativo pessoal.

Insira os seguintes detalhes:
- Nome: guia Olá.
- URL de conteúdo e URL do site: o endereço de encaminhamento na sessão do console do ngrok.
- Contexto: selecione a guia Pessoal.
Selecione Atualizar.

Os detalhes da guia Olá aparecem no painel Aplicativo Pessoal.
Selecione Salvar.

O painel Aplicativo Pessoal agora mostra a nova guia e uma guia Sobre criada automaticamente.

Configurar bot

É fácil adicionar a funcionalidade de bots ao seu aplicativo. O Olá, Mundo de exemplo já tem um bot como parte, mas você deve registrá-lo no Teams.

Imagem mostrando o aplicativo de bot importado sem nenhuma ID do aplicativo

O bot que foi importado do exemplo não tem uma ID de aplicativo associada. Você precisará excluí-lo e criar um bot. O Portal do Desenvolvedor cria uma nova ID de aplicativo e a registra no Teams.

Adicionar e configurar um bot envolve:

Adicionando um novo bot
Adicionando bot ao aplicativo
Configurando o escopo do bot

Para adicionar um novo bot

Selecione o ícone no cartão bot no painel recursos do aplicativo e selecione Excluir.
Selecione Ferramentas para adicionar funcionalidade.
Selecione Gerenciamento de Bot no painel Ferramentas.
Selecione + Novo Bot no painel de gerenciamento de Bot.
Insira um nome adequado para o bot e selecione Adicionar.

O painel Configurar é exibido mostrando detalhes do novo bot no painel esquerdo.
Insira a URL de encaminhamento no ngrok console e selecione Salvar.
Selecione Segredos do cliente e, em seguida, selecione Adicionar um segredo do cliente ao bot para gerar uma senha para o bot.

O Portal do Desenvolvedor gera uma senha para o bot.

Você pode usar o ícone para copiar a senha. Para este tutorial, você não precisa copiá-lo.
Selecione OK.
Selecione < Bots para retornar ao painel de gerenciamento de Bot.

O painel de gerenciamento de bot mostra o novo Bot adicionado com uma ID do aplicativo.
Salve a ID do Bot juntamente com a senha da seção Segredo do cliente.

Para adicionar bot ao aplicativo

Abra o painel Recursos do aplicativo e selecione o cartão do Bot .

O painel Bot é exibido.
Selecione seu aplicativo de bot em Selecionar um bot existente.

O novo bot é adicionado ao seu aplicativo com sua própria ID de aplicativo.

Para configurar o escopo do bot

Selecione o ícone no novo cartão do Bot e selecione Editar.
Mova-se pelo painel Bot para exibir a seção Comandos e selecione + Adicionar um Comando.
Insira um nome e uma descrição adequados para o Comando.
Selecione todos os três escopos para o comando e selecione Adicionar.
- Pessoal
- Equipe
- Chat em grupo
O novo comando é adicionado à seção Comandos do painel Bot .
Selecione Salvar.

Os detalhes do comando são salvos.
Abra o painel Recursos do aplicativo e selecione Cartão de aplicativo pessoal para exibir os detalhes da guia do aplicativo.

Você verá que uma guia para o novo chatbot é adicionada ao seu aplicativo.

Configurar a extensão de mensagem

As extensões de mensagem permitem que os usuários solicitem informações do seu serviço e postem essas informações. As informações são postadas na forma de cartões na conversa do canal. As extensões de mensagem aparecem na parte inferior da caixa de redação.

Para adicionar uma nova extensão de mensagem:

Selecione o ícone no cartão extensão de mensagem no painel recursos do aplicativo e selecione Excluir.
Selecione Extensão de Mensagem no painel Recursos do aplicativo.
Selecione o nome do aplicativo de bot na lista suspensa Selecionar um bot existente no painel Extensão de mensagem.
Selecione Salvar.

A extensão de mensagem é salva e a seção Comandos aparece no painel Extensão de mensagem.
Selecione + Adicionar um comando para definir o escopo do que seu aplicativo de extensão de mensagem pode fazer.
Verifique se a Pesquisa está selecionada como o tipo de comando que você deseja adicionar na caixa de diálogo Adicionar um comando .
Insira as informações adequadas nos seguintes detalhes:
- ID do comando
- Título do comando
- Descrição do comando
Percorrer a caixa de diálogo para exibir os detalhes restantes.
Verifique se Make default está selecionado.
Selecione os seguintes contextos para o comando de extensão de mensagem:
- Caixa de comando
- Caixa de redação
- Mensagem
Insira informações adequadas para os seguintes detalhes:
- Nome do parâmetro
- Título do parâmetro
- Descrição do parâmetro
Selecione Texto como o tipo de entrada.
Selecione Salvar.
O comando de extensão de mensagem é salvo e aparece na lista de comandos no painel Extensão de mensagem.
Selecione Salvar.
Abra o painel recursos do aplicativo.

Você verá todos os três recursos – aplicativo de guia pessoal, bot e extensão de mensagem – configurados para o Olá, Mundo aplicativo. A próxima etapa é registrar seu aplicativo no Teams e testar seu aplicativo.