Google Chat uygulamalarında hata ayıklama

Node.js

Python

Java

Node.js

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

• Yerel ortamınızda yüklü nodemon'nin en son sürümü. Otomatik yeniden 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ılavuzundaki Ön koşullar, Ortam oluşturma ve Uygulamayı Google Chat'te yayınlama bölümlerini inceleyebilirsiniz. Tek fark, uygulama adını Debug App olarak ve HTTP uç noktası URL'sini http://example.com gibi bir değere ayarlamanız gerektiğidir.

• 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.

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

• ngrok hesabı

Python

• Yerel ortamınızda python3'ın en son sürümünün yüklü olması gerekir.
• Yerel ortamınızda yüklü pip ve virtualenv'in en son sürümü. Bunlar 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ılavuzundaki Ön koşullar, Ortam oluşturma ve Uygulamayı Google Chat'te yayınlama bölümlerini inceleyebilirsiniz. Tek fark, Uygulama adı'nı Debug App ve HTTP uç nokta URL'sini http://example.com gibi bir değere ayarlamanız gerektiğidir.
• Yerel ortamınızda hata ayıklama yapabilen bir IDE ayarlanmış. Bu kılavuzdaki Visual Studio Code IDE ve varsayılan hata ayıklama özellikleri açıklama amaçlı olarak kullanılmıştır.
• Git yerel ortamınızda yüklenir.
• ngrok hesabı
• En son gcloud sürümü yerel ortamınızda yüklü ve başlatıldı.

Java

• Yerel ortamınızda Java SE 11's JDK yüklü en son kararlı sürümü.
• Yerel ortamınızda yüklü Apache Maven'ın en son 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ılavuzu'nun Ön koşullar, Ortamyı ayarlama ve Uygulamayı Google Chat'te yayınlama bölümlerini takip edebilirsiniz. Tek fark, uygulama adını Debug App olarak ve HTTP uç noktası URL'sini http://example.com gibi bir değere ayarlamanız gerektiğidir.
• 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.
• Git yerel ortamınızda yüklenir.
• ngrok hesabı
• Yerel ortamınızda gcloud'ın en son sürümünün yüklü ve başlatılmış olması gerekir.

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 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. 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 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 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 şu anda 9000 bağlantı noktasındaki HTTP isteklerini çalıştırıyor ve 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.

   

   4.Şekil ngrok sunucusunun çalıştığı ve yönlendirdiğ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.

   

   Ş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 add tıklayın.

   • İletişim kutusunda, 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.

   

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

7. 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ı Your message : Hello yanıt 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.

   

   Ş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.

   

   Şekil 8. Uygulama, kod değişikliği yüklü olarak çalışıyor ve 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, geçen sefer olduğu gibi etkin şekilde hata ayıklaması sırasından 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 şu anda 9000 bağlantı noktasındaki HTTP isteklerini çalıştırıyor ve 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.

   

   4.Şekil ngrok sunucusunun çalıştığı ve yönlendirdiğ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.

   

   Ş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 add tıklayın.

   • İletişim kutusunda, 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ıp 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'te, 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. 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.

   

   Ş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 koduyla otomatik olarak yeniden yükler ve hata ayıklama modunda kalır.

    

    8. Şekil. 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 önceki 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. 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 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 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. App.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, çalışmaya ve 9000 bağlantı noktasındaki HTTP isteklerini dinlemeye başlar.

      

      Ş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.

   

   4.Şekil ngrok sunucusunun çalıştığı ve yönlendirdiğ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.

   

   Ş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 git

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

   • İletişim kutusunda, 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'te, 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. 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.

   

   Ş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ında Hello'ü Hey ile değiştirin, mvnDebug sürecini yeniden başlatın ve hata ayıklamayı yeniden bağlayıp yeniden başlatmak için Remote Debug Watch'i 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çebilir ve Replay simgesini tıklayabilirsiniz. Chat uygulamanız, aktif olarak hata ayıklandığı için önceki sefer olduğu 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.