TL ؛ د

هذه المدونة عبارة عن برنامج تعليمي قصير/كيف يمكنك استخدام Supabase ومحبوب لإنشاء تطبيقات كاملة في غضون ساعات بدلاً من أيام! لقد قمت بإنشاء تطبيق Calorie/Nutrition Tracker الكامل قائم على AI باستخدام هذه الأدوات في 8 ساعات فقط وسأعرض "How" هنا في هذه المدونة.

الفكرة

] لكن كمطور عرفت أنه يمكنني جعل العملية برمتها أسهل وأفضل وفعل ذلك بالضبط.

يقوم Munchwise بإنشاء أهداف مخصصة لك بناءً على معلوماتك الشخصية ، ثم يتيح لك تتبع وجباتك باستخدام لغة الإنسان الطبيعية إلى جانب التحليلات اليومية/الأسبوعية الكاملة!

الميزات ومكدس التكنولوجيا

سمات -

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

Tech Stack -

Supabase - Auth ، قاعدة البيانات ، وظائف الحافة
Vite & React - Framework ، Build Tool
CSS Tailwind - التصميم
محبوب - توليد الكود

إنشاء الواجهة الأمامية

PS: قبل أن تبدأ ، يجب عليك التوجه إلى Lovable وإنشاء حساب جديد!

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

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

بعد بضع مطالبات أخرى ، بدا واجهة المستخدم الأخيرة التي صنعها Lovable مثل هذا -

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

دمج supabase

لم يكن تكامل الواجهة الخلفية/API دائمًا معقدًا بالنسبة لي كهندسة كاملة لأنني لا أفرط في الهندسة الأمامية. لذلك ، كان من الممكن أن تكون القدرة على القيام بنسبة 80 ٪ من مهمة الواجهة الخلفية بحد ذاتها مذهلة.

كل ما عليك فعله هو النقر على زر
supabase في الزاوية العلوية اليمنى من الصفحة المحببة وبعد ذلك يمكنك توصيل حساب supabase الخاص بك إلى Lovable. بمجرد الاتصال ، تحتاج إلى استخدام المطالبة مرة أخرى لإنشاء مخطط الجدول ، وذات AUTH ، وسياسات RLS ، ووظائف الحافة كما هو مطلوب. ولكن ستحتاج أولاً إلى إنشاء حساب supabase إذا لم يكن لديك بالفعل حساب من خلال التوجه إلى https://supabase.com -

إنشاء حساب باستخدام github/البريد الإلكتروني على supabase
مرة واحدة على لوحة القيادة ، انقر فوق
2. مشروع جديد ثم قم بإنشاء مشروع جديد.
بمجرد إنشاء المشروع ، يمكنك العودة إلى Lovable ثم توصيل حساب Supabase الخاص بك واختيار المشروع الذي أنشأته للاتصال به.

كما ترون ، أنشأت Lovable الجداول المطلوبة إلى جانب مخططها ، ووظائف الحافة المطلوبة في مشروع Supabase الخاص بي ، وبعد أن وافقت على التغييرات ، قامت بتشغيل الترحيل!

إضافة القوى العظمى الذكاء الاصطناعي

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

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

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

الانتهاء من التطبيق

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

أليس كذلك؟ وأنا لا أمزح عندما أقول إن هذا التطبيق قد تم إجراؤه في 8 ساعات فقط ، وما يمكننا تحقيقه باستخدام الذكاء الاصطناعي في هذه الأيام أمر لا يمكن تصوره ، وإذا كنت لا تستخدمه الآن ، فأنت في عداد المفقودين حقًا!

الروابط

] Supabase - https://supabase.com

محبوب - https://lovable.dev

شكرًا جزيلاً على القراءة!