מדריך לבניית אתרים ב ai
-
לקחתי את הכפפה
**הדגשה חשובה
המדריך מיועד בעיקר ללימוד המושגים הראשונים לבאים בשערי בניית אתריםלא מוסמך לבנייה בפועל רק לעבור על המושגים החשובים שחייבים לדעת
לפיתוח בפועל פנו לai הזמין אצלכם ותבקשו הדרכה יותר מתאימה לכם**
כמובן הכל מה ai עברתי על המדריך תיקנתי בו דברים שהיו צריכים תיקון
הוא ברמה טובה מאודכמובן שאפשר לשפר אותו
וכאן מגיע המקום שלכםנערך לרגל בקשת הוותיקים
מדריך מקיף לבניית אתר בעזרת AI – מאפס ועד פרודקשן
המטרה של המדריך הזה היא לקחת אדם שאין לו כמעט ידע טכני, ולהביא אותו למצב שבו הוא יודע:
- להקים חשבון GitHub
- ליצור פרויקט ראשון
- להשתמש ב-AI כדי לכתוב את רוב הקוד
- לבנות אתר אמיתי
- לחבר מסד נתונים (Database)
- להעלות את האתר לאינטרנט
- לעבוד בצורה מסודרת כמו מפתח מקצועי
לא נבנה SaaS מורכב. נבנה את היסודות שיאפשרו לך להקים כמעט כל רעיון שתרצה בעתיד.
פרק 1 - להבין מה באמת בונים
לפני קוד, חשוב להבין ממה אתר מורכב.
דוגמה:
אתה רוצה אתר להצגת העסק שלך.
האתר מורכב מ:
Frontend
מה שהמשתמש רואה.
לדוגמה:
- דף בית
- תמונות
- טפסים
- כפתורים
טכנולוגיות:
- HTML
- CSS
- JavaScript
או
- React
- Next.js
Backend
המוח של האתר.
הוא מטפל ב:
- הרשמה
- התחברות
- שמירת מידע
- שליחת אימיילים
Database
המקום שבו נשמר המידע.
לדוגמה:
- משתמשים
- הזמנות
- פוסטים
- תגובות
פרק 2 - כלי העבודה המומלצים ב-2026
למתחיל הייתי ממליץ:
AI
או
עורך קוד
ניהול קוד
פריסה (Hosting)
מסד נתונים
פרק 3 - פתיחת GitHub
GitHub הוא המקום שבו הקוד שלך נשמר.
תחשוב עליו כמו Google Drive לקוד.
פתיחת חשבון
נכנסים ל:
לוחצים Sign Up.
יצירת Repository ראשון
Repository = תיקיית הפרויקט.
לאחר התחברות:
New Repository
שם:
my-first-websiteסמן:
Add READMEולחץ Create.
פרק 4 - התקנת Git
Git הוא הכלי שמחבר את המחשב שלך ל-GitHub.
מורידים:
לאחר ההתקנה פתח Terminal:
git --versionאם מופיעה גרסה:
git version 2.xxהכל תקין.
פרק 5 - התקנת Node.js
רוב האתרים המודרניים משתמשים ב-Node.
הורדה:
בדיקה:
node -vnpm -v
פרק 6 - התקנת VS Code
מורידים:
תוספים מומלצים:
- ESLint
- Prettier
- GitHub Copilot
- Tailwind CSS IntelliSense
פרק 7 - למה Next.js
ב-2026 כמעט כל פרויקט חדש מתחיל ב-Next.js.
יתרונות:
- SEO
- מהיר
- React מובנה
- קל להעלאה ל-Vercel
יצירת פרויקט:
npx create-next-app@latestהמערכת תשאל:
TypeScript? Yes ESLint? Yes Tailwind? Yes App Router? Yes
פרק 8 - מבנה הפרויקט
לאחר ההתקנה:
app/ components/ public/
app
הדפים באתר.
components
חלקים חוזרים.
לדוגמה:
- Header
- Footer
- Card
public
תמונות.
פרק 9 - שימוש נכון ב-AI
רוב המתחילים טועים כאן.
לא מבקשים:
תבנה לי אתרמבקשים:
תבנה לי דף נחיתה לעסק צילום. צבעים: שחור וזהב חלקים: Hero About Gallery Contact תייצר קוד Next.js + Tailwind
ה-AI עובד טוב כשנותנים הוראות ברורות.
פרק 10 - Git בפועל
יצירת Commit ראשון:
git add .git commit -m "initial project"
חיבור ל-GitHub:
git remote add origin URLgit push -u origin main
פרק 11 - CSS ו-Tailwind
במקום CSS רגיל משתמשים ב-Tailwind.
דוגמה:
<div class="bg-black text-white p-8">
המשמעות:
bg-black = רקע שחור text-white = טקסט לבן p-8 = ריווח
פרק 12 - בניית דף בית
בקשה מומלצת ל-AI:
צור דף בית מודרני ב-Next.js עם Tailwind. כולל: Hero Services Testimonials Contact Footer
הדבק את הקוד.
שמור.
הפעל:
npm run dev
האתר ירוץ ב:
localhost:3000
פרק 13 - מה זה Database
Database הוא מקום לשמירת מידע.
לדוגמה:
טופס צור קשר.
בלי DB:
המידע נעלםעם DB:
המידע נשמר
פרק 14 - Supabase
הפתרון הכי פשוט למתחילים.
פותחים חשבון:
Create Project
לאחר יצירה:
תקבל:
Project URL API KEY
פרק 15 - יצירת טבלה
לדוגמה:
create table contacts ( id bigint primary key generated always as identity, name text, email text, message text );
הטבלה תכיל:
שם אימייל הודעה
פרק 16 - חיבור האתר למסד הנתונים
התקנת SDK:
npm install @supabase/supabase-js
יצירת קובץ:
lib/supabase.ts
בקשת AI:
צור קובץ חיבור Supabase ב-Next.js TypeScript
הוא יפיק את הקוד.
פרק 17 - Environment Variables
לעולם לא שומרים סיסמאות בקוד.
יוצרים:
.env.local
דוגמה:
NEXT_PUBLIC_SUPABASE_URL=... NEXT_PUBLIC_SUPABASE_ANON_KEY=...
פרק 18 - טופס צור קשר
המשתמש שולח:
שם אימייל הודעה
בעת לחיצה על Send:
המידע נשלח ל-Supabase.
פרק 19 - Authentication
אם רוצים הרשמה והתחברות.
Supabase כבר יודע:
- Login
- Signup
- Password Reset
בקשה ל-AI:
בנה מערכת הרשמה והתחברות עם Supabase Auth ל-Next.js
פרק 20 - העלאת תמונות
אפשר:
- Supabase Storage
- Cloudinary
למתחילים:
Supabase Storage.
פרק 21 - SEO
SEO = הופעה בגוגל.
חשוב מאוד.
דוגמאות:
כותרת:
<title>צלם אירועים בתל אביב</title>
תיאור:
<meta name="description" content="..." />
פרק 22 - אבטחה
לעולם לא:
לחשוף API Keys לשמור סיסמאות גלויות לתת הרשאות מלאות
פרק 23 - העלאה לפרודקשן
הדרך הקלה ביותר:
Vercel
כניסה:
Login with GitHub
בחר Repository
Deploy
לאחר כדקה:
האתר באוויר.
פרק 24 - דומיין
קונים דומיין אצל:
או
דוגמא:
mybusiness.com
מחברים ל-Vercel.
פרק 25 - עדכון האתר
בכל פעם שאתה משנה קוד:
git add .git commit -m "update homepage"git push
Vercel יעדכן אוטומטית.
פרק 26 - זרימת עבודה מקצועית עם AI
כך עובדים כיום:
שלב 1
כותבים אפיון
אני רוצה אתר למאמן כושר.
שלב 2
מבקשים מה-AI:
צור PRD מלא.
שלב 3
מבקשים:
פרק את הפרויקט למשימות.
שלב 4
מבקשים:
צור את כל מבנה התיקיות.
שלב 5
מבקשים:
צור כל קומפוננטה בנפרד.
שלב 6
מבקשים:
בדוק ביצועים.
שלב 7
מבקשים:
בדוק SEO.
שלב 8
מבקשים:
בדוק אבטחה.
פרק 27 - מסלול מומלץ לפרויקט ראשון
אל תתחיל מסטארטאפ ענק.
תתחיל מ:
- אתר תיק עבודות
- אתר לעסק
- בלוג אישי
- אתר מתכונים
- אתר טיולים
- אתר אירועים
- אתר המלצות ספרים
- אתר המלצות מסעדות
אלו פרויקטים שיכולים ללמד כמעט את כל היסודות.
פרק 28 - הנוסחה הפשוטה להצלחה
לכל אתר שתבנה:
רעיון ↓ אפיון ↓ AI ↓ Next.js ↓ GitHub ↓ Supabase ↓ Vercel ↓ דומיין ↓ פרודקשןאם תשלוט היטב בשרשרת הזו, תוכל להקים עשרות סוגי אתרים שונים בלי להיות מתכנת ותיק. ה-AI יכתוב חלק גדול מהקוד, אבל היכולת שלך להבין איך החלקים מתחברים — GitHub, פרויקט, Frontend, Backend, Database ופריסה — היא מה שבאמת יהפוך רעיון לאתר חי באינטרנט.
המלצה פרקטית: בנה קודם אתר פשוט של 3–5 עמודים ללא מסד נתונים. אחרי שהעלית אותו לפרודקשן, הוסף טופס, אחר כך מסד נתונים, ורק בסוף התחברות משתמשים. זו הדרך המהירה ביותר ללמוד בלי להסתבך.
@עניו-כמשה קודם כל מצטער מאוד שהשתמע מדברי שזלזלתי.
התכוונתי לומר שלא נראה לי שלזה מיועד הפורום.
לא נראה שניכרת השקעה כל כך ב"כתיבת המדריך" שנכתב על ידי AI.
גם אם עברת על מה שהAI כתב כדי לתקן קצת, זה עדיין מדריך שנכתב 90/100% על ידי AI וזה בדיוק מסוג הדברים שמספימים את הפורום.
תחשוב על זה; בן אדם יכול לשאול "למה בכלל צריך את הפורום עכשיו אם יש AI? כל אחד יכול פשוט לשאול אותו והוא יענה על הכל..."
התשובה הפשוטה בעיניי היא שניסיון שווה המון. אנשים פה באו לקרוא ולהחכים וללמוד מאנשים שיש להם ניסיון ולא מAI שכל אחד יכול פשוט לשאול אותו בעצמו.
דעתי בפועל לא משנה פה ואני לא צוות פיקוח ובטח לא האחראי על הסדר פה בפורום ובכל זאת זה צרם לי.
אשאיר את ההחלטה כמו שכתבתי ל @צוות-פיקוח המדהימים.
אם יש בעיה עם הפוסט שלי תמחקו אותו. -
@עניו-כמשה קודם כל מצטער מאוד שהשתמע מדברי שזלזלתי.
התכוונתי לומר שלא נראה לי שלזה מיועד הפורום.
לא נראה שניכרת השקעה כל כך ב"כתיבת המדריך" שנכתב על ידי AI.
גם אם עברת על מה שהAI כתב כדי לתקן קצת, זה עדיין מדריך שנכתב 90/100% על ידי AI וזה בדיוק מסוג הדברים שמספימים את הפורום.
תחשוב על זה; בן אדם יכול לשאול "למה בכלל צריך את הפורום עכשיו אם יש AI? כל אחד יכול פשוט לשאול אותו והוא יענה על הכל..."
התשובה הפשוטה בעיניי היא שניסיון שווה המון. אנשים פה באו לקרוא ולהחכים וללמוד מאנשים שיש להם ניסיון ולא מAI שכל אחד יכול פשוט לשאול אותו בעצמו.
דעתי בפועל לא משנה פה ואני לא צוות פיקוח ובטח לא האחראי על הסדר פה בפורום ובכל זאת זה צרם לי.
אשאיר את ההחלטה כמו שכתבתי ל @צוות-פיקוח המדהימים.
אם יש בעיה עם הפוסט שלי תמחקו אותו.@אברהם-גלסר כתב במדריך לבניית אתרים ב ai:
שניסיון שווה המון.
וזה בדיוק מה שיש פה
כי לא כל אחד מבין את מה שכותב הAI ויודע להחליט שזה דבר נכון במאה אחוז
אני לא רואה פסול במדריך מ AI שאתה אישרת אותו כי הנסיון שלך הראה לך שזה מדריך מצוין
-
@אברהם-גלסר כתב במדריך לבניית אתרים ב ai:
שניסיון שווה המון.
וזה בדיוק מה שיש פה
כי לא כל אחד מבין את מה שכותב הAI ויודע להחליט שזה דבר נכון במאה אחוז
אני לא רואה פסול במדריך מ AI שאתה אישרת אותו כי הנסיון שלך הראה לך שזה מדריך מצוין
-
פוסט זה נמחק!
-
@עניו-כמשה להגיד לך משהו
אם כמו שאמרת שזה המדריך הראשון שלך
לי ואני מאמין שגם ל @אברהם-גלסר היו כמה וכמה הזדמנויות לקצר הליכים פה בפורום עם AI ואנחנו במקום עובדים קשה וכותבים לבד
וכשאני רואה כאלה קיצורי דרך וזה מראה שהשלב הבא של הפורום יהיה כולו AI -
@עניו-כמשה להגיד לך משהו
אם כמו שאמרת שזה המדריך הראשון שלך
לי ואני מאמין שגם ל @אברהם-גלסר היו כמה וכמה הזדמנויות לקצר הליכים פה בפורום עם AI ואנחנו במקום עובדים קשה וכותבים לבד
וכשאני רואה כאלה קיצורי דרך וזה מראה שהשלב הבא של הפורום יהיה כולו AI@לנציצ כתב במדריך לבניית אתרים ב ai:
ואני מאמין שגם ל @אברהם-גלסר היו כמה וכמה הזדמנויות לקצר הליכים פה בפורום עם AI ואנחנו במקום עובדים קשה וכותבים לבד
אפשר להגיד על אותו דרך /שאין להעלות לפורום תוכנות שנוצרו ע"י AI בגלל שכל אחד יכול ליבקש מהAI לבד
אבל כל אחד מבין שמותר להעזר בבינה בשביל ליצור דברים וגם מדריכיםלגבי מה שכתוב בהוראות לשימוש בפורום זה לא לענות תשובות של הAI אבל מותר ליצור דברים ולהעלות לפורום
-
@לנציצ כתב במדריך לבניית אתרים ב ai:
ואני מאמין שגם ל @אברהם-גלסר היו כמה וכמה הזדמנויות לקצר הליכים פה בפורום עם AI ואנחנו במקום עובדים קשה וכותבים לבד
אפשר להגיד על אותו דרך /שאין להעלות לפורום תוכנות שנוצרו ע"י AI בגלל שכל אחד יכול ליבקש מהAI לבד
אבל כל אחד מבין שמותר להעזר בבינה בשביל ליצור דברים וגם מדריכיםלגבי מה שכתוב בהוראות לשימוש בפורום זה לא לענות תשובות של הAI אבל מותר ליצור דברים ולהעלות לפורום
@יוסף-הכהן אז חבל שאתה לא קורא את חוקים לפני שאתה מדבר
תקרא ותפנים ונדבר -
@יוסף-הכהן אז חבל שאתה לא קורא את חוקים לפני שאתה מדבר
תקרא ותפנים ונדבר@לנציצ אין לי כח עכשיו לקרוא את כל החוקים מחדש
אבל אני רק יודע שבפורום יש לפעמים ספאם פי אלף יותר מפוסט בAI [כמו איך להגיע לחנות מחשבים ] ואז לא ראיתי שאתה או @אברהם-גלסר פוצים את הפה
אבל כשמישהו כותב מדריך בAI ועד שם את זה בספוילר פתאום אתה ו @אברהם-גלסר קופצים עליו כאילו זה הספאם הכי גדול שמצאתם פה בפורום ...ואני אגיד לך שיש אנשים [לדוגמה אני ] שלא כל כך יודעים להשתמש עם AI ומדריך כגון זה כן עוזר לנו [תתסתכל לפי כמות הלייקים שקיבל הפוסט]
וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI
-
@לנציצ אין לי כח עכשיו לקרוא את כל החוקים מחדש
אבל אני רק יודע שבפורום יש לפעמים ספאם פי אלף יותר מפוסט בAI [כמו איך להגיע לחנות מחשבים ] ואז לא ראיתי שאתה או @אברהם-גלסר פוצים את הפה
אבל כשמישהו כותב מדריך בAI ועד שם את זה בספוילר פתאום אתה ו @אברהם-גלסר קופצים עליו כאילו זה הספאם הכי גדול שמצאתם פה בפורום ...ואני אגיד לך שיש אנשים [לדוגמה אני ] שלא כל כך יודעים להשתמש עם AI ומדריך כגון זה כן עוזר לנו [תתסתכל לפי כמות הלייקים שקיבל הפוסט]
וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI
@יוסף-הכהן כתב במדריך לבניית אתרים ב ai:
ועד שם את זה בספוילר פתאום
אם לא אנחנו זה היה בראשי ולא בספויילר
@יוסף-הכהן כתב במדריך לבניית אתרים ב ai:
וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI
הגעת לנקודה שכתובה בחוקי הפורום מותר להפיץ תוכנה שנכתבה עם AI אסור לכתוב פסוטים עם AI וזה כבר גדר שנפרץ לגמריי
אבל לפתוח נושא שמתחילתו ועד סופו הוא AI לא היה עד היום
לא שאני עוקב אדוק אבל לא זכור לי כזה דבר
וכמו שאמרתי ואני לא בניתי עד היום אתרים (בטח לא מעבר לבסיס)
יש סיכוי לא קטן שהמדריך יותר יבלבל מאשר יעזור
כי על אדם אתה סומך יותר מAI כשאני אומר לך על משהו זה יעבוד אתה תאמין לי כשAI אומר אתה לא תאמין -
@יוסף-הכהן כתב במדריך לבניית אתרים ב ai:
ועד שם את זה בספוילר פתאום
אם לא אנחנו זה היה בראשי ולא בספויילר
@יוסף-הכהן כתב במדריך לבניית אתרים ב ai:
וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI
הגעת לנקודה שכתובה בחוקי הפורום מותר להפיץ תוכנה שנכתבה עם AI אסור לכתוב פסוטים עם AI וזה כבר גדר שנפרץ לגמריי
אבל לפתוח נושא שמתחילתו ועד סופו הוא AI לא היה עד היום
לא שאני עוקב אדוק אבל לא זכור לי כזה דבר
וכמו שאמרתי ואני לא בניתי עד היום אתרים (בטח לא מעבר לבסיס)
יש סיכוי לא קטן שהמדריך יותר יבלבל מאשר יעזור
כי על אדם אתה סומך יותר מAI כשאני אומר לך על משהו זה יעבוד אתה תאמין לי כשAI אומר אתה לא תאמין -
לקחתי את הכפפה
**הדגשה חשובה
המדריך מיועד בעיקר ללימוד המושגים הראשונים לבאים בשערי בניית אתריםלא מוסמך לבנייה בפועל רק לעבור על המושגים החשובים שחייבים לדעת
לפיתוח בפועל פנו לai הזמין אצלכם ותבקשו הדרכה יותר מתאימה לכם**
כמובן הכל מה ai עברתי על המדריך תיקנתי בו דברים שהיו צריכים תיקון
הוא ברמה טובה מאודכמובן שאפשר לשפר אותו
וכאן מגיע המקום שלכםנערך לרגל בקשת הוותיקים
מדריך מקיף לבניית אתר בעזרת AI – מאפס ועד פרודקשן
המטרה של המדריך הזה היא לקחת אדם שאין לו כמעט ידע טכני, ולהביא אותו למצב שבו הוא יודע:
- להקים חשבון GitHub
- ליצור פרויקט ראשון
- להשתמש ב-AI כדי לכתוב את רוב הקוד
- לבנות אתר אמיתי
- לחבר מסד נתונים (Database)
- להעלות את האתר לאינטרנט
- לעבוד בצורה מסודרת כמו מפתח מקצועי
לא נבנה SaaS מורכב. נבנה את היסודות שיאפשרו לך להקים כמעט כל רעיון שתרצה בעתיד.
פרק 1 - להבין מה באמת בונים
לפני קוד, חשוב להבין ממה אתר מורכב.
דוגמה:
אתה רוצה אתר להצגת העסק שלך.
האתר מורכב מ:
Frontend
מה שהמשתמש רואה.
לדוגמה:
- דף בית
- תמונות
- טפסים
- כפתורים
טכנולוגיות:
- HTML
- CSS
- JavaScript
או
- React
- Next.js
Backend
המוח של האתר.
הוא מטפל ב:
- הרשמה
- התחברות
- שמירת מידע
- שליחת אימיילים
Database
המקום שבו נשמר המידע.
לדוגמה:
- משתמשים
- הזמנות
- פוסטים
- תגובות
פרק 2 - כלי העבודה המומלצים ב-2026
למתחיל הייתי ממליץ:
AI
או
עורך קוד
ניהול קוד
פריסה (Hosting)
מסד נתונים
פרק 3 - פתיחת GitHub
GitHub הוא המקום שבו הקוד שלך נשמר.
תחשוב עליו כמו Google Drive לקוד.
פתיחת חשבון
נכנסים ל:
לוחצים Sign Up.
יצירת Repository ראשון
Repository = תיקיית הפרויקט.
לאחר התחברות:
New Repository
שם:
my-first-websiteסמן:
Add READMEולחץ Create.
פרק 4 - התקנת Git
Git הוא הכלי שמחבר את המחשב שלך ל-GitHub.
מורידים:
לאחר ההתקנה פתח Terminal:
git --versionאם מופיעה גרסה:
git version 2.xxהכל תקין.
פרק 5 - התקנת Node.js
רוב האתרים המודרניים משתמשים ב-Node.
הורדה:
בדיקה:
node -vnpm -v
פרק 6 - התקנת VS Code
מורידים:
תוספים מומלצים:
- ESLint
- Prettier
- GitHub Copilot
- Tailwind CSS IntelliSense
פרק 7 - למה Next.js
ב-2026 כמעט כל פרויקט חדש מתחיל ב-Next.js.
יתרונות:
- SEO
- מהיר
- React מובנה
- קל להעלאה ל-Vercel
יצירת פרויקט:
npx create-next-app@latestהמערכת תשאל:
TypeScript? Yes ESLint? Yes Tailwind? Yes App Router? Yes
פרק 8 - מבנה הפרויקט
לאחר ההתקנה:
app/ components/ public/
app
הדפים באתר.
components
חלקים חוזרים.
לדוגמה:
- Header
- Footer
- Card
public
תמונות.
פרק 9 - שימוש נכון ב-AI
רוב המתחילים טועים כאן.
לא מבקשים:
תבנה לי אתרמבקשים:
תבנה לי דף נחיתה לעסק צילום. צבעים: שחור וזהב חלקים: Hero About Gallery Contact תייצר קוד Next.js + Tailwind
ה-AI עובד טוב כשנותנים הוראות ברורות.
פרק 10 - Git בפועל
יצירת Commit ראשון:
git add .git commit -m "initial project"
חיבור ל-GitHub:
git remote add origin URLgit push -u origin main
פרק 11 - CSS ו-Tailwind
במקום CSS רגיל משתמשים ב-Tailwind.
דוגמה:
<div class="bg-black text-white p-8">
המשמעות:
bg-black = רקע שחור text-white = טקסט לבן p-8 = ריווח
פרק 12 - בניית דף בית
בקשה מומלצת ל-AI:
צור דף בית מודרני ב-Next.js עם Tailwind. כולל: Hero Services Testimonials Contact Footer
הדבק את הקוד.
שמור.
הפעל:
npm run dev
האתר ירוץ ב:
localhost:3000
פרק 13 - מה זה Database
Database הוא מקום לשמירת מידע.
לדוגמה:
טופס צור קשר.
בלי DB:
המידע נעלםעם DB:
המידע נשמר
פרק 14 - Supabase
הפתרון הכי פשוט למתחילים.
פותחים חשבון:
Create Project
לאחר יצירה:
תקבל:
Project URL API KEY
פרק 15 - יצירת טבלה
לדוגמה:
create table contacts ( id bigint primary key generated always as identity, name text, email text, message text );
הטבלה תכיל:
שם אימייל הודעה
פרק 16 - חיבור האתר למסד הנתונים
התקנת SDK:
npm install @supabase/supabase-js
יצירת קובץ:
lib/supabase.ts
בקשת AI:
צור קובץ חיבור Supabase ב-Next.js TypeScript
הוא יפיק את הקוד.
פרק 17 - Environment Variables
לעולם לא שומרים סיסמאות בקוד.
יוצרים:
.env.local
דוגמה:
NEXT_PUBLIC_SUPABASE_URL=... NEXT_PUBLIC_SUPABASE_ANON_KEY=...
פרק 18 - טופס צור קשר
המשתמש שולח:
שם אימייל הודעה
בעת לחיצה על Send:
המידע נשלח ל-Supabase.
פרק 19 - Authentication
אם רוצים הרשמה והתחברות.
Supabase כבר יודע:
- Login
- Signup
- Password Reset
בקשה ל-AI:
בנה מערכת הרשמה והתחברות עם Supabase Auth ל-Next.js
פרק 20 - העלאת תמונות
אפשר:
- Supabase Storage
- Cloudinary
למתחילים:
Supabase Storage.
פרק 21 - SEO
SEO = הופעה בגוגל.
חשוב מאוד.
דוגמאות:
כותרת:
<title>צלם אירועים בתל אביב</title>
תיאור:
<meta name="description" content="..." />
פרק 22 - אבטחה
לעולם לא:
לחשוף API Keys לשמור סיסמאות גלויות לתת הרשאות מלאות
פרק 23 - העלאה לפרודקשן
הדרך הקלה ביותר:
Vercel
כניסה:
Login with GitHub
בחר Repository
Deploy
לאחר כדקה:
האתר באוויר.
פרק 24 - דומיין
קונים דומיין אצל:
או
דוגמא:
mybusiness.com
מחברים ל-Vercel.
פרק 25 - עדכון האתר
בכל פעם שאתה משנה קוד:
git add .git commit -m "update homepage"git push
Vercel יעדכן אוטומטית.
פרק 26 - זרימת עבודה מקצועית עם AI
כך עובדים כיום:
שלב 1
כותבים אפיון
אני רוצה אתר למאמן כושר.
שלב 2
מבקשים מה-AI:
צור PRD מלא.
שלב 3
מבקשים:
פרק את הפרויקט למשימות.
שלב 4
מבקשים:
צור את כל מבנה התיקיות.
שלב 5
מבקשים:
צור כל קומפוננטה בנפרד.
שלב 6
מבקשים:
בדוק ביצועים.
שלב 7
מבקשים:
בדוק SEO.
שלב 8
מבקשים:
בדוק אבטחה.
פרק 27 - מסלול מומלץ לפרויקט ראשון
אל תתחיל מסטארטאפ ענק.
תתחיל מ:
- אתר תיק עבודות
- אתר לעסק
- בלוג אישי
- אתר מתכונים
- אתר טיולים
- אתר אירועים
- אתר המלצות ספרים
- אתר המלצות מסעדות
אלו פרויקטים שיכולים ללמד כמעט את כל היסודות.
פרק 28 - הנוסחה הפשוטה להצלחה
לכל אתר שתבנה:
רעיון ↓ אפיון ↓ AI ↓ Next.js ↓ GitHub ↓ Supabase ↓ Vercel ↓ דומיין ↓ פרודקשןאם תשלוט היטב בשרשרת הזו, תוכל להקים עשרות סוגי אתרים שונים בלי להיות מתכנת ותיק. ה-AI יכתוב חלק גדול מהקוד, אבל היכולת שלך להבין איך החלקים מתחברים — GitHub, פרויקט, Frontend, Backend, Database ופריסה — היא מה שבאמת יהפוך רעיון לאתר חי באינטרנט.
המלצה פרקטית: בנה קודם אתר פשוט של 3–5 עמודים ללא מסד נתונים. אחרי שהעלית אותו לפרודקשן, הוסף טופס, אחר כך מסד נתונים, ורק בסוף התחברות משתמשים. זו הדרך המהירה ביותר ללמוד בלי להסתבך.
@עניו-כמשה כתב במדריך לבניית אתרים ב ai:
פרק 11 - CSS ו-Tailwind
במקום CSS רגיל משתמשים ב-Tailwind.אולי תסביר לנו מה ההבדל אני תמיד משתמש בCSS לא ידעתי שזה לא טוב
-
@עניו-כמשה כתב במדריך לבניית אתרים ב ai:
פרק 11 - CSS ו-Tailwind
במקום CSS רגיל משתמשים ב-Tailwind.אולי תסביר לנו מה ההבדל אני תמיד משתמש בCSS לא ידעתי שזה לא טוב
@עמי-מחשבים זה כן טוב.
Tailwind זה פרמוורק לCSS.
זה די לא נכון לכתוב ש'במקום' CSS משתמשים בו.
כי זה בס"ה עיצוב בלוקים של שפת העיצוב CSS.. -
קודם כל תודה רבה על המדריך!
@עניו-כמשה כתב במדריך לבניית אתרים ב ai:
GitHub הוא המקום שבו הקוד שלך נשמר.
תחשוב עליו כמו Google Drive לקוד.
למה בעצם אני צריך את גיטהב? למה לא להשאיר על המחשב? מה הערך המוסף שגיטהב נותן לי חוץ מאחסון?
-
@חיים5299173 שכל אדם יוכל לפתוח את האתר שלך
@טופ-שבמתמחים אחד מתוך עשרות השימושים בגיטהאב.
בגדול גיטהאב מיועד לעבודת צוות.
יש הרבה סוגים.
יש סביבת פיתוח, יש הרצת אתרים סטטיים וכו'.. -
@יוסף-הכהן כתב במדריך לבניית אתרים ב ai:
ועד שם את זה בספוילר פתאום
אם לא אנחנו זה היה בראשי ולא בספויילר
@יוסף-הכהן כתב במדריך לבניית אתרים ב ai:
וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI
הגעת לנקודה שכתובה בחוקי הפורום מותר להפיץ תוכנה שנכתבה עם AI אסור לכתוב פסוטים עם AI וזה כבר גדר שנפרץ לגמריי
אבל לפתוח נושא שמתחילתו ועד סופו הוא AI לא היה עד היום
לא שאני עוקב אדוק אבל לא זכור לי כזה דבר
וכמו שאמרתי ואני לא בניתי עד היום אתרים (בטח לא מעבר לבסיס)
יש סיכוי לא קטן שהמדריך יותר יבלבל מאשר יעזור
כי על אדם אתה סומך יותר מAI כשאני אומר לך על משהו זה יעבוד אתה תאמין לי כשAI אומר אתה לא תאמין@לנציצ כתב במדריך לבניית אתרים ב ai:
וכמו שאמרתי ואני לא בניתי עד היום אתרים (בטח לא מעבר לבסיס)
יש סיכוי לא קטן שהמדריך יותר יבלבל מאשר יעזוראני גם לא בניתי כל כך וגם מה שבניתי היה לי מסובך להבין ממנו ולקח לי שעות עד שהבנתי
ופה ברגע שראיתי הבנתי הרבה דברים שמהAI בטוח לא הייתי מבין!
וגם אם מתחילים ממש לא יבינו את המדריך, לבקש ישר מAI הדרכה גם יהיה קשה לקבל ממנו הדרכה מובנת (במיוחד שלרוב מי שלא כל כך מבין את המדריך זה מתחילים שלא כל כך יודעים להשתמש טוב עם AI), אבל אם אתה מביא לו את המדריך ומסמן לו מה לא הבנת במדריך יהיה יותר קל לקבל תשובה טובה, מאשר לכתוב לו מה אתה צריך ועד שהוא מבין אותך ואז אחרי שעות לקבל תשובה שסוף סוף אתה מבין אותה! -
@עניו-כמשה @אברהם-גלסר @לנציצ
בד"כ אני לא מתערב בנושאים מעין אלו אבל הפעם הזאת זה ממש מפריע לי (בלי לפגוע באף אחד)
עם כל הכבוד לכולם @עניו-כמשה הוא אחד מותיקי הפורום ומהעוזרים הגדולים שלו!!
לא לדבר על זה שהמדריך עצמו יפה ומפורט למשתמש המתחיל!
אני תמהתי למה זה בספוילר ולא בראשי..
אני בטוח שאם כל אחד היה מביא מדריך מAI כמו ש@עניו-כמשה עושה אין שום בעיה בזה.
בקיצור @עניו-כמשה מחזק את ידיך ומאחל לך להמשיך במדריכים כאלו ואחרים!
בהצלחה! -
@יוסף-הכהן כתב במדריך לבניית אתרים ב ai:
ועד שם את זה בספוילר פתאום
אם לא אנחנו זה היה בראשי ולא בספויילר
@יוסף-הכהן כתב במדריך לבניית אתרים ב ai:
וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI
הגעת לנקודה שכתובה בחוקי הפורום מותר להפיץ תוכנה שנכתבה עם AI אסור לכתוב פסוטים עם AI וזה כבר גדר שנפרץ לגמריי
אבל לפתוח נושא שמתחילתו ועד סופו הוא AI לא היה עד היום
לא שאני עוקב אדוק אבל לא זכור לי כזה דבר
וכמו שאמרתי ואני לא בניתי עד היום אתרים (בטח לא מעבר לבסיס)
יש סיכוי לא קטן שהמדריך יותר יבלבל מאשר יעזור
כי על אדם אתה סומך יותר מAI כשאני אומר לך על משהו זה יעבוד אתה תאמין לי כשAI אומר אתה לא תאמין@לנציצ כתב במדריך לבניית אתרים ב ai:
וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI
ממש ממש פשוט לכתוב ב AI לא לצריך כלום חוץ מלבקש לבנות עם AI צריך הרבה הרבה ידע ועבודה תלוי בדרך כלל ברמה של התוכנה או האפליקציה וסתם מידיעה אומר לך 70 אחוז מהקוד בפורום כאן זה AI ולא מעשה ידי אדם AI הוא כלי השאלה איך משתשים בו.
@עניו-כמשה מחזק את ידך ממש יפה. (עניתי לגופה של שאלה) -
@עניו-כמשה @אברהם-גלסר @לנציצ
בד"כ אני לא מתערב בנושאים מעין אלו אבל הפעם הזאת זה ממש מפריע לי (בלי לפגוע באף אחד)
עם כל הכבוד לכולם @עניו-כמשה הוא אחד מותיקי הפורום ומהעוזרים הגדולים שלו!!
לא לדבר על זה שהמדריך עצמו יפה ומפורט למשתמש המתחיל!
אני תמהתי למה זה בספוילר ולא בראשי..
אני בטוח שאם כל אחד היה מביא מדריך מAI כמו ש@עניו-כמשה עושה אין שום בעיה בזה.
בקיצור @עניו-כמשה מחזק את ידיך ומאחל לך להמשיך במדריכים כאלו ואחרים!
בהצלחה! -
@לנציצ אין לי כח עכשיו לקרוא את כל החוקים מחדש
אבל אני רק יודע שבפורום יש לפעמים ספאם פי אלף יותר מפוסט בAI [כמו איך להגיע לחנות מחשבים ] ואז לא ראיתי שאתה או @אברהם-גלסר פוצים את הפה
אבל כשמישהו כותב מדריך בAI ועד שם את זה בספוילר פתאום אתה ו @אברהם-גלסר קופצים עליו כאילו זה הספאם הכי גדול שמצאתם פה בפורום ...ואני אגיד לך שיש אנשים [לדוגמה אני ] שלא כל כך יודעים להשתמש עם AI ומדריך כגון זה כן עוזר לנו [תתסתכל לפי כמות הלייקים שקיבל הפוסט]
וחוץ מזה עוד לא הסברת לי מה ההבדל בין לכתוב מדריך בעזרת הAI לבין לבנות תוכנה בAI
@יוסף-הכהן אתה צוחק?
ליבנות תוכנה או אפליקציה בבינה מלאכותית לא כזה קיים אלא עם עבודה כמו להעתיק קודים ולהדביק במקומות הנכונים וכ'ו...ואל תתחילו להרצות לי על בייס 44 או על קלוד כי לא לזאת היתה כוונת המשורר...
ולהעתיק פוסט של ai זה עיניין של 23 שניות...
כמובן לא מדבר על @עניו-כמשה שהשקיע בעריכת מדריך זה למען הכלל
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}