Google Chat 앱 디버그

Node.js

Python

자바

Node.js

• node 및 npm의 최신 버전 설치됨 사용할 수 있습니다

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

  npm install -g nodemon
  

• 다음을 위해 구성된 HTTP 채팅 앱: 메시지를 보낼 수 있습니다 Ad Exchange 계정의 기본 요건 환경, Google에 앱 게시 Chat 빠른 시작 가이드. 유일한 차이점은 앱 이름을 Debug App로 설정하고 앱 URL(예: http://example.com)

• 디버그할 수 있는 로컬 환경에 설정된 IDE Google은 Visual Studio Code IDE 및 기본값 디버깅 기능을 이 가이드는 설명을 위해 제공됩니다.

• Git 설치됨 사용할 수 있습니다

• ngrok 계정

Python

• python3의 최신 버전 설치됨 사용할 수 있습니다
• 최신 버전의 pip 및 virtualenv 설치 Python 패키지 및 가상 프라이빗 클라우드를 관리하는 데 사용됩니다. 각 환경에 따라 다릅니다
• 다음을 위해 구성된 HTTP 채팅 앱: 메시지를 보낼 수 있습니다 Ad Exchange 계정의 기본 요건 환경, Google에 앱 게시 Chat 빠른 시작 가이드. 유일한 차이점은 앱 이름을 Debug App로 설정하고 앱 URL(예: http://example.com)
• 디버그할 수 있는 로컬 환경에 설정된 IDE Google은 Visual Studio Code IDE 및 기본값 디버깅 기능을 이 가이드는 설명을 위해 제공됩니다.
• Git 설치됨 사용할 수 있습니다
• ngrok 계정
• gcloud의 최신 버전 설치됨 및 초기화된 로컬 환경입니다.

자바

• Java SE 11's JDK의 최신 안정화 버전 로컬에 설치됨 환경입니다
• Apache Maven의 최신 버전 로컬 환경에 설치되어 있는 경우 Java 프로젝트를 관리하는 데 사용됩니다
• 다음을 위해 구성된 HTTP 채팅 앱: 메시지를 보낼 수 있습니다 Ad Exchange 계정의 기본 요건 환경, Google에 앱 게시 Chat 빠른 시작 가이드. 유일한 차이점은 앱 이름을 Debug App로 설정하고 앱 URL(예: http://example.com)
• 디버그할 수 있는 로컬 환경에 설정된 IDE Google은 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. 다음을 트리거하는 Debug Watch라는 실행을 만들고 구성합니다. 다음 위치에 .vscode/launch.json 파일을 만들어 debug-watch 스크립트를 :

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

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

      

      그림 3. 애플리케이션이 실행되고 HTTP를 수신 대기 중입니다. 포트 9000에서 요청을 전송합니다.

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   NGROK_STATIC_DOMAIN을(를) 정적 도메인으로 바꿉니다. ngrok 계정 이제 모든 요청이 로컬 포트가 포함될 수 있습니다

   

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

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

   

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

5. 채팅 앱 테스트 메시지:

   • Google Chat을 엽니다.

     Google Chat으로 이동

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

   • 대화상자에 채팅 앱

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

   • 채팅 메시지 공간에서 Hello를 입력하고 enter 키를 누릅니다. 내 채팅 앱이 다음과 같이 응답하지 않습니다. 있습니다

6. 로컬 환경의 Visual Studio Code에서 설정된 중단점에서 실행이 일시중지됩니다.

   

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

7. Visual Studio Code의 디버거에서 실행을 재개하는 경우 Google Chat 채팅 앱이 타임아웃되기 전에 답글: Your message : Hello.

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

   

   그림 7. HTTP 요청이 ngrok 애플리케이션.

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

   

   그림 8. 애플리케이션이 실행되고 HTTP 요청을 수신 대기 중입니다. (코드 변경사항이 로드된 포트 9000)

10. 이번에는 스페이스에서 두 번째 메시지(Hello)를 보내는 대신 내가 그리고 클라이언트가 호스팅하는 웹 인터페이스에 기록된 마지막 HTTP 요청을 로컬 환경에서 ngrok 애플리케이션을 열고 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를 프로젝트 ID 앱 Cloud 프로젝트에 액세스할 수 있습니다

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 파일을 만듭니다. 애플리케이션을 트리거하는 Debug Watch라는 시작 구성 디버그 모드 포트 9000의 functions-framework 모듈에서 가상 환경 env에서:

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

      

      그림 3. 애플리케이션이 실행되고 HTTP를 수신 대기 중입니다. 포트 9000에서 요청을 전송합니다.

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   NGROK_STATIC_DOMAIN을(를) 정적 도메인으로 바꿉니다. ngrok 계정 이제 모든 요청이 로컬 포트가 포함될 수 있습니다

   

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

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

   

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

6. 채팅 앱 테스트 메시지:

   • Google Chat을 엽니다.

     Google Chat으로 이동

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

   • 대화상자에 채팅 앱

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

   • 채팅 메시지 공간에서 Hey!를 입력하고 enter 키를 누릅니다. 내 채팅 앱이 있습니다

7. 로컬 환경의 Visual Studio Code에서 설정된 중단점에서 실행이 일시중지됩니다.

   

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

8. Visual Studio Code의 디버거에서 실행을 재개하는 경우 Google Chat 채팅 앱이 타임아웃되기 전에 내 이름과 아바타 사진을 메시지로 보낸 답장을 보냅니다.

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

   

   그림 7. HTTP 요청이 ngrok 애플리케이션.

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

    

    그림 8. 애플리케이션이 실행되고 HTTP 요청을 수신 대기 중입니다. (코드 변경사항이 로드된 포트 9000)

11. 이번에는 스페이스에서 두 번째 메시지(Hey!)를 보내는 대신 내가 그리고 클라이언트가 호스팅하는 웹 인터페이스에 기록된 마지막 HTTP 요청을 로컬 환경에서 ngrok 애플리케이션을 열고 Replay를 클릭합니다. 지난번과 마찬가지로 채팅 앱에서 응답하지 않습니다. 디버그되고 있기 때문입니다.

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

자바

1. 애플리케이션 기본값에 사용할 새로운 사용자 인증 정보를 획득합니다. 사용자 인증 정보:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login
   

   PROJECT_ID를 프로젝트 ID 앱 Cloud 프로젝트에 액세스할 수 있습니다

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. App 애플리케이션을 실행하도록 Maven 프로젝트 구성 Cloud Functions 프레임워크 빌드를 추가하여 로컬로 포트 9000 pom.xml 파일의 function-maven-plugin 플러그인:

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

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

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

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

   5. HTTP 요청 처리를 일시 중지하는 중단점을 App.java 파일을 열고 첨부를 시작하고 디버깅을 수행할 수 있습니다. Remote Debug Watch 구성이 이전에 추가되었습니다. 애플리케이션은 이제 포트 9000에서 실행되고 HTTP 요청을 리슨합니다.

      

      그림 3. 애플리케이션이 실행 중이고 HTTP를 수신 대기하는 경우 포트 9000에서 요청이 실행됩니다.

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000
   

   NGROK_STATIC_DOMAIN을(를) 정적 도메인으로 바꿉니다. ngrok 계정 이제 모든 요청이 로컬 포트가 포함될 수 있습니다

   

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

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

   

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

6. 채팅 앱 테스트 메시지:

   • Google Chat을 엽니다.

     Google Chat으로 이동

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

   • 대화상자에 채팅 앱

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

   • 채팅 메시지 공간에서 Hey!를 입력하고 enter 키를 누릅니다. 내 채팅 앱이 있습니다

7. 로컬 환경의 Visual Studio Code에서 설정된 중단점에서 실행이 일시중지됩니다.

   

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

8. Visual Studio Code의 디버거에서 실행을 재개하는 경우 Google Chat 채팅 앱이 타임아웃되기 전에 내 이름과 아바타 사진을 메시지로 보낸 답장을 보냅니다.

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

   

   그림 7. HTTP 요청이 ngrok 애플리케이션.

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

11. 이번에는 스페이스에서 두 번째 메시지(Hey!)를 보내는 대신 내가 그리고 클라이언트가 호스팅하는 웹 인터페이스에 기록된 마지막 HTTP 요청을 로컬 환경에서 ngrok 애플리케이션을 열고 Replay를 클릭합니다. 지난번과 마찬가지로 채팅 앱이 응답하지 않습니다. 디버그되고 있기 때문입니다.

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