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, die in Ihrer lokalen Umgebung installiert ist. Sie wird für das automatische Neuladen verwendet:

  npm install -g nodemon

• Eine HTTP-Chat-App, die für Nachrichten konfiguriert ist. Folgen Sie den Abschnitten Voraussetzungen, Umgebung einrichten und App in Google Chat veröffentlichen der Kurzanleitung. Die einzigen Unterschiede sind, 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 zur Veranschaulichung die Visual Studio Code IDE und ihre standardmäßigen Debugging-Funktionen.

• Git in Ihrer lokalen Umgebung installiert ist.

• Ein ngrok-Konto.

Python

• Die neueste Version von python3, die in Ihrer lokalen Umgebung installiert ist.
• Die neueste Version von pip und virtualenv, die in Ihrer lokalen Umgebung installiert ist. Sie werden zum Verwalten von Python-Paketen bzw. virtuellen Umgebungen verwendet.
• Eine HTTP-Chat-App, die für Nachrichten konfiguriert ist. Folgen Sie den Abschnitten Voraussetzungen, Umgebung einrichten und App in Google Chat veröffentlichen der Kurzanleitung. Die einzigen Unterschiede sind, 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 zur Veranschaulichung die Visual Studio Code IDE und ihre standardmäßigen Debugging-Funktionen.
• 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, die in Ihrer lokalen Umgebung installiert ist und zum Verwalten von Java-Projekten verwendet wird.
• Eine HTTP-Chat-App, die für die Nachrichtenübermittlung 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 sind, 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 zur Veranschaulichung die Visual Studio Code IDE und ihre standardmäßigen Debugging-Funktionen.
• Git in Ihrer lokalen Umgebung installiert ist.
• Ein ngrok-Konto.
• Die neueste Version von gcloud muss in Ihrer lokalen Umgebung installiert und initialisiert sein.

Node.js

1. Klonen Sie das googleworkspace/google-chat-samples-Repository von GitHub in Ihre lokale Umgebung. Es enthält den Code der ausführbaren 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 in einem neuen Fenster den Ordner google-chat-samples/node/basic-app.

   2. Konfigurieren Sie die Anwendung für das automatische Neuladen beim Debuggen, indem Sie der Datei package.json zwei Scripts hinzufügen:

      {
          ...
          "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 namens Debug Watch, der das Script 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 index.js-Datei pausiert, und starten Sie die Ausführung und das Debuggen mit der zuvor hinzugefügten Debug Watch-Konfiguration. Die Anwendung wird jetzt ausgeführt und überwacht Port 9000 auf HTTP-Anfragen.

      

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

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 mit dem laufenden und weiterleitenden ngrok-Server

4. Die ngrok-Anwendung startet auch eine Weboberfläche auf Ihrem localhost. Sie können alle Aktivitäten beobachten, indem Sie sie in einem Browser öffnen.

   

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

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

   • Öffnen Sie Google Chat.

     Google Chat öffnen

   • Klicken Sie auf Neuer Chat add.

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

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

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

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

   

   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 ein Zeitlimit erreicht, antwortet die Chat-App mit Your message : Hello.

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 von der Webansicht, die von der ngrok-Anwendung gehostet wird.

9. Wenn Sie das Anwendungsverhalten ändern möchten, ersetzen Sie Your message durch Here was your message inline 35 des index.json. 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 HTTP-Anfragen an Port 9000, wobei die Codeänderung geladen ist.

10. Anstatt eine zweite Nachricht Hello in den Gruppenbereich zu senden, können Sie diesmal die letzte HTTP-Anfrage auswählen, die in 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 des Cloud-Projekts der App.

2. Klonen Sie das googleworkspace/google-chat-samples-Repository aus 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 in einem neuen Fenster den Ordner google-chat-samples/python/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 namens Debug Watch, der die Anwendung aus dem Modul functions-framework über den 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", "avatar_app",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

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

      

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

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 mit dem laufenden und weiterleitenden ngrok-Server

5. Die ngrok-Anwendung startet auch eine Weboberfläche auf Ihrem localhost. Sie können alle Aktivitäten beobachten, indem Sie sie in einem Browser öffnen.

   

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

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

   • Öffnen Sie Google Chat.

     Google Chat öffnen

   • Klicken Sie auf Neuer Chat add.

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

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

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

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

   

   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 ein Zeitlimit erreicht, antwortet die Chat-App mit Ihrem Namen und Ihrem 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 von der Webansicht, die von der ngrok-Anwendung 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 bleibt im Debug-Modus.

    

    Abbildung 8. Die Anwendung wird ausgeführt und überwacht HTTP-Anfragen an Port 9000, wobei die Codeänderung geladen ist.

11. Anstatt eine zweite Nachricht Hey! in den Gruppenbereich zu senden, können Sie diesmal die letzte HTTP-Anfrage auswählen, die in 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 über den Debugger von Visual Studio Code fortsetzen, sehen Sie in der Webansicht, 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 Standardanmeldedaten für Anwendungen ab:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   Ersetzen Sie PROJECT_ID durch die Projekt-ID des Cloud-Projekts der App.

2. Klonen Sie das googleworkspace/google-chat-samples-Repository aus 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 in einem neuen Fenster den Ordner google-chat-samples/java/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 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>App</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 App.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 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 mit dem laufenden und weiterleitenden ngrok-Server

5. Die ngrok-Anwendung startet auch eine Weboberfläche auf Ihrem localhost. Sie können alle Aktivitäten beobachten, indem Sie sie in einem Browser öffnen.

   

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

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

   • Öffnen Sie Google Chat.

     Google Chat öffnen

   • Klicken Sie auf Neuer Chat add.

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

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

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

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

   

   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 ein Zeitlimit erreicht, antwortet die Chat-App mit Ihrem Namen und Ihrem 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 von der Webansicht, die von der ngrok-Anwendung gehostet wird.

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

11. Anstatt eine zweite Nachricht Hey! in den Gruppenbereich zu senden, können Sie diesmal die letzte HTTP-Anfrage auswählen, die in 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 Ihre Chat-App nicht, da sie gerade aktiv debuggt wird.

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