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 das automatische Neuladen verwendet:

  npm install -g nodemon

• Eine HTTP-Chat-App, die für Messaging konfiguriert ist. Sie können die Abschnitte Voraussetzungen, Umgebung einrichten und App in Google Chat veröffentlichen der Kurzanleitung durchgehen. 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 in Ihrer lokalen Umgebung eingerichtete IDE, die Debugging unterstützt. In diesem Leitfaden verwenden wir die Visual Studio Code-IDE und ihre standardmäßigen Debugging-Funktionen zur Veranschaulichung.

• Git installed in your local environment.

• Ein ngrok-Konto.

Python

• Die neueste Version von python3 ist in Ihrer lokalen Umgebung installiert.
• Die aktuelle Version von pip und virtualenv ist in Ihrer lokalen Umgebung installiert. Sie werden zum Verwalten von Python-Paketen bzw. virtuellen Umgebungen verwendet.
• Eine HTTP-Chat-App, die für Messaging konfiguriert ist. Sie können die Abschnitte Voraussetzungen, Umgebung einrichten und App in Google Chat veröffentlichen der Kurzanleitung durchgehen. 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 in Ihrer lokalen Umgebung eingerichtete IDE, die Debugging unterstützt. In diesem Leitfaden verwenden wir die Visual Studio Code-IDE und ihre standardmäßigen Debugging-Funktionen zur Veranschaulichung.
• Git installed in your local environment.
• Ein ngrok-Konto.
• Die neueste 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 die Abschnitte Voraussetzungen, Umgebung einrichten und App in Google Chat veröffentlichen der Kurzanleitung durchgehen. 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 in Ihrer lokalen Umgebung eingerichtete IDE, die Debugging unterstützt. In diesem Leitfaden verwenden wir die Visual Studio Code-IDE und ihre standardmäßigen Debugging-Funktionen zur Veranschaulichung.
• Git installed in your local environment.
• Ein ngrok-Konto.
• Die neueste 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. 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 google-chat-samples/node/basic-app.

   2. Konfigurieren Sie die Anwendung für das Debuggen des automatischen Neuladens, 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 Port 9000 auf HTTP-Anfragen.

      

      Abbildung 3: Die Anwendung wird ausgeführt und überwacht 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 weitergeleitet wird.

4. Außerdem wird auf Ihrem Localhost eine Weboberfläche von der ngrok-Anwendung gestartet. Sie können alle Aktivitäten überwachen, 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.

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

9. Wenn Sie das Anwendungsverhalten ändern möchten, ersetzen Sie Your message durch Here was your message in der 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 Port 9000 auf HTTP-Anfragen. Die Codeänderung wurde geladen.

10. Anstatt eine zweite Nachricht Hello im Gruppenbereich zu senden, können Sie die letzte HTTP-Anfrage auswählen, die auf der Weboberflä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, 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 Here was your message : Hello generiert.

Python

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

   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/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. 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 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 mit dem Namen Debug Watch, der die Anwendung aus dem 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 Port 9000 auf HTTP-Anfragen.

      

      Abbildung 3: Die Anwendung wird ausgeführt und überwacht 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 weitergeleitet wird.

5. Außerdem wird auf Ihrem Localhost eine Weboberfläche von der ngrok-Anwendung gestartet. Sie können alle Aktivitäten überwachen, 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.

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

10. Wenn Sie das Verhalten der Anwendung ändern möchten, ersetzen Sie Hello durch Hey in der Zeile 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 Debugmodus.

    

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

11. Anstatt eine zweite Nachricht Hey! im Gruppenbereich zu senden, können Sie die letzte HTTP-Anfrage auswählen, die auf der Weboberflä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 Webschnittstelle, 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 ab, die Sie als Standardanmeldedaten für Anwendungen verwenden.

   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/google-chat-samples-Repository aus GitHub in Ihrer lokalen Umgebung. Es enthält den Anwendungscode:

   git clone https://github.com/googleworkspace/google-chat-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 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 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 sie jetzt lokal im Fehlerbehebungsmodus 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 pausiert, 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 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 weitergeleitet wird.

5. Außerdem wird auf Ihrem Localhost eine Weboberfläche von der ngrok-Anwendung gestartet. Sie können alle Aktivitäten überwachen, 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.

     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. Im 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 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 Webschnittstelle, 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 eine zweite Nachricht Hey! im Gruppenbereich zu senden, können Sie die letzte HTTP-Anfrage auswählen, die auf der Weboberflä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 Webschnittstelle, die von der ngrok-Anwendung in Ihrer lokalen Umgebung gehostet wird, dass die Anwendung eine Antwort mit der aktualisierten Version der Nachricht generiert.