Тестирование и отладка HTTP-надстроек Google Workspace

Node.js

• В вашей локальной среде должны быть установлены последние версии node и npm .

• В вашей локальной среде должна быть установлена ​​последняя версия nodemon . Она используется для автоматической перезагрузки:

  npm install -g nodemon

• Проект Google Cloud . Вы можете ознакомиться с разделами «Предварительные требования» и «Настройка среды» в руководстве по быстрому запуску .

• Код дополнения Google Workspace для отладки в локальной среде. В данном руководстве для наглядности мы используем функции предварительного просмотра из примера кода 3p-resources из репозитория GitHub googleworkspace/add-ons-samples .

• В локальной среде должна быть установлена ​​интегрированная среда разработки (IDE), способная выполнять отладку. В данном руководстве для наглядности мы используем IDE Visual Studio Code и её стандартные функции отладки .

• Аккаунт ngrok .

• В вашей локальной среде должна быть установлена ​​и инициализирована последняя версия gcloud .

Python

• В вашей локальной среде должна быть установлена ​​последняя версия python3 .
• В локальной среде должны быть установлены последние версии pip и virtualenv . Они используются для управления пакетами Python и виртуальными средами соответственно.
• Проект Google Cloud . Вы можете ознакомиться с разделами «Предварительные требования» и «Настройка среды» в руководстве по быстрому запуску .
• Код дополнения Google Workspace для отладки в локальной среде. В данном руководстве для наглядности мы используем функции предварительного просмотра из примера кода 3p-resources из репозитория GitHub googleworkspace/add-ons-samples .
• В локальной среде должна быть установлена ​​интегрированная среда разработки (IDE), способная выполнять отладку. В данном руководстве для наглядности мы используем IDE Visual Studio Code и её стандартные функции отладки .
• Аккаунт ngrok .
• В вашей локальной среде должна быть установлена ​​и инициализирована последняя версия gcloud .

Java

• В вашей локальной среде должна быть установлена ​​последняя стабильная версия Java SE 11's JDK .
• В локальной среде должна быть установлена ​​последняя версия Apache Maven . Она используется для управления проектами на Java.
• Проект Google Cloud . Вы можете ознакомиться с разделами «Предварительные требования» и «Настройка среды» в руководстве по быстрому запуску .
• Код дополнения Google Workspace для отладки в локальной среде. В данном руководстве для наглядности мы используем функции предварительного просмотра из примера кода 3p-resources из репозитория GitHub googleworkspace/add-ons-samples .
• В локальной среде должна быть установлена ​​интегрированная среда разработки (IDE), способная выполнять отладку. В данном руководстве для наглядности мы используем IDE Visual Studio Code и её стандартные функции отладки .
• Аккаунт ngrok .
• В вашей локальной среде должна быть установлена ​​и инициализирована последняя версия gcloud .

Node.js

1. В установленной локально среде среды разработки Visual Studio Code выполните следующие действия:

   1. В новом окне откройте папку add-ons-samples/node/3p-resources .

   2. Настройте приложение для локального запуска и автоматической перезагрузки в режиме отладки, добавив одну зависимость и два скрипта в файл package.json :

      {
          ...
          "dependencies": {
            ...
            "@google-cloud/functions-framework": "^3.3.0"
          },
          "scripts": {
              ...
              "start": "npx functions-framework --target=createLinkPreview --port=9000",
              "debug-watch": "nodemon --watch ./ --exec npm start"
          }
          ...
      }
      

   3. Установите приложение из корневого каталога:

      npm install

   4. Создайте и настройте запуск с именем Debug Watch , который будет запускать скрипт debug-watch , создав файл .vscode/launch.json в корневом каталоге:

      {
          "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 . Теперь приложение работает и принимает HTTP-запросы на порту 9000 .

      

2. Запустите приложение ngrok в локальной среде:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Замените NGROK_STATIC_DOMAIN на статический домен в вашей учетной записи ngrok . Теперь все запросы будут перенаправляться в вашу локальную среду и на порт, используемый приложением.

   

3. Приложение ngrok также запускает веб-интерфейс на вашем локальном компьютере. Вы можете отслеживать всю активность, открыв его в браузере.

   

4. Протестируйте надстройку Google Workspace, просмотрев URL-адрес обращения в новом документе Google Docs с помощью тестовой учетной записи:

   • Создайте документ Google Docs.

     Создать документ Google Docs

   • Введите следующую ссылку и нажмите enter :

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Перейдите по ссылке.

5. В локальной среде Visual Studio Code вы увидите, что выполнение приостановлено на установленной точке останова.

   

6. Если возобновить выполнение из отладчика Visual Studio Code до истечения времени ожидания для дополнений Google Workspace, дополнение Google Workspace отобразит предварительный просмотр ссылки в документе Google из кэша.

7. Вы можете проверить журналы HTTP-запросов и ответов через веб-интерфейс, размещенный в локальной среде приложения ngrok .

   

8. Чтобы изменить поведение приложения, замените Case на Case: в строке 51 файла index.js . После сохранения файла nodemon автоматически перезагрузит приложение с обновленным исходным кодом, и Visual Studio Code останется в режиме отладки.

   

9. На этот раз, вместо того чтобы кликать по ссылке и ждать несколько секунд в новом документе Google Docs, вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе приложения ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше дополнение Google Workspace не ответит, потому что оно находится в процессе отладки .

10. Если возобновить выполнение из отладчика Visual Studio Code , то в веб-интерфейсе приложения ngrok в вашей локальной среде вы увидите, что приложение генерирует ответ с обновленной версией карточки предварительного просмотра.

Python

1. В установленной локально среде среды разработки Visual Studio Code выполните следующие действия:

   1. В новом окне откройте папку add-ons-samples/python/3p-resources/create_link_preview .

   2. Создайте виртуальное окружение для env и активируйте его:

      virtualenv env
      source env/bin/activate

   3. Установите все зависимости проекта с помощью pip в виртуальной среде:

      pip install -r requirements.txt

   4. Создайте файл .vscode/launch.json в корневом каталоге и настройте запуск с именем Debug Watch , который будет запускать приложение из модуля functions-framework на порту 9000 в режиме отладки в виртуальной среде env :

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "python",
              "request": "launch",
              "name": "Debug Watch",
              "python": "${workspaceFolder}/env/bin/python3",
              "module": "functions_framework",
              "args": [
                  "--target", "create_link_preview",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. Добавьте точку останова, которая приостанавливает обработку HTTP-запросов в файле main.py , и запустите приложение и отладку, добавив ранее настроенную конфигурацию Debug Watch . Теперь приложение работает и принимает HTTP-запросы на порту 9000 .

      

2. Запустите приложение ngrok в локальной среде:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Замените NGROK_STATIC_DOMAIN на статический домен в вашей учетной записи ngrok . Теперь все запросы будут перенаправляться в вашу локальную среду и на порт, используемый приложением.

   

3. Приложение ngrok также запускает веб-интерфейс на вашем локальном компьютере. Отслеживайте все действия, открыв его в браузере.

   

4. Протестируйте надстройку Google Workspace, просмотрев URL-адрес обращения в новом документе Google Docs с помощью тестовой учетной записи:

   • Создайте документ Google Docs.

     Создать документ Google Docs

   • Введите следующую ссылку и нажмите enter :

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Перейдите по ссылке.

5. В локальной среде Visual Studio Code вы увидите, что выполнение приостановлено на установленной точке останова.

   

6. Если возобновить выполнение из отладчика Visual Studio Code до истечения времени ожидания для дополнений Google Workspace, дополнение Google Workspace отобразит предварительный просмотр ссылки в документе Google из кэша.

7. Вы можете проверить журналы HTTP-запросов и ответов через веб-интерфейс, размещенный в локальной среде приложения ngrok .

   

8. Чтобы изменить поведение приложения, замените Case на Case: в строке 56 файла main.py После сохранения файла Visual Studio Code автоматически перезагрузит приложение с обновленным исходным кодом и останется в режиме отладки.

   

9. На этот раз, вместо того чтобы кликать по ссылке и ждать несколько секунд в новом документе Google Docs, вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе приложения ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше дополнение Google Workspace не ответит, потому что оно находится в процессе отладки .

10. Если возобновить выполнение из отладчика Visual Studio Code , то в веб-интерфейсе приложения ngrok в вашей локальной среде вы увидите, что приложение генерирует ответ с обновленной версией карточки предварительного просмотра.

Java

1. В установленной локально среде среды разработки Visual Studio Code выполните следующие действия:

   1. В новом окне откройте папку add-ons-samples/java/3p-resources .

   2. Настройте проект Maven для запуска приложения CreateLinkPreview на порту 9000 локально, добавив плагин сборки Cloud Functions Framework function-maven-plugin в файл pom.xml :

      ...
      <plugin>
          <groupId>com.google.cloud.functions</groupId>
          <artifactId>function-maven-plugin</artifactId>
          <version>0.11.0</version>
          <configuration>
              <functionTarget>CreateLinkPreview</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-запросов в файле CreateLinkPreview.java , и начните подключение и отладку с помощью конфигурации Remote Debug Watch добавленной ранее. Теперь приложение работает и принимает HTTP-запросы на порту 9000 .

      

2. Запустите приложение ngrok в локальной среде:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Замените NGROK_STATIC_DOMAIN на статический домен в вашей учетной записи ngrok . Теперь все запросы будут перенаправляться в вашу локальную среду и на порт, используемый приложением.

   

3. Приложение ngrok также запускает веб-интерфейс на вашем локальном компьютере. Отслеживайте все действия, открыв его в браузере.

   

4. Протестируйте надстройку Google Workspace, просмотрев URL-адрес обращения в новом документе Google Docs с помощью тестовой учетной записи:

   • Создайте документ Google Docs.

     Создать документ Google Docs

   • Введите следующую ссылку и нажмите enter :

     https://example.com/support/case/?name=Name1&description=Description1&priority=P1
     

   • Перейдите по ссылке.

5. В локальной среде Visual Studio Code вы увидите, что выполнение приостановлено на установленной точке останова.

   

6. Если возобновить выполнение из отладчика Visual Studio Code до истечения времени ожидания для дополнений Google Workspace, дополнение Google Workspace отобразит предварительный просмотр ссылки в документе Google из кэша.

7. Вы можете проверить журналы HTTP-запросов и ответов через веб-интерфейс, размещенный в локальной среде приложения ngrok .

   

8. Чтобы изменить поведение приложения, замените Case на Case: в строке 78 файла CreateLinkPreview.java , перезапустите процесс mvnDebug и повторно запустите Remote Debug Watch , чтобы снова подключиться и возобновить отладку .

9. На этот раз, вместо того чтобы кликать по ссылке и ждать несколько секунд в новом документе Google Docs, вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе приложения ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше дополнение Google Workspace не ответит, потому что оно находится в процессе отладки .

10. Если возобновить выполнение из отладчика Visual Studio Code , то в веб-интерфейсе приложения ngrok в вашей локальной среде вы увидите, что приложение генерирует ответ с обновленной версией карточки предварительного просмотра.