יצירת סל קניות בחנות אונליין ב-NodeJS
express-session מוגדר. הרשימה נטענת מקובץ JSON ללא מסד נתונים. בשרת יש שלושה ראוטים: הוספה לעגלה, הסרה מהעגלה ו-checkout.products.find לפי ה-id מהבקשה. אם אין מוצר כזה, מחזירים 404. אם request.session.cart עדיין לא קיים, יוצרים אותו כמערך ריק, ואז מוסיפים את המוצר.findIndex. אם הוא -1, מחזירים 400 שהמוצר לא בעגלה, ואחרת מסירים אותו עם splice.response.json.PUT ל-/api/addToCart/1 והסרה היא ראוט דומה. ה-checkout הוא GET. אחרי הוספת 1, 4 ו-2 והסרת 1, ה-checkout מחזיר רק 4 ו-2.#divProducts. ה-id של המוצר נקרא ממאפיין data-product-id.PUT, המאפיין data-bought נוסף לתמונה והמסגרת הופכת לכחולה, 5 פיקסלים. בלחיצה שנייה, כשהמאפיין כבר קיים, נשלחת בקשת הסרה, המאפיין מוסר והמסגרת חוזרת לשחור.buttonCheckout), ובלחיצה נשלחת בקשת GET ל-/api/checkout. בהצלחה בונים HTML של סיכום עם כותרת h4, רשימה ul של המוצרים (שם ומחיר בדולרים) וסכום כולל, ומציבים אותו ב-div של ה-checkout.פרקי ההרצאה: יצירת סל קניות בחנות אונליין ב-NodeJS
תמלול ההרצאה: יצירת סל קניות בחנות אונליין ב-NodeJS
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת סל קניות בחנות אונליין ב-NodeJS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אז בואו נראה דוגמה אמיתית לשימוש בסרבר סייד סשן. דבר ראשון יש לנו פה אתר שהוא כבר מוכן פרט לכל המנגנון הזה שאנחנו רוצים עבור הסשן ועוד כמה דברים שנצטרך להשלים.
בואו נסתכל רגע מה מוצג באתר הזה. אז יש לנו פה את הרצה node app go תן לנו את הדף עצמו. ומה שאנחנו רואים כאן זה אתר קניות כזה. Which products do you want to buy? יש לנו פה סדרה של מוצרים.
זה המוצרים של Northwind, צ'אי וצ'אנג ואני סירופ וכולי. ומה שאנחנו רוצים זה שהיוזר יוכל להקליק על מוצר, כאשר אני כרגע מקליק לא קורה שום דבר, ואני רוצה לשמור לו את המוצר בסל קניות, דגלת קניות כזאת, קארט.
וכאשר הוא מקליק עוד פעם, אני רוצה להוריד אותו מעגלת הקניות כי היוזר כנראה לא רוצה אותו. אז אם אני מקליק פעם אחת אני מוסיף, הקלקה נוספת אני מוריד, הקלקה נוספת אני מוסיף וכדומה.
צ'קאוט זה אומר שאנחנו רוצים לשלם ולראות את כל הסכום שיש עד עכשיו. אבל אני לא רוצה לשמור לו את העגלת קניות בקוקי בצד של ה-client side, אני רוצה לשמור את זה ב-session בצד של ה-server side כי אולי אני רוצה לארגן סטטיסטיקות אולי היוזר שנייה בעצם אני רוצה לדעת בסרבר מה הוא עשה ולשמור את זה בהמשך לדטאבייס ברגע שהוא עושה לי צ'ק אאוט אולי בעצם הוא לא ממש מאשר לי
לשמור קוקיז אצלו במחשב גם יכול להיות מקרה כזה. אז אנחנו רוצים ברגע הלחיצה לבצע גלישה לצד של השרת ובשרת להוסיף את זה לסל קניות כמובן שהסל קניות משרת כל לקוח בנפרד בדיוק מתאים לקונספט של פשן.
אז בשרת יש לנו תשתית מוכנה. כאן אנחנו רואים שיש לנו את כל המוצרים מאיזשהו כובד ג'ייסון שנטענים לפרודקטס, אין לי פה דאטאבייס, זה מיותר כרגע בשביל הדמו הזה, יש לנו את אקספרס, יש לנו את אקספרס סשן, יש לנו העלאת השרת לאוויר, רואים את זה פה
למטה, יצירת סרבר והעלאה לאוויר, הנה אנחנו חושפים את האינדקס שלנו, הגדרות קונפיגורציה עבור סשן, יש לנו שופינג קארט, עגלת קניות, ושלושה ראוטים, אד טו קארט, בוא תוסיף לי את ה-ID הזה לעגלת הקניות, בלי קשר לדאטה בייס, אני רק רוצה לשמור את זה בסשן, שזה המוצר שאתה רוצה,
או רימוב פורום קארט, בוא תסיר לי את זה מעגלת הקניות, ולבסוף, אם אתה רוצה, צ'ק אאוט, זה הלחצן אני מחזיר לך את כל עגלת הקניות שכרגע עד עכשיו בעצם רצית לקנות אז ראשית בואו נטפל בסרבר סייד מה אנחנו צריכים לבצע אז אנחנו רוצים קודם כל לאתר את המוצר שהיוזר רוצה
הוא שלח לי פה איידי מה המוצר שלו בואו נאתר את המוצר נלך לפרודקטס פיינד ונעשה פה איזה arrow function שמאתרת את זה יהיה request paramsid אם לא קיים לי מוצר כזה not product כי הוחזר לי undefined אז אני מחזיר 404 כי וואלה אין לי מוצר כזה עכשיו אנחנו פונים לפשן
אנחנו רוצים להתחיל להוסיף את המוצרים לפשן אז מה בעצם אנחנו צריכים לעשות דבר ראשון אני צריך לבדוק האם אם קיים לי בכלל סשן כזה, אולי זאת הגלישה הראשונה של היוזר ועדיין לא שמרתי שום דבר עבורו.
אם not requestSessionCart עגלת הקניות, אז requestSessionCart שווה לאיזשהו מערך. כאן אני יודע שבוודאות יש לי כבר את העגלת קניות, אז אנחנו יכולים לגשת ל-requestSessionCart ולהוסיף את המוצר שהיוזר רוצה לקנות.
פה אנחנו מסיימים ואפשר אפילו to console log את עגלת הקניות. request session רק בשביל לראות שזה אכן עובד. אורייט, מה בעצם אנחנו רוצים לעשות כאן?
פה אנחנו רוצים להסיר מהסשן את העגלת, את המוצר הזה, אז בואו קודם כל נראה האם בכלל יש לנו בי אקצשן. בואו ניקח את העיף הזה, אם אין לנו שום אובייקט סשן אנחנו רוצים toResponseStatus 400 ולהגיד cart is empty.
איך אתה יכול להסיר מוצר עם העגלה ריקה? לאחר מכן בואו נאתר את האינדקס של המוצר constIndexRequestSessionCartFindIndex ולתת לו arrow שמקבל את request params ID מהאזור הזה פה למעלה, ונראה אולי בעצם הוא לא נמצא כאן.
אם index הוא מינוס 1, אין לנו בכלל את המוצר הזה, אתה מנסה להסיר מוצר שבכלל לא קנית מאיזושהי סיבה, אולי היה פה איזושהי שגיאה או משהו.
רספונס סטטוס 400, כי זה bad request, ונתאר לו product isn't in the cart, המוצר בכלל לא בעגלה. כאן אנחנו צריכים האמת ריטרנים.
בואו נסתכל שלא שכחתי את הריטרן, אני מקווה ששכחתי אותו. אז זה מה שאנחנו רוצים לבצע כרגע, ועוד משהו שאנחנו צריכים זה להסיר אותו. אז request session cart יש לנו splice, זאת פונקציה שאומרת שהיא שייכת למערך והיא אומרת תנו לי את האינדקס מאיפה אתם רוצים שאני אתחיל להסיר פריטים וכמה פריטים אתם רוצים להסיר, אנחנו רוצים להסיר
פריט בודד. רספונס אנד ובואו נציג גם פה את עגלת הקניות. הדבר הבא שאנחנו רוצים זה את ה-checkout. קודם כל בואו נראה אם העגלה בכלל ריקה, איך אתה רוצה לבצע checkout אם העגלה ריקה, לא הגיוני?
אם הכל בסדר רספונס ג'ייסון ולתת לו request session cart. בואו קודם כל נבדוק את כל הסיפור הזה בעזרת פוסטמן. נפתח פה את פוסטמן, ניפטר מכל החבריה האלה, close all tabs, don't save, סגור לנו את הכל ואנחנו רוצים כרטיסייה חדשה.
http localhost 3000 api add to cart/1 בואו רק נראה מה היה ה-rout עצמו אז ה-rout היה על put כי אנחנו משנים משהו put request גם זה וגם זה וה-checkout זה get כי אנחנו מקבלים מידע בחזרה בואו נשים את זה על put אין לנו פה body נבצע send ושכחתי להריץ את האתר, לא, לא שכחתי.
בעצם יכול להיות שכן. בואו נריץ שוב פעם, good. אז הוא מחזיר לנו 200, בואו נסתכל מה כתוב, או נוריד את זה רגע, מה כתוב לנו כאן. אז אנחנו רואים שיש לנו את מוצר מספר 1, name chai, price 18, stock 39, עד כאן בסדר.
בואו נשנה את זה למוצר 4, send, ויש לנו עכשיו גם את 1 וגם את 4, מעולה. בואו נבצע עוד אחד עם 2, ויש לנו את 1, 4 ו-2, עד כאן בסדר. בואו ניגש לפה, נשכפל את ה-rout וניתן לו remove from cart את 1, send.
הוא get, טעות שלי, go, יופי. אז אנחנו רואים שיש לו עכשיו רק את ארבע ואת שתיים, זה המערך של ארבע ושתיים. ובואו נבצע צ'ק-אאוט.
צ'ק-אאוט זה get request API צ'ק-אאוט go, והוא אמור לתת לנו כאן את כל הערכים עצמם. בואו רגע נוריד את זה. ויש לנו רק את ארבע ושתיים, הכל בסדר. זאת אומרת, צד השרת עכשיו מטפל כמו שצריך בעגלת קניות היא בצד של השרת אנחנו רוצים בצד של הלקוח לקרוא לה אז בואו ניגש ללקוח עצמו html כבר בנוי ניגש