Google Chat uygulamalarında hata ayıklama

Google Chat uygulamaları geliştiricisi olarak değişiklikleri test etmek veya karmaşık sorunları gidermek için kodda hata ayıklamanız gerekebilir. Chat uygulamalarında hata ayıklama işlemi, uygulamanızın mimarisine, uygulamanın ne yaptığına, uygulamanızın nasıl dağıtıldığına 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 giriş platformu olan ngrok'u kullanarak bir HTTP Chat uygulamasında nasıl hata ayıklayacağınız açıklanmaktadır. Bu kılavuzda, kod değişikliklerini yerel bir ortamda test edecek ve uzak bir ortamdaki sorunları gidereceksiniz.

Yerel geliştirme ortamından hata ayıkla

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

Yerel geliştirme ortamından
hata ayıkla

Şekil 1. Yerel geliştirme ortamında hata ayıklayın.

Atölye

Node.js

Python

Java

Ön koşullar

Node.js

Python

Java

Yerel ana makine hizmetini herkese açık hale getir

Chat uygulamasının 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 authtoken cihazınızı yerel ortamınızda ayarlayın.
  3. ngrok hesabınızda bir statik alan oluşturun. Bu kılavuzdaki talimatlar NGROK_STATIC_DOMAIN olarak belirtilmiştir.

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 konsolunda Google Chat API sayfasını açın:

    Google Chat API sayfasına git

  2. Configuration (Yapılandırma) sekmesini tıklayın.

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

    https://NGROK_STATIC_DOMAIN
    

    NGROK_STATIC_DOMAIN kısmını 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 genel hizmeti, Chat uygulaması ile yerel olarak çalışan 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. googleworkspace/google-chat-samples deposunu GitHub'dan yerel ortamınıza klonlayın. Bu depo, yürütülecek 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 google-chat-samples/node/basic-app klasörünü açın.
    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 komut dosyasını tetikleyen Debug Watch adlı bir lansman oluşturun ve 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şlemesini duraklatan bir ayrılma noktası ekleyin ve daha önce eklediğiniz Debug Watch yapılandırmasıyla çalıştırmaya ve hata ayıklamaya başlayın. Uygulama şu anda 9000 bağlantı noktasındaki HTTP isteklerini çalıştırıyor ve dinliyor.

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

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    NGROK_STATIC_DOMAIN kısmını 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ırıldığı ve yönlendirildiği terminal

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

  4. Ayrıca, yerel ana makinenizde ngrok uygulaması tarafından bir web arayüzü başlatılır. Tarayıcıda açarak tüm etkinlikleri izleyebilirsiniz.

    "ngrok" uygulaması tarafından barındırılan ve hiçbir HTTP isteği göstermeyen web arayüzü

    5. Şekil. ngrok uygulaması tarafından barındırılan ve hiçbir 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 git

    • Yeni sohbet'i tıklayın.

    • İletişim kutusunda, Chat uygulamanızın adını girin.

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

    • Doğrudan mesaj alanına Hello yazıp enter tuşuna basın. Chat uygulamanız, etkin olarak hata ayıklama işlemi gerçekleştirildiği için yanıt vermiyor.

  6. Yerel ortamınızdaki Visual Studio Code içinde yürütmenin ayarlanan ayrılma noktasında duraklatıldığını görebilirsiniz.

    Yürütme, ayarlanan ayrılma noktasında duraklatılır

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

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

  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ının barındırdığı web arayüzünden gelen HTTP isteği

    7.Şekil 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 yerine index.json öğesinin Here was your message satır içi 35 kodunu ekleyin. nodemon, dosyayı kaydettiğinizde uygulamayı güncellenen kaynak koduyla otomatik olarak yeniden yükler ve Visual Studio Code hata ayıklama modunda kalır.

    Uygulama, kod değişikliği yüklenmiş olarak "9000" bağlantı noktasındaki HTTP isteklerini çalıştırıyor ve dinliyor

    8. Şekil. Uygulama, kod değişikliği yüklenmiş olarak 9000 bağlantı noktasındaki HTTP isteklerini çalıştırıyor ve dinliyor.

  10. Bu kez, alanda 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 seçeneğini tıklayabilirsiniz. Chat uygulamanız, geçen sefer olduğu gibi etkin şekilde hata ayıklaması sırasından yanıt vermiyor.

  11. Visual Studio Code hata ayıklayıcısından yürütmeye devam ettiğinizde, yerel ortamınızdaki ngrok uygulaması tarafından barındırılan web arayüzünden uygulamanın, Here was your message : Hello mesajını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 edinin:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login
    

    PROJECT_ID değerini, uygulamanın Cloud projesinin proje kimliğiyle değiştirin.

  2. googleworkspace/google-chat-samples deposunu GitHub'dan yerel ortamınıza klonlayın. Bu depoda uygulama kodu yer alır:

    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 google-chat-samples/python/avatar-app klasörünü açın.
    2. Python env için yeni bir sanal ortam oluşturun ve bu ortamı 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 dizinde .vscode/launch.json dosyasını oluşturun ve env sanal ortamında 9000 bağlantı noktasında, functions-framework modülünden uygulamayı tetikleyen Debug Watch adlı bir başlatma oluşturun.

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "python",
              "request": "launch",
              "name": "Debug Watch",
              "python": "${workspaceFolder}/env/bin/python3",
              "module": "functions_framework",
              "args": [
                  "--target", "hello_chat",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      
    5. main.py dosyasında HTTP isteği işlemesini duraklatan bir ayrılma noktası ekleyin ve daha önce eklediğiniz Debug Watch yapılandırmasıyla çalıştırmaya ve hata ayıklamaya başlayın. Uygulama şu anda 9000 bağlantı noktasındaki HTTP isteklerini çalıştırıyor ve dinliyor.

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

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    NGROK_STATIC_DOMAIN kısmını 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ırıldığı ve yönlendirildiği terminal

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

  5. Ayrıca, yerel ana makinenizde ngrok uygulaması tarafından bir web arayüzü başlatılır. Tarayıcıda açarak tüm etkinlikleri izleyebilirsiniz.

    "ngrok" uygulaması tarafından barındırılan ve hiçbir HTTP isteği göstermeyen web arayüzü

    5. Şekil. ngrok uygulaması tarafından barındırılan ve hiçbir 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 git

    • Yeni sohbet'i tıklayın.

    • İletişim kutusunda, Chat uygulamanızın adını girin.

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

    • Doğrudan mesaj alanına Hey! yazıp enter tuşuna basın. Chat uygulamanız, etkin olarak hata ayıklama işlemi gerçekleştirildiği için yanıt vermiyor.

  7. Yerel ortamınızdaki Visual Studio Code içinde yürütmenin ayarlanan ayrılma noktasında duraklatıldığını görebilirsiniz.

    Yürütme, ayarlanan ayrılma noktasında duraklatılır

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

  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ı mesajdaki adınız ve avatar resminizle 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ının barındırdığı web arayüzünden gelen HTTP isteği

    7.Şekil 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 değerini main.py dosyasının Hey satır içi 51 dosyasıyla değiştirin. Dosyayı kaydettiğinizde Visual Studio Code, uygulamayı güncellenmiş kaynak koduyla otomatik olarak yeniden yükler ve hata ayıklama modunda kalır.

    Uygulama, kod değişikliği yüklenmiş olarak "9000" bağlantı noktasındaki HTTP isteklerini çalıştırıyor ve dinliyor

    8. Şekil. Uygulama, kod değişikliği yüklenmiş olarak 9000 bağlantı noktasındaki HTTP isteklerini çalıştırıyor ve dinliyor.

  11. Bu kez, alanda 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 seçeneğini tıklayabilirsiniz. Chat uygulamanız, geçen sefer olduğu gibi etkin bir şekilde hata ayıklaması sırasından yanıt vermiyor.

  12. Visual Studio Code hata ayıklayıcısından yürütmeye devam ettiğinizde, yerel ortamınızdaki 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 edinin:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login
    

    PROJECT_ID değerini, uygulamanın Cloud projesinin proje kimliğiyle değiştirin.

  2. Yerel ortamınızda GitHub'dan googleworkspace/google-chat-samples deposunu 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 google-chat-samples/java/avatar-app klasörünü açın.
    2. pom.xml dosyasına Cloud Functions Framework derleme eklentisini function-maven-plugin ekleyerek Maven projesini 9000 bağlantı noktasında HelloChat uygulamasını 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>HelloChat</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 eklenen Remote Debug Watch adlı bir başlatma dosyasını 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. HelloChat.java dosyasında HTTP isteği işlemesini duraklatan bir ayrılma noktası ekleyin ve daha önce eklenen Remote Debug Watch yapılandırmasını kullanarak eklemeye ve hata ayıklamaya başlayın. Uygulama şu anda çalışıyor ve 9000 bağlantı noktasındaki HTTP isteklerini dinliyor.

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

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

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

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    NGROK_STATIC_DOMAIN kısmını 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ırıldığı ve yönlendirildiği terminal

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

  5. Ayrıca, yerel ana makinenizde ngrok uygulaması tarafından bir web arayüzü başlatılır. Tarayıcıda açarak tüm etkinlikleri izleyebilirsiniz.

    &quot;ngrok&quot; uygulaması tarafından barındırılan ve hiçbir HTTP isteği göstermeyen web arayüzü

    5. Şekil. ngrok uygulaması tarafından barındırılan ve hiçbir 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 git

    • Yeni sohbet'i tıklayın.

    • İletişim kutusunda, Chat uygulamanızın adını girin.

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

    • Doğrudan mesaj alanına Hey! yazıp enter tuşuna basın. Chat uygulamanız, etkin olarak hata ayıklama işlemi gerçekleştirildiği için yanıt vermiyor.

  7. Yerel ortamınızdaki Visual Studio Code içinde yürütmenin ayarlanan ayrılma noktasında duraklatıldığını görebilirsiniz.

    Yürütme, ayarlanan ayrılma noktasında duraklatılır

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

  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ı mesajdaki adınız ve avatar resminizle 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ının barındırdığı web arayüzünden gelen HTTP isteği

    7.Şekil 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 öğesini HelloChat.java dosyasının Hey satır içi 55 dosyasıyla değiştirin, mvnDebug işlemini yeniden başlatın ve hata ayıklamayı yeniden ekleyip yeniden başlatmak için Remote Debug Watch öğesini yeniden başlatın.

  11. Bu kez, alanda 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 seçeneğini tıklayabilirsiniz. Chat uygulamanız, geçen sefer olduğu gibi etkin şekilde hata ayıklaması sırasından yanıt vermiyor.

  12. Visual Studio Code hata ayıklayıcısından yürütmeye devam ettiğinizde, yerel ortamınızdaki 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.

Uzak ortamdan hata ayıkla

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

Uzak ortamdan
hata ayıkla

9. Şekil. Uzak ortamdan hata ayıklayın.

Ö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ü takip edebilir ve başlatmak için Chat uygulamanızı arayabilirsiniz.
  • Belirli bir bağlantı noktasında hata ayıklayıcı etkinken uzak ortamınızda çalışan uygulamanız bu kılavuzdaki talimatlarda REMOTE_DEBUG_PORT olarak belirtilmiştir.
  • Yerel ortamınız uzak ortamınıza ssh.
  • Yerel ortamınızda hata ayıklama yapabilen bir IDE (Entegre Geliştirme Ortamı) kurulumu. Bu kılavuzda açıklama amacıyla Visual Studio Code IDE ve varsayılan hata ayıklama özellikleri kullanılmaktadır.

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

Yerel ortamınızda hata ayıklama istemci bağlantısı başlatmak istediğiniz yerde 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ğlandı.

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 dizinde .vscode/launch.json dosyasını oluşturun ve yerel ortamınızdaki hata ayıklama bağlantı noktasına eklenen Debug Remote adlı bir lansman 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 öğesini, yerel ortamınızdaki hata ayıklama bağlantı noktasıyla değiştirin.

  3. Uygulamanızın kaynak koduna, HTTP isteği işlemesini duraklatan bir ayrılma noktası ekleyin ve daha önce eklediğiniz Debug Remote yapılandırmasıyla çalıştırmaya ve hata ayıklamaya başlayın.

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