إنشاء موقع ويب للمدرسة باستخدام Strapi و VueJS

أكتوبر 13, 2023 Hassan Alzahrani تطوير الويب التعليقات على إنشاء موقع ويب للمدرسة باستخدام Strapi و VueJS مغلقة

إنشاء موقع ويب للمدرسة باستخدام Strapi و VueJS

في هذا المشروع سنبدأ مع بعض خطوة بخطوة لإنشاء موقع ويب للمدرسة أو للجامعة باستخدام strapi و VueJS

وستكون سلسلة المقالات التي سنكتبها في هذه المدونة هي مستندات مشروعنا إن شاء الله

لنتعرف بداية على كل من سترابي و فيو جي اس

Strapi نظام إدارة المحتوى الـ “headless”،

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

يعمل Strapi باستخدام لغة البرمجة JavaScript، وهو مبني على Node.js ويستخدم مكتبة Koa.js للخدمة العائدة (backend).

للمزيد عن سترابي اضغط هنا

أما VueJS فهي غنية عن التعريف

إطار عمل (framework) جافاسكريبت تفاعلي يُستخدم لبناء واجهات المستخدم وتطبيقات الصفحة الواحدة (SPA). تم تطويره بواسطة المهندس Evan You وتم نشر أول إصدار له في فبراير 2014.

التخطيط لموقع المدرسة

إن إنشاء موقع للمدرسة باستخدام Strapi كنظام إدارة المحتوى وVue.js للواجهة الأمامية هو خطوة رائعة للحصول على موقع مرن وقابل للتوسع. سأوضح لك خطوات أساسية لبدء العمل:

1. إعداد البيئة:

سنقوم بتثبيت Strapi وVueJS على جهاز العمل:

  • Strapi:

أنشئ مجلد جديد ومن داخله شغل موجه الأوامر واكتب الأمر التالي

   npx create-strapi-app my-school-backend --quickstart
  1. VueJS:

لتنصيب فيو جي اس اكتب الامر التالي في نفس المجلد الرئيسي للمشروع لينشئ لك مجلد my-school-frontend بجوار مجلد my-school-backend الذي أنشأناه سابقاً

vue create my-school-frontend

في حال عدم توفر الفيو جي اس على جهازك قم بتنصيبه بكتابة الأمر

npm install -g @vue/cli

2. إعداد نماذج البيانات في Strapi:

بناءً على احتياجات المدرسة، قد نحتاج إلى إنشاء نماذج لـ:

  • الطلاب
  • المعلمين
  • الصفوف
  • المواضيع
  • الأخبار والإعلانات
  • الأحداث

سنقوم بإنشاء هذه النماذج من خلال لوحة تحكم Strapi.

3. إعداد الواجهة الأمامية باستخدام VueJS:

  1. سنقوم بتثبيت axios لجلب البيانات من Strapi:
   npm install axios
  1. ملاحظة : هذا الأمر يجب تنفيذه في موجه الأوامر من داخل مجلد my-school-frontend
  2. سنقوم بإعداد الروابط والصفحات المرتبطة بكل نموذج في Strapi.
  3. سنستخدم axios لجلب البيانات من الواجهة الخلفية (Strapi) وعرضها في مكونات Vue الخاصة بنا.

4. التوثيق والأمان:

  1. التوثيق: سنقوم بتفعيل خاصية التوثيق في Strapi وإنشاء أدوار مختلفة (مثل: مدير، معلم، طالب).
  2. الأمان: سنتأكد من تأمين واجهتنا الخلفية باستخدام CORS وحماية نقاط الوصول الهامة.

5. التنقل والتصميم:

سوف نستخدم مكتبات مثل Vue Router للتنقل بين الصفحات، و Vuetify أو BootstrapVue لتصميم واجهتك الأمامية.

6. الاختبار والإطلاق:

  1. سنقوم بالاختبار المكثف للموقع وتأكد من عمل جميع الوظائف كما هو متوقع.
  2. وسننشر الواجهة الخلفية والأمامية على الخوادم المطلوبة.

نحتاج أن تظل باستمرار على تواصلً مع فريق المدرسة لتقديم التعديلات والتحسينات المطلوبة، ونتأكد من تقديم تدريب للموظفين على كيفية استخدام النظام.

أوامر التشغيل المهمة

لتشغيل Strapi و Vue.js، يمكنك استخدام الأوامر التالية:

1. Strapi:

بعد الانتهاء من تثبيت Strapi وإعداد مشروعك، يمكنك تشغيل Strapi باستخدام:

npm run develop

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

http://localhost:1337/admin.

2. Vue.js:

بعد الانتهاء من إعداد مشروع Vue.js باستخدام Vue CLI، يمكنك تشغيل التطبيق المبني على Vue باستخدام:

npm run serve

عند تنفيذ هذا الأمر داخل مجلد مشروع Vue.js، ستبدأ الواجهة الأمامية في التشغيل، وعادةً ما تكون متاحة على الرابط

http://192.168.100.230:8080/

أو على الرابط

http://localhost:8080.

تأكد من أنك تنفذ كل أمر داخل المجلد الصحيح لكل مشروع. يعني ذلك أنك ستحتاج إلى فتح نافذة طرفية أو محطة منفصلة لكل من Strapi و Vue.js إذا كنت ترغب في تشغيلهما في نفس الوقت.

الكاتب