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

https://github.com/ynonp/webinar-demo-coloring-app

בימים הקרובים אעלה סיכום מסודר של אותו וובינר אבל בינתיים בואו נקרא את הקוד ונשים לב למבנים המרכזיים שנוצרו.

1. בעיה 1: ריכוזיות

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

https://github.com/ynonp/webinar-demo-coloring-app/blob/main/app/gallery/page.tsx

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

{creations.length} masterpiece{creations.length === 1 ? "" : "s"} and counting!

קובץ נוסף שהיה לי קשה לקרוא הוא הקובץ הראשי של האפליקציה:

https://github.com/ynonp/webinar-demo-coloring-app/blob/main/app/page.tsx

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

2. בעיה 2: טיפול במקרים לא רלוונטים

נשים לב באותו קובץ לבלוק:

<a
  href={c.download_url ?? c.blob_url}
  download
  className="shrink-0 px-3 py-1.5 rounded-full text-sm font-bold text-white bg-gradient-to-r from-indigo-500 to-blue-500 hover:opacity-90"
>
  ⬇️ Download
</a>

הקוד מטפל במצב ש download_url לא קיים ואם זה null מחזיר את blob_url אבל מצב כזה לא הגיוני במערכת שלנו - העלאה ל Vercel יוצרת את הבלוב ושומרת בבסיס הנתונים את שתי העמודות.

3. בעיה 3: חוסר טיפול בכשלונות רלוונטים

נעבור לקובץ ה API

https://github.com/ynonp/webinar-demo-coloring-app/blob/main/app/api/creations/route.ts

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

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