השקת אתר תיק עבודות בעזרת AI

1. מבוא

סקירה כללית

איפה מתחילים לבנות באמצעות AI היום? לרובנו, זה מתחיל בשאילתה או באב טיפוס. ב-Google AI Studio יש מצב בנייה (שנקרא גם "תכנות בשיטת Vibe coding") שמאפשר לכם לעצב, לבדוק ולבנות אפליקציות אינטרנט באמצעות יצירת קוד שמבוססת על מודלים של Gemini.

ב-Codelab הזה תבנו אתר תיק עבודות אישי. הסוכן של AI Studio יכתוב את קוד ה-Frontend. אחרי שהאפליקציה תהיה מוכנה, תוכלו לפרוס אותה ישירות ל-Cloud Run בלחיצה אחת.

הפעולות שתבצעו:

  • מזינים הנחיה ב-Google AI Studio כדי ליצור אב טיפוס לאתר תיק עבודות אישי.
  • בודקים את האפליקציה בארגז החול של התצוגה המקדימה האינטראקטיבית.
  • פורסים את האפליקציה ב-Cloud Run ישירות מממשק המשתמש של Google AI Studio.

מה תלמדו

  • איך משתמשים במצב Build ב-Google AI Studio כדי ליצור אב-טיפוס במהירות לשירות frontend באמצעות שפה טבעית.
  • איך פורסים את האפליקציה שלכם ב-AI Studio כקונטיינר ללא שרת ב-Cloud Run.

2. הגדרת הפרויקט

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

פרטי חשבון Google ופרטי השכבה

  1. אם עדיין אין לכם חשבון Google, צרו חשבון Google.
    • טיפ: אם אפשר, כדאי להשתמש בחשבון Google אישי למעבדה הזו. יכול להיות שחשבונות קבוצתיים, ארגוניים או בית ספריים יאכפו מדיניות של Workspace שמשביתה תכונות ניסיוניות או שילובים עם הענן.
  2. בודקים את פרטי החיוב של הפריסות:
    • תוכנית למתחילים של Google Cloud: מאפשרת לפרסם עד שתי אפליקציות full-stack באזור נבחר ללא עלות, בלי להגדיר חשבון חיוב מלא ב-Google Cloud.
    • פריסה רגילה: מתחברת לפרויקט בענן קיים בתשלום ב-Google Cloud ומרחיבה את מגבלות האחסון, משאבי ה-CPU וממשקי ה-API.

3. יצירת אתר תיק עבודות במצב בנייה ב-AI Studio

יוצרים את מעטפת האפליקציה ומנחים את עוזר ה-AI לתכנות ליצור את פריסת הקצה הקדמי.

  1. עוברים אל החלונית Apps (אפליקציות) ב-Google AI Studio ולוחצים על New App (אפליקציה חדשה).
  2. בתיבת ההנחיה של הצ'אט, מזינים את התיאור של אפליקציית הפורטפוליו: 
    Build a professional personal portfolio website. The site should
have a modern, responsive design and sections for my biography,
projects showcase, skills, and links to my professional profiles
(e.g., GitHub, LinkedIn).
  3. לוחצים על Build (יצירה) כדי להתחיל בתהליך יצירת האפליקציה.

4. בדיקה ושיפורים

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

  1. פותחים את חלונית התצוגה המקדימה ב-Google AI Studio.
  2. כדי לוודא שהחוויה החזותית תקינה, אפשר ללחוץ על לחצני ניווט, קישורים או פריסות בארגז החול של התצוגה המקדימה.
    • הערה לגבי תיקון שגיאות: במהלך היצירה או הבדיקה, יכול להיות שתיתקלו מדי פעם בבעיות בזמן הריצה או בשגיאות קומפילציה. במקרה כזה, ב-AI Studio מוצג לחצן Fix בצ'אט, שמאפשר לכם לבקש מהסוכן לאבחן ולתקן את הבעיה באופן אוטומטי.
    מיקום לחצן התיקון ב-Google AI Studio
  3. אם רוצים לשנות את הסגנון או את אופן הפעולה, צריך לתת הנחיות לסוכן בחלון הצ'אט. לדוגמה:
    • "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
    • "Include a new section to showcase my recent presentations and talks."
  4. מחכים שהסוכן יעדכן את בסיס הקוד ובודקים את דפדפן התצוגה המקדימה כדי לראות את העדכונים.

5. פריסה ב-Cloud Run

אחרי שהאב-טיפוס מתפקד באופן מלא, פורסים אותו כשירות ציבורי ב-Cloud Run.

  1. בפינה השמאלית העליונה של Google AI Studio, לוחצים על הלחצן פרסום כדי להפעיל את אשף הפריסה.מיקום לחצן הפרסום ב-Google AI Studio
  2. לוחצים על Get Started (תחילת העבודה) כדי להגדיר את הפרויקט ב-Google Cloud.
    • מוודאים שהתפריט הנפתח Google Cloud Project תואם לפרויקט ששייכתם לסביבת העבודה.
    • ‫AI Studio ייצור באופן אוטומטי מזהה שירות ייחודי למופע Cloud Run.
  3. אם זו הפעם הראשונה שאתם מבצעים פריסה ואתם משתמשים בפרמטרים סטנדרטיים של Google Cloud, יכול להיות שתתבקשו לציין סוג ארגון ולספק פרטי חיוב.
  4. לוחצים על פרסום האפליקציה.
  5. השלבים של בניית הקונטיינר, רישום הקונטיינר ופריסת השירות מתבצעים ברקע. בדרך כלל התהליך הזה מסתיים תוך 2-4 דקות.
  6. כשהפריסה מסתיימת, מעתיקים את כתובת ה-URL של האפליקציה שנוצרה ועוברים לקישור של האפליקציה הפעילה בכרטיסיית דפדפן.
  7. אפשר לבדוק את אפליקציית האינטרנט הפעילה בדפדפן.

6. (אופציונלי) הוספת דומיין מותאם אישית

כברירת מחדל, שירות Cloud Run מארח את השירות שלכם בתת-דומיין run.app בניהול Google. אם רוצים להשתמש בדומיין אישי (כמו yourname.com או portfolio.yourname.com), אפשר למפות דומיין מותאם אישית לשירות.

שלב 1: מוסיפים מיפוי דומיין ב-Cloud Run

  1. נכנסים לדף Cloud Run Domain Mappings במסוף Google Cloud.
  2. לוחצים על הוספת מיפוי.
  3. בתפריט הנפתח, בוחרים את שירות Cloud Run שרוצים למפות.
  4. מזינים את שם הדומיין המותאם אישית (לדוגמה, yourname.com או portfolio.yourname.com).
  5. לוחצים על הבא או על המשך. ב-Cloud Run יוצגו רשומות ה-DNS (כמו רשומות A/AAAA או CNAME) שצריך ליצור אצל רשם הדומיין.

שלב 2: הגדרת רשם ה-DNS

  1. נכנסים ללוח הניהול של רשם הדומיין (לדוגמה, Squarespace,‏ GoDaddy או Namecheap).
  2. פותחים את הדף של ניהול DNS או את דף ההגדרות של ה-DNS בדומיין.
  3. יוצרים את רשומות ה-DNS שתואמות לערכים שמוצגים באשף המיפוי של Cloud Run:
    • למיפויים של דומיין apex (לדוגמה, yourname.com), מוסיפים את הרשומות A ו-AAAA שמופיעות ברשימה.
    • למיפויים של תת-דומיין (לדוגמה, portfolio.yourname.com), מוסיפים את רשומת CNAME שמופיעה ברשימה.
  4. שומרים את השינויים בהגדרת ה-DNS.

שלב 3: ממתינים להקצאת אישור SSL

אחרי שהשינויים ב-DNS יתעדכנו:

  1. מערכת Google Cloud תקצה באופן אוטומטי אישור SSL/TLS מנוהל לחיבור המאובטח שלכם.
  2. התהליך הזה בדרך כלל מסתיים תוך 15 דקות, אבל הוא יכול להימשך עד 24 שעות בהתאם להפצה של DNS.
  3. אחרי שתשלימו את התהליך, הדומיין המותאם אישית שלכם יפנה בבטחה לאתר הפורטפוליו שלכם.

7. מחיקה

כדי למנוע חיובים בלתי צפויים או כדי לנקות את המשאבים ב-Workspace:

  1. ב-Google AI Studio, עוברים אל דף האפליקציות.
  2. מחפשים את האפליקציה ברשת או ברשימה.
  3. כדי למחוק את מצב האפליקציה ולבטל את פרסום השירות מ-Cloud Run, לוחצים על סמל האשפה.
  4. אם פרסתם באמצעות פרויקט רגיל ואתם רוצים להשבית את כל המשאבים באופן סופי, אתם יכולים לעבור אל הגדרות הפרויקט במסוף Google Cloud ולמחוק את הפרויקט הבסיסי.

8. סיכום

מעולה! עיצבתם, פיתחתם והטמעתם אתר תיק עבודות ישירות מ-Google AI Studio.

מידע נוסף

כדי לקבל את התג Completed Builder Journey, לוחצים על הקישור הזה.

כדי להמשיך בתהליך, כדאי לעבור אל goo.gle/builders למעבדה הבאה.