Depurar para dispositivos móveis

Ao criar um aplicativo Microsoft Teams que inclui uma guia, bot ou extensão de mensagem, você deve depurar seu aplicativo para saber como ele funciona em clientes móveis do Microsoft Teams Android e iOS. Para obter mais informações, consulte depurar seu aplicativo do Teams localmente.

Confira o vídeo a seguir para saber como depurar seu aplicativo do Teams em clientes móveis:

Depurar seu aplicativo de guia

Para depurar seu aplicativo de guia, siga estas etapas:

Você pode exibir as pastas e arquivos do projeto no Explorer no Microsoft Visual Visual Studio Code.

  1. Adicione Start local tunnel depois Validate prerequisites no task.json arquivo para tornar o aplicativo da guia acessível no cliente móvel.

  2. Adicione o seguinte código após task.json a propriedade dependsOrder no arquivo.

    {
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Start Teams App Locally",
      "dependsOn": [
        "Validate prerequisites",
        "Start local tunnel", // Add this line
        "Provision",
        "Deploy",
        "Start application"
      ],
      "dependsOrder": "sequence"
    },
    {
      // Add this task
      "label": "Start local tunnel",
      "type": "teamsfx",
      "command": "debug-start-local-tunnel",
      "args": {
        "type": "dev-tunnel",
        "ports": [
          {
            "portNumber": 53000,
            "protocol": "https",
            "access": "private",
            "writeToEnvironmentFile": {
              "endpoint": "TAB_ENDPOINT",
              "domain": "TAB_DOMAIN"
            }
          }
        ],
        "env": "local"
      },
      "isBackground": true,
      "problemMatcher": "$teamsfx-local-tunnel-watch"
    }
  ]
}

    Observação

    • Para visualizar o aplicativo de guia somente no cliente móvel, defina o valor da access propriedade como private.
    • Quando o valor de acesso ao túnel de desenvolvimento é definido como private, o aplicativo de guia não pode ser exibido em um iframe no cliente Web. A página de logon está hospedada no login.microsoftonline.com, que tem o X-FRAME-Options cabeçalho definido como DENY.
    • Para visualizar o aplicativo de guia no cliente móvel e depurá-lo em clientes Web, defina o valor de acesso como public. Qualquer usuário com a URL do aplicativo pode visitar a guia.

  3. Remova TAB_DOMAIN e TAB_ENDPOINT do m365agents.local.yml arquivo.

    - uses: script 
  with:
    run:
      echo "::set-teamsfx-env TAB_DOMAIN=localhost:53000";
      echo "::set-teamsfx-env TAB_ENDPOINT=https://localhost:53000";

  4. Se você estiver usando o React, adicione a configuração WDS_SOCKET_PORT=0 no m365agents.local.yml arquivo para ativar o recarregamento dinâmico durante a depuração no React após utilizar o serviço de encapsulamento.

      - uses: file/createOrUpdateEnvironmentFile
    with:
      target: ./.localConfigs
      envs:
        BROWSER: none
        HTTPS: true
        PORT: 53000
        SSL_CRT_FILE: ${{SSL_CRT_FILE}}
        SSL_KEY_FILE: ${{SSL_KEY_FILE}}
        REACT_APP_CLIENT_ID: ${{AAD_APP_CLIENT_ID}} 
        REACT_APP_START_LOGIN_PAGE_URL: ${{TAB_ENDPOINT}}/auth-start.html 
        WDS_SOCKET_PORT: 0

  5. Executar o aplicativo implantado

    1. Abra o painel de depuração (Ctrl+Shift+D ou Exibir > Execução) do Visual Studio Code.

    2. Selecione Iniciar Remoto no Teams (Edge) na lista suspensa de configuração de lançamento.

    3. Selecione o botão Iniciar Depuração (F5).

      A captura de tela mostra como iniciar o aplicativo remotamente.

    4. Selecione Adicionar para carregar o aplicativo personalizado no Teams.

      Captura de tela da caixa de diálogo de detalhes do aplicativo para adicionar o aplicativo de guia ao Teams.

    5. Selecione Abrir.

      Captura de tela da caixa de diálogo de seleção de escopo para abrir o aplicativo no escopo pessoal.

      O aplicativo é aberto como uma guia pessoal.

      A captura de tela mostra a página do aplicativo de guia pessoal.

Tive um problema

Testar seu aplicativo de guia no cliente móvel

  1. Para encontrar o aplicativo de visualização, abra o Teams em seu dispositivo móvel e selecione Mais.

    A captura de tela mostra a opção mais no cliente móvel do Teams.

    Observação

    Se você já depurou o aplicativo anteriormente, recomendamos que limpe o cache no dispositivo móvel para garantir a sincronização imediata do aplicativo. Depois de limpar o cache, o aplicativo leva algum tempo para sincronizar.

Para limpar os dados do aplicativo Teams, vá para Configurações>Limpar dadosdoaplicativo Teams > .

A captura de tela mostra como limpar os dados do aplicativo no cliente móvel iOS para a guia.

  1. Se você estiver acessando o túnel de desenvolvimento pela primeira vez, entre na conta do Microsoft 365 e selecione continuar.

    A captura de tela mostra a página de entrada do Microsoft 365.

    Observação

    Você precisa fazer login apenas uma vez por dispositivo e, toda vez que instalar o aplicativo, precisará confirmar a página anti-phishing.

  2. Seu primeiro aplicativo de guia móvel é criado.

    A captura de tela mostra o aplicativo da guia móvel.

  3. Para dispositivos Android, use o DevTools para depurar sua guia enquanto ela está em execução.

Testar seu aplicativo bot no cliente móvel

  1. Para testar o bot no cliente móvel, siga as etapas listadas em Testar o aplicativo de guia no cliente móvel para o bot.

    Observação

    Se você depurou o aplicativo bot anteriormente e o arquivo de manifesto do aplicativo (anteriormente chamado de manifesto do aplicativo do Teams) foi alterado, recomendamos limpar o cache no dispositivo móvel para garantir a sincronização imediata do aplicativo. Depois de limpar o cache, o aplicativo leva algum tempo para sincronizar.

Para limpar os dados do aplicativo Teams, vá para Configurações>Limpar dadosdoaplicativo Teams > .

A captura de tela mostra como limpar os dados do aplicativo no cliente móvel iOS para bot.

  1. Seu primeiro aplicativo de bot móvel é criado.

    A captura de tela mostra o aplicativo bot no cliente móvel.

  • Last updated on