Exercício – Criar uma extensão de mensagem

Concluído

Neste exercício, vai criar uma solução de extensão de mensagem. Utilize o Teams Toolkit no Visual Studio para criar os recursos necessários e, em seguida, inicie uma sessão de depuração e teste no Microsoft Teams.

Criar um projeto de extensão de mensagem

Comece por criar um novo projeto de aplicação do Microsoft Teams configurado com uma extensão de mensagem que contém um comando de pesquisa. Embora possa criar um projeto com um modelo de projeto do Teams Toolkit for Visual Studio, é necessário fazer alterações ao projeto estruturado para poder concluir este módulo. Em vez disso, utiliza um modelo de projeto personalizado que está disponível como um pacote NuGet. A vantagem de utilizar um modelo personalizado é criar uma solução com os ficheiros e dependências necessários, poupando-lhe tempo.

Numa sessão do PowerShell:

1. Comece por instalar o pacote de modelo a partir do NuGet ao executar:

   dotnet new install M365Advocacy.Teams.Templates
   

2. Crie um novo projeto ao executar:

   dotnet new teams-msgext-search --name "ProductsPlugin" `
     --internal-name "msgext-products" `
     --display-name "Contoso products" `
     --short-description "Product look up tool." `
     --full-description "Get real-time product information and share them in a conversation." `
     --command-id "Search" `
     --command-description "Find products by name" `
     --command-title "Products" `
     --parameter-name "ProductName" `
     --parameter-title "Product name" `
     --parameter-description "The name of the product as a keyword" `
     --allow-scripts Yes
   

3. Aguarde até que o projeto seja criado.

4. Altere para o diretório do projeto ao executar cd ProductsPlugin.

5. Abra a solução no Visual Studio ao executar .\ProductsPlugin.sln.

Criar um túnel Dev

Quando o utilizador interage com a sua extensão de mensagem, o serviço Bot envia pedidos para o serviço Web. Durante o desenvolvimento, o serviço Web é executado localmente no seu computador. Para permitir que o serviço Bot chegue ao seu serviço Web, tem de expô-lo para além do seu computador através de um túnel Dev.

Continuar no Visual Studio:

1. Na barra de ferramentas, selecione o menu pendente junto ao botão Iniciar , expanda o menu Túneis de Programador (sem túnel ativo) e selecione Criar um Túnel...
2. Na caixa de diálogo, especifique os seguintes valores:
   1. Conta: selecione uma conta à sua escolha
   2. Nome: msgext-products
   3. Tipo de Túnel: Temporário
   4. Acesso: Público
3. Crie o túnel ao selecionar OK. É apresentado um pedido a indicar que o novo túnel é agora o túnel ativo atual
4. Feche o pedido ao selecionar OK

Preparar recursos

Com tudo agora implementado, com o Teams Toolkit, execute o processo Preparar Dependências de Aplicações do Teams para criar os recursos necessários.

O processo Preparar Dependências de Aplicações do Teams atualiza as variáveis de ambiente BOT_ENDPOINT e BOT_DOMAIN no ficheiro TeamsApp\env\.env.local com o URL do túnel de Programador ativo e executa as ações descritas no ficheiro TeamsApp\teamsapp.local.yml .

Dedique algum tempo a explorar os passos no ficheiro teamsapp.local.yml .

Continuar no Visual Studio:

1. Abra o menu Projeto (em alternativa, pode selecionar o projeto TeamsApp no Explorador de Soluções), expanda o menu Do Teams Toolkit e selecione Preparar Dependências de Aplicações do Teams
2. Na caixa de diálogo conta do Microsoft 365 , inicie sessão ou selecione uma conta existente para aceder ao inquilino do Microsoft 365 e, em seguida, selecione Continuar
3. Na caixa de diálogo Aprovisionar, inicie sessão ou selecione uma conta existente a utilizar para implementar recursos no Azure e especifique os seguintes valores:
   1. Nome da subscrição: utilize a lista pendente para selecionar uma subscrição
   2. Grupo de recursos: selecione Novo... para abrir uma caixa de diálogo, na caixa de texto, introduza rg-msgext-products-local e selecione OK
   3. Região: utilize o menu pendente para selecionar a região mais próxima de si
4. Crie os recursos no Azure ao selecionar Aprovisionar
5. No pedido de aviso do Teams Toolkit, selecione Aprovisionar
6. No pedido de informações do Teams Toolkit, selecione Ver recursos aprovisionados para abrir uma nova janela do browser.

Explore os recursos criados no Azure e veja também as variáveis de ambiente criadas no ficheiro .env.local .

Observação

Quando fecha e reabre o Visual Studio, o URL do túnel Dev será alterado e deixará de ser selecionado como o túnel ativo. Se isto acontecer, terá de selecionar novamente o túnel e executar o processo Preparar Dependências de Aplicações do Teams para refletir o URL atualizado no manifesto da aplicação.

Executar e depurar

O Teams Toolkit utiliza perfis de iniciação de vários projetos. Para executar o projeto, tem de ativar uma funcionalidade de pré-visualização no Visual Studio.

No Visual Studio:

1. Abra o menu Ferramentas e selecione Opções...
2. Na caixa de pesquisa, introduza vários projetos
3. Em Ambiente, selecione Funcionalidades de Pré-visualização
4. Selecione a caixa junto a Ativar Perfis de Iniciação de Vários Projetos e selecione OK para guardar as alterações.

Por predefinição, o Visual Studio irá abrir uma janela do browser com o seu perfil principal do Microsoft Edge. Se optou por utilizar uma conta do Microsoft 365 durante o processo Preparar Dependências de Aplicações do Teams diferente da conta que utiliza no seu perfil principal, recomenda-se que configure o Visual Studio para iniciar uma janela do browser que utilize um perfil específico do Microsoft Edge. Isto garante que a conta correta e o inquilino do Microsoft 365 são utilizados ao testar a sua aplicação.

Para configurar o Visual Studio para utilizar um perfil específico do Microsoft Edge:

No Microsoft Edge:

1. Mude para o perfil que pretende utilizar ou crie um novo perfil.
2. Navegue para edge://version e anote o valor ProfilePath . Se o caminho do perfil for C:\Utilizadores\utilizador\AppData\Local\Microsoft\Edge\User Data\Profile1, o Perfil 1 é o nome do diretório do perfil.
3. Copie o nome do diretório do perfil, por exemplo , Perfil 1.

No Visual Studio:

1. Na barra de ferramentas, selecione o menu pendente junto ao botão Iniciar e selecione Procurar com...

2. Selecione Adicionar...

3. Na caixa de diálogo Adicionar programa, especifique os seguintes valores:

   1. Programa: C:\Programas (x86)\Microsoft\Edge\Application\msedge.exe
   2. Argumentos: --profile-directory="Perfil 1", substituindo Perfil 1 pelo nome do diretório do perfil que pretende utilizar
   3. Nome amigável: Microsoft Edge (Nome do Perfil), substituindo Nome do Perfil pelo nome do perfil que pretende utilizar

4. Selecione OK

5. Selecione Predefinir e, em seguida, selecione Cancelar

Para iniciar uma sessão de depuração e instalar a aplicação no Microsoft Teams:

1. Prima F5 ou selecione Iniciar na barra de ferramentas
2. Aguarde até que seja aberta uma janela do browser e a caixa de diálogo de instalação da aplicação seja apresentada no cliente Web do Microsoft Teams. Se lhe for pedido, introduza as credenciais da sua conta do Microsoft 365.
3. Na caixa de diálogo de instalação da aplicação, selecione Adicionar

Para testar a extensão da mensagem:

1. Abrir uma nova conversa do Microsoft Teams ou existente
2. Na área de composição de mensagens, selecione + para abrir o seletor de aplicações
3. Na lista de aplicações, selecione Produtos Contoso para abrir a extensão de mensagem
4. Na caixa de texto, introduza olá
5. Aguarde até que os resultados da pesquisa sejam apresentados
6. Na lista de resultados, selecione olá para incorporar um cartão na caixa de mensagem de composição

Regresse ao Visual Studio e selecione Parar na barra de ferramentas ou prima Shift + F5 para parar a sessão de depuração.