1

דו"ח מסכם

מגישים:

עלאא חורי

נדב ממאן

אגבאריהרביע

פאדי חורי

משה זיפר פרופ': מנחה אקדמי

2

עניינים תוכן

3 ............................................................................................. האפליקציה סקירת

3 ....................................................................................................................................... האפליקציה תיאור

3 ....................................................................................................................................... האפליקציה מטרת

3 ....................................................................................................................... באפליקציה השימוש תרחישי

3 ............................................................................................................................ באפליקציה השימוש אופן

5 .................................................................................. באפליקציה שיושמו תכונות

5 ....................................................................................................................................................... שרת צד

5 ...................................................................................................................................................... לקוח צד

6 ......................................................................................... המערכת ארכיטקטורת

6 ....................................................................................................................................................... שרת צד

10 .................................................................................................................................................... לקוח צד

20 ............................................................................................................................................ נתונים בסיסי

22 ........................................................................................................................... שרת-לקוח אינטראקציית

23 .............................................................................................................. עיצוב

23 ................................................................................................................................. (IU) משתמש ממשק

27 .................................................................................................. פיתוח שיקולי

27 ................................................................................................................................... שרת-צד טכנולוגיות

28 ................................................................................................................................... לקוח-צד טכנולוגיות

28 ..................................................................................................................... הסרטונים והגשת אחסון אופן

29 .............................................................. לעתיד ושיפורים שנלמדו לקחים, מסקנות

30 .................................................................................................... ביבליוגרפיה

3

סקירת האפליקציה

תיאור האפליקציה“VideoLoca” המאפשרת למשתמש לצפות , הינה אפליקציית שיתוף סרטוני וידאו מבוססת מיקום

כן לצלם סרטונים ולשתפם עם משתמשים הנמצאים -בסרטונים שצולמו בסביבתו הקרובה וכמו .בסביבה בה צולמו הסרטונים

על מנת , תמשהאפליקציה משתמשת ביכולות המיקום של המכשיר הנייד עבור זיהוי מיקומו של המשלהציג לו סרטונים שצולמו באמצעות האפליקציה בסביבתו הקרובה וכן כדי לזהות את המיקום בו

.אותו במיקום זה" לנעוץ"צולם סרטון ו

מטרת האפליקציה

:האפליקציה באה לתת מענה לנושאים הבאים

לחפש לא נותנות למשתמש את האפשרות ', לדוג YOUTUBEפלטפורמות שיתוף מדיה כמו ● פ מיקום"סרטונים ע

מתן יכולת למשתמש לצפות בסרטוני וידאו הרלוונטיים למיקומו הנוכחי ●

שיתוף של סרטון ברדיוס גיאוגרפי מוגבל ● הטמעת סרטונים במיקומים מסוימים על מנת להעשיר אותם בשכבת מידע נוספת

תרחישי השימוש באפליקציה

בסביבתו הקרובה ומעוניין לצפות בסרטונים המשתמש שומע על אירוע שהתרחש או מתרחש ● .מהאירוע ולראות היכן האירוע במידה והוא מעוניין להגיע למקום

המשתמש צילם סרטון שרלוונטי רק למיקום בו צולם ומעוניין לשתף אותו רק עם מי שנמצא ● .בסביבת מיקום זה

רמזים והנחיות ניתן להשאיר סרטונים עם –" חפש את המטמון"שימוש במשחקים בסגנון ● .בתחנות המשחק

סרטוני הסבר וסקירה של –הוספת שכבת אינפורמציה וירטואלית במקומות תיירותיים ● .המיקום בו המשתמש נמצא כעת

פרסומות לעסקים ושירותים בסביבה –הצגת פרסומות וידאו הרלוונטיות למיקום המשתמש ● .הקרובה

אופן השימוש באפליקציה

.יה באמצעות חשבון הפייסבוק שלוהמשתמש נכנס לאפליקצ ●

המשתמש מגיע למסך הראשי של האפליקציה המציג מפה של סביבתו של המשתמש עם ● .י המשתמש"סרטוני הווידאו שצולמו ברדיוס הניתן להגדרה ע

.המשתמש יכול ללחוץ על סימוני הסרטונים על מנת לצפות בהם ●

וסיף לו תגובות ולצפות בפרופיל לה, בעת צפייה בסרטון המשתמש יכול לדרג את הסרטון ● .האישי של המשתמש שהעלה את הסרטון

האפליקציה , ידי לחיצה על כפתור הצילום הקבוע בתחתית המסך הראשי של האפליקציה-על ● . שניות 15עוברת למצב צילום וידאו באורך של

אותו להוסיף לו תיאור ולהעלות , המשתמש יכול לסקור את הסרטון, לאחר צילום סרטון ● .למפה

4

5

תכונות שיושמו באפליקציה

צד שרת

על מנת לעודד משתמשים להעלות סרטונים מעניינים ואיכותיים השרת מנהל דירוג של ●הסרטונים וכל פרק זמן מבצע סינון לסרטונים ומשאיר במערכת רק את אלו שיש להם דירוג

.גבוהה

.השרת תומך בשליחת התראות בזמן אמת ●

.הצפיות של כל סרטוןמעקב אחרי מספר ●

צד לקוח

: פרטים אישיים בסיסיים, פרופיל אישי לכל משתמש המציג את תמונת פרופיל הפיסבוק שלו ● .וכן את הסרטונים שצילם, תאריך לידה ותיאור קצר, מין

.אפשרות דירוג והוספת תגובות לסרטונים ●

.שניות 15צילום סרטונים קצרים באורך של ●

(.מ"ק 15-ל 1בין )אפשרות להגדרת רדיוס הסרטונים המוצגים ●

.ניגון אוטומטי וניגון ברצף –הגדרת אופן הצגת הסרטונים ●

מ' כדי להוריד את הצפיפות במפה.50( הסרטונים ברדיוס Clusteringהתקבצות ) ●

6

ארכיטקטורת המערכת

צד שרת

Server.js: ,המחלקה הראשית של השרת שמנהלת את כל הבקשות אשר מתקבלות מצד הלקוח ומחלקת אותם למחלקות המתאימות כדי לטפל בהם בהתאם.

User.js: המחלקה המטפלת בכל סוגי הבקשות הקשורות לעדכון/שליפת נתונים שקשורה ללקוח מסוים, שזה כולל את קיום המשתמש בעת בקשת התחברות.

S3Service.js המחלקה המטפלת בבקשות אשר קשורות לשירותי :Amazon S3 וגם, היא מחזיקה , את הלוגיקה הקשורה לשירות זה.

CoreAPI.js המחלקה האחראית על הלוגיקה הכללית של האפליקציה, כגון, הבקשה האחראית : על טעינת הסרטונים ברדיוס מסוים על המפה.

VideoOperations.jsשל המשתמש עם ות הקשורות לאינטראקציה: המחלקה המטפלת בבקש וכו'(. like, comment, views count) סרטון מסוים.

7

user.js

connect()

הפונקציה הזו מטפלת בסוג הבקשות הנשלחות מהאפליקציות לשרת ברגע התחברות המשתמש, היא בודקת את קיום המשתמש במערכת, אם קיים אז מחזירה לו את כל הנתונים הקשורים למשתמש

הזה כדי להציג אותם בהתאם, ואם לא אז היא שולפת כמה נתונים על המשתמש הזה מפרופיל מת אותו במערכת.הפייסבוק שלו ורוש

getUserProfileDataFromDB(pUserId)

הפונקציה הזו נקראת כאשר המשתמש נכנס לפרופיל שלו או לפרופיל של משתמש אחר, היא מקבלת ומחזירה רשימת כל הסרטונים השייכים למשתמש הזה כדי להציג של המשתמש הזה, user idאת ה

אותם בפרופיל.המכילים נתונים על jsonsזירה את הסרטונים אלא את רשימת הערה: )הפונקציה הזו לא מח

הסרטונים האלו(.

updateProfileInfo()

הפונקציה הזו נקראת כשהמשתמש מעדכן את הפרופיל שלו, היא מקבלת את הנתונים המעודכנים , ומחזירה תשובה למשתמש אם העדכון התבצע בהצלחה או לא.databaseושומרת אותם ב

getProfileAboutInfo()

birthday, gender, aboutהפונקציה הזו מחזירה את נתוני הפרופיל של משתמש מסוים, נתונים כמו וכו'.

coreAPI.js

loadLikesAndComments(pVideoID)

.databaseשל סרטון מסוים מה likesו commentsהפונקציה הזו אחראית על שליפת כל ה סרטון במפה האפליקציה שולחת בקשת טעינת לנתונים הקשורים ברגע שהמשתמש לוחץ על איזשהו

לסרטון הזה מהשרת, ולכן הפונקציה הזו היא מי שמטפלת בבקשות מהסוג הזה. .likesוהשנייה של ה comments, הראשונה ה jsonsמחזירה שתי רשימות של

addNewVideoDataInDB(pUploadVideoJson)

ואז אם הועלה Amazonב S3 למפה, הסרטון הזה עולה לאחרי שהמשתמש מעלה סרטון חדש

המכיל את כל הנתונים הקשורים לסרטון הזה Jsonـבהצלחה אז האפליקציה ישירות שולחת לשרת , ולכן database( כדי לעדכן אותם ב ’וכו Amazon )כמו מי העלה את הסרטון, הקישור שלו ל

הזה.הפונקציה הזו היא אחראית על בקשות מהסוג

getVideosByLocationAndRadius(xCoordinate,yCoordinate)

קמ"ש מהנקודה הנתונה. 15הפונקציה הזו מחזירה את רשימת כל הסרטונים ברדיוס של עד ברגע שהמשתמש התחבר בהצלחה, האפליקציה שולחת בקשת קבלת רשימת סרטונים כדי להציג

ה הזו בשרת ומחזירה למשתמש את מה שצריך.אותם על המפה, ולכן הבקשה הזו מגיעה לפונקצי

8

s3Service.js

deleteVideoFromS3(pVideoId)

.S3וגם למחוק אותו מה databaseהפונקציה הזו אחראית על מחיקת סרטון מסוים מה

deleteVideoFromS3InTimeOut()

יל את ההעלאה.בזמן שהמשתמש רוצה להעלות את הסרטון הוא מדווח לשרת על זה לפני שהוא מתחהשרת נותן למשתמש פרק זמן מסוים עד שיסיים את ההעלאה ויחזור אליו בתשובה כדי שהשרת יוכל

.Databaseל (S3להוסיף את נתוני הסרטון )כולל קישור לסרטון ב ואם לא חזר אז השרת מוחק את הסרטון משירותי האמזון )אם קיים(, ובכך מונע מצב שקיימים

.Databaseאין להם מצביע ב ש S3סרטונים ב

videoOperations.js

like()

בהתאם. databaseה של סרטון מסוים ומעדכנת את likeהפונקציה הזו מטפלת בבקשות ה

removeLike()

של משתמש מסוים עבור סרטון likeכלומר היא מוריד remove likeהפונקציה הזו מטפלת בבקשות בהתאם. databaseמסוים, ומעדכנת את ה

comment() .databaseעל סרטון מסוים ומעדכנת את ה commentהפונקציה הזו מטפלת בבקשות ה

removeComment()

, כלומר אם משתמש מסוים רוצה למחוק את ה remove commentהפונקציה הזו מטפלת בבקשות ה comment הרלוונטים מה שלו עבור סרטון מסוים, הפונקציה הזו נקראת ומוחקת את הנתוניםdatabase .בהתאם

addViewsNumber(pVideoId)

של idמקבלת את ה הפונקציה הזו נקראת כל פעם שמשתמש מסוים צופה באיזשהו סרטון על המפה, .databaseב 1הסרטון ומעלה את מספר הצופים של הסרטון הזה ב

9

המנגנון הזה מיועד לקבלת עדכונים כמוview count / likes / comments .בזמן אמת כלומר, בכל עת שחל עדכונים על אחד הסרטונים, כל המשתמשים שצופים באותו סרטון באותו

רגע, יקבלו את העדכון באופן מידי.

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

10

צד לקוח

( היא תבנית עיצוב בהנדסת תוכנה המשמשת MVP)בקיצור Model–View–Presenterתבנית להפשטת יישום כלשהו. התבנית מתארת טכניקה לחלוקת היישום לשלושה חלקים, מודל, מבט

ובקר, המחוברים ביניהם בצימוד רפוי מונחה אירועים.

- Model ודל הוא הממשק שמגדיר בתוכו את הנתונים שהאפליקציה הולכת להציג : המ (.UIבממשק המשתמש )

- View ,מכיל שתי חבילות המכילות שני סוגי אלמנטים :Activity ו- Fragment שני , ( באפליקציה.UIאלמנטים האלו מהווים את ממשק המשתמש )

- Presenter הוא הצד הלוגי של כל :viewם או האירועים מה, מקבל את הנתוני-view מעבד .view, הוא מחזיר תשובה ל UI -אותם ובעת הצורך לעדכון ה

11

Object Diagram

( מייצגת Model, View, Presenterבשרטוט הזה מתואר העיצוב הכללי של האפליקציה, כל שלישיה ) .MVPאת המימוש של תבנית העיצוב

12

Login:

אחראי על רישום או התחברות המשתמש לאפליקציה. Login-מסך ה presenter-ההרשמה לאפליקציה נעשית ע"י שירותי פייסבוק, אחרי הלחיצה על כפתור ההתחברות, ה

ייחודי של המשתמש IDאת בקשת ההתחברות. פונה לשירותי פייסבוק ומקבל view-מקבל מה-מתנהג בהתאם ומעדכן את ה presenter-ושולח בקשת התחברות לשרת. בעת קבלת התשובה, ה

view.

LoginActivity:

onLoginButton הפונקציה הזו מופעלת כאשר המשתמש לוחץ על כפתור ההתחברות. היא : בקשת התחברות. presenter-מבקשת מה

openMapActivityהפונקציה נקראת ע"י ה :-presenter היא מעבירה את המשתמש למסך . המפה באפליקציה.

showLoginErrorDialogהפונקציה נקראת ע"י ה :-presenter היא מציגה הודעת שגיאה בעת . שגיאת התחברות.

LoginPresenter:

onLoginRequestהפונקציה נקראת ע"י ה :-view היא מבצעת את תהליך ההתחברות מול . השרת.

onLoginSucessקוראת מקבלים תשובה חיובית מהשרת, ו : הפונקציה הזו מופעלת כאשר .view-לפונקציה המתאימה ב

onLoginFailedמקבלים תשובה שלילית מהשרת, וקוראת : הפונקציה הזו מופעלת כאשר .view-לפונקציה המתאימה ב

13

Map:

הוא המסך המרכזי באפליקציה. אפשר לגשת דרכו למסך ההגדרות, לפרופיל האישי Map-מסך ה . ווידאוולפתיחת המצלמה לצילום קטעי

שנמצאים ווידאו במסך זה מופיעה המפה שעל גביה מופעים עליה הסימנים איפה קיימים קטעי לצפיה. ווידאובסביבה הקרובה למשתמש. בלחיצה על אחד הסימנים, יפתח קטע ה

MapActivity:

onCameraButton הפונקציה הזו מופעלת כאשר המשתמש לוחץ על כפתור המצלמה, היא : על בקשת המשתמש כדי שיטפל בה בהתאם. presenter-מדווחת לה

onSettingsButton הפונקציה הזו מופעלת כאשר המשתמש לוחץ על כפתור ההגדרות, היא : על בקשת המשתמש כדי שיטפל בה בהתאם. presenter-מדווחת לה

onProfileButton ,הפונקציה הזו מופעלת כאשר המשתמש לוחץ על כפתור הפרופיל האישי : על בקשת המשתמש כדי שיטפל בה בהתאם. presenter-לה היא מדווחת

onMarkerIcon הפונקציה הזו מופעלת כאשר המשתמש לוחץ על אחד הסימנים שמופיעים על : על בקשת המשתמש כדי שיטפל בה בהתאם. presenter-המפה, היא מדווחת לה

openCameraהפונקציה נקראת ע"י ה :-presenter היא פותחת את .fragment .המצלמה

openSettingsהפונקציה נקראת ע"י ה :-presenterהיא פותחת את ה .-activity .של ההגדרות

openProfileהפונקציה נקראת ע"י ה :-presenterהיא פותחת את ה .-activity .של המצלמה

openVideoFragmentהפונקציה נקראת ע"י ה :-presenter היא פותחת .fragment הווידאו לטעינתו ולצפיה בו.

openVideoListFragmentהפונקציה נקראת ע"י ה :-presenter היא פותחת .fragment הווידאו לטעינתו ולצפיה בו, ובנוסף היא גם טועת רשימת קטעי הווידאו שנמצאים במרחק ממש

קרוב אחד לשני.

addVideoMarkerהפונקציה נקראת ע"י ה :-presenter ווידאו על המפה., היא מוסיפה סימן

addListMarkerהפונקציה נקראת ע"י ה :-presenter היא מוסיפה סימן של רשימת קטעי , ווידאו על המפה שקרובים אחד לשני.

MapPresenter:

onCameraOpenהפונקציה נקראת ע"י ה :-view ,מבקשת את ההרשאות לפתיחת המצלמה , לפתוח את המצלמה. view-ומבקשת מה

14

onSettingsOpenהפונקציה נקראת ע"י ה :-viewטוענת את ההגדרות השמורות, ומבקשת מה ,-view .לפתוח את מסך ההגדרות

onProfileOpenהפונקציה נקראת ע"י ה :-viewטוענת את הפרטים האישים, ומבקשת מה ,-view .לפתוח את הפרופיל האישי

onMarkerIconהפונקציה נקראת ע"י ה :-viewשקשורים לווידוא, ומבקשת , טוענת כל נתונים של הווידוא תוך כדי העברת הנתונים המתאימים. fragmentלפתוח את view-מה

onVideoReceive הפונקציה נקראת כאשר מקבלים תשובות או עדכונים מהשרת, ומעדכנת :בהתאם. בעת קבלת רשימת סרטונים מהשרת, הפונקציה מעבדת את הנתונים לפני view-את ה

(.clustering, העיבוד כולל פעולת התקבצות )view-דכנת את השהיא מע

Hierarchical greedy clustering algorithm: אלגוריתם ההתקבצות שהשתמשנו בו הוא כדלקמן:

בודקים אם הוא יכול להשתייך לאחת הקבוצות הקיימות )כלומר הוא רחוק בפחות vלכל סרטון מ' מנציג הקבוצה(:50מ

o נקודה מקבוצת הנקודות הנתונה.נקח איזושהי o .נמצא כל הנקודות השכנים ברדיוס מסוים מהנקודה שבחרנו o .נייצר קבוצת נקודות חדשה עם כל השכנים שמצאנו o .נקח נקודה חדשה מקבוצת הנקודות המקורית כך שאינה באחת הקבוצות שייצרנו o המקורית.נחזור על אותם השלבים שוב ושוב עד שלא יישאר לנו נקודות בקבוצה

ובך, במקומות צפופים אנחנו מציגים קבוצות )רשימה( של סרטונים.

Settings:

.הוא מסך האחראי על הגדרות האפליקציה Settings-מסך ה

SettingsActivity:

onLogoutButton הפונקציה הזו מופעלת כאשר המשתמש לוחץ על כפתור ההתנתקות, היא : על בקשת המשתמש כדי שיטפל בה בהתאם. presenter-מדווחת לה

onRaduisChange הפונקציה הזו מופעלת כאשר המשתמש משנה את הרדיוס, היא מדווחת : על שינוי הרדיוס. presenter-לה

onAutoplayCheckedהפונקציה הזו מופעלת כאשר המשתמש משנה את המצב של כפתור ה :-Autoplay videoוהיא מדווחת לה ,-presenter .על שינוי המצב

15

onAutoplayListChecked הפונקציה הזו מופעלת כאשר המשתמש משנה את המצב של כפתור : על שינוי המצב. presenter-, והיא מדווחת להAutoplay list-ה

SettingsPresenter:

logoutRequestהפונקציה מוחקת את ה :-session של המשתמש מתוך המכשיר. סוגרת את ה-session התחברות הפיסבוק. של

changeRadius הפונקציה מעדכנת באפליקציה את הרדיוס המבוקש, ובעת שליחת בקשות : לשרת, רדיוס זה נשלח עם הבקשות.

changeAutoplayState פונקציה זו משנה את מצב ניגון הסרטונים, האם להתחיל ניגון : אוטומטי אחרי טעינת הסרטון או להשאיר אותה לבחירת המשתמש.

changeAutoplayListState פונקציה זו משנה את מצב ניגון רשימת הסרטונים, האם לנגן את : רשימת הסרטונים ברצף אוטומטי או להשאיר את הבחירה למשתמש שידפדף ביניהם.

Profile:

מציג את הפרופיל האישי של כל משתמש, כל הנתונים עליו, ובנוסף כל הסרטונים Profile-מסך ה שהעלה.

ProfileActivity:

onEditProfileButton ,הפונקציה הזו מופעלת כאשר המשתמש לוחץ על כפתור ההתנתקות : על בקשת המשתמש כדי שיטפל בה בהתאם. presenter-היא מדווחת לה

openEditProfileActivityהפונקציה נקראת ע"י ה :-presenter, היא פותחת את מסך עריכת הפרופיל האישי.

fillVideosListהפונקציה נקראת ע"י ה :-presenter היא מקבלת את רשימת הסרטונים , ששייכים למשתמש, ומציגה אותם ברשימה.

ProfilePresenter:

openEditProfileRequestהפונקציה נקראת ע"י ה :-view ,טוענת את הפרטים האישים , לפתוח את מסך עריכת הפרופיל האישי. view-ומבקשת מה

onUserVideosListReceive הפונקציה נקראת כאשר מקבלים עדכונים מהשרת, ומעדכנת את : בהתאם. view-ה

16

EditProfile:

הוא מסך המאפשר לכל משתמש לערוך הפרופיל האישי שלו. EditProfile-מסך ה

EditProfileActivity :

onSaveButton כפתור שמירת הנתונים, היא : הפונקציה הזו מופעלת כאשר המשתמש לוחץ על על בקשת המשתמש כדי שיטפל בה בהתאם. presenter-מדווחת לה

EditProfilePresenter:

saveInfoהפונקציה נקראת ע"י ה :-view.שומרת את השינויים והעדכונים בפרופיל האישי ,

Camera:

הוא מסך המצלמה הממנו מצלמים את הסרטונים. Camera-מסך ה

CameraActivity

onCaptureButton הפונקציה הזו מופעלת כאשר המשתמש לוחץ על כפתור ההקלטה, היא : על בקשת המשתמש כדי שיטפל בה בהתאם. presenter-מדווחת לה

openUploadActivityהפונקציה נקראת ע"י ה :-presenter היא פותחת את מסך העלאת , הווידאו לשרת אחרי סיום ההקלטה.

CameraPresenter

saveVideoהפונקציה נקראת ע"י ה :-view ,אחרי סיום ההקלטה, היא שומרת את הסרטון , על הצלחת השמירה. view-בזיכרון הפנימי של המכשיר ומדווחת ל

17

Upload:

הוא המסך שרואים את הסטון שצלמנו, ומפה אפשר להעלות אותו לשרת ולשתף upload-מסך ה אותו.

UploadActivity

onUploadButton הפונקציה הזו מופעלת כאשר המשתמש לוחץ על כפתור ההקלטה, היא : על בקשת המשתמש כדי שיטפל בה בהתאם. presenter-מדווחת לה

backToMapActivityהפונקציה נקראת ע"י ה :-presenterהיא סוגרת את מסך ה ,-upload ומחזירה את המשתמש למסך המפה.

UploadPresenter

uploadVideoהפונקציה נקראת ע"י ה :-viewהיא מעלה את הסרטון שהוקלט ל ,- Amazon s3 , בזמן סיום. view-ומדווחת ל

Video:

מסך זה נפתח כאשר המשתמש לוחץ על אחד הסימנים על המפה )סימן שמראה קיומו של סרטון

בסביבה(. במסך זה רואים את הסרטון.

VideoFragment:

onLikeButtonהפונקציה הזו מופעלת כאשר המשתמש לוחץ על כפתור ה :-like היא מדווחת , על בקשת המשתמש כדי שיטפל בה בהתאם. presenter-לה

onCommentButtonהפונקציה הזו מופעלת כאשר המשתמש לוחץ על כפתור ה :-comment , אם.על בקשת המשתמש כדי שיטפל בה בהת presenter-היא מדווחת לה

onUserProfileClick הפונקציה הזו מופעלת כאשר המשתמש לוחץ על תמונת הפרופיל של :על בקשת המשתמש כדי שיטפל בה presenter-המשתמש שהעלה את הסרטון, היא מדווחת לה

בהתאם.

likeVideoהפונקציה נקראת ע"י ה :-presenterהיא מעדכמת את ה ,-view .בהתאם

18

openCommentFragment :הפונקציה נקראת ע"י ה-presenter.פותחת את מסך התגובות ,

openProfileFragmentהפונקציה נקראת ע"י ה :-presenter פותחת את מסך הפרופיל של , המשתמש שהעלה את הסרטון.

VideoPresenter:

onVideoLikeהפונקציה נקראת ע"י ה :-view היא מעדכנת את השרת על פעולת המשתמש ,(like/unlike.)

onVideoCommentהפונקציה נקראת ע"י ה :-view טוענת את התגובות שקיימות, וחוזרת עם , .view-הנתונים ל

onProfileOpenהפונקציה נקראת ע"י ה :-view טוענת את הפרופיל האישי של המשתמש , . view-הנבחר, וחוזרת עם הנתונים ל

onNewVideoInfoReceiveים עדכונים מהשרת, ומעדכנת את : הפונקציה נקראת כאשר מקבל ,תגובות או הצפיות השתנה(.likes-בהתאם, )כגון, מספר ה view-ה

VideoList:

מסך זה נפתח כאשר המשתמש לוחץ על אחד הסימנים על המפה )סימן שמראה קיומם של סרטים מ', בסביבה הקרובה(. במסך זה רואים את הסרטון. 50שקרובים אחד לשני, עד מרחק

VideoListFragment:

onVideoClick ,הפונקציה הזו מופעלת כאשר המשתמש בוחר סרטון מתוך רשימת הסרטונים : על בקשת המשתמש כדי שיטפל בה בהתאם presenter-היא מדווחת לה

openVideoFragmentהפונקציה נקראת ע"י ה :-presenter.פותחת את הסרטון הנבחר ,

VideoListPrensenter:

openVideoהפונקציה נקראת ע"י ה :-view טוענת את הסרטון הנבחר, וחוזרת עם הנתונים , .view-לה

19

Comments:

במסך זה ניתן להוסיף )או למחוק( תגובות עבור הסרטון הנצפה.

CommentsFragment:

onSendButton הפונקציה הזו מופעלת כאשר המשתמש לוחץ על כפתור שליחת התגובה : על בקשת המשתמש כדי שיטפל בה בהתאם. presenter-החדשה, היא מדווחת לה

addCommentהפונקציה נקראת ע"י ה :-presenterהיא מוסיפה תגובה חדשה על הסרטון בה ,-view.

CommentsPresenter:

newCommentהפונקציה נקראת ע"י ה :-view מקבלת את התגובה, ומעדכנת אותה בשרת , בעת הצלחה. view-ומעדכנת את ה

onNewCommentReceive הפונקציה נקראת כאשר מקבלים תגובות חדשות על סרטון : בהתאם. view-שאנחנו צופים בו, ומעדכנת את ה

20

בסיסי נתונים

פירוט כללי לטבלאות

: usersטבלת משתמש.טבלה זו מכילה רשימת המשתמשים שנרשמו לאפליקציה. היא מאחסנת את הנתונים על כל

( שהוא ערך ייחודי לכל משתמש Primary Key) userID -מפרידים בין המשתמשים באמצעות שדה ה ששולפים אותו מהפיסבוק ברגע ההרשמה הראשונה לאפליקציה.

:videosטבלת טבלה זו מכילה רשימה של כל הסרטונים שהועלו לאפליקציה. מפרידים בין הסרטונים באמצעות

( שהוא ערך ייחודי שמופק אוטומטית בעת הוספת סרטון חדש Primary Key) videoID -שדה ה לטבלה.

:likesטבלת likes-שבוצעו על כל הסרטונים במערכת. מפרידים בין ה likes-טבלה זו מכילה רשימת כל ה

חדש like( שהוא ערך ייחודי שמופק אוטומטית בעת הוספת Primary Key) likeID-באמצעות שדה ה לטבלה.

:commentsלת טבטבלה זו מכילה רשימת כל התגובות שהוספו לכל הסרטונים במערכת. מפרידים בין התגובות

( שהוא ערך ייחודי שמופק אוטומטית בעת הוספת Primary Key) commentID-באמצעות שדה ה תגובה חדשה לטבלה.

21

פירוט הקשרים בין הטבלאות

1) Videos -> Users של המשתמש שהעלה את הסרטון באפליקציה, ולכן userIDמכילה את ה Videosטבלת ה

ומחפשים לפי ה Usersברגע שרוצים לשלוף מידע על המשתמש הזה אנחנו ניגשים לטבלת ה userID .ומקבלים את כל המידע עליו

כי יכול להיות שיש כמה סרטונים ששייכים לאותו המשתמש, אבל M -> 1הקשר כאן הוא להיות מצב שאותו סרטון שייך לכמה משתמשים.לא יכול

2) Likes -> Videos

.likeשל הסרטון שבוצע עליו ה videoIDמכילה את ה Likesטבלת ה בוצעו עליו, אז מחפשים בטבלת ה likesולכן בעת טעינת סרטון מסוים וכדי לדעת איזה

Likes לפי הvideoID. לאותו הסרטון אבל לא יכול להיות שאותו likes כי יכול להיות הרבה M -> 1הקשר כאן הוא

לכמה סרטונים. likeה

3) Likes -> Users עבור סרטון מסוים. likeשל המשתמש שביצע את ה userIDמכילה את ה Likesטבלת ה

ששייכים לאותו המשתמש, אבל likesכי יכול להיות שקיימים הרבה M -> 1הקשר כאן הוא שייך לשני משתמשים. like לא יכול להיות שאותו ה

4) Comments -> Videos

של הסרטון שאליו שייכת התגובה. videoIDמכילה את ה Commentsטבלת ה -ולכן בעת טעינת סרטון מסוים וכדי לדעת איזה תגובות הוספו אליו, אז מחפשים בטבלת ה

Comments לפי הvideoID. כי יכול להיות הרבה תגובות לאותו הסרטון אבל לא יכול להיות M -> 1הקשר כאן הוא

שאותה תגובה שייכת לשני סרטונים שונים.

5) Comments -> Users של המשתמש שהגיב על סרטון מסוים. userIDמכילה את ה Commentsטבלת ה

ל להיות כי יכול להיות שמשתמש מסוים הגיב לכמה סרטונים אבל לא יכו M -> 1הקשר כאן הוא מצב שאותה התגובה שייכת לכמה משתמשים.

22

שרת-אינטראקציית לקוח

. מנגנון זהlistenersמומש מנגנון client-בצד ה

Observer Designמממש את תבנית הצופה )Pattern.)

, היא תבנית עיצוב שבה אובייקט הייחוס תבנית צופהמחזיק רשימה של אובייקטים מקושרים אליו אשר

כל אחד מהם נקרא צופה לגביו. אובייקט הייחוס "מודיע" לצופים עליו בעת צורך, בדרך כלל על ידי

קריאה לאחת מהפונקציות שלהם.

השתמשנו במנגנון זה כך שכל מסך באפליקציה שמקבל נתונים מהשרת או מתעדכן בזמן אמת, הוא

שהיא בתורה מעבירה את כל Clientנרשם למחלקת מקבלת את כל העדכונים ממנו.הבקשות לשרת ו

ואז, בזמן שמקבלים תשובות או עדכונים מהשרת, )הצופים( views-מעדכנת את כל ה Clientמחלקת

שנרשמו אליה בזמן אתחולם.

23

עיצוב

(UI)ממשק משתמש

24

25

26

27

שיקולי פיתוח

שרת-צד טכנולוגיות

Node.js והיה האחרונות בשנים מאוד התרחב בה שהשימוש( 2009) יחסית חדשה שפה היא -צד שפות פ"ע אותה העדפנו לכן, הפרויקט דרך ועדכניות חדשות טכנולוגיות ללמוד חשוב לנו

.יותר מבוססות שהן פ"אע PHP, JAVA, Python כגון יותר וותיקות אחרות שרת

ש מכיוון-Node.js ספריות מובנה באופן כוללת Web ,קוד בשורות בסיסי שרת ליצור ניתן .וכבדה ייעודית שרת בתכנת צורך ללא, ספורות

ו מהירות-Scalability :Node.js לה שמאפשר מה, ואסינכרונית אירועים מונחית שפה היא ללא יחיד בתהליך, Non-Blocking, מהיר באופן, רשת בבקשות ובפרט, I/O בבקשות לטפל ללא במקביל חיבורים אלפי לנהל יכול השרת ולכן, חדש חיבור כל עבור נפרד רד'בת צורך

.המערכת על עומס יצירת

ב שימוש-WebSockets :גבי על כיוונית-דו תקשורת לבצע המאפשר תקשורת פרוטוקול זהו לאחר) השני לצד מידע לשלוח יכול צד כל ובו ההתקשרות אורך לכל פתוח שנשאר בודד חיבור

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

, Socket.IO בספריית השתמשנו זה בפרויקט. HTTP-ב שימוש מצריכה ואינה( התעבורה-בזמן תקשורת ומאפשרת פלטפורמות של קב במספר התומכת ומהירה פופולרית ספרייה

.ללקוח נוטיפקציות דחיפת השאר בין ומאפשרת WebSockets באמצעות מתא

מעניינים נתונים כמה עוד: הם. שלהם המערכת עדכון במסגרתNode.js -ל Java-מ לעבור החליטה Paypal חברת

החלקים אחד – המשתמשים של החשבון מצב להצגת האחראית התכנית עם להתחיל החליטו מקבילים פיתוח צוותי שני הקצו הם סיכונים למזער מנת-ועל באתרת יותר העמוסים צוות. ישתבש שמשהו למקרה Java-ב פיתוח וצוות Node.js-ב פיתוח צוות – למשימה את החל השני והצוות מתכנתים 5 ומנה ינואר בחודש עבודתו את החל Java-ב הפיתוח הצוותים שני, יוני בחודש. בלבד מתכנתים 2 ומנה, במרץ, יותר מאוחר חודשיים עבודתו

:כי והתברר עבודתם את סיימו מספר עם Java-ה מאפליקציית כפולה כמעט במהירות נבנתה Node.JS-ה אפליקציית .1

.בחצי קטן מפתחים .Java לעומת קוד שורות פחות 33% מנתה התכנית .2 .40%-ב קטן היה הנדרש הקבצים מספר .3

:היו והתוצאות התכניות לשתי ביצועים מבחני עשתה החברה, כן-כמו

לעומת לשנייה בקשות של כפול במספר לטפל הצליחה Node.js-ב שנכתבה התכנית .1 Java.-ב שנכתבה התכנית

(.יותר מהיר 200ms) 35%-ב קטן היה הממוצע התגובה זמן .2 .קישור בביבליוגרפיה( – PayPal של הפיתוח מבלוג נלקחו הנתונים)

גדולות מערכות עבור Node.js-ב לפיתוח שעברו PayPal-מ חוץ נוספים בולטים שמות :הם ומורכבות

Netflix, LinkedIn, Uber, Pinterest, Yahoo!, New York Times ועוד.

28

לקוח-צד טכנולוגיות

FacebookSDK:השתמשנו בשירותי פייסבוק כי : .לא או קיים המשתמש אם הווידוי עניין כל לנו חוסך ובזה, המשתמש כיום מבטיח .1, תמונה) האישי הפרופיל את לבנות כדי משתמש כל של הבסיסים הנתונים על הסתמכנו .2

'(.וכו, שם

MapboxSDK :בשירותי השתמשנו Mapbox כי: (.גוגל מפות לעומת) גדולים משאבים יצטרכו שלא קלים מפות שירותי חיפשנו .1 . כרצוננו אותם ולעצב לערוך ניתן .2

הסרטונים והגשת אחסון אופן :הסרטונים והגשת העלאת, אחסון עבור אפשרויות מספר בין התלבטנו

.הסרטונים ואחסון הנתונים ניהול עבור יחיד בשרת שימוש .1 .השרת דרך מהאפליקציה אליו הסרטונים והעברת חיצוני אחסון בשירות שימוש .2 .בשרת בלבד קישורים ושמירת הסרטונים עבור חיצוני אחסון בשירות שימוש .3

על מעמיסות היו הסרטונים של וההורדה ההעלאה שפעולות מהסיבה פסלנו הראשונה האפשרות את .הלקוחות עם השוטפת בתקשורת ופוגעות I/O מבחינת מאוד השרת

בקוד אמזון של AWS לשירות הרשאות לשלב רצינו שלא מכיוון עלתה השנייה האופציה ההעלאת שתהליך לוודא וכדי, תוקפים י"ע השירות של לרעה ניצול שיאפשר מה, האפליקציה

או באפליקציה כשל של במקרה במערכת עקביות חוסר למנוע כדי השרת י"ע מפוקח יהיה הסרטונים את פסלנו שבגינה הסיבה מאותה היא גם נפסלה זו אפשרות. הסרטון העלאת בזמן בתקשורת .הראשונה האפשרות

בטיחותית בדרך הרשאות ומתן לניהול אפשרויות שישנן גילינו, AWS של בתיעוד" חפירה" לאחר כך, השלישית האפשרות את לממש החלטנו ולכן בקוד Credentials-ה של שילוב מחייבת שאינה

את ויאחסן הפעולה על יפקח רק והשרת אמזון של S3-מ ישירות הסרטונים את ויוריד יעלה שהלקוח .הנתונים-במסד לסרטון הקישור

קבצים של ותעבורה אחסון עבור וזול יעיל, גמיש שהוא מכיוון אמזון S3 בשירות להשתמש בחרנו .בעבר בכלל AWS-וב זה בשירות שהתנסינו מכיוון כן-וכמו גדולים

29

לקחים שנלמדו ושיפורים לעתיד, מסקנות

30

ביבליוגרפיה

SocketIO.היא ספריית התקשורת שהשתמשנו בה להתחברות בין השרת והלקוח : http://socket.io/docs

Android developersאתר האנדרואיד הרשמי שנעזרנו בו לאורך כל הפיתוח : https://developer.android.com/guide/index.html

Mapboxשהשתמשנו בהם. : שירות המפות https://www.mapbox.com/android-sdk

Hierarchical greedy clustering.זה אלגוריתם ההתקבצות שממשנו אותו : https://www.mapbox.com/blog/supercluster

Paypal site :.נעזרנו בו לצרכי שיקולי פיתוח https://www.paypal-engineering.com/2013/11/22/node-js-at-paypal

ן.תבניות עיצוב שהשתמשנו בה https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter

https://en.wikipedia.org/wiki/Observer_pattern