גל חבקין, אחד הכוכבים בקבוצת הדיונים של יובל אבידני, שיתף פעמיים את תהליך העבודה שלו ביצירת אפליקציות עם בינה. מדובר בפרויקטים ברמת מורכבות גבוהה, שעד היום רק מתכנתים יכלו ליישם. הוא מביא מנסיונו במבני אפליקציות וממליץ על כלים שמאפשרים עבודה מיטבית.
פוסט למתקדמים מאוד…
ההקלטה הראשונה:
מדובר פה על סדר עבודה בבניית מערכות, אתרים ואפליקציות, סדר פעולה של איך מתחילים פרוייקט, מעצבים, מוסיפים ועוד.
שימוש בכלים:
cursor – המטרה שלו זה עורך קוד עם בינה מלאכותית שמשמשת גם לרשום קוד, עוזר, עורך, יצירת קבצים, עריכת קבצים ועוד.
קישור:
https://www.cursor.com/
v0 – המטרה שלו זה לעצב את האתר/מערכת/אפליקציה בצורה מקצועית שמתאימה לשנת 2024 מה שגם openai בעצמה עובדת עם העיצובים שלה:
קישור:
https://v0.dev/
bolt – המטרה שלו זה ליצור את הפרוייקט בכך שהוא מתקין את הספריות, מסדר את הפרוייקט, ומכין את כל הקרקע שכבר פועלת מבלי לשבור את הראש.
קישור:
https://bolt.new/
shadcn – המטרה שלו זה לספק ui בצורה מקצועית ונוחה ונותן פיתרון להכל:
קישור:
https://ui.shadcn.com/docs/components/
supabase – המטרה שלו זה מסד נתונים מאוד נוח וקל בסגנון אקסל, קל לתפעול, אוטומציות מובנות, עדכון של המסד בזמן אמת
קישור:
https://supabase.com/
מבחינת סדר פעולה:
1. להשתמש בבולט ליצירת הפרוייקט בכך שנותנים לו פרומפט (לא להשתמש מעבר ל1-5 פרומפטים)
2. משתמשים בv0 כדי לעצב חלק באתר וכדי לעדכן את בולט בספריות עיצוב של shadcn)
3. לשמור את הפרוייקט במחשב ולפתוח את cursor
4. להתקין את הדברים בכך שבcursor פותחים את הterminal ורושמים: npm install , לאחר שזה מסיים להתקין לרשום npm run dev ואז תראו כתובת קישור, לוחצים עליו והאתר נפתח
5. בקורסור לפתוח את הצ׳אט בצד ולרשום לו שאתם רוצים לחבר את המסד נתונים ושישלח לכם את הsql קוד בעצם זה יוצר לכם את הקוד שאתם מדביקים במסד נתונים supabase תחת sql editor ואז לוחצים run.
6. לשלוח לקורסור את הsql קוד, חיבור למסד נתונים, ואת הapi key שלכם.
7. להמשיך לעבוד עם קורסור (כל שינוי שתעשו אתם תראו באתר שזה משתנה בזמן אמת)
בהדרכה בזום במידה ותראו הכל אני מראה כל שלב ושלב כולל התמודדויות עם בעיות במידה ויש ואיך לתקן הכל בקלות יחסית ואיך בקצת זמן מפתחים מערכת או אתר ללא צורך בידע בתכנות,עיצוב.
לגבי השאלות ששאלתם:
1. מה ההבדלים במודלים? תשובה: כל מערכת יש לה את המטרה שלה ואת הסדר עבודה שלה נכון להיום.
2. הקונטקסט (זיכרון של המודל שפה באותו שיחה) מוגבלת בבולט? תשובה: כן, לכן משתמשים בעד 1-5 פרומפטים כדי שלא יהיה שבירות וחוסר במידע
3. מה זה npm? תשובה: זה מתקין חבילות או מריץ
סיכום כללי:
לעבוד מסודר, לא לבקש שינויים ענקיים אלה כל פעם שינוי אחד אחד, זה יכול להיות מרמת הפונט, מיקום הטקסט, צבעים וכו וכו, אף פעם לא לבקש הוספות או שינויים או פרומפטים מפלצתיים.
במידה ונגרם לכם תקלה כלשהי אז יש בקורסור אפשרות של chepoint בקומפוסר ששם אם תלחצו זה ישחזר לכם לגרסה אחת אחורה שלא עשתה את הבעיה, ואז תמשיכו הלאה רק עם בקשה שונה קצת.
לתייג את הקבצים בעזרת @codebase או קובץ ספציפי במידה ואתם רוצים להתמקד על דברים ספצייפים.
*לא מצפה שישר תבינו הכל אבל אם תיישמו את הדברים ותנסו בעצמכם כמה פעמים אז אתם תבינו ותצליחו ובנוסף אני תמיד זמין פה לתת מענה
מי שרוצה להתקין bolt.new מקומית יש פה הסבר טוב להריץ בדוקר מהמפתח של בולט המקומי
https://youtu.be/31ivQdydmGg?si=ZLPi56Nf_meUItuK
למי שפספס מדובר פה על:
בניית פרוייקטים כגון אתרים ואפליקציות (מערכות)
שימוש ב- bolt,v0,shadcn,cursor,supabase עם אוטומציות בנוסף תעברו פה בקבוצה על מה שרשמתי לפני כמה ימים פירטתי על כל דבר בהרחבה
מדריך כתוב מאת גל חבקין:
��מדריך לשימוש נכון בכלים מבוססים בינה מלאכותית – גל חבקין (2)�
הקלטה שניה:
חומרי עזר:
- קובץ 1: https://docs.google.com/document/d/1Sbe1GTt3l08u4XsX1-5zDy5aSWtaUPmO3ZHtOynMWtA/edit?usp=sharing
לא לשכוח לשנות פה את המיקום של התיקיה של הפרוייקט איפה שרשום project_path =
2. קובץ 2: https://docs.google.com/document/d/1j3NXih4CTiNC_j9Gc9k2gXMbDFOATNp7RVXVwRWrOEg/edit?usp=sharing
פה לא לשכוח להזין את ה
SUPABASE_URL = “your_supabase_url_here”
SUPABASE_KEY = “your_supabase_key_here”
שלכם
זה בשביל לאסוף את הטבלאות ועמודות מהמסד נתונים
3.
זה הפרומפט לo1 ליצירת מסמכי איפיון עמודים ועיצוב של הפרוייקט:
You need to create document for everything.
– Project Requirements Doc (PRD)
– Each Page layout and structure
– App flow doc
– App functionality doc
לשמור בקובץ .md תחת תיקיה docs בפרוייקט
4.
זה הפרומפט לקורסור בrules for ai:
your an expert ai assistant and exceptional senior software developoper with vast knowledge across multiple programming languages, frameworks, and best practices.
DO NOT GIVE ME HIGH LEVEL SHIT, IF I ASK FOR FIX OR EXPLANATION, I WANT ACTUAL CODE OR EXPLANATION!!! !
DON’T WANT “Here’s how you can blablabla”
Be casual unless otherwise specified
Be terse
Suggest solutions that I didn’t think about-anticipate my needs
– treat me as an expert
Be accurate and thorough
Give the answer immediately. Provide detailed explanations and restate my query in your own words if necessary after giving the answer
Value good arguments over authorities, the source is irrelevant
Consider new technologies and contrarian ideas, not just the conventional wisdom
You may use high levels of speculation or prediction, just flag it for me
No moral lectures
Discuss safety only when it’s crucial and non-obvious
If your content policy is an issue, provide the closest acceptable response and explain the content policy issue afterward
Cite sources whenever possible at the end, not inline
No need to mention your knowledge cutoff
No need to disclose you’re an Al
Please respect my prettier preferences when you provide code.
Split into multiple responses if one response isn’t enough to answer the question.
If i ask for adjustments to code I have provided you, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make. Multiple code blocks are ok
בהצלחה!
