בס”ד
השבוע יצרתי אפליקציה – או עמוד נחיתה – בלי אפפסקריפט.
איך זה קרה? היה לי מנוי לחודש לקורסור, בגלל אפליקציית השאלת התחפושות שבניתי לקהילה מקסימה במרכז (שגם היא סיפור נחמד! בעבר בניתי כאלו בגלייד, ועכשיו – ישירות עם בינה ואפפסקריפט).
מה זה קורסור CURSOR?
כלי לניהול קוד. מבוסס על כלי כתיבת קוד בשם VSCODE, עם הבדל משמעותי – הבינה משולבת בתוכו. אני יכולה לשוחח עם הצ’אט עצמו (בדרך כלל עם קלוד סונט 3.5, שכותב קוד הכי טוב כרגע) בחלונית מימין, לראות את הקוד שנוצר במרכז, ומשמאל – לראות רשימת קבצים.
כל עריכה ותיקון שהצ’אט מציע – קורסור מאפשר לשלב ישירות בקובץ שלי, ומסמן בצבע מה מוצע למחוק ומה להוסיף.
בעבר, הייתי מקבלת מקלוד 2 קבצים בשביל אפפסריפט, וככל שהתקדמנו בעריכות – קלוד כבר לא נותן קוד מלא, אלא מציע סקריפט קצר, ונותן לי הוראות איפה לשבץ אותו בקובץ הקיים, ומה למחוק. למתכנת זה מתאים ונוח, לי זה לקח הרבה זמן ולא פעם שברתי את הקוד בגלל שלא מחקתי מספיק, או יותר מדי.
קורסור עוזר בלשלב את הדברים במקום, ואני יודעת שאני מקבלת קובץ שלם ותקין.
ככל שמדובר בפרויקט מורכב יהיו בו יותר קבצים, וצריך כלי מתאים כדי להשתלט עליו.
אז לכבוד משימת האפליקציה לתחפושות רכשתי מנוי לחודש אחד (20$). סיימתי אותה, וכמובן רציתי לנצל את הימים שנותרו. החלטתי שהגיע הזמן לשבור את תקרת הזכוכית הנוחה של Apps script, ששירתה אותי בשלל יישומים, וחסכה לי שילוב כלים מרובים. ומצד שני – היא מוגבלת. היא יכולה להחזיק רק שפת HTML ולא שפות מורכבות יותר, אי אפשר להריץ אותה בהיקפים (SCALE) רחבים, ויש סרבול מסוים בעבודה איתה, כי עדיין אני צריכה להעתיק ולהדביק שני קבצי קוד בכל סבב.
בקבוצות של יובל אבידני ושל גל חבקין, וגם ביוטיוב, ראיתי הדגמות לכלים שונים שבונים איתם יישומים מורכבים. ניסיתי להתחיל עם NEXTJS שנחשבת שפה ברמה גבוהה שמאפשרת בניית אפליקציות בעלות יכולת רחבה, אבל די מהר ראיתי שזה לקפוץ גבוה מדי, קורסור התקין במשך שעות המון רכיבים, יצר עוד ועוד ועוד קבצים (ואני רגילה לפרויקט של 2 קבצים..), ועשה שגיאות בלופים. החלטתי לעצור.
בני הדודים שלי, טוביה ונעמי, בדיוק התחילו לפרסם צימר מהמם שהם הקימו בגבעה שלהם, ונעמי ביקשה אתר קטן עם יכולת להזמין אירוח ליום או יותר. זה היה בדיוק בגודל המתאים לפרויקט שרציתי.
התייעצתי עם קלוד איך כדאי לבנות אתר עם הצרכים שביקשתי בשפת תכנות פשוטה, הוא המליץ על HTML בשילוב עיצוב בCSS ופונקציות ב JAVASCRIPT. הוא קיבל ממני את כל המידע, וכתב פרומפט מסודר – כולל השפות וכלי העזר.
בתור כלים נוספים – חינמיים כולם ברמה שבה השתמשתי – השתמשתי בSUPABASE המקסים למסד נתונים, וVERCEL בשביל הפריסה באינטרנט. (חשוב לומר – ניסיתי לפני כן את NETLIFY שהוא עוד יותר פשוט – גוררים אליו את התיקייה והוא פורס – אבל התצוגה במובייל היתה גרועה ומתישהו עברתי לוורסל).
וורסל דורש קצת יותר שלבי התקנה (צריך לחבר את הפרויקט דרך GITHUB, ולהתקין בקורסור את GIT, ואז לקשר בין כולם), אבל מרגע ששירשרתי כל מה שצריך – הוא מתעדכן לבד! כלומר, אני מדברת עם הבינה ומכוונת איך לשפר, הבינה מחוללת קוד, קורסור מדביק את כל השינויים במקומם, אני מאשרת – וזה עולה אוטומטית לגיטהאב, ומתפרסם בוורסל. מרעננים את הקישור ורואים מה השתנה.
שלבי העבודה
התייעצות עם קלוד לחדד ולדייק את הפרויקט והשפות והכלים. לקבל ממנו פרומפט מסודר לקורסור.
תיעדתי אצלי בקובץ נפרד את הפרומפט הראשוני, והרצתי אותו בקורסור. המטרה הראשונה היא להצליח לראות את התוצר החי באינטרנט. הוא אמנם מכוער ובסיסי, אבל משם – אפשר להתגלגל. בגלל שעבדתי עם שפה פשוטה, לא היו המון שגיאות ותוך דקות נפתח עמוד הבית.
כמובן שהיה מלא מה לתקן ולשפר, צריך כמה וכמה שלבים וחזרות.
בקובץ כתבתי צ’קליסט עם השיפורים שעוד צריך לעשות. כל שיפור שכבר הצלחתי לדחוף פנימה – סימנתי. ככל שמתקדמים מגלים עוד שיפורים ורעיונות.
כמו עם אפפסקריפט, יש תיקונים שהוא מסתדר איתם בקלילות (“שהמפה תיפתח על תצוגת תמונת לוויין, ובעברית”), ויש כאלה שהוא נכנס ללופים וצריך לזהות שזה קשה לו (“סמן באפור תאריכים שאינם זמינים”), ולנסות מכיוון אחר.
כשהממשק קיבל צורה, הוספתי פונקציות – למשל שלוח השנה באמת יציג תאריכים זמינים ויחסום מה שלא, ושיאפשר לבעלת הצימר לנהל את הזמינות מבפנים (יש שם פשוט אייקון קטנטן מוגן בסיסמה, הכי פשוט). בשביל שהמידע הזה יתועד, היה צריך לחבר לפרויקט את SUPABASE, ששומר את המידע וממציג לגולש מצב עדכני.
מתחילים להשתמש, ולומדים מה עוד אפשר ורוצים לשדרג.
נקודות חשובות:
- אתם לא מכירים את הכלים האלה. גם אני לא, רק ידעתי שהם מומלצים (עכשיו גם אתם יודעים!). משם והלאה קלוד הסביר לי איך ומה עושים בפנים, מה תפקידם בשרשרת.
- יהיו שגיאות. לא להילחץ, תחזירו לבינה את השגיאה והיא פותרת.
- תזהו מה שהוא בעקביות לא מצליח לבצע, ותנסו לברר איתו למה זה לא עובד. זה הזמן לחשיבה יצירתית, לפתור את העניין מכיוון אחר.
- אם אחד הקבצים שלכם נהיה ארוך מדי – צריך לפצל אותו (בפקודה פשוטה לקורסור). זה מפני שמעבר ל400 שורות כבר קשה לבינה לטפל בקובץ יחיד. יש לה “חלון טוקנים” מוגבל.
יש לכם שאלות? בכיף
(רק שימו לב – שגיאות אני לא יכולה לפתור, רק הבינה, אני יכולה לענות מתוך הנסיון המוגבל שלי על מה יכול להיות כיוון לעקוף וכדומה)
והמון תודה לגל חבקין, נועם נאומובסקי וחברי הקהילה ששיתפו מהתהליכים שלהם בפירוט, וכך יכולת ללמוד ולקבל מושגים וביטחון.
עוד נמשיך לשפות מורכבות, ובע”ה אעדכן
