vibe coding למתחילים: איך בניתי אפליקציית ווב של תא צילום (Photo Booth)
אני כותב, לא מתכנת. הכישורים הטכניים שלי נעצרו ב-HTML בסיסי בשנת 1999.
בשבוע שעבר בניתי את הכלי האמיתי הראשון שלי. השתמשתי ב-Claude כדי לבצע "vibe coding" לאפליקציית ווב עובדת של תא צילום עבור MLH.
הנה איך אדם שאינו מתכנת בנה אפליקציה פונקציונלית לאירועים בשידור חי.
הבעיה MLH מנהלת אירועים רבים. היינו צריכים תא צילום מבוסס דפדפן.
- המשתתפים פותחים קישור בטלפונים שלהם.
- הם מצלמים סלפי או מעלים תמונה.
- הם מוסיפים מסגרת ממותגת.
- הם שומרים את התמונה בגלריית התמונות שלהם.
- בלי חשבונות. בלי חנויות אפליקציות. רק קישור.
האסטרטגיה הטכנית רציתי להשתמש ב-framework מורכב. Claude שכנע אותי לוותר על זה.
באירועים בשידור חי, פחות חלקים נעים זה יתרון. בניתי את הכלי כולו בקובץ index.html אחד ויחיד. הוא משתמש ב-HTML, CSS, ו-JavaScript. אין שלב build מורכב. הוא נשאר ב-GitHub Pages בחינם.
בונוס הפרטיות השתמשתי ב-HTML canvas כדי לשלב בין התמונה למסגרת. כל העיבוד מתבצע בדפדפן של המשתמש. התמונה לעולם לא מועלית לשרת. זה הופך את התהליך לפרטי ומאובטח עבור המשתתפים.
קסם ה-Backend אתר סטטי עדיין יכול להכיל backend. השתמשתי ב-Supabase לאחסון.
- המארגנים מעלים מסגרות ל-Supabase bucket.
- המשתתפים צופים במסגרות הללו דרך האתר.
- האבטחה נמצאת במדיניות בסיס הנתונים (database policies), ולא בסיסמאות נסתרות.
מלכודות למתחילים vibe coding עוזר עם הארכיטקטורה, אבל חייבים לשים לב לפרטים התפעוליים:
- בסיסי נתונים "נרדמים". למדתי "להעיר" את פרויקט ה-Supabase שלי יום לפני האירוע.
- אבטחת תמונות. הייתי צריך להוסיף שורת קוד ספציפית כדי לאפשר ל-canvas להשתמש בתמונות מרחוק.
- חווית משתמש. בטלפונים, קשה למצוא כפתור "הורדה". שיניתי את הקוד כך שישתמש ב-native mobile share sheet. זה שולח את התמונה ישירות לגלריית התמונות.
הלקחים שלי עבורכם
- בחרו פרויקט עם גבולות ברורים. תא צילום הוא קו סיום. אפליקציית רשת היא לא.
- שאלו את ה-AI "למה". ההיגיון חשוב יותר מהקוד.
- קראו את ה-diffs. אל תתנו ל-AI לשנות את האתר שלכם בלי בדיקה שלכם.
- קחו אחריות על ההחלטות. ה-AI מטפל בסינטקס, אבל אתם מטפלים במגבלות.
vibe coding הוא לא על דילוג על העבודה. הוא על התמקדות בבעיות הנכונות.
Vibe Coding למתחילים: איך בניתי אפליקציית ווב של Photo Booth עובדת עם Claude
האם שמעתם אי פעם על "vibe coding"? אם לא, אתם עומדים לחוות את אחד השינויים המרתקים ביותר בעולם הפיתוח.
במקום להתמקד בכל שורה ושורה של תחביר (syntax), ה-vibe coding עוסק בתיאור ה"וייב" או הכוונה שלכם ל-AI, ומתן הנחיות כדי שהוא יבצע את העבודה הטכנית עבורכם. זה לא קוד, זה יותר כמו להיות מנהל מוצר או מנהל פרויקטים שמתקשר עם מפתח מדהים.
במאמר הזה, אני אראה לכם איך השתמשתי ב-Claude כדי לבנות אפליקציית Photo Booth (תא צילום) עובדת מאפס, בלי לכתוב שורת קוד אחת בעצמי.
הפרויקט: אפליקציית Photo Booth
הרעיון היה פשוט: אפליקציית ווב שמאפשרת למשתמש להשתמש במצלמה של המחשב, להפעיל ספירה לאחור, לצלם תמונה, ולהוסיף לה פילטרים מגניבים.
השלב הראשון: הפרומפט הראשוני
התחלתי עם פרומפט מאוד כללי. לא ניסיתי להגדיר פונקציות או מבני נתונים. פשוט תיארתי את ה"וייב":
"אני רוצה לבנות אפליקציית ווב של Photo Booth. היא צריכה להיראות מודרנית וצבעונית, לאפשר גישה למצלמה, לכלול ספירה לאחור של 3 שניות לפני הצילום, ולהציג את התמונות שצולמו בגלריה למטה."
תוך שניות, Claude החזיר לי קובץ אחד (או כמה קבצים) הכולל HTML, CSS ו-JavaScript.
שלב האיטרציה (Iteration)
כאן נכנס הקסם של ה-vibe coding. התוצאה הראשונה הייתה טובה, אבל היא לא הייתה "מושלמת". במקום להיכנס לקוד ולתקן את ה-CSS, פשוט אמרתי ל-Claude מה לא מרגיש לי טוב:
- "הכפתור של הצילום קצת קטן מדי, תגדיל אותו ותוסיף לו אפקט של לחיצה."
- "הגלריה נראית קצת עמוסה, תסדר אותה ב-Grid נקי יותר."
- "תוסיף פילטר שחור-לבן לתמונות שצולמו."
בכל פעם, Claude עדכן את הקוד והתוצאה השתפרה. אני לא הייתי עסוק ב-איך לתקן את ה-CSS, אלא ב-מה אני רוצה שהתוצאה תיראה.
דיבאגינג (Debugging) בשיטת ה-Vibe
כמובן שלא הכל עבד חלק. בשלב מסוים, המצלמה פשוט לא נפתחה. במקום לחפש ב-Stack Overflow למה ה-getUserMedia API נכשל, פשוט העתקתי את השגיאה מהקונסול (Console) ואמרתי ל-Claude:
"המצלמה לא עובדת, אני מקבל את השגיאה הזו: [שגיאה]. תתקן את זה."
Claude זיהה מיד שהייתה בעיה בהרשאות או בטיפול ב-Promise, ותיקן את הקוד תוך רגע.
מה למדתי?
ה-vibe coding לא מחליף את המתכנתים, אבל הוא משנה לחלוטין את הדרך שבה אנחנו בונים דברים.
- התמקדות במוצר, לא בתחביר: היכולת לבנות אב-טיפוס (Prototype) תוך דקות במקום שעות היא משנה משחק.
- התקשורת היא המפתח: ככל שתהיה יותר ברור בתיאור ה"וייב" והדרישות שלך, כך התוצאה תהיה טובה יותר.
- הבנה בסיסית עדיין חשובה: למרות שלא כתבתי את הקוד, היה לי קל להבין אם מה ש-Claude הציע הוא בכיוון הנכון.
סיכום
בניית ה-Photo Booth שלי הייתה חוויה מדהימה. מהרעיון ועד לאפליקציה עובדת ומגניבה, הכל קרה במהירות עצומה בזכות Claude והגישה של vibe coding.
אם יש לכם רעיון לאפליקציה, אל תחכו שתלמדו כל שפת תכנות עד הסוף. פשוט תתחילו "לדבר" עם ה-AI ותראו לאן זה יקח אתכם.