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

درس جديد عن Push Notification
اذا اعجبك لاتنسونا من دعم و اي اسئلة لتوضيح حاضرين ان شاء الله

أبرز التعليقات والآراء منكم نضيفها للفيديو وممكن نتناقش فيها بخصوص هذا الموضوع

رابط قناة
https://youtube.com/@nadimtech360?si=tmGAf6eu0atrjuaV

انضمو لهذه لقناة لدعم مبرمجين سوريا💚🤍

🚀 مشروع "مسار" - معًا نحو بناء سوريا الجديدة! 💚💚

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

لماذا "مسار"؟
- لدعم نهضة الاقتصاد السوري.
- لتوفير فرص حقيقية لبناء حياة مهنية أفضل.
- لتطوير المهارات وإعادة بناء الكفاءات.

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

الدعم الذي نحتاجه من المتطوعين:
- مبرمجون (Flutter، Firebase).
- مصممو واجهات وتجربة المستخدم (UI/UX).
- مختصون في الذكاء الاصطناعي وعلوم البيانات.
- أي شخص يملك الحماس والرغبة للمساهمة في بناء تطبيق يخدم سوريا الجديدة.

📩 للانضمام أو الدعم:
راسلنا مباشرة هنا على القناة .

💡 معًا، يمكننا تحويل "مسار" إلى واقع يخدم مجتمعنا ويدفع بعجلة التقدم للأمام! ✨

🚀 مشروع "مسار" - معًا نحو بناء سوريا الجديدة! 💚💚

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

لماذا "مسار"؟
- لدعم نهضة الاقتصاد السوري.
- لتوفير فرص حقيقية لبناء حياة مهنية أفضل.
- لتطوير المهارات وإعادة بناء الكفاءات.

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

الدعم الذي نحتاجه من المتطوعين:
- مبرمجون (Flutter، Firebase).
- مصممو واجهات وتجربة المستخدم (UI/UX).
- مختصون في الذكاء الاصطناعي وعلوم البيانات.
- أي شخص يملك الحماس والرغبة للمساهمة في بناء تطبيق يخدم سوريا الجديدة.

📩 للانضمام أو الدعم:
راسلنا مباشرة هنا على القناة .

💡 معًا، يمكننا تحويل "مسار" إلى واقع يخدم مجتمعنا ويدفع بعجلة التقدم للأمام! ✨

للانضمام سجل في رابط تالي
https://forms.gle/uk2jZ2oYoQrEL1SC6

في Java، عندما تقارن الأعداد باستخدام Operator ==، قد تحصل على نتائج غير متوقعة، وهذا يعود إلى ميزة في اللغة تُعرف باسم التخزين المؤقت للأعداد الصحيحة (Integer Caching).

ما الذي يحدث بالضبط؟
Java تقوم بتوفير ذاكرة عن طريق تخزين الأعداد الصحيحة التي تقع في النطاق من -128 إلى 127 في مكان خاص في الذاكرة. إذا قمت بتعريف أعداد ضمن هذا النطاق، مثل:

Integer x = 1;
Integer y = 1;

فإن المتغيرين x وy يشيران إلى نفس الكائن المخزن في الذاكرة. لذا، عند استخدام المشغل ==، تكون النتيجة true لأن كلاهما يشير إلى نفس العنوان.

لكن إذا عرّفت أعدادًا خارج هذا النطاق، مثل:

Integer a = 128;
Integer b = 128;

ستُنشئ Java كائنين منفصلين في الذاكرة. وبالتالي، عند مقارنة a وb باستخدام ==، تكون النتيجة false لأنهما يشيران إلى موقعين مختلفين في الذاكرة، حتى لو كانت القيم متساوية.

الفرق بين == و .equals()

المشغل == يقارن عناوين الكائنات في الذاكرة.
الدالة .equals() تقارن القيم الفعلية داخل الكائنات.

النصيحة العملية

إذا كنت تقارن القيم داخل الكائنات (مثل الأعداد الصحيحة)، تأكد من استخدام .equals() لتجنب هذه الأخطاء، خاصة عند التعامل مع أعداد خارج نطاق التخزين المؤقت.

لماذا هذا مهم؟
هذا السلوك يمكن أن يسبب أخطاء غير متوقعة، خصوصًا في البرامج الكبيرة. لذلك، من المهم أن تفهم كيفية تعامل Java مع الأعداد الصحيحة المعبأة (Boxed Integers) لتكتب كودًا أكثر دقة وفعالية.

يمكن دمج OpenStreetMap مع تطبيقات Flutter بسهولة باستخدام مكتبات متخصصة مثل flutter_map، التي توفر أدوات فعالة لعرض الخرائط التفاعلية.

الخطوات الأساسية لاستخدام OpenStreetMap في Flutter:

1. إضافة مكتبة flutter_map
قم بتضمين مكتبة flutter_map في ملف pubspec.yaml الخاص بمشروعك:

dependencies:
  flutter:
    sdk: flutter
  flutter_map: ^6.1.0
  latlong2: ^0.8.1

ثم نفّذ أمر تثبيت الحزم:

flutter pub get


---

2. إنشاء وعرض الخريطة
في ملف Dart، يمكنك إعداد صفحة تعرض خريطة OpenStreetMap باستخدام الكود التالي:

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

void main() {
  runApp(MaterialApp(home: MapPage()));
}

class MapPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('خريطة OpenStreetMap')),
      body: FlutterMap(
        options: MapOptions(
          center: LatLng(37.7749, -122.4194), // الإحداثيات المركزية
          zoom: 13.0, // مستوى التكبير الافتراضي
        ),
        layers: [
          TileLayerOptions(
            urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            subdomains: ['a', 'b', 'c'],
            attributionBuilder: (_) => Text("© OpenStreetMap contributors"),
          ),
        ],
      ),
    );
  }
}

---

3. إضافة علامات على الخريطة
لإظهار علامات (Markers) في مواقع معينة على الخريطة، استخدم عنصر MarkerLayerOptions:

MarkerLayerOptions(
  markers: [
    Marker(
      point: LatLng(37.7749, -122.4194), // إحداثيات العلامة
      width: 80.0,
      height: 80.0,
      builder: (ctx) => Icon(Icons.location_pin, color: Colors.red, size: 40),
    ),
  ],
),

---

شرح الكود:

MapOptions: لتحديد الإحداثيات المركزية ومستوى التكبير للعرض الأولي.

TileLayerOptions: تُستخدم لتحميل بيانات الخريطة من OpenStreetMap عبر الرابط.

LatLng: لتحديد الموقع الجغرافي بالإحداثيات (خط العرض والطول).

MarkerLayerOptions: لإضافة علامات أو نقاط اهتمام على الخريطة.



---

تشغيل التطبيق

بعد تنفيذ الخطوات السابقة، شغل التطبيق على جهازك أو المحاكي:

flutter run


---

النتيجة

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


---

المزايا

مجاني ومفتوح المصدر: لا قيود على الاستخدام.

تخصيص مرن: يمكنك إضافة العلامات، المسارات، والطبقات المختلفة.

سهل التكامل: مكتبات مثل flutter_map تجعل تنفيذ الخريطة بسيطًا وفعالًا.


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

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


---

الكود الكامل للتطبيق

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('خريطة تفاعلية باستخدام OpenStreetMap'),
          backgroundColor: Colors.blueAccent,
        ),
        body: InteractiveMap(),
      ),
    );
  }
}

class InteractiveMap extends StatefulWidget {
  @override
  _InteractiveMapState createState() => _InteractiveMapState();
}

class _InteractiveMapState extends State<InteractiveMap> {
  // قائمة العلامات (Markers) التي ستُعرض على الخريطة
  List<Marker> markers = [
    Marker(
      point: LatLng(37.7749, -122.4194), // سان فرانسيسكو
      width: 60.0,
      height: 60.0,
      builder: (ctx) => Icon(Icons.location_pin, color: Colors.red, size: 40),
    ),
    Marker(
      point: LatLng(37.7849, -122.4094), // نقطة أخرى قريبة
      width: 60.0,
      height: 60.0,
      builder: (ctx) => Icon(Icons.location_pin, color: Colors.green, size: 40),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return FlutterMap(
      options: MapOptions(
        center: LatLng(37.7749, -122.4194), // المركز الافتراضي للخريطة
        zoom: 12.0, // مستوى التكبير
        onTap: (TapPosition position, LatLng point) {
          // إضافة علامة جديدة عند النقر على الخريطة
          setState(() {
            markers.add(
              Marker(
                point: point,
                width: 60.0,
                height: 60.0,
                builder: (ctx) => Icon(Icons.location_pin, color: Colors.purple, size: 40),
              ),
            );
          });
        },
      ),
      layers: [
        // طبقة الخريطة الأساسية
        TileLayerOptions(
          urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
          subdomains: ['a', 'b', 'c'],
          attributionBuilder: (_) => Text("© OpenStreetMap contributors"),
        ),
        // طبقة العلامات
        MarkerLayerOptions(markers: markers),
        // طبقة لرسم مسار بين النقاط
        PolylineLayerOptions(
          polylines: [
            Polyline(
              points: [
                LatLng(37.7749, -122.4194),
                LatLng(37.7849, -122.4094),
              ],
              strokeWidth: 4.0,
              color: Colors.orange,
            ),
          ],
        ),
      ],
    );
  }
}

---

شرح الكود

1. علامات متعددة (Markers):
يتم تحديد مواقع مختلفة على الخريطة ووضع علامات فيها، مع تخصيص اللون والحجم لكل علامة.


2. رسم مسار (Polyline):
يتم ربط النقاط المحددة بخط برتقالي لعرض المسار بين المواقع.


3. إضافة علامات عند النقر:
عند نقر المستخدم على أي موقع في الخريطة، يتم إضافة علامة جديدة تلقائيًا عند النقطة التي نُقر عليها.


4. طبقات متعددة:

طبقة الخرائط الأساسية باستخدام OpenStreetMap.

طبقة العلامات (Markers).

طبقة الخطوط (Polyline) لرسم المسارات.





---

مميزات التطبيق

خريطة تفاعلية: يمكن للمستخدم التفاعل مع الخريطة وإضافة علامات بسهولة.

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

تخصيص مرن: يمكن تغيير التصميم، الألوان، والمواقع بسهولة.

مناسب للتطبيقات الاحترافية: مثل تطبيقات تتبع المواقع، تحديد المسارات، أو عرض نقاط الاهتمام.



---

تشغيل التطبيق

بعد تنفيذ الكود، شغّل التطبيق باستخدام الأمر التالي:

flutter run


---

النتيجة النهائية

خريطة تعرض علامات متعددة في أماكن محددة.

إمكانية رسم مسارات تربط بين النقاط.

تفاعل المستخدم مع الخريطة من خلال إضافة علامات جديدة بالنقر على أي مكان فيها.


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

السلام عليكم
نحنا عم نسعى لنكوّن فريق لنعمل تطبيق يفيد المجتمع في سوريا والعمل بشكل تطوعي
فنحن بحاجة اشخاص عندن خبرة بأحد المجالات
flutter
Ui Ux
يلي مهتم يكتب في تعليقات

نحنُ نُشكّل فريقًا لعمل تطبيقٍ يخدم المجتمعَ السوري، بحاجةٍ إلى أشخاصٍ متطوّعينَ في مجالِ UI. اكتب كلمة مهتم

السلام عليكم
نحنا عم نسعى لنكوّن فريق لنعمل تطبيق يفيد المجتمع في سوريا والعمل بشكل تطوعي
فنحن بحاجة اشخاص عندن خبرة بأحد المجالات

Ui Ux
يلي مهتم يكتب في تعليقات