Compassion Rescue
موقع عام ثنائي اللغة، ومسار للتبنّي، ومنصة لعمليات المأوى لمنظمة إنقاذ الحيوانات.
COMPASSION RESCUE
Where Every Life Is Curated With Compassion
- لغتان: EN / ZH
- 2
- برامج موحّدة
- 4
- ملاحم مُنجزة
- 7/7
- العميل
- Compassion Rescue
- القطاع
- إنقاذ الحيوانات · منظمة غير ربحية
- طبيعة التعاون
- بناء منصة Full-Stack
- الحالة
- قيد التنفيذ — سُلّمت بيئة الاختبار
- المدة
- مايو – يونيو 2026 · نحو 6 أسابيع للوصول إلى بيئة الاختبار
- النطاق
- موقع عام ثنائي اللغة، ومنصة إدارة، وبوابة للمتطوعين
01 نظرة عامة
من هو العميل؟
Compassion Rescue مأوى للحيوانات يخدم مجتمعًا ثنائي اللغة: تعمل المنصة بالكامل بالإنجليزية والصينية المبسطة، وتشير الإعدادات الافتراضية للمأوى نفسه من لغة ومنطقة زمنية وعملة إلى نشاط ناطق بالصينية. وتتوزع أنشطته على أربعة برامج: إيجاد بيوت دائمة للحيوانات عبر التبنّي، ووضعها لدى مقدمي الرعاية المؤقتة، وإدارة برنامج تطوع بنوبات مجدولة، ونشر الأخبار وقصص النجاح لإبقاء المجتمع متفاعلًا.
02 بيان المشكلة
ما المشكلة التي واجهوها؟
كان المأوى يدير كل هذا بلا نظام — لا دليل عام، ولا مسار للطلبات، ولا بوابة للمتطوعين، ولا طريقة لتعديل المحتوى دون مطوّر، وباللغتين.
لا دليل عام
من يرغب في التبنّي لم تكن لديه طريقة لتصفح الحيوانات المتاحة، أو تصفيتها حسب النوع أو العمر أو الحجم، أو قراءة قصة الحيوان وسجله الطبي قبل التواصل.
لا مسار للطلبات
لم يكن لطلبات التبنّي والرعاية المؤقتة والتطوع أي عملية استقبال ولا مسار يقف خلفها. وكان تتبّع ما هو قيد الانتظار وما هو معتمد يدويًا، وتذكّر تحديث توفّر الحيوان بعد إتمام التبنّي هو بالضبط من الأمور التي تفوت.
لا بوابة للمتطوعين
كانت النوبات والإعلانات والساعات المسجّلة توجد حيثما دوّنها المنسّق، دون نظام بخدمة ذاتية يتيح للمتطوعين الاطلاع على أيٍّ منها.
كل تغيير يتطلب مطوّرًا، وباللغتين
المقالات الإخبارية، والحيوانات نفسها، وإعلانات الموقع — كل ما يتعلق بالمحتوى كان يحتاج مساعدة تقنية لتغييره، وكان الأمر يتضاعف مع متطلب اللغتين.
03 الحل
كيف حللناها؟
بنينا منصة كاملة حول البرامج الأربعة، وعاملنا متطلب اللغتين بوصفه قيدًا أساسيًا لا فكرة لاحقة. يغطي الموقع العام رحلة الزائر كلها: الصفحة الرئيسية، ودليل للحيوانات المقيمة بعوامل تصفية متزامنة مع عنوان URL، وصفحات تفاصيل الحيوان، وأخبار بمقالات مستقلة. كل نص، بما فيه أوصاف الحيوانات، موجود بالإنجليزية والصينية، مع زر لتبديل اللغة يتذكّر اختيار الزائر وله قواعد طباعة CJK الخاصة به: بلا خطوط مائلة ولا تباعد بين الأحرف.
التقديم نموذج متعدد الخطوات بحق، منفصل للتبنّي والرعاية المؤقتة والتطوع، مع حفظ المسودات أثناء كتابة مقدّم الطلب. وفي جهة الإدارة تكمن القيمة التشغيلية: لوحة معلومات، وإدارة كاملة للحيوانات، ومحرر محتوى ثنائي اللغة، وإدارة للرعاية المؤقتة والتطوع مع جدولة النوبات، وسجلات طبية لكل حيوان، وإعدادات الموقع، ومسار للتبنّي تمرّ فيه الطلبات بالحالات: قيد الانتظار ← قيد المراجعة ← مُعتمد/مرفوض، مع مربع حوار للتأكيد وتراجع خلال خمس ثوانٍ في كل إجراء. أما القطعة التي تربط ذلك كله فخطّاف في الخادم: عند اعتماد تبنٍّ تتحول حالة الحيوان تلقائيًا إلى «adopted»، وعند اعتماد رعاية مؤقتة تتحول إلى «pending».
- FE Next.js 16 واجهة أمامية ثنائية اللغة React 19مصادقة بملفات تعريف الارتباط
- PB PocketBase Go + قاعدة SQLite مضمَّنة أمر مخصّص للبيانات الأوليةخطّاف الاعتماد
- S3 MinIO تخزين الكائنات تهيئة تلقائيةمتوافق مع S3
- Next.js 16
- React 19
- TypeScript
- PocketBase
- Go
- SQLite
- MinIO (S3)
- Tailwind CSS v4
- Docker
- Dokploy
يعمل مباشرةً على بيئة الاختبار — شاشات حقيقية وبيانات أولية حقيقية
04 الجدول الزمني للمشروع
أبرز المعالم والمدة
المرحلة 1 4–15 مايو 2026
التأسيس والموقع العام
هيكل المشروع، وبيئات Docker، ونظام التصميم، والصفحات العامة المبنية على بيانات تجريبية مع علامات «قريبًا» على كل ما لم يُربط بعد.
المرحلة 2 11–18 مايو 2026
الواجهة الخلفية ومخطط قاعدة البيانات
مجموعات PocketBase للحيوانات والطلبات والمقالات والمتطوعين والنوبات ومقدمي الرعاية المؤقتة والسجلات الطبية والإعدادات، معرَّفة في الشيفرة مع قواعد وصول لكل مجموعة. بيانات أولية بكلتا اللغتين.
المرحلة 3 19–25 مايو 2026
البنية التحتية لبيئة الاختبار
نشر Dokploy، وربط تخزين MinIO، ودليل تشغيل مكتوب للمشغّلين. وُثّق هنا محذوران دائمان: متغيرات البيئة وقت البناء، واشتراط Dokploy ملف compose واحدًا.
المرحلة 4 8–12 يونيو 2026
الربط بالواجهة الخلفية الفعلية
خطة مكتوبة — تتضمن مراجعة خصومية مسبقة كشفت عن عدم تطابق في إصدار SDK، وقواعد تحديث مفقودة، ونمط مضاد في الإعدادات — ثم ربط كل شاشة بالواجهة الخلفية الفعلية وإزالة كل شرائط البيانات التجريبية.
المرحلة 5 12–16 يونيو 2026
ضمان جودة منهجي
تدقيق لإمكانية الوصول والتفاعل وفحص مرونة من خمس حالات (التحميل، الخطأ، الفراغ، قلة البيانات، الامتلاء) طُبّق على كل نقطة تجلب البيانات. أُشِّر على كل بند، ونجحت اختبارات الدخان، والبناء خالٍ من الأخطاء.
الإطلاق في بيئة الإنتاج ابتداءً من 17 يونيو 2026 — قيد التنفيذ
ترحيل النطاق والتخزين
فُحصت بيئة الاختبار واعتُمدت. تشمل خطة الإطلاق النطاق وDNS، ونقل تخزين الكائنات من MinIO إلى مزوّد سحابي، ومدة الاحتفاظ بالنسخ الاحتياطية، ومراجعة أمنية نهائية.
05 التحديات وحلولها
ما العقبات التي واجهتنا وكيف تجاوزناها؟
الخادم يعرض الإنجليزية، والمتصفح يتذكّر الصينية
المشكلةاللغة المحفوظة مخزّنة في المتصفح، لكن الخادم يعرض الصفحة أولًا، فقد يرى الزائر العائد الذي يستخدم الصينية الصفحة تومض بالإنجليزية قبل التبديل. وهذا مشتّت في كل تنقّل.
الحلمزوّد اللغة ينتظر الآن حتى يؤكد المتصفح اللغة المحفوظة قبل العرض، خلف حالة تحميل محايدة — بلا وميض ولا ارتعاش في أي صفحة.
تبنٍّ معتمد وبطاقة حيوان لم تُحدَّث
المشكلةكان اعتماد التبنّي يتطلب تذكّر خطوة ثانية: العودة ووضع علامة «غير متاح» على الحيوان. وهذا بالضبط نوع الخطوات اليدوية التي تُنسى تحت ضغط العمل الفعلي.
الحلأغلق خطّاف في الخادم هذه الفجوة: صار الاعتماد وتغيير حالة الحيوان إجراءً واحدًا يعمل من جهة الخادم، فلا يتوقف عمله على الشاشة أو التطبيق الذي أطلق الاعتماد.
بناء للإنتاج تعطّل بطريقة لا يمكن أن تحدث في بيئة التطوير
المشكلةتُضمَّن متغيرات البيئة التي تبدأ بالبادئة NEXT_PUBLIC_ في حزمة JavaScript (bundle) وقت البناء، فتغييرها على الخادم وإعادة التشغيل لا يفعل شيئًا. وكلّف هذا وقتًا فعليًا في تنقيح الأخطاء على بيئة الاختبار: كان تسجيل الدخول يعمل، وكانت كل صفحات الإدارة تقول «failed to fetch».
الحلأصبحت لها ملاحظة دائمة في المستودع، وصار دليل التشغيل يتضمن أمرًا من سطر واحد للتحقق من وصول العنوان فعلًا إلى الحزمة المبنية قبل أن يطارد أحدٌ خطأً برمجيًا وهميًا مرة أخرى.
نجح رفع الصور ثم ظهر الخطأ 404
المشكلةلا يستخدم PocketBase تخزين S3 ما لم يُطلب منه ذلك صراحةً. وفي أي نشر جديد كانت عمليات الرفع تبدو ناجحة ثم تُرجع 404 — صامتة حتى ينقر أحدهم على الصورة فعلًا.
الحلأُدرجت خطوة مُبرمَجة تُنفَّذ مرة واحدة (npm run configure-s3) في قائمة التهيئة عند أول نشر، وتُوثَّق بوصفها المحذور المرجعي لأول نشر.
واجهة خلفية كُتبت وفق واجهة برمجية أحدث من الإصدار المثبّت
المشكلةكُتبت الواجهة الخلفية في البداية وفق إصدار من واجهة PocketBase البرمجية أحدث من الإصدار المثبّت فعليًا في ملف الوحدة، فتعذّر بناؤها.
الحلالتقطته المراجعة الخصومية المضمّنة في خطة التكامل قبل أن تعطّل أي شيء لاحق؛ وأُعيدت هيكلة الواجهة الخلفية إلى واجهة SDK الصحيحة قبل بدء الربط.
06 قبل وبعد
مقارنة بين الوضع قبل المشروع وبعده
| قبل | بعد |
|---|---|
| لا دليل عام للحيوانات التي في رعاية المأوى | دليل عام ثنائي اللغة قابل للتصفية مع صفحات تفاصيل وعروض مُصفّاة قابلة للمشاركة ومتزامنة مع عنوان URL |
| لا استقبال رسمي لاهتمام التبنّي أو الرعاية المؤقتة أو التطوع | نماذج متعددة الخطوات للتبنّي والرعاية المؤقتة والتطوع مع حفظ المسودة أثناء كتابة مقدّم الطلب |
| تتبّع الطلبات يدويًا | مسار بحالات وبحث ومربعات حوار للتأكيد وأسباب للرفض وتراجع خلال خمس ثوانٍ |
| التبنّي ← تحديث بطاقة الحيوان كان خطوة يدوية منفصلة يسهل نسيانها | تلقائي عبر خطّاف في الخادم: الاعتماد وتغيير التوفّر في إجراء واحد |
| لا نظام للمتطوعين — كانت النوبات والساعات توجد حيثما دوّنها المنسّق | بوابة بتسجيل دخول تضم النوبات والإعلانات والساعات المسجّلة، مع جدولة من جهة الإدارة |
| السجل الطبي غير مُرقمَن | سجلات طبية لكل حيوان في لوحة الإدارة |
| كل تغيير في المحتوى يحتاج مطوّرًا، وبلغة واحدة | محرر ثنائي اللغة ونشر للأخبار وشريط إعلانات — كلها بخدمة ذاتية |
| لا بنية تحتية للنشر | منظومة مُحزَّمة في حاويات Docker على Dokploy مع تخزين S3 وفحوصات الصحة (Health checks) ونسخ احتياطية ودليل تشغيل للمشغّلين |
07 فوائد العميل ونتائجه
ما القيمة التي حصل عليها العميل؟
- ملاحم مُنجزة
- 7/7
- اكتملت جميع المهام وأُزيلت شرائط البيانات التجريبية
- اللغات
- 2
- الإنجليزية · الصينية المبسطة، آمنة من أخطاء hydration
- برامج موحّدة
- 4
- تبنٍّ · رعاية مؤقتة · تطوع · أخبار
- حالات المرونة المُدقَّقة
- 5
- التحميل · الخطأ · الفراغ · قلة البيانات · الامتلاء
نظام واحد بدل عمليات يدوية متفرقة
يدير الموظفون الحيوانات والطلبات والرعاية المؤقتة والمتطوعين والسجلات الطبية والمحتوى بأنفسهم، باللغتين، دون مساعدة تقنية.
اختفى نمطا الإخفاق الأشد ضررًا في التتبع اليدوي
لكل طلب حالة يملكها شخص بعينه، واعتماد التبنّي يحدّث الموقع العام تلقائيًا — لم يعد ضياع الطلبات ولا بقاء بطاقات الحيوانات غير المحدَّثة ممكنًا.
مدخل يراعي إمكانية الوصول فعلًا
أهداف لمس بحجم 44px، وحصر التركيز داخل النوافذ المنبثقة، وروابط التخطي إلى المحتوى، وانعدام إزاحة التخطيط، وأدوار ARIA — معايير التدقيق لم تكن مجرد طموحات، بل حُقِّق منها بندًا بندًا.
نظام موثّق وقابل لإعادة الإنشاء، بحجم يناسب ميزانية منظمة غير ربحية
ملف تنفيذي واحد للواجهة الخلفية، وخادم واحد متواضع، وتخزين كائنات مفتوح المصدر محليًا مع مسار ترقية واضح إلى التخزين السحابي في الإنتاج. ودليل التشغيل يعني أن أي نشر جديد لا يعتمد على توفّر من أعدّه.
08 الدروس المستفادة
ماذا تعلّمنا من هذا المشروع؟
تدوين أنماط الإخفاق قبل البناء يكشف أخطاء حقيقية
كشفت المراجعة الخصومية في خطة التكامل عن إصدار SDK معطوب، وقواعد وصول مفقودة، ونمط مضاد في المخطط، قبل أن يكلّف أيٌّ منها وقتًا في تنقيح الأخطاء لاحقًا. عادة زهيدة الكلفة ومعدل كشفها مرتفع.
قوائم الفحص تتفوق على الذاكرة في ضمان الجودة بهذا الحجم
سؤال «هل تتعامل كل نقطة جلب بيانات مع حالات التحميل والخطأ والفراغ وقلة البيانات والامتلاء؟» لا يجيب عنه أحد بدقة من الذاكرة عبر أكثر من أربعين شاشة. ووثيقتا تدقيق بخانة اختيار لكل بند جعلتا التحقق فعليًا بدل أن يكون مفترَضًا.
محاذير النشر مكانها المستودع، لا رأس أحدهم
كلّفت مشكلة متغيرات البيئة وقت البناء وخطوة تهيئة S3 وقتًا مرة واحدة لكلٍّ منهما؛ وكلتاهما اليوم ملاحظتان دائمتان مع أوامر تحقق، ولن تكلّف أيٌّ منهما وقتًا مرة ثانية.
التدويل قيد تصميمي، وليس مهمة ترجمة
حقول المحتوى المكرّرة، وقواعد طباعة CJK، واكتشاف اللغة بلا أخطاء hydration — كل ذلك كان يجب حسمه مبكرًا، لأن تعديل أي منها لاحقًا كان سيمسّ كل شاشة.
أتمتة الخطوة التي ينساها البشر
خطّاف اعتماد التبنّي عشرة أسطر من شيفرة الواجهة الخلفية، تلغي أكثر الأخطاء التشغيلية احتمالًا في سير العمل كله.
يعمل مباشرةً على بيئة الاختبار · بيانات أولية حقيقية
الوحدات
كل شاشة تقابل سير عمل حقيقيًا يشغّله المأوى يوميًا، ومُلتقطة مباشرة من نسخة بيئة الاختبار العاملة. انقر على أي صورة لتكبيرها.
