Debug delle app Google Chat

Node.js

Python

Java

Node.js

• Versioni più recenti di node e npm installato nel tuo ambiente locale.

• La versione più recente di nodemon installata nel tuo paese , viene utilizzato per il ricaricamento automatico:

  npm install -g nodemon
  

• Un'app di chat HTTP configurata per i messaggi. Puoi seguire le sezioni Prerequisiti Imposta il dell'ambiente di rete, e pubblica l'app su Google Chat del Guida rapida. L'unico differenze è che devi impostare Nome app su Debug App e l'URL dell'app a un elemento, ad esempio http://example.com.

• Un IDE configurato nel tuo ambiente locale in grado di eseguire il debug. Utilizziamo Visual Studio Code IDE e le sue impostazioni predefinite le funzionalità di debug in questa guida a scopo illustrativo.

• Git installato nel tuo ambiente locale.

• Un account ngrok.

Python

• Ultima versione di python3 installato nel tuo ambiente locale.
• La versione più recente di pip e virtualenv installata in nell'ambiente locale, vengono utilizzati per gestire pacchetti Python ambienti operativi.
• Un'app di chat HTTP configurata per i messaggi. Puoi seguire le sezioni Prerequisiti Imposta il dell'ambiente di rete, e pubblica l'app su Google Chat del Guida rapida. L'unico differenze è che devi impostare Nome app su Debug App e l'URL dell'app a un elemento, ad esempio http://example.com.
• Un IDE configurato nel tuo ambiente locale in grado di eseguire il debug. Utilizziamo Visual Studio Code IDE e le sue impostazioni predefinite le funzionalità di debug in questa guida a scopo illustrativo.
• Git installato nel tuo ambiente locale.
• Un account ngrok.
• Ultima versione di gcloud installato e inizializzato dell'ambiente locale.

Java

• Ultima versione stabile di Java SE 11's JDK installato nel tuo completamente gestito di Google Cloud.
• Ultima versione di Apache Maven installato nel tuo ambiente locale, per gestire i progetti Java.
• Un'app di chat HTTP configurata per i messaggi. Puoi seguire le sezioni Prerequisiti Imposta il dell'ambiente di rete, e pubblica l'app su Google Chat del Guida rapida. L'unico differenze è che devi impostare Nome app su Debug App e l'URL dell'app a un elemento, ad esempio http://example.com.
• Un IDE configurato nel tuo ambiente locale in grado di eseguire il debug. Utilizziamo Visual Studio Code IDE e le sue impostazioni predefinite le funzionalità di debug in questa guida a scopo illustrativo.
• Git installato nel tuo ambiente locale.
• Un account ngrok.
• Ultima versione di gcloud installato e inizializzato dell'ambiente locale.

Node.js

1. Clona il repository googleworkspace/google-chat-samples da GitHub al tuo ambiente locale, contiene il codice dell'applicazione esegui:

   git clone https://github.com/googleworkspace/google-chat-samples.git
   

2. Dall'IDE Visual Studio Code installato nel tuo ambiente locale: segui questi passaggi:

   1. In una nuova finestra, apri la cartella google-chat-samples/node/basic-app.

   2. Configura l'applicazione per il debug del ricaricamento automatico aggiungendo due script nel file package.json:

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      

   3. Installa l'applicazione dalla directory root:

      npm install
      

   4. Crea e configura un lancio denominato Debug Watch che attivi il script debug-watch creando il file .vscode/launch.json in nella directory radice:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      

   5. Aggiungi un punto di interruzione che metta in pausa l'elaborazione della richiesta HTTP nel index.js e iniziare a eseguire e il debug con Configurazione Debug Watch aggiunta prima. L'applicazione è ora in esecuzione e in ascolto delle richieste HTTP sulla porta 9000.

      

      Figura 3. L'applicazione è in esecuzione e rimane in ascolto del protocollo HTTP richieste sulla porta 9000.

3. Avvia l'applicazione ngrok nel tuo ambiente locale:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Sostituisci NGROK_STATIC_DOMAIN con il dominio statico in il tuo account ngrok. Tutte le richieste vengono ora reindirizzate al tuo indirizzo e la porta usata dall'applicazione.

   

   Figura 4. Il terminale con il server ngrok in esecuzione e reindirizzato.

4. Il ngrok avvia anche un'interfaccia web sul tuo localhost applicazione, puoi monitorare tutte le attività aprendola in un browser.

   

   Figura 5. Interfaccia web ospitata dall'applicazione ngrok che non mostra richieste HTTP.

5. Testa la tua app di Chat inviandole un link diretto messaggio:

   • Apri Google Chat.

     Vai a Google Chat

   • Fai clic su Nuova chat add.

   • Nella finestra di dialogo, inserisci il nome del Chat.

   • Nei risultati di ricerca, trova l'app Chat. fai clic su Aggiungi > Chatta.

   • Nello spazio del messaggio diretto, digita Hello e premi enter. Il tuo L'app Chat non risponde perché sta di cui è stato eseguito il debug attivo.

6. In Visual Studio Code nel tuo ambiente locale, puoi vedere che l'esecuzione è in pausa nel punto di interruzione impostato.

   

   Figura 6. L'esecuzione è in pausa nel punto di interruzione impostato.

7. Quando riprendi l'esecuzione dal debugger di Visual Studio Code prima che Google Chat scada il timeout dell'app Chat risposte Your message : Hello.

8. Puoi controllare i log delle richieste e delle risposte HTTP dall'interfaccia web ospitato dall'applicazione ngrok nel tuo ambiente locale.

   

   Figura 7. La richiesta HTTP dall'interfaccia web ospitata dal Applicazione ngrok.

9. Per modificare il comportamento dell'applicazione, sostituisci Your message con Here was your message in linea 35 di index.json. Se salvi il file, nodemon ricarica automaticamente l'applicazione con aggiornato il codice sorgente e Visual Studio Code rimane in modalità di debug.

   

   Figura 8. L'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta 9000 con la modifica del codice caricata.

10. Questa volta, invece di inviare un secondo messaggio Hello nello spazio, è possibile selezionare l'ultima richiesta HTTP registrata nell'interfaccia web ospitata l'applicazione ngrok nel tuo ambiente locale e fai clic su Replay. Come l'ultima volta, l'app Chat non risponde perché è in fase di debug attivo.

11. Quando riprendi l'esecuzione dal debugger di Visual Studio Code puoi vedere nell'interfaccia web ospitata dall'applicazione ngrok in del tuo ambiente locale con cui l'applicazione genera una risposta la versione aggiornata del messaggio Here was your message : Hello.

Python

1. Acquisisci nuove credenziali utente da utilizzare per App predefinita Credenziali:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

   Sostituisci PROJECT_ID con ID progetto per il progetto Cloud dell'app.

2. Clona il repository googleworkspace/google-chat-samples da GitHub al tuo ambiente locale, contiene il codice dell'applicazione:

   git clone https://github.com/googleworkspace/google-chat-samples.git
   

3. Dall'IDE Visual Studio Code installato nel tuo ambiente locale: segui questi passaggi:

   1. In una nuova finestra, apri la cartella google-chat-samples/python/avatar-app.

   2. Crea un nuovo ambiente virtuale per Python env e attivalo:

      virtualenv env
      source env/bin/activate
      

   3. Installa tutte le dipendenze del progetto utilizzando pip nella macchina virtuale questo ambiente:

      pip install -r requirements.txt
      

   4. Crea il file .vscode/launch.json nella directory principale e configura un lancio denominato Debug Watch che attiva l'applicazione dal modulo functions-framework sulla porta 9000 in modalità di debug sull'ambiente virtuale env:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "python",
              "request": "launch",
              "name": "Debug Watch",
              "python": "${workspaceFolder}/env/bin/python3",
              "module": "functions_framework",
              "args": [
                  "--target", "avatar_app",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. Aggiungi un punto di interruzione che metta in pausa l'elaborazione della richiesta HTTP nel main.py e iniziare a eseguire e il debug con Configurazione Debug Watch aggiunta prima. L'applicazione è ora in esecuzione e in ascolto delle richieste HTTP sulla porta 9000.

      

      Figura 3. L'applicazione è in esecuzione e rimane in ascolto del protocollo HTTP richieste sulla porta 9000.

4. Avvia l'applicazione ngrok nel tuo ambiente locale:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Sostituisci NGROK_STATIC_DOMAIN con il dominio statico in il tuo account ngrok. Tutte le richieste vengono ora reindirizzate al tuo indirizzo e la porta usata dall'applicazione.

   

   Figura 4. Il terminale con il server ngrok in esecuzione e reindirizzato.

5. Il ngrok avvia anche un'interfaccia web sul tuo localhost applicazione, puoi monitorare tutte le attività aprendola in un browser.

   

   Figura 5. Interfaccia web ospitata dall'applicazione ngrok che non mostra richieste HTTP.

6. Testa la tua app di Chat inviandole un link diretto messaggio:

   • Apri Google Chat.

     Vai a Google Chat

   • Fai clic su Nuova chat add.

   • Nella finestra di dialogo, inserisci il nome del Chat.

   • Nei risultati di ricerca, trova l'app Chat. fai clic su Aggiungi > Chatta.

   • Nello spazio del messaggio diretto, digita Hey! e premi enter. Il tuo L'app Chat non risponde perché è in corso di cui è stato eseguito il debug attivo.

7. In Visual Studio Code nel tuo ambiente locale, puoi vedere che l'esecuzione è in pausa nel punto di interruzione impostato.

   

   Figura 6. L'esecuzione è in pausa nel punto di interruzione impostato.

8. Quando riprendi l'esecuzione dal debugger di Visual Studio Code prima che Google Chat scada il timeout dell'app Chat risposte con il tuo nome e la tua immagine dell'avatar nel messaggio.

9. Puoi controllare i log delle richieste e delle risposte HTTP dall'interfaccia web ospitato dall'applicazione ngrok nel tuo ambiente locale.

   

   Figura 7. La richiesta HTTP dall'interfaccia web ospitata dal Applicazione ngrok.

10. Per modificare il comportamento dell'applicazione, sostituisci Hello con Hey in linea 51 del file main.py. Quando salvi il file, Visual Studio Code ricarica automaticamente l'applicazione con il codice sorgente aggiornato rimane in modalità di debug.

    

    Figura 8. L'applicazione è in esecuzione e rimane in ascolto delle richieste HTTP sulla porta 9000 con la modifica del codice caricata.

11. Questa volta, invece di inviare un secondo messaggio Hey! nello spazio, è possibile selezionare l'ultima richiesta HTTP registrata nell'interfaccia web ospitata l'applicazione ngrok nel tuo ambiente locale e fai clic su Replay. Come l'ultima volta, l'app Chat non risponde perché è in fase di debug attivo.

12. Quando riprendi l'esecuzione dal debugger di Visual Studio Code puoi vedere nell'interfaccia web ospitata dall'applicazione ngrok in del tuo ambiente locale con cui l'applicazione genera una risposta la versione aggiornata del messaggio.

Java

1. Acquisisci nuove credenziali utente da utilizzare per App predefinita Credenziali:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

   Sostituisci PROJECT_ID con ID progetto per il progetto Cloud dell'app.

2. Clona il repository googleworkspace/google-chat-samples da GitHub nel tuo ambiente locale, contiene il codice dell'applicazione:

   git clone https://github.com/googleworkspace/google-chat-samples.git
   

3. Dall'IDE Visual Studio Code installato nel tuo ambiente locale: segui questi passaggi:

   1. In una nuova finestra, apri la cartella google-chat-samples/java/avatar-app.

   2. Configura il progetto Maven su cui eseguire l'applicazione App porta 9000 in locale aggiungendo la build del framework di Cloud Functions plug-in function-maven-plugin nel file pom.xml:

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>App</functionTarget>
              <port>9000</port>
          </configuration>
      </plugin>
      ...
      

   3. Ora puoi avviarlo localmente in modalità di debug:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000
      

   4. Crea il file .vscode/launch.json nella directory principale e configurare un lancio denominato Remote Debug Watch che si collega al dell'applicazione avviata in precedenza con la porta 8000:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      

   5. Aggiungi un punto di interruzione che metta in pausa l'elaborazione della richiesta HTTP nel App.java e inizia ad allegare e il debug con Configurazione Remote Debug Watch aggiunta prima. L'applicazione è ora in esecuzione e in ascolto delle richieste HTTP sulla porta 9000.

      

      Figura 3. L'applicazione è in esecuzione e rimane in ascolto di HTTP richieste sulla porta 9000.

4. Avvia l'applicazione ngrok nel tuo ambiente locale:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   Sostituisci NGROK_STATIC_DOMAIN con il dominio statico in il tuo account ngrok. Tutte le richieste vengono ora reindirizzate al tuo indirizzo e la porta usata dall'applicazione.

   

   Figura 4. Il terminale con il server ngrok in esecuzione e reindirizzato.

5. Il ngrok avvia anche un'interfaccia web sul tuo localhost applicazione, puoi monitorare tutte le attività aprendola in un browser.

   

   Figura 5. Interfaccia web ospitata dall'applicazione ngrok che non mostra richieste HTTP.

6. Testa la tua app di Chat inviandole un link diretto messaggio:

   • Apri Google Chat.

     Vai a Google Chat

   • Fai clic su Nuova chat add.

   • Nella finestra di dialogo, inserisci il nome del Chat.

   • Nei risultati di ricerca, trova l'app Chat. fai clic su Aggiungi > Chatta.

   • Nello spazio del messaggio diretto, digita Hey! e premi enter. Il tuo L'app Chat non risponde perché è in corso di cui è stato eseguito il debug attivo.

7. In Visual Studio Code nel tuo ambiente locale, puoi vedere che l'esecuzione è in pausa nel punto di interruzione impostato.

   

   Figura 6. L'esecuzione è in pausa nel punto di interruzione impostato.

8. Quando riprendi l'esecuzione dal debugger di Visual Studio Code prima che Google Chat scada il timeout dell'app Chat risposte con il tuo nome e la tua immagine dell'avatar nel messaggio.

9. Puoi controllare i log delle richieste e delle risposte HTTP dall'interfaccia web ospitato dall'applicazione ngrok nel tuo ambiente locale.

   

   Figura 7. La richiesta HTTP dall'interfaccia web ospitata dal Applicazione ngrok.

10. Per modificare il comportamento dell'applicazione, sostituisci Hello con Hey in linea 55 del file App.java, riavvia il processo mvnDebug e riavvia Remote Debug Watch per ricollegarlo e riavviarlo il debug.

11. Questa volta, invece di inviare un secondo messaggio Hey! nello spazio, è possibile selezionare l'ultima richiesta HTTP registrata nell'interfaccia web ospitata l'applicazione ngrok nel tuo ambiente locale e fai clic su Replay. Come l'ultima volta, l'app Chat non risponde perché è in fase di debug attivo.

12. Quando riprendi l'esecuzione dal debugger di Visual Studio Code puoi vedere nell'interfaccia web ospitata dall'applicazione ngrok in del tuo ambiente locale con cui l'applicazione genera una risposta la versione aggiornata del messaggio.