מדריך חינם · בונים בלי קוד

Lovable - המדריך המלא בעברית

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

מאת טליה מאור · סדנאות וקורסים בבינה מלאכותית

1מה זה Lovable ולמי זה מתאים

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

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

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

2מתחילים - הפרויקט הראשון

1
נכנסים ונרשמים. אל lovable.dev, הרשמה חינמית עם חשבון גוגל. החשבון החינמי נותן כמה קרדיטים ליום להתנסות.
2
כותבים משפט פתיחה טוב. זה הרגע הכי חשוב. ככל שהתיאור הראשון מדויק - התוצאה קרובה יותר למה שדמיינתם. לא "תבנה לי אתר", אלא תיאור מלא (דוגמה למטה).
3
מסתכלים על התוצאה בצד. Lovable מציג תצוגה חיה של האתר בזמן אמת, בצד ימין של המסך. כל שינוי שמבקשים - מופיע שם מיד.
4
משפרים בשיחה. "תגדיל את הכפתור", "תחליף את הצבע לסגול", "תוסיף עמוד צור קשר" - צעד אחר צעד, עד שזה מושלם.

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

משפט פתיחה מלא כזה חוסך עשרות תיקונים אחר כך
https://lovable.dev/projects/clinic-app
קביעת תור
את/התוסיף עמוד תורים עם בחירת יום ושעה
Lovableהוספתי עמוד תורים עם לוח שנה ובחירת שעה. רוצה שאחבר אותו למסד נתונים כדי לשמור את התורים?
משמאל השיחה, מימין האתר החי - כל בקשה מתעדכנת מיד בתצוגה

3שני המצבים - קודם לתכנן, אחר כך לבצע

זו הנקודה שהכי משפרת את התוצאה, ורוב האנשים מפספסים אותה. ל-Lovable יש שני מצבי עבודה, וההבדל ביניהם הוא בדיוק ההבדל בין "מנחש" ל"מדייק":

המצבמה הוא עושהמתי להשתמש
מצב תכנון
(Chat / Plan)
משוחח איתכם, שואל שאלות, מציע מבנה - ולא נוגע בקוד. לא מבזבז קרדיטים על בנייה.לפני כל פיצ'ר גדול, כשלא בטוחים איך לבנות, או כשמשהו לא עובד ורוצים להבין למה.
מצב ביצוע
(Agent / Default)
כותב ומשנה את הקוד בפועל, בונה את מה שסוכם, ומתקן תקלות בעצמו.אחרי שהתכנית ברורה - כאן קורה הבנייה האמיתית.
שיטת העבודה המנצחת: משימה גדולה? קודם עוברים למצב תכנון, מבקשים "תציג לי תוכנית לפני שאתה בונה", מאשרים - ורק אז עוברים למצב ביצוע. ככה לא מגלים באמצע שהכל הלך לכיוון הלא נכון, ולא שורפים קרדיטים על תיקונים.

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

4ענן ומסד נתונים - איפה נשמר המידע

אתר סטטי (רק תצוגה) לא צריך שום דבר מיוחד. אבל ברגע שרוצים לשמור מידע - תורים, נרשמים, לידים, משתמשים - צריך "מוח" שזוכר. ב-Lovable זה נקרא Lovable Cloud, והוא בנוי על טכנולוגיה בשם Supabase (מסד נתונים ענני).

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

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

5אבטחה - החלק שאסור לדלג עליו

ברגע שהאתר שומר מידע של אנשים אמיתיים, האבטחה כבר לא "נחמד שיש" - היא חובה. הנה הדברים שבאמת חשובים, בשפה פשוטה:

א. הרשאות גישה (RLS) - מי רשאי לראות מה

זה הכלל הכי חשוב. בלי הרשאות נכונות, לקוח אחד יכול לכאורה לראות את הנתונים של כולם. מבקשים מ-Lovable במפורש:

תוודא שיש הרשאות גישה (RLS) על כל הטבלאות: כל משתמש יכול לראות ולערוך רק את הנתונים שלו עצמו, ומנהל בלבד רואה את כולם. תעבור על הטבלאות ותגיד לי איפה חסר.

ב. מפתחות סודיים - לא בצ'אט, אף פעם

כלל ברזל: מפתח סודי (כמו "service role key" של מסד הנתונים, או מפתח API של שירות תשלום) אף פעם לא מודבק בצ'אט של Lovable ולא בהגדרות רגילות. הוא בעל כוח לעקוף את כל ההגנות. מקומו היחיד הוא בכספת המאובטחת: Cloud → Secrets. שם הוא מוצפן ולא נחשף.

ג. קבצים פרטיים

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

ד. בדיקת אבטחה לפני השקה

ל-Lovable יש כלי סקירת אבטחה מובנה. לפני שמפרסמים ללקוחות, מריצים אותו:

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

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

6תשלומים - לגבות כסף דרך האתר

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

1
פותחים חשבון Stripe (חינם, נפרד מ-Lovable). זה החשבון שאליו יכנס הכסף.
2
מחברים ב-Secrets. את מפתחות ה-Stripe מדביקים רק בכספת המאובטחת (Cloud → Secrets) - לא בצ'אט.
3
מבקשים מ-Lovable לבנות את הקופה. "תוסיף כפתור תשלום שמחבר ל-Stripe, בסכום X, ואחרי תשלום מוצלח תשלח מייל אישור".
שימו לב: בזמן בנייה ובדיקות, Stripe עובד במצב טסט (כרטיסי אשראי מדומים - לא כסף אמיתי). רק כשעוברים למצב חי (Live) מתחילים לגבות באמת. אל תשכחו להעביר למצב חי לפני ההשקה - וגם לוודא שיצאתם ממצב טסט אחרי הבדיקות.

7פרסום - להעלות את האתר לאוויר

עד עכשיו האתר חי רק אצלכם. פרסום הופך אותו לכתובת אמיתית שכל אחד יכול לפתוח:

1
לוחצים Publish. כפתור אחד למעלה. Lovable מעלה את האתר ונותן כתובת חינמית (בסגנון your-app.lovable.app).
2
מחברים דומיין משלכם. יש לכם כתובת כמו yourbusiness.co.il? אפשר לחבר אותה ישירות (דורש מנוי בתשלום). ככה הלקוחות רואים את המותג שלכם, לא כתובת של Lovable.
3
כל עדכון עתידי - משנים בצ'אט, לוחצים Publish שוב, וזה מתעדכן באוויר תוך שניות.
אפשרות למתקדמים: אפשר גם לייצא את הקוד ל-GitHub ולפרסם דרך שירותים כמו Vercel או Netlify - שליטה מלאה, בלי תלות ב-Lovable. לרוב האנשים, הפרסום המובנה מספיק לגמרי.

8קרדיטים ותמחור - כמה זה עולה

Lovable עובד על קרדיטים - כל בקשה שמשנה קוד "עולה" קרדיט. תכנון ושיחה (מצב תכנון) לא עולים. לכן שווה לתכנן טוב לפני שבונים.

מסלולמחירלמי
חינם0התנסות - כמה קרדיטים ליום, פרויקטים ציבוריים
Pro~25$ לחודשעסק אמיתי - הרבה קרדיטים, פרויקטים פרטיים, דומיין אישי
Business~50$ לחודשצוותים - עד 20 משתמשים, הרשאות והתחברות ארגונית
המחירים מתעדכנים מעת לעת - כדאי לבדוק באתר הרשמי
טיפ לחיסכון: משפט פתיחה מפורט (סעיף 2) + עבודה במצב תכנון לפני בנייה (סעיף 3) = פחות תיקונים = פחות קרדיטים נשרפים. זו לא רק עבודה נכונה - זו גם עבודה חסכונית.

9סדר העבודה - התמונה המלאה

1
משפט פתיחה מלא ומדויק ← מקבלים גרסה ראשונה
2
משפרים בשיחה, צעד אחר צעד, עד שהמראה נכון
3
פיצ'ר גדול? קודם מצב תכנון, מאשרים, ואז מצב ביצוע
4
צריך לשמור מידע? מחברים מסד נתונים (Cloud)
5
מגדירים הרשאות (RLS), מפתחות רק ב-Secrets
6
תשלומים? מחברים Stripe דרך Secrets
7
מריצים סקירת אבטחה ומתקנים את החמור
8
Publish ← דומיין אישי ← חי לעולם

רוצים ללמוד לבנות כלים כאלה בעצמכם?

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

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