الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

جيثب: https://github.com/mohdjami/Travel

الرابط المنشور: https://travelplanai.vercel.app/

فيديو يوتيوب: https://youtu.be/oeioDsKQ4cQ?si=U35aBhen3L3zJApq

بنية التطبيق والتدفق

الرسم البياني أعلاه يعطي نظرة عامة عالية المستوى للتطبيق والخدمات والحلول.

لقد قمت بالاستفادة من Next.js، وSupabase، وGemini-1.5-flash Model، وShadcn، وTypescript، وTailwind CSS.

  1. سجل حسابك على https://travel-three-lovat.vercel.app/signup
  2. سيتم تسجيلك وإعادة توجيهك إلى صفحة / خط سير الرحلة.
  3. يحصل كل مستخدم على 5 أرصدة لأنني أمتلك أيضًا رموزًا محدودة من Gemini API.
  4. املأ نموذج خط سير الرحلة وانقر على زر إنشاء.
  5. سوف يستغرق الأمر بضع ثوان، ويتم إرسال طلب إلى الواجهة الخلفية مع بيانات تفضيلات المستخدم.
  6. يقوم معالج المسار بإنشاء تفضيلات المستخدم ديسيبل، وإنشاء مطالبة مخصصة.
  7. يتم إرسال المطالبة إلى نموذج الجوزاء، ويتم تلقي الرد.
  8. بعد تلقي الاستجابة، يتم تنقيحها وتنظيفها وتحليلها إلى JSON.
  9. يتم بعد ذلك تخزين الاستجابة في قاعدة البيانات وإرسالها مرة أخرى إلى العميل.
  10. يستخدم Fronted Leaflet Maps API لعرض موقع كل نشاط.
  11. البنغو!! خط سير الرحلة جاهز للتنزيل بتنسيق PDF أو TXT.
  12. يمكنك الذهاب إلى لوحة المعلومات لإدارة وعرض مسارات الرحلة الأخيرة.

مخطط ERDigram

تفاصيل التنفيذ

لقد قمت بتقسيم التطبيق إلى هذه الوحدات.

المصادقة والتفويض

  • يستخدم Supabase لمصادقة المستخدمين وتفويضهم

    لماذا Supabase للمصادقة وتخزين البيانات؟

    1. الكل في مكان واحد، المصادقة، التخزين، قاعدة البيانات.
    2. تم بناء Supabase على أساس PostgreSQL، مما يوفر نظام قاعدة بيانات قويًا وغنيًا بالميزات، والذي مكّن من كتابة استعلامات SQL الأولية لإنشاء الجداول وسياسات RLS وأذونات GRANT.
    3. تجربة مطور رائعة.

  • جيثب

    1. إنشاء تطبيق OAuth في Github ودمجه في قاعدة البيانات.
    2. في auth/callback/route.ts حيث يتم تبادل الرمز للمصادقة، يتم إنشاء مستخدم جديد في قاعدة البيانات.

  • أوراق اعتماد

    1. يقوم المستخدم بإنشاء حساب.
    2. يتم إنشاء مستخدم في خدمة المصادقة.
    3. تتم إضافة مستخدم جديد إلى جدول المستخدمين في Supabase.

جيل خط سير الرحلة

لقد استخدمنا هنا نموذج Google Gemini-1.5-flash.

Next.js لبناء تطبيق المكدس الكامل.

يعد Next.js خيارًا ممتازًا بسبب العرض من جانب الخادم وإنشاء الموقع الثابت وتحسين محركات البحث.

لماذا Next.js؟

  • جعلت مسارات API من السهل جدًا إنشاء نقاط نهاية للتطبيق.
  • يعمل التوجيه المستند إلى الملف على زيادة تجربة المطورين.
  • تعمل المكتبات مثل Shadcn وTailwind على توفير الكثير من الوقت وإنشاء واجهة مستخدم سلسة.
  • دعم TypeScript من الدرجة الأولى بدون تكوين إضافي لا نحصل عليه في Node.js
  • النشر السريع والسهل.
  • بالنسبة للمشروع الذي يتطلب العرض من جانب الخادم، ومسارات واجهة برمجة التطبيقات (API)، وقابلية التوسع، يوفر Next.js حلاً قويًا وعالي الأداء وسهل المطورين. إن تكامله مع React والتحسينات المضمنة والدعم المجتمعي القوي يجعله خيارًا جذابًا لتطوير الويب الحديث.

نموذج خط سير الرحلة

بعد استلام تفضيلات المستخدم من نموذج خط سير الرحلة، يتم إرسال طلب إلى الواجهة الخلفية مع جميع البيانات.

عرض خط سير الرحلة

يتم بعد ذلك استخدام خط سير الرحلة في المكونات لعرض البيانات. لقد قمت أيضًا بدمج الخرائط من المنشور.

الجوزاء-1.5-فلاش

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

لماذا استخدمت الذكاء الاصطناعي بدلاً من إجراء استدعاءات واجهة برمجة التطبيقات يدويًا للحصول على بيانات المواقع؟

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

تكامل خرائط النشرة

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

  • قم بتثبيت حزمة Leaflet ومجمع React الخاص بها
  • تم إنشاء مكون خريطة ديناميكي للتعامل مع العرض من جانب العميل
  • تم تنفيذ علامات لكل موقع نشاط في خط سير الرحلة

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

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

ميزات إضافية:

الاعتمادات القائمة على النظام

لتحسين تجربة المستخدم وإدارة استخدام واجهة برمجة التطبيقات (API)، قمت بتطبيق نظام قائم على الاعتمادات. وإليك كيف يعمل:

  • يحصل المستخدمون الجدد على 5 أرصدة مجانية عند التسجيل
  • يستهلك كل جيل من خطوط الرحلة رصيدًا واحدًا
  • يمكن للمستخدمين شراء أرصدة إضافية حسب الحاجة (التنفيذ في المستقبل)

يتيح لنا هذا النظام التحكم في تكاليف واجهة برمجة التطبيقات (API) مع توفير المرونة للمستخدمين في استخدام الخدمة.

لوحة القيادة

توفر لوحة المعلومات للمستخدمين نظرة عامة على مسارات الرحلات التي تم إنشاؤها، والأرصدة المتبقية، ومعلومات الحساب. تشمل الميزات الرئيسية ما يلي:

  • قائمة الرحلات الأخيرة.
  • عرض رصيد الائتمان وخيار شراء المزيد من الاعتمادات

ملف تعريف المستخدم والإعدادات

يتيح قسم ملف تعريف المستخدم والإعدادات للمستخدمين تخصيص تجربتهم وإدارة معلومات حساباتهم. تشمل الميزات الرئيسية لهذا القسم ما يلي:

  • يمكن للمستخدمين حاليًا تحديث اسم المستخدم فقط
  • يمكنني في المستقبل تنفيذ البريد الإلكتروني وكلمة المرور وتحميل الصور.

قستاش

لزيادة وقت الاستجابة لإنشاء Itineray، قمت بتطبيق نظام قائمة الانتظار.

معالجة كافة المهام غير الهامة باستخدام قائمة الانتظار.

حدثت مشكلة جديدة

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

لقد قمت حاليًا بتعطيل سياسات RLS. سوف تعمل على هذا

التحسينات المستقبلية

مشكلة:

يستغرق مسار إنشاء السفر الكثير من الوقت لإنشاء مسارات الرحلة.

يحتوي على عدة عمليات:

  • تلقي تفضيلات المستخدم وإنشاء جدول في قاعدة البيانات.
  • احصل على المستخدم الحالي الذي قام بتسجيل الدخول.
  • إنشاء مطالبة مخصصة وإرسالها إلى Gemini AI Model.
  • تلقي الاستجابة وتخصيصها وتحليل الاستجابة إلى JSON حيث أقوم بتخزين الاستجابة JSON مباشرة في قاعدة البيانات.
  • تحديث الاعتمادات المستخدم قد غادر.
  • إرسال الرد مرة أخرى.

حل:

من خلال تحليل المسار بعناية، يمكنني التأكد من أن إدراج تفضيلات المستخدم وإدراج الاستجابة وتحديث الاعتمادات هي مهام غير حاسمة وأن إرسال الرد إلى المستخدم هو المهمة الحاسمة الرئيسية.

حتى أتمكن من تنفيذ هذه المهام غير الحرجة بشكل غير متزامن باستخدام قائمة الانتظار.

يمكن لهذا النهج غير المتزامن أن يقلل كثيرًا من وقت الاستجابة.

التخزين المؤقت

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

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

النشر

تم إرساء التطبيق لسهولة النشر على AWS Elastic Container Service، وهو أفضل أسلوب للتوسع التلقائي.

يتم نشره حاليًا على Vercel للاستخدام التجريبي.

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