[درس] تحديد الأماكن بواسطة HTML5 Geolocation

كنت قد كتبت هذا الموضوع منذ فترة و قلت أشارككم به للإفادة

اليوم سنتكلم عن Geolocation وهي تكنولوجيا تحديد الأماكن , حيث كان تحديد الأماكن من قبل حكرا على أجهزة ال GPS فقط , و بعض المحاولات المتواضعه من تكنولوجيا الويب حيث يتم تحديد المكان على حسب رقم IP إلا إنه كان دائما غير دقيق لإعتمادة على قواعد بيانات غير كامله بالإضافة إلى تغير IP’s بإستمرار
http://netcode.me/tutorials/html5/ge...tions/logo.jpg
إلى أن ظهرت Google Gears و التى أحدثت ثورة فى تحديد الأماكن بواسطة عدة طرق مثل ال GPS و IP ليحقق أكبر قدر ممكن من الدقة و لكن عيب Google Gears أنها غير قياسية لابد إضافتها للمتصفح لكي تعمل مثل الفلاش و السيلفر لايت و هكذا، لذلك دعت الحاجه لوجود معايير قياسية لتحديد الأماكن خاصة مع ثورة الموبايلات و أجهزة الميني كومبيوتر و غيرها ولهذا تم ضم تحديد الأماكن إلى مواصفاتHTML5.

آلية تحديد الأماكن بواسطة HTML5 :-

يتم إستخدام عدة طرق لمعرفة و تحديد الأماكن بواسطة HTML5 لضمان أكبر قدر من الدقة فى تحديد المكان :-

إستخدام جهاز ال GPS : يمكن ل HTML5 الولوج لجهاز ال GPS و قراءة بيانات المكان منه
تحديد البعد عن إشارة الشبكة سواء كانت Wifi أو بلوتوث
تحديد المكان بواسطة من خلال شبكات ال GSM/CDMA
تحديد المكان بواسطة IP


طرق تحديد المكان فى HTML5 :-

فى البداية يجب أن نقوم بالكشف لمعرفة هل المتصفح يدعم هذه التقنية أم لا

المصتفحات التي تدعمها حتى لحظة كتابة التدوينة

http://netcode.me/tutorials/html5/ge...er-support.jpg

كود:

---

if ( navigator.geolocation ) {
 
//the browser support geolocation
 
navigator.geolocation.getCurrentPosition(showMap,showError);
 
} else {
 
//the browser don't support it
 
showError('Your Browser Don\'t Support Geolocation');
 
}

---

حيث نقوم بالكشف عن الكائن Goelocation داخل الكائن Navigator إذا موجود نقوم بتحديد المكان و إذا كان غير موجود نظهر خطأ للزائر بعدم الدعم

نقوم بإستدعاء الدالة getCurrentPosition وهي المسئولة عن إظهار مكان الزائر

و تأخذ ثلاث معاملات أولهم إسم الدالة التى سيتم إستدعائها عند النجاح فى تحديد المكان و يتم تمرير المكان إليها و المعامل الثاني إسم الدالة التى سيتم إستدعائها عند الفشل فى تحديد المكان و يتم تمرير الخطأ إلى الدالة أما المعامل الثالث فهو للخيارات المتاحة

هناك ثلاث إختيارات متاحة لهذه الدالة

enableHighAccuracy : وعند إسناد القيمة true لها سنخبر المتصفح أن يستخدم أكبر قدر ممكن من الدقة و لكن هذا الإختيار لايعمل دائما إلا فى الأجهزة الحديثة وقد يأخذ وقتا أكثر فى الرد لذلك يفضل إسناد القيمة false وهي القيمة الإفتراضية له

maximumAge : وهو خاص بإستدعاء النسخة المخزنة محليا على الجهاز cache – سيتم شرحها لاحقا

timeout : وهو أقصى وقت ليحاول فيه معرفة المكان قبل العودة بخطأ فشل فى تحديد المكان و يتم تحديده بالميلي ثانية

مثال للدالة التي سيتم إستدعائها عند النجاح :-

كود:

---


function showMap(position){
 
alert(position.coords.latitude);
 
alert(position.coords.longitude);
 
}

---

هنا قمنا بكتابة الدالة التي سيتم إستدعائها مع النجاح فى تحديد المكان و يتم تمرير الكائن Position و هو يحتوي على :-

coords.latitude : و هو إحداثيات المكان ( دائرة العرض )

coords.longitude : وهو إحداثيات المكان ( خط الطول )

coords.altitude : و هو إرتفاع المكان عن سطح الأرض و تعود هذه القيمة فى حالة فقط إذا كان الجهاز به جهاز GPS مدمج

coords.accuracy : ويعود بنسبة الدقة فى تحديد المكان ( خط الطول و دائرة العرض ) – بالمتر

coords.altitudeAccuracy : و يعود بنسبة الدقة فى تحديد الإرتفاع عن سطح الأرض – بالمتر

coords.heading : ويعود بعدد الدرجات بالنسبة للشمال الحقيقي

coords.speed : وهي سرعة تحرك الجهاز و يتم حسابها بالنسبة للأماكن السابقة التي تم حسابها

timestamp : وهو الوقت التي تم فيه حساب المكان و يعود بصيغة ال Unix Timestamp ( عدد الثواني من تاريخ 1 – 1 -1970 )

ولكن هذه الخصائص لا تعود كلها فى كل الحالات على حسب نوع الجهاز و إمكانياته و لكن هناك 3 خصائص لابد أن يعودوا مع دالة تحديد المكان و هم coords.latitude و coords.longitude و coords.accuracy

و عند الخطأ يتم إستدعاء الدالة و تمرير كود الخطأ

كود:

---

function showError(Err){
 
    if ( typeof ( Err ) == 'string' ) {
        alert(Err);
    } else {
        switch ( Err.code ) {
            case 1:
                alert('Permission Denied');
                break;
            case 2:
                alert('Position Unavailable');
                break;
            case 2:
                alert('TimeOut');
                break;
        }
    }
}

---

و هناك ثلاث أنواع من الأخطاء يتم توليدها و تمريرها لدالة الخطأ :-

PERMISSION_DENIED : و الكود الخاص به (1) و يتولد هذا الخطأ حين يرفض المستخدم الإفصاح عن مكانه

POSITION_UNAVAILABLE : و الكود الخاص به (2) و يتولد عند وجود خطأ فى تحديد المكان أو أن المكان مجهول

TIMEOUT : و الكود الخاص به (3) ويتولد عند إستنفاذ الوقت المحدد لجلب المكان

تحديد المكان و عملية التخزين المؤقت Cache :-

من أفضل العمليات التي يجب عملها فى التطبيقات الكبيرة دعم التخزين المؤقت (Cache ) و يمكنك إستدعاء نسخة المخزنة و عدم حساب المكان مرة أخرى تخفيفا لتطبيقك و زيادة لسرعة تنفيذه

و يمكنك عمل هذا كالآتي

كود:

---

navigator.geolocation.getCurrentPosition(showMap , showError,{maximumAge:60000});

---

حيث أن ال maximumAge هوالزمن الأقصى لإستدعاء النسخة المخزنة و تأخذ القيمة بالميلي ثانية بمعنى أنه إذا قمت مثلا بإستدعاء المكان و بعدها بأقل من دقيقة ( Maximum Age = 60000 ms = 60 minutes ) قمت بإستدعاء المكان مرة أخرى سيقوم بجلب النسخة المخزنة لأنها مازالت فى نظاق ال Maximum Age أما إذا إستدعيتها بعد مرور الدقيقة سيقوم بحساب المكان الحالي و هكذا

يمكننا إستخدام المعامل Infinity لإجبار المتصفح دائما على إستدعاء النسخة المخزنة ( Cached version )
متابعة المكان :-

الدالة السابقة تقوم بجلب المكان لمرة واحدة فقط أما إذا كنت تريد متابعة مكان الزائر إذا كان الزائر يتحرك فى عربة مثلا يمكنك إستخدام دالة أخرى و هي

كود:

---

var watchHandler = navigator.geolocation.watchPosition(scrollMap,showError);

---

و هي تأخذ نفس المعاملات السابقة و لكن تقوم بإرجاع مقبض للمتابعة و يتم إستدعاء الدالة scrollMap كلما تغير المكان

و لإيقاف الدالة السابقة ( متابعة المكان )

كود:

---

navigator.geolocation.clearWatch(watchHandler);

---

الخصوصية و الأمان فى تحديد الأماكن:-

تحديد مكان المستخدم تعتبر من أكثر الأشياء خصوصية للمستخدم لذلك دعت الحاجه لوجود قواعد صارمة حتى لا يتم إستخدام التقنية إٍستخدام خاطئ فعند إستخدام أي المواقع أو التطبيقات لتقنية تحديد الأماكن فى HTML5 لا يستطيع الموقع أو التطبيق الولوج لأي معلومات عن مكان المستخدم دون إذنه

http://netcode.me/tutorials/html5/ge...ns/privacy.jpg

مثال عملي:-

سنقوم بعمل مثال لإستخدام دوال تحديد المكان HTML5 Geolocation مع دوال Google Maps

فى البداية سنقوم بعمل صفحة ال HTML5

كود:

---

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 Tutorials - Geolocation Api</title>
<link rel="stylesheet" type="text/css" href="geo.css" />
<script type="text/javascript" src="geo.js"></script>
</head>
<body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<article>
<h1>دوال تحديد المكان فى HTML 5 </h1>
<div id="map"></div>
</article>
</body>
</html>

---

قمنا بعمل ملف مكتوب بصيغة HTML5 و وضعنا به Div لإظهار الخريطة بها و قمنا بتضمين ملف ال javascript لكتابة برنامجنا و قمنا بتضمين مكتبة Google Maps حتى يتسنى لنا إستخدام دوالها

فى ملف الجافا سكريبت

كود:

---


function showMap(position){
 
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
 
var infowindow = new google.maps.InfoWindow({
content: "<div>مكانك هنا </div>"
});
 
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"مكانك هنا"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
 
}
function showError(Err){
console.log(arguments);
if ( typeof ( Err ) == 'string' ) {
alert(Err);
} else {
switch ( Err.code ) {
case 1:
alert('Permission Denied');
break;
case 2:
alert('Position Unavailable');
break;
case 2:
alert('TimeOut');
break;
}
}
}
 
//init the geolocation api
if ( navigator.geolocation ) {
navigator.geolocation.getCurrentPosition(showMap,showError);
} else {
showError('Your Browser Doesn\'t Support Geolocation');
}

---

و هنا قمنا بتعريف دالتان showMap وهي الدالة التي سينتقل عندها التنفيذ عند النجاح فى تحديد الموقع و الدالة showError و هي التي سيتم إستدعائها عند حدوث خطأ

و فى الدالة showMap قمنا بتجهيز خريطة و وضع إحداثياتها نفس إحداثيات مكان الزائر

كود:

---


var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), myOptions);

---

ثم قمنا بوضع علامة على المكان بالضبط و رسالة تظهر للزائر عند الضغط على العلامه

كود:

---

var infowindow = new google.maps.InfoWindow({
content: "<div>مكانك هنا </div>"
});
 
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"مكانك هنا"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});var infowindow = new google.maps.InfoWindow({
content: "<div>مكانك هنا </div>"
});
 
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"مكانك هنا"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

---

ثم قمنا بإستدعاء الدالة getCurrentPosition السابق شرحها لتحديد المكان و تمريره للدالة showMap و عند تشغيل تطبيقنا يتم إظهار مكان الزائر على الخريطة و وضع علامه على موقعه

الجوالات و تكنولوجيا تحديد الأماكن

http://netcode.me/tutorials/html5/ge...cation-mob.jpg

بالنسبة للجوالات فليس كلها تدعم HTML5 فحتى الآن الذى يدعم HTML5 هو IPhone من خلال الممتصفح سفاري و Android من خلال متصفح Google Chrome أما بقية الجوالات فلها طرقها الخاصة فى التعامل مع Geolocation Api مثل ال Black Berry لذلك ظهرت أحد المكتبات المفتوحة المصدر لتحل هذه المشكلة وهي مكتبة geolocation.js وهي تستخدم عدة طرق معا على حسب الجهاز مثل w3c html5 geolocation و Google Gears و Phones Geolocation Apis و هذه المكتبة تدعم حتى الآن تحديد الأماكن للمنصات التالية :-

iOS
Android
Blackberry OS
Browsers with Google Gears support (Android, Windows Mobile)
Nokia Web Run-Time (Nokia N97,…)
webOS Application Platform (Palm Pre)
Torch Mobile Iris Browser
Mozilla Geode

أخيرا و ليس آخرا ال HTML5 Geolocation من أدق الوسائل لتحديد المكان حيث تعتمد على عدة مصادر كما ذكرنا من قبل بالإضافة إلى دعمها من قبل ال Super Phones مثل ال IPhones , Android

منتظر أسئلتكم و تجاربكم مع HTML5 Geolocation

هل يوجد أي يشخص لديه أسئلة ؟؟ أم لم يقرأ الدرس أي شخص ؟ ولم يهتم به أحد ؟ :)

عن جد يعطيك الف عافية رغم الموضوع قديم ولكن استفادت منه كثير

السكربت يحتاج الى مفتاح تسجيل من قوقل ماب .؟

يعطيك الف عافية الموضوع جاري التجريب