Criar um plug-in de extensão de mensagem baseada em bot para Microsoft 365 Copilot
Observação
- O plug-in de extensão de mensagem de pesquisa baseado em bot está disponível na pré-visualização pública do programador.
- Apenas a extensão de mensagem de pesquisa baseada em bot pode ser expandida como um plug-in Microsoft 365 Copilot.
- Os plug-ins para Microsoft 365 Copilot estão em pré-visualização e só funcionam em Microsoft 365 Copilot no Microsoft Teams.
Inicie o desenvolvimento de aplicações do Microsoft Teams com a sua primeira aplicação Teams. Pode criar um plug-in de extensão de mensagem baseado em bot com o Teams através de JavaScript.
Neste tutorial, irá aprender:
- Como configurar um novo projeto com o Teams Toolkit.
- Como criar um plug-in de extensão de mensagem baseado em bot.
- Como implementar a sua aplicação.
- Acione o plug-in da extensão de mensagem baseada em bot no Microsoft 365 Copilot.
Este guia passo a passo ajuda-o a criar um plug-in de extensão de mensagens baseado em bot com o Teams Toolkit. Verá o seguinte resultado depois de concluir este guia:
Pré-requisitos
Certifique-se de que instala as seguintes ferramentas para criar e implementar as suas aplicações.
| Instalar | Para usar... | |
|---|---|---|
| Required | ||
| Visual Studio Code | JavaScript ou TypeScript, crie ambientes. Utilize a versão mais recente. | |
| Kit de ferramentas do Teams | O Microsoft Visual Studio Code extensão que cria um projeto estruturado para a sua aplicação. Utilize a versão de pré-lançamento. | |
| Node.js | Ambiente de runtime do JavaScript de back-end. Para obter mais informações, veja Node.js tabela de compatibilidade de versões para o tipo de projeto. | |
| Microsoft Teams | Microsoft Teams para colaborar com todas as pessoas com quem trabalha através de aplicações para chat, reuniões e ligar para todos num único local. | |
| Microsoft Edge (recomendado) ou Google Chrome | Um navegador com ferramentas de desenvolvedor. | |
| Conta de programador do Microsoft 365 | Acesso à conta do Teams com as permissões adequadas para instalar uma aplicação. | |
| Microsoft 365 Copilot | Microsoft 365 Copilot está em pré-visualização pública. Certifique-se de que Microsoft 365 Copilot está disponível para a sua organização. Tem duas formas de obter um ambiente de programador para Microsoft 365 Copilot: - Um inquilino do Microsoft 365 do Sandbox com Microsoft 365 Copilot (disponível em pré-visualização limitada através da associação tap). - Um ambiente de produção de clientes empresariais com licenças Microsoft 365 Copilot. |
|
| Opcional | ||
| Ferramentas do Azure para Visual Studio Code e CLI do Azure | Ferramentas do Azure para aceder a dados armazenados ou implementar um back-end baseado na cloud para a sua aplicação Teams no Azure. | |
| ferramentas de programador React para Chrome OU ferramentas de programador React para o Microsoft Edge | Uma extensão DevTools do browser para a biblioteca JavaScript de React open source. |
Preparar o ambiente de desenvolvimento
Depois de instalar as ferramentas necessárias, configure o ambiente de desenvolvimento.
Instalar o Teams Toolkit
Observação
O suporte do Teams Toolkit para a extensão de mensagens baseada em bot só está disponível na versão de pré-lançamento do Teams Toolkit. Antes de começar, certifique-se de que instalou uma versão de pré-lançamento do Teams Toolkit.
O Microsoft Teams Toolkit ajuda a simplificar o processo de desenvolvimento com ferramentas para aprovisionar e implementar recursos na cloud para a sua aplicação e publicar na Loja Teams.
Pode utilizar o Teams Toolkit com Visual Studio Code. Para instalar o Teams Toolkit, siga estes passos:
Abra Visual Studio Code e selecione Extensões (Ctrl+Shift+X / ⌘⇧-X ou Ver > Extensões).
Na caixa de pesquisa, introduza Teams Toolkit.
Na página Teams Toolkit, selecione a seta pendente junto a Instalar.
Selecione Instalar Versão de Pré-lançamento.
O ícone do Toolkit
do Teams é apresentado na Barra de Atividade do Visual Studio Code após a instalação.
Configurar o seu inquilino de desenvolvimento do Teams
Um inquilino é um espaço ou contentor para a sua organização no Teams, onde conversa, partilha ficheiros e executa reuniões. Este espaço também é onde carrega e testa a sua aplicação. Vamos verificar se está pronto para programar com o inquilino.
Verificar a opção carregar uma aplicação
Depois de criar o aplicativo, você deve carregar seu aplicativo no Teams sem distribuí-lo. Este processo é conhecido como carregamento de aplicações. Inicie sessão na sua conta do Microsoft 365 para ver esta opção.
Observação
Certifique-se de que ativa o carregamento de aplicações para pré-visualizar e testar aplicações no ambiente local do Teams.
O carregamento de aplicações personalizados é ativado através de um inquilino e o administrador tem de conceder acesso para carregar uma aplicação personalizada. Já tem um inquilino e um acesso de administrador? Vamos marcar se realmente o fizer!
Verifique se pode carregar aplicações no Teams:
No cliente do Teams, selecione o ícone Aplicações .
Selecione Gerenciar seus aplicativos.
Selecione Carregar uma aplicação.
Procure a opção Carregar uma aplicação personalizada. Se a opção estiver visível, ativou o carregamento de aplicações personalizadas.
Observação
Contacte o administrador do Teams se não encontrar a opção para carregar uma aplicação personalizada.
Criar um inquilino gratuito para programadores do Teams (opcional)
Se não tiver uma conta de programador do Teams, pode obtê-la gratuitamente. Adira ao programa de programador do Microsoft 365!
Selecione Aderir Agora e siga as instruções apresentadas no ecrã.
No ecrã de boas-vindas, selecione Configurar a subscrição E5.
Configurar a conta de administrador. Depois de terminar, é apresentado o ecrã seguinte.
Inicie sessão no Teams com a conta de administrador que acabou de configurar. Verifique se tem a opção Carregar uma aplicação personalizada no Teams.
Obter uma conta gratuita do Azure
Se quiser alojar a sua aplicação ou aceder a recursos no Azure, tem de ter uma subscrição do Azure. Crie uma conta gratuita antes de começar.
Agora, tem todas as ferramentas para configurar a sua conta. Em seguida, vamos configurar o seu ambiente de desenvolvimento e começar a criar! Selecione a aplicação que pretende criar primeiro.
Criar uma área de trabalho de projeto para a sua aplicação de extensão de mensagem
Criou a sua aplicação de bot. Agora, vamos criar a sua primeira aplicação de extensão de mensagem.
A capacidade de extensão de mensagens permite-lhe interagir com um serviço Web. Utilize a área de composição, a caixa de comando ou uma mensagem no cliente do Teams para procurar e iniciar ações num sistema externo.
Existem dois tipos de extensões de mensagens do Teams:
- Comandos de pesquisa: pode procurar sistemas externos. Em seguida, pode inserir os respetivos resultados numa mensagem sob a forma de um card.
- Comandos de ação: pode apresentar aos seus utilizadores um pop-up modal para recolher ou apresentar informações. Em seguida, pode processar a respetiva interação e enviar informações de volta para o Teams.
Vamos criar uma extensão de mensagem com um comando de pesquisa. Utilize-os para procurar dados externos e inserir os resultados numa mensagem no cliente do Teams.
Como já se preparou para criar estas aplicações, pode configurar um novo projeto do Teams para criar a aplicação de extensão de mensagem.
Observação
- As extensões de mensagens dependem de bots para fornecer uma caixa de diálogo entre o utilizador e o seu código.
- Apenas a extensão da mensagem de pesquisa baseada em bot pode ser expandida como um plug-in para Microsoft 365 Copilot.
Neste tutorial, irá aprender:
- Como configurar um novo projeto de extensão de mensagens com o Teams Toolkit.
- Acerca da estrutura de diretórios do seu projeto de aplicação.
Criar a área de trabalho do projeto de extensão de mensagem
Se os pré-requisitos estiverem implementados, vamos começar!
Para criar um plug-in de extensão de mensagem baseada em bot, siga estes passos:
Abra o Visual Studio Code.
Selecione o ícone Do Teams Toolkit
na Barra de Atividade do Visual Studio Code.Selecione Criar uma Nova Aplicação.
Selecione Extensão de Mensagem para criar uma aplicação com o Toolkit do Teams.
Selecione Resultados de Pesquisa Personalizados.
Selecione Começar com um Bot.
Selecione JavaScript como linguagem de programação.
Selecione Pasta predefinida para armazenar a pasta raiz do projeto na localização predefinida.
Também pode alterar a localização predefinida através dos seguintes passos:
Selecione Procurar.
Selecione a localização da área de trabalho do projeto.
Selecione a opção Selecionar Pasta.
Introduza um nome adequado para a sua aplicação. Selecione Enter.
O Teams Toolkit cria a aplicação dentro de alguns segundos.
Após a criação da sua aplicação, o Toolkit do Teams apresenta a seguinte mensagem:
Pode selecionar Depuração local para pré-visualizar o projeto.
Uma recapitulação rápida da criação de uma aplicação do Teams.
Veja esta breve recapitulação para criar uma aplicação do Teams.
Ver uma apresentação do código fonte da aplicação de extensão de mensagem
Uma extensão de mensagem utiliza o Bot Framework. Pode utilizá-lo para interagir com o seu serviço através de uma conversação. Após a conclusão dos andaimes, veja os diretórios e ficheiros do projeto na área de Explorer de Visual Studio Code.
| Pasta/Ficheiro | Conteúdos |
|---|---|
teamsapp.yml |
O ficheiro de projeto principal descreve a configuração da aplicação e define o conjunto de ações a executar em cada fase do ciclo de vida. |
teamsapp.local.yml |
Isto substitui teamsapp.yml por ações que permitem a execução local e a depuração. |
.vscode/ |
Ficheiros VS Code para depuração local. |
src/ |
O código fonte da aplicação de pesquisa. |
appPackage/ |
Modelos para o manifesto de aplicação do Teams. |
infra/ |
Modelos para aprovisionar recursos do Azure. |
src/searchApp.js |
Processa a lógica de negócio deste modelo de aplicação para consultar o registo npm e devolver a lista de resultados. Para obter mais informações, consulte o Guia do Teams Toolkit Visual Studio Code v5 para compreender como funciona o Teams Toolkit. |
src/index.js |
index.js é utilizado para configurar e configurar a Extensão de Mensagem. Para obter mais informações, consulte o Guia do Teams Toolkit Visual Studio Code v5 para compreender como funciona o Teams Toolkit. |
Dica
Familiarize-se com bots e a extensão de mensagens fora do Teams antes de integrar a sua aplicação no Teams.
Criar e executar o seu primeiro plug-in de extensão de mensagem baseada em bot
Depois de configurar a área de trabalho do projeto com o Teams Toolkit, crie o seu projeto. Tem de iniciar sessão na sua conta do Microsoft 365.
Iniciar sessão na sua conta do Microsoft 365
Utilize esta conta para iniciar sessão no Teams. Se estiver a utilizar um inquilino do programa de programador do Microsoft 365, a conta de administrador que configurou durante o registo é a sua conta do Microsoft 365.
Abra o Visual Studio Code.
Selecione o ícone Do Teams Toolkit
na barra lateral.Selecione Iniciar sessão no Microsoft 365 com as suas credenciais.
O browser predefinido é aberto para lhe permitir iniciar sessão na conta.
Feche o browser quando lhe for pedido e regresse ao Visual Studio Code.
Regresse ao Teams Toolkit no Visual Studio Code.
A secção CONTAS da barra lateral mostra o nome da sua conta do Microsoft 365. O Toolkit do Teams apresenta Sideloading ativado se o carregamento de aplicações personalizadas estiver ativado para a sua conta do Microsoft 365.
Agora, está pronto para criar a aplicação e executá-la localmente!
Criar e executar a sua aplicação no ambiente local
Uma extensão de mensagem permite-lhe interagir com um serviço Web. Tira partido da funcionalidade de mensagens e da comunicação segura de um bot. A aplicação de extensão de mensagem é adicionada a um serviço Web registado como um bot.
Criar e executar a sua aplicação localmente
No painel esquerdo, selecione Executar e Depurar (Ctrl+Shift+D).
Selecione Depurar no Teams (Edge) ou Depurar no Teams (Chrome). O Teams Toolkit inicia a sua aplicação no Teams através de um browser.
Selecione F5 para compilar e executar a sua aplicação localmente.
Observação
Se o Teams Toolkit não conseguir marcar um pré-requisito específico, é-lhe pedido para marcar.
Saiba o que acontece quando executa a sua aplicação localmente no depurador.
Quando seleciona F5, o Teams Toolkit:
- Verifica todos os seguintes pré-requisitos:
- Tem sessão iniciada com uma conta do Microsoft 365.
- O carregamento de aplicações personalizadas está ativado para a sua conta do Microsoft 365.
- Suportada Node.js versão está instalada.
- A porta necessária para a aplicação de bot está disponível.
- Instalar pacotes npm
- Inicia o Túnel de Programador para criar um túnel HTTP.
- Regista a aplicação no Microsoft Entra ID e configura a aplicação.
- Regista a aplicação de bot no Bot Framework e configura a aplicação.
- Regista a aplicação no Portal do Programador do Teams e configura a aplicação.
- Inicia a aplicação de extensão de mensagem alojada localmente.
- Inicia o Teams num browser e carrega a aplicação Teams.
Observação
Quando executa a aplicação pela primeira vez, todas as dependências são transferidas e a aplicação é criada. É aberta uma janela do browser quando a compilação está concluída. Este processo pode demorar entre três a cinco minutos a ser concluído.
Selecione Adicionar. A aplicação está instalada no Teams.
Uma vez que as extensões de mensagens dependem de bots para permitir a comunicação entre o utilizador e o serviço Web, a sua aplicação é carregada para uma funcionalidade de chat de um bot.
- Se tiver criado uma aplicação de bot antes de criar a aplicação de extensão de mensagem, pode ver que está carregada na mesma aplicação de bot que criou. As mensagens de chat anteriores estão visíveis.
- Se tiver criado primeiro uma extensão de mensagem, a sua aplicação é carregada em qualquer conversa aberta no Teams.
Observação
Se quiser expandir a sua aplicação para o Outlook e o Microsoft 365, pode optar por depurar a sua aplicação com o Outlook e o Microsoft 365 a partir da lista pendente EXECUTAR E DEPURAR no Visual Studio Code.
Testar seu aplicativo
Quando a sua aplicação é carregada pela primeira vez, a aplicação de extensão de mensagem é aberta para que possa testar. Esta aplicação de exemplo permite-lhe procurar pacotes npm open source a partir do registo de software.
Para executar uma consulta de pesquisa
Aceda a um chat do Teams e selecione Ações e aplicações.
No menu de lista de opções da extensão de mensagem, introduza o nome da sua extensão de mensagem na caixa de pesquisa.
Selecione a extensão da mensagem e introduza a consulta de pesquisa.
Selecione um produto na lista. O Teams desajusta o produto num Cartão Ajustável na área de Compose de mensagens.
Selecione Enviar. O Cartão Ajustável é enviado.
Saiba como resolver problemas se a sua aplicação não for executada localmente.
Para executar a sua aplicação no Teams, tem de ter uma conta de desenvolvimento do Microsoft 365 que permita o carregamento de aplicações personalizadas. Pode saber mais sobre o carregamento de aplicações personalizadas na secção de pré-requisitos.
Acionar o plug-in da extensão de mensagens baseadas no bot no Microsoft 365 Copilot
Para acionar a extensão de mensagem no Microsoft 365 Copilot, siga estes passos:
No painel esquerdo, selecione Teams Toolkit.
No painel esquerdo, selecione Executar e Depurar (Ctrl+Shift+D).
Selecione Depurar no Copilot (Edge) ou Depurar no Copilot (Chrome).
Selecione F5 para criar e executar a sua aplicação no Microsoft 365 Copilot.
Aceda a Aplicações do Microsoft Teams>.
Procure Copilot e abra a aplicação.
Selecione Plug-ins.
Na lista de plug-ins, ative o botão de alternar para a sua aplicação.
Na área de composição de mensagens, envie uma mensagem para Microsoft 365 Copilot para procurar informações do pacote npm no Teams e Microsoft 365 Copilot. Por exemplo, localize as informações do pacote npm no teamsfx-react em npm-searchlocal.
Observação
Este pedido pode nem sempre fazer Microsoft 365 Copilot incluir uma resposta da sua extensão de mensagem. Se isso acontecer, experimente outros pedidos ou deixe-nos comentários ao analisar a resposta Microsoft 365 Copilot e deixe uma mensagem.
Implementar a sua primeira aplicação teams
Aprendeu a criar, criar e executar a aplicação Teams com capacidades de extensão de mensagens. O passo final é implementar a sua aplicação no Azure.
Vamos implementar a primeira aplicação de extensão de mensagens no Azure com o Teams Toolkit.
Iniciar sessão na sua conta do Azure
Utilize esta conta para aceder ao Microsoft portal do Azure e para aprovisionar novos recursos na cloud para suportar a sua aplicação.
Abra o Visual Studio Code.
Abra a pasta do projeto na qual criou a aplicação de extensão de mensagem.
Selecione o ícone Do Teams Toolkit
na barra lateral.Selecione Iniciar sessão no Azure com as suas credenciais.
Dica
Se tiver a extensão conta do AZURE instalada e estiver a utilizar a mesma conta, pode ignorar este passo. Utilize a mesma conta que está a utilizar noutras extensões.
O browser predefinido é aberto para lhe permitir iniciar sessão na conta.
Feche o browser quando lhe for pedido e regresse ao Visual Studio Code.
A secção CONTAS da barra lateral mostra as duas contas separadamente. Também lista o número de subscrições utilizáveis do Azure disponíveis para si. Certifique-se de que tem, pelo menos, uma subscrição utilizável do Azure disponível. Caso contrário, termine sessão e utilize uma conta diferente.
Parabéns, iniciou sessão na sua conta do Azure! Agora, vamos continuar e aprender a implementar uma das aplicações no Azure com o Teams Toolkit.
Implantar seu aplicativo no Azure.
A implementação consiste em dois passos. Em primeiro lugar, são criados os recursos da cloud necessários (também conhecidos como aprovisionamento). Em seguida, o código da sua aplicação é copiado para os recursos da cloud criados. Neste tutorial, irá implementar a aplicação de extensão de mensagens.
Qual é a diferença entre Aprovisionar e Implementar?
O passo Aprovisionamento cria recursos no Azure e no Microsoft 365 para a sua aplicação, mas nenhum código (HTML, CSS, JavaScript, etc.) é copiado para os recursos. O passo Implementar copia o código da sua aplicação para os recursos que criou durante o passo de aprovisionamento. É comum implementar várias vezes sem aprovisionar novos recursos. Uma vez que o passo de aprovisionamento pode demorar algum tempo a ser concluído, é separado do passo de implementação.
Selecione o ícone do Kit de Ferramentas do Teams na barra Visual Studio Code lateral.
Selecione Aprovisionar.
Selecione uma subscrição a utilizar para os recursos do Azure.
A sua aplicação é alojada com os recursos do Azure. Uma caixa de diálogo avisa-o de que podem ser incorridos custos ao executar recursos no Azure.
Selecione Aprovisionar.
O processo de aprovisionamento cria recursos na cloud do Azure. Pode demorar algum tempo. Pode monitorizar o progresso ao ver as caixas de diálogo no canto inferior direito. Após alguns minutos, verá o seguinte aviso:
Se quiser, pode ver os recursos aprovisionados. Para este tutorial, não precisa de ver recursos.
O recurso aprovisionado é apresentado na secção AMBIENTE .
Selecione Implementar no painel CICLO DE VIDA depois de o aprovisionamento estar concluído.
Tal como acontece com o aprovisionamento, a implementação demora algum tempo. Pode monitorizar o processo ao ver as caixas de diálogo no canto inferior direito. Após alguns minutos, verá um aviso de conclusão.
Agora, pode utilizar o mesmo processo para implementar as aplicações Bot e Extensão de Mensagens no Azure.
Executar a aplicação implementada
Assim que os passos de aprovisionamento e implementação estiverem concluídos:
Abra o painel de depuração (Ctrl+Shift+D / ⌘⇧-D ou Ver Execução>) a partir de Visual Studio Code.
Selecione Iniciar Remoto (Edge) na lista pendente iniciar configuração.
Selecione Iniciar depuração (F5) para iniciar a sua aplicação a partir do Azure.
Selecione Adicionar.
Saiba o que acontece quando implementou a sua aplicação no Azure
Antes da implantação, o aplicativo era executado localmente:
- O back-end é executado usando o Azure Functions Core Tools.
- O ponto de extremidade HTTP do aplicativo, onde o Microsoft Teams carrega o aplicativo, é executado localmente.
A implementação é um processo de dois passos. Aprovisiona os recursos numa subscrição ativa do Azure e, em seguida, implementa ou carrega o código de back-end e front-end da aplicação para o Azure.
- O back-end, se configurado, utiliza vários serviços do Azure, incluindo o Serviço de Aplicativo do Azure e o Armazenamento do Azure.
- A aplicação de front-end é implementada numa conta de Armazenamento do Azure configurada para alojamento web estático.
Parabéns!
Criou uma extensão de mensagem baseada em bot e expandiu a extensão da mensagem como um plug-in Microsoft 365 Copilot.
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.