Speed Date Final Presentation

1. Speed Date Final Presentation

2. הצוות • מציגים: • נועם שמואלי • אביעד יחזקאל • מנחה: • ויקטור קוליקוב

3. מבוא • כללי • Speed Date הינה שיטה להכיר אנשים בדרך מהירה. • הדבר נעשה באמצעות מפגש קצוב בזמן בו יכולים שני הצדדים ליזום ולנהל שיחה אחד עם השני. • בנוסף ליכולת ההתכתבות, קיימת גם יכולת ניהול השיחה כ-Video Conference. • קהל היעד • משתמשי הרשת החברתית Facebook. • (לאפליקציה יכולת גנרית להתאים את עצמה לרשתות חברתיות נוספות).

4. כלים טכנולוגיים (1) • סביבת פיתוח - Windows, Visual Studio 2008, .Net3.5. • ASP. Net - טכנולוגיה ליישומי אינטרנט בצד השרת, שפותחה על ידי חברת מיקרוסופט. באמצעות ASP.NET ניתן ליצור אתרי אינטרנט דינמיים בשילוב נתונים מבסיסי נתונים, ולטפל בטפסים ובמידע שנשלחים מהמשתמש.

5. כלים טכנולוגיים (2) • JavaScript– מאפשר מימוש Controls חדשים ובקשות HTTP(Get/Post)לטובת מימוש הצ'אט ויכולת הוידיאו. • ActiveX – טכנולוגיה המאפשרת גישה לחמרת המשתמש. • Facebook – שימוש ב-API של Facebook. • MSI – בניית קובץ התקנה. • Google SVN –Source Control .

6. דרישות האפליקציה (פרויקט א') • תקציר הדרישות • הצגת מידע כללי (סטטיסטיקות, אירועים, משתמשים פופולאריים). • שמירת נתוני המשתמש (הירשמות לאפליקציה, עדכון פרטים אישיים). • שמירת סטטיסטיקה אישית (מספר דייטים, דירוגים). • תמיכה בקונפיגורציות חיפוש שונות (נשמר כ-Cookie). • חיפוש משתמשים. • יציאה לדייט קצוב בזמן.

7. דרישות האפליקציה (1) (פרויקט ב') • תמיכה בוידיאו • למשתמש תהיה היכולת לנהל שיחת וידיאו עם משתמש אחר. • למשתמש תהיה היכולת לבטל את האפשרות של הצד השני לצפות בו (ע"י סגירת המצלמה דרך התכנה). • תמיכה ב-Error Handling – מקרים של שגיאות (לאחד המשתמשים אין מצלמת רשת מותקנת, אחד המשתמשים בוחר לסגור את המצלמה וכו'). • תמיכה ב-Security, המשתמש יוכל לאשר או לאשר התקנת ActiveX, דבר שיאפשר גישה למצלמת הרשת הביתית.

8. דרישות האפליקציה (2) (פרויקט ב') • חיבור ל-Facebook • המשתמש יוכל למצוא את האפליקציה בחיפוש אפליקציות Facebook. • המשתמש יוכל להירשם לאפליקציה דרך Facebok. • תמיכה ב-Security, המשתמש יוכל לתת או לא לתת הרשאות לאפליקציה לפרסם בעמוד הפרופיל שלו. • אירועים מיוחדים יפורסמו בעמוד הפרופיל של המשתמש (במידה ויאשר זאת).

9. מבט על Server Configuration Client Configuration צד ה-Server צד ה-Client Business Logic GUI Data Access Data Base Common Utilities

10. תאור השכבות • Data Base Layer– שכבת ה-DB המכילה את כל טבלאות הנתונים. • Data Access Layer- שכבת הקישור עם ה-DB. • Business Logic Layer – שכבת הלוגיקה, מחזיקה את האובייקטים האפליקטיביים הרלוונטיים לשרת. • GUI Layer - שכבה הנמצאת בצד ה-Client, המייצגת את ה-GUI.

11. Error Handling (למפתח) • Logger • המטרה – לאפשר לנו, המפתחים לפתור ביעילות בעיות אפשריות שעלולות להתעורר תוך כדי שימוש באפליקציה. • בכל מתודה עיקרית תתבצע כתיבה ללוג בעת הכניסה והיציאה. • תכתבנה פעולות מרכזיות. • במקרה של שגיאה, ייכתב מיקום השגיאה ופרטיה באופן מדויק.

12. תאור ה-Flow (1) • משתמש Facebook מחפש אפליקציה של Date-ים. • ברשימת התוצאות מופיעה התוצאה ‘Israel Speed Dating’ • עם הכניסה לאפליקציה, המשתמש יכול לאפשר או לא לאפשר הרשאות לאפליקציה (פרסום הודעות בדף הפרופיל). • המשתמש מבצע רישום לאפליקציה. • המשתמש מבצע חיפוש של משתמשים איתם ירצה לשוחח. • המשתמש יוזם שיחה עם משתמש אחר. • המשתמש השני מאשר את הבקשה.

13. תאור ה-Flow (2) • שני המשתמשים מקבלים התראה של – “Install activeX”. • המשתמשים מאשרים ותהליך ההתקנה מתבצע. • כל אחד מהמשתמשים מפעיל את מצלמת הרשת שלו דרך התכנה. • כל אחד מהמשתמשים לוחץ על כפתור המאפשר צפייה במשתמש השני.

14. וידיאו (1) • תאור • מורכב מכמה חלקים: • אובייקט ActiveX המאפשר גישה למצלמת הרשת הביתית של המשתמש. • צד ה-Server – צד בו מופעלת המצלמה. • צד ה-Client – הצד הצופה, המתחבר למצלמת הרשת הביתית בצד ה-Server. • Java Scripts – חיבור בין עולם ה-Web ל-ActiveX. • תפקיד • החלקים הנ"ל נועדו לאפשר את טכנולוגית הוידיאו ובכלל זה לאפשר גישה לחמרה של המשתמש (גישה למצלמת הרשת הביתית).

15. וידיאו (2) • Class Diagram

16. וידיאו (3) • ActiveX • תאור • מורכב מכמה חלקים: • Security Interface – מכיל את הגדרות האבטחה הדרושות על מנת שאובייקט ה- ActiveX ייחשב כבטוח – יוסבר בהמשך. • ActiveX Interface – מתן מזהה ייחודי ל- Interface זה (GUID) ומתן מזהה ייחודי לכל מתודה ממומשת. • פרוט המתודות: • RunServer – הפעלת המצלמה ומתן אפשרות לצפייה בה מרחוק. • RunClient – התחברות למצלמה של השותף לצ'אט. • SetMyIp – שמירת כתובת ה- IP של המשתמש. • SetPartnerIP – שמירת כתובת ה- IP של השותף לצ'אט. • ActiveX Class – מממש את שני ה- Interfaces הנ"ל וכמובן שממש את המתודות. • האובייקט הזה למעשה מאפשר תקשורת והתממשקות ל-DLL של הוידיאו.

17. וידיאו (4) ActiveX המשך • התקנה • בניית Setup אשר יוצר MSI המכיל את כל ה- DLL’s של הוידאו ואת ה- DLL של ה- ActiveX אשר משתמש בהם. • יצירת Script אשר מתקין את קובץ ה- MSI. • יצירת קובץ Inf אותו ה- Internet Explorer יודע "לקרוא" ובכך להקפיץ הודעה שעל המשתמש להתקין את ה- ActiveX. • אריזת כל הקבצים הנ"ל בתוך קובץ CAB. • יצירת אובייקט בדף ה- HTML עם ה- GUID הייחודי של ה- ActiveX ומיקום קובץ ה- CAB.

18. וידיאו (5) צד ה-Server - תאור המצלמה למעשה רצה ב-Server, במקרה שלנו ה-Server זהו המחשב בו מופעלת המצלמה. נוצר Thread אשר מאתחל את המצלמה ומחכה למשתמשים אשר יתחברו למצלמה.

19. וידיאו (6) • צד ה-Server-אובייקטים עיקריים CloseCameraForm - מייצגת את שכבת ה-UI של צד ה-Server, מריצה את המצלמה עצמה כ-Thread, וכמוכן מאפשרת למשתמש לסגור את המצלמה. CWebCamServer - מחלקה זו מייצגת את שכבת הלוגיקה של צד ה-Server. מאפשרת להריץ את המצלמה לפי כתובת ה-IP השמורה במחלקה. ברגע שהמצלמה מופעלת, היא מוכנה לשרת משתמשים אשר מתחברים למצלמה, ולשלוח להם Frame-ים, כאשר כל Frame הינו תמונה. שליחת מספר גדול של Frame-ים נותנת למשתמש תחושה של וידיאו. Capture - מחלקה זו אחראית ללכוד את התמונה הנוכחית שהמצלמה מצלמת ולהחזירה כתמונת Bitmap. כאמור, גישה רצופה ותדירה נותנת למשתמש תחושה של וידיאו. ספריית Direct Show זהו Open Source שהורדנו והשתמשנו בו. התוצר של ה-Open Source הוא dll המספק API נוח לעבודה מול המצלמה.

20. וידיאו (7) • צד ה-Client -תאור זהו צד ה-Client, הצד שמקבל את שידורי המצלמה. נוצר Thread אשר מתחבר למצלמה מרוחקת ומקבל Frame-ים.

21. וידיאו (8) • צד ה-Client–אובייקטים עיקריים VideoForm - מחלקה זו מייצגת את שכבת ה-UI של צד ה-Client, מריצה Thread המתחבר למצלמה מרוחקת. המשתמש רואה תמונה ממצלמה מרוחקת, התמונה מתעדכנת בתדירות מאוד גבוהה, מה שמקנה למשתמש תחושה של וידיאו. CWebCamClient - מחלקה זו מייצגת את שכבת הלוגיקה של צד ה-Client. מחלקה זו מאפשרת להתחבר למצלמה מרוחקת באמצעות כתובת IP ו-Port. באמצעות הגישה, מתקבלים Frame-ים רצופים. שכבת ה-UI פונה לשכבת הלוגיקה ומבקשת ממנה Frame-ים, הפניה מתבצעת בצורה רציפה ותדירה. שכבת ה-UI מחליפה את התמונה המוצגת למשתמש, באמצעות כך המשתמש מקבל תחושה של אנימציה, תחושה של וידיאו.

22. וידיאו (9) • Java Scripts • תאור • התקשורת בין האובייקטים ה-Web-ים לבין אובייקט ה-ActiveX מתבצעת באמצעות Java Scripts. • פירוט התפקידים העיקריים • קבלת רפרנס לאובייקט ה-ActiveX. • אתחול המצלמה והבאתה למצב שמוכנה לשרת משתמשים. • האזנה למצלמה מרוחקת.

23. וידיאו (10) • חיבור לעולם ה-Web • תאור • כאמור הוידיאו מתחבר ל-Web באמצעות אובייקט ה-ActiveX. • בעת תחילת צ'אט, מתבצעת בדיקה האם אובייקט ה-ActiveX מותקן במחשב המשתמש. • במידה והבדיקה מחזירה שלא מותקן, המשתמש מקבל התראה שעליו להתקין Speed Date Video Pluginוהוא מתחיל בתהליך ההתקנה. • במידה והבדיקה מחזירה שמותקן, לא קופצת שום התראה והמשתמש ממשיך בעבודה השוטפת שלו. • ChatRoom - מכיל את אובייקט ה-ActiveX, וכמוכן מאפשר למשתמש להפעיל את המצלמה של עצמו ולהתחבר למצלמה המרוחקת. • CDBChat - נותן את האפשרות לקבל את כתובת ה-IP של המשתמש השני (מולו מתבצעת השיחה)

24. Facebook (1) תאור בפרויקט הקודם, האפליקציה רצה כ-Stand Alone. ע"י כניסה ישירה לכתובת השרת, היה ניתן להשתמש באפליקציה. בפרויקט זה נוצר חיבור בין האפליקציה לבין Facebook, כלומר מעתה לא ניתן להשתמש באפליקציה כ-Stand Alone, אלא להשתמש בה כ-Facebook Application.

25. Facebook (2) • Class Diagram

26. Facebook (3) התשתית • התשתית נועדה לספק מעטפת מעל Facebook, בכדי לסייע לנו להשתמש • ב-API של Facebook בצורה נוחה. • FBManager - זוהי מחלקה עם Design Patterns של Singleton. • ה-Singleton הוא עבור כל משתמש המתחבר לאפליקציה ומאפשרת: • גישה לאובייקט ה-Singleton. • ביצוע תהליך Login ל-Facebook. • בדיקה האם המשתמש נתן הרשאות לאפליקציה • פרסום הודעות בפרופיל המשתמש

27. Facebook (4) שימוש ב-API • מתבצע שימוש ב - "Facebook Tool Kit 3.0". • החבילה הזו מכילה API (תוצר של DLL) לעבודה מול Facebook, • וכמוכן דוגמאות הממחישות כיצד לעבוד עם ה-API. • השימוש מתבצע באמצעות ה-InterfaceהבאIFrameCanvasSession : • זהו Interface המוגדר לכל התחברות של משתמש, מאפשר לנו לבצע: • פעולת התחברות ל-Facebook. • לקבל API אשר באמצעותו אפשר לוודא האם המשתמש נתן לאפליקציה הרשאות. • לקבל API אשר באמצעותו אפשר יהיה לפרסם הודעות בפרופיל המשתמש

28. Facebook (5) שימוש בתשתית • תאור המחלקות המשתמשות בתשתית ה-Facebook וצורך השימוש. • Default - זהו הדף הראשון שנטען בעת עליית האפליקציה, לדף הזה שני תפקידים חשובים: • לטפל ב-Login ל-Facebook. • לבדוק האם המשתמש העניק הרשאות לאפליקציה, ואם לא להפנות אותו ללינק בו ייתן את ההרשאות המתאימות. • CDBChat – זוהי המחלקה המנהלת את כל הדייטים, כל פעילות שהמשתמש מבצע, הקשורה לדייטים, תפורסם בדף הפרופיל שלו.

29. תאור בעיה מרכזית (1) • תאור הבעיה • בחלק ממערכות ההפעלה וגרסאות מסויימות של Internet Explorer, לאחר התקנת ה- ActiveX לא ניתן לפנות למתודות ולמאפיינים שלו באמצעות Java Script מחלון ה- Web. • מיקוד הבעיה וניסיון לפתרון • השוואת Registry Keys בין המחשבים שבהם הבעיה קיימת לבין המחשבים בהם הכל עובד כשורה. • קידוד ActiveX פשוט (“Hello World”) ללא ה- DLL’s של הוידאו ובדיקה. • MSDN. • Google (הרבה)

30. תאור בעיה מרכזית(2) • צורת הפתרון • יצירת Interface עם מתודות אותן נממש. מתן ID ספציפי לכל מתודה ו- GUID ספציפי ל- Interface. בצורה זו יצרנו מזהה ייחודי לכל מתודה. ה- ActiveX הוא Classשמממש Interfaceזה. • יצירת Security Interface אשר ה- ActiveXיממש גם אותו. כאן בעצם אנו מגדירים את הגדרות האבטחה הנדרשות של אובייקט ה- ActiveX כפי שמוסבר ב- MSDN ועל ידי כך האובייקט ייחשב כבטוח ב- Internet Explorer ויוצג כראוי. • רישום ה- ActiveX בזמן ההתקנה כ- Com Device ועל ידי כך מתן הרשאות לגישה אל האובייקט והמתודות שלו. • יצירת קובץ Inf אשר בזמן התקנת ה- ActiveX הוא מזהה האם כבר מותקן והאם מותקנת גרסה ישנה יותר.

31. מבט להמשך • נפלה בחלקנו הזכות לעשות פרויקט המשך בו מימשנו חלק מרעיונות הפרויקט הקודם: • תמיכה בוידיאו צ'אט (Web-Cam) • חיבור ל-Facebook. • כמו כן יש עוד כמה רעיונות שניתנים ליישום, אשר ישדרגו את האפליקציה (בשקף הבא)

32. מבט להמשך – רעיונות • מתן אפשרות שליחת הודעות למשתמשים לא מחוברים • פורום • צ'אט בעיצוב מיוחד - רקע הצ'אט לפי "מיקום" הדייט • Popup blocker • קרדיטים ודירוגים שונים – תקציב • יצירת Calendar אשר יכיל את רשימת הדייטים בעבר\הווה\עתיד • ממשק מייל – קבלת התראות למייל • תמיכה בשפות – אנגלית / עברית / רוסית

33. מה למדנו? • המון... • Design נכון - כחלק מפרויקט המשך, קצרנו את פירות הפרויקט הראשון. • שימוש ב-ActiveX. • MSI - בניית התקנה. • שימוש ב-API של Facebook. • הרחבת יכולות של מוצר קיים.

34. שאלות...