آخر تحديث
كانت Eugenia Bravo، المحامية والوسيطة الأسرية في مالقة، بحاجة إلى موقع ومدونة احترافيين لجذب العملاء عبر الإنترنت. بنيتهما في 2024 ثم أعدت بناءهما في 2025 لتظهر مقالاتها على Google، مع لوحة إدارة آمنة تنشر منها مقالاتها بنفسها.
مقدمة
تمتلك Eugenia خبرة 25 عاماً في قانون الأسرة والوساطة، ويجمع موقعها بين التعريف بخدماتها ومدونة قانونية. وفيما يلي النسختان: النسخة الأصلية من 2024 وإعادة البناء في 2025.
كما بنيت صفحة لدليلها المجاني عن الطلاق ترسل الدليل تلقائياً إلى كل مشترك جديد: اقرأ دراسة حالة Tu Divorcio Inteligente.
النسخة الأولى (2024): React وAWS Amplify
كانت النسخة الأولى تطبيق React من صفحة واحدة مع خلفية على AWS Amplify: موقع عام بمدونة، ولوحة إدارة خاصة ينشر منها الفريق المقالات.
لتطوير هذا الموقع، تعاونت مع صديق هو أيضاً عميلي، واخترت تقنيات تعزّز مهاراتي في هندسة البرمجيات بدلاً من الاعتماد على حلول جاهزة مثل WordPress أو Wix. أثمر هذا النهج موقعاً متيناً ومخصّصاً.
الواجهة الأمامية: React وTypeScript
بما أن هذا مشروع احترافي، استخدمت React للاستفادة من معرفتي المتقدمة بإطار العمل. كما ضمن استخدام TypeScript معالجة بيانات أكثر أماناً مقارنةً بـ JavaScript العادي.
لبدء التطوير، جرّبت أداة ذكاء اصطناعي مبتكرة تُدعى bolt.new، وهي قادرة على إنشاء مشروع من الصفر وتشغيله وتحسين الكود تكرارياً بناءً على الأوامر. ثم نزّلت الكود المبدئي المُولَّد لمتابعة التطوير.
الواجهة الخلفية: AWS Amplify
في مشروع سابق، بنيت واجهة خلفية بـ Spring Boot مدمجة مع قاعدة بيانات AWS RDS. لكن هذا النهج أدّى إلى مشكلات مثل الأعطال غير المتوقعة، وزيادة وقت التطوير، وتعقيد إضافي. وبصفتي مطوّراً منفرداً بوقت محدود، احتجت إلى حل أبسط لكنه متين. عندها اخترت AWS Amplify، وهو حل "الواجهة الخلفية كخدمة". يسهل التطوير باستخدام Amplify بمجرد الاعتياد عليه، ويوفّر بنية تحتية متينة وفعّالة من حيث التكلفة للمشاريع الصغيرة والمتوسطة، لأنه مُدار بالكامل.
الصفحات العامة
يوازن الموقع بين الترويج لمنتجات Eugenia ودعوة المستخدمين إلى التواصل، مع تقديم محتوى مدوّنة قيّم وخالٍ من الإعلانات.
الصفحة الرئيسية
صفحات الإدارة
محميةً بمصادقة المستخدمين في Amplify، توجد صفحة إدارة خاصة يدير من خلالها فريق الموقع المحتوى. تتضمّن هذه البوابة لوحة معلومات ولوحة إدارة لتعديل المنشورات الخاصة أو مراجعتها أو حذفها.
لوحة معلومات الإدارة
إعادة البناء (2025): Next.js وSupabase
تطوّر EugeniaBravo من تطبيق React أحادي الصفحة بسيط إلى بنية Next.js لتحسين السيو وقابلية الاكتشاف وتدفقات التحرير لموقع قائم على المحتوى. كما استبدل الترحيل AWS Amplify بـ Supabase، وهو خيار أنسب للمشاريع الأصغر التي لا تزال بحاجة إلى المصادقة والتخزين وقاعدة بيانات علائقية.
أهداف الترحيل
كانت الأهداف الرئيسية فهرسة محتوى المدوّنة بشكل موثوق، وتحسين أداء الصفحات، وتبسيط عمليات الواجهة الخلفية بحيث يبقى المشروع رشيقاً دون التخلي عن ميزات مثل أدوات الإدارة، ورفع الوسائط، وتحرير المحتوى الغني.
تتمحور إعادة البناء حول Next.js مع TypeScript في الواجهة الأمامية، وSupabase للواجهة الخلفية والتخزين.
الواجهة الأمامية والسيو
يتيح Next.js العرض من جانب الخادم والتوليد الثابت للمدوّنة، ما يعني أن برامج الزحف تتلقى HTML كاملاً بدلاً من هيكل شبه فارغ. وهذا تحسّن كبير مقارنةً بـ React العادي بالنسبة للفهرسة الديناميكية، لأن كل منشور يمكن أن يُرسل بيانات وصفية كاملة، ووسوماً معيارية، ومعاينات غنية لحظة طلبه.
تتضمّن البنية خرائط مواقع، وقواعد robots، وبيانات وصفية خاصة بكل صفحة، بحيث تصبح المقالات الجديدة قابلة للاكتشاف بسرعة. كما تحسّن التوجيه، وتحسين الصور، وأداء التحميل العام للموقع العام.
الواجهة الخلفية مع Supabase
حلّ Supabase محل Amplify لإبقاء الحزمة التقنية أخفّ وأسهل تناولاً لفريق أصغر. فمع Postgres والمصادقة المدمجة والتخزين في مكان واحد، أصبح أسهل في الصيانة من إعداد AWS أكبر، مع توفير أساس متين للوحة معلومات الإدارة وتدفقات الوسائط.
تدعم المصادقة الآن MFA، وتوجد المنشورات والفئات في جداول علائقية، وتُخزَّن الصور في Supabase Storage مع بدائل منطقية.
تدفق عمل المحتوى
يدير المحرّرون المنشورات والفئات والمؤلفين من لوحة معلومات الإدارة، مع TinyMCE لتحرير المحتوى الغني وتدفقات المعاينة قبل النشر. تستخدم المدوّنة روابط (slugs) ملائمة للسيو، ومنشورات ذات صلة، وبطاقات موصى بها للحفاظ على تفاعل القرّاء.
لوحة معلومات الإدارة
تجربة الموقع العام
يجمع الموقع العام بين مسار تسويقي ومدوّنة سهلة التصفّح وسريعة التحميل. وتُبنى صفحات الخدمات والشهادات والأسئلة الشائعة والتواصل جميعها على الأساس نفسه الملائم للسيو.
الصفحة الرئيسية
ضمانات النسخة التجريبية
يُطلق فرع العرض التجريبي دون أسرار، ويعمل على بيانات وهمية في الذاكرة، ويعطّل عمليات الكتابة حتى يتمكّن المراجعون من استكشاف الواجهة بأمان. وتُقيَّد أدوات التحليلات وملفات تعريف الارتباط خلف أعلام البيئة لإبقاء النسخة التجريبية معزولة عن الإنتاج.
النسخة التجريبية العامة متاحة مع تفعيل صفحات الإدارة على eugeniabravo-public.vercel.app.
زر الموقع المباشر على eugeniabravo.com، واستكشف النسخة التجريبية على eugeniabravo-public.vercel.app، أو تصفّح المستودع على GitHub.
بحاجة إلى مساعدة قانونية في إسبانيا؟ تواصل مع Eugenia!
شكراً لقراءتك،
خوليو ماسياس غونزاليس
