ניפוי באגים באפליקציות Google Chat

ייתכן שמפתחים של אפליקציות Google Chat יצטרכו להריץ ניפוי באגים בקוד כדי לבדוק את השינויים או לפתור בעיות מורכבות. אפשר לבצע ניפוי באגים באפליקציות ל-Chat בדרכים שונות, בהתאם לארכיטקטורה של האפליקציה, לפעולות שהיא מבצעת, לאופן הפריסה של האפליקציה ולהעדפות שלכם.

בדף הזה נסביר איך לנפות באגים באפליקציית HTTP Chat באמצעות ngrok, פלטפורמה מאוחדת לתעבורת נתונים נכנסת (ingress) שאפשר להשתמש בה כדי לבדוק סביבות פיתוח מקומיות. במדריך הזה תלמדו איך לבדוק את השינויים בקוד בסביבה מקומית ולפתור בעיות בסביבה מרוחקת.

ניפוי באגים מסביבת פיתוח מקומית

בקטע הזה, תצטרכו לבצע פעולות עם אפליקציית Chat שפועלת בסביבה המקומית.

ניפוי באגים מסביבת פיתוח מקומית

איור 1. ניפוי באגים בסביבת פיתוח מקומית.

סדנה

Node.js

Python

Java

דרישות מוקדמות

Node.js

Python

Java

הפיכת שירות האירוח המקומי לזמין באופן ציבורי

אתם צריכים לחבר את הסביבה המקומית שלכם לאינטרנט כדי שלאפליקציית Chat תהיה גישה אליה. האפליקציה ngrok משמשת להפניה אוטומטית של בקשות HTTP שנשלחות לכתובת URL ציבורית אל הסביבה המקומית שלכם.

  1. בדפדפן שבסביבה המקומית, נכנסים לחשבון ngrok.
  2. מתקינים את האפליקציה ומגדירים את authtoken בסביבה המקומית.
  3. יוצרים דומיין סטטי בחשבון ngrok. הוא מופיע כ-NGROK_STATIC_DOMAIN בהוראות שבמדריך זה.

הגדרה של אפליקציית Chat

מגדירים את האפליקציה של Chat כך שתשלח את כל בקשות ה-HTTP לדומיין הסטטי.

  1. במסוף Google Cloud, פותחים את הדף של Google Chat API:

    לדף Google Chat API

  2. לוחצים על הכרטיסייה Configuration.

  3. נכנסים אל Interactive features > Connection settings (הגדרות חיבור) ומגדירים את הערך בשדה הטקסט כתובת URL של האפליקציה כך:

    https://NGROK_STATIC_DOMAIN
    

    מחליפים את NGROK_STATIC_DOMAIN בדומיין הסטטי בחשבון ngrok.

  4. לוחצים על שמירה.

אפליקציית Chat שולחת את כל בקשות ה-HTTP לדומיין הסטטי.

איור 2. אפליקציית Chat שולחת את כל בקשות ה-HTTP לדומיין הסטטי. השירות הציבורי ngrok משמש כגשר בין אפליקציית Chat לבין קוד האפליקציה שמופעל באופן מקומי.

בדיקת האפליקציה של Chat

תוכלו לפרוס באופן מקומי את אפליקציית Chat, להגדיר אותה, לבדוק אותה, לנפות באגים ולטעון אותה מחדש באופן אוטומטי.

Node.js

  1. משכפלים את המאגר של googleworkspace/google-chat-samples מ-GitHub לסביבה המקומית, והוא מכיל את קוד האפליקציה שצריך להפעיל:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  2. מה-IDE של Visual Studio Code שמותקן בסביבה המקומית:

    1. בחלון חדש, פותחים את התיקייה google-chat-samples/node/basic-app.
    2. כדי להגדיר את האפליקציה לניפוי באגים בטעינה מחדש באופן אוטומטי, מוסיפים שני סקריפטים בקובץ package.json:

      {
          ...
          "scripts": {
              ...
              "debug": "node --inspect index.js",
              "debug-watch": "nodemon --watch ./ --exec npm run debug"
          }
          ...
      }
      
    3. מספריית השורש, מתקינים את האפליקציה:

      npm install
      
    4. יוצרים ומגדירים הפעלה בשם Debug Watch שמפעילה את הסקריפט debug-watch על ידי יצירת הקובץ .vscode/launch.json בספריית השורש:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "node",
              "request": "launch",
              "name": "Debug Watch",
              "cwd": "${workspaceRoot}",
              "runtimeExecutable": "npm",
              "runtimeArgs": ["run-script", "debug-watch"]
          }]
      }
      
    5. מוסיפים נקודת עצירה (breakpoint) שמשהה את העיבוד של בקשת ה-HTTP בקובץ index.js, ומתחילים להריץ ולנפות באגים לפי ההגדרות הקודמות של Debug Watch. האפליקציה פועלת עכשיו ומאזינה לבקשות HTTP ביציאה 9000.

      האפליקציה פועלת ומאזינה לבקשות HTTP ביציאה '9000'

      איור 3. האפליקציה פועלת ומאזינה לבקשות HTTP ביציאה 9000.

  3. מפעילים את האפליקציה ngrok בסביבה המקומית:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    מחליפים את NGROK_STATIC_DOMAIN בדומיין הסטטי בחשבון ngrok. כל הבקשות מופנות לסביבה המקומית וליציאה שבה משתמשת האפליקציה.

    הטרמינל עם שרת 'ngrok' פועל ומפנה מחדש

    איור 4. הטרמינל עם השרת ngrok פועל ומפנה לכתובת אחרת.

  4. בנוסף, ממשק אינטרנט מופעל במארח המקומי באמצעות האפליקציה ngrok. תוכלו לעקוב אחר כל הפעילויות על ידי פתיחת הממשק בדפדפן.

    ממשק האינטרנט שמתארח באפליקציה 'ngrok' ולא מציג בקשות HTTP

    איור 5. ממשק האינטרנט שמתארח באפליקציה ngrok שלא מציג בקשות HTTP.

  5. כדי לבדוק את אפליקציית Chat, צריך לשלוח לה הודעה בצ'אט אישי:

    • פותחים את Google Chat.

      כניסה ל-Google Chat

    • לוחצים על צ'אט חדש .

    • בתיבת הדו-שיח, כותבים את השם של אפליקציית Chat.

    • מוצאים את אפליקציית Chat בתוצאות החיפוש ולוחצים על Add > Chat.

    • כותבים Hello במרחב המשותף של הצ'אט האישי ומקישים על enter. אפליקציית Chat לא מגיבה כי מתבצע בה ניפוי באגים פעיל.

  6. בפונקציה Visual Studio Code בסביבה המקומית אפשר לראות שההפעלה מושהית בנקודת העצירה (breakpoint) שהוגדרה.

    הביצוע מושהה בנקודת העצירה שהוגדרה

    איור 6. ההפעלה מושהית בנקודת העצירה (breakpoint) שהוגדרה.

  7. כשממשיכים את ההרצה מהכלי לניפוי באגים של Visual Studio Code, לפני שמסתיימת הזמן הקצוב לתפוגה של אפליקציית Chat מתקבלת מ-Your message : Hello.

  8. אפשר לבדוק את בקשת ה-HTTP ואת יומני התגובה מתוך ממשק האינטרנט שמתארח באפליקציה ngrok בסביבה המקומית.

    בקשת ה-HTTP מממשק האינטרנט שמתארח באפליקציה 'ngrok'

    איור 7. בקשת ה-HTTP מממשק האינטרנט שמתארח באפליקציה ngrok.

  9. כדי לשנות את התנהגות האפליקציה, מחליפים את Your message ב-Here was your message 35 בתוך index.json. כששומרים את הקובץ, nodemon טוען מחדש באופן אוטומטי את האפליקציה עם קוד המקור המעודכן, ו-Visual Studio Code נשאר במצב ניפוי באגים.

    האפליקציה פועלת ומאזינה לבקשות HTTP ביציאה '9000' כששינוי הקוד נטען

    איור 8. האפליקציה פועלת ומאזינה לבקשות HTTP ביציאה 9000 כששינוי הקוד נטען.

  10. הפעם, במקום לשלוח הודעה שנייה Hello במרחב המשותף, תוכלו לבחור את בקשת ה-HTTP האחרונה שמחוברת לממשק האינטרנט שמתארח באפליקציה ngrok בסביבה המקומית שלכם, ואז ללחוץ על Replay. כמו בפעם הקודמת, אפליקציית Chat לא מגיבה כי מתבצע בה ניפוי באגים באופן פעיל.

  11. כשממשיכים את ההפעלה מהכלי לניפוי באגים של Visual Studio Code, בממשק המקומי של האפליקציה ngrok אפשר לראות שהאפליקציה מייצרת תגובה עם הגרסה המעודכנת של ההודעה Here was your message : Hello.

Python

  1. מקבלים פרטי כניסה של משתמשים חדשים לשימוש ב-Application Default Credentials:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login
    

    מחליפים את PROJECT_ID במזהה הפרויקט של האפליקציה ב-Cloud.

  2. משכפלים את המאגר של googleworkspace/google-chat-samples מ-GitHub לסביבה המקומית, והוא מכיל את קוד האפליקציה:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  3. מה-IDE של Visual Studio Code שמותקן בסביבה המקומית:

    1. בחלון חדש, פותחים את התיקייה google-chat-samples/python/avatar-app.
    2. יוצרים סביבה וירטואלית חדשה ל-Python env ומפעילים אותה:

      virtualenv env
      source env/bin/activate
      
    3. מתקינים את כל יחסי התלות של הפרויקטים באמצעות pip בסביבה הווירטואלית:

      pip install -r requirements.txt
      
    4. יוצרים את הקובץ .vscode/launch.json בספריית הבסיס ומגדירים השקה בשם Debug Watch שמפעילה את האפליקציה מהמודול functions-framework ביציאה 9000 במצב ניפוי באגים בסביבה הווירטואלית env:

      {
          "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. מוסיפים נקודת עצירה (breakpoint) שמשהה את העיבוד של בקשת ה-HTTP בקובץ main.py, ומתחילים להריץ ולנפות באגים לפי ההגדרות הקודמות של Debug Watch. האפליקציה פועלת עכשיו ומאזינה לבקשות HTTP ביציאה 9000.

      האפליקציה פועלת ומאזינה לבקשות HTTP ביציאה '9000'

      איור 3. האפליקציה פועלת ומאזינה לבקשות HTTP ביציאה 9000.

  4. מפעילים את האפליקציה ngrok בסביבה המקומית:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    מחליפים את NGROK_STATIC_DOMAIN בדומיין הסטטי בחשבון ngrok. כל הבקשות מופנות לסביבה המקומית וליציאה שבה משתמשת האפליקציה.

    הטרמינל עם שרת 'ngrok' פועל ומפנה מחדש

    איור 4. הטרמינל עם השרת ngrok פועל ומפנה לכתובת אחרת.

  5. בנוסף, ממשק אינטרנט מופעל במארח המקומי באמצעות האפליקציה ngrok. תוכלו לעקוב אחר כל הפעילויות על ידי פתיחת הממשק בדפדפן.

    ממשק האינטרנט שמתארח באפליקציה 'ngrok' ולא מציג בקשות HTTP

    איור 5. ממשק האינטרנט שמתארח באפליקציה ngrok שלא מציג בקשות HTTP.

  6. כדי לבדוק את אפליקציית Chat, צריך לשלוח לה הודעה בצ'אט אישי:

    • פותחים את Google Chat.

      כניסה ל-Google Chat

    • לוחצים על צ'אט חדש .

    • בתיבת הדו-שיח, כותבים את השם של אפליקציית Chat.

    • מוצאים את אפליקציית Chat בתוצאות החיפוש ולוחצים על Add > Chat.

    • כותבים Hey! במרחב המשותף של הצ'אט האישי ומקישים על enter. אפליקציית Chat לא מגיבה כי מתבצע בה ניפוי באגים פעיל.

  7. בפונקציה Visual Studio Code בסביבה המקומית אפשר לראות שההפעלה מושהית בנקודת העצירה (breakpoint) שהוגדרה.

    הביצוע מושהה בנקודת העצירה שהוגדרה

    איור 6. ההפעלה מושהית בנקודת העצירה (breakpoint) שהוגדרה.

  8. כשממשיכים את ההפעלה מהכלי לניפוי באגים של Visual Studio Code, לפני ש-Google Chat יפסיק להגיב להודעה עם השם ותמונת הדמות שלכם.

  9. אפשר לבדוק את בקשת ה-HTTP ואת יומני התגובה מתוך ממשק האינטרנט שמתארח באפליקציה ngrok בסביבה המקומית.

    בקשת ה-HTTP מממשק האינטרנט שמתארח באפליקציה 'ngrok'

    איור 7. בקשת ה-HTTP מממשק האינטרנט שמתארח באפליקציה ngrok.

  10. כדי לשנות את התנהגות האפליקציה, מחליפים את Hello ב-Hey בתוך הקובץ 51 מתוך הקובץ main.py. כששומרים את הקובץ, האפליקציה Visual Studio Code טוענת מחדש באופן אוטומטי את האפליקציה עם קוד המקור המעודכן ונשארת במצב ניפוי באגים.

    האפליקציה פועלת ומאזינה לבקשות HTTP ביציאה '9000' כששינוי הקוד נטען

    איור 8. האפליקציה פועלת ומאזינה לבקשות HTTP ביציאה 9000 כששינוי הקוד נטען.

  11. הפעם, במקום לשלוח הודעה שנייה Hey! במרחב המשותף, תוכלו לבחור את בקשת ה-HTTP האחרונה שמחוברת לממשק האינטרנט שמתארח באפליקציה ngrok בסביבה המקומית שלכם, ואז ללחוץ על Replay. כמו בפעם הקודמת, אפליקציית Chat לא מגיבה כי מתבצע בה ניפוי באגים פעיל.

  12. כשממשיכים את ההפעלה מהכלי לניפוי באגים של Visual Studio Code, בממשק המקומי של האפליקציה ngrok אפשר לראות שהאפליקציה מייצרת תגובה עם הגרסה המעודכנת של ההודעה.

Java

  1. מקבלים פרטי כניסה של משתמשים חדשים לשימוש ב-Application Default Credentials:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login
    

    מחליפים את PROJECT_ID במזהה הפרויקט של האפליקציה ב-Cloud.

  2. משכפלים את המאגר googleworkspace/google-chat-samples מ-GitHub בסביבה המקומית, והוא מכיל את קוד האפליקציה:

    git clone https://github.com/googleworkspace/google-chat-samples.git
    
  3. מה-IDE של Visual Studio Code שמותקן בסביבה המקומית:

    1. בחלון חדש, פותחים את התיקייה google-chat-samples/java/avatar-app.
    2. מגדירים את הפרויקט ב-Maven כך שיריץ את האפליקציה HelloChat ביציאה 9000 באופן מקומי, על ידי הוספת פלאגין ה-build של Cloud Functions Framework function-maven-plugin בקובץ pom.xml:

      ...
      <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. עכשיו אפשר להפעיל אותו באופן מקומי במצב ניפוי באגים:

      mvnDebug function:run
      Preparing to execute Maven in debug mode
      Listening for transport dt_socket at address: 8000
      
    4. יוצרים את הקובץ .vscode/launch.json בספריית הבסיס ומגדירים הפעלה בשם Remote Debug Watch שמצורפת לאפליקציה שהופעלה בעבר עם יציאה 8000:

      {
          "version": "0.2.0",
          "configurations": [{
              "type": "java",
              "request": "attach",
              "name": "Remote Debug Watch",
              "projectName": "http-function",
              "hostName": "localhost",
              "port": 8000
          }]
      }
      
    5. מוסיפים נקודת עצירה (breakpoint) שמשהה את העיבוד של בקשת ה-HTTP בקובץ HelloChat.java, ומתחילים לצרף ולנפות באגים לפי ההגדרות הקודמות של Remote Debug Watch. האפליקציה פועלת עכשיו ומאזינה לבקשות HTTP ביציאה 9000.

      האפליקציה פועלת ומאזינה לבקשות HTTP ביציאה &#39;9000&#39;

      איור 3. האפליקציה שלו פועלת ומאזינה לבקשות HTTP ביציאה 9000.

  4. מפעילים את האפליקציה ngrok בסביבה המקומית:

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000
    

    מחליפים את NGROK_STATIC_DOMAIN בדומיין הסטטי בחשבון ngrok. כל הבקשות מופנות לסביבה המקומית וליציאה שבה משתמשת האפליקציה.

    הטרמינל עם שרת &#39;ngrok&#39; פועל ומפנה מחדש

    איור 4. הטרמינל עם השרת ngrok פועל ומפנה לכתובת אחרת.

  5. בנוסף, ממשק אינטרנט מופעל במארח המקומי באמצעות האפליקציה ngrok. תוכלו לעקוב אחר כל הפעילויות על ידי פתיחת הממשק בדפדפן.

    ממשק האינטרנט שמתארח באפליקציה &#39;ngrok&#39; ולא מציג בקשות HTTP

    איור 5. ממשק האינטרנט שמתארח באפליקציה ngrok שלא מציג בקשות HTTP.

  6. כדי לבדוק את אפליקציית Chat, צריך לשלוח לה הודעה בצ'אט אישי:

    • פותחים את Google Chat.

      כניסה ל-Google Chat

    • לוחצים על צ'אט חדש .

    • בתיבת הדו-שיח, כותבים את השם של אפליקציית Chat.

    • מוצאים את אפליקציית Chat בתוצאות החיפוש ולוחצים על Add > Chat.

    • כותבים Hey! במרחב המשותף של הצ'אט האישי ומקישים על enter. אפליקציית Chat לא מגיבה כי מתבצע בה ניפוי באגים פעיל.

  7. בפונקציה Visual Studio Code בסביבה המקומית אפשר לראות שההפעלה מושהית בנקודת העצירה (breakpoint) שהוגדרה.

    הביצוע מושהה בנקודת העצירה שהוגדרה

    איור 6. ההפעלה מושהית בנקודת העצירה (breakpoint) שהוגדרה.

  8. כשממשיכים את ההפעלה מהכלי לניפוי באגים של Visual Studio Code, לפני ש-Google Chat יפסיק להגיב להודעה עם השם ותמונת הדמות שלכם.

  9. אפשר לבדוק את בקשת ה-HTTP ואת יומני התגובה מתוך ממשק האינטרנט שמתארח באפליקציה ngrok בסביבה המקומית.

    בקשת ה-HTTP מממשק האינטרנט שמתארח באפליקציה &#39;ngrok&#39;

    איור 7. בקשת ה-HTTP מממשק האינטרנט שמתארח באפליקציה ngrok.

  10. כדי לשנות את התנהגות האפליקציה, יש להחליף את Hello ב-Hey מוטבע 55 של הקובץ HelloChat.java, להפעיל מחדש את התהליך mvnDebug ולהפעיל מחדש את Remote Debug Watch כדי לצרף מחדש ולהפעיל מחדש את ניפוי הבאגים.

  11. הפעם, במקום לשלוח הודעה שנייה Hey! במרחב המשותף, תוכלו לבחור את בקשת ה-HTTP האחרונה שמחוברת לממשק האינטרנט שמתארח באפליקציה ngrok בסביבה המקומית שלכם, ואז ללחוץ על Replay. כמו בפעם הקודמת, אפליקציית Chat לא מגיבה כי מתבצע בה ניפוי באגים באופן פעיל.

  12. כשממשיכים את ההפעלה מהכלי לניפוי באגים של Visual Studio Code, בממשק המקומי של האפליקציה ngrok אפשר לראות שהאפליקציה מייצרת תגובה עם הגרסה המעודכנת של ההודעה.

ניפוי באגים מהסביבה המרוחקת

בקטע הזה, תצטרכו לתקשר עם אפליקציית Chat שפועלת בסביבה מרוחקת.

ניפוי באגים מהסביבה
המרחוק

איור 9. ניפוי באגים מהסביבה המרוחקת.

דרישות מוקדמות

  • מרחב משותף לצ'אט אישי עם אפליקציית Chat. כדי לפתוח את אפליקציית Chat, תוכלו להיעזר בקטע בדיקת אפליקציית Chat שבמדריך למתחילים.
  • האפליקציה שפועלת בסביבה המרוחקת כשהכלי לניפוי באגים מופעל ביציאה מסוימת, מופיע כ-REMOTE_DEBUG_PORT בהוראות של המדריך.
  • הסביבה המקומית שלך יכולה ssh אל הסביבה המרוחקת שלך.
  • סביבת פיתוח משולבת (IDE) שמוגדרת בסביבה המקומית שיכולה לנפות באגים. למטרות המחשה, אנחנו משתמשים ב-Visual Studio Code IDE ובתכונות ברירת המחדל לניפוי באגים.

חיבור בין הסביבה המקומית לסביבות המרוחקות

בסביבה המקומית שממנה רוצים להתחיל חיבור לקוח לניפוי באגים, מגדירים מנהרת SSH:

ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS

מחליפים את מה שכתוב בשדות הבאים:

  • LOCAL_DEBUG_PORT: יציאת ניפוי הבאגים בסביבה המקומית.
  • REMOTE_USERNAME: שם המשתמש בסביבה המרוחקת שלך.
  • REMOTE_ADDRESS: הכתובת של הסביבה המרוחקת.
  • REMOTE_DEBUG_PORT: יציאת ניפוי הבאגים בסביבה המרוחקת.

יציאת ניפוי הבאגים בסביבה המקומית מקושרת עכשיו ליציאת ניפוי הבאגים בסביבה המרוחקת.

התחלת ניפוי באגים

מה-IDE של Visual Studio Code שמותקן בסביבה המקומית:

  1. בחלון חדש, פותחים את קוד המקור של האפליקציה.
  2. יוצרים את הקובץ .vscode/launch.json בספריית הבסיס ומגדירים הפעלה בשם Debug Remote שמתחבר ליציאת ניפוי הבאגים בסביבה המקומית:

    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 ביציאת ניפוי הבאגים בסביבה המקומית.

  3. מוסיפים נקודת עצירה (breakpoint) בקוד המקור של האפליקציה שמשהה את העיבוד של בקשת ה-HTTP, ומתחילים להריץ ולנפות באגים כשמוסיפים את ההגדרות Debug Remote לפני כן.

במרחב המשותף של הצ'אט עם אפליקציית Chat, כותבים כל מה שרוצים לבדוק ולוחצים על enter. אפליקציית Chat לא מגיבה כי מתבצע בה ניפוי באגים באופן פעיל בסביבת הפיתוח המשולבת (IDE) של Visual Studio Code.