תחילת העבודה עם Google Antigravity

1. מבוא

ב-codelab הזה תלמדו על Google Antigravity (שנקראת Antigravity בהמשך המסמך), פלטפורמה לפיתוח מבוסס-סוכנים, שמשנה את סביבת הפיתוח המשולבת (IDE) לעידן שבו הסוכנים הם במקום הראשון.

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

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

מה תלמדו

  1. התקנה והגדרה של Antigravity
  2. הסבר על מושגי יסוד ב-Antigravity כמו Agent Manager, ‏ Editor, ‏ Browser ועוד
  3. תרחישים לדוגמה לשימוש ב-Antigravity

מה תצטרכו

התכונה 'אנטי-כבידה' זמינה כרגע כגרסת טרום-השקה לחשבונות Gmail אישיים. הוא כולל מכסת שימוש בחינם במודלים מתקדמים.

צריך להתקין את Antigravity באופן מקומי במערכת. המוצר זמין ב-Mac, ב-Windows ובגרסאות ספציפיות של Linux. בנוסף למחשב שלכם, תצטרכו את הדברים הבאים:

  • דפדפן האינטרנט Chrome
  • חשבון Gmail (חשבון Gmail אישי).

ה-codelab הזה מיועד למשתמשים ולמפתחים בכל הרמות (כולל מתחילים).

2. התקנה

נתחיל בהתקנה של Antigravity. המוצר זמין כרגע בתצוגה מקדימה, ואפשר להשתמש בחשבון Gmail אישי כדי להתחיל להשתמש בו.

עוברים לדף הורדות ולוחצים על הגרסה המתאימה של מערכת ההפעלה שרלוונטית למקרה שלכם. מפעילים את קובץ ההתקנה של האפליקציה ומתקינים אותה במחשב. אחרי שמסיימים את ההתקנה, מפעילים את אפליקציית Antigravity. אמור להופיע מסך שדומה לזה:

29fada39721093c.png

לוחצים על הבא בכל פעם. השלבים העיקריים מפורטים בהמשך:

  • Choose setup flow: תוצג לכם אפשרות לייבא מההגדרות הקיימות של VS Code או Cursor. נתחיל מחדש.
  • Choose an Editor theme type. אנחנו נשתמש בעיצוב הכהה, אבל הבחירה תלויה בהעדפה שלך.
  • How do you want to use Antigravity agent:

cf89c9d16394914c.png

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

לפני שנצלול לאפשרויות, נבחן שתי מאפיינים ספציפיים (שמופיעים משמאל לתיבת הדו-שיח):

מדיניות ההפעלה של Terminal

הכוונה היא לתת לסוכן את היכולת להריץ פקודות (אפליקציות או כלים) בטרמינל. יש כאן שלוש אפשרויות.

  • Off: אף פעם לא להפעיל אוטומטית פקודות בטרמינל (למעט פקודות שנמצאות ברשימת ההיתרים שניתנת להגדרה)
  • Auto: הסוכן מחליט אם להפעיל אוטומטית פקודת מסוף נתונה. אם האפליקציה תצטרך את ההרשאה שלכם, היא תחליט ותבקש אותה.
  • Turbo: הפעלה אוטומטית תמיד של פקודות בטרמינל (למעט פקודות ברשימת דחייה שאפשר להגדיר)

מדיניות הביקורות

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

  • Always Proceed: הסוכן אף פעם לא מבקש ביקורת
  • Agent Decides: הסוכן יחליט מתי לבקש ביקורת
  • Request Review: הנציג תמיד מבקש משוב

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

4 האפשרויות הן:

  • פיתוח מבוסס-סוכן
  • פיתוח בעזרת נציג
  • פיתוח מבוסס-ביקורות
  • הגדרות בהתאמה אישית

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

לכן, כדאי לבחור את האפשרות המומלצת.

  • Configure your Editor: בוחרים את ההעדפות הרצויות.
  • Sign in to Google: כמו שצוין קודם, Antigravity זמין במצב תצוגה מקדימה בחינם אם יש לכם חשבון Gmail אישי. אז כדאי להיכנס לחשבון עכשיו. חשוב לוודא שייווצר פרופיל Chrome חדש בשביל זה. הדפדפן ייפתח ותוכלו להיכנס לחשבון. אם האימות יצליח, תופיע הודעה דומה לזו שבהמשך, והיא תפנה אתכם חזרה לאפליקציית Antigravity. פשוט זורמים עם זה.
  • Terms of Use: אתם יכולים להחליט אם להצטרף או לא, ואז ללחוץ על הבא.

הפעולה הזו תוביל אתכם לרגע האמת, שבו Antigravity יחכה לכם כדי לשתף איתכם פעולה. אנחנו מוכנים להתחיל.

3. הסוכן המנהל

‫Antigravity מבצעת פיצול (fork) של הבסיס של Visual Studio Code (VS Code) בקוד פתוח, אבל משנה באופן קיצוני את חוויית המשתמש כדי לתת עדיפות לניהול סוכנים על פני עריכת טקסט. הממשק מחולק לשני חלונות ראשיים נפרדים: העורך והמרכז לניהול סוכנים. ההפרדה הזו בין התחומים משקפת את ההבדל בין תרומה אישית לבין ניהול הנדסי.

הסוכן המנהל: מרכז הבקרה

בדרך כלל, כשמשתמש מפעיל את Antigravity, הוא לא רואה עץ קבצים, אלא את Agent Manager, כמו שמוצג בהמשך:

d5ae91fc746e1bba.png

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

בתצוגה הזו, המפתח פועל כאדריכל. הם מגדירים יעדים ברמה גבוהה, למשל:

  • שינוי מבנה של מודול האימות
  • עדכון עץ התלות
  • יצירת חבילת בדיקות ל-Billing API

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

הארכיטקטורה הזו פותרת מגבלה מרכזית של סביבות פיתוח משולבות קודמות, שהיו יותר כמו צ'אטבוטים – לינאריות וסינכרוניות. בממשק צ'אט רגיל, המפתח צריך לחכות עד שה-AI יסיים ליצור את הקוד לפני שהוא שואל את השאלה הבאה. בתצוגת הניהול של Antigravity, מפתח יכול להקצות חמישה סוכנים שונים לעבודה על חמישה באגים שונים בו-זמנית, ובכך להגדיל את התפוקה שלו.

אם לוחצים על הבא למעלה, יש אפשרות לפתוח את Workspace.

ec72712ea24bf6d5.png

פשוט תחשבו על Workspace כמו שאתם מכירים אותו מ-VS Code. כדי לפתוח תיקייה מקומית, לוחצים על הלחצן ואז בוחרים תיקייה להתחיל איתה. במקרה שלי, הייתה לי תיקייה בתיקיית הבית בשם my-agy-projects ובחרתי אותה. אפשר להשתמש בתיקייה אחרת לגמרי.

הערה: אפשר לדלג על השלב הזה לחלוטין, ואפשר לפתוח Workspace גם מאוחר יותר.

אחרי שתשלימו את השלב הזה, תועברו לחלון Agent Manager (ניהול סוכנים), שמוצג בהמשך:

156224e223eeda36.png

תראו שהאפליקציה מוכנה להתחיל שיחה חדשה בתיקיית סביבת העבודה (my-agy-projects) שנבחרה. חשוב לדעת שאפשר להשתמש בידע הקיים שלכם לגבי עבודה עם אפליקציות AI אחרות (Cursor, ‏ Gemini CLI) ולהשתמש ב-@ ובדרכים אחרות כדי לכלול הקשר נוסף בהנחיות.

חשוב לבדוק את התפריטים הנפתחים Planning וModel Selection. בתפריט הנפתח Model Selection (בחירת מודל) אפשר לבחור מבין המודלים שזמינים כרגע לשימוש על ידי הסוכן. הרשימה מוצגת בהמשך:

fb0744dc43911365.png

באופן דומה, אנחנו רואים שהסוכן יהיה במצב ברירת מחדל Planning. אבל אפשר גם לבחור במצב Fast.

f403e40ad480efc9.png

בואו נבדוק מה כתוב על זה בתיעוד:

  • Planning: סוכן יכול לתכנן לפני שהוא מבצע משימות. מתאים למחקר מעמיק, למשימות מורכבות או לעבודה משותפת. במצב הזה, הסוכן מארגן את העבודה שלו בקבוצות משימות, יוצר ארטיפקטים ונוקט צעדים נוספים כדי לחקור ביסודיות, לחשוב ולתכנן את העבודה שלו בצורה שתניב את התוצאות האיכותיות ביותר. יוצגו כאן הרבה יותר נתונים.
  • Fast: Agent יבצע משימות באופן ישיר. השתמשו בו למשימות פשוטות שאפשר להשלים מהר יותר, כמו שינוי שם של משתנים, הפעלה של כמה פקודות bash או משימות קטנות ומקומיות אחרות. האפשרות הזו שימושית כשמהירות היא גורם חשוב, והמשימה פשוטה מספיק כך שאין חשש לאיכות נמוכה יותר.

אם אתם מכירים את המונח 'תקציב חשיבה' ומונחים דומים ב-Agents, תוכלו לחשוב על התכונה הזו כעל היכולת לשלוט בחשיבה של ה-Agent, וכך להשפיע ישירות על תקציב החשיבה. נשתמש כרגע בהגדרות ברירת המחדל, אבל חשוב לזכור שבזמן ההשקה, הזמינות של מודל Gemini 3 Pro היא בהתאם למכסות מוגבלות לכולם, לכן צפויים להופיע הודעות מתאימות אם מיציתם את המכסות החינמיות האלה לשימוש ב-Gemini 3.

עכשיו נתעכב קצת על Agent Manager (חלון) כדי להבין כמה דברים, כך שיהיה ברור מהם אבני הבניין הבסיסיות, איך לנווט ב-Antigravity ועוד. חלון ניהול הסוכנים מוצג למטה:

22f6dcf7b3edc583.png

אפשר להיעזר בתרשים שלמעלה עם המספרים:

  1. Inbox: כאן אפשר לעקוב אחרי כל השיחות ממקום אחד. כשאתם שולחים סוכנים לבצע משימות, הן מופיעות בתיבת הדואר הנכנס, ואתם יכולים ללחוץ על תיבת הדואר הנכנס כדי לראות רשימה של כל השיחות הנוכחיות. אם תקישו על אחת מהשיחות, תוכלו לראות את כל ההודעות שהועברו, את הסטטוס של המשימות, את מה שהסוכן יצר ואפילו אם הוא מחכה לאישור שלכם לגבי המשימות. זו דרך מצוינת לחזור מאוחר יותר למשימה קודמת שעבדתם עליה. תכונה שימושית מאוד.
  2. Start Conversation: לוחצים על הסמל הזה כדי להתחיל שיחה חדשה. הפעולה הזו תוביל אתכם ישירות לשדה הקלט שבו כתוב Ask anything.
  3. Workspaces: הזכרנו את סביבות העבודה ואמרנו שאפשר לעבוד בכל סביבת עבודה שרוצים. תמיד אפשר להוסיף עוד סביבות עבודה, ואפשר לבחור כל סביבת עבודה כשמתחילים את השיחה.
  4. Playground: זו דרך מצוינת להתחיל שיחה עם הסוכן, ואז להמיר אותה לסביבת עבודה שבה יש לכם שליטה מחמירה יותר על הקבצים וכו'. אפשר לחשוב על זה כעל אזור טיוטה.
  5. Editor View: עד עכשיו אנחנו בתצוגה של מרכז ניהול הסוכנים. אם רוצים, אפשר לעבור לתצוגת העריכה בכל שלב. כך תוכלו לראות את תיקיית סביבת העבודה ואת הקבצים שנוצרו. אתם יכולים לערוך את הקבצים ישירות או לספק הנחיות מוטמעות, פקודות בכלי העריכה, כדי שהסוכן יוכל לבצע פעולה או לשנות משהו בהתאם להמלצות או להוראות ששיניתם. נעסוק בתצוגת העורך בהרחבה בקטע אחר.
  6. Browser: לבסוף, נגיע לאחד מהמאפיינים הייחודיים שהופכים את Antigravity לכלי עוצמתי מאוד – השילוב ההדוק שלו עם דפדפן Chrome. בקטע הבא מוסבר איך להגדיר את הדפדפן.

4. הגדרת דפדפן Antigravity

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

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

כלומר, צריך להפעיל ולהתקין את תוסף הדפדפן Antigravity. כדי לעשות את זה, נתחיל שיחה ב-Playground ונעבור על השלבים.

בוחרים באפשרות Playground ומקצים לסוכן את המשימה הבאה go to antigravity.google, כמו שמוצג בהמשך:

51a373d3da23db56.png

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

e7119f40e093afd2.png

הדפדפן ייפתח ותוצג הודעה להתקנת התוסף, כמו שמוצג בהמשך:

9a5a43c17980e46c.png

תועברו לתוסף Chrome שתוכלו להתקין.

f3468f0e5f3bb075.png

אחרי שתתקינו את התוסף בהצלחה, Antigravity Agent יתחיל לפעול ויציין שהוא מצפה שתאשרו לו לבצע את המשימה. אמורה להופיע פעילות בחלון הדפדפן שנפתח:

7f0367e00ac36d5a.png

חוזרים לתצוגה של Agent Manager ורואים את הנתונים הבאים:

b9d89e1ebefcfd76.png

זה בדיוק מה שציפינו שיקרה, כי ביקשנו מהסוכן להיכנס לאתר antigravity.google. נותנים לו את ההרשאה ורואים שהאתר נפתח בצורה בטוחה, כמו שמוצג בהמשך:

77fcc38b5fb4ca7c.png

בדיקת פריטי המידע שנוצרו בתהליך פיתוח (Artifacts)

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

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

‫Antigravity מתמקד ביצירת פריטים חשובים בהתאם למשימה. התהליך יכול להתחיל בתוכנית המשימות, לעבור לתוכנית ההטמעה ולהסתיים בתוכנית ההדרכה (עם אימות). בתוכניות האלה, כדאי לכלול דברים כמו:

  • Task Lists & Plans: לפני כתיבת הקוד, הסוכן יוצר תוכנית מובנית. המשתמש יכול לבדוק את התוכנית, לערוך אותה ולאשר אותה.
  • Code Diffs: תצוגות השוואה סטנדרטיות שמציגות בדיוק אילו שורות ישתנו.
  • Screenshots: הסוכן מתעד את מצב ממשק המשתמש לפני ואחרי השינוי.
  • Browser Recordings: לאינטראקציות דינמיות (למשל, "לוחצים על כפתור הכניסה, מחכים לסמל הטעינה, מוודאים שמרכז הבקרה נטען"), הסוכן מתעד סרטון של הסשן. המפתח יכול לצפות בסרטון הזה כדי לוודא שהדרישה הפונקציונלית מתקיימת בלי להפעיל את האפליקציה בעצמו.
  • Test Results: יומנים מובנים של בדיקות שעברו או נכשלו, שנוצרו והופעלו על ידי הסוכן.

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

5320f447471c43eb.png

אתם אמורים לראות את התצוגה 'פריטי מידע' כמו שמוצג בהמשך. בדוגמה הזו, נתנו לסוכן הוראה להיכנס לדף antigravity.google, ולכן הוא צילם את המסך, יצר סרטון של אותו דף וכו'.

19d9738bb3c7c0c9.png

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

5. חזרה לתיבת הדואר הנכנס

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

1a2a1bbdd4464ecf.png

לחיצה על השיחה תציג את הפרטים:

b7e493765cfb1b1a.png

אפשר גם להמשיך את השיחה מכאן.

6. The Editor

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

כדי לעבור לכלי העריכה, אפשר ללחוץ על הלחצן Open Editor (פתיחת כלי העריכה) בפינה השמאלית העליונה של Agent Manager.

91f3c96b81d993b9.png

העורך מועשר ב'הכרת סוכנים'.

  • Inline Command: העורך תומך בשיטת Vibe coding ובהוראות בשורה, שבהן משתמשים יכולים לסמן קוד ולהנחות את הסוכן "Make this more efficient" או "Add comments explaining this logic".
  • Agent Side Panel : אפשר להשתמש בחלונית בצד שמאל של כלי העריכה כדי לעבוד ישירות עם הסוכן. מכאן אפשר להתחיל שיחות חדשות או לתת הוראות לשינוי הקוד.

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

7. מעבר בין העורך לבין מרכז ניהול הנציגים

חשוב לזכור ש-Antigravity היא דעה מגובשת, כי גם Editor וגם Agent Manager הם חלונות נפרדים ויש צורך ברור בשניהם. יש לכם אפשרות לעבור מאחד לשני באמצעות הכפתור Open Agent Manager (פתיחת מרכז ניהול הסוכנים) בפינה השמאלית העליונה כשאתם בכלי העריכה, או באמצעות הכפתור Open Editor (פתיחת כלי העריכה) בפינה השמאלית העליונה כשאתם במרכז ניהול הסוכנים.

לחלופין, אפשר גם להשתמש במקשי הקיצור הבאים כדי לעבור בין שני המצבים: ‎Cmd + E

8. תרחישים לדוגמה

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

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

המיטב מהחדשות

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

במקרה הזה, נבקר באתר של חדשות Google ונחלץ ממנו מידע. אבל אתם יכולים בקלות להתנסות באתר שתבחרו ולראות איך זה עובד.

מוודאים שאתם נמצאים ב-Agent Manager ושהאפשרות Playground נבחרה, כמו שמוצג בהמשך:

cffa12c98a68cb6c.png

ואז נותנים את ההוראה הבאה:

8513d489eea0b014.png

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

9d594588f2ffe6bc.png

בסיום העבודה, אמורים להופיע גם הארטיפקטים שנוצרו, כמו שמוצג בהמשך:

dc6cf4e7d8425df8.png

דוגמה להרצה על ידי הסוכן:

fb7397cd2cce0682.png

שימו לב שמימין מופיע תהליך החשיבה. אפשר גם לגלול בין הנקודות ולצפות בהפעלה ובנתונים אחרים.

דברים שכדאי לנסות

  • אחרי שמבינים את זה, בוחרים אתר שזמין ושרוצים שהסוכן ילך אליו ויאסוף או יסכם ממנו נתונים. תחשבו על אתר שיש בו לוחות בקרה ותרשימים, ותבקשו ממנו לבחור כמה ערכים.
  • אפשר לנסות את ההנחיה הבאה: Visit https://docs.cloud.google.com/release-notes and get me a summary of the release notes, categorized by product.

יצירת אתר דינמי באמצעות Python + Flask

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

שוב, מוודאים שאתם נמצאים ב-Agent Manager וסימנתם את Playground.

מזינים את ההנחיה הבאה:

I would like to generate a website that is a 1-day technical conference informational site.

The website should have the following functionality:
        1. A home page that shows the current date, location, schedule and time table.
        2. The 1-day event is a list of 8 talks in total.
        3. Each talk has 1 or 2 max. speakers. 
        4. A talk has an ID, Title, Speakers, Category (1 or 2), Description and time of the talk.
        5. Each speaker has a First Name, Last Name and LinkedIn url.
        6. Allow for users to search by category, speaker, title.
        7. Give a lunch break of 60 minutes.
        8. Use dummy data for events and speakers, come up with a schedule, the event is about Google Cloud Technologies.
        9. Tech Stack: Python and Flask framework on server side. Front-end is basic HTML, CSS and JavaScript. 
        10. Test out the site on your own for all functionality and provide a detailed README on how to setup, run and make any further changes. 
11. Launch the web application for me to review. 

אפשר להתחיל את השיחה עם ההנחיה שלמעלה:

במהלך ביצוע המשימה, הסוכן ימשיך ליצור את הארטיפקטים:

  • תוצר פיתוח של משימה
  • פריט הטמעה
  • פריט הדרכה מפורטת

הארטיפקט של המשימה שמופיע בהמשך הוא רצף המשימות הראשוני שהסוכן הבין שהוא צריך לבצע על סמך המשימה שניתנה לו. למטה מוצג צילום מסך לדוגמה מההרצה:

c95d82e1c040698f.png

אחר כך לוחצים על ארטיפקט תוכנית ההטמעה. למטה מוצגת דוגמה לצילום מסך:

632169a236bc62cc.png

ולבסוף, יש את ארטיפקט ההדרכה המפורטת. הוא מכיל את כל הפעולות שהסוכן ביצע, כפי שמוצג בהמשך:

e3f6152d6f54d4f9.png

אפשר לראות שהשרת הופעל וקיבלתי את כתובת ה-URL. אני לוחץ עליה ורואה את האפליקציה. בהמשך מוצגת דוגמה לצילום מסך:

abf879f2ce53d055.png

אם עוברים אל Editor, אפשר לראות במסך שהוא מכיל את התיקייה שבה נוצרת אפליקציית Python Flask. תראו גם שהסמל Agent mode מתויג בצד שמאל, ואפשר להמשיך את השיחה גם שם.

b0fea8aa65c3a1c5.png

נניח שאנחנו רוצים להוסיף עוד הרצאות לאירוע. אפשר להישאר בכלי העריכה ובחלונית של הסוכן, ולתת הוראה כמו Add two more talks to the schedule.

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

ba8455e6f68973e9.png

אם רוצים, אפשר לחזור אל Agent Manager. התהליך הזה יעזור לכם להבין את התהליך של מעבר מניהול סוכנים לעריכה, ביצוע שינויים בהתאם וכן הלאה.

הערה: במהלך ביצוע המשימה הזו, הסוכן ניסה להפעיל את שרת Flask ביציאה 5000, שהייתה בשימוש במחשב הנוכחי. הוא המשיך לנסות את הפורט החופשי הבא, עד שהחליט להשתמש ב-8080 והצליח להפעיל את השרת.

דברים שכדאי לנסות

  • להוסיף פונקציונליות נוספת לאפליקציה. מספקים את הפרטים לסוכן ורואים איך הוא מבצע את המשימה – קודם הוא משנה את רשימת המשימות, אחר כך את תוכנית ההטמעה וכן הלאה.
  • מבקשים מ-Agent ליצור קובץ README או תיעוד נוסף לאפליקציה.

יצירת אפליקציה פשוטה לפרודוקטיביות

עכשיו ניצור אפליקציית אינטרנט פשוטה של טיימר פומודורו.

מוודאים שאתם נמצאים ב-Agent Manager ושבחרתם את Playground. מזינים את ההנחיה הבאה:

Create a productivity app that features a Pomodoro timer. Give a calm and aesthetic look to the application.

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

5be0a668e5a67d85.png

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

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

c9ab6bca97a51a8c.png

אפשר להוסיף לאפליקציה תמונה יפה של טיימר. כל מה שצריך לעשות הוא להנפיק הוראה למעקב, כמו שמופיע בהמשך:

Add an image to the application that displays a timer.

כתוצאה מכך, הנציג הוסיף משימה חדשה לארטיפקט Task:

498dd946d4e9ae55.png

הוא יצר תמונה תוך כדי ביצוע המשימה:

c291da9bdb37ff96.png

לבסוף, האפליקציה יצרה את התמונה שביקשנו:

de8f418ba8e4600d.png

דברים שכדאי לנסות

  • שימו לב שהרקע של סמל שעון החול באפליקציה לא שקוף. אפשר לנסות להנחות את הסוכן להפוך את זה לשקוף.
  • אפשר לנסות כמה וריאציות של כל אפליקציה שרוצים ליצור. אפשר להתנסות עם הסגנונות, התמונות, לבקש שינויים וכו'.

יצירת בדיקות יחידה, בדיקות דמה ואימות בדיקות

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

לשם כך, ניצור סביבת עבודה עם קובץ Python יחיד, כמו שמוצג בהמשך:

from typing import Dict

# --- Custom Exceptions ---
class InventoryShortageError(Exception):
    """Raised when there is not enough item stock."""
    pass

class PaymentFailedError(Exception):
    """Raised when the payment gateway rejects the transaction."""
    pass

class InvalidOrderError(Exception):
    """Raised when the order violates business rules."""
    pass

# --- External Service Interfaces (To be Mocked) ---
class InventoryService:
    def get_stock(self, product_id: str) -> int:
        """Connects to DB to check stock."""
        raise NotImplementedError("Real connection required")

    def decrement_stock(self, product_id: str, quantity: int):
        """Connects to DB to reduce stock."""
        raise NotImplementedError("Real connection required")

class PaymentGateway:
    def charge(self, amount: float, currency: str) -> bool:
        """Connects to Stripe/PayPal."""
        raise NotImplementedError("Real connection required")

# --- Main Business Logic ---
class Order:
    def __init__(self, 
                 inventory_service: InventoryService, 
                 payment_gateway: PaymentGateway,
                 customer_email: str,
                 is_vip: bool = False):
        
        self.inventory = inventory_service
        self.payment = payment_gateway
        self.customer_email = customer_email
        self.is_vip = is_vip
        self.items: Dict[str, Dict] = {} # {product_id: {'price': float, 'qty': int}}
        self.is_paid = False
        self.status = "DRAFT"

    def add_item(self, product_id: str, price: float, quantity: int = 1):
        """Adds items to the cart. Rejects invalid prices or quantities."""
        if price < 0:
            raise ValueError("Price cannot be negative")
        if quantity <= 0:
            raise ValueError("Quantity must be greater than zero")

        if product_id in self.items:
            self.items[product_id]['qty'] += quantity
        else:
            self.items[product_id] = {'price': price, 'qty': quantity}

    def remove_item(self, product_id: str):
        """Removes an item entirely from the cart."""
        if product_id in self.items:
            del self.items[product_id]

    @property
    def total_price(self) -> float:
        """Calculates raw total before discounts."""
        return sum(item['price'] * item['qty'] for item in self.items.values())

    def apply_discount(self) -> float:
        """
        Applies business logic:
        1. VIPs get flat 20% off.
        2. Regulars get 10% off if total > 100.
        3. No discount otherwise.
        """
        total = self.total_price
        
        if self.is_vip:
            return round(total * 0.8, 2)
        elif total > 100:
            return round(total * 0.9, 2)
        
        return round(total, 2)

    def checkout(self):
        """
        Orchestrates the checkout process:
        1. Validates cart is not empty.
        2. Checks stock for all items.
        3. Calculates final price.
        4. Charges payment.
        5. Updates inventory.
        """
        if not self.items:
            raise InvalidOrderError("Cannot checkout an empty cart")

        # 1. Check Inventory Logic
        for product_id, data in self.items.items():
            available_stock = self.inventory.get_stock(product_id)
            if available_stock < data['qty']:
                raise InventoryShortageError(f"Not enough stock for {product_id}")

        # 2. Calculate Final Price
        final_amount = self.apply_discount()

        # 3. Process Payment
        try:
            success = self.payment.charge(final_amount, "USD")
            if not success:
                raise PaymentFailedError("Transaction declined by gateway")
        except Exception as e:
            # Catching generic network errors from the gateway
            raise PaymentFailedError(f"Payment gateway error: {str(e)}")

        # 4. Decrement Stock (Only occurs if payment succeeded)
        for product_id, data in self.items.items():
            self.inventory.decrement_stock(product_id, data['qty'])

        self.is_paid = True
        self.status = "COMPLETED"
        
        return {"status": "success", "charged_amount": final_amount}

מוודאים שקובץ ה-Python שלמעלה נמצא בתיקייה במחשב וטוענים אותו כסביבת עבודה ב-Antigravity.

זהו שירות הזמנות פשוט עם הפונקציונליות העיקרית הבאה בפונקציית checkout:

  1. בודק שהעגלה לא ריקה.
  2. בודקים את המלאי של כל הפריטים.
  3. חישוב המחיר הסופי.
  4. תשלום חיובים.
  5. מעדכן את המלאי.

אנחנו הולכים להקצות לסוכן את המשימה של יצירת מקרי בדיקה של יחידות, לספק יישומי Mock ולהריץ את הבדיקות כדי לוודא שהן מצליחות.

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

8368856e51a7561a.png

הסבר על הקובץ:

b69c217d3372d802.png

אפשר לבקש ממנו ליצור תרשים טוב יותר באמצעות ההנחיה:

Can you visually show this class for better understanding

da5bd701323818d4.png

השלב הבא הוא ליצור את בדיקות היחידה ולבקש מהסוכן לבדוק אותן. ההנחיה שנתתי:

generate unit tests for this module and test it out with mock implementations.

הוא יצר את תוצר הפיתוח (Artifact) הבא של המשימה והמשיך במשימה שלו.

21425379db336dc6.png

אפשר גם לראות את פרטי הבדיקות שהכלי הריץ:

48f3320cd76b5cd8.png

אחד מהקבצים שנוצרו היה גם קובץ הבדיקה. צילום מסך של ההודעה מוצג בהמשך:

8ee68905942825d.png

דברים שכדאי לנסות

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

9. מזל טוב

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

מאמרי עזרה