النتائج 1 إلى 5 من 5

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

  1. #1

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



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

    اليوم سنتكلم عن Geolocation وهي تكنولوجيا تحديد الأماكن , حيث كان تحديد الأماكن من قبل حكرا على أجهزة ال GPS فقط , و بعض المحاولات المتواضعه من تكنولوجيا الويب حيث يتم تحديد المكان على حسب رقم IP إلا إنه كان دائما غير دقيق لإعتمادة على قواعد بيانات غير كامله بالإضافة إلى تغير IP’s بإستمرار

    إلى أن ظهرت Google Gears و التى أحدثت ثورة فى تحديد الأماكن بواسطة عدة طرق مثل ال GPS و IP ليحقق أكبر قدر ممكن من الدقة و لكن عيب Google Gears أنها غير قياسية لابد إضافتها للمتصفح لكي تعمل مثل الفلاش و السيلفر لايت و هكذا، لذلك دعت الحاجه لوجود معايير قياسية لتحديد الأماكن خاصة مع ثورة الموبايلات و أجهزة الميني كومبيوتر و غيرها ولهذا تم ضم تحديد الأماكن إلى مواصفاتHTML5.

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

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

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


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

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

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



    كود:
    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 لا يستطيع الموقع أو التطبيق الولوج لأي معلومات عن مكان المستخدم دون إذنه



    مثال عملي:-

    سنقوم بعمل مثال لإستخدام دوال تحديد المكان 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 و عند تشغيل تطبيقنا يتم إظهار مكان الزائر على الخريطة و وضع علامه على موقعه

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




    بالنسبة للجوالات فليس كلها تدعم 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





    __________________
    Protect your Website
    From Hackers, Malware and Unwanted guests
    http://shieldfy.com


  2. #2


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





    __________________
    Protect your Website
    From Hackers, Malware and Unwanted guests
    http://shieldfy.com

  3. #3
    عضو نشيط
    تاريخ التسجيل
    Aug 2007
    المشاركات
    72


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






  4. #4


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





    __________________
    سبحان الله بحمده :: سبحان الله العظيم
    سبحان الله بحمده :: سبحان الله العظيم
    سبحان الله بحمده :: سبحان الله العظيم

  5. #5


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





    __________________
    موقع موبايلات https://www.mobileheadlines.net/
    الايميلyoussefsky17@hotmail.fr





ضوابط المشاركة

  • لا تستطيع إضافة مواضيع جديدة
  • لا تستطيع الرد على المواضيع
  • لا تستطيع إرفاق ملفات
  • لا تستطيع تعديل مشاركاتك
  •  

أضف موقعك هنا| اخبار السيارات | حراج | شقق للايجار في الكويت | بيوت للبيع في الكويت | دليل الكويت العقاري | مقروء | شركة كشف تسربات المياه | شركة عزل اسطح بالرياض | عزل فوم بالرياض| عزل اسطح بالرياض | كشف تسربات المياة بالرياض | شركة عزل اسطح بالرياض