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

Node.js

Python

Java

Node.js

• הגרסאות האחרונות של node ושל npm מותקנות בסביבה המקומית שלכם.

• הגרסה האחרונה של nodemon מותקנת בסביבה המקומית שלכם, והיא משמשת למטרות של הוספת כסף אוטומטית:

  npm install -g nodemon

• אפליקציית Chat עם HTTP שהוגדרה לשליחת הודעות. אפשר לעקוב אחרי ההוראות שבקטעים Prerequisites (דרישות מוקדמות), Set up the environment (הגדרת הסביבה) ו-Publish the app to Google Chat (פרסום האפליקציה ב-Google Chat) שבמדריך למתחילים. ההבדלים היחידים הם שצריך להגדיר את שם האפליקציה ל-Debug App ואת כתובת נקודת הקצה של HTTP לכל דבר, למשל http://example.com.

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

• ‫Git installed בסביבה המקומית.

• חשבון ngrok.

Python

• הגרסה האחרונה של python3 מותקנת בסביבה המקומית.
• הגרסה העדכנית של pip ושל virtualenv מותקנת בסביבה המקומית שלכם, והיא משמשת לניהול חבילות Python וסביבות וירטואליות בהתאמה.
• אפליקציית Chat עם HTTP שהוגדרה לשליחת הודעות. אפשר לעקוב אחרי ההוראות שבקטעים Prerequisites (דרישות מוקדמות), Set up the environment (הגדרת הסביבה) ו-Publish the app to Google Chat (פרסום האפליקציה ב-Google Chat) שבמדריך למתחילים. ההבדלים היחידים הם שצריך להגדיר את שם האפליקציה ל-Debug App ואת כתובת נקודת הקצה של HTTP לכל דבר, למשל http://example.com.
• סביבת פיתוח משולבת (IDE) שמוגדרת בסביבה המקומית ויכולה לבצע ניפוי באגים. במדריך הזה אנחנו משתמשים ב-Visual Studio Code IDE ובתכונות ברירת המחדל של ניפוי הבאגים שלו למטרות המחשה.
• ‫Git installed בסביבה המקומית.
• חשבון ngrok.
• הגרסה העדכנית של gcloud מותקנת ומאותחלת בסביבה המקומית.

Java

• הגרסה היציבה האחרונה של Java SE 11's JDK מותקנת בסביבה המקומית.
• הגרסה האחרונה של Apache Maven מותקנת בסביבה המקומית שלכם, והיא משמשת לניהול פרויקטים של Java.
• אפליקציית Chat עם HTTP שהוגדרה לשליחת הודעות. אפשר לעקוב אחרי ההוראות שבקטעים Prerequisites (דרישות מוקדמות), Set up the environment (הגדרת הסביבה) ו-Publish the app to Google Chat (פרסום האפליקציה ב-Google Chat) שבמדריך למתחילים. ההבדלים היחידים הם שצריך להגדיר את שם האפליקציה ל-Debug App ואת כתובת נקודת הקצה של HTTP לכל דבר, למשל http://example.com.
• סביבת פיתוח משולבת (IDE) שמוגדרת בסביבה המקומית ויכולה לבצע ניפוי באגים. במדריך הזה אנחנו משתמשים ב-Visual Studio Code IDE ובתכונות ברירת המחדל של ניפוי הבאגים שלו למטרות המחשה.
• ‫Git installed בסביבה המקומית.
• חשבון ngrok.
• הגרסה העדכנית של gcloud מותקנת ומאותחלת בסביבה המקומית.

Node.js

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

   git clone https://github.com/googleworkspace/google-chat-samples.git

2. בסביבת הפיתוח המשולבת (Visual Studio Code IDE) שהתקנתם בסביבה המקומית:

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

      

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

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

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

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

   

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

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

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

     מעבר אל Google Chat

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

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

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

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

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

   

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

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

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

   

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

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

   

   איור 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 במזהה הפרויקט של פרויקט הענן של האפליקציה.

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

   git clone https://github.com/googleworkspace/google-chat-samples.git

3. בסביבת הפיתוח המשולבת (Visual Studio Code IDE) שהתקנתם בסביבה המקומית:

   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", "avatar_app",
                  "--port", "9000",
                  "--debug"
              ]
          }]
      }
      

   5. מוסיפים נקודת עצירה שגורמת להשהיית העיבוד של בקשת ה-HTTP בקובץ main.py, ומתחילים להריץ ולנפות באגים באמצעות ההגדרה Debug Watch שנוספה קודם. האפליקציה פועלת עכשיו ומאזינה לבקשות HTTP ביציאה 9000.

      

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

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

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

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

   

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

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

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

     מעבר אל Google Chat

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

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

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

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

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

   

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

8. כשממשיכים את ההפעלה ממאגר הבאגים של Visual Studio Code לפני שחלף הזמן הקצוב לתגובה של אפליקציית Chat ב-Google Chat האפליקציה משיבה עם השם ותמונת האווטאר שלכם בהודעה.

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

   

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

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

    

    איור 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 במזהה הפרויקט של פרויקט הענן של האפליקציה.

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

   git clone https://github.com/googleworkspace/google-chat-samples.git

3. בסביבת הפיתוח המשולבת (Visual Studio Code IDE) שהתקנתם בסביבה המקומית:

   1. בחלון חדש, פותחים את התיקייה google-chat-samples/java/avatar-app.

   2. מגדירים את פרויקט Maven להרצת האפליקציה App ביציאה 9000 באופן מקומי על ידי הוספת התוסף function-maven-plugin של Google Cloud Functions Framework לבנייה בקובץ pom.xml:

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

      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. מוסיפים נקודת עצירה שגורמת להשהיית העיבוד של בקשת ה-HTTP בקובץ App.java, ומתחילים לצרף ולנפות באגים באמצעות ההגדרה Remote Debug Watch שנוספה קודם. האפליקציה פועלת עכשיו ומאזינה לבקשות HTTP ביציאה 9000.

      

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

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

   ngrok http --domain=NGROK_STATIC_DOMAIN 9000

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

   

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

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

   

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

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

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

     מעבר אל Google Chat

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

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

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

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

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

   

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

8. כשממשיכים את ההפעלה ממאגר הבאגים של Visual Studio Code לפני שחלף הזמן הקצוב לתגובה של אפליקציית Chat ב-Google Chat האפליקציה משיבה עם השם ותמונת האווטאר שלכם בהודעה.

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

   

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

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

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

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