Depuração para dispositivos móveis

  • Artigo

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

Confira o vídeo a seguir para saber como depurar seu aplicativo 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 em Explorer no Visual Studio Code.

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

  2. Adicione o código a seguir após a propriedade dependsOrder no task.json 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 apenas no cliente móvel, defina o valor da propriedade como accessprivate.
    • 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.

    A captura de tela mostra a página de logon.

  3. Remova TAB_DOMAIN e TAB_ENDPOINT do teamsapp.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 React, adicione a configuração WDS_SOCKET_PORT=0 no teamsapp.local.yml arquivo para ativar o recarga quente durante a depuração em React depois de utilizar o serviço de túnel.

      - 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

Executar o aplicativo implantado

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

  2. Selecione Iniciar Remoto (Edge) na lista suspensa de configuração de inicialização.

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

    A captura de tela mostrando como iniciar o aplicativo remotamente.

Você será solicitado a carregar o aplicativo de lado no Teams. Selecione Adicionar.

A captura de tela mostrando um aplicativo sendo instalado.

Testar seu aplicativo de guia no cliente móvel

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

    A captura de tela mostra mais opções no cliente móvel do Teams.

    Observação

    Se você tiver depurado o aplicativo anteriormente, é recomendável 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, acesse Configurações Equipes>>Limpar Dados de Aplicativo.

    A captura de tela mostrando para limpo os dados do aplicativo no cliente móvel do iOS para guia.

  2. 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 mostrando a página de entrada do Microsoft 365.

    Observação

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

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

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

  4. Para dispositivos Android, use 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 seu aplicativo de guia no cliente móvel do bot.

    Observação

    Se um que você depurou o aplicativo bot anteriormente e o manifesto do aplicativo (anteriormente chamado de manifesto do aplicativo teams) for 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, acesse Configurações Equipes>>Limpar Dados de Aplicativo.

    A captura de tela mostrando para limpo os dados do aplicativo no cliente móvel iOS para bot.

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

    A captura de tela mostrando a depuração do aplicativo bot no cliente móvel.