Google Chat 앱 디버그

Node.js

Python

Java

Node.js

• 로컬 환경에 최신 버전의 node 및 npm가 설치되었습니다.

• 로컬 환경에 설치된 최신 버전의 nodemon는 자동 새로고침 용도로 사용됩니다.

  npm install -g nodemon
  

• 메시지를 위해 구성된 HTTP 채팅 앱입니다. 빠른 시작 가이드의 기본 요건, 환경 설정, Google Chat에 앱 게시 섹션을 따를 수 있습니다. 유일한 차이점은 앱 이름은 Debug App로, 앱 URL은 http://example.com와 같은 값으로 설정해야 한다는 것입니다.

• 디버그할 수 있는 로컬 환경에 설정된 IDE 이 가이드에서는 설명을 위해 Visual Studio Code IDE와 기본 디버깅 기능을 사용합니다.

• Git가 로컬 환경에 설치되어 있어야 합니다.

• ngrok 계정

Python

• 로컬 환경에 최신 버전의 python3가 설치되었습니다.
• 로컬 환경에 설치된 최신 버전의 pip 및 virtualenv은 각각 Python 패키지와 가상 환경을 관리하는 데 사용됩니다.
• 메시지를 위해 구성된 HTTP 채팅 앱입니다. 빠른 시작 가이드의 기본 요건, 환경 설정, Google Chat에 앱 게시 섹션을 따를 수 있습니다. 유일한 차이점은 앱 이름은 Debug App로, 앱 URL은 http://example.com와 같은 값으로 설정해야 한다는 것입니다.
• 디버그할 수 있는 로컬 환경에 설정된 IDE 이 가이드에서는 설명을 위해 Visual Studio Code IDE와 기본 디버깅 기능을 사용합니다.
• Git가 로컬 환경에 설치되어 있어야 합니다.
• ngrok 계정
• 로컬 환경에 최신 버전의 gcloud가 설치되고 초기화되었습니다.

Java

• 로컬 환경에 설치된 Java SE 11's JDK의 최신 안정화 버전입니다.
• 로컬 환경에 설치된 최신 버전의 Apache Maven으로, Java 프로젝트를 관리하는 데 사용됩니다.
• 메시지를 위해 구성된 HTTP 채팅 앱입니다. 빠른 시작 가이드의 기본 요건, 환경 설정, Google Chat에 앱 게시 섹션을 따를 수 있습니다. 유일한 차이점은 앱 이름은 Debug App로, 앱 URL은 http://example.com와 같은 값으로 설정해야 한다는 것입니다.
• 디버그할 수 있는 로컬 환경에 설정된 IDE 이 가이드에서는 설명을 위해 Visual Studio Code IDE와 기본 디버깅 기능을 사용합니다.
• Git가 로컬 환경에 설치되어 있어야 합니다.
• ngrok 계정
• 로컬 환경에 최신 버전의 gcloud가 설치되고 초기화되었습니다.

Node.js

1. GitHub에서 로컬 환경으로 googleworkspace/google-chat-samples 저장소를 클론합니다. 이 저장소에는 실행할 애플리케이션의 코드가 포함됩니다.

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

2. 로컬 환경에 설치된 Visual Studio Code IDE에서 다음을 수행합니다.

   1. 새 창에서 google-chat-samples/node/basic-app 폴더를 엽니다.

   2. package.json 파일에 두 스크립트를 추가하여 자동 새로고침 디버그를 위해 애플리케이션을 구성합니다.

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

   3. 루트 디렉터리에서 애플리케이션을 설치합니다.

      npm install
      

   4. 루트 디렉터리에 .vscode/launch.json 파일을 만들어 debug-watch 스크립트를 트리거하는 Debug Watch라는 실행을 만들고 구성합니다.

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

   5. index.js 파일에서 HTTP 요청 처리를 일시중지하는 중단점을 추가하고 이전에 추가된 Debug Watch 구성으로 실행과 디버깅을 시작합니다. 이제 애플리케이션이 실행되고 포트 9000에서 HTTP 요청을 리슨합니다.

      

      그림 3. 애플리케이션이 실행 중이고 포트 9000에서 HTTP 요청을 리슨합니다.

3. 로컬 환경에서 ngrok 애플리케이션을 실행합니다.

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   NGROK_STATIC_DOMAIN을 ngrok 계정의 정적 도메인으로 바꿉니다. 이제 모든 요청이 로컬 환경과 애플리케이션에서 사용하는 포트로 리디렉션됩니다.

   

   그림 4. ngrok 서버가 실행 중이고 리디렉션하는 터미널

4. 또한 웹 인터페이스는 localhost에서 ngrok 애플리케이션에 의해 시작됩니다. 브라우저에서 웹 인터페이스를 열어 모든 활동을 모니터링할 수 있습니다.

   

   그림 5. ngrok 애플리케이션이 호스팅하는 웹 인터페이스이며 HTTP 요청을 표시하지 않습니다.

5. 채팅 메시지를 보내 채팅 앱을 테스트합니다.

   • Google Chat을 엽니다.

     Google Chat으로 이동

   • 새 채팅 add을 클릭합니다.

   • 대화상자에 채팅 앱의 이름을 입력합니다.

   • 검색결과에서 채팅 앱을 찾아 추가 > Chat을 클릭합니다.

   • 채팅 메시지 공간에서 Hello를 입력하고 enter 키를 누릅니다. 채팅 앱이 적극적으로 디버그되고 있기 때문에 응답하지 않습니다.

6. 로컬 환경의 Visual Studio Code에서, 설정된 중단점에서 실행이 일시중지된 것을 확인할 수 있습니다.

   

   그림 6. 설정된 중단점에서 실행이 일시중지됩니다.

7. Google Chat이 타임아웃되기 전에 Visual Studio Code의 디버거에서 실행을 재개하면 채팅 앱이 Your message : Hello을 반환합니다.

8. 로컬 환경에서 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다.

   

   그림 7. ngrok 애플리케이션이 호스팅하는 웹 인터페이스의 HTTP 요청

9. 애플리케이션 동작을 변경하려면 Your message를 index.json의 Here was your message 인라인 35로 바꿉니다. 파일을 저장하면 nodemon가 업데이트된 소스 코드로 애플리케이션을 자동으로 새로고침하고 Visual Studio Code는 디버그 모드를 유지합니다.

   

   그림 8. 애플리케이션이 실행되고 코드 변경사항이 로드된 포트 9000에서 HTTP 요청을 리슨합니다.

10. 이번에는 공간에서 두 번째 메시지 Hello를 보내는 대신 로컬 환경의 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에 로깅된 마지막 HTTP 요청을 선택하고 Replay를 클릭할 수 있습니다. 이전과 마찬가지로 채팅 앱은 적극적으로 디버그되고 있으므로 응답하지 않습니다.

11. Visual Studio Code의 디버거에서 실행을 재개하면 로컬 환경의 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 애플리케이션이 업데이트된 버전의 Here was your message : Hello 메시지로 응답을 생성하는 것을 확인할 수 있습니다.

Python

1. 애플리케이션 기본 사용자 인증 정보에 사용할 새로운 사용자 인증 정보를 가져옵니다.

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

   PROJECT_ID를 앱의 Cloud 프로젝트에 대한 프로젝트 ID로 바꿉니다.

2. GitHub에서 로컬 환경으로 googleworkspace/google-chat-samples 저장소를 클론합니다. 이 저장소에는 애플리케이션 코드가 포함됩니다.

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

3. 로컬 환경에 설치된 Visual Studio Code IDE에서 다음을 수행합니다.

   1. 새 창에서 google-chat-samples/python/avatar-app 폴더를 엽니다.

   2. Python env의 새 가상 환경을 만들고 활성화합니다.

      virtualenv env
      source env/bin/activate
      

   3. 가상 환경에서 pip를 사용하여 모든 프로젝트 종속 항목을 설치합니다.

      pip install -r requirements.txt
      

   4. 루트 디렉터리에 .vscode/launch.json 파일을 만들고 env 가상 환경 env의 디버그 모드로 포트 9000의 functions-framework 모듈에서 애플리케이션을 트리거하는 Debug Watch라는 실행을 구성합니다.

      {
          "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. main.py 파일에서 HTTP 요청 처리를 일시중지하는 중단점을 추가하고 이전에 추가된 Debug Watch 구성으로 실행과 디버깅을 시작합니다. 이제 애플리케이션이 실행되고 포트 9000에서 HTTP 요청을 리슨합니다.

      

      그림 3. 애플리케이션이 실행 중이고 포트 9000에서 HTTP 요청을 리슨합니다.

4. 로컬 환경에서 ngrok 애플리케이션을 실행합니다.

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   NGROK_STATIC_DOMAIN을 ngrok 계정의 정적 도메인으로 바꿉니다. 이제 모든 요청이 로컬 환경과 애플리케이션에서 사용하는 포트로 리디렉션됩니다.

   

   그림 4. ngrok 서버가 실행 중이고 리디렉션하는 터미널

5. 또한 웹 인터페이스는 localhost에서 ngrok 애플리케이션에 의해 시작됩니다. 브라우저에서 웹 인터페이스를 열어 모든 활동을 모니터링할 수 있습니다.

   

   그림 5. ngrok 애플리케이션이 호스팅하는 웹 인터페이스이며 HTTP 요청을 표시하지 않습니다.

6. 채팅 메시지를 보내 채팅 앱을 테스트합니다.

   • Google Chat을 엽니다.

     Google Chat으로 이동

   • 새 채팅 add을 클릭합니다.

   • 대화상자에 채팅 앱의 이름을 입력합니다.

   • 검색결과에서 채팅 앱을 찾아 추가 > Chat을 클릭합니다.

   • 채팅 메시지 공간에서 Hey!를 입력하고 enter 키를 누릅니다. 채팅 앱이 적극적으로 디버그 중이기 때문에 응답하지 않습니다.

7. 로컬 환경의 Visual Studio Code에서, 설정된 중단점에서 실행이 일시중지된 것을 확인할 수 있습니다.

   

   그림 6. 설정된 중단점에서 실행이 일시중지됩니다.

8. Google Chat 타임아웃 전에 Visual Studio Code의 디버거에서 실행을 재개하면 채팅 앱이 메시지의 이름과 아바타 사진으로 응답합니다.

9. 로컬 환경에서 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다.

   

   그림 7. ngrok 애플리케이션이 호스팅하는 웹 인터페이스의 HTTP 요청

10. 애플리케이션 동작을 변경하려면 Hello를 main.py 파일의 Hey 인라인 51로 바꿉니다. 파일을 저장하면 Visual Studio Code가 업데이트된 소스 코드로 애플리케이션을 자동으로 새로고침하고 디버그 모드를 유지합니다.

    

    그림 8. 애플리케이션이 실행되고 코드 변경사항이 로드된 포트 9000에서 HTTP 요청을 리슨합니다.

11. 이번에는 공간에서 두 번째 메시지 Hey!를 보내는 대신 로컬 환경의 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에 로깅된 마지막 HTTP 요청을 선택하고 Replay를 클릭할 수 있습니다. 이전과 마찬가지로 채팅 앱은 적극적으로 디버그 중이기 때문에 응답하지 않습니다.

12. Visual Studio Code의 디버거에서 실행을 재개하면 로컬 환경의 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 애플리케이션이 업데이트된 버전의 메시지로 응답을 생성하는 것을 확인할 수 있습니다.

Java

1. 애플리케이션 기본 사용자 인증 정보에 사용할 새로운 사용자 인증 정보를 가져옵니다.

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

   PROJECT_ID를 앱의 Cloud 프로젝트에 대한 프로젝트 ID로 바꿉니다.

2. 애플리케이션 코드가 포함된 로컬 환경의 GitHub에서 googleworkspace/google-chat-samples 저장소를 클론합니다.

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

3. 로컬 환경에 설치된 Visual Studio Code IDE에서 다음을 수행합니다.

   1. 새 창에서 google-chat-samples/java/avatar-app 폴더를 엽니다.

   2. pom.xml 파일에 Cloud Functions 프레임워크 빌드 플러그인 function-maven-plugin를 추가하여 포트 9000에서 로컬로 애플리케이션 HelloChat를 실행하도록 Maven 프로젝트를 구성합니다.

      ...
      <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. 이제 로컬에서 디버그 모드로 실행할 수 있습니다.

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

   4. 루트 디렉터리에 .vscode/launch.json 파일을 만들고 이전에 포트 8000로 시작된 애플리케이션에 연결되는 Remote Debug Watch라는 시작을 구성합니다.

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

   5. HelloChat.java 파일에서 HTTP 요청 처리를 일시중지하는 중단점을 추가하고 이전에 추가된 Remote Debug Watch 구성을 사용하여 연결 및 디버깅을 시작합니다. 이제 애플리케이션이 실행되고 포트 9000에서 HTTP 요청을 리슨합니다.

      

      그림 3. 이 애플리케이션이 실행 중이고 9000 포트에서 HTTP 요청을 수신 대기하고 있습니다.

4. 로컬 환경에서 ngrok 애플리케이션을 실행합니다.

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   NGROK_STATIC_DOMAIN을 ngrok 계정의 정적 도메인으로 바꿉니다. 이제 모든 요청이 로컬 환경과 애플리케이션에서 사용하는 포트로 리디렉션됩니다.

   

   그림 4. ngrok 서버가 실행 중이고 리디렉션하는 터미널

5. 또한 웹 인터페이스는 localhost에서 ngrok 애플리케이션에 의해 시작됩니다. 브라우저에서 웹 인터페이스를 열어 모든 활동을 모니터링할 수 있습니다.

   

   그림 5. ngrok 애플리케이션이 호스팅하는 웹 인터페이스이며 HTTP 요청을 표시하지 않습니다.

6. 채팅 메시지를 보내 채팅 앱을 테스트합니다.

   • Google Chat을 엽니다.

     Google Chat으로 이동

   • 새 채팅 add을 클릭합니다.

   • 대화상자에 채팅 앱의 이름을 입력합니다.

   • 검색결과에서 채팅 앱을 찾아 추가 > Chat을 클릭합니다.

   • 채팅 메시지 공간에서 Hey!를 입력하고 enter 키를 누릅니다. 채팅 앱이 적극적으로 디버그 중이기 때문에 응답하지 않습니다.

7. 로컬 환경의 Visual Studio Code에서, 설정된 중단점에서 실행이 일시중지된 것을 확인할 수 있습니다.

   

   그림 6. 설정된 중단점에서 실행이 일시중지됩니다.

8. Google Chat 타임아웃 전에 Visual Studio Code의 디버거에서 실행을 재개하면 채팅 앱이 메시지의 이름과 아바타 사진으로 응답합니다.

9. 로컬 환경에서 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 HTTP 요청 및 응답 로그를 확인할 수 있습니다.

   

   그림 7. ngrok 애플리케이션이 호스팅하는 웹 인터페이스의 HTTP 요청

10. 애플리케이션 동작을 변경하려면 Hello를 HelloChat.java 파일의 Hey 인라인 55로 바꾸고 mvnDebug 프로세스를 다시 시작한 다음 Remote Debug Watch를 다시 실행하여 다시 연결하고 디버깅을 다시 시작합니다.

11. 이번에는 공간에서 두 번째 메시지 Hey!를 보내는 대신 로컬 환경의 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에 로깅된 마지막 HTTP 요청을 선택하고 Replay를 클릭할 수 있습니다. 이전과 마찬가지로 채팅 앱은 적극적으로 디버그되고 있으므로 응답하지 않습니다.

12. Visual Studio Code의 디버거에서 실행을 재개하면 로컬 환경의 ngrok 애플리케이션이 호스팅하는 웹 인터페이스에서 애플리케이션이 업데이트된 버전의 메시지로 응답을 생성하는 것을 확인할 수 있습니다.