Instructions

User Manual:

Open the PDF directly: View PDF .
Page Count: 9

Download
Open PDF In Browser	View PDF

‫‪Full Stack Web Developer‬‬
‫פרויקט ‪Node.Js + Angular + MySql \ MongoDB‬‬

‫© כל הזכויות שמורות לג'ון ברייס הדרכה בע"מ מקבוצת מטריקס‬
‫‪27656-4578-02‬‬

‫כללי‬
‫בפרויקט זה עליכם לייצר מרכול וירטואלי‪ ,‬חנות לממכר מזון ומוצרי מכולת שונים בשיטת שירות עצמי‪.‬‬
‫דוגמא טובה – שופרסל און ליין‪.‬‬
‫תשתית‪:‬‬
‫‪ SQL database \ mongodb .1‬לפי בחירת המרצה‪.‬‬
‫‪ .2‬שרת ‪ NodeJs‬המכיל ‪ , API‬לוגיקה צד שרת וחיבור לממסד נתונים‪.‬‬
‫‪ .3‬צד לקוח‪angularJs :‬‬

‫את הפרוייקט יש לייצר בשרת מקומי‪.‬‬
‫בפרוייקט יש ליישם את הנושאים הבאים‪:‬‬
‫‪HTML + CSS‬‬
‫‪- HTML5 Structure‬‬
‫‪- Bootstrap design‬‬
‫‪Angular‬‬
‫‪NodeJS‬‬
‫‪- Using express‬‬
‫‪- Restfull App‬‬
‫‪MySQL‬‬
‫‪- Design & create schema‬‬
‫‪- Queries‬‬
‫‪MongoDB‬‬
‫‪- Design & Create Collections‬‬
‫‪- Mongoose or other ORM.‬‬
‫הגשת הפרויקט‪ :‬חודשיים ממפגש ההנחיה‬

‫© כל הזכויות שמורות לג'ון ברייס הדרכה בע"מ מקבוצת מטריקס‬

‫‪‬‬

‫‪‬‬
‫‪‬‬

‫‪‬‬

‫‪‬‬

‫פירוט הפרויקט‬
‫ישויות במערכת‪:‬‬
‫‪.1‬‬
‫‪.2‬‬
‫‪.3‬‬
‫‪.4‬‬
‫‪.5‬‬
‫‪.6‬‬
‫‪.7‬‬

‫לקוח ‪ :‬שם‪ ,‬שם משפחה‪ ,‬שם משתמש‪-‬אימייל‪ ,‬תעודת זהות(‪ ,)PK‬סיסמא‪ ,‬עיר‪ ,‬רחוב‪.‬‬
‫מנהל ‪ :‬שם‪ ,‬שם משפחה‪ ,‬שם משתמש‪-‬אימייל‪ ,‬תעודת זהות(‪ ,)PK‬סיסמא‪.‬‬
‫כמובן שאין צורך להחזיק טבלה עבור מנהלים‪ ,‬ניתן לנהל זאת על ידי שימוש בשדה ‪.role‬‬
‫קטגוריה(של מוצרים)‪ :‬מספר מזהה(‪ ,)PK‬שם קטגוריה‪.‬‬
‫מוצר‪ :‬מספר מזהה(‪ ,)PK‬שם המוצר‪ ,‬מזהה קטגוריה(‪ ,)FK‬מחיר‪ ,‬תמונה‪-‬נתיב‪.‬‬
‫עגלת קניות ‪ :‬מספר מזהה(‪ , )PK‬מזהה לקוח(‪ ,)FK‬תאריך יצירת עגלה‪.‬‬
‫פריט עגלה‪ :‬מספר מזהה(‪ ,)PK‬מזהה מוצר(‪ ,)FK‬כמות ‪,‬מחיר כללי (כמות * מחיר) מזהה עגלה (‪,)FK‬‬
‫הזמנה‪ :‬מספר מזהה(‪ ,)PK‬מזהה לקוח(לא חובה ‪ ,)FK‬מזהה עגלה‪ ,‬מחיר סופי ‪,‬עיר למשלוח‪,‬רחוב‬
‫למשלוח‪ ,‬תאריך למשלוח‪ ,‬תאריך ביצוע הזמנה‪ 4 ,‬ספרות אחרונות של אמצעי תשלום‪.‬‬

‫** הערה‪ :‬כל הוספה או שינוי של ישויות ‪ -‬יש לשים לב שהוא אינו גורם להוספת מידע מיותר‪ ,‬כפילויות או גורם‬
‫לניהול לא נכון של המערכת‪ ,‬בהתיעצות והנחיית המרצה‪.‬‬
‫מנהלים והרשאות‪:‬‬

‫‪ .1‬במערכת קיימות ‪ 2‬הרשאות‪:‬‬
‫א‪ .‬מנהל – אדמין‪ ,‬אחראי לניהול שוטף של המערכת‪ ,‬הוספת מוצרים או עריכת מוצרים‪.‬‬
‫ב‪ .‬לקוח – יכולת הרשמה‪ ,‬חיפוש‪ ,‬בחירת מוצרים‪ ,‬שמירת עגלה ורכישה – ביצוע הזמנה‪.‬‬

‫פירוט מסכים – הצעה‬
‫‪ .1‬עמוד ראשי‪:‬‬
‫פאנל ‪ A‬מכיל את מנגנון ה ‪Login‬‬
‫אין לאפשר למשתמש לעבור לדף החנות ללא ‪.Login‬‬
‫ברגע שמשתמש ביצע התחברות הוא יקבל ‪ SESSION‬להזדהות ויעבוד איתו מול השרת‪.‬‬
‫פאנל ‪ B‬יכיל תמונה ואודות החנות ‪ ,‬כמה מילים אודות החנות שלכם‪.‬‬
‫בפאנל ‪ C‬יש להציג מידע כללי מהמערכת הכולל‪:‬‬
‫א‪ .‬כמות הזמנות שבוצעו באתר – כל ההזמנות מטבלת הזמנות‪.‬‬
‫ב‪ .‬כמו המוצרים הזמינית באתר – כל המוצרים שיש בטבלת מוצרים‪.‬‬
‫ג‪ .‬בצהוב – לאחר ‪ login‬כמובן תופיע הודעה בהתאם‪:‬‬
‫‪ .a‬הודעה על כך שיש עגלה פעילה למשתמש‪ ,‬עגלה שלא ניסגרה ‪ +‬תאריך ומחיר עדכני‪,‬‬
‫במקרה הנל הכפתור התחלת קניה יתחלף בהמשך קניה‪.‬‬
‫‪ .b‬במידה ולמשתמש אין עגלה פתוחה ‪ ,‬תופיע הרכישה האחרונה של המשתמש וכפתור‬
‫התחלת קניה יהיה זמין‪.‬‬
‫‪ .c‬במידה והמשתמש חדש תהיה הודעה‪":‬ברוך הבא לקניה הראשונה שלך"‬
‫© כל הזכויות שמורות לג'ון ברייס הדרכה בע"מ מקבוצת מטריקס‬

‫‪‬‬
‫‪‬‬

‫‪‬‬

‫במידה והמשתמש ביצע כניסה‪ ,‬כפתור ה ‪ start shopping‬יהיה זמין למעבר לדף הבא‪.‬‬
‫שימו לב! ‪ ,‬במידה וחסמתם מעבר לקניות ‪ start shopping -‬על ידי שימוש ב ‪ javaScript‬יהיה‬
‫עליכם לבצע בדיקת אימות מול השרת‪ ,‬מטעמי אבטחה) לדוגמא ‪ :‬המשתמש יובל לבצע שינויים‬
‫ב‪ DOM‬על ידי שימוש ב ‪ developer tool‬של ה ‪) browser‬‬
‫במידה והמשתמש לחץ על הרשמה‪ ,‬המשתמש יועבר לדף הרשמה‪.‬‬

‫‪ .2‬דף הרשמה‪:‬‬
‫בדף זה יהיה על המשתמש לבצע את ההרשמה ב ‪ 2‬שלבים‪,‬‬
‫כל שלב יופיע בנפרד או ב מעבר בין ‪ views‬בהתאמה‪.‬‬
‫ב שלב הראשון המשתמש יכניס פרטים תעודת זהות‪ ,‬אימייל‪ ,‬סיסמא ואישור סיסמא‪:‬‬
‫‪ .1‬בלחיצה על המשך‪ -‬חץ ימינה‪ ,‬יבדקו התנאים הבאים‪:‬‬
‫‪ .2‬כל השדות חובה‪,‬‬
‫‪ .3‬ת‪.‬ז אינה קיימת כבר מערכת‪,‬‬
‫‪ .4‬אימייל תקין‬
‫הודעת שגיאה מתאימה תופיע בתחתית ה ‪ FORM‬ומניעת מעבר לשלב ‪.2‬‬
‫בשלב השני המשתמש יכניס פרטים אישיים‪:‬‬
‫‪ .1‬עיר‪ ,‬ערכים יבחרו מרשימת ערים ( ‪ 10‬הערים הגדולות ביותר במדינה)‬
‫‪ .2‬רחוב – טקסט חופשי‬
‫‪ .3‬שם ושם משפחה‬
‫‪ .4‬כל הערכים הם שדות חובה‪.‬‬
‫‪ .5‬לבסוף המשתמש יבצע ‪ submit‬הרשמה שתעביר אותו לדף הראשי‪ ,‬משם הוא יוכל להמשיך‪ ,‬ללחות‬
‫על כפתור ‪ start shopping‬ולעבור לדף הקניות‪.‬‬

‫© כל הזכויות שמורות לג'ון ברייס הדרכה בע"מ מקבוצת מטריקס‬

‫‪Hello name‬‬

‫‪ .3‬דף הקניות‪:‬‬
‫דף זה מהווה הדף הראשי של המשתמש ומכיל ואת רוב הפונקציונאליות במערכת‪.‬‬

‫‪Hello name‬‬

‫© כל הזכויות שמורות לג'ון ברייס הדרכה בע"מ מקבוצת מטריקס‬

‫א‪.‬‬
‫ב‪.‬‬
‫ג‪.‬‬
‫ד‪.‬‬
‫ה‪.‬‬
‫ו‪.‬‬
‫ז‪.‬‬
‫ח‪.‬‬
‫ט‪.‬‬

‫י‪.‬‬
‫יא‪.‬‬

‫ברגע שהמשתמש הגיע לדף זה נפתחה עבורו עגלת קניות‪ ,‬המוצגת משמאל‪.‬‬
‫אפשרות חיפוש – קריאה לשרת לחיפוש לפי שם‪ ,‬את‬
‫התוצאות יוצגו בתוך ה ‪ view‬של המוצרים‪ ,‬ללא סימון של קטגוריה‪.‬‬
‫עגלת הקניות תוצג משמאל ב ‪ sidebar‬ותהיה אפשרות למשתמש למזער‪ ,‬לדחוף לצד שמאל‪ ,‬לצורך‬
‫הרחבת ה ‪ view‬של המוצרים‪.‬‬
‫מוצרים יוצגו בתת דף ראשי המכיל את כלל המוצרים לפי קטגוריות‪ ,‬בכל בקשה לקטגוריה יש להביא‬
‫מהשרת את המוצרים הנמצאים תחת הקטגוריה הרלוונטית‪.‬‬
‫בכל בחירה של מוצר יפתח ‪ POPUP‬המכיל ‪ INPUT‬להזנת כמות היחידות מאותו מוצר שברצונו לרכוש‪.‬‬
‫לאחר מכן המוצר יבחר ויתווסף לעגלה ב ‪ + SIDEBAR‬עדכון העגלה‪.‬‬
‫בתחתית העגלה תוצג אפשרות של "לקופה" או "הזמנה" כדי לעבור לדף סגירת העגלה ותשלום‪.‬‬
‫בתחתית העגלה יופיע הסכום הכללי המעודכן‪.‬‬
‫שימו לב‪ ,‬במידה והמשתמש סגר את הדפדפן‪ ,‬או התנתק לא בצורה מבוקרת‪ ,‬בכניסה הבאה של‬
‫המשתמש‪ ,‬בדף הראשי‪ ,‬תוצג למשתמש העגלה האחרונה שלא ניסגרה ‪ +‬המשך קניה‪ ,‬כמובן שבלחיצה‬
‫על המשך קניה יופיעו כל המוצרים של העגלה הרלוונטית ב ‪.sidebar‬‬
‫מחיקת מוצרים מעגלה‪ ,‬כפתור– ‪ X‬לייד כל מוצר מאפשר מחיקה של המוצר הנבחר‪.‬‬
‫מחיקת כל המוצרים שבעגלה‪ -‬כפתור למחיקת כל המוצרים‪.‬‬
‫המוצר‬

‫המתבקש‪,‬‬

‫‪ .4‬דף הזמנה‪:‬‬
‫א‪ .‬בלחיצה על ”‪ “order‬יפתח ‪ view‬חדש‪:‬‬

‫ב‪ .‬פאנל המכיל את כל המוצרים‪ ,‬חיפוש ו מחיר סופי‪,‬‬
‫‪ .a‬בשלב זה אין אפשרות לשנות את המוצרים‪ ,‬כלומר‪ ,‬למחוק וכמובן להוסיף‪.‬‬
‫‪ .b‬מטרת הפאנל היא לדמות קבלה עתידית‪.‬‬
‫‪ .c‬כפתור "חזרה ל קניות" כמובן שכפתור זה יחזיר את המשתמש חזרה לדף הקניות‪.‬‬
‫© כל הזכויות שמורות לג'ון ברייס הדרכה בע"מ מקבוצת מטריקס‬

‫ג‪.‬‬

‫ד‪.‬‬

‫ה‪.‬‬
‫ו‪.‬‬

‫‪ .d‬חיפוש בקבלה‪ , ONTYPE ,‬כלומר בכל הקלדת אות יתבצע חיפוש בקבלה‪ ,‬התוצאות‬
‫ימורקרו (‪)milk‬‬
‫פאנל המכיל את פרטי ההזמנה‪ ,‬עיר למשלוח‪ ,‬רחוב שדות מנדטוריים –במידה והמשתמש יבצע‬
‫"דאבל קליק" על אחד מה ‪ INPUTS‬הנל המידע יתמלא אוטומטי בהתאם למשתמש המחובר‪ ,‬כלומר‬
‫מהמידע שמוחזק עבור כל משתמש בממסד הנתונים יכנס אוטומטי ל‪ INPUT‬הרלוונטי‪.‬‬
‫תאריך הזמנה‪ ,‬שדה מנדטורי‪ -‬במידה ויש על אותו התאריך יותר מ ‪ 3‬הזמנות‪ ,‬תוצג הודעה מתאימה‬
‫למשתמש "עליך לבחור יום אחר‪ ,‬כל המשלוחים תפוסים"‪ ,‬תוכלו להביא מראש את הימים התפוסים‬
‫ולסמנם באדום ב ‪.calendar‬‬
‫כרטיס אשראי מנדטורי‪ ,‬נסו לכתוב ‪ REGEX‬שיבצע ולידציה ל ‪.credit card‬‬
‫בלחיצה על ‪( Order‬בדף הנל) ההזמנה תשמר והמשתמש יקבל הודעה מסודרת על קניה מוצלחת‪.‬‬

‫ז‪ .‬במידה ויש שגיאה תוצג הודעה מתאימה‪.‬‬
‫ח‪ .‬אפשרות להורדת קובץ ‪ TEXT‬המכיל את המוצרים והמחיר הסופי‪ ,‬כל מוצר בשורה‪.‬‬
‫ט‪ .‬לחיצה על אישור תעביר את המשתמש לדף הראשי של המערכת‪.‬‬

‫‪ .5‬דף אדמין‪:‬‬
‫א‪ .‬הפעולות היחידות שיכול לבצע אדמין הם להוסיף מוצרים ולערוך מוצרים‪,‬‬
‫ב‪ .‬אין באפשרות האדמין למחוק מוצרים‪.‬‬
‫ג‪ .‬במידה והאדמין ביצע כניסה‪ -‬הוא יועבר ישירות לדף ניהול מוצרים‪ ,‬בתמונה הבאה אפשר לראות‬
‫את המוצר הנבחר לעריכה‪.‬‬
‫ד‪ .‬בלחיצה על המוצר‪ ,‬המוצר יוצג ב ‪ SIDEBAR‬וערכיו יהיו ניתנים לעריכה‪.‬‬

‫© כל הזכויות שמורות לג'ון ברייס הדרכה בע"מ מקבוצת מטריקס‬

‫ה‪ .‬כפתור הוספה "‪ – "+‬בלחיצה על הכפתור יפתח ‪ FORM‬ריק ב ‪ SIDEBAR‬והאדמין יוסיף את כל‬
‫הפרטים הרלוונטיים עבור אותו מוצר‪.‬‬
‫ו‪ .‬אפשרות לשמירה ‪ , SAVE‬תשמור את המוצר החדש או תעדכן את המוצר הקיים‪.‬‬

‫אופן כתיבת והגשת הפרויקט‬
‫‪ .1‬יש לייצר את כל מבנה הקבצים תחת תקייה אחת בשם ‪.Shopping Online‬‬
‫יש לוודא שכל התמונות שיועלו לאתר יישמרו בתקיית ‪ upload‬ב ‪ root‬של הפרוייקט‪.‬‬
‫‪ .2‬יש לשלוח את סכמת ה ‪ Database‬בהתאם ‪ Mysql :‬או ‪mongodb‬‬
‫‪ .3‬יש לייצר ‪ API Doc‬שיכיל טבלה במבנה הבא ) עם שורה לדוגמא)‬

‫© כל הזכויות שמורות לג'ון ברייס הדרכה בע"מ מקבוצת מטריקס‬

Endpoint: http://localhost/shopping/api/
Description
Create new product

Method + Path

Request / Response

POST
/product

Request: {
Name:”milk”,
CategoryId:”4”,
Price:”10$”,
Picture:””
}
Response: {
"success": true,
"data": [
{
"id": 3
}
}

.‫ יש לכווץ את כלל הקבצים תחת תיקייה אחת ולהגיש למזכירות עד לתאריך היעד‬.4

‫ה‬-‫ח‬-‫ל‬-‫צ‬-‫ה‬-‫ב‬

‫© כל הזכויות שמורות לג'ון ברייס הדרכה בע"מ מקבוצת מטריקס‬



---

Source Exif Data:

File Type                       : PDF
File Type Extension             : pdf
MIME Type                       : application/pdf
PDF Version                     : 1.5
Linearized                      : No
Page Count                      : 9
Language                        : he-IL
Tagged PDF                      : Yes
Author                          : Mika&Amit
Creator                         : Microsoft® Word 2013
Create Date                     : 2017:11:15 10:05:10+02:00
Modify Date                     : 2017:11:15 10:05:10+02:00
Producer                        : Microsoft® Word 2013

EXIF Metadata provided by EXIF.tools