رحلة القيم الأسرية
كتاب تفاعلي تعيشه الأسرة… لا تقرؤه فقط
رحلة سنوية تعيش فيها الأسرة كلها قيمة واحدة في كل شهر: تنتبه لها، وتفهمها، وتطبّقها، وتستمر عليها. الأب والأم والأبناء يشاركون معاً، ولكل واحد منهم دوره وتوقيعه.
- الجهة
- جمعية سعداء للتنمية الأسرية
- المحتوى
- إعداد أ. محمد كليب
- الواجهة
- JavaScript خالص بدون إطار عمل، وتطبيق PWA
- الخادم
- Node.js وMongoDB، مع ملف احتياطي محلي
- يعمل
- بدون إنترنت، ويزامن عند عودة الاتصال
- دوري
- التطبيق كاملاً، بمفردي
01خريطة القيم
تبدأ الرحلة من الفرد، ثم الأسرة، ثم المجتمع. القيمة الأولى متاحة الآن، والبقية تُفتح تباعاً.
02كيف تعيش الأسرة القيمة
كل قيمة تمر بخمس مراحل، وفي كل مرحلة أنشطة يتابع التطبيق إنجازها. الرقم تحت كل مرحلة هو عدد أنشطتها في قيمة المسؤولية.
03ماذا تفعل الأسرة
- قصة تتكشّفقصة القيمة تظهر جزءاً بعد جزء، لتقرأها الأسرة معاً.
- لوحة رسمالأطفال يرسمون داخل التطبيق، ويُحفظ الرسم مع تقدم الأسرة.
- بطاقات تصحيح المفاهيمبطاقة تُقلب لتكشف الفكرة الصحيحة مقابل الفكرة الخاطئة.
- ألعاب ومؤقتاتلعبة «أين المسؤولية؟»، وتحدي الصبر، ومؤقت للتركيز.
- ميثاق الأسرةكل فرد يوقّع الميثاق والتعهد الشهري باسمه.
- شهادة ووسامشهادة شكر ووسام نهاية الشهر، جاهزان للطباعة.
04ثلاثة قرارات هندسية
الحفظ على الجهاز أولاً
كل نشاط يُحفظ على الجهاز فوراً، ثم يُزامن مع الخادم في الخلفية. وعند إغلاق الصفحة تُرسل آخر نسخة عبر sendBeacon حتى لا يضيع شيء. وإذا تعطلت قاعدة البيانات يحفظ الخادم في ملف محلي.
function save() {
clearTimeout(saveT);
saveT = setTimeout(function () {
localStorage.setItem(KEY, JSON.stringify(S));
}, 150);
syncCloud();
}
window.addEventListener('beforeunload', function () {
navigator.sendBeacon('/api/sync', blob);
});أسبوع لا يُفتح قبل الذي قبله
مهام الأسابيع الأربعة تُفتح بالترتيب، فالأسرة لا تقفز للنهاية. كل أسبوع يظهر مكتملاً أو حالياً أو مقفلاً.
var unlocked = (i === 0) ||
!!(S.r.weekly[i - 1] && S.r.weekly[i - 1].done);تطبيق كامل بلا إطار عمل
بدلاً من React، كل جزء في الصفحة مسجّل باسمه ويُعاد رسمه وحده. الطفل يكتب في حقل والصفحة تتحدث حوله دون أن يفقد مكانه. والنتيجة تطبيق خفيف يعمل جيداً على الأجهزة المتواضعة.
/* re-render one part of a page without losing focus */
function block(id, fn) {
BLOCKS[id] = fn;
return '<div data-block="' + id + '">' + fn() + '</div>';
}05ما يُبنى الآن
06شكر
المحتوى من إعداد أ. محمد كليب لجمعية سعداء للتنمية الأسرية، بدعم من صندوق دعم الجمعيات ومؤسسة الجميح الخيرية.