איך תשימו את האפליקציות שלכם על המפה - ברשת - הארץ
ניצוצות ברשת

איך תשימו את האפליקציות שלכם על המפה

מבוא קצר ל-Geolocation, אחד התחומים החמים ביותר ברשת בימינו. וגם קצת קוד, למי שרוצה להתחיל לעזור למשתמשים שלו להתמצא במרחב

שתפו כתבה במיילשליחת הכתבה באימייל
יונית רושו

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

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

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

כיצד יכולה האפשרות הזו להוסיף לאתר או לאפליקציה שלך?

• גולשים יכולים לשתף חברים שלהם במיקום שלהם ברשתות חברתיות.

• פרסומות שמופיעות באתר יכולות להיות מבוססות מקום ורלוונטיות בגלל המיקום של הגולש.

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

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

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

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

• אתרי דרושים יכולים להציג מודעות דרושים על פי מיקום אוטומטי

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

הכלים המובנים של html5

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

אחד השינויים שהתרחשו הוא שכיום אין הפרדה בין הספסיפיקציות, אוסף ההגדרות והחוקים, של html5 לבין מודלים של התקשרות עם כלים וממשקים. נוצרו מספר כלים פנימיים, built in בתוך הספסיפיקציות האלו, כדי לייעל את הדפדפן ולמזער שימוש בכלים חיצוניים. במילים אחרות, כדי לייעל את הדפדפן וכדי ליצור אחידות בין המכשירים השונים: מובייל, טאבלטים, מחשבים, נוצרה בעצם שפת התקשרות אחידה בקוד.

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

כיצד geolocation בעצם עובד?

אחד הכלים החשובים והמשמעותיים ביותר הוא ה-geolocation API (ממשק התכנות). זה אינו כלי מובנה אלא רכיב מקושר. כיצד הוא עובד? ה- geolocation הוא אוסף של חוקים והגדרות שמאפשרים לדפדפן לדעת היכן נמצא הגולש מבחינת קווי רוחב ואורך גיאוגרפיים, בהתאם ליכולות של הדפדפן לספק מידע זה ובהתאם להסכמת הגולש לחשוף נתונים אלו.

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

רוב השימוש ב- geolocation מיועד למובייל, וזה כמובן מאוד הגיוני. יש לקחת בחשבון שבמובייל השימוש ב–GPS יכול לצרוך סוללה, ובנוסף אסור לפגוע בפרטיות הגולש ולכן יש לקחת נתונים אלו בחשבון וחשוב לשאול את הגולש אם הוא מסכים לכך.

להלן בקשת הרשות בדפדפנים פיירפוקס וכרום:

beta.dublinbikes2go.com

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

האם זה מסובך?

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

קוד, בבקשה
ניכנס מעט לעומק. צור עמוד html5 ומקם ב- body תגית מכולה עבור המפה. בטעינת המסמך, קרא לפונקציה שבודקת תאימות ותמיכה ב- geolocation:

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

את הקוד המלא תוכלו לראות כאן. שימו לב שבאפשרותכם לצפות במצב לוויין, במצב roadmap ובמצב hybrid. קיימים עוד מצבים וזה בהחלט כיף לשחק עם האופציות.

מתעדכן בכל עת?

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

ומה עכשיו?

באותו האופן שאני עבדתי עם google maps, ניתן גם להתממשק למפות של bing ולשירותים נוספים.

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

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

זכרו שדפדפנים ישנים אינם תומכים בכך עדיין. בדוק אם לקהל שלך יש אפשרות לראות את geolocation עובד.

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

אתם מוזמנים להמשיך ולפנות אליי עם קישורים לאתרים שלכם: yonit.haaretz@gmail.com

לחצו לטורים קודמים בסדרה

תגובות

הזינו שם שיוצג כמחבר התגובה
בשליחת תגובה זו הנני מצהיר שהינני מסכים/ה עם תנאי השימוש של אתר הארץ