تركيب الخريطة في تطبيقك وشرح لكيفية الحصول على عنوانك في Flutter

تركيب الخريطة في تطبيقك وشرح لكيفية الحصول على عنوانك في Flutter

في هذا المقال سوف نشرح لكم كيف تقوم بتركيب الخريطة لديك في المشروع الخاص بك بدون مشاكل بشكل بسيط وفي الدروس المقبلة سوف نقوم بشرح لكم خصائص الخريطة وكيفية التعامل معها من البداية حتى الاحتراف وكل هذا سوف يكون في هذه السلسلة التي سبق وقدمنا لكم سلسلة شبيهه لها ولكن كانت بلغة الجافا لتطوير تطبيقات الاندرويد , في هذا المقال سوف نقدمها ولكن ل flutter وسوف يكون بها خصائص كثيره وسوف نتعمق معكم بها حتى تصبح محترف في التعامل مع خرائط جوجل .

تعد كيفية تحقيق الأداء الأصلي للتطبيق وكيفية تسهيل تصميم الميزات المتنوعة للأجهزة والأنظمة الأساسية قدر الإمكان على المطورين من الصعوبات الرئيسية التي تواجه أطر العمل عبر الأنظمة الأساسية للجوّال. عند القيام بذلك ، ضع في اعتبارك أن تجربة المستخدم يجب أن تكون متسقة مع دمج العناصر المميزة الخاصة بكل نظام أساسي (Android و iOS). على الرغم من أن الأطر المشتركة بين الأنظمة الأساسية يمكنها عادةً معالجة المشكلات الخاصة بالمنصة ، إلا أن هناك بعض الوظائف التي لا يمكن إنجازها إلا من خلال التعليمات البرمجية الخاصة بالنظام الأساسي المكتوبة خصيصًا. السؤال الرئيسي هو كيف يمكن لهذه الأطر إنشاء اتصال بين النظام الأساسي والتطبيق المعينين. 

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

برمجة جوجل:

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

برمجة تطبيقات الأجهزة الذكية:

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

إنشاء تطبيقات الاندرويد:

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

برمجة تطبيقات الاجهزة الذكية:

تتضمن برمجة تطبيقات الأجهزة الذكية مجموعة من الخطوات، مثل:

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

برمجة تطبيق اندرويد بسيط:

يمكن إنشاء تطبيق اندرويد بسيط باستخدام فلاتر من خلال الخطوات التالية:

1. إنشاء مشروع جديد باستخدام فلاتر.
2. إضافة مكتبة خرائط جوجل إلى المشروع.
3. إنشاء الخريطة وإضافة المواقع إليها.
4. تشغيل التطبيق على جهاز أندرويد.

يعد التعامل مع خرائط جوجل باستخدام فلاتر طريقة رائعة لإنشاء تطبيقات ذكية تفاعلية. فلاتر هي تقنية قوية وسهلة الاستخدام، يمكن استخدامها لإنشاء تطبيقات متنوعة للأجهزة الذكية.

الميزات والأدوات المتوفرة في خرائط جوجل:

• التنقل
• البحث
• عرض التضاريس
• عرض الصور
• عرض الاتجاهات
• عرض المسافات
• عرض الوقت المقدر للوصول
• خطوات استخدام خرائط جوجل في فلاتر:

أمثلة لتطبيقات اندرويد التي تستخدم خرائط جوجل:

• تطبيقات التنقل
• تطبيقات التوصيل
• تطبيقات العلامات التجارية والإعلانات
• تطبيقات السياحة والسفر
• تطبيقات التعليم
• تطبيقات الألعاب

نصائح لبرمجة تطبيقات اندرويد باستخدام فلاتر:

• استخدام مكتبة خرائط جوجل الرسمية.
• اختيار لغة البرمجة المناسبة للمشروع.
• تصميم واجهة مستخدم جذابة وسهلة الاستخدام.
• اختبار التطبيق بعناية قبل نشره.

اضافة permission داخل ملف manifest  للاندرويد

في البداية تحتاج الى key من الموقع الخاص ب google api حتى تتمكن من اظهار الخريطة وبعد الحصول عليه انتقل الى manifest حتى وقم بوضعه في المكان المناسب كما هو موضح , وهذا يكون مخصص لاجهزة الاندرويد .

manifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.maps">

    <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>


    <application
    
		...

        <meta-data android:name="com.google.android.geo.API_KEY"
            android:value="KEY###"/>

    </application>
</manifest>

التاكد من فتح المستخدم للموقع قبل عرض الخريطة

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

LocationHelper.dart

class LocationHelper {

  static Future<Position> getCurrentLocation() async {
    bool serviceEnabled = await Geolocator.isLocationServiceEnabled();

    if (!serviceEnabled) {
      await Geolocator.requestPermission();
    }

    return await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
  }

}

عرض الخريطة مع امكانية عرض مكان المستخدم بداخل Flutter

في هذا الجزء والذي يكون الاخير سوف نقوم بعمل ui الخاص بالخريطة وايضا لا يقتصر الامر على ذلك بل سوف نقوم بعرض موقع المستخدم الحالي وشرح بعض خصائص الخريطة كما هو موضح يوجد كومنت لتوضيح كل خطوة من الخطوات التي قمنا بها .

android sdk manager تحميل flutter developers applications create app android android studio mac

maps.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:untitled/maps/utils/location_helper.dart';

class MainMaps extends StatefulWidget {
  const MainMaps({Key? key}) : super(key: key);

  @override
  State<MainMaps> createState() => _MainMapsState();
}



class _MainMapsState extends State<MainMaps> {

  static Position? position;
  final Completer<GoogleMapController> _controllerMaps = Completer();

  static final CameraPosition _myCurrentLocationNow = CameraPosition(
    //عرض موقع المستخدم على الخريطة مع بعض الخصائص مثل نسبة التقريب
    // نسبة جعل الكاميرا مائله
    bearing: 0.0,
    // موقع المستخدم
    target: LatLng(position!.latitude, position!.longitude),
    tilt: 0.0,
    // نسبة التقريب
    zoom: 18,
  );

  Future<void> getMyLocationNow() async {
    // الحصول على موقع المستخدم بمجرد فتح الخريطة وتحديث الصفحة بالموقع الحالي
    position = await LocationHelper.getCurrentLocation().whenComplete(() => setState((){}));
  }

  Future<void> _goToMyLocationNow() async {
    // الانتقال الى موقعي بمجرد تنفيذ هذه الوظيفة
    final GoogleMapController controller = await _controllerMaps.future;
    // الانتقال الى موقع المستخدم الموجود في CameraPosition مع انميشن بسيط لحركة الكاميرا
    controller.animateCamera(CameraUpdate.newCameraPosition(_myCurrentLocationNow));
  }


  @override
  void initState() {
    super.initState();
    getMyLocationNow();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          position == null ? const Center(child: CircularProgressIndicator()) : buildMaps(),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _goToMyLocationNow,
        child: const Icon(Icons.location_searching),
      ),
    );
  }

  Widget buildMaps(){
    return GoogleMap(
      // نوع الخريطة
      mapType: MapType.normal,
      // وجود علامة زرقاء لاظهار موقعك الحالي على الخريطة
      myLocationEnabled: true,
      // اضافة زر في اعلى الخريطة للانتقال المباشر الى موقعك الحالي
      myLocationButtonEnabled: false,
      // وجود علامة التكبير والتصغير للخريطة في اسفل الخريطة
      zoomControlsEnabled: false,
      // الحصول على موقع المستخدم بمجرد فتح الخريطة وتحديث الصفحة بالموقع الحالي
      initialCameraPosition: _myCurrentLocationNow,

      onMapCreated: (GoogleMapController controller){
        _controllerMaps.complete(controller);
      },

    );
  }

}

تعديل المقال