🧠 AI Dashboard - نظام الخرائط الذكية والتحليل الجغرافي ## 📌 مقدمة مشروع AI Dashboard هو لوحة تحكم تفاعلية تعتمد على تقنيات الذكاء الاصطناعي وخرائط Leaflet لتقديم تجربة بصرية متكاملة لتحليل البيانات الجغرافية. تم تطوير المشروع باستخدام Next.js 14, وReact 18, وTailwind CSS لتوفير أداء عالي وتجربة مستخدم حديثة. --- ## 🚀 أهداف المشروع 1. عرض بيانات جغرافية تفاعلية على خريطة حية. 2. تمكين المستخدم من البحث عن أي مدينة في العالم باستخدام API خارجي (OpenStreetMap). 3. تصفية وعرض المدن حسب نوعها (عواصم، مدن تجارية...). 4. عرض إحصائيات فورية عن المواقع الموجودة في النظام. 5. تطوير واجهة عربية متكاملة وسهلة الاستخدام. --- ## 🗺️ المميزات الرئيسية - 🔍 بحث ذكي: يتيح البحث المحلي والدولي عن المدن والدول. - 📍 خريطة تفاعلية باستخدام مكتبة Leaflet.js. - ⚡ تحديث لحظي للوقت عبر مكون ClientTime. - 🧭 اختيار المدن وعرض تفاصيلها بنقر المستخدم على الخريطة. - 📊 لوحة إحصائيات تفاعلية توضح إجمالي المواقع وأنواعها. - 🌍 دعم اللغة العربية بالكامل في الواجهة والاتجاهات. --- ## 🧩 المكونات الأساسية في المشروع ### 1. MapComponent.tsx المسؤول عن: - عرض الخريطة التفاعلية. - رسم العلامات (Markers) للمدن. - التعامل مع النقرات وتحديد المدن. - تخصيص أيقونة العلامة (Pin Icon) من ملفات: - /public/marker-icon.png - /public/marker-icon-2x.png - /public/marker-shadow.png ### 2. page.tsx الصفحة الرئيسية الخاصة بالخرائط، وتحتوي على: - البحث والتصفية. - عرض النتائج. - عرض الخريطة والإحصائيات. - دمج البيانات المحلية مع بيانات البحث الخارجي من OpenStreetMap API. ### 3. ClientTime.tsx - مكون بسيط لعرض الوقت الحالي المحدث كل ثانية. - يمنع أخطاء الـ Hydration في Next.js عبر التحميل من جانب العميل فقط (use client). --- ## ⚙️ التقنيات المستخدمة | التقنية | الاستخدام | |----------|-------------| | Next.js 14 | هيكل المشروع وأداء SSR | | React 18 | بناء الواجهة التفاعلية | | Tailwind CSS | تنسيق الواجهة وتخطيط المكونات | | Leaflet.js | عرض الخرائط والعلامات التفاعلية | | OpenStreetMap API | جلب بيانات المدن الخارجية | | TypeScript | زيادة أمان الكود وتقليل الأخطاء | --- ## 💾 تشغيل المشروع محليًا ### 1. تثبيت الحزم:
bash npm install
# تثبيت جميع الحزم المطلوبة لتشغيل المشروع
npm install
# تشغيل المشروع على الخادم المحلي عبر HTTP
npm run dev
# سيتم فتح المشروع على الرابط التالي:
# http://localhost:3000
# تشغيل المشروع على الخادم المحلي عبر HTTPS (اتصال آمن)
npm run dev:https
# يتم استخدام هذا الأمر لتشغيل المشروع بشهادة أمان محلية
# العنوان سيكون:
# https://localhost:3000
# ملاحظة: قد تظهر رسالة "الموقع غير آمن" لأنها شهادة محلية (غير رسمية)
# تأكد من وجود الملفات التالية في مجلد المشروع:
# /localhost+2.pem
# /localhost+2-key.pem
# بناء نسخة الإنتاج الجاهزة للنشر
npm run build
# تشغيل النسخة النهائية من المشروع
npm start
# سيتم تشغيل المشروع من النسخة الجاهزة على:
# http://localhost:3000
# أوامر رفع المشروع على GitHub
git add .
git commit -m "Initial commit"
git push -u origin main
# بهذه الأوامر يتم رفع الكود بالكامل إلى مستودع GitHub الخاص بالمشروع