Fehler in Google Chat-Apps beheben

Node.js

Python

Java

Node.js

• Die aktuellen Versionen von node und npm sind in Ihrer lokalen Umgebung installiert.

• Die aktuelle Version von nodemon ist in Ihrer lokalen Umgebung installiert und wird für die automatische Aktualisierung verwendet:

  npm install -g nodemon

• Eine HTTP-Chat-App, die für Messaging konfiguriert ist. Sie können den Abschnitten Voraussetzungen, Umgebung einrichten und App in Google Chat veröffentlichen der Kurzanleitung folgen. Die einzigen Unterschiede bestehen darin, dass Sie den App-Namen auf Debug App und die HTTP-Endpunkt-URL auf einen beliebigen Wert wie http://example.com festlegen müssen.

• Eine IDE, die in Ihrer lokalen Umgebung eingerichtet ist und mit der Sie Fehler beheben können. In diesem Leitfaden verwenden wir die Visual Studio Code-IDE und ihre standardmäßigen Debugging-Funktionen zur Veranschaulichung.

• Git installiert in Ihrer lokalen Umgebung.

• Ein ngrok-Konto.

Python

• Die aktuelle Version von python3 ist in Ihrer lokalen Umgebung installiert.
• Die aktuelle Version von pip und virtualenv ist in Ihrer lokalen Umgebung installiert. Sie werden verwendet, um Python-Pakete bzw. virtuelle Umgebungen zu verwalten.
• Eine HTTP-Chat-App, die für Messaging konfiguriert ist. Sie können den Abschnitten Voraussetzungen, Umgebung einrichten und App in Google Chat veröffentlichen der Kurzanleitung folgen. Die einzigen Unterschiede bestehen darin, dass Sie den App-Namen auf Debug App und die HTTP-Endpunkt-URL auf einen beliebigen Wert wie http://example.com festlegen müssen.
• Eine IDE, die in Ihrer lokalen Umgebung eingerichtet ist und mit der Sie Fehler beheben können. In diesem Leitfaden verwenden wir die Visual Studio Code-IDE und ihre standardmäßigen Debugging-Funktionen zur Veranschaulichung.
• Git installiert in Ihrer lokalen Umgebung.
• Ein ngrok-Konto.
• Die aktuelle Version von gcloud ist in Ihrer lokalen Umgebung installiert und initialisiert.

Java

• Die neueste stabile Version von Java SE 11's JDK, die in Ihrer lokalen Umgebung installiert ist.
• Die aktuelle Version von Apache Maven ist in Ihrer lokalen Umgebung installiert und wird zum Verwalten von Java-Projekten verwendet.
• Eine HTTP-Chat-App, die für Messaging konfiguriert ist. Sie können den Abschnitten Voraussetzungen, Umgebung einrichten und App in Google Chat veröffentlichen der Kurzanleitung folgen. Die einzigen Unterschiede bestehen darin, dass Sie den App-Namen auf Debug App und den HTTP-Endpunkt-URL-Trigger Nachricht auf einen beliebigen Wert wie http://example.com festlegen müssen.
• Eine IDE, die in Ihrer lokalen Umgebung eingerichtet ist und mit der Sie Fehler beheben können. In diesem Leitfaden verwenden wir die Visual Studio Code-IDE und ihre standardmäßigen Debugging-Funktionen zur Veranschaulichung.
• Git installiert in Ihrer lokalen Umgebung.
• Ein ngrok-Konto.
• Die aktuelle Version von gcloud ist in Ihrer lokalen Umgebung installiert und initialisiert.

Node.js

1. Klonen Sie das Repository googleworkspace/add-ons-samples von GitHub in Ihre lokale Umgebung. Es enthält den Code der auszuführenden Anwendung:

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

2. Gehen Sie in der Visual Studio Code IDE, die in Ihrer lokalen Umgebung installiert ist, so vor:

   1. Öffnen Sie in einem neuen Fenster den Ordner add-ons-samples/node/chat/avatar-app.

   2. Konfigurieren Sie die Anwendung für das Debugging mit automatischem Neuladen, indem Sie der Datei package.json zwei Skripts hinzufügen:

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

   3. Installieren Sie die Anwendung über das Stammverzeichnis:

      npm install

   4. Erstellen und konfigurieren Sie einen Launch mit dem Namen Debug Watch, der das Skript debug-watch auslöst, indem Sie die Datei .vscode/launch.json im Stammverzeichnis erstellen:

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

   5. Fügen Sie einen Haltepunkt hinzu, der die Verarbeitung der HTTP-Anfrage in der Datei index.js pausiert, und starten Sie die Ausführung und das Debugging mit der zuvor hinzugefügten Konfiguration Debug Watch. Die Anwendung wird jetzt ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen.

      

      Abbildung 3: Die Anwendung wird ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen.

3. Starten Sie die ngrok-Anwendung in Ihrer lokalen Umgebung:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Ersetzen Sie NGROK_STATIC_DOMAIN durch die statische Domain in Ihrem ngrok-Konto. Alle Anfragen werden jetzt an Ihre lokale Umgebung und den von der Anwendung verwendeten Port weitergeleitet.

   

   Abbildung 4: Das Terminal, auf dem der ngrok-Server ausgeführt wird und weiterleitet.

4. Außerdem wird auf Ihrem Localhost eine Weboberfläche von der ngrok-Anwendung gestartet, über die Sie alle Aktivitäten in einem Browser verfolgen können.

   

   Abbildung 5: Die von der ngrok-Anwendung gehostete Weboberfläche, auf der keine HTTP-Anfragen angezeigt werden.

5. Testen Sie Ihre Chat-App, indem Sie ihr eine Direktnachricht senden:

   • Öffnen Sie Google Chat.

     Zu Google Chat wechseln

   • Klicken Sie auf Neuer Chat add.

   • Geben Sie im Dialogfeld den Namen Ihrer Chat-App ein.

   • Suchen Sie in den Suchergebnissen nach Ihrer Chat-App, klicken Sie auf Hinzufügen > Chat.

   • Geben Sie im Direktnachrichtenbereich Hello ein und drücken Sie enter. Ihre Chat-App antwortet nicht, weil sie aktiv debuggt wird.

6. In der Visual Studio Code in Ihrer lokalen Umgebung sehen Sie, dass die Ausführung am festgelegten Haltepunkt pausiert wird.

   

   Abbildung 6: Die Ausführung wird am festgelegten Haltepunkt pausiert.

7. Wenn Sie die Ausführung über den Debugger von Visual Studio Code fortsetzen, bevor Google Chat die Chat-App beendet, antwortet die Chat-App auf Ihre Nachricht.

8. Sie können die HTTP-Anfrage- und ‑Antwortprotokolle über die Weboberfläche prüfen, die von der ngrok-Anwendung in Ihrer lokalen Umgebung gehostet wird.

   

   Abbildung 7: Die HTTP-Anfrage über die Weboberfläche, die von der ngrok-Anwendung gehostet wird.

9. Wenn Sie das Verhalten der Anwendung ändern möchten, aktualisieren Sie den Antworttext in der Datei index.js. Wenn Sie die Datei speichern, lädt nodemon die Anwendung automatisch mit dem aktualisierten Quellcode neu und Visual Studio Code bleibt im Debug-Modus.

   

   Abbildung 8. Die Anwendung wird ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen. Die Codeänderung wurde geladen.

10. Anstatt dieses Mal eine zweite Nachricht Hello im Gruppenbereich zu senden, können Sie die letzte HTTP-Anfrage auswählen, die auf der Web-Benutzeroberfläche protokolliert wurde, die von der Anwendung ngrok in Ihrer lokalen Umgebung gehostet wird, und auf Replay klicken. Wie beim letzten Mal antwortet Ihre Chat-App nicht, da sie aktiv debuggt wird.

11. Wenn Sie die Ausführung über den Debugger von Visual Studio Code fortsetzen, können Sie über die Weboberfläche, die von der ngrok-Anwendung in Ihrer lokalen Umgebung gehostet wird, sehen, dass die Anwendung eine Antwort mit der aktualisierten Version der Nachricht generiert.

Python

1. Rufen Sie neue Nutzeranmeldedaten für die Verwendung mit Standardanmeldedaten für Anwendungen ab:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Ersetzen Sie PROJECT_ID durch die Projekt-ID für das Cloud-Projekt der App.

2. Klonen Sie das googleworkspace/add-ons-samples-Repository von GitHub in Ihre lokale Umgebung. Es enthält den Anwendungscode:

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

3. Gehen Sie in der Visual Studio Code-IDE, die in Ihrer lokalen Umgebung installiert ist, so vor:

   1. Öffnen Sie in einem neuen Fenster den Ordner add-ons-samples/python/chat/avatar-app.

   2. Erstellen Sie eine neue virtuelle Umgebung für Python env und aktivieren Sie sie:

      virtualenv env
      source env/bin/activate

   3. Installieren Sie alle Projektabhängigkeiten mit pip in der virtuellen Umgebung:

      pip install -r requirements.txt

   4. Erstellen Sie die Datei .vscode/launch.json im Stammverzeichnis und konfigurieren Sie einen Start mit dem Namen Debug Watch, der die Anwendung über das Modul functions-framework auf Port 9000 im Debugmodus in der virtuellen Umgebung env auslöst:

      {
          "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. Fügen Sie einen Haltepunkt hinzu, der die Verarbeitung der HTTP-Anfrage in der Datei main.py pausiert, und starten Sie die Ausführung und das Debugging mit der zuvor hinzugefügten Konfiguration Debug Watch. Die Anwendung wird jetzt ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen.

      

      Abbildung 3: Die Anwendung wird ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen.

4. Starten Sie die ngrok-Anwendung in Ihrer lokalen Umgebung:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Ersetzen Sie NGROK_STATIC_DOMAIN durch die statische Domain in Ihrem ngrok-Konto. Alle Anfragen werden jetzt an Ihre lokale Umgebung und den von der Anwendung verwendeten Port weitergeleitet.

   

   Abbildung 4: Das Terminal, auf dem der ngrok-Server ausgeführt wird und weiterleitet.

5. Außerdem wird auf Ihrem Localhost eine Weboberfläche von der ngrok-Anwendung gestartet, über die Sie alle Aktivitäten in einem Browser verfolgen können.

   

   Abbildung 5: Die von der ngrok-Anwendung gehostete Weboberfläche, auf der keine HTTP-Anfragen angezeigt werden.

6. Testen Sie Ihre Chat-App, indem Sie ihr eine Direktnachricht senden:

   • Öffnen Sie Google Chat.

     Zu Google Chat wechseln

   • Klicken Sie auf Neuer Chat add.

   • Geben Sie im Dialogfeld den Namen Ihrer Chat-App ein.

   • Suchen Sie in den Suchergebnissen nach Ihrer Chat-App, klicken Sie auf Hinzufügen > Chat.

   • Geben Sie im Direktnachrichtenbereich Hey! ein und drücken Sie enter. Ihre Chat-App antwortet nicht, weil sie aktiv debuggt wird.

7. In der Visual Studio Code in Ihrer lokalen Umgebung sehen Sie, dass die Ausführung am festgelegten Haltepunkt pausiert wird.

   

   Abbildung 6: Die Ausführung wird am festgelegten Haltepunkt pausiert.

8. Wenn Sie die Ausführung über den Debugger von Visual Studio Code fortsetzen, bevor Google Chat die Chat-App beendet, antwortet die Chat-App mit Ihrem Namen und Avatarbild in der Nachricht.

9. Sie können die HTTP-Anfrage- und ‑Antwortprotokolle über die Weboberfläche prüfen, die von der ngrok-Anwendung in Ihrer lokalen Umgebung gehostet wird.

   

   Abbildung 7: Die HTTP-Anfrage über die Weboberfläche, die von der ngrok-Anwendung gehostet wird.

10. Wenn Sie das Anwendungsverhalten ändern möchten, ersetzen Sie Hello in der Datei main.py durch Hey. Wenn Sie die Datei speichern, Visual Studio Codewird die Anwendung automatisch mit dem aktualisierten Quellcode neu geladen und bleibt im Debug-Modus.

    

    Abbildung 8. Die Anwendung wird ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen. Die Codeänderung wurde geladen.

11. Anstatt dieses Mal eine zweite Nachricht Hey! im Gruppenbereich zu senden, können Sie die letzte HTTP-Anfrage auswählen, die auf der Web-Benutzeroberfläche protokolliert wurde, die von der Anwendung ngrok in Ihrer lokalen Umgebung gehostet wird, und auf Replay klicken. Wie beim letzten Mal antwortet Ihre Chat-App nicht, da sie aktiv debuggt wird.

12. Wenn Sie die Ausführung über den Debugger von Visual Studio Code fortsetzen, sehen Sie über die Weboberfläche, die von der ngrok-Anwendung in Ihrer lokalen Umgebung gehostet wird, dass die Anwendung eine Antwort mit der aktualisierten Version der Nachricht generiert.

Java

1. Rufen Sie neue Nutzeranmeldedaten für die Verwendung mit Standardanmeldedaten für Anwendungen ab:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Ersetzen Sie PROJECT_ID durch die Projekt-ID für das Cloud-Projekt der App.

2. Klonen Sie das Repository googleworkspace/add-ons-samples aus GitHub in Ihrer lokalen Umgebung. Es enthält den Anwendungscode:

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

3. Gehen Sie in der Visual Studio Code-IDE, die in Ihrer lokalen Umgebung installiert ist, so vor:

   1. Öffnen Sie in einem neuen Fenster den Ordner add-ons-samples/java/chat/avatar-app.

   2. Konfigurieren Sie das Maven-Projekt so, dass die Anwendung App lokal auf Port 9000 ausgeführt wird. Fügen Sie dazu das Google Cloud Functions Framework-Build-Plug-in function-maven-plugin in der Datei pom.xml hinzu:

      ...
      <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. Sie können die App jetzt lokal im Debug-Modus starten:

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

   4. Erstellen Sie die Datei .vscode/launch.json im Stammverzeichnis und konfigurieren Sie einen Start mit dem Namen Remote Debug Watch, der an die Anwendung angehängt wird, die zuvor mit Port 8000 gestartet wurde:

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

   5. Fügen Sie einen Haltepunkt hinzu, der die Verarbeitung der HTTP-Anfrage in der Datei App.java unterbricht, und beginnen Sie mit dem Anhängen und Debuggen mit der zuvor hinzugefügten Konfiguration Remote Debug Watch. Die Anwendung wird jetzt ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen.

      

      Abbildung 3: Die Anwendung wird ausgeführt und überwacht den Port 9000 auf HTTP-Anfragen.

4. Starten Sie die ngrok-Anwendung in Ihrer lokalen Umgebung:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Ersetzen Sie NGROK_STATIC_DOMAIN durch die statische Domain in Ihrem ngrok-Konto. Alle Anfragen werden jetzt an Ihre lokale Umgebung und den von der Anwendung verwendeten Port weitergeleitet.

   

   Abbildung 4: Das Terminal, auf dem der ngrok-Server ausgeführt wird und weiterleitet.

5. Außerdem wird auf Ihrem Localhost eine Weboberfläche von der ngrok-Anwendung gestartet, über die Sie alle Aktivitäten in einem Browser verfolgen können.

   

   Abbildung 5: Die von der ngrok-Anwendung gehostete Weboberfläche, auf der keine HTTP-Anfragen angezeigt werden.

6. Testen Sie Ihre Chat-App, indem Sie ihr eine Direktnachricht senden:

   • Öffnen Sie Google Chat.

     Zu Google Chat wechseln

   • Klicken Sie auf Neuer Chat add.

   • Geben Sie im Dialogfeld den Namen Ihrer Chat-App ein.

   • Suchen Sie in den Suchergebnissen nach Ihrer Chat-App, klicken Sie auf Hinzufügen > Chat.

   • Geben Sie im Direktnachrichtenbereich Hey! ein und drücken Sie enter. Ihre Chat-App antwortet nicht, weil sie aktiv debuggt wird.

7. In der Visual Studio Code in Ihrer lokalen Umgebung sehen Sie, dass die Ausführung am festgelegten Haltepunkt pausiert wird.

   

   Abbildung 6: Die Ausführung wird am festgelegten Haltepunkt pausiert.

8. Wenn Sie die Ausführung über den Debugger von Visual Studio Code fortsetzen, bevor Google Chat die Chat-App beendet, antwortet die Chat-App mit Ihrem Namen und Avatarbild in der Nachricht.

9. Sie können die HTTP-Anfrage- und ‑Antwortprotokolle über die Weboberfläche prüfen, die von der ngrok-Anwendung in Ihrer lokalen Umgebung gehostet wird.

   

   Abbildung 7: Die HTTP-Anfrage über die Weboberfläche, die von der ngrok-Anwendung gehostet wird.

10. Wenn Sie das Verhalten der Anwendung ändern möchten, ersetzen Sie Hello durch Hey in der Inline-55 der Datei App.java, starten Sie den Prozess mvnDebug neu und starten Sie Remote Debug Watch neu, um das Debugging neu anzuhängen und neu zu starten.

11. Anstatt dieses Mal eine zweite Nachricht Hey! im Gruppenbereich zu senden, können Sie die letzte HTTP-Anfrage auswählen, die auf der Web-Benutzeroberfläche protokolliert wurde, die von der Anwendung ngrok in Ihrer lokalen Umgebung gehostet wird, und auf Replay klicken. Wie beim letzten Mal antwortet Ihre Chat-App nicht, da sie aktiv debuggt wird.

12. Wenn Sie die Ausführung über den Debugger von Visual Studio Code fortsetzen, sehen Sie über die Weboberfläche, die von der ngrok-Anwendung in Ihrer lokalen Umgebung gehostet wird, dass die Anwendung eine Antwort mit der aktualisierten Version der Nachricht generiert.