Google Chat uygulamalarında hata ayıklama

Google Chat uygulama geliştiricisi olarak, değişiklikleri test etmek veya karmaşık sorunları gidermek için kodda hata ayıklama yapmanız gerekebilir. Chat uygulamalarında hata ayıklama işlemi, uygulamanızın mimarisine, işlevine, dağıtım şekline ve tercihlerinize bağlı olarak birçok farklı şekilde yapılabilir.

Bu sayfada, yerel geliştirme ortamlarını test etmek için kullanabileceğiniz birleşik bir giriş platformu olan ngrok'u kullanarak bir HTTP Chat uygulamasında nasıl hata ayıklama yapılacağı açıklanmaktadır. Bu kılavuzda, kod değişikliklerini yerel bir ortamda test eder ve uzak bir ortamdaki sorunları giderirsiniz.

Yerel geliştirme ortamından hata ayıklama

Bu bölümde, yerel ortamınızda çalışan Chat uygulamanızla etkileşimde bulunursunuz.

Yerel geliştirme ortamından hata ayıklama

Şekil 1. Yerel bir geliştirme ortamında hata ayıklama.

Atölye

Node.js

Python

Java

Ön koşullar

Node.js

Python

Java

localhost hizmetini herkese açık hale getirme

Chat uygulamasının yerel ortamınıza erişebilmesi için yerel ortamınızı internete bağlamanız gerekir. ngrok uygulaması, herkese açık bir URL'ye yapılan HTTP isteklerini yerel ortamınıza yönlendirmek için kullanılır.

  1. Yerel ortamınızdaki bir tarayıcıda ngrok hesabınızda oturum açın.
  2. Uygulamayı yükleyin ve yerel ortamınızda authtoken'inizi ayarlayın.
  3. ngrok hesabınızda statik bir alan oluşturun. Bu kılavuzun talimatlarında bu alana NGROK_STATIC_DOMAIN olarak atıfta bulunulur.

Chat uygulamasını yapılandırma

Chat uygulamasını, tüm HTTP isteklerini statik alanınıza gönderecek şekilde yapılandırın.

  1. Google Cloud Console'da Google Chat API sayfasını açın:

    Google Chat API sayfasına gidin.

  2. Yapılandırma sekmesini tıklayın.

  3. Etkileşimli özellikler > Bağlantı ayarları'na gidin ve HTTP uç noktası URL'si metin alanının değerini şu şekilde ayarlayın:

    https://NGROK_STATIC_DOMAIN
    

    NGROK_STATIC_DOMAIN değerini ngrok hesabınızdaki statik alanla değiştirin.

  4. Kaydet'i tıklayın.

Chat uygulaması tüm HTTP isteklerini statik alana gönderir

Şekil 2. Chat uygulaması tüm HTTP isteklerini statik alana gönderir. ngrok herkese açık hizmeti, Chat uygulaması ile yerel olarak yürütülen uygulama kodu arasında köprü görevi görür.

Chat uygulamasını test etme

Chat uygulamanızı yerel olarak dağıtabilir, yapılandırabilir, test edebilir, hata ayıklayabilir ve otomatik olarak yeniden yükleyebilirsiniz.

Node.js

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

    git clone https://github.com/googleworkspace/google-chat-samples.git
  2. Yerel ortamınızda yüklü Visual Studio Code IDE'den aşağıdakileri yapın:

    1. Yeni bir pencerede klasörü açıngoogle-chat-samples/node/basic-app.
    2. package.json dosyasına iki komut dosyası ekleyerek uygulamayı otomatik yeniden yükleme hata ayıklama için yapılandırın:

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      
    3. Uygulamayı kök dizinden yükleyin:

      npm install
    4. Kök dizinde .vscode/launch.json dosyasını oluşturarak debug-watch komut dosyasını tetikleyen Debug Watch adlı bir başlatma 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 istek işlemeyi duraklatacak bir kesme noktası ekleyin ve daha önce eklenen Debug Watch yapılandırmasıyla çalıştırmaya ve hata ayıklama işlemine başlayın. Uygulama artık çalışıyor ve 9000 bağlantı noktasındaki HTTP isteklerini dinliyor.

      Uygulama çalışıyor ve "9000" bağlantı noktasında HTTP isteklerini dinliyor

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

  3. ngrok uygulamasını yerel ortamınızda 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önlendirilir.

    "ngrok" sunucusunun çalıştığı ve yönlendirme yaptığı terminal

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

  4. ngrokUygulaması, yerel ana makinenizde bir web arayüzü de başlatır. Bu arayüzü bir tarayıcıda açarak tüm etkinlikleri izleyebilirsiniz.

    "ngrok" uygulaması tarafından barındırılan ve HTTP isteği olmadığını gösteren web arayüzü

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

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

    • Google Chat'i açın.

      Google Chat'e gidin

    • Yeni sohbet'i tıklayın.

    • İletişim kutusuna Chat 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ın ve enter tuşuna basın. Sohbet uygulamanız, aktif olarak hata ayıklandığı için yanıt vermez.

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

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

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

  7. Google Chat zaman aşımına uğramadan önce Visual Studio Code'nin hata ayıklayıcısından yürütmeyi devam ettirdiğinizde Chat uygulaması Your message : Hello yanıtını verir.

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

    "ngrok" uygulaması tarafından barındırılan web arayüzünden gelen HTTP isteği

    Ş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 Your message öğesini index.json öğesinin satır içi 35 ile değiştirin.Here was your message Dosyayı kaydettiğinizde nodemon, uygulamayı güncellenmiş kaynak kodla otomatik olarak yeniden yükler ve Visual Studio Code hata ayıklama modunda kalır.

    Uygulama, kod değişikliği yüklüyken çalışıyor ve "9000" bağlantı noktasında HTTP isteklerini dinliyor

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

  10. Bu kez, alana ikinci bir Hello mesajı 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çebilir ve Replay simgesini tıklayabilirsiniz. Chat uygulamanız, aktif olarak hata ayıklandığı için geçen seferki gibi yanıt vermiyor.

  11. Visual Studio Code'ün hata ayıklayıcısından yürütmeyi devam ettirdiğinizde, yerel ortamınızda ngrok uygulaması tarafından barındırılan web arayüzünde, uygulamanın Here was your message : Hello mesajının güncellenmiş sürümünü içeren bir yanıt oluşturduğunu görebilirsiniz.

Python

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

    gcloud config set project PROJECT_ID
    gcloud auth application-default login

    PROJECT_ID kısmını, uygulamanın Cloud projesinin proje kimliği ile değiştirin.

  2. GitHub'daki googleworkspace/google-chat-samples deposunu yerel ortamınıza klonlayın. Bu depo, uygulama kodunu içerir:

    git clone https://github.com/googleworkspace/google-chat-samples.git
  3. Yerel ortamınızda yüklü Visual Studio Code IDE'den aşağıdakileri yapın:

    1. Yeni bir pencerede klasörü açıngoogle-chat-samples/python/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ılıklarını yükleyin:

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

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

      Uygulama çalışıyor ve "9000" bağlantı noktasında HTTP isteklerini dinliyor

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

  4. ngrok uygulamasını yerel ortamınızda 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önlendirilir.

    "ngrok" sunucusunun çalıştığı ve yönlendirme yaptığı terminal

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

  5. ngrokUygulaması, yerel ana makinenizde bir web arayüzü de başlatır. Bu arayüzü bir tarayıcıda açarak tüm etkinlikleri izleyebilirsiniz.

    "ngrok" uygulaması tarafından barındırılan ve HTTP isteği olmadığını gösteren web arayüzü

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

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

    • Google Chat'i açın.

      Google Chat'e gidin

    • Yeni sohbet'i tıklayın.

    • İletişim kutusuna Chat 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ın ve enter tuşuna basın. Sohbet uygulamanız, aktif olarak hata ayıklandığı için yanıt vermez.

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

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

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

  8. Google Chat zaman aşımına uğramadan önce Visual Studio Code hata ayıklayıcısından yürütmeyi devam ettirdiğinizde Chat uygulaması, mesajda adınızı ve avatar resminizi ekleyerek yanıt verir.

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

    "ngrok" uygulaması tarafından barındırılan web arayüzünden gelen HTTP isteği

    Ş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 main.py dosyasının satır içi 51 bölümünde Hello yerine Hey yazın. Dosyayı kaydettiğinizde Visual Studio Code, uygulamayı güncellenmiş kaynak kodla otomatik olarak yeniden yükler ve hata ayıklama modunda kalır.

    Uygulama, kod değişikliği yüklüyken çalışıyor ve "9000" bağlantı noktasında HTTP isteklerini dinliyor

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

  11. Bu kez, alana ikinci bir Hey! mesajı 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çebilir ve Replay simgesini tıklayabilirsiniz. Chat uygulamanız, aktif olarak hata ayıklandığı için geçen seferki gibi yanıt vermiyor.

  12. Visual Studio Code'ün hata ayıklayıcısından yürütmeyi devam ettirdiğinizde, yerel ortamınızda ngrok uygulaması tarafından barındırılan web arayüzünde, uygulamanın mesajın güncellenmiş sürümünü içeren bir yanıt oluşturduğunu görebilirsiniz.

Java

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

    gcloud config set project PROJECT_ID
    gcloud auth application-default login

    PROJECT_ID kısmını, uygulamanın Cloud projesinin proje kimliği ile değiştirin.

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

    git clone https://github.com/googleworkspace/google-chat-samples.git
  3. Yerel ortamınızda yüklü Visual Studio Code IDE'den aşağıdakileri yapın:

    1. Yeni bir pencerede klasörü açıngoogle-chat-samples/java/avatar-app.
    2. pom.xml dosyasına Cloud Functions Framework derleme eklentisi function-maven-plugin'yi ekleyerek Maven projesini App uygulamasını 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 yerel olarak hata ayıklama modunda başlatabilirsiniz:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000
    4. Kök dizine .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 istek işlemeyi duraklatacak bir durma noktası ekleyin ve daha önce eklenen Remote Debug Watch yapılandırmasıyla bağlantı kurmaya ve hata ayıklama işlemine başlayın. Uygulama, çalışmaya ve 9000 bağlantı noktasındaki HTTP isteklerini dinlemeye başlar.

      Uygulama çalışıyor ve &quot;9000&quot; bağlantı noktasında HTTP isteklerini dinliyor

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

  4. ngrok uygulamasını yerel ortamınızda 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önlendirilir.

    &quot;ngrok&quot; sunucusunun çalıştığı ve yönlendirme yaptığı terminal

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

  5. ngrokUygulaması, yerel ana makinenizde bir web arayüzü de başlatır. Bu arayüzü bir tarayıcıda açarak tüm etkinlikleri izleyebilirsiniz.

    &quot;ngrok&quot; uygulaması tarafından barındırılan ve HTTP isteği olmadığını gösteren web arayüzü

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

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

    • Google Chat'i açın.

      Google Chat'e gidin

    • Yeni sohbet'i tıklayın.

    • İletişim kutusuna Chat 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ın ve enter tuşuna basın. Sohbet uygulamanız, aktif olarak hata ayıklandığı için yanıt vermez.

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

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

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

  8. Google Chat zaman aşımına uğramadan önce Visual Studio Code hata ayıklayıcısından yürütmeyi devam ettirdiğinizde Chat uygulaması, mesajda adınızı ve avatar resminizi ekleyerek yanıt verir.

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

    &quot;ngrok&quot; uygulaması tarafından barındırılan web arayüzünden gelen HTTP isteği

    Ş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 App.java dosyasının 55 satır içi Hello öğesini Hey ile değiştirin, mvnDebug sürecini yeniden başlatın ve hata ayıklama işlemini yeniden bağlayıp yeniden başlatmak için Remote Debug Watch'i yeniden başlatın.

  11. Bu kez, alana ikinci bir Hey! mesajı 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çebilir ve Replay simgesini tıklayabilirsiniz. Chat uygulamanız, aktif olarak hata ayıklandığı için geçen seferki gibi yanıt vermiyor.

  12. Visual Studio Code'ün hata ayıklayıcısından yürütmeyi devam ettirdiğinizde, yerel ortamınızda ngrok uygulaması tarafından barındırılan web arayüzünde, uygulamanın mesajın güncellenmiş sürümünü içeren bir yanıt oluşturduğunu görebilirsiniz.

Uzaktan ortamdan hata ayıklama

Bu bölümde, uzak bir ortamda çalışan Chat uygulamanızla etkileşimde bulunursunuz.

Uzak ortamdan hata ayıklama

Şekil 9. Uzaktan ortamdan hata ayıklama.

Ön koşullar

  • Chat uygulamanızla doğrudan mesaj alanı. Hızlı başlangıç kılavuzundaki Chat uygulamanızı test etme bölümünü inceleyip Chat uygulamanızı arayarak bir alan oluşturabilirsiniz.
  • Belirli bir bağlantı noktasında hata ayıklayıcı etkinken uzak ortamınızda çalışan uygulamanız. Bu kılavuzun talimatlarında REMOTE_DEBUG_PORT olarak adlandırılır.
  • Yerel ortamınız uzak ortamınıza ssh olabilir.
  • Yerel ortamınızda ayarlanmış ve hata ayıklama yapabilen bir IDE. Bu kılavuzda, açıklama amacıyla Visual Studio CodeIDE ve varsayılan hata ayıklama özelliklerini kullanıyoruz.

Yerel ve uzak ortamlarınızı bağlama

Hata ayıklama istemci bağlantısı başlatmak istediğiniz yerel ortamınızda bir SSH tüneli oluşturun:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

Aşağıdakini değiştirin:

  • LOCAL_DEBUG_PORT: Yerel ortamınızdaki hata ayıklama bağlantı noktası.
  • REMOTE_USERNAME: Uzak ortamınızdaki kullanıcı adı.
  • REMOTE_ADDRESS: Uzak ortamınızın adresi.
  • REMOTE_DEBUG_PORT: Uzak ortamınızdaki hata ayıklama bağlantı noktası.

Yerel ortamınızdaki hata ayıklama bağlantı noktası artık uzak ortamınızdaki hata ayıklama bağlantı noktasına bağlanmıştır.

Hata ayıklamayı başlat

Yerel ortamınızda yüklü Visual Studio Code IDE'den aşağıdakileri yapın:

  1. Yeni bir pencerede uygulamanızın kaynak kodunu açın.
  2. Kök dizininde .vscode/launch.json dosyasını oluşturun ve yerel ortamınızdaki hata ayıklama bağlantı noktasına bağlanan Debug Remote adlı bir başlatma yapılandırın:

    Node.js

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "node",
            "request": "attach",
            "name": "Debug Remote",
            "address": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    Python

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "python",
            "request": "attach",
            "name": "Debug Remote",
            "connect": {
                "host": "127.0.0.1",
                "port": LOCAL_DEBUG_PORT
            }
        }]
    }
    

    Java

    {
        "version": "0.2.0",
        "configurations": [{
            "type": "java",
            "request": "attach",
            "name": "Debug Remote",
            "hostName": "127.0.0.1",
            "port": LOCAL_DEBUG_PORT
        }]
    }
    

    LOCAL_DEBUG_PORT değerini yerel ortamınızdaki hata ayıklama noktasıyla değiştirin.

  3. Uygulamanızın kaynak koduna, HTTP istek işlemeyi duraklatan bir kesme noktası ekleyin ve daha önce eklenen Debug Remote yapılandırmasıyla uygulamayı çalıştırıp hata ayıklama işlemine başlayın.

Chat uygulamanızdaki doğrudan mesaj alanında, test etmek istediğiniz herhangi bir şeyi yazıp enter tuşuna basın. Chat uygulamanız, Visual Studio Code IDE'de etkin bir şekilde hata ayıklandığı için yanıt vermiyor.