[warm] ברוכים הבאים לשיעור שלוש נקודה חמש, בניית אפליקציית פול סטאק. בוקר טוב לכולם. בשיעור הקודם בנינו דף נחיתה מאפס בעזרת קלוד קוד. השתמשנו בטכנולוגיות סטטיות והעלינו אותו לאוויר. זה היה מצוין כדי להבין איך וייב קודינג עובד ברמת הפרונט אנד. אבל העולם האמיתי של פיתוח תוכנה דורש יותר מדפים סטטיים. עסקים צריכים לשמור נתונים, לעבד אותם ולנהל משתמשים. בקיצור, הם צריכים אפליקציות פול סטאק. היום אנחנו עולים ליגה והולכים לבנות אפליקציה שלמה, עם פרונט אנד חכם, בק אנד שיודע לקבל בקשות, ומסד נתונים ששומר את המידע. נעשה את זה עם הכלים הכי מתקדמים בתעשייה, כשהבינה המלאכותית מנצחת על כל התזמורת. נקודה שכדאי לחשוב עליה היא מה ההבדל המרכזי ביותר מבחינת חווית המשתמש בין האתר הסטטי שבנינו לאפליקציה שניצור היום. ההבנה החשובה כאן היא שאתר סטטי הוא לקריאה בלבד עבור המשתמש, בעוד שאפליקציה מאפשרת אינטראקציה דו כיוונית של יצירה, עדכון ומחיקת נתונים.
[מעבר שקף]
[calm] היום, בניית פרויקט פול סטאק שונה מאוד ממה שהייתה רק לפני שלוש שנים. בעבר, היינו מקימים שרת נפרד, אפליקציית צד לקוח נפרדת, ומנסים לחבר ביניהם. בשנת אלפיים עשרים ושש, הסטנדרט המקובל לפרויקטים חדשים, במיוחד עם בינה מלאכותית, הוא לאחד את הכל. היום אנחנו מפתחים בתוך סביבה אחת מאוחדת. הפרונט אנד והבק אנד יושבים באותו פרויקט, חולקים את אותם טיפוסי נתונים, ומדברים אחד עם השני בצורה כמעט שקופה. זה חשוב מכיוון שלקלוד קוד הרבה יותר קל להבין פרויקט כשהוא רואה את התמונה המלאה באותה התיקייה. חלון ההקשר העצום שלו, שמגיע למיליון טוקנים, מאפשר לו לזכור את כל הקוד. כדאי לחשוב למה קריטי שהמודל יראה גם את צד הלקוח וגם את צד השרת בו זמנית. התשובה טמונה ביכולת העריכה מרובת הקבצים וביצוע שינויים רוחביים. אם נוסיף שדה לטופס בממשק המשתמש, המודל יכול להוסיף אותו גם לממשק התכנות וגם למסד הנתונים באותה הנשימה.
[מעבר שקף]
[calm, confident] אז באיזה כלים נשתמש היום. בחרנו את הכלים המנצחים והמבוקשים ביותר כיום בסטארטאפים. נשתמש בנקסט ג'יי אס, המסגרת שמאפשרת לנו לכתוב קוד ריאקט גם בשרת וגם בלקוח. בנוסף נשתמש בטייפסקריפט שמספק בטיחות קוד, דבר שבינה מלאכותית אוהבת מאוד כי זה עוזר לה לא לטעות. לעיצוב מהיר נשתמש בטיילווינד סי אס אס, כמו שראינו בשיעור הקודם. לניהול הנתונים נשתמש בפריזמה, שהוא הכלי שמתרגם קוד טייפסקריפט לשאילתות מסד נתונים. ולבסוף, פוסטגרס, מסד הנתונים היציב ביותר, שהיום נריץ אותו מקומית ובשיעור הבא נעבור לענן. שאלה מעניינת היא איך הייתה החוויה למי שכתב פעם שאילתות ידניות למסד נתונים. חשוב להבין שפריזמה חוסך לנו את כל הכאב של כתיבה ישירה של שאילתות, במיוחד בשילוב עם בינה מלאכותית.
[מעבר שקף]
[calm] לפני שנתחיל לקודד, בואו נבין איפה קלוד קוד יושב ביחס לשוק, שכרגע רותח מאוד. יש לנו את לאבל, ששווה היום שישה נקודה שישה מיליארד דולר, והוא מדהים לדמו ומייצר קוד ריאקט נקי, אבל פחות מתאים לניהול פרויקט מורכב בצד השרת. יש את אמפקוד שמנצח את קלוד במבדקי ביצועים בכשלושים אחוזים, אבל הוא סגור יותר. כלים כמו בולט ורפליט אייג'נט שלוש מספקים סביבות ענן שמייצרות הכל בדפדפן. לעומתם, קלוד קוד עובד במסוף שלנו, על המחשב שלנו. הוא המלך בפרויקטים מובנים וארוכי טווח. הוא יודע לערוך מספר קבצים במקביל, לשנות את כל השכבות בבת אחת, ויודע להריץ משימות רקע כמו שרתי פיתוח בזמן שהוא ממשיך לעבוד. כדאי לחשוב באיזה כלי נשתמש לבניית אבטיפוס מהיר למשקיע למחר בבוקר, לעומת הקמת סטארטאפ אמיתי שצריך לתחזק שנה. ההבחנה בין כלי יצירת אבטיפוס מהירים לכלי פיתוח מקומיים ארוכי טווח היא קריטית כאן.
[מעבר שקף]
[clear] בואו נתחיל לעבוד. אנחנו הולכים לבנות אפליקציית ניהול משימות עבור סטודיו ליוגה. הסטודיו צריך לנהל את המשימות של הצוות שלו, כמו מי מנקה את המזרנים, מי מחליף משמרת בקבלה, ומי מזמין ציוד. האפליקציה תכלול ארבע פעולות בסיסיות. קריאה והצגת כל המשימות, יצירת משימה חדשה, עדכון וסימון משימה כהושלמה, ומחיקת משימה. זוהי אפליקציה קלאסית של יצירה, קריאה, עדכון ומחיקה, שהיא הבסיס לתשעים אחוזים מהתוכנות העסקיות בעולם. שאלה טובה לחשוב עליה היא איזה שדות נצטרך במסד הנתונים עבור משימה בודדת. אנחנו נזדקק לשדות כמו כותרת, תיאור, סטטוס ביצוע, ותאריך יצירה. זה ישמש אותנו מיד כשנגדיר את מבנה הנתונים שלנו.
[מעבר שקף]
[calm] השלב הראשון הוא לייצר את שלד הפרויקט עם נקסט ג'יי אס. במקום להקליד פקודות ארוכות במסוף, אנחנו קוראים לקלוד קוד. אנחנו מבקשים ממנו ליצור פרויקט חדש בשם יוגה טאסְקְס, להשתמש בטייפסקריפט וטיילווינד, ואז להיכנס אליו ולהתקין את פריזמה עם הגדרות של פוסטגרס. שימו לב איך קלוד פועל. הוא מריץ את הפקודות, מחכה שהן יסתיימו, ומיד ממשיך לפקודה הבאה. זה היופי בסוכני בינה מלאכותית בשנת אלפיים עשרים ושש. הם לא רק כותבים קוד, הם ממש מפעילים את סביבת הפיתוח. מעניין לחשוב מה קרה כרגע מאחורי הקלעים. נוצרה תיקיית פרויקט, קובץ הגדרות עיצוב, וספרייה של פריזמה עם קובץ הגדרת מבנה הנתונים שלנו.
[מעבר שקף]
[calm, confident] אחד הסודות הכי שמורים של מפתחי בינה מלאכותית הוא קובץ שנקרא קלוד נקודה אם די. זה קובץ שיושב בתיקיית השורש של הפרויקט שלנו, וקלוד קורא אותו אוטומטית בכל פעם שהוא פועל. שם אנחנו מגדירים את החוקים של הפרויקט. אנחנו כותבים שם את הטכנולוגיות שלנו, ומגדירים חוקים כמו שימוש בפעולות שרת עבור כל שינוי נתונים, כתיבת קוד מודרני ונקי, ושפת ממשק בעברית מימין לשמאל. כשאנחנו מגדירים את זה, מנענו שמונים אחוזים מהזיות של המודל. הוא לא ייצר לנו לפתע קוד ישן או ישתמש בספריות שלא ביקשנו. כדאי לחשוב למה ציינתי במפורש שפת ממשק עברית וכיוון טקסט מימין לשמאל. דפוס ברירת המחדל של מודלים הוא באנגלית משמאל לימין, והגדרה גלובלית כזו חוסכת לנו לבקש את זה בכל בקשה מחדש.
[מעבר שקף]
[clear] מה זה בכלל פריזמה. מסדי נתונים מבינים רק שפה אחת, וזו שפת שאילתות מובנית. לעומת זאת, אפליקציות מבינות אובייקטים ופונקציות. פריזמה הוא המתורגמן המושלם בין שני העולמות הללו. במקום לכתוב שאילתות מסובכות להכנסת נתונים, אנחנו פשוט כותבים בקוד פקודת יצירה פשוטה עם הנתונים שלנו. ולמה קלוד קוד כל כך אוהב את פריזמה. כי פריזמה מספק סוגי נתונים מושלמים. אם קלוד ינסה להכניס שדה שלא קיים, המערכת תתריע על שגיאה עוד לפני שהרצנו את הקוד, וקלוד יתקן את עצמו מיד. נקודה למחשבה היא איך בטיחות הטיפוסים הזו מונעת באגים בסביבת הייצור האמיתית. התשובה היא ששגיאות נתפסות בזמן כתיבת הקוד ולא בזמן ריצה מול הלקוח הקצה.
[מעבר שקף]
[calm] הגיע הזמן להגדיר איך ייראה מסד הנתונים שלנו. נלך לקובץ הגדרת הנתונים ונבקש מקלוד לייצר את מודל המשימה שלנו. אנחנו מבקשים ממנו להוסיף שדות כמו מזהה ייחודי, כותרת, תיאור אופציונלי, סטטוס השלמה שמוגדר כברירת מחדל כשקר, ותאריכי יצירה ועדכון. קלוד יערוך את הקובץ וייצור את המבנה המדויק שביקשנו. כדאי להתעכב ולחשוב מה המשמעות של שדות תאריך היצירה ותאריך העדכון ולמה אנחנו תמיד צריכים אותם. פריזמה מנהל את תאריך העדכון באופן אוטומטי בכל פעם שרשומה משתנה, מה שקריטי מאוד לרישום פעולות ולמעקב אחרי שינויים במערכת.
[מעבר שקף]
[calm, confident] יש לנו סכימה כתובה בקובץ טקסט, אבל מסד הנתונים עדיין לא יודע מזה. בשביל זה יש לנו מיגרציות. מיגרציה היא קובץ הוראות שמסביר למסד הנתונים איך לשנות את המבנה שלו כדי להתאים להגדרות החדשות שלנו. אנחנו מבקשים מקלוד להריץ את פקודת המיגרציה ולקרוא לה בשם התחלתי. ברגע שקלוד מריץ את זה, פריזמה מתחבר למסד הנתונים, בונה את הטבלה, וגם מייצר לנו את הספרייה שאיתה נדבר עם מסד הנתונים מתוך הקוד שלנו. שאלה שחשוב לשאול היא למה אנחנו שומרים קבצי מיגרציה בהיסטוריה ולא פשוט דורסים את מסד הנתונים בכל פעם. הסיבה היא שעבודה בצוותים וניהול גרסאות מחייבים סדר היסטורי, במיוחד כשמשווים בין סביבת פיתוח לסביבת ייצור.
[מעבר שקף]
[clear] עכשיו כשיש לנו מסד נתונים, אנחנו צריכים לחבר אותו לממשק המשתמש. בנקסט ג'יי אס יש שתי דרכים עקריות להציג רכיבים. הדרך הראשונה היא רכיבי שרת, שמרונדרים בשרת ויכולים לדבר ישירות עם מסד הנתונים. הם לא שולחים קוד ללקוח, מה שהופך את האתר למהיר ומאובטח. הדרך השנייה היא רכיבי לקוח, שמרונדרים בדפדפן ומשתמשים בהם רק כשצריך אינטראקטיביות, כמו לחיצה על כפתור. כשאנחנו מבקשים מקלוד לבנות דף, אנחנו צריכים לוודא שהוא מבין מתי להשתמש בכל סוג. מזל ששמנו את ההנחיות האלו בקובץ ההגדרות שלנו. כדאי לחשוב האם כפתור מחיקת משימה יהיה רכיב שרת או רכיב לקוח. הכפתור עצמו הוא רכיב לקוח כי יש לו אירוע לחיצה, אבל הוא יקרא לפעולת שרת מאחורי הקלעים.
[מעבר שקף]
[calm] בואו ניצור את דף הבית שיציג את המשימות. נבקש מקלוד לכתוב את קוד הקריאה. אנחנו מנחים אותו ליצור קובץ שמייצא את החיבור לפריזמה, ואז לעדכן את דף הבית להיות רכיב שרת שמושך את כל המשימות, מסודרות מהחדשה לישנה, ומציג אותן בעיצוב מודרני בעברית. קלוד כותב עבורנו את הקוד, שבו פונקציה אסינכרונית פונה למסד הנתונים ושולפת את המידע ישירות לתוך ממשק המשתמש. נקודה מעניינת היא שאין כאן קריאת רשת רגילה של צד לקוח. הקסם של רכיבי שרת הוא שקוד השרת מתחבר למסד הנתונים הישר מתוך קוד התצוגה, בלי צורך בבקשות רשת נוספות מהדפדפן.
[מעבר שקף]
[calm, confident] כדי להוסיף, לעדכן או למחוק נתונים, הוצג קונספט חדש שנקרא פעולות שרת. במקום לבנות נתיב מיוחד בשרת ולעשות אליו בקשת רשת, אנחנו פשוט כותבים פונקציה שרצה בשרת וקוראים לה מתוך רכיב הלקוח. אנחנו מבקשים מקלוד ליצור קובץ פעולות עם פונקציה ליצירת משימה, שמשתמשת בפריזמה ואז מרעננת את הדף. לאחר מכן אנחנו מבקשים טופס צד לקוח שיוסיף את המשימה. קלוד יוצר פונקציה שמתחילה בהצהרה מיוחדת המסמנת שזו פונקציה שרצה בשרת בטוח לחלוטין. היא מוסיפה נתונים ועושה רענון חכם. כדאי לחשוב למה הרענון החכם הזה חוסך לנו ניהול מצב מורכב בצד הלקוח. הוא בעצם מחליף את הצורך לנהל רשימות זיכרון מורכבות, כי השרת פשוט שולח את התצוגה המעודכנת באופן אוטומטי.
[מעבר שקף]
[clear] בואו נבחן את טופס יצירת המשימה שקלוד בנה. קלוד יודע לחבר את פעולת השרת ישירות לטופס בצורה מאוד פשוטה. אין צורך לכתוב קוד שמונע את ריענון הדף הטבעי, אין צורך לכתוב בקשות רשת מסובכות, ואין צורך לנהל מצבי טעינה מורכבים בממשק. הדפדפן עצמו יודע לקחת את פעולת הטופס ולשלוח אותה בשקט לפעולת השרת שלנו. כשאנחנו מריצים את האפליקציה ומקלידים משימה חדשה כמו לנקות את מזרני היוגה, אנחנו יכולים לראות איך הפעולה נשלחת לשרת, נשמרת במסד הנתונים, והמשימה החדשה מופיעה מיד על המסך בצורה חלקה ומהירה.
[מעבר שקף]
[calm] עכשיו נשלים את הפעולות החסרות. חסר לנו את היכולת לסמן משימה כהושלמה ולמחוק משימה. אנחנו מבקשים מקלוד להוסיף פעולות שרת לשינוי מצב ולמחיקה, ואז לעדכן את ממשק המשתמש כך שיכלול תיבת סימון וכפתור מחיקה שמפעילים את הפעולות האלו. כאן אנחנו רואים את הכוח של עריכת מספר קבצים במקביל עם קלוד קוד. במכה אחת, הוא גם עורך את קובץ פעולות השרת ומוסיף את הלוגיקה מול מסד הנתונים, וגם עורך את רכיב התצוגה ומוסיף את הכפתורים. בכלים מסורתיים, המעבר הזה בין השרת ללקוח כדי להוסיף תכונה פשוטה לוקח עשרים דקות. כאן זה קרה בעשרים שניות. שאלה נפוצה היא האם קלוד יכול לטעות ולמחוק קוד אחר כשהוא עורך. התשובה היא כן, זה יכול לקרות. לכן חשוב לעבוד עם מערכת ניהול גרסאות ולשמור שינויים קטנים באופן תדיר.
[מעבר שקף]
[calm, confident] אחד היתרונות הבולטים של קלוד קוד הוא היכולת שלו להריץ משימות ברקע. תוך כדי שאנחנו מפתחים, אני יכול לבקש מקלוד להפעיל את שרת הפיתוח ברקע ולהודיע לי כשהוא מוכן. קלוד יפעיל את השרת, יעביר אותו לתהליך רקע, ועדיין יהיה פנוי לקבל ממני פקודות נוספות. הוא אפילו יקרא את המסוף ויגיד לנו אם יש שגיאות בזמן שאנחנו גולשים באפליקציה. מעניין לחשוב איך יכולת כזו מייעלת את תהליך העבודה של מפתח. זה בעצם הופך את הבינה המלאכותית לעוזר פיתוח אקטיבי שפועל באופן עצמאי, ולא רק לכלי שכותב קוד לפי בקשה.
[מעבר שקף]
[clear] האפליקציה שלנו עובדת נהדר, אבל כרגע כל אחד באינטרנט יכול להיכנס ולמחוק לסטודיו את המשימות. ארכיטקטורה מלאה מחייבת זיהוי משתמשים. בעולם של היום, במקום לכתוב מערכות הרשאות מאפס, אנחנו משתמשים באסימוני אבטחה וניהול חיבורים. כשאדם מתחבר עם סיסמה, הוא מקבל אסימון שנשמר בעוגייה בדפדפן. פעולות השרת שלנו יכולות לבדוק את העוגייה הזו לפני שהן מבצעות פעולה. בשיעור הבא אנחנו נפתור את זה עם שירות ענן שמספק זיהוי משתמשים מובנה, אבל חשוב להבין שברמת השרת, זו פשוט בדיקה של תנאי. חשוב לשאול למה לעולם לא בודקים הרשאות רק בצד הלקוח. הסיבה היא שצד הלקוח תמיד חשוף לשינויים, ורק השרת הוא סביבה בטוחה לאימות הרשאות לפני גישה לנתונים.
[מעבר שקף]
[calm] אז בנינו אפליקציה עובדת בשעה וחצי. מה המשמעות של זה בשוק. סטארטאפים מדווחים בשנת אלפיים עשרים ושש על הפחתה של שבעים עד שמונים אחוזים בזמני פיתוח של תכונות סטנדרטיות כמו מערכות ניהול ודשבורדים. המשמעות היא לא שמפתחים מאבדים את עבודתם, אלא שמפתחים שמסוגלים להשתמש בבינה מלאכותית כדי לבנות מערכות שלמות לבד הופכים להיות הצוות החדש והיעיל. עסקים מחפשים אנשים שיכולים לקחת בעיה עסקית ולספק לה פתרון עובד ביום עבודה אחד. כדאי לחשוב איזה עוד עסקים צריכים מערכות ניהול נתונים כאלו. דוגמאות יכולות להיות מערכת קביעת תורים למספרה, ניהול מלאי לחנות, או מערכת ציונים לבית ספר. הכל מבוסס על אותו עיקרון.
[מעבר שקף]
[clear] לפני שנסיים, בואו נסכם את שיטת העבודה שלמדנו היום מול קלוד. ראשית, תמיד מתחילים מקובץ הגדרות ברור שמגדיר את חוקי המשחק והטכנולוגיות. שנית, משתמשים בפקודות ברורות שמתארות את המהות ולא רק את הדרך הטכנית. ושלישית, עובדים בצעדים. קודם מסד נתונים, אחר כך פעולות השרת, ולבסוף ממשק המשתמש. אם תבקשו מקלוד לבנות הכל בבקשה אחת ענקית, הוא יצליח, אבל יהיה לכם קשה מאוד לאתר שגיאות. איטרציות קטנות הן המפתח להצלחה. שאלה מעניינת היא מתי הרגשתם שקלוד הבין את הפרויקט בצורה הכי טובה. בדרך כלל ההבנה נוצרת כשיש מבנה מסד נתונים יציב, כי הבינה המלאכותית נשענת מאוד על מבנה הנתונים כדי להבין את מטרת האפליקציה.
[מעבר שקף]
[warm] היום עשינו קפיצת מדרגה ענקית. עברנו מאתר סטטי לאפליקציה אמיתית ומתפקדת, עם מסד נתונים מקומי, שרת מודרני, וממשק משתמש אינטראקטיבי. אבל מסד הנתונים שלנו כרגע רץ רק על המחשב שלנו, ואין לנו עדיין מערכת ניהול משתמשים אמיתית. בשיעור הבא נכיר את הנשק הסודי של מפתחי בינה מלאכותית, ונעביר את צד השרת שלנו לענן עם פיירבייס וסופבייס. נלמד איך לנהל משתמשים, איך לאחסן קבצים, ואיך לקבל עדכונים בזמן אמת. עבודה מעולה היום, הקפידו לשמור את הקוד שלכם כדי שיהיה לכם בסיס נוח לשיעור הבא, ותתאמנו על זה בבית. להתראות.