Tutorial - Criar uma Aplicação de Gestão de Tarefas - Teams

O conector do Microsoft Teams é uma aplicação de gestão de tarefas de exemplo model-View-Controller (MVC) e gerada com o modelo de aplicação Web ASP.NET. A maior parte do código está relacionada com a configuração básica do MVC ou o sistema de gestão de tarefas. Pode adicionar o conector existente para os Grupos do Microsoft 365 ou criar um novo no Teams.

Tipos de códigos de conector

ConnectorController.cs: configurar e guardar ações.
TaskController.cs: criar e atualizar ações.

Principais funcionalidades do conector do Microsoft Teams

Simula o sistema de gestão de tarefas real.
Permite que os utilizadores criem e vejam tarefas.
Gera conteúdo aleatoriamente.
Simula a notificação a enviar para o canal do Microsoft Teams.

Este guia passo a passo ajuda-o a criar e testar um conector no Microsoft Teams. Verá o seguinte resultado:

Captura de ecrã a mostrar a saída do conector da Equipa de compilação depois de ter concluído com êxito o guia passo a passo.

Pré-requisitos

10 minutos restantes

Certifique-se de que instala as seguintes ferramentas e configura o seu ambiente de desenvolvimento:

	Instalar	Para usar...
	Microsoft Teams	Microsoft Teams para colaborar com todas as pessoas com quem trabalha através de aplicações para chat, reuniões e chamadas num único local.
	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.
	SDK .NET Core	Enlaces personalizados para depuração local e implementações de aplicações das Funções do Azure. Utilize a versão mais recente ou instale a versão portátil.
	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`).

Observação

Depois de transferir o ngrok, inscreva-se e instale o authtoken.

Configurar o ambiente local

9 minutos restantes

Abra Microsoft-Teams-Samples.
Selecione Código.
No menu pendente, selecione Abrir com o GitHub Desktop.
Selecione Clonar.

Habilitar a visualização do desenvolvedor

8 minutos restantes

Ative o carregamento de aplicações na consola de administração do seu inquilino.
1. Acessar o Centro de administração do Microsoft 365 com suas credenciais de administrador.
2. No painel esquerdo, selecione Mostrar Tudo.
3. Selecione Teams.
No painel esquerdo, selecione Aplicações do Teams.
Selecione Políticas de configuração.
Selecione Global (predefinição em toda a organização).
Ative o botão de alternar Carregar aplicações personalizadas .
Selecione Salvar.

O inquilino de teste pode agora permitir o carregamento de aplicações personalizadas.

Dica

O carregamento de aplicações personalizadas demora algum tempo a tornar-se ativo.
Aceda ao Microsoft Teams.
No canto superior direito do Teams, selecione ....
Selecione Sobre>Visualização do desenvolvedor.
Selecione Mudar para pré-visualização do programador.

Configurar o conector

7 minutos restantes

Abra TeamsToDoAppconnector.sln no Visual Studio a partir do repositório clonado.

Criar um túnel
- túnel dev
- ngrok
1. Abra o Visual Studio.
2. Selecione Criar um novo projeto.
3. Na caixa de pesquisa, introduza ASP.NET. Nos resultados da pesquisa, selecione ASP.NET Core Web App.
4. Selecione Avançar.
5. Introduza Nome do projeto e selecione Seguinte.
6. Selecione Criar.
  
  É apresentada uma janela de descrição geral.
7. 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.
8. 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.
9. Selecione OK.
  
  É apresentada uma janela de pop-up que mostra que o túnel dev foi criado com êxito.
10. Selecione OK.
  
  Pode encontrar o túnel que criou na lista pendente de depuração da seguinte forma:
11. Selecione F5 para executar a aplicação no modo de depuração.
12. Se for apresentada uma caixa de diálogo Aviso de Segurança , selecione Sim.
  
  Uma janela pop-up será exibida.
13. Selecione Continuar.
  
  A home page do túnel dev é aberta numa nova janela do browser e o túnel dev está agora ativo.
14. Aceda ao Visual Studio e selecione Ver > Saída.
15. 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.
Aceda ao Portal do Programador do Conector.
Selecione Novo Conector.
Introduza os seguintes detalhes para registar um novo conector:
- Nome do conector.
- Logótipo
- Breve descrição da sua aplicação (10 palavras ou menos).
- Descrição detalhada do que o Conector faz (3 a 5 frases).
- Site da empresa.
- Página de configuração do Conector como https://[BASE_URI]/connector/setup.
- Defina Domínios válidos como https>//[Base URI].
- Selecione Sim para ativar a ação nos cartões do Conector.
- Defina o URL de Ações como https://[BASE_URI]/Task/Update.
- Selecione Aceito os termos e condições do Contrato de Programador de Aplicações.
- Selecione Salvar.
Registou com êxito um novo conector. A janela é apresentada com o ID do conector registado.

Dica

Guarde o ID do Conector para referência futura.
Abra o ficheiro TeamsToDoAppConnector.csproj a partir do repositório clonado.
No seu repositório clonado, aceda a Microsoft-Teams-Samples samples>>connector-todo-notification>csharp.
Abra o ficheiro appsettings.json no Visual Studio e efetue as seguintes atualizações.
- Substitua por BASE_URLngork URL ou dev tunnel URL.
- Substitua CONNECTOR_ID pelo ID do conector criado.
No seu repositório clonado, aceda a Microsoft-Teams-Samples samples>>connector-todo-notification>csharp>TeamsAppPackages.
Abra o ficheiro manifest.json no Visual Studio e faça as seguintes alterações:
- Substitua CONNECTOR_ID pelo ID do conector criado.
- Substitua pelo VALID-DOMAIN seu domínio de túnel ngrok OR dev, excluindo https://.
Pressione F5 para executar o projeto. É aberta uma página Web.

Testar o conector no Microsoft Teams

6 minutos restantes

Crie um ficheiro .zip com os seguintes ficheiros que estão presentes na pasta Manifesto :
- manifest.json
- outline-icon.png
- color-icon.png
Aceda ao Microsoft Teams.
1. No painel esquerdo, selecione o ícone Aplicações .
2. Selecione Gerenciar seus aplicativos.
3. Selecione Carregar uma aplicação.
4. Procure a opção Carregar uma aplicação personalizada.
Selecione o ficheiro .zip que criou na pasta Manifesto e selecione Abrir.
Selecione Adicionar a uma equipa.
Selecione o nome da equipa ou do canal na lista.
Selecione Configurar um conector.
No painel esquerdo, procure no conector ToDo do Teams na barra de pesquisa e selecione Configurar.
Selecione Criado ou Atualizado na página de registo e selecione Guardar.

Após a configuração, pode ver a notificação no canal com ligação para o Portal do Gestor de Tarefas.
Aceda ao Portal do Gestor de Tarefas.
Selecione Criar Novo.
Introduza os detalhes da nova tarefa:
- Título
- Descrição
- Atribuir a
Selecione Salvar.

O cartão de mensagem é apresentado no canal do Teams registado.

Dica

Pode experimentar os botões acionáveis disponíveis no cartão de mensagem.