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

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Node.js

• Последние версии node и npm , установленные в вашей локальной среде.

• Последняя версия nodemon , установленная в вашей локальной среде. Он используется для целей автоматической перезагрузки:

  npm install -g nodemon

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

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

• IDE, установленная в вашей локальной среде и поддерживающая отладку. В этом руководстве в целях иллюстрации мы используем Visual Studio Code IDE и ее функции отладки по умолчанию.

• Аккаунт ngrok .

• Последняя версия gcloud установлена ​​и инициализирована в вашей локальной среде.

Питон

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

Ява

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

Node.js

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

   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 с помощью учетной записи тестера:

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

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

   • Введите следующую ссылку и нажмите 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, вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше дополнение Google Workspace не отвечает, поскольку оно активно отлаживается .

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

Питон

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

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

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

      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 с помощью учетной записи тестера:

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

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

   • Введите следующую ссылку и нажмите 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, вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше дополнение Google Workspace не отвечает, поскольку оно активно отлаживается .

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

Ява

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

   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 с помощью учетной записи тестера:

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

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

   • Введите следующую ссылку и нажмите 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, вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше дополнение Google Workspace не отвечает, поскольку оно активно отлаживается .

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

Node.js

• Последние версии node и npm , установленные в вашей локальной среде.

• Последняя версия nodemon , установленная в вашей локальной среде. Он используется для целей автоматической перезагрузки:

  npm install -g nodemon

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

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

• IDE, установленная в вашей локальной среде и поддерживающая отладку. В этом руководстве в целях иллюстрации мы используем Visual Studio Code IDE и ее функции отладки по умолчанию.

• Аккаунт ngrok .

• Последняя версия gcloud установлена ​​и инициализирована в вашей локальной среде.

Питон

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

Ява

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

Node.js

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

   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 с помощью учетной записи тестера:

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

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

   • Введите следующую ссылку и нажмите 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, вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше дополнение Google Workspace не отвечает, поскольку оно активно отлаживается .

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

Питон

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

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

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

      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 с помощью учетной записи тестера:

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

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

   • Введите следующую ссылку и нажмите 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, вы можете выбрать последний HTTP-запрос, зарегистрированный в веб-интерфейсе, размещенном приложением ngrok в вашей локальной среде, и нажать Replay . Как и в прошлый раз, ваше дополнение Google Workspace не отвечает, поскольку оно активно отлаживается .

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

Ява

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

   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 с помощью учетной записи тестера:

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

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

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

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

   • Щелкните ссылку.

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

   

6. Когда вы возобновите выполнение от Debugger Visual Studio Code прежде чем Google Workspace AddOns Out Out, надстройка Google Workspace отображает предварительный просмотр ссылки в Google Doc из кэша.

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

   

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

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

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

Node.js

• Последние версии node и npm , установленные в вашей локальной среде.

• Последняя версия nodemon , установленная в вашей локальной среде. Он используется для целей автоматической нагрузки:

  npm install -g nodemon

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

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

• IDE, созданная в вашей местной среде, которая может отлаживать. Мы используем IDE Visual Studio Code и его функции отладки по умолчанию в этом руководстве для иллюстрации.

• Учетная запись ngrok .

• Последняя версия gcloud , установленную и инициализированную в вашей местной среде.

Питон

• Последняя версия python3 , установленная в вашей местной среде.
• Последняя версия pip и virtualenv установлена ​​в вашей местной среде. Они используются для управления пакетами Python и виртуальными средами соответственно.
• Проект Google Cloud . Вы можете следовать предварительным условиям разделов и настроить среду руководства QuickStart .
• Код надстройки Google Workspace отладки в вашей локальной среде. Мы используем функции ссылки предварительного просмотра из примера 3p-resources из репозитория Github googleworkspace/add-ons-samples в этом руководстве для целей иллюстрации.
• IDE, созданная в вашей местной среде, которая может отлаживать. Мы используем IDE Visual Studio Code и его функции отладки по умолчанию в этом руководстве для иллюстрации.
• Учетная запись ngrok .
• Последняя версия gcloud , установленную и инициализированную в вашей местной среде.

Ява

• Последняя стабильная версия Java SE 11's JDK установленной в вашей местной среде.
• Последняя версия Apache Maven установлена ​​в вашей местной среде. Он используется для управления Java Projects.
• Проект Google Cloud . Вы можете следовать предварительным условиям разделов и настроить среду руководства QuickStart .
• Код надстройки Google Workspace отладки в вашей локальной среде. Мы используем функции ссылки предварительного просмотра из примера 3p-resources из репозитория Github googleworkspace/add-ons-samples в этом руководстве для целей иллюстрации.
• IDE, созданная в вашей местной среде, которая может отлаживать. Мы используем IDE Visual Studio Code и его функции отладки по умолчанию в этом руководстве для иллюстрации.
• Учетная запись ngrok .
• Последняя версия gcloud , установленную и инициализированную в вашей местной среде.

Node.js

1. Из IDE 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 в каталоге ROOT:

      {
          "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 с учетной записью Tester:

   • Создайте Google Doc.

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

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

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

   • Щелкните ссылку.

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

   

6. Когда вы возобновите выполнение от Debugger Visual Studio Code прежде чем Google Workspace AddOns Out Out, надстройка Google Workspace отображает предварительный просмотр ссылки в Google Doc из кэша.

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

   

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

   

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

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

Питон

1. Из IDE Visual Studio Code , установленной в вашей локальной среде, сделайте следующее:

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

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

      virtualenv env
      source env/bin/activate

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

      pip install -r requirements.txt

   4. Создайте файл .vscode/launch.json в каталоге ROOT и настройте запуск с именем Debug Watch , что запускает приложение из модульных functions-framework в порту 9000 в режиме отладки в Env Virtual Environment 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 с учетной записью Tester:

   • Создайте Google Doc.

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

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

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

   • Щелкните ссылку.

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

   

6. Когда вы возобновите выполнение от Debugger Visual Studio Code прежде чем Google Workspace AddOns Out Out, надстройка Google Workspace отображает предварительный просмотр ссылки в Google Doc из кэша.

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

   

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

   

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

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

Ява

1. Из IDE Visual Studio Code , установленной в вашей локальной среде, сделайте следующее:

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

   2. Настройте проект Maven для запуска приложения CreateLinkPreview на порте 9000 локально, добавив функции Cloud Function Framework Fuld 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 в каталоге ROOT и настройте запуск с именем 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 с учетной записью Tester:

   • Создайте Google Doc.

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

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

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

   • Щелкните ссылку.

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

   

6. Когда вы возобновите выполнение от Debugger Visual Studio Code прежде чем Google Workspace AddOns Out Out, надстройка Google Workspace отображает предварительный просмотр ссылки в Google Doc из кэша.

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

   

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

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

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

Node.js

• Последние версии node и npm , установленные в вашей локальной среде.

• Последняя версия nodemon , установленная в вашей локальной среде. Он используется для целей автоматической нагрузки:

  npm install -g nodemon

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

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

• IDE, созданная в вашей местной среде, которая может отлаживать. Мы используем IDE Visual Studio Code и его функции отладки по умолчанию в этом руководстве для иллюстрации.

• Учетная запись ngrok .

• Последняя версия gcloud , установленную и инициализированную в вашей местной среде.

Питон

• Последняя версия python3 , установленная в вашей местной среде.
• Последняя версия pip и virtualenv установлена ​​в вашей местной среде. Они используются для управления пакетами Python и виртуальными средами соответственно.
• Проект Google Cloud . Вы можете следовать предварительным условиям разделов и настроить среду руководства QuickStart .
• Код надстройки Google Workspace отладки в вашей локальной среде. Мы используем функции ссылки предварительного просмотра из примера 3p-resources из репозитория Github googleworkspace/add-ons-samples в этом руководстве для целей иллюстрации.
• IDE, созданная в вашей местной среде, которая может отлаживать. Мы используем IDE Visual Studio Code и его функции отладки по умолчанию в этом руководстве для иллюстрации.
• Учетная запись ngrok .
• Последняя версия gcloud , установленную и инициализированную в вашей местной среде.

Ява

• Последняя стабильная версия Java SE 11's JDK установленной в вашей местной среде.
• Последняя версия Apache Maven установлена ​​в вашей местной среде. Он используется для управления Java Projects.
• Проект Google Cloud . Вы можете следовать предварительным условиям разделов и настроить среду руководства QuickStart .
• Код надстройки Google Workspace отладки в вашей локальной среде. Мы используем функции ссылки предварительного просмотра из примера 3p-resources из репозитория Github googleworkspace/add-ons-samples в этом руководстве для целей иллюстрации.
• IDE, созданная в вашей местной среде, которая может отлаживать. Мы используем IDE Visual Studio Code и его функции отладки по умолчанию в этом руководстве для иллюстрации.
• Учетная запись ngrok .
• Последняя версия gcloud , установленную и инициализированную в вашей местной среде.

Node.js

1. Из IDE 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 в каталоге ROOT:

      {
          "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 с учетной записью Tester:

   • Создайте Google Doc.

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

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

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

   • Щелкните ссылку.

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

   

6. Когда вы возобновите выполнение от Debugger Visual Studio Code прежде чем Google Workspace AddOns Out Out, надстройка Google Workspace отображает предварительный просмотр ссылки в Google Doc из кэша.

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

   

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

   

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

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

Питон

1. Из IDE Visual Studio Code , установленной в вашей локальной среде, сделайте следующее:

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

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

      virtualenv env
      source env/bin/activate

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

      pip install -r requirements.txt

   4. Создайте файл .vscode/launch.json в каталоге ROOT и настройте запуск с именем Debug Watch , что запускает приложение из модульных functions-framework в порту 9000 в режиме отладки в Env Virtual Environment 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 с учетной записью Tester:

   • Создайте Google Doc.

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

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

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

   • Щелкните ссылку.

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

   

6. Когда вы возобновите выполнение от Debugger Visual Studio Code прежде чем Google Workspace AddOns Out Out, надстройка Google Workspace отображает предварительный просмотр ссылки в Google Doc из кэша.

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

   

8. To change the application behavior, replace Case with Case: on line 56 of the main.py file. When you save the file, Visual Studio Code automatically reloads the application with the updated source code and remains in debug mode.

   

9. This time, instead of clicking the link and waiting for a few seconds in a new Google Doc, you can select the last HTTP request logged on the web interface hosted by the ngrok application in your local environment and click Replay . Same as last time, your Google Workspace add-on doesn't reply because it's being actively debugged .

10. When you resume the execution from the Visual Studio Code debugger, you can see from the web interface hosted by the ngrok application in your local environment that the application generates a response with the updated version of the preview card.

Ява

1. From the Visual Studio Code IDE installed in your local environment, do the following:

   1. In a new window, open the folder add-ons-samples/java/3p-resources .

   2. Configure the Maven project to run the application CreateLinkPreview on port 9000 locally by adding the Cloud Functions Framework build plugin function-maven-plugin to the pom.xml file:

      ...
      <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. You can now launch it locally in debug mode:

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

   4. Create the file .vscode/launch.json in the root directory and configure a launch named Remote Debug Watch that attaches to the application previously launched on port 8000 :

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

   5. Add a breakpoint that pauses the HTTP request processing in the CreateLinkPreview.java file, and start attaching and debugging with the Remote Debug Watch configuration added before. The application is now running and listening for HTTP requests on port 9000 .

      

2. Launch the ngrok application in your local environment:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   Replace NGROK_STATIC_DOMAIN with the static domain in your ngrok account. All requests are now redirected to your local environment and the port used by the application.

   

3. A web interface is also started on your localhost by the ngrok application, you can monitor all activities by opening it in a browser.

   

4. Test your Google Workspace add-on by previewing a case URL in a new Google Doc with a tester account:

   • Create a Google Doc.

     Create a Google Doc

   • Type the following link and press enter :

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

   • Щелкните ссылку.

5. In the Visual Studio Code in your local environment, you can see that the execution is paused at the breakpoint that was set.

   

6. When you resume the execution from the Visual Studio Code debugger before Google Workspace add-ons times out, the Google Workspace add-on displays the link preview in the Google Doc from the cache.

7. You can check the HTTP request and response logs from the web interface hosted by the ngrok application in your local environment.

   

8. To change the application behavior, replace Case with Case: on line 78 of the CreateLinkPreview.java file, restart the mvnDebug process, and relaunch Remote Debug Watch to reattach and restart debugging .

9. This time, instead of clicking the link and waiting for a few seconds in a new Google Doc, you can select the last HTTP request logged on the web interface hosted by the ngrok application in your local environment and click Replay . Same as last time, your Google Workspace add-on doesn't reply because it's being actively debugged .

10. When you resume the execution from the Visual Studio Code debugger, you can see from the web interface hosted by the ngrok application in your local environment that the application generates a response with the updated version of the preview card.