בדף הזה מוסבר איך להשתמש במצב Build ב-Google AI Studio כדי ליצור במהירות (או לכתוב קוד) ולפרוס אפליקציות שבודקות את היכולות העדכניות של Gemini, כמו nano banana ו-Live API.
שנתחיל?
מתחילים לתכנת את הוויב במצב הבנייה של Google AI Studio. יש כמה דרכים להתחיל לבנות:
- מתחילים עם הנחיה: במצב בנייה, משתמשים בתיבת הקלט כדי להזין תיאור של מה שרוצים לבנות. בוחרים באפשרות 'שבבי AI' כדי להוסיף להנחיה תכונות ספציפיות כמו יצירת תמונות או נתונים של מפות Google. אפשר גם להגיד מה רוצים לשמוע באמצעות הלחצן להמרת דיבור לטקסט.
- הלחצן 'יותר מזל משכל': אם אתם צריכים השראה יצירתית, אתם יכולים ללחוץ על הלחצן 'יותר מזל משכל' ו-Gemini ייצור הנחיה עם רעיון לפרויקט כדי לעזור לכם להתחיל.
- ליצור רמיקס של פרויקט מהגלריה: פותחים פרויקט מגלריית האפליקציות ובוחרים באפשרות העתקת האפליקציה.
אחרי שמריצים את ההנחיה, הקוד והקבצים הדרושים נוצרים, ותצוגה מקדימה של האפליקציה מופיעה בצד שמאל.
מה נוצר?
כשמריצים את ההנחיה, AI Studio יוצר אפליקציית אינטרנט. כברירת מחדל, הוא יוצר אפליקציית אינטרנט של React, אבל אפשר ליצור אפליקציית Angular בתפריט ההגדרות. כדי לראות את הקוד שנוצר, בוחרים בכרטיסייה קוד בחלונית התצוגה המקדימה שמשמאל.
אלה הקבצים שחשוב לשים לב אליהם:
- geminiService.ts: הקובץ הזה מכיל את הלוגיקה העיקרית של האפליקציה, החל מיצירת הנחיות ועד לקריאה ל-Gemini API וניתוח התשובות שלו. אתם יכולים לערוך את הנחיית הבסיס בקובץ הזה או לשנות את הפונקציונליות של רכיב כלשהו ישירות או באמצעות שיחה אינטראקטיבית עם Gemini במצב Build. שימו לב שהקוד בקובץ הזה משתמש ב-GenAI TS SDK כדי ליצור אינטראקציה עם Gemini API.
המשך פיתוח
אחרי ש-Google AI Studio יוצר את הקוד הראשוני לאפליקציית האינטרנט, יש לכם שתי אפשרויות עיקריות להמשך הפרויקט: פיתוח ב-AI Studio או פיתוח חיצוני.
פיתוח ב-Google AI Studio
אתם יכולים להמשיך לשפר ולהרחיב את האפליקציה ישירות בסביבת Google AI Studio:
- חזרה על הפעולה עם Gemini: משתמשים בחלונית הצ'אט במצב בנייה כדי לבקש מ-Gemini לבצע שינויים, להוסיף תכונות חדשות או לשנות את הסגנון. לדוגמה, אפשר לבקש: "תוסיף לחצן שמתריע למשתמש" או "תשנה את ערכת הצבעים לכחול ולבן".
- עריכת הקוד ישירות: פותחים את הכרטיסייה 'קוד' בחלונית התצוגה המקדימה כדי לבצע עריכות בזמן אמת. אתם יכולים לשמור את הפרויקט ב-GitHub כדי להשתמש בבקרת גרסאות במהלך הפיתוח.
פיתוח חיצוני
לתהליכי עבודה מתקדמים יותר, אפשר לייצא את הקוד ולעבוד בסביבה המועדפת:
- הורדה ופיתוח מקומי: מייצאים את הקוד שנוצר כקובץ ZIP ומייבאים אותו לעורך הקוד. כך תוכלו להשתמש בכלים המוכרים, במערכות הבנייה ובשיטות המקומיות של בקרת גרסאות כדי להמשיך לפתח מעבר לאב-טיפוס הראשוני.
- דחיפה ל-GitHub: כדי לשלב את הקוד עם תהליכי הפיתוח והפריסה הקיימים, דוחפים אותו למאגר ב-GitHub.
תכונות עיקריות
Google AI Studio כולל כמה תכונות שהופכות את תהליך הבנייה לאינטואיטיבי ולויזואלי:
- מצב הערות: במקום לכתוב קוד כדי לשנות את המראה של האפליקציה, במצב הערות אפשר להדגיש כל חלק בממשק המשתמש של האפליקציה ולתאר את השינוי שרוצים לבצע. לדוגמה, אפשר לבחור רכיב ולהקליד "תצבע את הלחצן הזה בכחול" או "תגרום לתמונה הזו להופיע בהזזה מצד שמאל". כשבוחרים באפשרות הוספה לצ'אט, נוצרת הנחיה עם צילום מסך של האפליקציה עם ההערות.
- שיתוף האפליקציה: אתם יכולים לשתף את היצירות שלכם עם אחרים כדי לשתף פעולה או להציג את העבודה שלכם.
- גלריית האפליקציות: גלריית האפליקציות היא ספרייה חזותית של רעיונות לפרויקטים. אתם יכולים לעיין באפשרויות של Gemini, לראות תצוגה מקדימה של אפליקציות באופן מיידי ולערוך אותן כדי ליצור גרסה משלכם.
פריסה או העברה לארכיון של האפליקציה
אחרי שהאפליקציה מוכנה, אפשר לפרוס אותה ישירות מ-AI Studio. אפשרויות הפריסה כוללות:
- Google Cloud Run: פריסת האפליקציה כשירות ניתן להרחבה. שימו לב: יכול להיות שיחולו חיובים על Google Cloud Run בהתאם לשימוש.
- GitHub: ייצוא הפרויקט למאגר ב-GitHub כדי לשלב אותו בתהליכי העבודה הקיימים של פיתוח ופריסה.
מגבלות
בקטע הזה מפורטות מגבלות חשובות כשמשתמשים במצב בנייה ב-Google AI Studio.
אבטחה וחשיפה של מפתח API
- הקוד של אפליקציות משותפות גלוי לכל מי שצופה בהן. לעולם אל תשתמשו במפתח API אמיתי ישירות בקוד של האפליקציה.
- כברירת מחדל, האפליקציות משתמשות ב-placeholder (לדוגמה, process.env.GEMINI_API_KEY) בשביל מפתח ה-API. כשמשתמש מפעיל את האפליקציה המשותפת ב-AI Studio, AI Studio פועל כשרת proxy, מחליף את ה-placeholder במפתח ה-API של משתמש הקצה ומוודא שהמפתח שלכם יישאר פרטי.
הרשאות גישה לאפליקציה ושיתוף
- האפליקציות מאוחסנות ב-Google Drive ופועלות לפי מודל ההרשאות שלו, כלומר הן פרטיות כברירת מחדל.
- הרשאות שיתוף: כשמשתפים אפליקציה עם משתמשים אחרים:
- משתמשים ששותפו איתם הרשאות יכולים לראות את הקוד ולבצע Fork לאפליקציה לשימוש שלהם.
- אם משתמשים משותפים מקבלים הרשאת עריכה, הם יכולים לשנות את הקוד של האפליקציה.
פריסה מחוץ ל-AI Studio
- אפשר לפרוס את האפליקציה ב-Cloud Run לכתובת URL ציבורית, אבל בהגדרה הזו מפתח ה-API ישמש את כל המשתמשים לקריאות ל-Gemini API.
- אפליקציות JavaScript מופעלות בצד הלקוח, לכן חשוב לוודא שלמפתחות ה-API יש גישה מינימלית בלבד כדי למנוע דליפות נתונים או שימוש לרעה. לדוגמה, יכול להיות שלמשתמשים תהיה גישה למאגרי מידע אחרים של חיפוש קבצים מאותו פרויקט באמצעות המנגנון הזה.
- פריסה חיצונית מאובטחת: כדי להפעיל אפליקציה בצורה מאובטחת מחוץ ל-AI Studio (למשל, אחרי הורדת קובץ ה-ZIP), צריך להעביר את הלוגיקה שמשתמשת במפתח ה-API לרכיב בצד השרת כדי למנוע חשיפה של המפתח למשתמשי הקצה. הפעולה הזו לא נדרשת אם פורסים באמצעות Cloud Run.
- אזהרה לגבי חשיפת מפתח: לא מומלץ להחליף את ה-placeholder במפתח API אמיתי בסביבת צד לקוח, כי המפתח יהיה גלוי לכל משתמש.
תמיכה בכלים ובתכונות
- ייבוא של פיתוח מקומי: כרגע אי אפשר לפתח אפליקציות באופן מקומי באמצעות כלים חיצוניים ולייבא אותן ל-AI Studio.
מה השלב הבא?
- אתם יכולים לראות מה אחרים יצרו ולקבל השראה על ידי יצירת רמיקס של פרויקט קיים בגלריית האפליקציות.
- כדי להתחיל, כדאי לעיין באוסף של מדריכים בנושא קידוד מוזיקה ב-AI Studio בפלייליסט של YouTube.