Déboguer pour mobile

Vous pouvez afficher les dossiers et fichiers du projet sous Explorer dans Microsoft Visual Studio Code.

1. Ajoutez Start local tunnel après Validate prerequisites dans le task.json fichier pour rendre l’application d’onglet accessible sur le client mobile.

2. Ajoutez le code suivant après la propriété dependsOrder dans le task.json fichier .

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

   Remarque

   • Pour afficher un aperçu de l’application onglet uniquement dans le client mobile, définissez la valeur de la propriété sur accessprivate.
   • Lorsque la valeur d’accès du tunnel de développement est définie sur private, l’application d’onglet ne peut pas être affichée dans un iframe sur le client web. La page de connexion est hébergée sur login.microsoftonline.com, dont l’en-tête X-FRAME-Options est défini sur DENY.
   • Pour afficher un aperçu de l’application onglet sur le client mobile et la déboguer sur des clients web, définissez la valeur d’accès sur public. Tout utilisateur disposant de l’URL de l’application peut accéder à l’onglet.

3. Supprimez TAB_DOMAIN et TAB_ENDPOINT du teamsapp.local.yml fichier.

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

4. Si vous utilisez React, ajoutez la configuration WDS_SOCKET_PORT=0 dans teamsapp.local.yml le fichier pour activer le rechargement à chaud lors du débogage dans React après avoir utilisé le service de tunnel.

     - 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. Exécuter l’application déployée

   1. Ouvrez le panneau de débogage (Ctrl+Maj+D ou Afficher > l’exécution) à partir de Visual Studio Code.
   2. Sélectionnez Lancer à distance dans Teams (Edge) dans la liste déroulante de configuration de lancement.
   3. Sélectionnez le bouton Démarrer le débogage (F5).

   

   4. Vous serez invité à charger une application personnalisée dans Teams. Sélectionnez Ajouter.

      

      L’application s’ouvre sous la forme d’un onglet personnel.

      

1. Accédez à ngrok et inscrivez-vous pour obtenir un compte gratuit ou connectez-vous à votre compte existant.

2. Une fois que vous êtes connecté, dans le volet gauche, sélectionnez Votre authtoken.

3. Copiez la valeur de votre Authtoken.

4. Exécutez le fichier ngrok.exe.

5. Exécutez la commande ngrok http https://localhost:53000 --authtoken=<your-personal-ngrok-authtoken> pour démarrer le service de tunnel local.

6. Dans le env/.env.local fichier , mettez à jour les valeurs de TAB_DOMAIN et TAB_ENDPOINT.

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

7. Exécutez les commandes suivantes dans le répertoire de votre projet :

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

Pour effacer les données de l’application Teams, accédez à Paramètres>Teams>Effacer les données de l’application.

Pour effacer les données de l’application Teams, accédez àParamètres>Teams>Données et stockage>Effacer les données> d’applicationEffacer les données Effacer les données.

Pour effacer les données de l’application Teams, accédez à Paramètres>Teams>Effacer les données de l’application.

Pour effacer les données de l’application Teams, accédez àParamètres>Teams>Données et stockage>Effacer les données> d’applicationEffacer les données Effacer les données.