مرحبا يا هبر!
ذات مرة ، أصدرنا
مشروعًا تجريبيًا
على حزمة مين (Mongo و Express و Angular و Node) ، والتي لم تخيب آمالنا بشكل عام ، ومع ذلك ، قررنا عدم القيام بطباعة وتحديثات إضافية في ذلك الوقت - على عكس Manning ، الذي قام
بتحديث هذا الكتاب . ومع ذلك ، فإننا نواصل البحث في هذا الاتجاه ، ونود اليوم التحدث معك حول رصة MERN ذات الصلة ، حيث توجد React على العميل ، وليس الزاوي. أعطيت
الكلمة لتيم سميث .
تحذير: كل رمز لهذه المادة
هنا .
في دليل MERN stack ، سنقوم بكتابة مدونة بسيطة باستخدام React.js و Node.js و Express.js و MongoDB لتوسيع ترسانة المكدس الكاملة لدينا.
ما هو كومة؟
ربما يكون أول شيء يجب مناقشته هو فكرة "المكدس" على هذا النحو. هناك العديد من الكدسات المختلفة ، وكلها مجرد مسارات مختلفة لتحقيق نفس الهدف. عند إنشاء تطبيق مكدس كامل ، فإننا نوفر الجزء الخاص بالعميل الذي سيتفاعل معه المستخدم ، وسيعمل نفس جزء العميل على التوسط في العمل مع الخادم وقاعدة البيانات - مما يجعل هذه العملية برمتها بسيطة وسهلة الإدارة قدر الإمكان.
يمكننا القول أن المجموعة هي مجموعة معينة من التقنيات المستخدمة لحل هذه المشكلة.
على الرغم من وجود العديد من المداخن التي تستحق الحديث عنها ، فإن بعضها أكثر شعبية من غيرها اليوم. يسمى أحد هذه المداخن الشائعة "معاني" ، ويتكون من:
- M ongoDb
- البريد xpress.js
- A ngular.js
- N ode.js
اليوم سوف نتحدث عن رصة MERN ، التي تشبه إلى حد كبير معان ، إلا أنه يتم استبدال Angular.js هنا ب React.js. وبالتالي ، يمكننا استخدام MongoDB كقاعدة بيانات ، Node.js و Express ، على التوالي ، للخادم والتوجيه و React.js - لإنشاء جزء العميل الذي سيتفاعل معه المستخدم.
كيف يتم التطوير باستخدام هذا المكدس؟
قبل الانتقال إلى جميع التفاصيل الدقيقة ، دعونا نلقي نظرة عامة على كيفية عمل كل هذه العناصر معًا. شخصيا ، استغرق الأمر بعض الوقت للدخول في هذا ، لأن خلفيتي مرتبطة بـ PHP ، حيث يتم خلط أجزاء العميل والخادم إلى حد ما.
1. جزء الخادم (العقدة و Express.js) وجزء العميل (React.js)بادئ ذي بدء ، يجب أن تفهم أن جزء الخادم وجزء العميل كيانان منفصلان. قد يكون جزء العميل في نفس المستودع مع الخادم ، أو ربما في جزء مختلف تمامًا.
2. يتم استخدام محطات API للاتصالإذا كنت تفكر بالفعل في كيفية تكوين صداقات للعميل وقطع الخادم ، فسأجيب: يتم ذلك من خلال واجهة برمجة التطبيقات. يتم إنشاء API (واجهة برنامج التطبيق) على الخادم ، حيث سنحصل على "محطات" يمكن من خلالها للتطبيق الموجود في جزء العميل التفاعل مع الخادم.
دعنا نوضح على الأصابع: تخيل أن يدك اليسرى هي جانب الخادم وأن يدك اليمنى هي جانب العميل.
الآن قم بطوي يديك ولف أصابعك معًا كما لو كنت تهز يدك. هذه هي الطريقة التي تعمل بها لغات القالب. إنها تتيح لك ببساطة عرض بعض العلامات بالإضافة إلى البيانات التي تم إلقاؤها مع الخوادم - وفيها تتداخل مكونات العميل والخادم إلى حد كبير.
الآن افتح يديك. انشر أصابعك على أوسع نطاق ممكن وتأكد من أن يديك اليسرى واليمنى تلمس فقط بأطراف أصابعك. هذه هي الطريقة التي يعمل بها مكدس MERN. يوفر جزء الخادم أطرافاً (أطراف الأصابع من اليد اليسرى) للوصول إلى الخادم ، حيث يرسل العميل المكالمات (من خلال أطراف أصابع اليد اليمنى) ومن خلال نقاط الاتصال هذه تتبادل المعلومات مع الخادم (اليد اليسرى).
آمل أن يصبح الأمر أكثر وضوحًا ، وإذا لم يكن الأمر كذلك ، أنسى كل هذا الاستعارة ، كما لو أنني لم أذكره.
جانب الخادم الخاص بنا من Node.js و Express.js
على الرغم من أنني لن أقدم إرشادات خطوة بخطوة حول كيفية إنشاء هذه المجموعة هنا (هذا موضوع لمقال منفصل) ، إلا أنني أود مراعاة العناصر المختلفة للمجموعة التي يتم استخدامها عادةً أو يمكن استخدامها فيها. قرأت نفسي العديد من الأدلة التي توضح كيفية تكوين الخادم ، لكن لم أشرح لماذا يتم استخدام هذه المكتبات الخاصة لهذا الغرض.
بعد إنشاء ملف app.js ، ستحتاج إلى تثبيت عدد من الحزم. فيما يلي الحزم الأكثر شيوعًا التي استخدمتها سابقًا في مشاريعي مع Express.js - ربما ستكون مفيدة لك أيضًا.
- Express.js هو إطار لإنشاء تطبيقات الويب. لديها وظيفة مدمجة لحل العديد من المشاكل ، على وجه الخصوص ، لإنشاء التوجيه.
- Mongoose هو مدير بيانات كائن (ODM) يوفر إمكانية التشغيل المتداخل بين تطبيق express.js وقاعدة بيانات MongoDB.
- BodyParser هي مكتبة تسمح للتطبيق Express.js بقراءة نص الطلبات الواردة (أي المحتوى).
- DotENV - يسمح لك باستخدام الملفات ذات الامتداد .env للعمل مع البيانات السرية.
- Passport.js - يوفر المصادقة في تطبيقنا ، ويوفر العديد من أساليب المصادقة المختلفة.
- المدقق - التحقق البسيط من العديد من أنواع البيانات
- bCrypt - تشفير البيانات الحساسة ، مثل كلمات المرور
- Nodemon - "إعادة التشغيل السريع " لخادم العقدة الخاص بنا في حالة تغير الموقف ؛ بفضل Nodemon ، لا يمكنك إيقاف أو إعادة تشغيل الخادم بعد إجراء أي تغييرات.
بالطبع ، هناك العديد من الحزم الأخرى ، ولكن في تجربتي ، فهذه المكتبات هي الأكثر استخدامًا.
لذلك ، بعد فرز بعض الحزم الأكثر استخدامًا ، دعونا نلقي نظرة على الكود. للبدء - خادمنا:
هذا خادم API بسيط. كما ترون ، فهي مزودة بوظيفة CRUD الأساسية (إنشاء - قراءة - تحديث - حذف) - لا شيء غير طبيعي. عند النظر إليه عن كثب ، نرى أن
res.json() يستخدم هنا لتوفير بيانات المخرجات لعنوان URL محدد - أي HTML أو قالب آخر لا يستخدم للإخراج. هذه هي الطريقة التي نبني بها واجهات برمجة التطبيقات الخاصة بنا عن طريق فتح الوصول إلى البيانات إلى React.js.
قد تلاحظ أيضًا أنني قمت فقط بتوجيه mongoose إلى خادم mongodb الخاص بي المثبت على جهاز الكمبيوتر الخاص بي. حتى تعمل مثل هذه الآلية بشكل صحيح ، يجب تثبيت MongoDB على جهاز الكمبيوتر الخاص بك والعمل. إذا لم ينجح الأمر ، فافتح نافذة وحدة التحكم وأدخل الأمر التالي:
سيبدأ خادم MongoDB على جهازك المحلي. نظرًا لأن كل هذا يتم محليًا ، فلن تتمكن من رؤية مشاركاتي إذا قمت بتشغيل الرمز من المستودع. لدينا لكتابة محتوى جديد بأنفسنا. إذا كنت بحاجة إلى كعب محتوى ، فأنا أوصي بمولد
Fillerama.io الممتاز ، الذي يقوم
بتقطيع النص من بعض
أفلامي وبرامجي التلفزيونية المفضلة.
إذا كنت مهتمًا باختبار الخادم بنفسك ، فيمكنك تشغيله باستخدام الأمر التالي:
بعد بدء تشغيل الخادم وإخبارنا أنه يعمل على المنفذ 3333 ، وكذلك أنه متصل بـ MongoDB ، يمكنك فتح
Postman واختبار طرقنا هناك. بالنسبة لخيارات GET ، يمكنك ببساطة إدراج المسار والنقر فوق "إرسال". في حالة POST ، سيكون عليك تحديد "نص" وملء الحقول للرأس والمحتوى الرئيسي.
ملاحظة جانب العميل
الآن وبعد أن قمنا بتهيئة خادمنا وتشغيله ، يمكننا أن نبدأ العمل على العميل الذي سيتفاعل معه مستخدمونا. سيتم كتابة العميل في React.js ، ويمكن القيام بذلك بعدة طرق مختلفة.
الأول هو فقط لإضافة جميع المكتبات اللازمة لجانب العميل (رد الفعل ، رد فعل دوم ، رد فعل الموجه ، وما إلى ذلك) جميعها على نفس ملف
package.json حيث كتبنا مكتبات الخادم. في هذا المشروع ، قمت بذلك ، لكن يجب أن أقول أنني لا أعتقد أن هذا الخيار هو الأفضل. أعتقد أنه مع نمو مشروعنا ، ستصبح قاعدة الشفرات أكثر وأكثر إرباكًا ، وإذا استخدمت هذه الطريقة فقط ، فسيصبح العمل بها أكثر تعقيدًا في المستقبل. فضلت هذا المسار في التطبيق الموضح على وجه التحديد لأنني أعرف على وجه اليقين: لن ينمو ولن يتغير على الإطلاق. تتم كتابة هذا التطبيق فقط لأغراض العرض التوضيحي.
الطريقة الثانية و (في رأيي) هي الطريقة المثلى لإنشاء مستودع منفصل لجانب الخادم وآخر منفصل للعميل. لا يزال بإمكاننا استنساخ مستودع جزء العميل في الدليل بمشروعنا دون أي مشاكل ، فقط تأكد من إدراج جزء العميل في ملف
.gitignore بنا. على سبيل المثال ، في بنية الملف لهذا التطبيق ، يوجد دليل
client ، حيث توجد كل شفرة جزء العميل. يمكن أن نأخذه إلى مستودع منفصل تمامًا ، ثم نضيف ببساطة الإدخال التالي إلى ملف
.gitignore مع جانب الخادم:
بإضافة مجلد
client إلى ملف
.gitignore ، نضمن أن النظام لن يرى هذا المجلد كمستودع ثانٍ في المشروع. بالإضافة إلى ذلك ، يسهل هذا النهج عمل إعادة تصميم جزء العميل أو استبداله ، نظرًا لأن جزء الخادم لا يتأثر على الإطلاق.
إن كيفية تصميم تطبيق المكدس بالكامل أمر متروك لك تمامًا. يبدو لي أنه إذا احتفظت بمستودعات منفصلة للعميل وقطع الخادم ، فستكون بنية التطبيق أكثر دقة قليلاً.
نقوم بإنشاء جزء عميل على React.js
الآن ، بعد فهم تنظيم المشروع ، دعونا نتحدث ، في الواقع ، عن رمز العميل. يوجد أدناه ملف
app.js الخاص بي للتطبيق على React.js ، ولن أقوم بإدراج رمز لكل مكون في هذا المنشور ، لكنني أترك
رابطًا إلى المستودع وأشرح ما يفعله كل مكون من مكونات React.
وفي ما يلي لقطة شاشة الصفحة الرئيسية لتطبيقنا:
كما ترون ،
app.js ليس شيئًا معقدًا على الإطلاق. هناك <Router> يسمح لك بإعداد طرق في React.js تعرض مكونات متنوعة بناءً على عنوان URL الخاص بها. فيما يلي المكونات الأخرى التي سيتم استخدامها في تطبيق React.js:
- رأس - شريط التنقل الموجود في الجزء العلوي من الشاشة
- الفهرس - قوائم إدخالات المدونة المتاحة
- جديد - النموذج الذي من خلاله يمكن للمستخدم إنشاء منشور جديد
- Single - يعرض إدخالًا محددًا لمدونة بناءً على
id - تحرير - النموذج الذي يمكن للمستخدم من خلاله تحديث إدخال المدونة التي تم العثور عليها بواسطة
id
نستخدم Axios لإجراء مكالمات http إلى محطات واجهة برمجة التطبيقات ، ثم نستخدم React.js لعرض البيانات كما يحلو لنا. في هذا المنشور ، سأقدم رمز Index.js ليوضح كيف يعمل كل شيء معًا.
في التعليمة البرمجية أعلاه ، يتم تضمين مكون فئة ، مما يسمح لنا باستخدام أساليب الحالة ودورة الحياة. يعد ذلك ضروريًا لأنه يجب إجراء استدعاءات Axios في طريقة دورة حياة
componentDidMount() . تجدر الإشارة إلى أنني كنت أتلقى خطأ CORS عند محاولة إجراء مكالمات إلى API المحلية الخاصة بي. لحل هذه المشكلة ، أضفت عدة رؤوس إلى ملف server.js في خادم Express الخاص بي - وقد نجحت. تتم الإشارة إلى هذا الرمز في التعليقات على ملف server.js.
دعنا نتأكد من قراءة برامج البحث على تطبيق React.js بشكل طبيعي.عند التقريب ، أود التحدث باختصار عن العرض. إذا قمت بتشغيل موقعنا وانتقلت مباشرةً إلى بعض التدوينات ، فقد تكون هناك بعض المشاكل في عرض المحتوى. في هذه الحالة ، سيكون تصفح الموقع غير مريح ليس فقط للمستخدمين ، ولكن أيضًا للبحث في محتوى فهرسة الروبوتات. للتغلب على هذه المشكلة ، أوصي باستخدام أدوات مثل Gatsby js أو js التالي. يختلف هذان الحلان عن بعضهما البعض ، لكن كلاهما يمكن أن يكون مفيدًا ، وفقًا لما تحتاجه بالضبط.
Gatsby js هو مولد موقع ثابت. يمكنك كتابة موقع على React.js ، ثم يقوم Gatsby بتحويله إلى ملفات ثابتة أثناء الإنشاء ، مما سيجعل الموقع بسرعة فائقة. يأتي Gatsby مع العديد من الإضافات المفيدة التي تجعل الأداة عالمية تقريبًا. بالمناسبة ، تم إنشاء موقعي باستخدام Gatsby.js! منذ إنشاء ملفات ثابتة أثناء التجميع ، يحتاج الموقع إلى إعادة بناء كلما تغير المحتوى الأصلي.
Next.js ، بدوره ، هو مكون خادم لعرض مواقع React.js. يتم تضمين العديد من الميزات المفيدة فيه ، على وجه الخصوص ، التوجيه ، تقسيم الشفرة ، المكونات المصممة ، وأكثر من ذلك بكثير. يشير تقديم الخادم إلى أنه سيتم تحديث البيانات تلقائيًا ، كما يتم ذلك على الخادم ، ولكن قبل عرضها في نافذة المتصفح ، ستحدث مرحلة العرض. هذا هو السبب في أنه لا ينبغي أن يكون هناك أي مشاكل في عرض البيانات للمستخدم ، وسيؤدي البحث عن الروبوتات أيضًا إلى عملهم دون مشاكل.
هناك العديد من الحلول الأخرى من هذا النوع ، لكنني سمعت أكثر شيئ عن هذين الخيارين ، وعند العمل في هذا المشروع ، استخدمتها. كلاهما موثقان بشكل ممتاز ، لذلك من السهل التعامل بسرعة مع كليهما والعودة إلى العمل.
الأفكار النهائية على كومة MERN
نأمل أن يكون هذا المقال قد ساعدك بشكل أكثر دقة في كيفية عمل مكدس MERN. في ذلك ، نحن فقط نأخذ MongoDB و Express.js و Node.js وننشئ منها خادمًا يوفر بالفعل مطاريف واجهة برمجة التطبيقات التي من خلالها يمكن لتطبيق React.js الوصول إلى البيانات. الآن أنت تفهم الكثير ، لقد حان الوقت للقيام بأشياء عظيمة!