‫אוקטובר ‪2013‬‬
‫סמסטר ב' תשע"ג‬
‫‪ – Qyou‬ספר הפרויקט‬
‫מנחה‪ :‬ד"ר אוסי מוקרין‬
‫מגישים‪:‬‬
‫עומרי שייקו‬
‫מוטי קדוש‬
‫רון פלד‬
‫תוכן עניינים‬
‫הקדמה ‪4........................ ................................ ................................ ................................‬‬
‫הצורך ‪4....................... ................................ ................................ ................................‬‬
‫על המערכת ‪4............... ................................ ................................ ................................‬‬
‫מטרות המערכת ‪5......................................... ................................ ................................‬‬
‫מוטיבציה למערכת ‪5...................................... ................................ ................................‬‬
‫דרישות פונקציונליות ‪5.................................... ................................ ................................‬‬
‫קהל היעד והגדרת משתמשים ‪6....................... ................................ ................................‬‬
‫תהליכים עסקיים ‪7......................................... ................................ ................................‬‬
‫ניתוח מערכות מתחרות ‪8................................ ................................ ................................‬‬
‫תיאור אופן השימוש במערכת ‪9............................ ................................ ................................‬‬
‫זרימת המערכת – תהליכים עיקריים ‪9............... ................................ ................................‬‬
‫אפליקציית ‪9..................................... ................................ ................................ qyou‬‬
‫פאנל ניהול המערכת – ‪17.................. ................................ qyou.co.il – web application‬‬
‫צד לקוח ‪18..................... ................................ ................................ ................................‬‬
‫‪18.......................................... ................................ ................................ Html5 + CSS3‬‬
‫‪18............... ................................ ................................ ................................ AngularJS‬‬
‫‪18...................................... ................................ Single page application by angularJS‬‬
‫‪19.............................. ................................ ................................ Ajax with angularJS‬‬
‫‪20............... ................................ ................................ ................................ Phonegap‬‬
‫‪20............... ................................ ................................ ................................ Facebook‬‬
‫תקשורת בין שרת ללקוח באמצעות ‪22................................ ................................ SOKCET I/O‬‬
‫צד שרת ‪23...................... ................................ ................................ ................................‬‬
‫עיצוב הקוד ‪23.............. ................................ ................................ ................................‬‬
‫מודל )‪23...................................... ................................ ................................ (Model‬‬
‫מבט )‪23......................................... ................................ ................................ (View‬‬
‫בקר )‪24.................................. ................................ ................................ (Controller‬‬
‫קבצים נוספים מחוץ ל ‪27..................... ................................ ................................ MVC‬‬
‫אלגוריתם חישוב הדירוג עבור ניהול התור ‪28...................................... ................................‬‬
‫‪29................... ................................ ................................ ................................ Database‬‬
‫‪30................................... ................................ ................................ USER collection‬‬
‫‪31.................................. ................................ ................................ PLACE collection‬‬
‫‪31.................................... ................................ ................................ LINE collection‬‬
‫‪32................................. ................................ ................................ EVENT collection‬‬
‫‪33................................ ................................ ................................ QUEUE collection‬‬
‫תוכניות עתידיות ‪34........... ................................ ................................ ................................‬‬
‫טכנולוגיות בהן השתמשנו ‪35.............................. ................................ ................................‬‬
‫הקדמה‬
‫הצורך‬
‫הצורך לאפליקציה הגיע מצורך עצמי שלנו‪ :‬היינו יוצאים למקומות בילוי‪ ,‬במיוחד בסופי שבוע‬
‫והיינו מחכים בתורים העצומים למועדון בין שעה לשעתיים בלי לדעת אם נכנס למועדון בסוף‬
‫הערב או לא‪.‬‬
‫בנוסף הרגשנו שבגלל שאנו לא בליינים מוכרים ואיננו מכירים יחצנים‪ ,‬אנו נכנסים לאט יותר‬
‫ואפילו כלל לו‪ .‬זאת אף על פי שיכול להיות שאנו לקוחות פוטנציאלים שווים לבעל העסק –‬
‫ובעל העסק לא יודע זאת‪.‬‬
‫את בעיה זו רצינו לפתור‪ ,‬כלומר לעזור לבליין להכנס למועדון ולבעל המועדון להרוויח יותר‬
‫מהעסק שלו‪.‬‬
‫על המערכת‬
‫‪ Qyou‬היא אפליקציית רשת ייחודית לאירועים בתחום חיי הלילה‪ ,‬שמיועדת לכל מי שמתכנן‬
‫אירוע או מתכנן להשתתף באירוע‪.‬‬
‫אנחנו מסייעים למארגני אירועים ולבליינים להפיק את המרב מהאירוע שלהם‪.‬‬
‫ב‪ , Qyou-‬כל אחד יכול להיות מארגן אירוע ולכן אנו מציעים כלים שיעזרו לך ליצור אירוע‬
‫ולקדם אותו במדיה ממש בכמה קליקים‪.‬‬
‫אפליקציית ‪ Qyou‬ממקסמת את הפוטנציאל של הרשת במהלך חיי הלילה‪ .‬סצנת התור‬
‫שמתרחשת בכניסה למועדונים היא מתסכלת ולא יעילה ‪ -‬לא עבור הבליין ולא עבור בעל‬
‫המועדון‪ .‬הפתרון שלנו הוא אוטומציה של סצנת התור בכניסה ‪ -‬פלטפורמה ניידת לניהול‬
‫האירוע באופן חכם אונליין‪ ,‬אשר הופכת את התור לחוויה מהנה שמתגמלת את הבליין –‬
‫בכל אירוע נכנס יותר מהר מהאירוע הקודם ובעל המועדון מתוגמל גם ‪ -‬הוא מקבל‬
‫סטטיסטיקות בזמן אמת שיתנו לו מידע מדויק על האנשים שנכנסים אליו למועדון לפי חתכים‬
‫שונים וכך אופטימיזציה לגבי העסק שלו בהמשך‪.‬‬
‫אפליקציית ‪ Qyou‬נותנת את כל הכלים כדי ליצור אירוע בקלות ‪,‬להביא אנשים לאירוע ולנהל‬
‫את התור בכניסה באופן חכם‪.‬‬
‫איך זה קורה?‬
‫בערב האירוע יגיע בליין למקום‪ ,‬ועל מנת להכנס בקלות‪ ,‬פשוט יפתח את האפליקציה‪,‬‬
‫יתחבר באמצעות פייסבוק‪ ,‬יראה את כל המועדונים סביבו )לפי ‪ (GPS‬ואת הליינים של אותו‬
‫יום‪ ,‬וילחץ על ליין ספציפי ויבקש להכנס למועודן ע"י לחיצה על כפתור‪.‬‬
‫סלקטורית תראה את כל אנשים שמבקשים להכנס‪ ,‬אם בליין ביקש להכנס והוא כבר אישר‬
‫הגעה באיבנט בפייסבוק המערכת תזהה זאת אוטומטית ותדרג אותו גבוה ברשימת‬
‫האנשים המבקשים להכנס למערכת‪ .‬כאשר הסלקטורית תרצה להכניס את הבליין היא‬
‫תלחץ על כפתור אישור כניסה‪ ,‬הבליין יקבל לתוך האפליקציה שהוא אושר להכנס ויקבל‬
‫‪ QR-CODE‬לצורך אימות‪ .‬כאשר ירצה להכנס למועדון‪ ,‬יסרקו לו את הברקוד וכך יוודאו‬
‫שהוא אכן אושר כניסה‪.‬‬
‫בכל שלב בעל המועדון יראה את כל מה שקורה כרגע בתור‪ ,‬כמה אנשים בחוץ‪ ,‬כמה אנשים‬
‫נכנסו‪ ,‬מי הם מאיפה הם באו וכל הפרטים שפייסבוק יכול לספק‪.‬‬
‫מטרות המערכת‬
‫מטרתה העיקרית של המערכת היא אוטומציה של סצנת התור שמתקיימת היום במועדונים‪,‬‬
‫באמצעות הרחבת האיבנט הקיים היום בפייסבוק‪.‬‬
‫למערכת ‪ qyou‬יש שתי מטרות עיקריות‪:‬‬
‫‪‬‬
‫להקל על חייו של הבליין‪.‬‬
‫היום‪ ,‬מאוד מתסכל לבוא למועדונים ולחכות בתור שאין בו סדר‪ ,‬שצריך להידחף‬
‫ושנשארים הרבה זמן בחוץ ללא סיבה‪ .‬המערכת שלנו באה לפתור את בעיה זאת‬
‫בכך שהבליין פשוט יכנס לאפליקציה ‪ ,Qyou‬התחבר למערכת באמצעות פייסבוק‪,‬‬
‫יקבל את רשימת המועדונים הקרובים ביותר אליו ופשוט יבקש להכנס למקום ע"י‬
‫לחיצה כפתור באפליקציה‪ .‬בשלב זה המערכת תודיע לסלקטורית שהבליין הזה‬
‫הגיע‪ ,‬תראה לה את חשבון הפייסבוק שלו והיא תוכל להכניס אותו ע"י לחיצה על‬
‫כפתור‪) .‬נסביר על תהליך זה בפירוט בהמשך(‬
‫‪‬‬
‫לתת לבעל המועדון אינפורמציה על אוכלוסיית המועדון בקלות לסמארטפון בזמן‬
‫אמת‪.‬‬
‫מכיוון שכל המערכת עובדת עם פייסבוק ‪,‬בעל המועדון יוכל לדעת בדיוק מי נמצא לו‬
‫במועדון בכל שלב ‪.‬למשל ‪,‬הוא יוכל לראות מי האנשים במחכים בכניסה ‪,‬מי כבר‬
‫נכנס למקום ‪,‬כמה אנשים הגיעו דרך איבנטים בפייסבוק ‪,‬כמה לא ועוד‪..‬‬
‫מוטיבציה למערכת‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫ניהול התור במועדון באופן מסודר‪ ,‬יעיל וחכם‪:‬‬
‫‪ o‬מסודר ‪ -‬הלקוחות שבאים למועדון לא יצטרכו להידחף בכניסה‪.‬‬
‫‪ o‬יעיל ‪ -‬אפשרות לניהול התור באופן מבוקר‪.‬‬
‫‪ o‬חכם ‪ -‬דרך המערכת תזרום הרבה אינפורמציה על הלקוחות‪ ,‬שממנה יוכלו‬
‫בעלי המועדון לנתב את העסק שלהם‪ .‬בנוסף התור יוכל להתנהל לפי צרכי‬
‫המועדון )עדיפות לגיל‪ ,‬מין‪ ,‬לקוחות קבועים בזמן אמת(‬
‫כניסה חלקה למועדון‪ ,‬זמני המתנה נמוכים יותר ובטוחים ללקוח‪ .‬אווירה נעימה‬
‫ויצירת מיני רשת חברתית למשתמשי המערכת )למשל לקוח יוכל לדעת אם חבריו‬
‫כבר נכנסו(‪.‬‬
‫סטטיסטיקות לבעלי המועדון על האוכלוסייה שנמצאת במועדון שלהם על פי חתכים‬
‫שונים‪.‬‬
‫דרישות פונקציונליות‬
‫הדרישות מתחלקות לשני תחומים‪:‬‬
‫‪ .1‬לפני האירוע‪:‬‬
‫בשלב זה‪ ,‬בעל המועדון יוכל להכניס נתונים ל ‪ ,DB‬ליצור איבנטים בפייסבוק דרך‬
‫‪ Qyou‬ולקדם את האירוע‪ .‬לכן הדרישות הן‪:‬‬
‫‪ ‬כניסה לפאנל ניהול‪.‬‬
‫‪ ‬יצירת מועדון חדש‪ ,‬עריכה‪ ,‬מחיקה‪.‬‬
‫‪‬‬
‫יצירת איבנטים בפייסבוק דרך הפאנל ניהול‪.‬‬
‫‪ .2‬בזמן האירוע‪:‬‬
‫בשלב זה התור צריך להיות מנוהל‪ ,‬לכן הדרישות הן בצד של הבליין ובצד הניהול‬
‫‪ ‬אפליקציה שתראה את את כל המועדונים שקרובים אלי )לפי מיקום‬
‫המכשיר(‬
‫‪ ‬התחברות לאפליקציה באמצעות פייסבוק ע"י פרוטוקול )‪(Auth2.0‬‬
‫‪ ‬כפתור בקשת כניסה למערכת‪.‬‬
‫‪ ‬דף בתוך האפליקציה רק לאנשים מורשים אשר יקבלו את כל הבליינים‬
‫שרוצים להכנס למערכת‪ ,‬ויאשרו את הכניסה שלהם ויקבלו סטסטיסטיקות‬
‫בזמן אמת‪.‬‬
‫‪ ‬כאשר הבליין מאושר כניסה‪ ,‬יקבל ברקוד ייחודי שהוא יוכל להכנס‪.‬‬
‫‪ ‬כאשר יציג את הברקוד ‪ ,‬האפליקציה של הסלקטורית תוכל לסרוק אותו‬
‫וכך לראות שהברוד מאושר‪.‬‬
‫קהל היעד והגדרת משתמשים‬
‫קהל היעד שלנו מחולק לשניים‪:‬‬
‫‪ .1‬בעלי מועדונים‬
‫בעלי מועדונים מכל רחבי הארץ חובבי חידושים וטכנולוגיות שרוצים לפתח את‬
‫העסק שלהם‪.‬‬
‫‪ .2‬בליינים‬
‫סטודנטים בפרט וחבר'ה בני ‪ 18-30‬בכלל שיוצאים באופן קבוע למועדונים ויש להם‬
‫סמארטפון‪.‬‬
‫תהליכים עסקיים‬
‫נתאר ‪ 2‬תהליכים‪:‬‬
‫‪ .1‬הכנסת נתונים למערכת ע"י בעל המועדון‪ .‬כמו שציינו בעל המועדון יכניס את פרטי המועדון‪,‬‬
‫הליינים ויוכל ליצור איבנטים בפייסבוק‪.‬‬
‫‪ .2‬תהליך הכניסה למועדון מהרגע שבו המשתמש פותח את האפליקציה ועד שממש נכנס‬
‫למקום‪ ,‬כמו שתואר בסעיף הקודם‬
‫ניתוח מערכות מתחרות‬
‫נציין שכרגע‪ ,‬אין שום אפליקציה שכזאת‪ ,‬אנחנו רוצים להיות חלוצים בזה‪ ,‬ולנסות להכנס באמת לשוק‬
‫האמיתי‪ ,‬ולא רק כפרוקייט במכללה‪.‬‬
‫ישנן אפליקציות רבות בשוק המועדונים אך הן לא באותו נושא של ניהול התור במועדון ואוטומטיזציה‬
‫של כל המצב הזה‪.‬‬
‫תיאור אופן השימוש במערכת‬
‫זרימת המערכת – תהליכים עיקריים‬
‫נתאר תהליכים עיקריים‪:‬‬
‫אפליקציית ‪qyou‬‬
‫‪ .1‬משתמש (בליין)‬
‫‪ .a‬הרשמה למערכת ובקשה להכנס לתור של מסיבה‪:‬‬
‫‪ .i‬כניסה למערכת‪ :‬המשתמש יכנס לאפליקציה דרך אייקון האפליקציה‪:‬‬
‫‪ .ii‬המשתמש ילחץ על כפתור ‪Connect with Facebook‬‬
‫‪ .iii‬המשתמש מועבר לדף פייסבוק לאישור הרשאות האפליקציה‪:‬‬
‫‪ .iv‬סיום ההרשמה למערכת‪ :‬לאחר שהמשתמש לחץ על "‪ ,"OK‬הוא מגיע‬
‫למסך הראשי של האפליקציה‪.‬‬
‫במסך הראשי של האפליקציה ישנם מגוון אירועים ולכל אירוע‬
‫המשתמש יכול לראות את הפרטים הרלוונטים‪:‬‬
‫כך המשתמש יכול לראות בנוחות את כל האירועים ולחפש את‬
‫האירוע המתאים לו‪.‬‬
‫‪ .v‬כאשר המשתמש מוצא אירוע שהוא רוצה להרשם לתור שלו‪ ,‬הוא‬
‫לוחץ על המועדון הנבחר ומגיע למסך האירוע‪:‬‬
‫‪ .vi‬בלחיצה על כפתור ‪ ,GO PARTY‬המשתמש נרשם לתור בהצלחה‬
‫ומקבל הודעת עדכון )‪ (Notification‬שהבקשה להכנס לאירוע נשלחה‬
‫בהצלחה‪.‬‬
‫‪ .2‬אדמין (סלקטורית‪/‬בעל מועדון)‬
‫‪ .a‬הכנסת משתמש (בליין) לתוך מסיבה דרך התור‪:‬‬
‫‪ .i‬כניסה למערכת‪ :‬כמפורט בסעיף הקודם‪ .‬מכיוון שהאדמין מסומן ב‪-‬‬
‫‪ DB‬כהרשאה שונה‪ ,‬המסך שיקבל לאחר סיום הכניסה למערכת הוא‬
‫המסך הבא‪:‬‬
‫‪ .ii‬לחיצה על כפתור ‪:Queue‬‬
‫‪ .iii‬לאחר לחיצה על הכפתור‪ ,‬האדמין יקבל את מסך התור‪ .‬במסך התור‬
‫קיימות ‪ 3‬רשימות‪ :‬רשימת הממתינים‪ ,‬רשימת האנשים שאושרו‬
‫להכנס למסיבה ורשימת האנשים שלא אושרו להכנס למסיבה‪.‬‬
‫האדמין קודם כל צריך לבחור מאיזה רשימה הוא רוצה להכניס את‬
‫הבליין – מרשימת הממתינים או מרשימת הלא מאושרים‪:‬‬
‫‪ .iv‬לאחר שבחר את הרשימה הנכונה‪ ,‬וברשימה בחר את המשתמש‬
‫שאותו רצה להכניס )המשתמשים מסודרים לפי דירוג משוכלל של‬
‫המערכת(‪ ,‬האדמין צריך ללחוץ על המשתמש שאותו רוצה להכניס‪:‬‬
‫‪ .v‬מסך פרטים אישיים על המשתמש ואישור המשתמש‪ :‬האדמין רואה‬
‫את הפרטים האישיים הרלוונטיים על המשתמש ולוחץ על כפתור‬
‫"אישור"‬
‫‪ .b‬קבלת סטטיסטיקות על המועדון‪:‬‬
‫‪ .i‬כניסה למערכת‪ :‬כמפורט בסעיף הקודם‪ .‬מכיוון שהאדמין מסומן ב‪-‬‬
‫‪ DB‬כהרשאה שונה‪ ,‬המסך שיקבל לאחר סיום הכניסה למערכת הוא‬
‫המסך הבא‪:‬‬
‫‪ .ii‬לחיצה על כפתור ‪:Statistics‬‬
‫‪ .iii‬צפייה בסטטיסטיקות‪:‬‬
‫פאנל ניהול המערכת – ‪qyou.co.il – web application‬‬
‫‪ .1‬הוספת מועדון חדש‪:‬‬
‫הוספת מועדון חדש אפשרית ע"י שני דרכים‪:‬‬
‫‪ .a‬הוספת פרטי המועדון‪:‬‬
‫‪ .i‬שם‬
‫‪ .ii‬עיר‬
‫‪ .iii‬רחוב‬
‫‪ .iv‬כתובת ‪+‬מספר‬
‫‪ .v‬לוגו של המועדון‬
‫‪ .vi‬תיאור כללי על המועדון‬
‫‪ .b‬הכנסת קישור ‪ facebook‬של המועדון והמערכת תשאוב את כל הפרטים באופן‬
‫אוטומטי‪.‬‬
‫‪ .2‬הוספת ליין חדש‪:‬‬
‫הוספת ליין חדש מתבצעת ע"י הכנסת פרטי הליין‪:‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫שם‬
‫ימים בשבוע‬
‫טווח גילאים‬
‫לוגו\תמונה של הליין‬
‫תיאור כללי‬
‫כעת‪ ,‬כאשר הגדיר זאת‪ ,‬יוכל דרך המערכת להוסיף איבנטים חדשים בפייסבוק כך‬
‫שהמערכת שלנו תהיה מסוגלת לקרוא את המידע מהאיבנט בפייסבוק‪.‬‬
‫צד לקוח‬
‫‪Html5 + CSS3‬‬
‫את הבסיס של האפליקציה בנינו באמצעות התוסף הבא‪:‬‬
‫‪/http://maker.github.io/ratchet‬‬
‫תוסף זה נותן לנו כפתורים תפריטים יפים וכפתורים‪ .‬אך את רוב האפליקציה כתבנו ועיצבנו בעצמנו‪.‬‬
‫באפליקציה שלנו ניצלנו את היכולות של ‪ ,CSS3 + HTML5‬כך שהשתמשנו בהצללה‪ ,‬פינות מעוגלות‪,‬‬
‫אנימציה ב ‪) CSS‬אשר לא גורמת לאפליקציה להאט( ועוד אלמנטים מ ‪.CSS3‬‬
‫השתמשנו בספריה של אייקונים הבאה‪:‬‬
‫‪/http://fortawesome.github.io/Font-Awesome‬‬
‫בשביל כל האייקונים באפליקציה‪.‬‬
‫על מנת להראות את המפה של של המעדון‪ ,‬השתמשמנו ב ‪ API‬של ‪ ,Google Maps‬והוספנו למפה‬
‫‪ pin‬בסמל של הלוגו המשנה את צבעו באופן רנדומלי‪.‬‬
‫סה"כ ניצלנו את המירב מהטכנולוגיות הללו‪ ,‬והקוד שלנו מאוד קריא וקל להבנה‪.‬‬
‫‪AngularJS‬‬
‫פיתחנו את האפליקציה ב ‪HTML + CSS + JS‬‬
‫בשביל שהאפליקציה תהיה מהירה‪ ,‬לא השתמשנו ב ‪ .jquery‬השתמשנו ב ‪.angularJS‬‬
‫‪ angularJS‬היא סיפריה ‪ JS‬קטנה יחסית‪ ,‬המנהלת את כל האפליקציה במודל ‪.MVC‬‬
‫‪ angularJS‬מספקת חיבור ישיר בין המודל לבין הדף עצמו )‪ (view‬ע"י סינטקס חדש‪ .‬וחוסכת הרבה‬
‫קוד‪.‬‬
‫לכל דף באפליקציה שלנו‪ ,‬יש קונטרולר שהוא מתווך בין המודל ל ‪.view‬‬
‫למשל אצלנו בדף שמציג את ה ‪ ,QR-code‬הקונטרולר נראה כך‪:‬‬
‫כאן אנחנו מקבלים מהכתובת של הדף את ה ‪ lineId‬ואת ה ‪ .uuId‬החלק החשוב ביותר בקונטרולר‬
‫הוא הקטע הבא‪:‬‬
‫‪scope.qr$‬‬
‫קטע זה מגדיר משתנה הנקרא ‪ qr‬שיהיה גישה אליו ב ‪.view‬‬
‫הגישה אליו תתבצע כך‪ }}qr{{ :‬בתוך הדף ‪.HTML‬‬
‫מומלץ לקרוא על ‪ angularJS‬כאן‪/http://angularjs.org :‬‬
‫‪Single page application by angularJS‬‬
‫את האפליקציה שלנו ממישנו כ ‪ ,Single Page Application‬כלומר יש רק דף ‪ HTML‬אחד‪ ,‬ואנחנו‬
‫"מזריקים" לו תוכן אחר כל פעם‪ .‬באמצעות זה שהאפליקציה היא ‪ Single Page Application‬אנחנו‬
‫מקבלים את היתרון שאנחנו טוענים פעם אחת את כל הספריות שאנו משתמשים בהם‪ ,‬ורק מחליפים‬
‫את התוכן של הדף‪ .‬דבר היוצר מצד אחד נראות של אפליקציה עם הרבה עמודים‪ ,‬מצד שני חסכון‬
‫בטעינה )הדף נטען פעם אחת כשהוא עולה וזהו(‪.‬‬
‫נסביר את תהליך את ‪ Single Page Application‬עם ‪ angularJS‬עובד‪:‬‬
‫מגדירים דף ‪ index.html‬כך‪:‬‬
‫התגית ‪ html‬נראת כך‪:‬‬
‫נצרף את הקוד של ‪:angularJs‬‬
‫ובתוך ה ‪ body‬של הדף נגדיר כך‪:‬‬
‫מה שעשינו כאן זה בעצם הגדרנו את האפליקציה עצמה כאפליקצית ‪ ,angularJS‬והקטע קוד‬
‫<‪ >mobile-view></mobile-view‬יוחלף בדף הרלוונטי‪.‬‬
‫בקוד ה ‪ JS‬נשתמש במנגנון ה ‪ routes‬של ‪ .angularJS‬נסביר זאת‪:‬‬
‫קוד זה עובד רק עבור אפליקצית ‪ Qyou‬כמו שהוגדר בתגית ה ‪HTML‬‬
‫הקוד כאן בעצם מגדיר עבור כל לינק איזה קונטרולר ואיזה ‪ view‬צריכים להיות פעילים‪ .‬למשל כאן‬
‫בדוגמא‪ ,‬אם גלשנו ל"דף" ‪ lines/‬אז ‪ angularJS‬ידחוף את ה ‪ view‬של ‪ lines.html‬לתוך ה‬
‫<‪ >mobile-view></mobile-view‬המקורי‪ ,‬וידליק את הקונטרולר ‪.linesCtrl‬‬
‫כך בעצם‪ ,‬כל "דף" שנקרא‪ angularJS ,‬מחליף את התוכן וקורא לקונטרולר המתאים‪.‬‬
‫כמובן‪ ,‬שאנחנו לא באמת גולשים לדף ‪ ,lines/‬המנגון ‪ routes‬מנצל את ה ‪ anchor‬של ‪ html‬ובעצם‬
‫קורא לדף כך‪:‬‬
‫‪qyou/d3/AppAsAdmin/#/lines‬‬
‫נשים לב שזה ‪ lines/#‬ולא ‪ lines/‬כך הדפדפן לא עובר לדף אחר וגם ‪ angularJS‬יודע כאשר קראו לזה‬
‫ומעביר אותו לדף הנ"ל‬
‫וכך מתבצע ה ‪ single Page Application‬במערכת שלנו‪.‬‬
‫‪Ajax with angularJS‬‬
‫כעת נסביר על קריאות ה ‪ AJAX‬ב ‪.angularJS‬‬
‫האפליקציה שלנו משתמשת המון בפעולת ‪ ,AJAX‬עבור כל קבלה ושליחה של נתונים אנחנו‬
‫משתמשים ב ‪ .AJAX‬נובע גם מהעובדה שהאפליקציה היא ‪ Single Page Application‬ואנחנו לא יכולים‬
‫לעבור פתאום לשרת ולחזור חזרה לדף‪.‬‬
‫כמו שציינו בספר בצד של השרת השתמשתנו ב ‪ ,REST‬ולכן כעת בצד בלקוח מאוד קל לנו לקבל‬
‫ולשלוח נתונים‪.‬‬
‫בשונה מ ‪ jquery‬שצריך לכתוב כל פעם ‪ ajax.$‬עבור כל בקשת ‪ ,ajax‬ל ‪ angularJS‬יש פלאגין קטן‬
‫המאפשר לקבל ולשלוח נתונים על גבי ‪ ajax‬בפורמט ‪ rest‬בקלות מאוד‪.‬‬
‫נסביר‪:‬‬
‫השתמשנו בפלאגין ‪- restangular‬‬
‫‪https://github.com/mgonto/restangular‬‬
‫באמצעות הפלאגין הזה אפשר לבצע בקשות ‪ ajax‬בשורה אחת ובקלות‪ .‬לדוגמא על מנת לשלוף את‬
‫כל הליינים באותו ערב פשוט נרשום כך‪:‬‬
‫‪('rest.all('lines‬‬
‫שורה זאת בעצם יצרה בקשת ‪ ajax‬לשרת וביקשה את כל הליינים ב ‪.GET‬‬
‫על מנת לעבוד עם הפלאגין הזה צריך להגדיר אותו פעם אחת‪:‬‬
‫בקובץ ההגדרות הראשי ‪ app.js‬רשמנו‪:‬‬
‫כלומר בעצם הגדרנו את ה ‪ BASE‬שלנו‪ ,‬כלומר את הכתובת של השרת‪ ,‬ומעכשיו כל פעם שנבצע‬
‫בקשת ‪ ajax‬כמו‬
‫‪('rest.all('lines‬‬
‫היא תתורגם מאחורי הקלעים ל‪:‬‬
‫‪http://qyou.co.il:80/api/lines‬‬
‫ותחזיר לנו את התשובה מהשרת‪.‬‬
‫‪Phonegap‬‬
‫לאחר שבנינו את כל האפליקציה ברמה של ‪ HTML + JS + CSS‬נשאר לנו להפוך את ה"אתר" שהכנו‬
‫לאפליקציה ממש שמתאימה לאייפון‪.‬‬
‫על מנת לעשות זאת‪ ,‬השתמשמנו ב ‪ ,PhoneGap‬אשר "אורזת" את כל האתר שלנו לתוך פרוייקט‬
‫‪ xcode‬שאותו אפשר לקמפל לאפליקצית אייפון אמיתית‪.‬‬
‫האפליקציה שלנו דורשת יותר ממה ש ‪ PhoneGap‬הבסיסית נותנת‪ ,‬לכן השתמשנו ב‪ plugins‬ל‬
‫‪:phonegap‬‬
‫חיבור לפייסבוק ברמה של האייפון ‪ -‬רצינו שיהיה חיבור מלא בין פייסבוק לאפליקציה שלנו‪ ,‬כלומר‬
‫שכאשר משתמש רוצה להתחבר למערכת שלנו‪ ,‬הוא צריך לעבור דרך פייסבוק‪ .‬מבחינה פרקטית‪ ,‬זה‬
‫אומר שהמשתמש נכנס לאפליקציה שלנו‪ ,‬לוחץ על כפתור "התחבר" ומועבר לאפליקצית פייסבוק‬
‫המותקנת לו במכשיר )במידה ולא מותקנת אפליקציה הוא מועבר לדפדפן לאתר של פייסבוק( ושם‬
‫הוא מאשר את האפליקציה שלנו ולאחר האישור הוא חוזר אוטומטית לאפליקציה שלנו ומתחיל‬
‫לעבוד‪.‬‬
‫סורק ‪ - QR-code‬האפליקציה שלנו צריכה להשתמש במצלמה של המכשיר‪ ,‬לצורך סריקת הברקוד‬
‫של המשתמש‪ .‬פעולה זאת מתבצעת כאשר הבליין קיבל אישור כניסה למועדון והוא צריך להציג את‬
‫האישור בכניסה לצורך בדיקה אם האישור הוא אמיתי‪.‬‬
‫כלומר‪ ,‬סיימנו את האתר שבנינו‪ ,‬וארזנו אותו לתוך פרוייקט ‪ xcode‬באמצעות ‪ phonegap‬התקנו את‬
‫הפלאגינים שציינו למעלה‪.‬‬
‫לאחר מכן‪ phonegap ,‬נותנת לנו ‪ API‬ב ‪ JavaScript‬להפעלה של אלמנטים במכשיר‪ ,‬השתמשנו בהם‬
‫בחלקים מהאפליקציה‪ ,‬לדוגמא כאשר אנחנו מודיעים לבליין שהוא קיבל אישור כניסה‪ ,‬אנחנו‬
‫מפעילים את הרטט במכשיר של הבליין ומפעילים מוזיקה במכשיר של הבליין‪.‬‬
‫לאחר שסיימנו את כל החלקים האלה עם ‪ phonegap‬נשאר לנו רק לקמפל את הפרוייקט ‪xcode‬‬
‫ולהעלות אותו ל ‪ AppStore‬של ‪.Apple‬‬
‫נציין גם‪ ,‬שלמעט ההתקנה של ה‪ plugins‬שציינו‪ ,‬אנחנו יכולים גם להתקין את האפליקציה על‬
‫אנדורואיד‪ ,‬בלאקברי‪ ,‬וינדוס פון בקלות רבה‪ ,‬רק נצטרך להתקין את ה ‪ plugins‬הללו בפרוייקטים‬
‫האלה‪.‬‬
‫‪Facebook‬‬
‫האפליקציה שלנו מתממשקת ב ‪ 100%‬עם פייסבוק‪ ,‬מההתחברות למערכת‪ ,‬ועד לתמונת הפרופיל‬
‫שאנחנו מציגים לסלקטורית על הבליין‪.‬‬
‫לצורך עבודה כזאת מול פייסבוק‪ ,‬השתמשנו בדברים הבאים‪:‬‬
‫יצרנו אפליקצית פייסבוק ב ‪ /https://developers.facebook.com‬הגדרנו את האפליקציה הזאת כך‬
‫שנוכל לגשת לחשבון על המשתמשים שלנו ולשאוב מהם את הפרטים האישיים שלהם כגון‪ ,‬שם‪,‬‬
‫משפחה‪ ,‬גיל‪ ,‬עיר מגורים‪ ,‬גישה לחברים שלו‪ ,‬אפשרות פרסום על הקיר שלו‪.‬‬
‫פייסבוק ‪ :SDK‬פייסבוק הוציאו ‪ SDK‬בכל מיני שפות תכנות לצורך עבודה מולם‪ .‬אנחנו השתמשנו ב‬
‫‪:facebook JS SDK‬‬
‫‪https://developers.facebook.com/docs/javascript/gettingstarted‬‬
‫עם ה ‪ sdk‬הזה אנחנו עובדים מול פייסבוק לצורך של קריאה של נתונים מהם‪ .‬ופרסום על הקיר של‬
‫הבליין‪.‬‬
‫כמו שציינו בסעיף על הפלאגין לפייסבוק ב ‪ PhoneGap‬לצורך המעבר בין האפליקציה שלנו‬
‫לאפליקציה של פייסבוק‪ ,‬התחברות וחזרה לאפליקציה שלנו‪.‬‬
‫כאשר אנחנו משתמשים בכל מה שציינו למעלה‪ ,‬אנחנו מסוגלים לעבוד בצורה חלקה מול פייסבוק‪.‬‬
‫תקשורת בין שרת ללקוח באמצעות ‪SOKCET I/O‬‬
‫‪ Websocket‬הוא פרוטוקול הרץ מעל ה‪ .TCP-‬באמצעות ה‪ Websocket -‬אפשר ליצר תקשורת דו‬
‫כיוונית בין שרת ללקוח בזמן אמת )‪.(real time‬‬
‫באפליקציה שלנו חשוב לנו מאוד תקשורת בזמן אמת כלומר כאשר בלין מבקש להכנס למועדון‪,‬‬
‫הסלקטורית תקבל את הבקשה שלו באותו הרגע ולא לאחר מספר דקות‪.‬‬
‫באותו אופן גם כשסלקטורית מאשרת לבליין להכנס‪ ,‬נרצה שהבליין יקבל את אישור הכניסה באותו‬
‫רגע כדי לא ליצור עומס בכניסה‪.‬‬
‫לכן בחרנו להשתמש ב‪ ,Websocket -‬שנותן לנו את הביצועים הנדרשים הללו‪.‬‬
‫ניתן לראות את הדיאגרמה הממחישה את התקשורת בין הסלקטורית לבליין‪:‬‬
‫צד שרת‬
‫צד השרת נכתב כולו ב ‪ Node.js‬בסביבת לינוקס )גרסת ‪ (Ubuntu‬ע"י ‪) Webstorm IDE‬פירוט‬
‫נוסף ניתן למצוא בפרק "טכנולוגיות בהן השתמשנו"(‪.‬‬
‫עיצוב הקוד‬
‫צד השרת נכתב תוך שימוש בתבנית העיצוב )‪ , MVC (model,view,controller‬המשמשת‬
‫להפשטת היישום על ידי חלוקתו ל ‪ 3‬מרכיבים עיקריים ולצמידות נמוכה של המרכיבים דבר שאפשר‬
‫לנו לבצע יותר שימוש חוזר בקוד )‪ ,(Reusable‬ויסייע לנו בעתיד בעת תחזוקת הקוד‪.‬‬
‫להלן תרשים ה ‪ MVC‬המתאר את היחסים בין שלושת המרכיבים‪.‬‬
‫כעת‪ ,‬נפרט מה מטרתו של כל אחד מהרכיבים שהוזכרו לעיל באפליקציה שלנו‪.‬‬
‫מודל (‪)Model‬‬
‫מרכיב זה כולל את הייצוג של כל המידע עליו פועל היישום כלומר‪ ,‬מכיל‬
‫את כל טבלאות ה ‪ DB‬ואת כל הפונקציות הבסיסיות שמימשנו עבור‬
‫הטבלאות הללו )יצירה עריכה‪ ,‬מחיקה(‪.‬‬
‫חלק זה יתואר בהמשך בפירוט בפרק ‪.Database‬‬
‫מבט (‪)View‬‬
‫מרכיב זה תפקידו להמיר את נתוני המודל לייצוג המאפשר למשתמש לבצע פעולת גומלין‬
‫כלשהי‪ ,‬באפליקציה שלנו מרכיב זה כולל את כל דפי ה )‪ ejs (embedded javascript‬של‬
‫ממשק המנהלים שעל ידם אנו יכולים לבצע פעולות בסיסיות לאפליקציה כמו‬
‫יצירה‪/‬מחיקה‪/‬עריכה של אירוע חדש מקום חדש ועוד‪...‬‬
‫מרכיב זה כולל את הקבצים הבאים‪:‬‬
‫‪‬‬
‫תיקיית ‪ Admin‬הכוללת את ‪ 3‬תיקיות ‪ Place , Line , Event‬שכל אחת מהן כוללת‬
‫את הקבצים הבאים‪:‬‬
‫‪‬‬
‫‪ – main.ejs o‬בעזרת דף זה אנו מציגים את כל‬
‫המקומות‪/‬ליינים‪/‬אירועים שהמשתמש יצר‪.‬‬
‫‪ – new.ejs o‬בדף זה אנו מציגים טופס שבעזרתו‬
‫המשתמש יכול ליצור מקום‪/‬ליין‪/‬אירוע בצורה נוחה‬
‫ולשמור מקום זה ב ‪ DB‬על ידי לחיצה על "שמירה"‪.‬‬
‫‪ – edit.ejs o‬בדף זה אנו מציגים טופס שבעזרתו‬
‫המשתמש יכול לעדכן מקום‪/‬ליין‪/‬אירוע קיםם בצורה‬
‫נוחה ולשמור את העדכון ב ‪ DB‬על ידי לחיצה על‬
‫"עדכון"‪.‬‬
‫תיקיית ‪ – Error‬תיקייה זו כוללת קבצי ‪ ejs‬שמופיעים כאשר‬
‫המשתמש קיבל שגיאה בזמן השימוש באפליקציה )לדוגמא‪:‬‬
‫שגיאת ‪ 404‬עבור ניווט לדף שלא נמצא(‬
‫‪‬‬
‫‪ – HomePage.ejs‬דף הבית של ממשק הניהול‪.‬‬
‫‪‬‬
‫‪ – Layout.ejs‬דף זה מכיל את הפאנל העליון הקבוע שמופיע‬
‫בכל הדפים‪.‬‬
‫בקר (‪)Controller‬‬
‫תפקיד מרכיב זה לעבד ולהגיב לאירועים המתרחשים ב ‪ ,View‬כתגובה לפעולה של‬
‫המשתמש‪.‬‬
‫באפליקציה שלנו הבקר עונה לבקשות שהתקבלו מה‪ View-‬מטפל בהם ומחזיר תשובה‬
‫בפורמט ‪ ,JSON‬כמו כן בבקר נעשות בדיקות תקינות של קלט שהגיע מה‪ View-‬לפני שקלט‬
‫זה מועבר למודל‪.‬‬
‫כעת על הפונקציות העיקריות בכל אחד מהקבצים שיצרנו ב ‪.Controller‬‬
‫‪authentication.js‬‬
‫קובץ זה מכיל פונקציות המאמתות המשתמש עם חשבון הפייסבוק שלו‬
‫שהצהיר עליו )כזכור‪ ,‬ההתחברות לאפליקציה היא על ידי חשבון פייסבוק(‬
‫בשימוש בפונקציות אלו אנו משתמשים במודל ‪) Passport‬קישור למודל זה‬
‫‪ (https://npmjs.org/package/passport‬בדיקות האימות עבור המשמש‬
‫נעשות גם בין כל מעבר מדף לדף על ממת להבטיח שמשתמש לא יגיע‬
‫לדפים "פנימיים" מבלי לעבור תהליך של אימות‪.‬‬
‫‪facebook.js‬‬
‫קובץ אלו מכיל את כל הפונקציות שפונות לשרתים של פייסבוק ומבקשות‬
‫מידע שונה לטובת האפליקציה‪ ,‬פונקציות אלו משתמשות במודול ‪fbgraph‬‬
‫)קישור למודול זה ‪ ( https://npmjs.org/package/fbgraph‬המהווה ‪ Api‬לשירותי‬
‫פייסבוק הפונקציות הכלולות בו הם‪:‬‬
‫‪‬‬
‫‪ – createNewEvent‬פונקציה המשמשת את המשתמש ליצור ‪ Event‬בפרופיל‬
‫הפייסבוק שלו דרך אתר ‪ .Qyou‬המספר המזהה של האיבנט שנוצר נשמר ב ‪DB‬‬
‫)בקולקציה ‪ (Event‬ומאפשר לנו לקבל חיוני מפייסבוק ביחס לאירוע זה‪.‬‬
‫‪‬‬
‫‪ – GetFriendAttendingByEventID‬פונקציה זו משמשת אותנו לקבלת מידע על‬
‫האנשים שהוזמנו‪/‬אישרו הגעתם לאירוע זה‪.‬‬
‫‪schedule.js‬‬
‫קובץ זה מכיל פונקציות ש"רצות ברקע" ונקראות לפעולה באופן אוטומטי כל זמן מוגדר‪.‬‬
‫למימוש פונקציות אלו אנו משתמשים במודול ‪) Cron‬קישור למודול‬
‫‪ (https://npmjs.org/package/cron‬המאפשר לנו לקבוע זמן מחזורי קבוע בו נבצע‬
‫פעולות מסוימות‪ ,‬במערכות ההפעלה של ‪ Unix‬משתמשים במנגנון זה על מנת לבצע‬
‫פעולות באופן מחזורי‪.‬‬
‫) לינק להסבר מויקיפדיה על ממגנון ה‪cron -‬‬
‫‪( http://en.wikipedia.org/wiki/Cron‬‬
‫הפונקציות העיקריות בקובץ זה‪:‬‬
‫‪ – updateDateOfLines‬פונקציה זו נקראת באופן אוטומטי כל בוקר ותפקידה הוא‬
‫‪‬‬
‫לעדכן את התאריך הבא של ליין שהוגדר באופן מחזורי )לדוגמא‪ :‬נניח ויש לנו ליין קבוע בכל‬
‫ימי שני וחמישי אז על ידי הפונקציה ביום שלישי בבוקר תאריך האירוע הקרוב של הליין‬
‫ישתנה מיום שני ליום חמישי(‪.‬‬
‫‪ - UpdateQueue‬פונקציה זאת נקראת באופן אוטומטי כל ‪ 5‬דקות ותפקידה הוא‬
‫‪‬‬
‫להכניס לתור של אותו ליין את כל האנשים שאישרו את הגעתם לאירוע דרך אחד מהאיבנטים‬
‫שנפתחו עבור האירוע בפייסבוק‪.‬‬
‫‪ – StartRankIncrementOfQueue‬פונקציה זו מופעלת לראשונה על ידי‬
‫‪‬‬
‫הסלקטורית כאשר האירוע מתחיל ולאחר מכן נקראת באופן מחזורי כל ‪ 3‬דקות ותפקידה הוא‬
‫להעלות את הדירוג הזמני של כל כל המשתמשים הממתינים בתור וזאת על מנת למנוע מצב‬
‫של "הרעבת" המשתמשים )הסבר מפורט יותר ניתן למצוא בחלק שמפרט על אלגוריתם‬
‫ניהול התור מטה(‪.‬‬
‫‪Places.js‬‬
‫בקובץ זה ממושמות כל הפונקציות הפועלות על טבלת ה ‪ Place‬שב ‪ DB‬נפרט על‬
‫העיקריות שבהם‪:‬‬
‫‪– calcLonAndLat‬בפונקציה זו נעשה שימוש כאשר יוצרים מקום חדש והיא‬
‫‪‬‬
‫משמשת אותנו לחישוב מיקום גיאוגרפי מדויק )‪ (lat & lon‬של המקום על סמך הכתובת‬
‫המלאה שלו‪ ,‬המכילה את הפרמטרים‪ :‬ארץ ‪ ,‬עיר ‪ ,‬רחוב ומספר רחוב )ניתן להעביר‬
‫לפונקציה את הפרמטרים בעברית או באנגלית(‪ .‬בפונקציה זו אנו משתמשים במודול‬
‫‪) geocoder‬קישור למודול ‪ (https://npmjs.org/package/geocoder‬שמשמש כ‬
‫‪ wrapper‬של ‪ .google map api‬המיקום הגיאוגרפי המתקבל מהפונקציה נשמר ב ‪DB‬‬
‫ומשמש אותנו בפונקציות הבאות‪.‬‬
‫‪ – GetDistance‬פונקציה זו מקבלת כפרמטר את המיקום הנוכחי של המשתמש‬
‫‪‬‬
‫ומספר מזהה עבור מקום כלשהו ומחשבת את המרחק בין המשתמש לבין המקום‪.‬‬
‫‪Lines.js‬‬
‫קובץ זה מכיל פונקציות רבות המספקות מידע עבור הליין כמו קודם נפרט על העיקריות‬
‫שבהם‬
‫‪ – getLinesDataForMainScreen‬פונקציה זו נקראת בכל פעם שהמשתמש נכנס‬
‫‪‬‬
‫לאפליקציה‪ ,‬הפונקציה מוצאת את כל הליינים הפעילים שצריך להציג למשתמש עבור כל אחד‬
‫מהם מרכזת את המידע הנחוץ להצגה )ע"י פונקציית ‪ ( dataCollectionForLine‬בפורמט‬
‫של ‪ JSON‬ושולחת את המידע לצד הלקוח שם הוא מפוענח ומוצג על הסמארטפון‪.‬‬
‫‪ – GetDataAboutSpecificLine‬פונקציה זו נקראת לאחר שהמשתמש בחר בליין‬
‫‪‬‬
‫כלשהו בדף הרשאי של האפליקציה‪ .‬פונקציה זו מייצרת אובייקט ‪ JSON‬הכולל את כל‬
‫הנתונים הידועים לגבי אותו ליין )שם‪ ,‬תאריך ‪ ,‬תיאור‪ ,‬תמונה ‪ ,‬שם המקום בו מתרחש‬
‫האירוע ‪ ,‬מרחק של המשתמש מהאירוע ועוד‪.(..‬‬
‫‪ – getLinesDataSortByDistance‬פונקציה זו מחזירה למשתמש את רשימת כל‬
‫‪‬‬
‫האירועים לפי המרחק הנוכחי שלו מכל אחד מהאירועים הפעילים שבאפליקציה‪.‬‬
‫‪ – getAverageAges/CalcGenderProposition‬פונקציות אלו מספקות‬
‫‪‬‬
‫סטטיסטיקה לבעל המועדון והסלקטורית על יחס הבנים‪/‬בנות וממוצע הגילאים של הבליינים‬
‫שנכנסו לאירוע ושל אילו שעדיין ממתינים בתור‪.‬‬
‫‪Events.js‬‬
‫קובץ זה מכיל פונקציות בסיסיות המספקות מידע עבור הליין לא מצאנו כי ישנם פונקציות‬
‫לא ברורות הדורשות הסבר מיוחד בקובץ זה‪.‬‬
‫‪Queue.js‬‬
‫קובץ זה מכיל את כל הפונקציות המשמשות לניהול התור בפועל וביניהן הפונקציות‬
‫הבאות‪:‬‬
‫‪‬‬
‫‪ – addUserToWaitingListAndInitializeQueueRank‬פונקציה זו נקראת את‬
‫כאשר המשתמש הגיע למסיבה וברצונו להיכנס לתור‪ ,‬הפונקציה מכניסה את‬
‫המשתמש לרשימת ההמתנה של אותו תור ומחשבת את ה ‪Queue Rank‬‬
‫ההתחלתי שלו )כפי שמתואר באלגוריתם התור המופיע מטה( לשם דירוג בתור‪.‬‬
‫‪‬‬
‫‪ - getPeoplesWaitingSortByRank‬פונקציה זו נקראת כאשר הסלקטור מבקש‬
‫לראות את רשימת על האנשים בתור‪ ,‬הפונקציה יוצרת אובייקט ‪ JSON‬המכיל‬
‫פרטים על המשתמשים )תמונה‪ ,‬שם ועוד‪ , (..‬את הזמן שבו כל המשתמש ביקש‬
‫להיכנס )על מנת להציג כמה זמן המשתמש ממתין( כאשר סדר המשתמשים‬
‫באובייקט הנשלח נקבע על פי דירוגם מהגבוהה לנמוך‪.‬‬
‫‪‬‬
‫‪ - generateUUID‬פונקציה זו נקראת כאשר הסלקטורית אישרה את המשתמש‬
‫וכעת אנו יוצרים עבור משתמש מספר ‪ UUID‬לשם יצירת ברקוד ייחודי )שנשלח‬
‫למשתמש על ידי ‪ (Web Socket‬את המספר יצרנו ע"י המודול ‪ ) UUID‬ניתן‬
‫לראות פירוט על המודול כאן ‪.(https://npmjs.org/package/uuid :‬‬
‫‪‬‬
‫‪ - VerifiedUser‬פונקציה זו נקראת כאשר הסלקטורית סורקת את הברקוד‬
‫שהמשתמש מציג לה‪ ,‬תפקידה של הפונקציה הוא לבדוק האם הברקוד‬
‫שהמשתמש מציג הוא אכן הברקוד שנשלח לו‪.‬‬
‫קבצים נוספים מחוץ ל ‪MVC‬‬
‫‪ – SERVER.js‬קובץ זה מהווה כ ‪ ENTRY POINT‬של האפליקציה‪ ,‬בקובץ זה‬
‫אנו מבצעים התחברות לשרת בהתאם לסביבת העבודה עליה אנו עובדים‬
‫) ‪ Production‬או ‪,, (Development‬התחברות ל ‪) DB‬ע"י ‪(mongoose‬‬
‫וטוענים את המודלים הבאים‪ http , Passport , Express :‬ו ‪.Socket I/O‬‬
‫‪ - ROUTES.js‬בקובץ זה אנו משתמשים ב ‪ Express Framework‬של‬
‫‪ (/http://expressjs.com) Node.js‬תפקידו של ‪ Framework‬זה הוא לבצע‬
‫התאמה בין כתובת ה ‪ URL‬שהוזנה על ידי המשתמש לדפדפן לבין‬
‫הפונקציה שצריך להריץ בצד השרת בעקבות בקשה זו‪ ,‬במידה ולא נמצאה‬
‫התאמה בין הכתובת שהוכנסה לבין אחת מהכתובות המופיעות בקובץ‬
‫השרת יחזיר שגיאת ‪) 404‬דף לא נמצא(‪.‬‬
‫קובץ זה בנוי במתודולוגיית ‪) REST‬הסבר על ‪ REST‬מויקיפדיה‬
‫‪(http://en.wikipedia.org/wiki/Representational_state_transfer‬‬
‫שמספקת לנו את היתרונות של פשטות וניהול של כל הניתובים בקובץ אחד‬
‫ובצורה ברורה‪.‬‬
‫‪ – Package.json‬קובץ זה מכיל את כל המודולים מה ‪ NPM‬בהם‬
‫השתמשו במערכת‪ ,‬קובץ זה משמש להתקנת על המודלים‬
‫הרשומים בו בשרת באופן הבא‪ :‬כאשר אנו מעלים את השרת‬
‫ומכניסים בקונסול את הפקודה ‪ Npm Install‬אז הרצת הפקודה‬
‫גורמת לחיפוש בכל הקבצים בקוד קובץ בשם ‪Package.json‬‬
‫בתוך קובץ זה מחפשים את האובייקט ‪ dependencies‬ועל פי ה‬
‫‪) Key‬המייצג את שם המודול( וה ‪) value‬המייצג את הגרסא של‬
‫המודול ( מתבצעת התקנת המודולים לשרת‪.‬‬
‫אלגוריתם חישוב הדירוג עבור ניהול התור‬
‫בחלק זה נסביר על האלגוריתם בעזרתו המערכת מנהלת את התור האלגוריתם מורכב מ ‪3‬‬
‫פרמטרים עיקריים‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫‪ – Global Rank‬מספר חיובי המייצג את הדירוג הכללי שיש לכל משתמש‪ ,‬ביחס לרמת‬
‫השימוש שלא באפליקציה באופן כללי ‪ ,‬ערך זה גדל באופן איטי יחסית‪.‬‬
‫‪ – Line Rank‬מספר חיובי המייצג את הדירוג שיש לכל משמש ביחס לליין ספציפי )כלומר‬
‫הדירוג נקבע על פי מספר הפעמים שהמשתמש השתמש באפליקציה באותו הליין(‪ ,‬ערך זה‬
‫גדל באופן מהיר יותר מאשר ‪.Global Rank‬‬
‫‪ – Queue Rank‬מספר חיובי שערכו הראשוני נקבע על סמך ‪ 2‬הפרמטרים בתוספת פרמטר‬
‫המייצג את משך זמן ההמתנה של כל משתמש‪ ,‬בניגוד ל ‪ 2‬הפרמטרים האחרים פרמטר זה‬
‫הוא זמני ואין לא חשיבות לאחר שהמשתמש נכנס למסיבה‪.‬‬
‫הבליינים בתור מדורגים באופן הבא‪:‬‬
‫‪‬‬
‫‪‬‬
‫‪‬‬
‫שלב ההגעה למסיבה‪ :‬כאשר משתמש מגיע לתור ומבקש להיכנס למסיבה אנו מבצעים‬
‫את הדברים הבאים‪:‬‬
‫‪ o‬מחלצים מה ‪ DB‬את ‪ Global Rank‬של אותו המשתמש )במידה וזהו השימוש‬
‫הראשון שלו באפליקציה ‪.(Global Rank=0‬‬
‫‪ o‬מחלצים מה ‪ DB‬את ה ‪ Line Rank‬של אותו משתמש )במידה וזהו השימוש‬
‫הראשון של המשתמש באפליקציה באותו הליין ‪.(Line Rank =0‬‬
‫‪ o‬מאתחלים את ‪ Queue Rank‬לערך הבא‪:‬‬
‫}‪Queue Rank = MAX { Global Rank , Line Rank‬‬
‫בזמן המתנה בתור‪ :‬בכל ‪ 3‬דקות רצה פונקציה מתוזמנת בשרת ותפקידה הוא להגדיל‬
‫את ה ‪ Queue Rank‬של כל המשתמשים שממתינים בתור‪ .‬פונקציה זו נצרה על מנת‬
‫למנוע מצב של "הרעבת" משתמשים חדשים‪.‬‬
‫לאחר הכניסה למועדון‪ :‬לאחר שהמשתמש אושר על ידי הסלקטורית אין יותר חשיבות‬
‫לערך ה ‪ ,Queue Rank‬מה שהמערכת עושה היא מעדכנת את ערך ה ‪ Global Rank‬ואת‬
‫ערך ה ‪) Line Rank‬ביחס לאותו הליין( של המשתמש לטובת השימוש הבא שלו‬
‫באפליקציה‪.‬‬
‫‪Database‬‬
‫בפרויקט עבדנו עם ‪ Database‬מסוג ‪ MongoDB‬עשינו זאת בעזרת ה‪orginal design -‬‬
‫‪ (manufacturer ODM‬שנקרא ‪ Mongoose‬המאפשר לעבוד בצורה נוחה וקלה ב ‪ MongoDB‬עם‬
‫‪.Node.js‬‬
‫להלן שרטוט המכיל את מבנה הטבלאות‬
‫ב ‪ mongoDB‬הטבלאות נקראות קולקציות ולכן מעתה נשתמש במילה זו לתיאור טבלה )והקשר‬
‫ההיררכי בינהן(‪.‬‬
‫נפרט קצת כל כל אחת מהקולקציות שמופיעות בשרטוט למעלה‪:‬‬
‫‪USER collection‬‬
‫מכיל את כל המידע שאנו רוצים לשמור על המשתמש שכולל נתונים כללים על המשתמש )שם‪,‬‬
‫שם משפחה‪ ,‬מייל ‪ ,‬תאריך לידה‪ ,‬מין ‪ ,‬תמונה‪ ,‬טלפון ומידע נוסף מהפייסבוק ( לצד אובייקטים‬
‫מעניינים יותר שאותם נפרט כעת ‪.‬‬
‫‪‬‬
‫‪ – EventInfoHistory‬מערך אובייקטים זה מכיל מידע על כל היסטוריית הבילויים של‬
‫המשתמש באוביקט זה אנו שומרים מידע חשוב כמו מספרים מזהים‬
‫למועדון‪/‬ליין‪/‬אירוע‪/‬תור‪ ,‬תאריך וזמן שהמשתמש ביקש להיכנס למועדון‪ ,‬דגל בוליאני‬
‫שמורה האם המשתמש נכנס למסיבה באותו האירוע‪,‬תאריך וזמן בו הסלקטורית אישרה‬
‫את המשתמש והוא נכנס למועדון בפועל‪.‬‬
‫‪‬‬
‫‪ – Barcode‬מערך אובייקטים זה מכיל את הברקוד שהמשתמש קיבל באותו ערב‬
‫בכניסתו לאירועים השונים )וזאת על מנת שבמידה והמשתמש יצא החוצה הוא יוכל‬
‫לחזור בקלות למסיבה ע"י הצגת הברקוד( נציין כי ברקוד זה תקף לערב האירוע בלבד‬
‫ולאחר מכן הוא נמחק מה‪.DB -‬‬
‫‪‬‬
‫‪ – Verified‬מערך אובייקטים שמכיל את כל המקומות )על פי מספר מזהה( שבהם‬
‫המשתמש מאושר לא מאושר )מאושר הכוונה שהסלקטורית במועדון אימתה את גיל‬
‫האמיתי מול גילו בפייסבוק(‪.‬‬
‫‪‬‬
‫‪ – LineRank‬מערך אובייקטים המכיל רשימה של מקומות ואת הדירוג של המשתמש‬
‫במקומות אלו )הדירוג נקבע על פי היסטוריית הביקורים של המשתמש באותו ליין‬
‫ומשמש לדירוגו בתור(‪.‬‬
‫‪‬‬
‫‪ – QueueRank‬מערך אובייקטים המכיל רשימה של מקומות ושל התור ששייך להם‪,‬‬
‫שדה בוליאני בשם‪ Invited‬המציין אם המשתמש אישר את ההגעה דרך אחד‬
‫מהאיבנטים של הליין בפייסבוק )במידה וכן הוא מקבל על כך סוג של "בונוס" בדירוג(‪,‬‬
‫דירוג התור שנקבע על פי אלגוריתם ניהול התור שהוסבר קודם לכן‪.‬‬
‫‪‬‬
‫‪ – GlobalRank‬דירוג גלובאלי המייצג עבור כל משתמש את מדד השימוש שלו‬
‫באפליקציה‪.‬‬
‫‪‬‬
‫‪ – UserType‬שדה המתאר מאיזה סוג המשתמש )משתמש רגיל‪ ,‬בעלים ‪ ,‬יחצ"ן או‬
‫סלקטורית(‪.‬‬
‫‪PLACE collection‬‬
‫מכיל את כל המידע שאנו רוצים לשמור על מקום בילוי כלשהו )שם‪ ,‬כתובת ועיר‪ ,‬לוגו ‪ ,‬סוג‬
‫מקום הבילוי ומידע מהפייסבוק( נפרט כעת על השדות הפחות טריוואלים בקולציה זו‪.‬‬
‫‪‬‬
‫‪ – geo‬מכיל מערך של ‪ 2‬מספרים המייצגים ‪ longitude‬ו ‪ latitude‬שדה זה מאונדקס כ '‪.'d2‬‬
‫שדה זה מכיל את המיקום הגיאוגרפי של מקום הבילוי ומשמש לחישוב המרחק בין‬
‫המשתמשים לבין מקום הבילוי‪.‬‬
‫‪‬‬
‫‪ – Description‬שדה המשמש לתיאור מילוי )עד ‪ 5000‬תווים( של המקום‪.‬‬
‫‪‬‬
‫‪ – Owner‬מערך המכיל רשימה של המשתמשים שהם הבעלים של המקום‪.‬‬
‫‪ – Lines‬מערך המכיל את כל הליינים )ראה פירוט על הקולקציה ‪ Line‬מטה( שנפתחו‬
‫‪‬‬
‫עבור מקום בילוי זה‪.‬‬
‫‪LINE collection‬‬
‫מכיל את כל המידע שאנו רוצים לשמור ליין )שם ‪ ,‬תאריך יצירה‪ ,‬תמונה ( נפרט כעת על‬
‫השדות הנוספים בקולקציה‬
‫‪ – schedulingLine‬שדה בוליאני המשמש לציין האם הליין שנקבע הוא ליין מחזורי )ליין‬
‫‪‬‬
‫מחזורי זה ליין שמתקיים במועדון כלשהו בימים קבועים בכל שבוע( או שהליין הוא חד פעמי‪.‬‬
‫‪ – Days‬שדה זה הוא נכנס לשימוש במידה והליין הנוכחי הוא ליין מחזורי‪ ,‬שדה זה‬
‫‪‬‬
‫מכיל מערך של מספרים מ ‪ 0‬עד ‪ 6‬המייצגים את הימים הקבועים בהם הליין יתקיים )‪ – 0‬ראשון ‪,‬‬
‫‪ – 1‬שני ‪ – 2 ,‬שלישי וכך הלאה‪.(...‬‬
‫‪ – Days‬שדה זה הוא נכנס לשימוש במידה והליין הנוכחי הוא ליין מחזורי‪ ,‬שדה זה‬
‫‪‬‬
‫מכיל מערך של מספרים מ ‪ 0‬עד ‪ 6‬המייצגים את הימים הקבועים בהם הליין יתקיים )‪ – 0‬ראשון ‪,‬‬
‫‪ – 1‬שני ‪ – 2 ,‬שלישי וכך הלאה‪.(...‬‬
‫‪‬‬
‫‪ – IsActive‬שדה בוליאני המציין אם הליין עדיין פעיל‪.‬‬
‫‪ – LineDate‬שדה המציין את התאריך בו מתקיים הליין‪ ,‬שדה זה מאונדקס מכיוון‬
‫‪‬‬
‫שביצענו שאילתות רבות באפליקציה על ערך זה והאינדוקס חוסך המון זמן תקורה‪.‬‬
‫‪ – GenderProposition‬שדה המייצג את היחס בין המינים שדורש בעל הליין שעל ידו‬
‫‪‬‬
‫האלגוריתם יודע אם לתת עדיפות לבנים או לבנות בכניסה לתור‪.‬‬
‫‪ – MinAge Female/male‬שדה המייצג את הגיל המינימאלי עבור נשים‪/‬גברים עבור‬
‫‪‬‬
‫אותו הליין‪.‬‬
‫‪‬‬
‫‪ – Description‬שדה המשמש לתיאור מילוי )עד ‪ 5000‬תווים( של הליין‪.‬‬
‫‪‬‬
‫‪ – Promoters‬מערך המכיל את רשימת כל המשתמשים שהם יחצ"נים של הליין‪.‬‬
‫‪‬‬
‫ליין זה‪.‬‬
‫‪ – Events‬רשימת כל האיבנטים )ראה פירוט על הקולקציה ‪ Event‬מטה( שנפתחו עבור‬
‫‪ – Queues‬רשימת כל התורים )ראה פירוט על הקולקציה ‪ Queue‬מטה( שנפתחו‬
‫‪‬‬
‫עבור ליין זה‪.‬‬
‫‪:EVENT collection‬‬
‫מכיל את כל המידע שאנו רוצים לשמור עבור האיבנט מהפייסבוק של האירוע‪ .‬קולקציה זו מכילה‬
‫מידע בסיסי כמו שם האיבנט‪ ,‬תאריך יצירה‪ ,‬תמונה ומחיר כניסה לאירוע לצד מידע מורכב יותר‬
‫שנפרט עליו מטה‬
‫‪ – facebookEventId‬שדה זה מייצג את מספר המזהה של פייסבוק עבור האיבנט‬
‫‪‬‬
‫שיצרנו בפייסבוק )באמצעות מספר זה נוכל להוציא מידע חיוני מאוד על האירוע(‪.‬‬
‫‪‬‬
‫‪ – Description‬שדה המשמש לתיאור מילוי )עד ‪ 5000‬תווים( של האיבנט‪.‬‬
‫‪ .- eventStartDate‬שדה המציין את התאריך בו מתקיים האיבנט‪ ,‬שדה זה מאונדקס‬
‫‪‬‬
‫מכיוון שביצענו שאילתות רבות באפליקציה על ערך זה והאינדוקס חוסך המון זמן תקורה‪.‬‬
‫‪‬‬
‫‪ – eventStartTime‬שדה המכיל את השעה בא מתקיים האירוע‪.‬‬
‫‪‬‬
‫‪ – Invited‬מערך של המשתמשים שהוזמנו‬
‫‪‬‬
‫‪ – going‬מערך של המשתמשים שאישרו בפייסבוק את הגעת לאירוע‪.‬‬
‫‪:QUEUE collection‬‬
‫קולקציה זו מייצגת את כל המידע שאנו צריכים לשמור עבור ניהול של תור ספציפי וכוללת את‬
‫השדות הבאים‬
‫‪‬‬
‫‪ – eventDate‬תאריך האירוע בו מתנהל תור זה‪.‬‬
‫‪‬‬
‫‪ – IsActive‬שדה בוליאני המייצג אם באותו הרגע התור פעיל‪.‬‬
‫‪‬‬
‫‪ – Invited‬מערך המכיל את רשימת המשתמשים שאישרו את הגעתם בלפחות אחד‬
‫מהאיבנטים בפייסבוק המשוייכים לאירוע זה‪.‬‬
‫‪‬‬
‫‪ – waiting‬מערך של אובייקטים המכיל את כל המשתמשים הממתינים בתור ואת הזמן‬
‫המדויק בו כל אחד מהם ביקש להצטרף לתור‪.‬‬
‫‪‬‬
‫‪ - approved‬מערך של אובייקטים המכיל את כל המשתמשים שאושרו לכניסה על‬
‫ידי הסלקטורית אך טרם נכנסו ואת הזמן המדויק בו הם אושרו‪.‬‬
‫‪‬‬
‫‪ - accept‬מערך של אובייקטים המכיל את כל המשתמשים שנכנסו למועדון ואת הזמן‬
‫המדויק בו הם נכנסו‪.‬‬
‫‪‬‬
‫‪ - Rejected‬מערך של אובייקטים המכיל את כל המשתמשים שנדחו מהמועדון ואת‬
‫הזמן המדויק בו הם נדחו‪.‬‬
‫תוכניות עתידיות‬
‫‪‬‬
‫הרחבת המערכת ככלי לניהול יחצ"נים כך שהאפליקציה עצמה תהיה ככלי נלווה למוצר‬
‫וההכנסה העיקרית תהיה ממכירת המידע‪.‬‬
‫‪‬‬
‫‪ - BIG DATA‬הגדלת מסד הנתונים כך שיעבוד עם ‪ Cassandra DB‬על מנת להפיק יותר מידע‬
‫ממה שיש היום ולבצע אנליזות מתוחכמות‪.‬‬
‫‪‬‬
‫המלצות על בליינים מיחצנים ומבליינים אחרים שיעזרו להם להיכנס למועדונים‪.‬‬
‫‪‬‬
‫שביעות רצון של הבליינים‪.‬‬
‫‪‬‬
‫הרחבת האפליקציה לטובת מענה מגוון תורים )מסעדות ‪ ,‬אירועים ועוד‪(...‬‬
‫טכנולוגיות בהן השתמשנו‬
‫צד שרת‬
Node.js
Express framework o
NPM o
MongoDB
Mongoose ODM o
Restful API
Amazon web services




‫צד לקוח‬
HTML5
CSS3
Rachet o
Font awesome o
Javascript
AngularJS o
PhoneGap




‫אינטגרציה עם פייסבוק‬
Passport
Fbgraph
Facbook JS SDK
phoneGap facebook plugin




‫סביבת עבודה‬
Linux Ubuntu ‫מערכת הפעלה‬
Git – ‫ניהול גרסאות ועבודה בצוות‬
BitBucket ‫אחסון הקוד בענן מאובטח‬
IDE WebStorm 6



