Fehler in Google Chat-Apps beheben

Node.js

Python

Java

Node.js

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

• Die neueste 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 Nachrichten konfiguriert ist. Weitere Informationen finden Sie in den Abschnitten Voraussetzungen, Umgebung einrichten und App in Google Chat veröffentlichen in der Kurzanleitung. Die einzigen Unterschiede bestehen darin, dass Sie den App-Namen auf Debug App und die App-URL auf einen beliebigen Wert wie z. B. http://example.com festlegen müssen.

• Eine in Ihrer lokalen Umgebung eingerichtete IDE, die Fehler beheben kann. Zur Veranschaulichung verwenden wir in dieser Anleitung die Visual Studio Code-IDE und ihre standardmäßigen Debugging-Features.

• Git in Ihrer lokalen Umgebung installiert ist.

• Ein ngrok-Konto.

Python

• Die neueste Version von python3 ist in Ihrer lokalen Umgebung installiert.
• Die neueste Version von pip und virtualenv, die in Ihrer lokalen Umgebung installiert sind, werden zum Verwalten von Python-Paketen bzw. virtuellen Umgebungen verwendet.
• Eine HTTP-Chat-App, die für Nachrichten konfiguriert ist. Weitere Informationen finden Sie in den Abschnitten Voraussetzungen, Umgebung einrichten und App in Google Chat veröffentlichen in der Kurzanleitung. Die einzigen Unterschiede bestehen darin, dass Sie den App-Namen auf Debug App und die App-URL auf einen beliebigen Wert wie z. B. http://example.com festlegen müssen.
• Eine in Ihrer lokalen Umgebung eingerichtete IDE, die Fehler beheben kann. Zur Veranschaulichung verwenden wir in dieser Anleitung die Visual Studio Code-IDE und ihre standardmäßigen Debugging-Features.
• Git in Ihrer lokalen Umgebung installiert ist.
• 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 ist in Ihrer lokalen Umgebung installiert.
• Die neueste 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 Nachrichten konfiguriert ist. Weitere Informationen finden Sie in den Abschnitten Voraussetzungen, Umgebung einrichten und App in Google Chat veröffentlichen in der Kurzanleitung. Die einzigen Unterschiede bestehen darin, dass Sie den App-Namen auf Debug App und die App-URL auf einen beliebigen Wert wie z. B. http://example.com festlegen müssen.
• Eine in Ihrer lokalen Umgebung eingerichtete IDE, die Fehler beheben kann. Zur Veranschaulichung verwenden wir in dieser Anleitung die Visual Studio Code-IDE und ihre standardmäßigen Debugging-Features.
• Git in Ihrer lokalen Umgebung installiert ist.
• Ein ngrok-Konto.
• Die aktuelle Version von gcloud ist in Ihrer lokalen Umgebung installiert und initialisiert.

Node.js

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

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

2. Führen Sie in der in Ihrer lokalen Umgebung installierten Visual Studio Code-IDE die folgenden Schritte aus:

   1. Öffnen Sie den Ordner google-chat-samples/node/basic-app in einem neuen Fenster.

   2. Konfigurieren Sie die Anwendung für die Fehlerbehebung durch die automatische Aktualisierung. Fügen Sie dazu zwei Skripts in die Datei package.json ein:

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

   3. Installieren Sie die Anwendung aus dem Stammverzeichnis:

      npm install
      

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

      {
          "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 anhält und mit der zuvor hinzugefügten Debug Watch-Konfiguration die Ausführung und Fehlerbehebung startet. Die Anwendung wird jetzt ausgeführt und wartet auf HTTP-Anfragen am Port 9000.

      

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

3. Starten Sie die Anwendung ngrok 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 weitergeleitet wird.

4. Auch die Anwendung ngrok startet auf Ihrem localhost eine Weboberfläche. Sie können alle Aktivitäten überwachen, indem Sie sie in einem Browser öffnen.

   

   Abbildung 5: Die von der Anwendung ngrok gehostete Weboberfläche zeigt keine HTTP-Anfragen an.

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

   • Öffnen Sie Google Chat.

     Zu Google Chat

   • 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 Gruppenbereich für Direktnachrichten Hello ein und drücken Sie enter. Ihre Chat-App antwortet nicht, da die Fehlerbehebung gerade aktiv ist.

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

   

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

7. Wenn Sie die Ausführung über den Debugger von Visual Studio Code fortsetzen, bevor in Google Chat eine Zeitüberschreitung auftritt, antwortet die Chat-App Your message : Hello.

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

   

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

9. Ersetzen Sie Your message durch Here was your message inline 35 von index.json, um das Anwendungsverhalten zu ändern. 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 wartet auf HTTP-Anfragen am Port 9000, wobei die Codeänderung geladen wird.

10. Anstatt eine zweite Hello-Nachricht im Gruppenbereich zu senden, können Sie die letzte HTTP-Anfrage auswählen, die auf der Weboberfläche protokolliert wurde, die von der ngrok-Anwendung in Ihrer lokalen Umgebung gehostet wird, und auf Replay klicken. Wie beim letzten Mal antwortet die Chat-App nicht, da gerade eine Fehlerbehebung durchgeführt wird.

11. Wenn Sie die Ausführung im Debugger von Visual Studio Code fortsetzen, können Sie auf der Weboberfläche sehen, die von der Anwendung ngrok in Ihrer lokalen Umgebung gehostet wird, dass die Anwendung eine Antwort mit der aktualisierten Version der Nachricht Here was your message : Hello generiert.

Python

1. Rufen Sie neue Nutzeranmeldedaten ab, die Sie als Standardanmeldedaten für Anwendungen verwenden möchten:

   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 Anwendung.

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

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

3. Führen Sie in der in Ihrer lokalen Umgebung installierten Visual Studio Code-IDE die folgenden Schritte aus:

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

   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 aus dem Modul functions-framework auf Port 9000 im Debug-Modus 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", "hello_chat",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. Fügen Sie einen Haltepunkt hinzu, der die Verarbeitung der HTTP-Anfrage in der Datei main.py anhält und mit der zuvor hinzugefügten Debug Watch-Konfiguration die Ausführung und Fehlerbehebung startet. Die Anwendung wird jetzt ausgeführt und wartet auf HTTP-Anfragen am Port 9000.

      

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

4. Starten Sie die Anwendung ngrok 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 weitergeleitet wird.

5. Auch die Anwendung ngrok startet auf Ihrem localhost eine Weboberfläche. Sie können alle Aktivitäten überwachen, indem Sie sie in einem Browser öffnen.

   

   Abbildung 5: Die von der Anwendung ngrok gehostete Weboberfläche zeigt keine HTTP-Anfragen an.

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

   • Öffnen Sie Google Chat.

     Zu Google Chat

   • 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 Gruppenbereich für Direktnachrichten Hey! ein und drücken Sie enter. Ihre Chat-App antwortet nicht, da die Fehlerbehebung gerade aktiv ist.

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

   

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

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

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

   

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

10. Ersetzen Sie zum Ändern des Anwendungsverhaltens Hello durch Hey inline 51 der Datei main.py. Wenn Sie die Datei speichern, wird die Anwendung von Visual Studio Code automatisch mit dem aktualisierten Quellcode neu geladen und verbleibt im Debug-Modus.

    

    Abbildung 8. Die Anwendung wird ausgeführt und wartet auf HTTP-Anfragen am Port 9000, wobei die Codeänderung geladen wird.

11. Anstatt eine zweite Hey!-Nachricht im Gruppenbereich zu senden, können Sie die letzte HTTP-Anfrage auswählen, die auf der Weboberfläche protokolliert wurde, die von der ngrok-Anwendung in Ihrer lokalen Umgebung gehostet wird, und auf Replay klicken. Wie beim letzten Mal antwortet die Chat-App nicht, da gerade eine Fehlerbehebung durchgeführt wird.

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

Java

1. Rufen Sie neue Nutzeranmeldedaten ab, die Sie als Standardanmeldedaten für Anwendungen verwenden möchten:

   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 Anwendung.

2. Klonen Sie das googleworkspace/google-chat-samples-Repository von GitHub in Ihrer lokalen Umgebung. Es enthält den Anwendungscode:

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

3. Führen Sie in der in Ihrer lokalen Umgebung installierten Visual Studio Code-IDE die folgenden Schritte aus:

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

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

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

   3. Sie können sie 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 zuvor mit Port 8000 gestartete Anwendung angehängt wird:

      {
          "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 HelloChat.java anhält, und beginnen Sie mit dem Anhängen und Debuggen mit der zuvor hinzugefügten Remote Debug Watch-Konfiguration. Die Anwendung wird jetzt ausgeführt und überwacht Port 9000 auf HTTP-Anfragen.

      

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

4. Starten Sie die Anwendung ngrok 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 weitergeleitet wird.

5. Auch die Anwendung ngrok startet auf Ihrem localhost eine Weboberfläche. Sie können alle Aktivitäten überwachen, indem Sie sie in einem Browser öffnen.

   

   Abbildung 5: Die von der Anwendung ngrok gehostete Weboberfläche zeigt keine HTTP-Anfragen an.

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

   • Öffnen Sie Google Chat.

     Zu Google Chat

   • 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 Gruppenbereich für Direktnachrichten Hey! ein und drücken Sie enter. Ihre Chat-App antwortet nicht, da die Fehlerbehebung gerade aktiv ist.

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

   

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

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

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

   

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

10. Ersetzen Sie zum Ändern des Anwendungsverhaltens Hello durch Hey inline 55 der Datei HelloChat.java, starten Sie den Prozess mvnDebug neu und starten Sie Remote Debug Watch neu, um die Fehlerbehebung neu anzuhängen und neu zu starten.

11. Anstatt eine zweite Hey!-Nachricht im Gruppenbereich zu senden, können Sie die letzte HTTP-Anfrage auswählen, die auf der Weboberfläche protokolliert wurde, die von der ngrok-Anwendung in Ihrer lokalen Umgebung gehostet wird, und auf Replay klicken. Wie beim letzten Mal antwortet die Chat-App nicht, da gerade eine Fehlerbehebung durchgeführt wird.

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