كيف تبني تطبيق تدريب لياقة عبر الإنترنت باستخدام Next.js

في نهاية هذا الدليل ستعرف كيف تبني تطبيق تدريب لياقة عبر الإنترنت، فيه قائمة عملاء وتمارين مخصصة ومتابعات أسبوعية وتطبيق للأعضاء، باستخدام Next.js وNestJS وقالب Kinora من Aniq UI. لا تحتاج إلى تصميم الشاشات ولا إلى كتابة الـ API من الصفر.

نتابع نشاطًا تجاريًا واحدًا كمثال، من الخطة الأولى حتى يوم الإطلاق. سترى أي شاشة تؤدي أي مهمة، وأي أوامر تشغّلها، وأي إعدادات توقع الناس في الخطأ. الخطوات نفسها تصلح لمدرب مستقل أو نادٍ صغير أو وكالة تبني التطبيق لعميل.

المتطلبات

Northgate Strength استوديو تدريب عبر الإنترنت. يديره مدرب رئيسي مع مدربين شخصيين اثنين. يريدون ترك جداول البيانات ومحادثات الرسائل، وإعطاء كل عميل مكانًا واحدًا يتمرن فيه. هذا ما يطلبه الاستوديو:

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

كيف يغطي القالب هذه المتطلبات

الحاجة	أين توجد	ما تستخدمه
كل مدرب يرى عملاءه فقط	لوحة التحكم والـ API	شاشة My Clients، محمية بصلاحية coaching.clients
تمرين مخصص ليوم معين	لوحة التحكم	الخطة في صفحة العميل؛ ويراها العميل ضمن Workouts
العملاء يسجلون التمارين والوجبات	لوحة التحكم، جهة العضو	جلسة التمرين المباشرة، ومكتبة التمارين، وMeal Planner
النوم والصحة وقياسات الجسم	لوحة التحكم، جهة العضو	صفحات Sleep وHealth وProgress، مع إدخال يدوي
متابعات أسبوعية	لوحة التحكم والـ API	نموذج متابعة للعميل، ومربع ردّ للمدرب
رسائل خاصة	لوحة التحكم والـ API	محادثة واحدة لكل مدرب وعميل، تصل مباشرة عبر Socket.io
الإنجليزية والعربية	لوحة التحكم والـ API	المسارات /en و/ar، وملفات الرسائل، ومحتوى يُكتب باللغتين
الفريق والصلاحيات	لوحة التحكم	شاشتا Coaches وCoach Roles
قاعدة بيانات ونطاق خاصان	الـ API	SQLite محليًا، وMySQL بالإعدادات، وملفات البيئة

قبل أن تبدأ: قرارات عليك اتخاذها

بعض الخيارات رخيصة على الورق وغالية التغيير بعد تسجيل العملاء. احسمها قبل أن تفتح الطرفية.

من سيستخدم التطبيق، وبأي أدوار؟

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

بأي لغات سيقرأ العملاء؟

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

أين سيعمل؟

محليًا يحتاج فقط إلى Docker، أو Node.js مع Yarn. في الإنتاج تحتاج إلى استضافة للوحة التحكم وأخرى للـ API، إضافة إلى قاعدة بيانات. يصلح SQLite للتطوير، والانتقال إلى MySQL مجرد تغيير في الإعدادات. قرّر مبكرًا هل ستشغّل الخوادم بنفسك أم ستستخدم منصة، لأن ذلك يغيّر طريقة ضبط ملفات البيئة.

كيف سيدفع لك العملاء؟

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

هل تريد المساعد الذكي من اليوم الأول؟

يحتاج إلى مفتاح نموذج من Google أو OpenAI أو DeepSeek، وتدفع لذلك المزوّد مباشرة. يمكنك الإطلاق بدونه وإضافته بعد أن تعمل الحلقة الأساسية من التمارين والمتابعات والرسائل.

ماذا سيسجّل العملاء يدويًا؟

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

خطوة بخطوة

الخطوة 1: اختر الحزمة

يتوفر Kinora بحزمة Full Stack (لوحة التحكم مع الـ API)، وحزمة Member & Coach Dashboard، وحزمة Backend API. تعمل لوحة التحكم وحدها ببيانات تجريبية داخل المتصفح. هذا مناسب لمراجعة التصميم، لكن لا شيء يصل إلى قاعدة بيانات، ولذلك لا يستطيع مدربان مشاركة عميل واحد.

يحتاج Northgate إلى بيانات مشتركة، فيختار حزمة Full Stack. إذا كان لديك API خاص بك، فيمكن لحزمة لوحة التحكم أن تتصل به. الرخصة تغطي عددًا غير محدود من المشاريع، بما فيها العمل الذي تسلّمه لعميل.

انظر إلى صفحة My templates في هذه اللقطة: تجد هناك ملف ZIP لكل حزمة اشتريتها.

ما الذي تتحقق منه: أن المجلد الذي استخرجته يحمل اسم حزمتك (تُستخرج حزمة full stack باسم kinora-fitness-full-stack) ويحتوي على back-end وdashboard وdocker-compose.yml. إذا وجدت بداخله مجلدًا آخر بالاسم نفسه، فادخل إلى المجلد الداخلي.

الخطوة 2: شغّله محليًا عبر Docker

نزّل ملف ZIP من My templates، وفك ضغطه، وافتح طرفية داخل المجلد kinora-fitness-full-stack. تأكد أن Docker Desktop (أو Docker Engine مع Compose) يعمل. ثم شغّل كل شيء:

docker compose up --build

يبني Docker صورتين عند أول تشغيل ويحمّل بيانات تجريبية إلى قاعدة البيانات، لذلك اترك له بضع دقائق. عند الانتهاء ستكون لوحة التحكم على localhost:3030 والـ API على localhost:8000. إذا كان برنامج آخر يشغل أحد المنفذين، فأنشئ ملف .env بجانب docker-compose.yml يحتوي على DASHBOARD_PORT=3040 أو API_PORT برقم منفذ حر، ثم أعد تشغيل الأمر.

تفضّل Node.js مباشرة؟ ثبّت Node 22.9 أو أحدث، وشغّل corepack enable مرة واحدة، ثم شغّل الـ API (yarn seed ثم yarn dev) ولوحة التحكم (yarn dev) في طرفيتين. ابدأ بالـ API أولًا.

تُظهر هذه اللقطة الطرفية مفتوحة داخل المجلد المستخرج، وهو المكان الذي يُتوقع أن يُشغَّل فيه كل أمر في هذا الدليل.

انتظر حتى يعلن الـ API أنه سليم، لأن لوحة التحكم لا تبدأ إلا بعد ذلك.

إذا اخترت طريق Node.js، فهذه طرفية الـ API بعد تنفيذ الـ seed وتشغيل الخادم.

تشغّل الطرفية الثانية لوحة التحكم على المنفذ 3030، مع تعبئة عنوان الـ API حتى تُعطَّل البيانات التجريبية.

ما الذي تتحقق منه: افتح localhost:8000/api/health. يجب أن يرد بحالة ok. إذا ظهر في لوحة التحكم تنبيه "Sample data" فهي لا تتحدث مع الـ API بعد.

ما الذي يسوء عادة:

• Docker مثبّت لكنه لا يعمل. شغّل Docker Desktop وانتظر حتى يعلن المحرك أنه جاهز.
• المنفذ 3030 أو 8000 مشغول، غالبًا بسبب تشغيل سابق أو مشروع آخر. حرّر المنفذ، أو اضبط DASHBOARD_PORT أو API_PORT كما هو موضح أعلاه.
• التشغيل الأول يبدو متوقفًا. غالبًا ما يكون ما زال يحمّل البيانات التجريبية، فانتظر حتى يصبح فحص السلامة أخضر.
• الأمر docker compose down -v يحذف وحدة تخزين قاعدة البيانات. أما docker compose down وحده فيُبقي بياناتك.

الخطوة 3: جرّب العرض التجريبي بكل دور

يملأ نموذج تسجيل الدخول نفسه تلقائيًا. افتح localhost:3030 للـ Head Coach (headcoach@example.com وكلمة المرور Coach@123). ولجهة العضو افتح localhost:3030/en/auth/login?as=client (member@example.com وكلمة المرور Member@123). حساب ثالث، trainer@example.com مع Trainer@123، يُظهر ما يراه المدرب الشخصي.

اقضِ عشرين دقيقة هنا. بصفتك مدربًا افتح My Clients ثم صفحة أحد العملاء. وبصفتك عضوًا ابدأ الجلسة المباشرة ضمن Workouts، وسجّل مجموعة، وانظر إلى Meal Planner. بهذه الطريقة يقرر Northgate أيضًا ما يحتفظ به: سيستخدم الاستوديو التمرين والتغذية والنوم والتقدم، ويتجاهل تحديات المجتمع حاليًا.

انظر إلى الخطة الأسبوعية والعمل الذي يخصصه المدرب، لأن هذين هما ما سيملؤه مدربو Northgate.

جدول المجموعات بالوزن والتكرارات وRPE هو المكان الذي يدخل منه تمرين العميل الحقيقي إلى النظام، وهو ما يقرؤه المدرب لاحقًا.

ما الذي تتحقق منه: اكتب لكل دور الشاشات الثلاث الأهم. قائمة Northgate للعميل هي Workouts والجلسة المباشرة والمتابعة الأسبوعية. وللمدرب هي النظرة العامة وMy Clients ومحادثة الرسائل. كل ما ليس في القائمة يمكن أن ينتظر.

ما الذي يسوء عادة: يحكم الناس على العرض التجريبي كأن بياناته بياناتهم. العملاء والوجبات والرسائل التجريبية بيانات اختبار. احكم على بنية الشاشات لا على الأرقام.

الخطوة 4: ضع علامة الاستوديو

العلامة التجارية موجودة في ملفات، لا في شاشة إعدادات. في مجلد لوحة التحكم:

• الملف src/config/brand.config.ts يحتوي على الاسم والوصف وبيانات التواصل، لكل منها قيمة بالإنجليزية وأخرى بالعربية. اضبط domain.url أيضًا، لأنه يأتي بعنوان مؤقت.
• الملف src/components/icons/KinoraMark.tsx يرسم شعار العلامة بالكود.
• الملف src/styles/theme-variables.css يحتوي على كل الألوان. لون التمييز هو --primaryColor، ومعرّف في كتلتي المظهر الفاتح والداكن.
• الملف src/app/layout.tsx يحمّل الخطوط: Inter للإنجليزية وIBM Plex Sans Arabic للعربية.

يظهر اسم المنتج أيضًا في بعض الرسائل، مثل بطاقة الترحيب وتحية المساعد. ابحث في مجلد messages عن Kinora وعن كتابته بالعربية، وغيّر اللغتين معًا. قيم العلامة تُدمج وقت البناء، لذلك شغّل docker compose up --build من جديد بعد كل جولة تعديلات.

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

ما الذي يسوء عادة:

• تعديل ملف الرسائل الإنجليزي وحده. غيّر دائمًا المفتاح نفسه في ar.json.
• التذييل ما زال يرتبط بصانع القالب. يأتي الاعتماد من src/config/author.config.ts.
• الروابط وبيانات التواصل في brand.config.ts تشير في البداية إلى صانع القالب، فاستبدلها ببياناتك.

الخطوة 5: ابنِ الكتالوج بلغتين

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

يأتي العرض التجريبي بـ 23 تمرينًا و6 حصص تمرين و4 برامج و10 أطباق. يحتفظ Northgate بما يناسبه ويستبدل الباقي بمحتواه. أمثلة على الإدخالات: القرفصاء بالكأس (goblet squat) والرفعة الميتة الرومانية كتمارين، وأسبوع كامل للجسم على ثلاثة أيام كحصة تمرين، وطبق أرز بالتونة كطبق. للطبق تدخل غرامات البروتين والكربوهيدرات والدهون، وتُحسب السعرات تلقائيًا.

ولأن الأعضاء يقرؤون السجلات نفسها، يظهر التعديل في المكتبة والخطة الأسبوعية والجلسة المباشرة في الوقت نفسه.

اعمل بهذا الترتيب، حتى لا يشير شيء إلى ما لم يُنشأ بعد:

1. التمارين أولًا، مع خطوات الأداء والأخطاء الشائعة للحركات التي سيؤديها العملاء فعلًا.
2. ثم حصص التمرين، مبنية من تلك التمارين مع المجموعات والتكرارات.
3. ثم البرامج، وهي ترتب حصص التمرين في أسابيع. العضو التجريبي في الأسبوع 6 من 8 في برنامج اسمه Strength Foundation.
4. الأطباق لمخطط الوجبات، حتى يسجّل العملاء من قائمة مشتركة.

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

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

ما الذي تتحقق منه: سجّل الدخول بصفتك عضوًا وابحث في المكتبة عن حركة أنشأتها للتو. افتح صفحتها وتأكد أن النصين الإنجليزي والعربي يظهران عند تبديل اللغة.

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

الخطوة 6: أعدّ المدربين والأدوار وقائمة العملاء

يسجّل المدربون والعملاء الدخول من النموذج نفسه، ومن جدول حسابات واحد، وتحدد أدوار الشخص ما يراه. يطبق الـ API الصلاحيات نفسها التي يطبقها الشريط الجانبي. ينشئ الـ seed سبعة أدوار. اثنان منها الأهم هنا:

• الدوران Head Coach وPersonal Trainer يملكان coaching.clients، فيحصلان على My Clients وقائمة عملاء خاصة بكل منهما.
• الدور Coach يستطيع نقل الأعضاء بين المدربين، لكنه لا يملك coaching.clients.

ينشئ Northgate ثلاثة حسابات للفريق ضمن Coaches: المدرب الرئيسي ومدربان شخصيان. وإذا أراد أن يعمل Coach عادي أيضًا على قائمة عملاء، فإنه يحدد coaching.clients لذلك الدور في شاشة Coach Roles. يمكن لكل عضو أن يكون له مدرب نشط واحد فقط.

من My Clients يستخدم المدرب Add client ليتولى عضوًا ليس له مدرب. وفي صفحة العميل يخصص المدرب تمرينًا لتاريخ معين، مع ملاحظة اختيارية. ويُحتسب منجزًا عندما ينهي العميل جلسة من ذلك التمرين. تسأل المتابعة الأسبوعية العميل عن طاقته ووزنه وملاحظة، ويردّ المدرب من الشاشة نفسها. الرسائل محادثة واحدة لكل ثنائي، وبحد أقصى 2000 حرف للرسالة.

ما الذي تتحقق منه: سجّل الدخول بصفتك المدرب الرئيسي، وافتح عميلًا، وخصص تمرينًا لتاريخ، ثم سجّل الدخول بصفة ذلك العميل وتأكد أنه يظهر قبل أي شيء اختاره بنفسه. أنهِ جلسة من ذلك التمرين وراقب احتساب التخصيص منجزًا. ثم أرسل متابعة بصفة العميل وردّ عليها بصفة المدرب.

ما الذي يسوء عادة:

• مدرب لا يرى My Clients. دوره لا يملك coaching.clients.
• Add client لا يعرض أحدًا. لا يظهر إلا الأعضاء الذين ليس لهم مدرب، ويمكن للعضو أن يكون له مدرب نشط واحد. انقل الأعضاء بين المدربين ضمن Gym بصلاحية coaching.assign.
• فشل المرفقات في الرسائل. فهي تمر عبر مسار الرفع وتحتاج إلى حاوية التخزين من الخطوة التالية.

الخطوة 7: أضف تخزين الصور، ومفاتيح الأجهزة إن أردت

تحتاج الصور وصور التقدم والمرفقات إلى تخزين: Cloudflare R2، أو أي خدمة أخرى تدعم بروتوكول S3. بدونه يُعرض كل شيء بصور تجريبية مرفقة، لكن أي رفع جديد يرد بخطأ 400. اضبط متغيرات R2_* الخمسة في back-end/.env، وأخبر لوحة التحكم باسم المضيف العام لحاويتك في NEXT_PUBLIC_MEDIA_HOSTNAME (ومع Compose، MEDIA_HOSTNAME).

لا يسحب Kinora بيانات من أي خدمة ساعات أو أجهزة تتبع. تصل البيانات عندما يرسلها شيء ما. ينشئ العميل مفتاحًا في Settings، ويرسل جهاز أو خدمة تجميع طلب POST إلى /api/ingest/daily-metrics مع ذلك المفتاح في ترويسة X-Api-Key. يتخطى Northgate هذا عند الإطلاق ويترك العملاء يسجلون يدويًا.

هنا يدير العميل التنبيهات والخصوصية والمظهر وأجهزته المتصلة، بما فيها المفاتيح التي يستخدمها الجهاز لإرسال البيانات.

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

ما الذي يسوء عادة: ترد عمليات الرفع بـ 400 لأن متغيرات الحاوية مفقودة أو ما زالت بقيمها التجريبية. القيمة التي بقيت كمثال تُعدّ غير مضبوطة.

الخطوة 8: فعّل المساعد الذكي (اختياري)

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

يبقى متوقفًا حتى تضع مفتاح Google Gemini أو OpenAI أو DeepSeek في back-end/.env. أسماء المتغيرات مذكورة في .env.example. وحتى ذلك الحين تقول الصفحة إنه لا يوجد نموذج متصل، وتعمل كل الشاشات الأخرى. رسوم المزوّد عليك. والمسار الذي يستخدمه وكيل برمجة، POST /api/mcp، يبقى مغلقًا أيضًا حتى تضبط MCP_API_KEY خاصًا بك.

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

ما الذي يسوء عادة: تقول الصفحة إنه لا يوجد نموذج متصل. إما أن المفتاح مفقود، أو أنه ما زال يساوي القيمة التجريبية في .env.example. أعد تشغيل الـ API بعد تغييره.

الخطوة 9: افحص العربية والمظهرين وهاتفًا حقيقيًا

افتح localhost:3030/ar. تنعكس لوحة التحكم كلها، وكذلك شاشات المدرب. كل كلمة ظاهرة موجودة في messages/<namespace>/en.json وفي ar.json. غيّر القيمة، وأبقِ المفتاح، وعدّل الملفين.

يدعم محتوى الكتالوج لغتين فقط. لغة ثالثة تعني تعديل قوائم اللغات، وإضافة ملفات رسائل، وتوسيع حقول المحتوى في الـ API. بدّل بين الفاتح والداكن في بعض الشاشات، ثم افتح التطبيق على هاتف حقيقي قبل أن تدعو العملاء.

ما الذي تتحقق منه: بدّل اللغة في صفحة تسجيل الدخول، ثم في بعض الصفحات داخل التطبيق، وتأكد أن الأرقام والتواريخ والمخططات ما زالت تُقرأ بشكل صحيح. افعل ذلك في المظهرين الفاتح والداكن.

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

الخطوة 10: انتقل إلى الإنتاج

انتقل إلى الإنتاج بهذا الترتيب:

1. أنشئ سرًّا قويًا بالأمر node -e "console.log(require('crypto').randomBytes(48).toString('hex'))" واضبطه كقيمة JWT_SECRET.
2. في back-end/.env اضبط NODE_ENV=production، إضافة إلى CORS_ORIGIN وFRONTEND_URL على عنوان لوحة التحكم، مع https:// وبدون شرطة مائلة في النهاية. يرفض الـ API العمل مع سر فارغ أو تجريبي، أو مع CORS_ORIGIN فارغ.
3. ابنِ الـ API، وأنشئ جداوله مرة واحدة بالأمر yarn db:sync:prod، ثم شغّله. استخدم yarn seed:prod إذا أردت أيضًا الحسابات التجريبية كنقطة بداية.
4. في dashboard/.env اضبط NEXT_PUBLIC_API_BASE_URL (مع /api في النهاية) وشغّل yarn build. هذه القيم تُدمج وقت البناء، فلا أثر لأي تغيير حتى تبني من جديد.
5. غيّر كل كلمات المرور التجريبية المنشورة، أو احذف الحسابات التجريبية ضمن Gym وCoaches.

مع MySQL، أنشئ قاعدة بيانات فارغة، واضبط DB_TYPE وDB_DATABASE، وشغّل أمر الـ seed أو المزامنة. وأخيرًا أضف ما يتركه القالب لك: مزوّد بريد إلكتروني (فهو لا يرسل أي رسالة)، وإعادة تعيين كلمة المرور ذاتيًا، وطريقة للتحصيل مقابل التدريب.

ما الذي تتحقق منه بعد الإطلاق: سجّل الدخول على النطاق الحقيقي بصفة عضو في الفريق وبصفة عميل، وتأكد أن جرس الإشعارات المباشرة يعمل وأن المدرب يستطيع مراسلة عميل. إذا لم تصل الإشعارات، فإن عنوان المقبس (FRONTEND_URL) لا يطابق العنوان في المتصفح.

ما الذي يسوء عادة:

• يرفض الـ API التشغيل. يطبع سطرًا لكل مشكلة، وغالبًا يكون JWT_SECRET فارغًا أو تجريبيًا، أو CORS_ORIGIN فارغًا.
• المتصفحات محجوبة. انسخ كل عنوان حرفًا بحرف من شريط عنوان المتصفح، مع https:// وبدون الشرطة المائلة الأخيرة.
• يرى الجميع "Too many attempts" خلف وكيل (proxy). يسمح تسجيل الدخول بـ 10 طلبات في الدقيقة لكل عنوان، وخلف وكيل عام يشترك كل الزوار في عنوان واحد. اضبط TRUST_PROXY على عدد الوكلاء الموضوعين أمام الـ API.

التشغيل اليومي

بعد أن يعمل Northgate، يكاد التطبيق يدير نفسه، ويعمل المدربون من قائمة قصيرة من الشاشات.

صباح المدرب

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

الإيقاع الأسبوعي

يرسل كل عميل متابعة واحدة في الأسبوع بالطاقة والوزن وملاحظة. يردّ المدرب، ثم يخصص تمارين الأسبوع التالي لتواريخ محددة. يُستنتج الالتزام من الجلسات التي ينهيها العميل فعلًا، فلا يوجد شيء تعلّمه بيدك.

الاعتناء بالحسابات

ضمن Gym يرى أعضاء الفريق الذين يملكون الصلاحية المناسبة كل الأعضاء، ويفتحون صفحة عضو، ويستعيدون عضوًا محذوفًا. حذف العضو ينقله إلى قائمة المحذوفين بدل محوه. اضغط Ctrl+K (أو Cmd+K على Mac) في أي مكان لفتح البحث، الذي يجد الأعضاء والمدربين والأدوار وعناصر الكتالوج المسموح لك بفتحها.

تغيير الصلاحيات

عدّل دورًا في شاشة Coach Roles فيصل التغيير إلى الأشخاص المسجَّل دخولهم، عبر اتصال مباشر، دون أن تطلب منهم تسجيل الخروج.

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

قاعدة البيانات مع SQLite ملف، وتوجد في وحدة تخزين Docker إذا استخدمت Compose. ومع MySQL تكون على خادم قاعدة البيانات لديك. وفي الحالتين جدولْ نسخك الاحتياطية بنفسك. القالب لا يفعل ذلك عنك.

مثال على خطة إطلاق أسبوعًا بأسبوع

هذا جدول مثال لـ Northgate، وليس وعدًا بالمدة التي سيستغرقها مشروعك. استخدمه كنمط ومدّده بما يناسبك.

• الأسبوع 1، الفهم. شغّل المنظومة عبر Docker، وجرّب الدورين، وأنهِ قائمة القرارات أعلاه.
• الأسبوع 2، اجعله لهم. طبّق العلامة التجارية، واستبدل الكتالوج التجريبي بتمارين الاستوديو وجلساته وبرامجه باللغتين.
• الأسبوع 3، الأشخاص والقواعد. أنشئ حسابات الفريق، واضبط الأدوار، وأضف عددًا قليلًا من عملاء الاختبار، وشغّل الحلقة كاملة: تخصيص، تمرين، متابعة، ردّ، رسائل.
• الأسبوع 4، الإنتاج. جهّز الاستضافة وملفات البيئة وقاعدة البيانات والتخزين. ابنِ، وأنشئ الجداول، وغيّر كلمات المرور، واختبر على هاتف حقيقي وبالعربية.
• الأسبوع 5، إطلاق تجريبي. ادعُ بعض العملاء الحقيقيين وأصلح ما يعثرهم قبل الانفتاح على عدد أكبر.

قائمة فحص الإطلاق

• استُبدل اسم العلامة وشعارها وألوانها وخطوطها في المظهرين.
• القيمة domain.url وبيانات التواصل والروابط في brand.config.ts تشير إلى استوديوك.
• كل رسالة غُيّرت عُدّلت في en.json وar.json معًا.
• سجلات الكتالوج مملوءة باللغتين.
• حسابات الفريق منشأة، والأدوار مراجَعة، ودور Coach أُعطي صلاحية قائمة العملاء إن احتاجها.
• أُنشئ JWT_SECRET، وضُبط NODE_ENV=production، وضُبط CORS_ORIGIN وFRONTEND_URL مع https://.
• أُنشئت الجداول بالأمر yarn db:sync:prod، أو حُمّلت البيانات التجريبية ثم نُظّفت.
• غُيّرت كل كلمات المرور التجريبية المنشورة أو حُذفت الحسابات التجريبية.
• حاوية التخزين متصلة، وأُعيد بناء لوحة التحكم مع مضيفها العام.
• مزوّد بريد إلكتروني وخطة لإعادة تعيين كلمة المرور جاهزان، لأن القالب لا يتضمن أيًّا منهما.
• اختيرت طريقة لتحصيل المدفوعات من العملاء خارج التطبيق.
• أُضيف مفتاح الذكاء الاصطناعي، أو ترك المساعد متوقفًا عن قصد.
• نسخ احتياطية لقاعدة البيانات مجدولة.
• جرى الاختبار على هاتف حقيقي وبالعربية وفي المظهرين الفاتح والداكن.

قالب جاهز أم من الصفر أم منصة مستضافة

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

منصة تدريب مستضافة

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

البناء من الصفر

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

البدء من قالب

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

كم يكلف التشغيل

تبدأ حزم القالب من $99، وحزمة Full Stack التي يستخدمها Northgate بسعر $149، مع رخصة تجارية ودعم مدى الحياة. بعد ذلك تدفع مقابل ما تفعّله:

• استضافة للوحة التحكم والـ API، وقاعدة بيانات إذا تجاوزت SQLite.
• حاوية تخزين متوافقة مع S3 مثل Cloudflare R2، إذا كان العملاء يرفعون الصور. راجع صفحة أسعار المزوّد نفسه.
• مفتاح ذكاء اصطناعي من Google أو OpenAI أو DeepSeek، يحاسبك عليه ذلك المزوّد، فقط إذا أردت المساعد.
• اسم نطاق.

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

ماذا تخصص بعد ذلك

• برامجك. استبدل البرامج التجريبية الأربعة بتقسيمات الاستوديو الأسبوعية، باللغتين.
• أدوار المدربين. امنح coaching.clients لأدوار أخرى، أو أنشئ دورًا لمدرب تغذية فقط.
• الشريط الجانبي. احذف عناصر Demos من navigationData.ts عندما تنتهي منها.
• لون التمييز. انقل --primaryColor إلى لون الاستوديو وتحقق من المظهرين.
• بيانات الأجهزة. وجّه تطبيق تتبع أو خدمة تجميع إلى مسار الاستقبال.
• إعادة تعيين كلمة المرور. أضف مساري إعادة التعيين ومزوّد بريد حتى يتمكن العملاء من استرجاع حساباتهم بأنفسهم.

أخطاء شائعة

تغيير قيمة بيئة دون أن يظهر أي تغيير

كل قيمة NEXT_PUBLIC_* تُدمج في كود المتصفح وقت البناء. أعد تشغيل yarn dev، أو شغّل yarn build من جديد، أو شغّل docker compose up --build بعد أي تغيير.

توقّع أن يعرض دور Coach شاشة My Clients

لا يراها إلا الأدوار التي تملك coaching.clients. دور Coach المنشأ بالـ seed لا يملكها، فامنحه هذه الصلاحية أو استخدم Personal Trainer.

الإطلاق بكلمات المرور التجريبية المنشورة

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

افتراض أن "نسيت كلمة المرور" ترسل بريدًا إلكترونيًا

هي لا ترسل. الصفحات مجرد شاشات، والقالب لا يرسل أي بريد. يستطيع حساب فريق يملك الصلاحية المناسبة ضبط كلمة مرور عميل من صفحته ضمن Gym إلى أن تبني إعادة التعيين.

ترك لوحة التحكم على بيانات تجريبية

إذا ظهر تنبيه "Sample data" فقد بُنيت لوحة التحكم بدون عنوان API. وما تغيّره يُخزَّن في المتصفح لا في قاعدة البيانات.

الأسئلة الشائعة

كيف أبني تطبيق تدريب لياقة بـ Next.js؟

ابدأ من قالب فيه حلقة التدريب جاهزة، ثم غيّر العلامة والكتالوج والأدوار. يمنحك Kinora لوحة تحكم بـ Next.js 16 للعملاء والمدربين وواجهة API بـ NestJS، فتصرف وقتك على المحتوى بدل السباكة التقنية.

هل يمكنني استخدامه لعملاء؟

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

هل يدعم العربية والاتجاه من اليمين إلى اليسار؟

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

هل أحتاج إلى واجهة خلفية؟

لمنتج حقيقي، نعم. يمكن للوحة التحكم أن تعمل وحدها ببيانات تجريبية، لكن مشاركة البيانات بين المدربين والعملاء تحتاج إلى الـ API. وحزمة Full Stack تتضمنه.

هل يتصل بساعة ذكية؟

ليس مباشرة. ليس فيه تكامل مدمج مع الساعات أو أجهزة التتبع. يستطيع جهاز أو خدمة تجميع إرسال القراءات عبر مسار الاستقبال بمفتاح شخصي.

أي قاعدة بيانات يستخدم؟

SQLite للعمل المحلي وMySQL بالإعدادات. تغيّر الإعدادات لا الكود.

هل يقبل المدفوعات؟

لا. لا يوجد مزوّد دفع في القالب، وبطاقة الفوترة في الإعدادات تعرض أرقامًا تجريبية. أضف أداة فوترة خاصة بك إذا كنت تتقاضى من العملاء.

هل يستطيع مدرب رؤية عملاء مدرب آخر؟

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

هل يمكنني تشغيل لوحة التحكم فقط بدون الـ API؟

نعم، لأعمال التصميم. تعمل حزمة لوحة التحكم ببيانات تجريبية محفوظة في المتصفح، وتبقى تغييراتك في ذلك المتصفح. ولمشاركة البيانات تحتاج إلى الـ API.

كيف أضيف لغة غير الإنجليزية والعربية؟

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

جرّبه بنفسك

افتح العرض التجريبي للمدرب والعرض التجريبي للعضو، ثم اقرأ توثيق Kinora أو زر صفحة منتج Kinora. وللمزيد من الخيارات، تصفح قوالب الصحة واللياقة أو دليل أفضل قوالب Next.js.

Kinora أيضًا واحد من القوالب العشرة في Next.js Templates Bundle.