Google Chat uygulamalarında hata ayıklama

Node.js

Python

Java

Node.js

• Yerel ortamınızda node ve npm'nin en yeni sürümlerinin yüklü olması gerekir.

• Yerel ortamınızda nodemon'nın en yeni sürümü yüklü olmalıdır. Bu sürüm, otomatik para yükleme amacıyla kullanılır:

  npm install -g nodemon

• Mesajlaşma için yapılandırılmış bir HTTP Chat uygulaması. Hızlı başlangıç kılavuzunun Ön koşullar, Ortamı ayarlama ve Uygulamayı Google Chat'te yayınlama bölümlerini inceleyebilirsiniz. Tek fark, Uygulama adı'nı Debug App, HTTP uç nokta URL'si'ni ise http://example.com gibi bir değere ayarlamanız gerektiğidir.

• Yerel ortamınızda hata ayıklama yapabilen bir IDE'nin kurulu olması gerekir. Bu kılavuzda, Visual Studio Code IDE ve varsayılan hata ayıklama özellikleri açıklama amacıyla kullanılmaktadır.

• Git Yerel ortamınızda yüklü olmalıdır.

• ngrok hesabı.

Python

• Yerel ortamınızda python3 yüklü olan en yeni sürüm.
• Yerel ortamınızda pip ve virtualenv'ın en yeni sürümü yüklü olmalıdır. Bu araçlar sırasıyla Python paketlerini ve sanal ortamları yönetmek için kullanılır.
• Mesajlaşma için yapılandırılmış bir HTTP Chat uygulaması. Hızlı başlangıç kılavuzunun Ön koşullar, Ortamı ayarlama ve Uygulamayı Google Chat'te yayınlama bölümlerini inceleyebilirsiniz. Tek fark, Uygulama adı'nı Debug App, HTTP uç nokta URL'si'ni ise http://example.com gibi bir değere ayarlamanız gerektiğidir.
• Yerel ortamınızda hata ayıklama yapabilen bir IDE'nin kurulu olması gerekir. Bu kılavuzda, Visual Studio Code IDE ve varsayılan hata ayıklama özellikleri açıklama amacıyla kullanılmaktadır.
• Git Yerel ortamınızda yüklü olmalıdır.
• ngrok hesabı.
• Yerel ortamınızda gcloud'nın en yeni sürümü yüklü ve ilk kullanıma hazırlanmış olmalıdır.

Java

• Yerel ortamınızda Java SE 11's JDK'in yüklü en son kararlı sürümü.
• Yerel ortamınızda Apache Maven'nın en yeni sürümü yüklü olmalıdır. Bu sürüm, Java projelerini yönetmek için kullanılır.
• Mesajlaşma için yapılandırılmış bir HTTP Chat uygulaması. Hızlı başlangıç kılavuzunun Ön koşullar, Ortamı ayarlama ve Uygulamayı Google Chat'te yayınlama bölümlerini inceleyebilirsiniz. Tek fark, Uygulama adı'nı Debug App, Mesaj tetikleyici HTTP uç noktası URL'si'ni ise http://example.com gibi bir değere ayarlamanızdır.
• Yerel ortamınızda hata ayıklama yapabilen bir IDE'nin kurulu olması gerekir. Bu kılavuzda, Visual Studio Code IDE ve varsayılan hata ayıklama özellikleri açıklama amacıyla kullanılmaktadır.
• Git Yerel ortamınızda yüklü olmalıdır.
• ngrok hesabı.
• Yerel ortamınızda gcloud'nın en yeni sürümü yüklü ve ilk kullanıma hazırlanmış olmalıdır.

Node.js

1. googleworkspace/add-ons-samples deposunu GitHub'dan yerel ortamınıza klonlayın. Bu depo, çalıştırılacak uygulamanın kodunu içerir:

   git clone https://github.com/googleworkspace/add-ons-samples.git

2. Yerel ortamınıza yüklenen Visual Studio Code IDE'sinde şunları yapın:

   1. Yeni bir pencerede klasörü açın add-ons-samples/node/chat/avatar-app.

   2. package.json dosyasına iki komut dosyası ekleyerek uygulamayı otomatik yeniden yükleme hata ayıklaması için yapılandırın:

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

   3. Kök dizinden uygulamayı yükleyin:

      npm install

   4. Kök dizinde .vscode/launch.json dosyasını oluşturarak Debug Watch adlı ve debug-watch komut dosyasını tetikleyen bir lansman oluşturup yapılandırın:

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

   5. index.js dosyasında HTTP isteği işlemeyi duraklatan bir kesme noktası ekleyin ve daha önce eklenen Debug Watch yapılandırmasıyla çalıştırmaya ve hata ayıklamaya başlayın. Uygulama artık çalışıyor ve 9000 numaralı bağlantı noktasındaki HTTP isteklerini dinliyor.

      

      Şekil 3. Uygulama çalışıyor ve 9000 numaralı bağlantı noktasında HTTP isteklerini dinliyor.

3. Yerel ortamınızda ngrok uygulamasını başlatın:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   NGROK_STATIC_DOMAIN değerini ngrok hesabınızdaki statik alanla değiştirin. Tüm istekler artık yerel ortamınıza ve uygulama tarafından kullanılan bağlantı noktasına yönlendiriliyor.

   

   Şekil 4. ngrok sunucusunun çalıştığı ve yönlendirme yaptığı terminal.

4. Ayrıca ngrok uygulaması tarafından localhost'unuzda bir web arayüzü başlatılır. Bu arayüzü bir tarayıcıda açarak tüm etkinlikleri izleyebilirsiniz.

   

   Şekil 5. ngrok uygulaması tarafından barındırılan ve HTTP isteklerini göstermeyen web arayüzü.

5. Doğrudan mesaj göndererek Chat uygulamanızı test edin:

   • Google Chat'i açın.

     Google Chat'e gidin

   • Yeni sohbet'i add tıklayın.

   • İletişim kutusuna sohbet uygulamanızın adını girin.

   • Arama sonuçlarında Chat uygulamanızı bulun, Ekle > Chat'i tıklayın.

   • Doğrudan mesaj alanına Hello yazıp enter tuşuna basın. Sohbet uygulamanız aktif olarak hata ayıklama işlemine tabi tutulduğu için yanıt vermiyor.

6. Yerel ortamınızdaki Visual Studio Code bölümünde, yürütmenin ayarlanan kesme noktasında duraklatıldığını görebilirsiniz.

   

   Şekil 6. Yürütme, ayarlanan kesme noktasında duraklatılır.

7. Visual Studio Code Google Chat, Chat uygulamasının zaman aşımına uğramasına izin vermeden önce hata ayıklayıcıdan yürütmeye devam ettiğinizde mesajınıza yanıt verir.

8. Yerel ortamınızda ngrok uygulaması tarafından barındırılan web arayüzünden HTTP istek ve yanıt günlüklerini kontrol edebilirsiniz.

   

   Şekil 7. ngrok uygulaması tarafından barındırılan web arayüzünden gelen HTTP isteği.

9. Uygulama davranışını değiştirmek için index.js dosyasındaki yanıt metnini güncelleyin. Dosyayı kaydettiğinizde nodemon, uygulamayı güncellenmiş kaynak koduyla otomatik olarak yeniden yükler ve Visual Studio Code hata ayıklama modunda kalır.

   

   Şekil 8. Uygulama çalışıyor ve 9000 bağlantı noktasında HTTP isteklerini dinliyor. Kod değişikliği yüklenmiş durumda.

10. Bu kez, alana ikinci bir mesaj Hello göndermek yerine yerel ortamınızda ngrok uygulaması tarafından barındırılan web arayüzünde günlüğe kaydedilen son HTTP isteğini seçip Replay'ı tıklayabilirsiniz. Sohbet uygulamanız, son seferde olduğu gibi aktif olarak hata ayıklama işlemi yapıldığı için yanıt vermiyor.

11. Visual Studio Code Hata ayıklayıcıdan yürütmeye devam ettiğinizde, yerel ortamınızda ngrok uygulaması tarafından barındırılan web arayüzünden uygulamanın, mesajın güncellenmiş sürümüyle yanıt oluşturduğunu görebilirsiniz.

Python

1. Uygulama Varsayılan Kimlik Bilgileri için kullanılacak yeni kullanıcı kimlik bilgileri edinme:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   PROJECT_ID yerine uygulamanın Cloud projesinin proje kimliğini yazın.

2. Uygulama kodunu içeren googleworkspace/add-ons-samples deposunu GitHub'dan yerel ortamınıza klonlayın:

   git clone https://github.com/googleworkspace/add-ons-samples.git

3. Yerel ortamınıza yüklenen Visual Studio Code IDE'sinde şunları yapın:

   1. Yeni bir pencerede klasörü açın add-ons-samples/python/chat/avatar-app.

   2. Python env için yeni bir sanal ortam oluşturun ve etkinleştirin:

      virtualenv env
      source env/bin/activate

   3. Sanal ortamda pip kullanarak tüm proje bağımlılarını yükleyin:

      pip install -r requirements.txt

   4. Kök dizinde .vscode/launch.json dosyasını oluşturun ve Debug Watch adlı bir başlatma yapılandırın. Bu başlatma, env sanal ortamında hata ayıklama modunda functions-framework modülünden 9000 bağlantı noktasında uygulamayı tetikler:

      {
          "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. main.py dosyasında HTTP isteği işlemeyi duraklatan bir kesme noktası ekleyin ve daha önce eklenen Debug Watch yapılandırmasıyla çalıştırmaya ve hata ayıklamaya başlayın. Uygulama artık çalışıyor ve 9000 numaralı bağlantı noktasındaki HTTP isteklerini dinliyor.

      

      Şekil 3. Uygulama çalışıyor ve 9000 numaralı bağlantı noktasında HTTP isteklerini dinliyor.

4. Yerel ortamınızda ngrok uygulamasını başlatın:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   NGROK_STATIC_DOMAIN değerini ngrok hesabınızdaki statik alanla değiştirin. Tüm istekler artık yerel ortamınıza ve uygulama tarafından kullanılan bağlantı noktasına yönlendiriliyor.

   

   Şekil 4. ngrok sunucusunun çalıştığı ve yönlendirme yaptığı terminal.

5. Ayrıca ngrok uygulaması tarafından localhost'unuzda bir web arayüzü başlatılır. Bu arayüzü bir tarayıcıda açarak tüm etkinlikleri izleyebilirsiniz.

   

   Şekil 5. ngrok uygulaması tarafından barındırılan ve HTTP isteklerini göstermeyen web arayüzü.

6. Doğrudan mesaj göndererek Chat uygulamanızı test edin:

   • Google Chat'i açın.

     Google Chat'e gidin

   • Yeni sohbet'i add tıklayın.

   • İletişim kutusuna sohbet uygulamanızın adını girin.

   • Arama sonuçlarında Chat uygulamanızı bulun, Ekle > Chat'i tıklayın.

   • Doğrudan mesaj alanına Hey! yazıp enter tuşuna basın. Sohbet uygulamanız aktif olarak hata ayıklama işlemi yapıldığı için yanıt vermiyor.

7. Yerel ortamınızdaki Visual Studio Code bölümünde, yürütmenin ayarlanan kesme noktasında duraklatıldığını görebilirsiniz.

   

   Şekil 6. Yürütme, ayarlanan kesme noktasında duraklatılır.

8. Visual Studio Code Google Chat, Chat uygulamasının zaman aşımına uğramasına izin vermeden önce hata ayıklayıcıdan yürütmeye devam ettiğinizde, mesajda adınız ve avatar resminizle yanıt verilir.

9. Yerel ortamınızda ngrok uygulaması tarafından barındırılan web arayüzünden HTTP istek ve yanıt günlüklerini kontrol edebilirsiniz.

   

   Şekil 7. ngrok uygulaması tarafından barındırılan web arayüzünden gelen HTTP isteği.

10. Uygulama davranışını değiştirmek için Hello yerine main.py dosyasında Hey yazın. Dosyayı kaydettiğinizde Visual Studio Code uygulama, güncellenmiş kaynak koduyla otomatik olarak yeniden yüklenir ve hata ayıklama modunda kalır.

    

    Şekil 8. Uygulama çalışıyor ve 9000 bağlantı noktasında HTTP isteklerini dinliyor. Kod değişikliği yüklenmiş durumda.

11. Bu kez, alana ikinci bir mesaj Hey! göndermek yerine yerel ortamınızda ngrok uygulaması tarafından barındırılan web arayüzünde günlüğe kaydedilen son HTTP isteğini seçip Replay'ı tıklayabilirsiniz. Chat uygulamanız, son seferde olduğu gibi aktif olarak hata ayıklama işlemi yapıldığı için yanıt vermiyor.

12. Visual Studio Code Hata ayıklayıcıdan yürütmeye devam ettiğinizde, yerel ortamınızda ngrok uygulaması tarafından barındırılan web arayüzünden uygulamanın, mesajın güncellenmiş sürümüyle yanıt oluşturduğunu görebilirsiniz.

Java

1. Uygulama Varsayılan Kimlik Bilgileri için kullanılacak yeni kullanıcı kimlik bilgileri edinme:

   gcloud config set project PROJECT_ID
   gcloud auth application-default login

   PROJECT_ID yerine uygulamanın Cloud projesinin proje kimliğini yazın.

2. Yerel ortamınızda GitHub'dan googleworkspace/add-ons-samples deposunu klonlayın. Bu depo, uygulama kodunu içerir:

   git clone https://github.com/googleworkspace/add-ons-samples.git

3. Yerel ortamınıza yüklenen Visual Studio Code IDE'sinde şunları yapın:

   1. Yeni bir pencerede klasörü açın add-ons-samples/java/chat/avatar-app.

   2. Google Cloud Functions Framework derleme eklentisini function-maven-plugin pom.xml dosyasına ekleyerek Maven projesini, uygulamayı App 9000 bağlantı noktasında yerel olarak çalıştıracak şekilde yapılandırın:

      ...
      <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. Artık hata ayıklama modunda yerel olarak başlatabilirsiniz:

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

   4. Kök dizinde .vscode/launch.json dosyasını oluşturun ve daha önce 8000 bağlantı noktasıyla başlatılan uygulamaya bağlanan Remote Debug Watch adlı bir başlatma yapılandırın:

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

   5. App.java dosyasında HTTP isteği işlemeyi duraklatan bir kesme noktası ekleyin ve daha önce eklenen Remote Debug Watch yapılandırmasıyla ekleme ve hata ayıklama işlemlerini başlatın. Uygulama artık çalışıyor ve 9000 numaralı bağlantı noktasındaki HTTP isteklerini dinliyor.

      

      Şekil 3. Uygulama çalışıyor ve 9000 numaralı bağlantı noktasında HTTP isteklerini dinliyor.

4. Yerel ortamınızda ngrok uygulamasını başlatın:

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

   NGROK_STATIC_DOMAIN değerini ngrok hesabınızdaki statik alanla değiştirin. Tüm istekler artık yerel ortamınıza ve uygulama tarafından kullanılan bağlantı noktasına yönlendiriliyor.

   

   Şekil 4. ngrok sunucusunun çalıştığı ve yönlendirme yaptığı terminal.

5. Ayrıca ngrok uygulaması tarafından localhost'unuzda bir web arayüzü başlatılır. Bu arayüzü bir tarayıcıda açarak tüm etkinlikleri izleyebilirsiniz.

   

   Şekil 5. ngrok uygulaması tarafından barındırılan ve HTTP isteklerini göstermeyen web arayüzü.

6. Doğrudan mesaj göndererek Chat uygulamanızı test edin:

   • Google Chat'i açın.

     Google Chat'e gidin

   • Yeni sohbet'i add tıklayın.

   • İletişim kutusuna sohbet uygulamanızın adını girin.

   • Arama sonuçlarında Chat uygulamanızı bulun, Ekle > Chat'i tıklayın.

   • Doğrudan mesaj alanına Hey! yazıp enter tuşuna basın. Sohbet uygulamanız aktif olarak hata ayıklama işlemi yapıldığı için yanıt vermiyor.

7. Yerel ortamınızdaki Visual Studio Code bölümünde, yürütmenin ayarlanan kesme noktasında duraklatıldığını görebilirsiniz.

   

   Şekil 6. Yürütme, ayarlanan kesme noktasında duraklatılır.

8. Visual Studio Code Google Chat, Chat uygulamasının zaman aşımına uğramasına izin vermeden önce hata ayıklayıcıdan yürütmeye devam ettiğinizde, mesajda adınız ve avatar resminizle yanıt verilir.

9. Yerel ortamınızda ngrok uygulaması tarafından barındırılan web arayüzünden HTTP istek ve yanıt günlüklerini kontrol edebilirsiniz.

   

   Şekil 7. ngrok uygulaması tarafından barındırılan web arayüzünden gelen HTTP isteği.

10. Uygulama davranışını değiştirmek için Hello yerine Hey inline 55 değerini App.java dosyasında kullanın, mvnDebug işlemini yeniden başlatın ve yeniden ekleyip hata ayıklamayı yeniden başlatmak için Remote Debug Watch öğesini yeniden başlatın.

11. Bu kez, alana ikinci bir mesaj Hey! göndermek yerine yerel ortamınızda ngrok uygulaması tarafından barındırılan web arayüzünde günlüğe kaydedilen son HTTP isteğini seçip Replay'ı tıklayabilirsiniz. Sohbet uygulamanız, son seferde olduğu gibi aktif olarak hata ayıklama işlemi yapıldığı için yanıt vermiyor.

12. Visual Studio Code Hata ayıklayıcıdan yürütmeye devam ettiğinizde, yerel ortamınızda ngrok uygulaması tarafından barındırılan web arayüzünden uygulamanın, mesajın güncellenmiş sürümüyle yanıt oluşturduğunu görebilirsiniz.