كيفية إنشاء أول حزمة MERN (MongoDB و Express JS و React JS و Node JS)

اهلا ياجماعة،

هل تعرف كيفية إنشاء MERN Stack؟ هل تعرف ما هو MERN Stack؟ هل تعرف متى ستحتاج إلى MERN Stack؟

في هذا البرنامج التعليمي ، سأعلمك كيفية إنشاء تطبيق MERN Stack بسيط.

بادئ ذي بدء ، مجموعة MERN Stack هي مزيج من أربع تقنيات: Mongo DB و Express JS و React JS و Node JS.

حسناً سام ، أود أن أتعلم كيف أقوم بإنشاء أول MERN ، لكن ... ماذا يعني ذلك؟

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

  • Mongo DB: قاعدة بيانات مفتوحة المصدر تعتمد على المستندات ، توفر لك قابلية التوسع والمرونة.
  • Express JS: قاعدة منظمة مصممة لتطوير تطبيقات الويب وواجهات برمجة التطبيقات.
  • React JS: مكتبة Javascript Front-end لبناء واجهات المستخدم. تحتفظ بها فيسبوك.
  • Node JS: وقت تشغيل javascript مبني على محرك V8 JS من Chrome.

ربما سمعت عن اختصار آخر يشبه إلى حد بعيد MERN ، ودعا MEAN ، هناك ، هو نفسه تقريبا ، ولكن الفرق هو أننا نستخدم الزاوي بدلا من React.

لذلك ، أعتقد أن أفضل طريقة لتعلم كل شيء هي تقديم مثال عملي ، وهذا يعني بالنسبة لحالتنا أننا سننشئ نموذج أفلام CRUD (إنشاء وقراءة وتحديث وحذف).

1. إعداد الخلفية

هنا ، سنقوم بإنشاء جانب الخادم من تطبيقنا ، حيث سنقوم بإنشاء RESTful باتباع الخطوات.

أولاً ، دعنا ننشئ دليلًا فارغًا سيكون أصل نظامنا.

أفلام mkdir $ التطبيق
أفلام مؤتمر نزع السلاح التطبيق

بعد ذلك ، دعونا ننشئ مجلدًا فارغًا آخر يسمى الخادم والذي سيكون المجلد الخلفي.

خادم mkdir $
خادم مؤتمر نزع السلاح

هنا ، سننشئ الحزمة الخاصة بنا.

هل سنخلق ماذا؟ سام ، ما هي package.json؟

ملف package.json هو مجرد بيان لمشروع Node.js الخاص بك ، ويحتوي على بيانات التعريف الخاصة به. يمكنك إدارة التبعيات الخاصة بمشروعك وإعداد نصوص تساعدك على تثبيت التبعيات وإنشاء تصميمات لتشغيل الاختبارات وأشياء أخرى.

لإنشاء package.json تحتاج إلى مدير الحزم ، يمكنك اختيار NPM (Node Package Manager) أو YARN. لا تتردد في استخدام ما تفضله.

لذلك ، دعونا ننشئ ملفنا.

الغزل $ الحرف الأول
أو
$ npm init -y

سيتم طرح الأسئلة المتعلقة بمشروعك. إذا كنت ترغب في الحفاظ على الافتراضي الذي توفره NPM أو YARN ، يمكنك فقط كتابة إدخال حتى النهاية.

بعد ذلك ، يمكنك العثور على الملف في مجلد الخادم.

$ ls
package.json

باستخدام هذا الملف ، يمكننا تثبيت تبعياتنا.

غزل $ إضافة صريح محلل الجسم كورس عقيد النمس
أو
npm $ تثبيت صريح الجسم محلل cong mongoose nodemon
يا سام ، خذ الأمور بسهولة ، ماذا تعني هذه الأسماء؟

جندب قليلا ببطء.

  • Express: إنه إطار عمل الخادم (The E in MERN).
  • محلل النص الأساسي: مسؤول عن إخراج الهيئة من طلب الشبكة.
  • Nodemon: أعد تشغيل الخادم عندما يرى تغييرات (لتجربة تطوير أفضل).
  • Cors: حزمة لتوفير الوسيطة Connect / Express التي يمكن استخدامها لتمكين CORS مع خيارات مختلفة.
  • Mongoose: إنها نموذج كائن MongoDB أنيق لـ node.js

الآن أنت تعرف التبعيات الأساسية التي نحتاجها في الوقت الحالي.

إذا أدرجت مجلد الخادم ، فستلاحظ أن شيئا ما قد تغير.

$ ليرة سورية
node_modules package.json yarn.lock

انظر إلى المجلد الجديد node_modules والملف الجديد yarn.lock (إذا كنت تستخدم NPM ، فإن الملف هو package-lock.json). باستخدام هذين الملفين ، يمكن تفسير مشروعك.

يمكننا إنشاء ملف NodeJS الأول لدينا.

لبدء التطبيق ، ما عليك سوى القيام به:

index.js $ عقدة

إذا كان بإمكانك رؤية الرسالة "خادم يعمل على المنفذ 3000" ، فهذا يعني أن كل ما قمت به حتى الآن هو الصحيح.

تطبيق عقدة JS قيد التشغيل

يمكنك فتح متصفح واكتب مضيف محلي: 3000 ، سترى الرسالة "Hello World".

مدهش!!! أنت قادر على رؤية خادمك يعمل.

1.1. تثبيت MongoDB

الآن ، نحن بحاجة إلى تثبيت MongoDB. لهذا ، فقط اكتب على محطة الخاص بك:

$ الشراب تثبيت mongodb
مرحبًا يا Sam ، لا أستخدم Mac ، لأن نظام التشغيل الخاص بي هو Linux (أو Windows). ما يجب أن أقوم به؟

هذه هي حالة بسيطة للغاية ، يمكنك فقط اتباع الخطوة على هذا الرابط المقدمة من MongoDB.

بعد تثبيت MongoDB ، تحتاج إلى إنشاء الدليل حيث ستقوم بتخزين البيانات.

$ mkdir -p / data / db

لتنفيذ MongoDB كخدمة:

خدمات المشروب $ تبدأ mongodb

لطيف! الخطوة التالية هي إنشاء قاعدة بياناتنا التي نسميها: السينما.

$ mongo
> استخدم السينما

وهذا كل شيء ، لقد أنشأنا للتو قاعدة البيانات الخاصة بنا باستخدام هذه الأوامر. سهل جدا.

بالعودة إلى كود جافا سكريبت الخاص بنا ، نحتاج إلى إنشاء اتصال من خادمنا باستخدام مكتبة Mongoose.

لنقم بإنشاء دليل جديد يسمى DB (داخل مجلد الخادم) وملف جديد يسمى index.js بداخله.

$ mkdir db
$ touch index.js

تحديث خادم الملفات الرئيسي / index.js لدينا شيء من هذا القبيل.

إذا ألقيت نظرة على المحطة الطرفية ، فسترى أنه لم يتغير شيء. هذا لأنه عندما تكتب index.js عقدة ، فهذا يعني أن العقدة تحافظ على الإعداد الأخير قبل أن تبدأ. إذا كنت ترغب في إعادة تشغيل التطبيق ، فأنت بحاجة إلى إغلاق تطبيق جديد وفتحه. ومع ذلك ، في بداية هذا البرنامج التعليمي ، أخبرتك عن nodemon ، إنه سيعيد تشغيل الخادم في كل مرة يشاهد فيها تغييرات في أي ملف لمشروعنا. من الآن ، دعونا نفعل هذا.

$ nodemon index.js

1.1.1. إنشاء مخطط للأفلام

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

لنقم بإنشاء مجلد باسم النماذج وإضافة ملف باسم movie-model.js.

نماذج mkdir $
نماذج CD $
$ touch movie-model.js

1.2. إنشاء طرق

هنا ، سننشئ جميع عمليات CRUD وننشئ نقاط REST لدينا. لنقم بإنشاء مجلدين إضافيين على الخادم: الطرق ووحدات التحكم. في مجلد المسار ، دعنا ننشئ ملف movie-router.js وفي مجلد وحدة التحكم ، movie-ctrl.js.

mkdir $ طرق التحكم
طرق لمس $ / movie-router.js
التحكم باللمس $ / movie-ctrl.js

أخيرًا ، دعنا نضيف الموجه في ملف server / index.js.

1.3. اختبار يدويا تطبيقنا

لاختبار تطبيقنا ، أود تقديم أداتين أخريين: Postman و Robo 3T. ستساعدنا هذه الأدوات في التحقق من عمل التطبيق لدينا (لن أشرح لك كيفية التثبيت لأنه سهل ويمكنك العثور عليه في مواقع الويب الخاصة به).

الآن ، دعنا نختبر إضافة فيلم جديد. أولاً ، يجب أن ننشئ ملف JSON يحتوي على معلومات الفيلم.

{
    "name": "Avengers: Endgame" ،
    "الوقت": ["14:15" ، "16:00" ، "21:30" ، "23:00"] ،
    "التقييم": 8.8
}

لهذا ، نحتاج إلى نشر هذه المعلومات في قاعدة البيانات.

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

{
    "name": "Avengers: Endgame" ،
    "الوقت": ["12:00" ، "14:15" ، "16:00" ، "21:30" ، "23:00"] ،
    "التقييم": 8.8
}

دعنا نضيف فيلمين آخرين.

{
    "اسم": "سيد الخواتم: عودة الملك" ،
    "الوقت": ["15:00" ، "20:00"] ،
    "التقييم": 8.9
}
و
{
    "الاسم": "العراب" ،
    "الوقت": ["21:00" ، "23:50"] ،
    "تصنيف": 9.2
}

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

باستخدام طريقة GET نفسها ، سنختار فقط معلومات حول فيلم "العراب".

وأخيراً ، دعنا نحذف نفس الفيلم.

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

لنبدأ في إعداد Frontend.

2. إعداد الواجهة الأمامية

سنقوم هنا بإنشاء الجزء المرئي ، حيث سيتفاعل المستخدم مع أداتنا.

أول شيء يجب أن نفعله هو الانتقال إلى جذر مشروعنا وإنشاء جانب العميل. لهذا ، نحن بحاجة إلى فهم حول NPX.

NPX هي أداة هدفها هو المساعدة في تجربة تجربة استخدام الحزم من سجل NPM. نظرًا لأن NPM يجعل من السهل للغاية تثبيت وإدارة التبعيات المستضافة على السجل ، فإن NPX يجعل من السهل استخدام أدوات CLI وغيرها من الملفات التنفيذية المستضافة على السجل.

مع العلم بذلك ، دعونا إنشاء مديرنا. إذا كان لديك جانب الخادم للواجهة الخلفية ، فلدينا جانب العميل للواجهة الأمامية.

عميل إنشاء تطبيق - تفاعل - $ npx
عميل CD $
بداية الغزل $

إذا فتح التطبيق هذه الشاشة ، فهذا يعني أنك فعلت الأمور في نصابها الصحيح.

المنفذ الافتراضي هو الرقم 3000 ، لكننا قمنا بالفعل بتعيين هذا المنفذ على Backend لدينا. ثم ، لنغيرها إلى 8000.

يا سام ، لماذا اخترت المنفذ 8000؟

لا شيء خاص ، أحب هذا الرقم وأنا أستخدم حاليًا 3000 للخلفية و 8000 للواجهة الأمامية.

لتغيير المنفذ ، نحتاج إلى تغييره على client / package.json. تضمين PORT = <رقم المنفذ> في الملف.

حسن! ربما اكتشفت أن React ينشئ بعض الملفات الافتراضية. دعنا نزيل الملفات غير الضرورية لنا.

$ rm App.css index.css App.test.js serviceWorker.js

في الوقت الحالي ، لا داعي للقلق بشأن هذه الملفات ، ربما في منشور آخر ، يمكنني شرحها.

سام ، إنه ممل ، متى سأرى تطبيقي قيد التشغيل؟

الصبر صديقي العزيز ، كما قال أكسل روز: "كل ما نحتاج إليه هو مجرد صبر صغير". بعد بضع دقائق ، سترى تطبيقك يعمل.

لكن أولاً ، نحتاج إلى إعداد مشروعنا لتثبيت التبعيات. سنحتاج إلى Axios و Bootstrap و StyledComponents و React Table

  • أكسيوس: إنه رمز غير متزامن قائم على وعد. إنها HTTP الأكثر شعبية على أساس الوعد.
  • bootstrap: إنها مجموعة أدوات مفتوحة المصدر ومكتبة المكونات الأمامية الأكثر شعبية حيث تتيح لك التطوير باستخدام HTML و CSS و JS.
  • styled-components: يتيح لك كتابة كود CSS الفعلي لتصميم مكوناتك.
  • طاولة التفاعل: إنها شبكة بيانات خفيفة الوزن وسريعة وقابلة للتمديد مصممة لتفاعل.
  • react-router-dom: روابط DOM لأجهزة التوجيه التفاعلية.
يضيف غزل $ styled-component رد فعل الجدول - رد فعل - جهاز توجيه axios bootstrap
أو
npm $ تثبيت مكونات رد فعل الجدول رد الفعل على غرار - رد فعل domios bootstrap - حفظ

في دليل src ، يجب أن ننشئ الدلائل الجديدة التي ستكون هيكل مشروعنا. قم بإنشاء ملف index.js داخل كل دليل ، باستثناء مجلد التطبيق.

مؤتمر نزع السلاح src
$ mkdir api لمكونات التطبيق
$ touch api / index.js components / index.js pages / index.js style / index.js

نقل ملف App.js إلى دليل التطبيق ، ولكن إعادة تسمية index.js.

$ mv App.js app / index.js

الآن يمكننا الرمز.

بادئ ذي بدء ، قم بتحديث ملف العميل / src / index.js الخاص بنا للحصول على الكود التالي.

بعد ذلك ، سنقوم بتطوير رأس التطبيق. الآن ، سنقوم بتطوير مكونات مشروعنا. قم بإنشاء الملفات الجديدة NavBar.jsx و Logo.jsx و Links.jsx.

مكونات $ touch / مكونات NavBar.jsx / مكونات Logo.jsx / Links.jsx
انتظر لحظة سام! أرى الآن بدلاً من JS أنك تستخدم JSX. لماذا تفعل هذا؟

بسيط ، JSX هو رمز اختاره Reacts لتحديد eXtension لجافا سكريبت. يوصى باستخدامه مع React لوصف شكل واجهة المستخدم.

مع العلم بذلك ، دعونا ننشئ ملفاتنا.

يمكنك أن ترى كيف نظيفة هي ملفاتنا. هل تتذكر أننا أنشأنا مكونات الملف / index.js؟ هذا الملف الذي نقوم بتصدير مكوناتنا ، سيسمح لنا باستيرادها في ملفات أخرى باستخدام الترميز:

استيراد {blabla} من ". / المكونات"

انظر إلى مدى بساطة الأمر.

تحديث التطبيق / index.js. نحن قادرون على رؤية نمو المشروع.

2.1. دمج BE و FE

الآن سوف نتعلم كيفية دمج الواجهة الخلفية مع Frontend لدينا.

بادئ ذي بدء ، دعونا نقوم بتحديث ملف api / index.js.

رائعة حقا! الآن يمكننا تطوير طرقنا. لهذا ، سنحتاج إلى تحديث تطبيق / index.js للملف مضيفًا الطرق.

في مجلد الصفحات ، لنقم بإنشاء الملفات التي ستؤدي دور صفحة كل تطبيق: MoviesList.jsx و MoviesInsert.jsx و MoviesUpdate.jsx.

صفحات مؤتمر نزع السلاح
$ touch MoviesList.jsx MoviesInsert.jsx MoviesUpdate.jsx

في الوقت الحالي ، دعنا ننشئ ملفات simples حيث يمكنك رؤية انتقال الصفحة عند النقر فوق كل رابط من NavBar.

انظر إلى كم هي بسيطة.

يا سام ، لقد رأيت شيئًا غريبًا. في رمز الطريق لتحديث الفيلم الذي تضعه ": id" بنقطتين ، لكن في المتصفح ، يمكنك وضعه بدون النقطتين ... لماذا؟

لأن النقطتين تعني أن React تنتظر متغيرًا ، أي على كائن params لدينا متغير يسمى id. مزيد من المستقبل ، سترى شيئا مثل هذا.

this.props.match.params.id

حسنًا ، لنعدّل ملفنا للحصول على الأفلام من قاعدة البيانات: MoviesList.jsx.

رائع ، في هذه القائمة ، دعونا تضمين شيئين آخرين ، هذه الأشياء ستكون أزرار. زر واحد لحذف ه زر آخر لتحديث.

كما ترى ، يمكننا الآن حذف فيلم ، لكننا ما زلنا غير قادرين على تحديثه ، لأننا لم نكمل المكون بعد.

من قبل ، لتطوير صفحة التحديث ، لنقم بإنشاء صفحة الإدراج.

وأخيراً ، دعنا ننشئ ملف التحديث.

3 - الخلاصة

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

في هذه المقالة ، كان حدسي هو الحفاظ على الأشياء بسيطة لفهمك. هذا هو المشروع الذي يمكنك القيام به العديد من التحسينات.

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

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

المشروع الكامل الذي يمكنك العثور عليه في GitHub الخاص بي والبحث عن مستودع تطبيقات الأفلام.

شكرا لك على صبرك في قراءة هذا. أراك في ما بعد المقبل.