برمجة الأندرويد

Google Maps بالعربية – الدرس الأول

[mhc_section admin_label=”section”][mhc_row admin_label=”row”][mhc_column type=”1_4″][mhc_image admin_label=”صورة” src=”http://hendiware.16mb.com/wp-content/uploads/2016/08/gm.png” show_in_lightbox=”off” url_new_window=”off” animation=”off” hoverfx=”none” sticky=”off” image_mask=”off” border_radius=”0″ align=”right” force_center_on_mobile=”on”] [/mhc_image][mhc_text admin_label=”نص” saved_tabs=”all” shared_module=”8537″ background_layout=”light” text_orientation=”right”]
الدرس الأول

ابدأ مع Google Map

[/mhc_text][/mhc_column][mhc_column type=”3_4″][mhc_post_header admin_label=”عنوان المقالة” title=”on” meta=”off” avatar=”on” author=”on” date=”on” categories=”on” comments=”off” views=”off” text_orientation=”right” text_color=”dark” featured_image=”on” featured_placement=”above” parallax=”on” parallax_method=”off” animation=”off” custom_paddings=”40″ size=”30px” title_bold=”on” text_shadow=”off” text_background=”off” text_bg_color=”#ffffff” overlay=”on”] [/mhc_post_header][mhc_text admin_label=”نص” background_layout=”light” text_orientation=”right”]

العديد من التطبيقات التى تتعلق بموقع المستخدم أو الاماكن بشكل عام تحتاج الى التعامل مع خرائط جوجل وتوفر لنا جوجل عدة APIS للتعامل مع الخرائط Maps API,Places API,Geocoding API,Road API, Direction API الخ .. وهى مجموعة مفيدة ورائعة تناسب كل شىء يمكن فعله مع الخرائط وسنركز على الـ Map API فى البداية ونتطرق للـ APIS الاخرى لاحقا فهيا بنا نبدأ

اذا كنت قد بحثت عن دروس لشرح Google Maps من قبل فبالتأكيد واجهت مجموعة متنوعة من الدروس تشرح الموضوع بطرق مختلفة تجد من قام بعمل فريجمنت وتجد من قام بعمل أكتييتفتى ليعرض به الخريطه لكن سواء هذا او ذاك وأيا كانت الطريقة ففى النهاية أنت تريد استخدام الـ Maps لغرض معين والمهم أن يصلك الفكرة الرئيسية أو المفهوم العام وبناء عليه تستطيع فعل ما تريد ووضع الخريطة بأى شكل حسب الحاجه والتطبيق الخاص بك .

قبل أن تبدأ بالعمل فى أندرويد ستوديو تحتاج الى API Key من جوجل وقد يطرأ بذهنك سؤال لماذا أحتاج الى API Key لماذا لا اقوم ببدء البرمجة وتعمل الخرائط وحسب ؟

الاجابة لأن جوجل تعرف أن هذا تطبيقك بناءا على هذا الـ Key وتراقب استخدامك للخرائط حتى اذا تجاوزت الحد المسموح من الاستخدام لأحد الـ APIs  تقوم جوجل بايقاف الخرائط فى تطبيقك أو تقوم بالدفع للحصول على حد اكبر من الاستخدام ويمكنك معرفة الخطط والأسعار الخاصة بـ Google Maps من هنا .

 

الحصول على Key من Google لاستخدام الـ Maps  

نقوم بالذهاب للـ Google Console من هذا الرابط  ثم إنشاء مشروع جديد او استخدام مشروع سابق كما تحب ثم نقوم بالضغط على Library ثم نختار Google Maps Android API

 

ثم نقوم بالضغط على ENABLE

ثم نذهب الى Credentials ثم نضغط على Create

 

نختار API Key

 

ثم نختار Android

ثم ستجد الشاشة التالية بها مكان لاسم الـ Key لتمييزه عن الـ Keyes الاخرى ان كنت انشأت عدة Keys وايضا امكانية قصر هذا التطبيق على تطبيق معين حيث يطلب منك اسم الباكيدج والـSHA-1  البصمة الخاصة بالتطبيق لكنها اختيارية يمكنك تجاهلة والضغط على Create

 

 

 

رائع الان حصلنا على الـ Key ! نقوم بنسخه لاننا سنستخدمه بعد قليل .

 

ملحوظة : من حين لاخر تقوم جوجل بتغيير واجهة الكونسول وهذا وهو شكلها اثناء كتابة هذا المقال اذا وجدت أن شكل الكونسول مختلف عما موجود بهذا الشرح حاول تنفيذ الخطوات بالواجهه الجديدة فالخطوات ثابته قم بالبحث عن تفعيل الـ API وفعل الـ Google Maps Android ثم الحصول على KEY خاص بالاندرويد

إنشاء أول خريطة !

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

نوع الأكتيتيفى فى أندرويد ستوديو سنقوم باختيار  Google Maps Activity

ثم نقوم بالمتابعة  يقوم الأندرويد باعداد الملفات الازمة ثم تجد أن البروجكت جاهز تعالى نلقى نظرة على ما قام الأندرويد ستوديو بإنشاءه من أجل الـ Maps  أولا تجد أنه قام بإنشاء ملف google_maps_key ويطلب منك إدخال الـ Key او الحصول على واحد جديد ان لم يكن لديك

ولاحظ أنه يرفق البصمة الخاصة بالتطبيق التى قلنا سابقا انها اختياريه وهى تعتمد على الـkeystore الخاص بالتطبيق تجاهل كل هذا الان وضع الـ Key الذى حصلنا عليه سابقا مكان كلمة YOUR_KEY_HERE كالتالى :

نقوم الان بتشغيل التطبيق ونرى النتيجة

 

انه يعرض خريطة جوجل ماب والكاميرا الان متواجدة فوق استراليا وهناك Marker موضوع فوق مدينة سيدنى تعالى لنلقى نظرة على الـ Maps Activity لنرى لماذا حدث هذا وكيف حدث .

كود الـ Maps Activity كالتالى :

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {

    private GoogleMap mMap;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
        // Obtain the SupportMapFragment and get notified when the map is ready to be used.
        SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }
    
    /**
     * Manipulates the map once available.
     * This callback is triggered when the map is ready to be used.
     * This is where we can add markers or lines, add listeners or move the camera. In this case,
     * we just add a marker near Sydney, Australia.
     * If Google Play services is not installed on the device, the user will be prompted to install
     * it inside the SupportMapFragment. This method will only be triggered once the user has
     * installed Google Play services and returned to the app.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        // Add a marker in Sydney and move the camera
        LatLng sydney = new LatLng(-34, 151);
        mMap.addMarker(new MarkerOptions().position(sydney).title("Marker in Sydney"));
        mMap.moveCamera(CameraUpdateFactory.newLatLng(sydney));
    }
}

تجد أنه أكتيفيتى عادى يرث من FragmentActivity وهو عباره عن أكتيتيفى يشبه الأكتيتيفى العادى تماما ويمكن فعل كل شىء نفعله فى الاكتيتيفى العادى فيه بالاضافة للميثودث المختلفة ونستطيع أن نقول اذا كنت تستهدف Android أعلى من 11 فيمكنك استخدام Activity بدلا من الـ FragmentActivity لكن الـ FragmentActivity يستخدم لدعم الاصدارات القديمة فى الاندرويد قبل ان يكن هناك فريجمنتس أو تابس فى الاندرويد لذلك ببساطه هو يدعم الاصدارات الاقدم من 11 (Android 3) لتستطيع استخدام الفريجمنتس والTabs فيها .

ندخل الى الميثود المفضلة لنا جميعا والتى نألفها فى كل أكتيتيفى نعم أقصد onCreate سوف تجد بداخلها كود  عباره عن ريفيرنس من SupportMapFragment وهو كلاس فريجمنت عادى مثلما تقوم بعمل فريجمنت فى اى وقت لكنه تابع للـ Android SDK وتمت اضافته داخل XML الـأكتيتيفى فى الملف activity_maps هيا بنا نلقى نظرة عليه .. ستجد محتواه كالتالى :

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:map="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.hendiware.myfirstmap.MapsActivity" />

لاحظ خاصية android:name حيث أعطاه اسم الكلاس وبهذا يقوم الفريجمنت بعرض محتوى هذه الكلاس .

 

نعود الان للأكتيفيتى يتم جلب الفريجمنت وامساكه بريفرنس mapFragment فى الميثود onCreate  فى السطر التالى مباشرة تجد  mapFragment.getMapAsync(this); وهو عباره عن استدعاء الميثود getMapAsync معناها عندما تستعد الماب وتصبح جاهزة استقبل حالة الماب وهنا تجد this اى تشير الى هذا الاكتيتيفى ولذلك قمنا بعمل Implement للإنترفيس OnMapReadyCallback لكى يتم عمل Override لميثود onMapReady ونقوم فيها بتنفيذ ما نريد عندما تصبح الخريطة جاهزة .

يمكنك الاستغناء عن عمل Override لهذه الميثود وكذلك الـ Implement وعمل إنترفيس مباشرة كالتالى :

لكن الان سنترك الامر على ما هو عليه وسنذهب الى داخل الميثود onMapReady والتى تستدعى عندما تكون الـ Map جاهزة وتمرر لك أوبجكت GoogleMap  اسمه googleMap ليمكنك التعامل مع الخريطه من خلاله ويمكنك إنشاء Reference اخر والاشارة اليه اذا اردت مثلما حدث تلقائيا من أندرويد ستوديو بأن أنشأ Reference بأعلى الاكتيتيفى اسمه mMap و ساواه بريفرنس القادم من الماب كما توضح هذه الصورة .

وقد تتسائل لماذا قد أفعل ذلك لماذا لا استخدم googleMap مباشرة وأفعل ما تريد واتفق معك لكن الريفرنس googleMap يمكن استخدامه فقط داخل الميثود onMapReady لكن اذا اردت عمل اى عملية على الخريطه خارج نطاق هذه الميثود فلا تستطيع لذلك نقوم بامساك الـ googleMap بريفرنس عام على مستوى الكلاس اسمه mMap .

 

الان نتابع وسنجد التالى :

كما يتضح من الكومنت تستيطع إنشاء مكان جديد اعتمادا على خطى الطول والعرض قام بإنشاء LatLang وسماه sydney ثم قام بعد ذلك بعمل اضافة ماركر وهو العلامة التى تظهر على الخريطه على شكل بالون أحمد ثم اعطى الميثود addMarker مواصفات الماركر الذى يريد يضيفه عن طريق أوبجكت MarkerOptions والذى اعطاه الـ postion وهو الموضع الذى يوضع عليه هذا الماركر على الخريطه وكذلك العنوان ليظهر عند الضغط على الماركر من أحد المستخدمين .

أيضا تم استخدام الميثود moveCamera لتحريك الكاميرا الخاصة بعرض الخريطة الى المكان الخاص بـ sydney .

الان كل شىء انشىء اوتوماتيكيا بأندرويد ستوديو عند انشاء الاكتييتفى اصبح واضحا بالنسبة اليك

كانت هذه مجرد بداية للـ GoogleMaps وسنكمل فى الدرس التالى.

 

 

[/mhc_text][/mhc_column][/mhc_row][/mhc_section]
السابق
العمل الحر كمطور أندرويد .. ما تحتاج معرفته لتبدأ
التالي
Google Maps بالعربية – الدرس الثانى

تعليق واحد

أضف تعليقا

  1. Ahmed قال:

    عندما أكملت إنشاء المشروع, طلب مني رقم الفيزا لإنشاء فاتورة!!!
    ماذا يعني هذا؟

اترك تعليقاً

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.