הקלטתי את קורס ה-Vibe Coding וגנזתי אותו כדי להתחיל שוב מההתחלה אחרי שעות רבות מאוד של עבודה עם כלים שונים - והחלטתי לשתף אתכם בכל:


1. ניסיתי להתכתב עם קלוד על הפרויקט ולבקש פרומפט ארוך ומפורט - את הפרומפט הדבקתי בכל כלי אפשרי שעולה על הדעת, מכלים שזמינים בענן וכלה בכלים שצריך להתקין לוקאלית (Lovable, Base44, Cursor, Windsurf, TRAE, VScode + GitHub Copilot) - התחיל טוב, המשיך סביר, הסתיים באסון כי לא באמת הבנתי למה הוא בחר בחבילות שהוא בחר לפרויקט.
2. ניסיתי לקחת צילום מסך של אתר שנראה טוב בעיני ולבקש ממודל שפה לתאר אותו לפרטי פרטים (עם ובלי CopyCoder) - קיבלתי בסיס סביר, וגם כאן - לא היה מספיק היגיון ולכן גם בשלב מסוים הפרויקט כשל בשל תיקונים שדורסים זה את זה.
3. ניסיתי להתחיל את הפרויקט בעצמי. נכנסתי לדוקומנטציות כדי להיזכר איך מתניעים פרויקטים של NextJS ומה ההתקנות הנכונות של Shadcn, Tailwind, Lucide, חקרתי את מבנה הפרויקט ואת ההבדל בין Pages לבין App Router, ההיגיון התחיל לעבוד. הפרויקט עבד טוב יותר, אך עדיין היו אלמנטים שדורסים זה את זה, ולא הייתה הכנה נכונה מבחינת ארכיטקטורה ולכן הפרויקט כשל.
4. החלטתי לצייר את האתר שאני רוצה ב-Exactly Draw ולהוסיף הערות. לקחתי את הציורים לקלוד והסברתי לו מה אני רוצה. לאחר מכן התייעצתי איתו איך לפתח את הפרויקט, באיזה ספריות וחבילות - ולמה?!
כאן התחיל דיון מעמיק ומעניין. Vite + React מול NextJS, בין Create React App לבין יצירת פרויקט עם Vite, בין עבודה עם "מתאם" בין הספריות לבין בסיס הנתונים (ORM) כגון Prisma, או אולי Supabase או NeonDB, משם גם לדיון על אותנטיקציה - אולי Clerk? אולי AuthJS? אולי SupaBase? אולי FireBase? ומבחינת Deploy? אולי Vercel? אולי AWS? אולי Azure? ומבחינת עבודה עם MCP: אולי עם GitHub ואולי עם המון אחרים?

ברגע שנמאס לי ללכת "על עיוור" עם ה-AI ובמקום - ניהלתי איתו שיח מעמיק. באמת מעמיק. על ההבדלים בין החבילות. על מתי להשתמש בחבילה אחת על פני אחרת, וגם חקרתי לבד בסרטונים ובאינטרנט וגיבשתי הבנה מעמיקה של פרויקט Full Stack על יתרונותיו וחסרונותיו. אז הכל קרה באורח פלא.
אז דיברתי עם קלוד והוא זרם איתי לחלק את הפרומט למקטעים. לקחתי אותם ל-Cursor והתחלנו לבנות ביחד. אני והסוכן של Cursor עם קלוד 3.7. תוך שאני מדביק מקטע של פרומפט, הוא מתחיל לפתח, ואני צופה *ומבין מה הוא עושה ולמה*. אני גם דואג לגבות לאחר כל מקטע את הקוד על ידי Commit ל-Repo ב-GitHub, צעד שגם הוא מבוצע כמעט אוטומטית לחלוטין. ביקשתי בחוקי ה-AI להזכיר לי בסוף כל הרצה של פקודה לבצע Commit ולתת לי הודעת Commit מנוסחת על השינויים שבוצעו. כך לא התעצלתי וגם הבנתי מה קורה.

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

בזכות Gal Havkin שפרסם עכשיו בקהילת הוואצאפ שלי גיליתי שממש עכשיו גוגל השיקה את Firebase Studio שמפתח אתרים עם AI בחיבור ל-Gemini ומביא נתונים "חיים"! ביקשתי ממנו לפתח מזהה טרנדים טכניים על AI ומסתבר שהוא הבריק! לא רק שהאתר פותח במהירות הבזק אלא שיש כאן ממש ציטוטים עם קישורים אמיתיים והפניות רלוונטיות ואפילו יכולת לג'נרט תקצירים ועוד.

זאת אומרת: חיבור של מודל השפה של גוגל + היכולת לייבא מידע אמיתי + צירוף אסמכתאות וקישורים + הכל על התשתית של גוגל הלא היא FireBase הידועה (לשמצה?) = פצצת על של יכולות! לגבי המעטפת, העיצוב, והתוכן כמוצר ארוז במלואו ולא רק עוד כלי - את זה עוד נגלה בהמשך, אבל התלהבתי!

תודה גל המלך!

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

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

הדבר הכי חשוב ב Vibe Coding הוא להבין את ה-Stack שבחרנו, איך הוא עובד, ואז לפקח על מה שה-LLM מייצר: האם הוא מייצר את המבנה הראשוני בצורה נכונה? האם הוא מייצר קבצים שהם תוכן האתר - במקומות המתאימים לכך? האם הקומפוננטות שהוא בונה מכסות את כל מה שביקשנו? האם הוא בונה גם את ה-UI אבל דואג להגדיר גם את הלוגיקה ב-Backend ואת חיבורי ה-API הנדרשים?

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

למשל, כאשר בונים פרויקט עם NextJS וריאקט. להבין את המבנה, לראות מה נוצר בתיקיית App, לוודא שיש גם תיקיית src ו-api ו-components ושהמבנה הגיוני ונכון. לעקוב אחר הבנייה של הממשק ולאחר מכן על יצירת הלוגיקה של ה-API בפועל. להריץ את השרת ידנית ולא לחכות ל-LLM שיריץ. להבין מה אנחנו שואלים לפני שאנחנו שואלים כדי להתחכם ולהעמיד את ה-LLM במבחן ולראות אם הוא איתנו ומבין את השאלה ומתקן כפי שאנו מצפים.

ובשורה התחתונה: להבין בעיקר שהאחריות היא עלינו - ולא עליו. להבין שההצלחה תלויה בהבנה הטכנית של מה שקורה. ולזכור למסור לסוכן: הצלחתך - הצלחתנו!

למה הרבה פיתוחי AI נדפקים? בגלל שרצים קדימה מבלי להבין מה זה קבצי Migration של בסיסי נתונים

כאשר אנחנו מפתחים אנחנו דוהרים קדימה, ואם אין לנו רקע מוקדם בניהול ותכנון בסיסי נתונים אז נוכל ללכת לאיבוד מהר מאוד, ולכן חשוב להבין את הדבר הבא: כל מידע שאנחנו רוצים שיופיע באתר שלנו ו/או שאנחנו רוצים לשמור - צריך לשמור בבסיס נתונים. כדי לשמור בבסיס נתונים צריך להגדיר איזה בסיס נתונים אנחנו רוצים, האם SQL או NoSQL, ובהנחה ובחרנו בבסיס נתונים מסוג SQL כמו PostgreSQL עם מעטפת של Supabase, חשוב לדעת שהשלבים הם:

1. בקשה ליצור בסיס נתונים ולחבר אותו ללוגיקה שלנו בקוד
2. ה-AI יתכנן עבורנו את הטבלה ואת העמודות במבנה הראשוני בהתאם ללוגיקה הקיימת
3. והנה המלכוד: במידה ופתאום אנחנו רוצים להוסיף פיצ׳רים ומידע שנרצה לשמור - נצטרך לשנות גם את בסיס הנתונים. הדרך לבצע זאת היא לומר ל-AI מה אנחנו רוצים לשנות *ולבקש ממנו ליצור קובץ מיגרציה*, המשמעות היא שהוא ייצור קוד SQL שישנה את הטבלה שלנו, ואנחנו נצטרך להריץ אותו (בדוגמא שלנו ב-Supabase, ב- SQL Editor)

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

טיפ שגיליתי: יש שרת MCP של PostgreSQL ואפשר להשתמש בו במקום בזה של Supabase, שאפילו Supabase ממליצים להשתמש בו והוא מאוד מועיל.

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

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

כל הבורח מן הכבוד - הכבוד רודף אחריו. ובעיני זה בדיוק מתן.

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

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

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

Matan Cohen Grumi

שאלתי את הצ׳אט: בהתבסס על מה שאתה יודע עלי, עם איזה פחד עלי להתמודד השנה? התשובה: אתה בא מעולם הסייבר ואתה מפחד בשלב הפיתוח כשצריך לחבר דאטה בייס 😳

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

מועדים לשמחה - חגים וזמנים לששון 🚀

בשעה טובה אמזון (AWS) פתחו רישום למיטאפ המשותף שלנו בנושא מ״ווייב קודינג לסקייל עם AWS״! 😍

אני אעביר שם סשן יחד עם תותחי על של AWS. הכניסה בחינם, כל הקודם זוכה!!

*מי שנרשם בלינק הקודם - נא להירשם שוב בקישור הזה ושימו לב שמתקבל אישור הרשמה במייל חוזר*

האירוע ב-23.4 בין השעות 9:30-13:00 בקומה 28 במשרדי אמזון בשרונה ת״א. איכות, טכנולוגיה, מינגלינג!

מועדים לשמחה 🚀

https://aws-experience.com/emea/tel-aviv/event/7bc52ee8-8ba5-4a7f-bcc7-4105ea8a19b2

אז OpenAI הכריזו עכשיו על מודל חדש: GPT 4.1 ובקרוב תראו מיליארד פוסטים מהללים. אבל רגע. איך יכול להיות שיש כבר מודל GPT 4.5 ועכשיו הכריזו על GPT 4.1? ז״א, יש כאן מודל חדש שמושק, אבל הוא… פחות חדש ממה שכבר קיים?

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

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

אני לא יכול לשמוע יותר את המילה MCP אז פיתחתי אתר שעוזר לי ליצור שרתי MCP בקלות - וגם לבדוק תקינות של שרתים קיימים. הפיתוח היה עם NextJS ו-Cursor, והנה כמה דברים שלמדתי על NextJS:

מדובר במסגרת פיתוח, Framework, לאפליקציות React. מה שזה אומר הוא שחברת Vercel שיצרה את NextJS, יצרה למעשה מעטפת עבורנו כדי שנוכל לפתח אפליקציות Fullstack עם React בקלות *יחסית*. למה יחסית? כי כמות הבאגים שמקבלים כשמנסים לפתח עם AI פרויקטים של ריאקט היא אינסופית ומוצאים את עצמנו משתמשים ב-Vibe Coding בהתלהבות לכמה דקות - ואז ב- Vibe Debugging בייאוש לכמה שעות.

מה שמיוחד ב-NextJS בעיני זה היכולת לפתח אתרים FullStack. ז״א גם צד לקוח וגם צד שרת, הכל במקום אחד, שמריצים על שרת אחד. זה כיף. כשזה עובד הכוונה. יש לנו תיקייה ראשית, app, שבתוכה אנחנו יוצרים את הפרויקט שלנו. יש לנו אפשרות להשתמש בניתוב באמצעות Pages הישן או App Router החדש. מה זה אומר? שאם ניצור תיקייה בתוך תיקיית App, היא תהיה נתיב בפני עצמו! מה שמאוד מקל על עבודת הניתוב!

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

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

npx create-next-app@latest

אח״כ להוסיף בסיס נתונים מקומי של Supabase אפשר עם:

npx supabase init ואח״כ npx supabase start
בשלב הזה נראה בטרמינל את כל הקישורים והמפתחות שאנחנו צריכים כדי להתחבר לסופה בייס, לרבות קישור לסטודיו - שזה בדיוק מה שרואים במוצר הענני - אבל לוקאלית על המחשב שלנו

לאחר מכן הכנה של קובץ המיגרציה הראשוני: npx supabase migration new <migration name> ולבסוף דחיפה שלו לבסיס הנתונים על ידי npx supabase migration up

נשמע מסובך. אני יודע. אבל אחרי הרבה (שוב) דם יזע וקוד(!!) אני מרגיש שאני סופסוף מצליח לעבוד עם NextJS כמו שצריך, מתוך הבנה של מה שקורה פה והמון סדר לעצמי בראש. אני מרגיש שהזמן שהקדשתי היום לקרוא את הדוקומנטציות של Next עשה לי כל כך הרבה סדר, מעבר לכל שיחה עם מודל שפה ומעבר לכל סרטון. פשוט לקרוא. להבין איך היינו מפתחים ״פעם״ עם html css js ואיך אנחנו מפתחים עם Next, מה זה פותר, איך, ואז - כשמבינים את כל הכיף הזה - מבינים *איך* להכניס את ה-AI פנימה בצורה נכונה.

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

זו לא עוד אפליקציה לעוסה ומאוסה: בניתי אפליקציית AI שמשתמשת ב-RAG ומבצעת את כל התהליך של Chunking, Embeddings, Indexing, Similarity Search כדי להציג למשתמש תובנות, המלצות מותאמות אישית וכדי לאפשר שיח עם סוכן AI! איך עשיתי את זה?

ניסיתי כל כך הרבה שיטות, באמת המון. כלום לא עבד כמו שרציתי. בסוף מה שעבד זה שמרוב יאוש חשבתי וציירתי לעצמי בראש - ולאחר מכן גם בטאבלט - איזה פונקציונליות אני רוצה שתהיה באתר. ממש לפרטי פרטים, למשל: צ'אט AI, ואז אני יודע שבשביל זה אני צריך לבצע חיפוש קירבה, ובשביל חיפוש קירבה אני צריך לקחת את השאילתא שלי כמשתמש, להעביר אותה Embeddings, לתשאל את בסיס הנתונים הווקטורי שלי, ואני רוצה גם לדרג מחדש (Re Rank) את התשובה הסופית לפני שאני מציג אותה למשתמש.

ואז רגע. זה אומר שאני צריך לבנות בסיס נתונים. אבל מה הוא יכיל? גם מידע על המשתמש, מידע רגיל לכל דבר. אבל! גם מידע שהוא לא Structured, שזה אומר מסמכים מכל הסוגים ואפילו קבצי אודיו ו-וידאו. אבל שניה, אם זה אודיו וגם וידאו, אז איך מקבלים תמלול? אז או שיש את זה כבר כשמתחברים ל-zoom ומקבלים גישה להקלטות, או שהחלטתי להשתמש בשירות api שאני אוהב לתמלול איכותי מאוד. כך אני בונה לעצמי את מאגר הידע. אבל! יש בעיה. אני לא רוצה לשלם הרבה, אני לא רוצה latency, אני רוצה מראש לתכנן פריסה (deployment) נכונה, אני רוצה לעבוד בתצורה שתתאים לסקייל בעתיד. איך אני עושה את זה?

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

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

צריך לומר, שעבדתי כבר המון עם Cursor ותוך כדי עבודה הגדרתי לו המון חוקים. מה שאומר, שעכשיו כשאני מתחיל פרויקט חדש ב-Cursor, הוא כבר יודע 90% מהעבודה של הקמת פרויקט וחיבור לבסיס נתונים וכדומה. כיף גדול. מה נשאר לי? להדביק את פרומפט העל בקרסר ולהתחיל לרוץ איתו ולראות אותו מפתח לי את הכל. הייתי המום כי בערך ב-10 דקות שהוא עבד לבד קיבלתי אפליקציית RAG אמיתית שמבצעת שימוש ב-LLMs אמיתיים לצורך כל התהליך שפירטתי ואפילו ידעה להטמיע אותנטיקציה מלאה לבד דרך Clerk! (תודה ל- Roy Nativ הגאון על ההמלצה הזו בזמנו!)

השורה התחתונה היא שיש לי אפליקציית Full Stack לוקאלית, שמשתמשת ב-MCP, מנהלת גרסאות ב-GitHub, עם RAG מלא וביצוע Embeddings, Indexing, Similarity Search עם LLMs באמת. לא עוד דברים מאוסים. פרקטיקה של ממש. אני לא רודף אחרי חידושים כבר, נמאס לי, אבל אני כן פריק של פרקטיקה וצלילה טכנית לעומק. היה מתסכל-כיף-ומטורף לראות את זה קורה בפועל, ואם אחד או אחת קיבלו פה ערך - דיינו!

אחרי הפוסט האחרון ראיתי שממש מעניין אנשים להבין את הפרומפט הראשון שדיברתי עליו כדי לפתח - אז פיתחתי אתר נוסף עם קרסר וקבלו את הפרומפט >>>


כדי שיהיה לנו הקשר: בני אדם לא נולדים כשהם יודעים בדיוק איך לדבר נכון לאנשים אחרים אז למה שנדע איך לדבר ״נכון״ ל-AI?

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

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

הפרומפט שלי:

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

בנוסף לכך, המשתמש צריך לבחור באיזה סגנון הוא רוצה שה-ai יפתח את האתר. הסגנונות המוצעים צריכים להיות: minimal, neobrutalism, glassmorphism, skeumorphism, luxurty fancy premium. הדרך לבחור את הסגנון צריכה להיות באמצעות לחיצה על כרטיס שנראה כמו תצוגה מקדימה קטנה של אתר כלשהו בסגנון שבו המשתמש יכול לבחור. כאשר המשתמש לוחץ על סגנון צריך להיות מעין קו זוהר סביב הבחירה כדי לסמן את הבחירה הפעילה.

לאחר מכן, המשתמש צריך להיות יכול ללחוץ על כפתור Generate Web App ואז תהיה אנימציה מתקדמת, עם progress bar ובמהלכה יופיעו שני חלונות:

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

במקביל, צריך להיות חלון נוסף בצד ימין, שהגובה שלו זהה לחלוטין לגובה של החלון של הקוד, ובו בעצם יש canvas שמראה תוצאות בזמן אמת. real time canvas. מה הכוונה? הכוונה היא שאם בקוד יש עכשיו html שנוצר בזמן אמת, אז אותו אלמנט שנוצר בקוד צריך להופיע מיידית ב-real time canvas (RTC). זה קריטי לאפקט ה-wow שאנחנו מדברים עליו.

השלב צריך להיות שה-ai יקבל את הפרומפט, יבין מה הוא צריך ליצור, ויתחיל לג'נרט את זה בזמן אמת, בהתחלה קוד ה-html יופיע ובמקביל ב-real time canvas יופיעו האלמנטים. לאחר מכן, הקוד יעבור לטאב של css ואז ה-ai יוסיף את העיצוב, ובזמן אמת ב-real time canvas האתר יקבל את העיצוב בזמן אמת וזה ממש ירגיש כמו קסם. לבסוף, ה-ai אמור ליצור javascript כדי להוסיף פונקציונליות לאתר, ואז כל היכולות האמיתיות צריכות להיות מוחלות ב-real time canvas.

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

פעולת ההרשמה וניהול החשבון צריכה להתבצע על ידי חיבור ל-Clerk. בסיס הנתונים צריך להיות supabase ב-instance לוקאלי.

מבחינת טכנולוגיות אני רוצה להשתמש ב:

react
nextjs

supabase
clerk

llm -> claude sonnet api / openai / open router / gemini / cohere״

וזהו. זה הפרומפט. וכן - הוא בעברית!

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

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

בניתי את האתר בסגנון neubrutalism עם המון אלמנטים מרוקאים - צבעים, דפוסים, פתגמים מרוקאיים וכמובן הרבה הומור וקולולולו 🤣

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

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

תרבחו ותסעדו (ותשמינו!) ושיהיה לכולנו המשך חג שמח! 🍯🥞

לינק לאתר בתגובות 👇

מכירים את זה שאתם מפתחים בהתלהבות והכל עובד על המחשב אבל ברגע שסיימתם ואתם מעלים אותה לשרת - הכל נדפק? אז קבלו טיפ שקשור ל-AWS ECS שיעזור עם זה


כל מפתח ומפתחת נתקלו בזה. פותחים את סביבת הפיתוח ועובדים במרץ. נתקלים בשגיאות, דופקים את הראש בקיר, פותרים הכל ולבסוף הכל עובד כמו שאנחנו רוצים על המחשב שלנו. אנחנו בשיא ההתלהבות רוצים כבר להגיע למצב של Deploy, ז"א של פריסת האפליקציה ופרסומה לכל העולם. רק מה? ברגע שאנחנו מעבירים את קוד המקור שלנו לשרת אמיתי ובודקים את האפליקציה, פתאום רואים מיליארד שגיאות. פער אדיר בין מה שעובד אצלנו לוקאלית - לבין מה שקורה בעולם האמיתי שעוצר בעדנו מלפרסם את המוצר שלנו לכולם. מתסכל ברמות!

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

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

אחרי שאנחנו מסיימים לפתח את המוצר שלנו, אנחנו צריכים ליצור קובץ שנקרא קובץ דוקר, Docker File. מה שהוא עושה זה בעצם להנחות את Docker איך ליצור קובץ Image, תמונה, של כל המוצר שלנו בתצורה של "מיכל", "קונטיינר".
ברגע שיש לנו קובץ דוקר, אנחנו יכולים "לבנות" את התמונה הזו, להעלות אותה לשרת כמו AWS ECR, שזה שירות אחסון של קונטיינרים ב-AWS או ל-Docker Hub, שזה כמו GitHub, אתר שמאפשר לאחסן "תמונות" של מוצרים מבוססי דוקר. ברגע שיש לנו את הקישור לקובץ התמונה של המוצר שלנו בתצורת דוקר, אנחנו יכולים להשתמש ב-AWS ECS, שזה שירות התקנת קונטיינרים בסביבת הענן המצוינת של אמזון, שם עלינו לבחור את הקובץ שלנו, לתת ל-AWS לעשות את העבודה עבורנו, והופ: אנחנו מקבלים קישור למוצר שלנו שזמין בענן ואפשר לפרסם אותו לכל העולם.

עד לא מזמן היינו צריכים לשבור את הראש איך ליצור את קובץ הדוקר הזה, ה-Docker File. זה גם לא כיף גדול. והיום? בסוף הפרויקט אפשר פרומפט כמו: תוודא שאתה מבין את הפרויקט ותיצור DockerFile לפריסת המוצר בענן.
והופ, ברגעים ספורים וכמו קסם, נראה פתאום קובץ דוקר מופיע במוצר שלנו ומה שיישאר לנו לעשות זה להגיד ל-AI גם ליצור "BUILD" שלו ו"לדחוף" אותו לשירות אחסון קונטיינרים כפי שהזכרתי. זה אפשרי במיוחד עם GitHub Copilot או עם Cursor Agent או Windsurf Agent וכדומה כאשר נותנים להם את ההרשאה להריץ פקודות במסוף הפקודות (הטרמינל שלנו).