Exercício – Criar uma aplicação de separador do Microsoft Teams

  • 10 minutos

Nesta unidade, irá criar uma aplicação de separador para o Microsoft Teams com a extensão Teams Toolkit for Visual Studio Code.

Observação

Os exercícios neste módulo utilizam o Teams Toolkit v5.0.0.

Criar a sua aplicação de separador Teams

  1. Abra o Visual Studio Code.

  2. Na barra lateral, selecione o ícone do Microsoft Teams para abrir o painel TEAMS TOOLKIT .

  3. Selecione Criar uma Nova aplicação e, em seguida, selecione Separador.

    Captura de ecrã que mostra as seleções para criar uma nova aplicação do Teams no Visual Studio Code.

  4. Selecione Separador Básico na lista de opções disponíveis.

    Captura de ecrã que mostra a seleção de um tipo de separador de aplicação no Visual Studio Code.

  5. Para a linguagem de programação, selecione JavaScript.

  6. No menu da pasta Área de Trabalho , selecione Pasta predefinida. O Teams Toolkit estruturará o projeto nesta pasta.

  7. Em Nome da aplicação, introduza CustomerTicketingTool.

    Captura de ecrã que mostra a caixa para introduzir um nome de aplicação no Visual Studio Code.

    É apresentada uma notificação quando todas as pastas e ficheiros são estruturados com êxito.

Após a estrutura bem-sucedida do projeto, é aberta uma nova instância do Visual Studio Code para o novo projeto.

Captura de ecrã que mostra ficheiros e pastas num projeto estruturado com êxito.

No painel EXPLORER , a pasta src contém o código fonte da sua aplicação. Todas as pastas na pasta src são específicas do código do browser e servem como pontos de entrada para a aplicação de front-end. Os ficheiros fora da pasta src estão relacionados com o servidor, como o bot.

Testar e depurar a sua aplicação de separador Teams

  1. No Visual Studio Code, selecione o ícone do Microsoft Teams para abrir o painel TEAMS TOOLKIT .

    Captura de ecrã a mostrar a extensão Do Teams Toolkit aberta no Visual Studio Code.

    Existem várias secções aqui. Para depurar o separador, irá concentrar-se nas secções CONTAS e AMBIENTE .

  2. Na secção CONTAS , selecione Iniciar sessão no Azure. Na caixa de diálogo que é aberta, selecione o botão Iniciar sessão e introduza as suas credenciais do Microsoft 365.

    O Teams Toolkit requer uma conta escolar ou profissional do Microsoft 365 com privilégios de Administrador Global.

  3. Comece a executar a aplicação com o depurador anexado através de um destes métodos:

    • Pressione a tecla F5.
    • No Visual Studio Code, selecione Executar>Iniciar depuração.
    • Na secção AMBIENTE do Teams Toolkit, abra a pasta local e, em seguida, selecione o browser à sua escolha.

  4. Depois de o Visual Studio Code efetuar algumas verificações, com ações visíveis no separador Consola , é aberta uma nova janela do browser. Na caixa de diálogo CustomerTicketingTool , selecione o botão Adicionar para instalar a aplicação no Teams para pré-visualização.

    Captura de ecrã que mostra o botão para adicionar uma aplicação ao Microsoft Teams.

    A aplicação CustomerTicketingTool está agora visível na barra lateral. A aplicação está pré-configurada com dois separadores: Separador Pessoal e Acerca de.

    Captura de ecrã que mostra a criação com êxito de um separador pessoal.

Adicionou com êxito o separador pessoal ao Teams.

Personalizar o separador Teams

Agora, pode personalizar o texto no separador pessoal.

  1. Abra a pasta devistassrc> e, em seguida, abra o ficheiro hello.html.
  2. Procure o texto Olá, Mundo e altere-o para Parabéns.

Captura de ecrã que mostra o ficheiro para alterar o texto do separador.

Para ver as alterações no Teams, volte ao browser onde a sua sessão de depurador está em execução. Não precisava de atualizar o browser para ver as alterações efetuadas ao seu código. O texto no seu separador pessoal diz agora Parabéns.

Captura de ecrã que mostra o texto alterado no separador pessoal.

O Teams Toolkit for Visual Studio Code fornece uma funcionalidade de recarregamento frequente, que aplica as suas alterações enquanto a sua aplicação ainda está em execução.