‫עזריאלי ‪ -‬המכללה האקדמית להנדסה‪ ,‬קורס מערכות מבוזרות ‪ 10041‬תשפ"ג‬
‫‪2022‬‬
‫מחלקה להנדסת תוכנה‬
‫תרגיל ‪ – 1‬עמוד ‪/12‬‬
‫תרגיל ‪Animals Pool Game 1#‬‬
‫‪ .1‬כתבו קובץ ‪ HTML‬עבור דף המכיל פרטים ומשחקון אודות חיות הנבחרות באופן רנדומלי‪ .‬הדף יכיל פרטים כפי רצונכם וטעמכם כך שהדף‬
‫ייראה יפה‪ .‬ניתן לתמוך בתצוגת הדף בגדלי מסך שונים ‪ ,‬כולל דסקטופ ומובייל‪ -‬אך זו לא חובה‪.‬‬
‫הדף צריך להיות מוצג היטב במסכי דסקטופ סטנדרטי‪.‬‬
‫‪ .2‬השתמשו בפורטל ה‪ CPANEL-‬של המכללה כדי להציג את הדף (יש הדרכה לגישה באתר הקורס)‪ .‬הדף יוצג באתר המכללה בכתובת‬
‫‪ myname.mysoft.jce.ac.il‬כאשר ‪ myname‬הוא שם המשתמש שלכם‪.‬‬
‫עליכם לטעון את הדף לאתר האישי שלכם במכללה ‪.Public_Html‬‬
‫‪ .3‬בפרט הדף יכיל‪:‬‬
‫א) ראש הדף יכיל את שמכם וכן תמונה כרגע או כתוספת לראש הדף‪.‬‬
‫ב) בצד ימין יופיע התאריך של היום כפי שנשמר בשרת‪( .‬קריאת ‪ AJAX‬לסקריפט המצורף שתעלו ותשמרו בשרת ‪)get_current_date.php‬‬
‫ג) המידע לגבי החיות השונות יתקבל מקריאה ב‪ AJAX‬לכתובת‪:‬‬
‫‪https://zoo-animal-api.herokuapp.com/animals/rand/10‬‬
‫תשובת השרת לבקשה זו תחזיר במבנה ‪ JSON‬רשימת חיות רנדומלית עם מידע לגבי כל חיה‪ .‬החיות יוצגו בגריד טבלאי‪.‬‬
‫עבור כל חיה תוצג בגדול התמונה ושם החיה‪.‬‬
‫בלחיצה על ‪ 2‬חיות מתוך הגריד‪ ,‬יקרה אחד מהשניים‪:‬‬
‫‪ .1‬אם בגריד לא מופיעות ‪ 2‬חיות השייכות לאותה משפחה (יונקים‪ ,‬ציפורים‪ ,)..‬תוצג הודעה וכפתור (אפשר בחלונית או‬
‫על גבי הדף)‪" :‬ברשימה לא קיימות ‪ 2‬חיות מאותה משפחה‪ .‬נא לחצו על הכפתור לצפייה ברשימה חדשה"‪ .‬כאשר‬
‫לחיצה על הכפתור‪ ,‬תציג רשימה חדשה של ‪ 10‬חיות‪.‬‬
‫‪ .2‬אם יש ברשימה ‪ 2‬חיות מאותה משפחה‪ ,‬ומשתמש לחץ על ‪ 2‬חיות שלא שייכות לאותה המשפחה‪ ,‬תוצג הודעה וכפתור‬
‫(אפשר בחלונית או על גבי הדף)‪" :‬טעיתם! לא נורא‪ ,‬נסו שוב!"‪ .‬בלחיצה על הכפתור‪ ,‬תישאר אותה רשימה שהיתה‬
‫קודם‪ .‬אם ההודעה מוצגת בדף ולא בחלונית‪ ,‬אין צורך בכפתור‪ .‬הטקסט יכול להופיע לפרק זמן קצר או עד‬
‫שהמשתמש בוחר מחדש חיה אחרת‪ .‬הסימונים הקודמים ייעלמו כדי לאפשר למשתמש להמשיך‪.‬‬
‫‪ .3‬אם יש ברשימה ‪ 2‬חיות מאותה משפחה‪ ,‬ומשתמש לחץ על ‪ 2‬חיות השייכות לאותה המשפחה‪ ,‬תופיע הודעה (אפשר‬
‫בחלונית או על גבי הדף)‪ " :‬יפה מאד! הצלחתם!" ובהמשך ההודעה יופיעו הפרטים עבור ‪ 2‬החיות שנבחרו בפרטים‬
‫שיוצגו הם‪ :‬עבור ערך‪ ,‬במידה ויש‪ ,‬חסר תופיע מחרוזת ריקה‬
‫• משפחה (יונקים‪ ,‬ציפורים‪)..‬‬
‫• מזון‬
‫• תוחלת חיים‬
‫• אורך מינמילי ומקסימלי‬
‫• משקל מינימלי ומקסימלי‬
‫‪ .4‬תטענו לשרת את הקבצים הנדרשים ל‪ public_html -‬לספריות המתאימות‪ .‬צרו ספרייה עבור התמונות וקבצי עיצוב (אם צריך) ‪.‬‬
‫לא לשכוח להתייחס למצבי שגיאה אפשריים בקוד‪.‬‬
‫‪ .5‬הסבירו בקובץ הנפרד ‪:‬‬
‫‪ )1‬מהן ההודעות העוברות בין הלקוח לשרת בכל שלב ומה המנגנון המפעיל כל הודעה‪.‬‬
‫‪ )2‬עקבו אחר ה‪ headers‬של הבקשות והתשובות באמצעות כלי הפיתוח של הדפדפן‪ ,‬וציינו הבדלים עיקריים‪.‬‬
‫נא לרשום בקובץ שם מלא ותעודת זהות‪.‬‬
‫יש לארוז ב‪ zip-‬את הקבצים (כולל קובץ ה‪ readme -‬ובו גם תשובה לסעיף האחרון) ולהגיש דרך מערכת המטלות‪.‬‬
‫עזריאלי ‪ -‬המכללה האקדמית להנדסה‪ ,‬קורס מערכות מבוזרות ‪ 10041‬תשפ"ג‬
‫‪2022‬‬
‫מחלקה להנדסת תוכנה‬
‫בהגשת המטלה יש לציין מה המסלול המלא לצפייה בדף‪.‬‬
‫תרגיל ‪ – 1‬עמוד ‪/22‬‬