מטרת הפרויקט:
פיתוח אפליקציה להזמנת משלוח
פירות וירקות.
תיאור הפרויקט:
האפליקציה תהיה מורכבת ממספר מסכים:
מסך התחברות
במסך זה יש להציג מסך הכולל 2 שדות: שם משתמש
וסיסמא.
עיצוב המסך יהיה נתון לשיקולכם ולטעמכם האישי.
בלחיצה על כפתור התחברות, יש לפנות לשרת שנבנה עבור קורס זה ובו מספר פונקציות:
פונקציית ההתחברות נמצאת בכתובת הבאה:
https://flutter-course.herokuapp.com/login
יש לפנות לפונקציה בשיטת
POST
ולספק את הפרמטרים הבאים בגוף הבקשה:
username:"flutter",
password: "1234"
שימו לב כי שם המשתמש הוא: flutter
והסיסמא היא: 1234
אם הכל יתבצע כשורה השרת יחזיר RESPONSE
המכיל TOKEN
אותו תצטרכו
לשלוח ב-HEADER
של כל הקריאות הבאות שלכם לשרת.
הערה אישית
לא כל הדרישות בתרגיל זה נלמדו בקורס, ועל כן נדרשת מכם הגדלת ראש וחיפוש מושגים
שלא הכרתם.
כמו כן, חיפוש קטעי קוד רלוונטים לצורך הבנת הנדרש מכם בתרגיל זה ובכלל.
מניסיון אישי בפיתוח אפליקציות רבות, כמעט אף
פעם לא היה בידי את כל הידע הנדרש לביצוע
הפרויקט אותו קיבלתי.
שיפור היכולת למצוא פתרונות בגוגל קידם אותי משמעותית וקיצר את משך זמן הפיתוח.
אני מזמין אתכם להשתמש בכלי חינמי ומאוד
שימושי שנקרא POSTMAN.
הכלי הזה מאפשר לכם לבצע קריאות HTTP בקלות ובמהירות עוד לפני שאתם
כותבים את הקוד
רק כדי להבין כיצד לבצע את השליחה ואיך נראה ה-RESPONSE.
מסך רשימת המוצרים
במסך זה תוצג רשימת הפירות והירקות.
הרשימה תתקבל על ידי פנייה לשרת בכתובת:
https://flutter-course.herokuapp.com/api/fruits
HTTP TYPE: GET
לא לשכוח להזין את ה-token שקיבלתם במסך ההתחברות בתוך ה-Header
שם השדה שיש
להוסיף ל-Header הוא: token.
אם הכל התנהל כשורה, השרת יחזיר רשימה של
אובייקטים כאשר כל אובייקט יכול את
השדות הבאים:
·
שם המוצר
·
כתובת ה-URL
של תמונת המוצר
·
מחיר המוצר
יש להמיר את הרשימה שהתקבלה לרשימת של
אובייקטים
מסוגItem שייבנה על ידכם בהתאמה.
עיצובית, כל פריט ב-ListView
יציג את שם המוצר, מחירו ותמונתו.
לחיצה על מוצר ברשימה תעביר את המשתמש למסך
חדש בו
ניתן יהיה לראות את תמונת המוצר בגדול בין שאר מאפייניו.
בנוסף, במסך זה יוצג כפתור "הוסף לסל".
בלחיצה על כפתור זה, המוצר יתווסף לסל הקניות של המשתמש.
סל הקניות של המשתמש הוא אובייקט המשותף לכל האפליקציה וניתן לגשת אליו מכל מקום.
אם המוצר כבר קיים בסל יוצג כפתור "הסר
מהסל" במקום הכפתור "הוסף לסל"
התפקידים של שני הכפתורים ברורים ואינם דורשים הרחבה נוספת.
כמו כן, ברשימת המוצרים, יש להציג חיווי ויזואלי עבור כל שורת מוצר הקיים בסל.
סל הקניות
ב-AppBar של מסך רשימת המוצרים יוצג
אייקון של עגלה.
בלחיצה על אייקון זה, המשתמש יועבר למסך חדש בו ניתן לראות את כל הפריטים הקיימים
בסל.
בתחתית המסך יוצג כפתור "שלח הזמנה".
כמו כן יוצג המחיר הכולל של ההזמנה (סכום מחירי המוצרים)
בלחיצה על כפתור "שלח הזמנה" תתבצע פנייה לכתובת:
https://flutter-course.herokuapp.com/api/makeOrder
HTTP TYPE: POST
PARAMS: items
יש לשלוח לשרת את רשימת המוצרים שנבחרו (שם
הפרמטר: items)
ולהמתין לתגובה.
אם הכל התנהל כשורה, השרת יחזיר "OK" וניתן להציג למשתמש
הודעה על קבלת ההזמנה.
אתגרי בונוס:
· שימוש ב-Widget בשם Hero בלחיצה על מוצר ברשימה.
ה-Widget אחרי לבצע אנימציה של תמונת המוצר הקטנה לתמונה
המוגדלת במסך הבא.
· הצגת Loader בזמן הפניות לשרת – חיווי ויזואלי בזמן ההמתנה
לחוויית משתמש טובה יותר.
מאחל לכם המון בהצלחה – עידן בן שמעון.
Menu
