תוכן עניינים
עד לא מזמן יחסית, עולם הפיתוח היה שמור לטכנולוגים מלידה או מתכנתים בחסד. בתקופה האחרונה, מהפכת הבינה המלאכותית מחוללת סערה נוספת וסוחפת את עולם הפיתוח לתוכה ומאפשרת לכל מי שרוצה להתחיל לפתח מוצרים, אפליקציות ואתרים, תוך שימוש בכלים שכותבים את הקוד עבורנו בצורה מרשימה. במאמר הזה נדבר על כל מה שצריך לדעת כדי להתחיל לפתח עם AI גם אם אתם מתחילים גמורים.
למה פיתוח?
הבעיה מתחילה בכך שמתחילים ללמוד משהו או להיכנס לתחום מסוים כשלא מבינים למה בכלל נכנסים לזה מלכתחילה. זה עמום. מסתורי. לא ברור. משקיעים המון זמן ומהר מאוד גם הולכים לאיבוד וכאשר מגיע אתגר כלשהו, מרימים ידיים ופורשים. ככה זה כשעושים דברים מבלי שמבינים איך למה וכמה.
עולם הפיתוח עוזר לנו לפתור בעיות. יש לנו רעיון כלשהו שעדיין לא פתרו אותו - אנחנו יכולים לפתח אותו בעצמנו. יש לנו רעיון לאפליקציה מסוימת או שאנחנו חושבים שיש לנו רעיון יעיל יותר מאחרים - מצוין! בואו נקח את זה הלאה לפתח אב טיפוס!
חשוב להבין שכשאני מדבר על "אפליקציה" אני מתייחס גם לאפליקציות למובייל אבל גם - ובעיקר - לאפליקציות WEB, שנקראות WEB APP או פשוט אתרי אינטרנט מודרנים כפי שאנחנו מכירים אותם. הסיבה שאתרי אינטרנט שודרגו לטייטל של "אפליקציות WEB" היא היות והאתרים מכילים מורכבות גדולה ומתקדמת הרבה יותר מאשר אתר ראווה כלשהו. יש בהם המון פיצ'רים שמיישמים פעולות שונות.
צד אחורי וצד קדמי
כל אתר אינטרנט בנוי מצד אחורי וצד קדמי. צד קדמי נקרא גם צד לקוח, כי הוא זה שפונה ללקוח. למשתמש. המשתמש מגיע לאתר האינטרנט ופוגש את הממשק, את חוויית המשתמש ואת העיצוב. זה צד הלקוח.
מנגד, כל פעולה שהאתר מבצע שכרוכה בשליפת מידע ממאגר מידע מסוים, או אימות, הזדהות, התחברות, הצגת מאמרים או מוצרים, כל הדברים האלה מוגדרים בצד האחורי של האתר, צד השרת. הוא נקרא שרת כי הוא משרת אותנו. הוא משרת את הלקוח שלנו.
אז יש לנו צד לקוח וצד שרת. צד קדמי שפונה ללקוח וצד אחורי שהוא השרת.
אני אוהב לתת דוגמאות מעולם המסעדנות כי זה מאוד ברור להבין את זה. כאשר אנחנו יושבים במסעדה וניגש אלינו מלצר, אנו אומרים לו מה אנחנו רוצים להזמין מהתפריט, הוא ניגש עם ההזמנה שלנו למטבח, המטבח מתחיל להכין את הארוחה וכאשר היא מוכנה - הוא מיידע את המלצר, שמגיש אלינו את הארוחה.
אנחנו כלקוחות לא צריכים להתעסק במטבח או במה שקורה שם בפנים, מספיק לנו שהתפריט יהיה מאיר פנים ומזמין ומפתה. מנגד, את המטבח לא מעניין צד הלקוח, הוא צריך להיות יעיל. הוא צריך להיות ערוך ומוכן להזמנות שהוא מקבל, לעבד אותן במהירות וביעילות האפשרית ולסיים את המשימות שלו בצורה הטובה ביותר. למטבח כנראה גם שמורים המתכונים בצד, כדי שכאשר הם יצטרכו לבשל מנה מסוימת, הם ישלפו את המתכון, יעקבו אחריו, וימשיכו הלאה. בנוסף, הצד הניהולי התפעולי של המסעדה אחראי על רישום מוקדם של אורחים למסעדה, שמירת מקומות וניהול הזמנות, כל הדברים האלה נשמרים במאגר מידע כלשהו, שאנחנו מכנים "בסיס נתונים". הבסיס שמכיל את הנתונים של המוצר והעסק שלנו.
זה בדיוק כמו עולם הפיתוח. המשתמש לא צריך לדעת מה קורה מאחורי הקלעים באתר שלנו וזה לא אמור לעניין אותו אפילו, כל מה שהוא רוצה זה חוויה טובה שתעבוד כמו שהוא מצפה.
מנגד, השרת שלנו צריך להיות ערוך לקבלת בקשות, ביצוע לוגיקות וטיפול במשימות בצורה המיטבית תוך יכולות שמירת מידע וקריאתו מבסיסי נתונים.
באופן כללי, ארכיטקטורה (תשתית) של אתרי אינטרנט תיראה כך:
קוד גבירותיי ורבותי, קוד!
כל תוכנה באשר היא, כתובה בראש ובראשונה מקוד. בין אם מדובר בתוכנה שמתקינים על המחשב, בין אם מדובר באתר אינטרנט שהדפדפן שלנו מציג. הכל קוד. קוד זו מילה נרדפת לשפה שהמחשב יכול להבין כדי להציג לנו את הפלט. הדפדפן למשל, קורא את קוד המקור של האתרים והופך אותו לתצוגה ויזואלית שאנחנו רואים כממשק יפהפה, אבל האמת היא שכל הממשקים היפים הם קוד. ואת הקוד הזה אנחנו יכולים לייצר בעצמנו או ע"י לימוד עצמי ותכנות קלאסי, או על ידי שימוש בכלי בינה מלאכותית שיכולים לייצר קוד עבורנו.
דבר חשוב נוסף הוא: אנחנו יכולים לפתח בעצמנו תוכנות ואתרים ולכתוב את כל הקוד לבד, אבל ברוב המוחלט של המקרים יש אנשים שכבר עברו את אותו הדבר כמונו ולכן אין לנו צורך לעשות את זה. יש אתרים כמו GitHub ו-HuggingFace שמכילים קוד חינם לשימוש, שקרוי גם "קוד מקור פתוח", או Open Source Code, שניתן פשוט להעתיק אלינו וזה מקל לנו מאוד על החיים.
כשם שיש ספריות קוד מקור פתוח, יש גם מסגרות של פיתוח, Frameworks, שפותחו עבורנו ולמעשה תוחמות את סביבת העבודה שלנו לתהליך סדור כדי שלא נלך לאיבוד. מסגרת עבודה לפיתוח, פריימוורק, בעצם אומרת לנו איך מבנה של אתר צריך להיראות בצד הלקוח ובצד השרת ועוזרת לנו לנהל את הכל בצורה טובה וקלה יותר. קיימות שפות שונות ו-פריימוורקים שונים ומגוונים והבחירה ביניהם היא עולם ומלואו. למשל, שפת התכנות Python נתמכת בפריימוורקים Flask או Django, בעוד ש-JavaScript נתמכת בפריימוורקים רבים אחרים כמו Express.js, או שפות נוספות מבוססת JavaScript שמאפשרות לפתח בקלות יתירה, כמו React / TypeScript / Next.js וכדומה.
קוד מקור פתוח ופריימוורקים מתחברים. בריאקט למשל קיימות חבילות חינמיות שהן קוד מקור פתוח כמו React dnd שמאפשר "Drag and Drop", או React Graph שמאפשר ויזואליזציות וכדומה. כך שהכל משתלב. חשוב מאוד להבין שכל שימוש בחבילה כזו או אחרת, בקוד כלשהו, גם אם זה פריימוורק, צריך קודם כל להיבדק מבחינת אבטחת מידע. זאת אומרת, לשים לב שקוד שרוצים להשתמש בו הוא ספרייה מוכרת, שיש לה מספיק הורדות, תגובות, שהיא מנוהלת, מתוחזקת, שמי שחיבר אותה זה ארגון מוכר או חברה מוכרת או אפילו אדם מוכר, שיש תיקוני באגים. אם לא בודקים זאת, סביר להניח שמתישהו תצוץ פגיעות אבטחת מידע כי כמעט אין קוד בלי פגיעויות, ואם מדובר בחבילות שלא נתמכות אז לא יהיה מי שיתקן את הפגיעויות ולכן זה חשוב מאוד.
אז עכשיו שהנחנו את היסודות לפיתוח: צד לקוח, צד שרת ובסיסי נתונים, אנחנו יכולים להתחיל להשלים את הפאזל: כלי בינה מלאכותית מאפשרים לנו לבנות את צד הלקוח בצורה קלה, כלים מתקדמים יותר מאפשרים לנו לבנות גם את הצד האחורי, וכלים נוספים מאפשרים לנו אפילו להתחבר לבסיסי נתונים. זה נשמע מסובך, ואולי זה לא הכי קל תמיד, אבל בואו נדבר על זה.
בואו נדבר תכלס, איפה הכלים?
כדי לפתח אתר, צד לקוח, אנחנו יכולים להשתמש בהמון כלים, הבולטים שבהם:
יכולות ה-ARTIFACT של מודל השפה קלוד שמסוגל לבנות ממשקים בצורה קלה ונוחה. כמובן שהוא מייצר קוד די בסיסי, של אפליקציות קטנות, מיני משחקים, עמודי ראווה, אבל אין לו חיבור לצד אחורי ולכן כשאנחנו משתמשים בו, אנחנו מוגבלים לעמוד שמשתמש יכול לגשת אליו אבל לא לבצע פעולות מעניינות במיוחד.
המוצר v0.dev של חברת Vercel, מוצר שמפתח אתרים וגם ממשקים יפים מאוד מפרומפטים (הנחיות) בלבד. נוכל לקבל צד לקוח נחמד מאוד עם פוטנציאל להרחבה שלו לפיצ'רים נוספים.
כדי לפתח אתר עם צד לקוח וגם צד שרת, אנחנו יכולים להשתמש בכלים אחרים, וגם כאן הבולטים שבהם הם:
אתר bolt.new שמסוגל לקבל הנחיות ולייצר אפליקציות מלאות. גם צד לקוח וגם צד שרת. הוא מגדיר לעצמו סביבת פיתוח, מתקין לבד את כל מה שצריך ויודע ליצור אתר שמחבר את הכל במקום אחד (מלבד בסיס נתונים, שזו יכולת שנוספה יחסית לאחרונה למשתמשי הבטא).
התוכנות Cursor / Windsurf - כל אחת מהתוכנות האלה ניתנות להתקנה על המחשב. לאחר שמתקינים אותן על המחשב, ניתן להפעיל אותן. מדובר בתוכנת שהן סטודיו לפיתוח. מה שמכונה IDE, סביבת פיתוח. תוכנה שבה נכתוב קוד שירוץ על המחשב שלנו ויראה לנו את התוצר שלנו. כאשר נרצה להעביר את האתר הסופי מהאתר שלנו למקום ציבורי כדי שכל העולם יוכל לגשת אליו - נצטרך לעבור תהליך פרסום אתר שהוא לא תמיד קל ולרוב גם לא כיפי. התוכנות האלה מכילות את היכולות העוצמתיות ביותר, יש להן חיבור למודלים גדולים של שפה. והיכולת לצלול לפרטי הפרטים בקוד היא גבוהה מאוד ועבור מתכנתים אין לזה אח ורע. מה שמאוד יפה הוא שהקוד יכול להישתל אוטומטית במיקומים המדויקים בכל קובץ ולחסוך לנו המון עבודה קשה.
התוסף GitHub Copilot - התוכנות שהזכרתי הרגע, קרסר ו-ווינדסרף, אימצו את קוד המקור של תוכנה של מייקרוסופט בשם VSCODE ועליה הוסיפו כל מיני הרחבות כמו חיבורים למודלים גדולים של שפה כדי לייצר קוד. היות ומייקרוסופט קנתה את חברת גיטהאב, השילוב בין תוכנת האם של מייקרוסופט: VSCODE, שהיא התוכנה הפופולרית ביותר בקרב אנשי ונשות פיתוח, לבין הטייס האוטומטי של גיטהאב לכתיבת קוד - פשוט מתבקש. למעשה, גיטהאב קופיילוט הוא תוסף שמתחבר גם הוא למודלים גדולים של שפה ויודע לעזור לנו לכתוב קוד, לתקן קוד, וכל זאת תוך מעטפת של גיטהאב עצמה.
הכוכב החם Lovable - מדובר באתר שמסעיר את כל העולם בשבועות האחרונים, הוא מסוגל לפתח גם צד לקוח וגם צד שרת וגם להתחבר לבסיס נתונים. הוא לא זול אבל הוא חוסך המון זמן עבודה שאם מחשבים גם את הזמן שחוסכים, נראה שהוא התמורה הכי טובה לכסף. פשטות השימוש בו היא בלתי נתפסת, היכולת לפתח אתרים עם הזדהות, אימות, רישום משתמשים, חיבור לבסיסי נתונים, הופכת למופשטת ברמות שזה תענוג צרוף, או פספוס אדיר לא לנסות. היסטורית, אגב, הכלי הזה היה קרוי GPT-Engineer, והם שינו את השם, מדובר בחבר'ה משוודיה, בהם זוכי אולימפיאדות מחשבים (כמו הצוות של Cursor) שיודעים על מה הם מדברים וכל הזמן עובדים להוסיף חיבורים מרתקים למוצר שלהם.
לאחר כל מה שאמרנו חשוב גם להגיד: הקוד שאנחנו מקבלים מבינה מלאכותית יכול להכיל שגיאות, טעויות בלוגיקה, הוא יכול להיות ארוך מדי, לא יעיל, גם אם יעבוד. במקרים אחרים הוא יכול לנסות להשתמש בספריות שלא קיימות, או שהוא טועה באיות שלהן, או אפילו להכיל פגיעויות בקוד. לכן זה קריטי לא לקבל בצורה אוטומטית את כל מה שה-AI יוצר עבורנו, אלא הרבה יותר חשוב שנבין מה אנחנו מפתחים, איך אנחנו רוצים שהקוד שלנו ייראה, איך נכון שהוא ייבנה - ובעיקר, למה.
לסיכום:
- אתר אינטרנט בנוי מצד לקוח וצד שרת, ולרוב מתחבר גם לבסיסי נתונים.
- צד לקוח וצד שרת כתובים בקוד.
- קיימים אתרים שמכילים מאגרים של קוד חינמי שניתן להשתמש בו, מה שקרוי: ספריות פיתוח. אפשר לשלב זאת בקוד שלנו וזה מקצר לנו תהליכים. חשוב לוודא שמשתמשים בספריות מוכרות, מתוחזקות, ושאינן תחת פגיעויות או ניצול חורי אבטחת מידע.
- את הקוד של צד הלקוח וצד השרת אפשר לכתוב לבד או להשתמש בכלי בינה מלאכותית שעוזרים לנו ליצור אותו.
- קוד שבינה מלאכותית נותנת לנו תמיד צריך לעבור ביקורת ובקרה, הוא עלול להכיל שגיאות, בעיות בלוגיקה, טעויות שיהיה קשה לתקן, ואפילו פגיעויות אבטחת מידע. לכן אין לקבל בצורה אוטומטית מה שבינה מלאכותית מייצרת אלא צריך להבין את התהליך ואת מה שרוצים לבנות.
זו ההזדמנות לספר שאני עומל על קורס פיתוח ו-AI שילמד שלב אחר שלב את כל התהליכים שתיארתי כאן. נצלול לעומק, כמו בקורס האוטומציות וה-AI שלי, ובעיקר - יהיה לנו כיף גדול. אשמח אם תעקבו אחרי כדי להתעדכן בכל הדברים החמים.
יובל