Debug delle app Google Chat

Node.js

Python

Java

Node.js

• Le ultime versioni di node e npm installate nell'ambiente locale.

• L'ultima versione di nodemon installata nel tuo ambiente locale, utilizzata per la ricarica automatica:

  npm install -g nodemon

• Un'app di chat HTTP configurata per la messaggistica. Puoi seguire le sezioni Prerequisiti, Configura l'ambiente e Pubblica l'app su Google Chat della guida rapida. Le uniche differenze sono che devi impostare il Nome app su Debug App e l'URL dell'endpoint HTTP su un valore qualsiasi, ad esempio http://example.com.

• Un IDE configurato nel tuo ambiente locale in grado di eseguire il debug. In questa guida utilizziamo l'Visual Studio Code IDE e le relative funzionalità di debug predefinite a scopo illustrativo.

• Git installato nel tuo ambiente locale.

• Un account ngrok.

Python

• L'ultima versione di python3 installata nel tuo ambiente locale.
• Le versioni più recenti di pip e virtualenv installate nel tuo ambiente locale, vengono utilizzate per gestire rispettivamente i pacchetti Python e gli ambienti virtuali.
• Un'app di chat HTTP configurata per la messaggistica. Puoi seguire le sezioni Prerequisiti, Configura l'ambiente e Pubblica l'app su Google Chat della guida rapida. Le uniche differenze sono che devi impostare il Nome app su Debug App e l'URL dell'endpoint HTTP su un valore qualsiasi, ad esempio http://example.com.
• Un IDE configurato nel tuo ambiente locale in grado di eseguire il debug. In questa guida utilizziamo l'Visual Studio Code IDE e le relative funzionalità di debug predefinite a scopo illustrativo.
• Git installato nel tuo ambiente locale.
• Un account ngrok.
• L'ultima versione di gcloud installata e inizializzata nel tuo ambiente locale.

Java

• Ultima versione stabile di Java SE 11's JDK installata nel tuo ambiente locale.
• L'ultima versione di Apache Maven installata nel tuo ambiente locale, viene utilizzata per gestire i progetti Java.
• Un'app di chat HTTP configurata per la messaggistica. Puoi seguire le sezioni Prerequisiti, Configura l'ambiente e Pubblica l'app su Google Chat della guida rapida. Le uniche differenze sono che devi impostare il Nome app su Debug App e l'URL dell'endpoint HTTP del trigger Messaggio su un valore qualsiasi, ad esempio http://example.com.
• Un IDE configurato nel tuo ambiente locale in grado di eseguire il debug. In questa guida utilizziamo l'Visual Studio Code IDE e le relative funzionalità di debug predefinite a scopo illustrativo.
• Git installato nel tuo ambiente locale.
• Un account ngrok.
• L'ultima versione di gcloud installata e inizializzata nel tuo ambiente locale.

Node.js

1. Clona il repository googleworkspace/add-ons-samples da GitHub nel tuo ambiente locale. Contiene il codice dell'applicazione da eseguire:

   git clone https://github.com/googleworkspace/add-ons-samples.git

2. Dall'IDE Visual Studio Code installato nel tuo ambiente locale, fai quanto segue:

   1. In una nuova finestra, apri la cartella add-ons-samples/node/chat/avatar-app.

   2. Configura l'applicazione per il debug della ricarica automatica aggiungendo due script nel file package.json:

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

   3. Dalla directory principale, installa l'applicazione:

      npm install

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

      {
          "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 file index.js e avvia l'esecuzione e il debug con la configurazione Debug Watch aggiunta in precedenza. L'applicazione è ora in esecuzione e rimane in attesa delle richieste HTTP sulla porta 9000.

      

      Figura 3. L'applicazione è in esecuzione e rimane in attesa delle richieste HTTP 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 nel tuo account ngrok. Tutte le richieste vengono ora reindirizzate al tuo ambiente locale e alla porta utilizzata dall'applicazione.

   

   Immagine 4. Il terminale con il server ngrok in esecuzione e reindirizzamento.

4. L'applicazione ngrok avvia anche un'interfaccia web su localhost, che puoi aprire in un browser per monitorare tutte le attività.

   

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

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

   • Apri Google Chat.

     Vai a Google Chat

   • Fai clic su Nuova chat add.

   • Nella finestra di dialogo, inserisci il nome dell'app di chat.

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

   • Nello spazio del messaggio diretto, digita Hello e premi enter. La tua app di chat non risponde perché è in fase di debug attivo.

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

   

   Immagine 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, l'app Chat risponde al tuo messaggio.

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

   

   Immagine 7. La richiesta HTTP dall'interfaccia web ospitata dall'applicazione ngrok.

9. Per modificare il comportamento dell'applicazione, aggiorna il testo della risposta nel file index.js. Quando salvi il file, nodemon ricarica automaticamente l'applicazione con il codice sorgente aggiornato e Visual Studio Code rimane in modalità di debug.

   

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

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

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

Python

1. Acquisisci nuove credenziali utente da utilizzare per le credenziali predefinite dell'applicazione:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Sostituisci PROJECT_ID con l'ID progetto del progetto Cloud dell'app.

2. Clona il repository googleworkspace/add-ons-samples da GitHub nel tuo ambiente locale. Contiene il codice dell'applicazione:

   git clone https://github.com/googleworkspace/add-ons-samples.git

3. Dall'IDE Visual Studio Code installato nel tuo ambiente locale, fai quanto segue:

   1. In una nuova finestra, apri la cartella add-ons-samples/python/chat/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 nell'ambiente virtuale:

      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 nell'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 file main.py e avvia l'esecuzione e il debug con la configurazione Debug Watch aggiunta in precedenza. L'applicazione è ora in esecuzione e rimane in attesa delle richieste HTTP sulla porta 9000.

      

      Figura 3. L'applicazione è in esecuzione e rimane in attesa delle richieste HTTP 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 nel tuo account ngrok. Tutte le richieste vengono ora reindirizzate al tuo ambiente locale e alla porta utilizzata dall'applicazione.

   

   Immagine 4. Il terminale con il server ngrok in esecuzione e reindirizzamento.

5. L'applicazione ngrok avvia anche un'interfaccia web su localhost, che puoi aprire in un browser per monitorare tutte le attività.

   

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

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

   • Apri Google Chat.

     Vai a Google Chat

   • Fai clic su Nuova chat add.

   • Nella finestra di dialogo, inserisci il nome dell'app di chat.

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

   • Nello spazio del messaggio diretto, digita Hey! e premi enter. La tua app di chat non risponde perché è in fase di debug attivo.

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

   

   Immagine 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 per l'app Chat risponde 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 ospitata dall'applicazione ngrok nel tuo ambiente locale.

   

   Immagine 7. La richiesta HTTP dall'interfaccia web ospitata dall'applicazione ngrok.

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

    

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

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

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

Java

1. Acquisisci nuove credenziali utente da utilizzare per le credenziali predefinite dell'applicazione:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Sostituisci PROJECT_ID con l'ID progetto del progetto Cloud dell'app.

2. Clona il repository googleworkspace/add-ons-samples da GitHub nel tuo ambiente locale. Contiene il codice dell'applicazione:

   git clone https://github.com/googleworkspace/add-ons-samples.git

3. Dall'IDE Visual Studio Code installato nel tuo ambiente locale, fai quanto segue:

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

   2. Configura il progetto Maven per eseguire l'applicazione App sulla porta 9000 localmente aggiungendo il plug-in di build di Google Cloud Functions Framework 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 radice e configura un avvio denominato Remote Debug Watch che si collega all'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 sospende l'elaborazione della richiesta HTTP nel file App.java e avvia l'allegato e il debug con la configurazione Remote Debug Watch aggiunta in precedenza. L'applicazione è ora in esecuzione e rimane in attesa delle richieste HTTP sulla porta 9000.

      

      Figura 3. L'applicazione è in esecuzione e rimane in attesa delle richieste HTTP 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 nel tuo account ngrok. Tutte le richieste vengono ora reindirizzate al tuo ambiente locale e alla porta utilizzata dall'applicazione.

   

   Immagine 4. Il terminale con il server ngrok in esecuzione e reindirizzamento.

5. L'applicazione ngrok avvia anche un'interfaccia web su localhost, che puoi aprire in un browser per monitorare tutte le attività.

   

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

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

   • Apri Google Chat.

     Vai a Google Chat

   • Fai clic su Nuova chat add.

   • Nella finestra di dialogo, inserisci il nome dell'app di chat.

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

   • Nello spazio del messaggio diretto, digita Hey! e premi enter. La tua app di chat non risponde perché è in fase di debug attivo.

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

   

   Immagine 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 per l'app Chat risponde 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 ospitata dall'applicazione ngrok nel tuo ambiente locale.

   

   Immagine 7. La richiesta HTTP dall'interfaccia web ospitata dall'applicazione ngrok.

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

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

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