Google Chat uygulamalarında hata ayıklama

Node.js

Python

Java

Node.js

• Yerel ortamınızda node ve npm'nin en son sürümleri yüklü olmalıdır.

• Yerel ortamınızda nodemon'nın en son sürümü yüklü olmalıdır. Bu 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ı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ızdır.

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

• Git Yerel ortamınıza yüklenmiş olmalıdır.

• ngrok hesabı.

Python

• Yerel ortamınızda python3'nın en son sürümü yüklü olmalıdır.
• Yerel ortamınıza yüklenmiş pip ve virtualenv'ın 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ı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ızdır.
• Yerel ortamınızda hata ayıklama yapabilen bir IDE'nin kurulu olması gerekir. Bu kılavuzda, açıklama amacıyla Visual Studio Code IDE ve varsayılan hata ayıklama özellikleri kullanılmaktadır.
• Git Yerel ortamınıza yüklenmiş olmalıdır.
• ngrok hesabı.
• Yerel ortamınızda gcloud'nın en son sürümü yüklü ve başlatılmış olmalıdır.

Java

• Yerel ortamınızda Java SE 11's JDK'in yüklü olduğu en son kararlı sürüm.
• Yerel ortamınızda Apache Maven yüklü olan 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ı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ızdır.
• Yerel ortamınızda hata ayıklama yapabilen bir IDE'nin kurulu olması gerekir. Bu kılavuzda, açıklama amacıyla Visual Studio Code IDE ve varsayılan hata ayıklama özellikleri kullanılmaktadır.
• Git Yerel ortamınıza yüklenmiş olmalıdır.
• ngrok hesabı.
• Yerel ortamınızda gcloud'nın en son sürümü yüklü ve başlatılmış olmalıdır.

Node.js

1. GitHub'dan googleworkspace/google-chat-samples deposunu 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ıza yüklenen Visual Studio Code IDE'sinde şunları yapın:

   1. Yeni bir pencerede klasörü açın google-chat-samples/node/basic-app.

   2. package.json dosyasına iki komut dosyası ekleyerek uygulamayı hata ayıklamayı otomatik yeniden yükleyecek şekilde 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ş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 ayrılma 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 bağlantı noktasındaki HTTP isteklerini dinliyor.

      

      3.Şekil 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önlendiriliyor.

   

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

4. Ayrıca, ngrok uygulama 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.

   

   5.şekil 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. Chat uygulamanız aktif olarak hata ayıklama işlemi yapıldığı 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.

   

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

7. Visual Studio Code hata ayıklayıcısından yürütmeye devam ettiğinizde, Google Chat, Chat uygulamasının zaman aşımına uğramasına izin vermeden önce Your message : Hello yanıtını 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 Your message yerine index.json öğesinin Here was your message satır içi 35 değerini kullanın. 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 kod değişikliği yüklenmiş olarak 9000 bağlantı noktasındaki HTTP isteklerini dinliyor.

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 kaydedilen son HTTP isteğini seçip Replay simgesini tıklayabilirsiniz. Son seferde olduğu gibi, Chat uygulamanız aktif olarak hata ayıklama işlemine tabi tutulduğu için yanıt vermiyor.

11. Visual Studio Code uygulamasının hata ayıklayıcısından yürütmeye devam ettiğinizde, yerel ortamınızda 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 bir yanıt oluşturduğunu görebilirsiniz.

Python

1. Uygulama Varsayılan Kimlik Bilgileri'nde 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ıza yüklenen Visual Studio Code IDE'sinde şunları yapın:

   1. Yeni bir pencerede klasörü açın google-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 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 9000 bağlantı noktasındaki functions-framework modülünden 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 ayrılma 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 bağlantı noktasındaki HTTP isteklerini dinliyor.

      

      3.Şekil 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önlendiriliyor.

   

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

5. Ayrıca, ngrok uygulama 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.

   

   5.şekil 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şlemine tabi tutulduğu 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.

   

   6.şekil 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ının Hey satır içi 51 değerini kullanı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 kod değişikliği yüklenmiş olarak 9000 bağlantı noktasındaki HTTP isteklerini dinliyor.

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 kaydedilen son HTTP isteğini seçip Replay simgesini tıklayabilirsiniz. Son seferde olduğu gibi, Chat uygulamanız aktif olarak hata ayıklama işlemi yapıldığı için yanıt vermiyor.

12. Visual Studio Code uygulamasının hata ayıklayıcısından 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 bir yanıt oluşturduğunu görebilirsiniz.

Java

1. Uygulama Varsayılan Kimlik Bilgileri'nde 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ıza yüklenen Visual Studio Code IDE'sinde şunları yapın:

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

   2. Google Cloud Functions Framework derleme eklentisini function-maven-plugin pom.xml dosyasına ekleyerek Maven projesini, uygulamayı yerel olarak App bağlantı noktası 9000 üzerinde ç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 ayrılma noktası ekleyin ve daha önce eklenen Remote Debug Watch yapılandırmasıyla ekleme ve hata ayıklama işlemlerine başlayın. Uygulama artık çalışıyor ve 9000 bağlantı noktasındaki HTTP isteklerini 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önlendiriliyor.

   

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

5. Ayrıca, ngrok uygulama 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.

   

   5.şekil 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şlemine tabi tutulduğu 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.

   

   6.şekil 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 of the App.java file yazın, 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, alana ikinci bir mesaj Hey! göndermek yerine yerel ortamınızda ngrok uygulaması tarafından barındırılan web arayüzünde kaydedilen son HTTP isteğini seçip Replay simgesini tıklayabilirsiniz. Son seferde olduğu gibi, Chat uygulamanız aktif olarak hata ayıklama işlemine tabi tutulduğu için yanıt vermiyor.

12. Visual Studio Code uygulamasının hata ayıklayıcısından 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 bir yanıt oluşturduğunu görebilirsiniz.