Depuración para dispositivos móviles

Al compilar una aplicación de Microsoft Teams que incluye una pestaña, un bot o una extensión de mensaje, debe depurar la aplicación para saber cómo funciona la aplicación en los clientes móviles de Microsoft Teams de Android e iOS. Para obtener más información, vea Depurar la aplicación de Teams localmente.

Vea el siguiente vídeo para obtener información sobre cómo depurar la aplicación de Teams en clientes móviles:

Depuración de la aplicación de pestaña

Para depurar la aplicación de pestaña, siga estos pasos:

Visual Studio Code

Puede ver las carpetas y los archivos del proyecto en el Explorador en microsoft Visual Studio Code.

1. Agregue Start local tunnel after Validate prerequisites en el task.json archivo para que la aplicación de pestaña sea accesible en el cliente móvil.

2. Agregue el código siguiente después de la propiedad dependsOrder en el task.json archivo.

   {
     "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"
       }
     ]
   }
   

   Nota:

   • Para obtener una vista previa de la aplicación de pestaña solo en el cliente móvil, establezca el valor de la access propiedad en private.
   • Cuando el valor de acceso del túnel de desarrollo se establece privateen , la aplicación de tabulación no se puede mostrar dentro de un iframe en el cliente web. La página de inicio de sesión se hospeda en login.microsoftonline.com, que tiene el X-FRAME-Options encabezado establecido en DENY.
   • Para obtener una vista previa de la aplicación de pestaña en el cliente móvil y depurarla en clientes web, establezca el valor publicde acceso en . Cualquier usuario con la dirección URL de la aplicación puede visitar la pestaña.

3. Quite TAB_DOMAIN y TAB_ENDPOINT del teamsapp.local.yml archivo.

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

4. Si usa React, agregue la configuración WDS_SOCKET_PORT=0 en teamsapp.local.yml el archivo para activar la recarga activa durante la depuración en React después de usar el servicio 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 
   

5. Ejecución de la aplicación implementada

   1. Abra el panel de depuración (Ctrl+Mayús+D o Ver > ejecución) desde Visual Studio Code.
   2. Seleccione Iniciar remoto en Teams (Edge) en la lista desplegable de configuración de inicio.
   3. Seleccione el botón Iniciar depuración (F5).

   

   4. Se le pedirá que cargue una aplicación personalizada en Teams. Seleccione Agregar.

      

      La aplicación se abre como una pestaña personal.

      

Línea de comandos

1. Vaya a ngrok y regístrese para obtener una cuenta gratuita o inicie sesión en su cuenta existente.

2. Después de iniciar sesión, en el panel izquierdo, seleccione Su Authtoken.

3. Copie el valor del Authtoken.

4. Ejecute el archivo ngrok.exe.

5. Ejecute el comando ngrok http https://localhost:53000 --authtoken=<your-personal-ngrok-authtoken> para iniciar el servicio de túnel local.

6. En el env/.env.local archivo, actualice los valores de TAB_DOMAIN y TAB_ENDPOINT.

    TAB_DOMAIN=sample-ngrok-id.ngrok.io 
    TAB_ENDPOINT=https://sample-ngrok-id.ngrok.io
   

7. Ejecute los comandos siguientes en el directorio del proyecto:

   1. teamsfx provision --env local
   2. teamsfx deploy --env local
   3. teamsfx preview --env local

Prueba de la aplicación de pestaña en el cliente móvil

1. Para buscar la aplicación de vista previa, abra Teams en el dispositivo móvil y seleccione Más.

   

   Nota:

   Si ha depurado la aplicación anteriormente, se recomienda borrar la memoria caché en el dispositivo móvil para garantizar la sincronización inmediata de la aplicación. Después de borrar la memoria caché, la aplicación tarda algún tiempo en sincronizarse.

iOS

Para borrar los datos de la aplicación de Teams, vaya a Configuración>Teams>Borrar datos de la aplicación.

Android

Para borrar los datos de la aplicación de Teams, vaya aConfiguración> de Teams>Datos y almacenamiento>Borrar datos de la aplicaciónBorrar datos>.

1. Si tiene acceso al túnel de desarrollo por primera vez, inicie sesión en la cuenta de Microsoft 365 y seleccione Continuar.

   

   Nota:

   Debe iniciar sesión solo una vez por dispositivo y, cada vez que instale la aplicación, debe confirmar la página de anti-phishing.

2. Se crea la primera aplicación de pestaña móvil.

   

3. En el caso de los dispositivos Android, use DevTools para depurar la pestaña mientras se ejecuta.

Prueba de la aplicación de bot en el cliente móvil

1. Para probar el bot en el cliente móvil, siga los pasos indicados en Prueba de la aplicación de pestaña en el cliente móvil para el bot.

   Nota:

   Si ha depurado la aplicación de bot anteriormente y se cambia el archivo de manifiesto de aplicación (anteriormente denominado manifiesto de aplicación de Teams), se recomienda borrar la memoria caché en el dispositivo móvil para garantizar la sincronización inmediata de la aplicación. Después de borrar la memoria caché, la aplicación tarda algún tiempo en sincronizarse.

iOS

Para borrar los datos de la aplicación de Teams, vaya a Configuración>Teams>Borrar datos de la aplicación.

Android

Para borrar los datos de la aplicación de Teams, vaya aConfiguración> de Teams>Datos y almacenamiento>Borrar datos de la aplicaciónBorrar datos>.

1. Se crea la primera aplicación de bot móvil.