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