السلام عليكم
مرحبا بكم في الدرس الثاني من @nodejs , في الدرس السابق تعرفنا على ما هو Node.js كيفية تحميل Node.js وكيفية برمجة اول سيرفر عن طريق Node.js باستخدام Http Module , في هذا الدرس سنتعرف على فريموورك Express.js . ولا تنسى ريتويت 🔀 ليستفيد الجميع .
مرحبا بكم في الدرس الثاني من @nodejs , في الدرس السابق تعرفنا على ما هو Node.js كيفية تحميل Node.js وكيفية برمجة اول سيرفر عن طريق Node.js باستخدام Http Module , في هذا الدرس سنتعرف على فريموورك Express.js . ولا تنسى ريتويت 🔀 ليستفيد الجميع .
لكن قبل ذالك اذا كنت مهتم بمجال البرمجة بصفة عامة او مجال برمجة المواقع والتطبيقات بصفة خاصة فلا تنسى تعملي فولو @capsuleprog ليصلك جديد ثريداتي القادة .
اولا قبل التعرف على Express.js دعونا اولا نعرف لماذا نحن بحاجة الى فريمورك مبني على Node.js , تخيل مثلا عندنا موقع بسيط مكون من 3 صفحات Home و Contact و About ونحتاج لعمل Routing لهذه الصفحات , ال routing نقصد المسارات يعني ماذا سيحدث عندما نتوجه الى المسار
التالي localhost:8080/about وماذا سيحدث عندما نتوجه الى المسار التالي localhost:8080/contact وغيرها .. , اولا لنصل الى المسارات او المسار الذي نتواجد فيه عن طريق Node.js , الحل هنا هو property موجودة في req وهي req.url , هذه ال property هي تعرفنا على المسار الذي نتواجد فيه
في الرابط في المتصفح , فلو انشات سيرفر عن طريق http كالذي قمنا بانشاءه في اول درس وقمت بطباعة req.url في الكونسول , فكلما توجهت لمسار معين مثلا /about فسيقوم بطباعته لك في الترمنال , وفي routing سنعتمد على هذه ال property , سنقوم بانشاء سيرفر بسيط جدا عن طريق http كما في الصورة
سيرفر بسيط جدا يقوم بطباعة كلمة Hello World . لو قمنا بازالة res.write و res.end ووضعنا في مكانهم الكود التالي كما في الصورة
في الصورة الكود واضح جدا مجرد كود Javascript عادي باستثناء req.url التي قمنا بشرحها , في هذا الكود قمنا بانشاء دالة شرطية . وقمنا بوضع شرط لكل مسار , فعندما نكون مثلا في مسار localhost:8080 يعني هنا نحن في مسار / نخبره ان يقوم بطباعة لنا كلمة hello from home , ولو توجدنا في مسار
مثلا /about يطبع لنا Hello from about ولو كنا في مسار /contact يطبع لنا Hello from contact وفي الاخير else لو لم يجد اي من المسارات الموجودة في موقعنا يقوم بطباعة جملة Not found 404 يعني الصفحة غير موجودة في موقعنا وفي الاخير res.end , قم بتجربة الكود في جهازك .
كما ترون هنا قمنا بانشاء routing بسيط جدا فكا الامر جد متعب , فتخيل لو كان لدينا موقع فيه 30 او 20 صفحة سيكون الامر متعب جدااا , الحل هنا هو الاعتماد على فريمورك مبني على Node.js يسهل علينا الامر كمثال express .
ما هو Expess.js ؟
اكسبريس هو فريموورك javascript مبني على Node.js يستخدم في تطوير مواقع الويب الهذف منه هو جعل البرمجة عن طريق Node.js اسهل , اكسبريس يعتبر فروموورك صغير لا يمكن مقارنة ب semphony php او django python , لكنه جاء بميزات رائعة جدا .
اكسبريس هو فريموورك javascript مبني على Node.js يستخدم في تطوير مواقع الويب الهذف منه هو جعل البرمجة عن طريق Node.js اسهل , اكسبريس يعتبر فروموورك صغير لا يمكن مقارنة ب semphony php او django python , لكنه جاء بميزات رائعة جدا .
كال Routing ونضام القوالب templates و ال Middlewares وغيرها من الامور التي سنتعرف عليها في الدروس القادمة .
السؤال الذي عليك طرحة الان هو لماذا Express ؟
الجواب ساختصره في 3 اسباب , السبب الاول ان اكسبريس هو الاكثر استخداما ويسيطر على حصة الاسد من سوق فريمووركات Node.js ,
السؤال الذي عليك طرحة الان هو لماذا Express ؟
الجواب ساختصره في 3 اسباب , السبب الاول ان اكسبريس هو الاكثر استخداما ويسيطر على حصة الاسد من سوق فريمووركات Node.js ,
السبب الثاني لان Express سهل جدا وبسيط يمكنك تعلمه بسهولة , السبب الثالث هو انا لدى اكسبريس مئالت والاف الPackages و ال Module التي ستساعدك في تطوير مشاريعك بالاضافة لتوفره على مصادر تعلم كثيرة من دورات وكتب وغيرها .
ما هي اشهر فريمووركات Node.js ؟
يتوفر Node.js على العديد من الفريمووركات وتزداد مع مرور الوقت كمثال Exprees و Nest.js و Koa.js و Meteor و Sails.js وغيرها الكثير والكثير , انا شخصيا اشتغل بكل من Expres.js و Koa.js يعتبر Koa هو اقرب اطار عمل ل express لانه تم تصميمهم
يتوفر Node.js على العديد من الفريمووركات وتزداد مع مرور الوقت كمثال Exprees و Nest.js و Koa.js و Meteor و Sails.js وغيرها الكثير والكثير , انا شخصيا اشتغل بكل من Expres.js و Koa.js يعتبر Koa هو اقرب اطار عمل ل express لانه تم تصميمهم
من طرف نفس الفريق من المبرمجين , الان حان الوقت لتنصيب Express.js في مشروعنا , قم بفتح الترمنال او سطر الاوامر cmd قم بالتوجه للمكان الذي تريد وضع المشروع فيه وقم بانشاء فولدر سميه اي اسم مثلا mkdir firstExpress وقم بالدخول اليه عن طريق cd firstExpress ثم قم بتنفيذ الامر
التالي npm init ثم قم بملئ الخيارات بم يناسبك ثم سيقوم بانشاء لك فايل اسمه package.json وهذا الفايل هو الذي ستنقوم بتثبيث ال packages فيه , بعدها نقوم بتنصيب express فقط قم بكتابة الامر التالي في الترمنال :
npm install express
انتضر حتى يتم التنصيب , وستم انشاء لك فايل اخر
npm install express
انتضر حتى يتم التنصيب , وستم انشاء لك فايل اخر
اسمه package.lock.json فيه اشياء متعلقة ب Node.js لا دخل لنا فيها ويستم ايضا انشاء فولدر node-modules هذا الفولدر سيتم وضع فيه كود Expres وكل ال packages التي سنقوم بتنصيبها في الدروس القادمة , ثم قم بانشاء الملف الرئيسي للمشروع سميه مثلا server.js او اي اسم اخر .
ملا حضة : عند تشغيل اي سيرفر تم تقوم بعمل تغيير في الكود فهذا التغيير لن يضهر يجب ان تقوم بايقاف السيرفر ثم اعدة تشغيله عن طريق node server.js , هذا الامر متعب جدا كل ما تعمل تغيير تحتاج الى اعادة تشغيل السيرفر ,الحل هنا هو Module اسمه nodemon دوره يقوم بتشغيل السير
وكلما قمتب بتغيير للكواد يقوم باعادة تشغيل السيرفر بدون تدخل منك لتنصيبه
npm install -g nodemon
نقصد ب -g ال Global يعني سيتم تنصيبه في الجهاز كامل وليس في المشروع لكي لتضضر لتنصيبه من جديد كل ما قمت بعمل مشروع جديد , بعد التنصيب لشغيل السيرفر اكتب في cmd
nodemon server.js
npm install -g nodemon
نقصد ب -g ال Global يعني سيتم تنصيبه في الجهاز كامل وليس في المشروع لكي لتضضر لتنصيبه من جديد كل ما قمت بعمل مشروع جديد , بعد التنصيب لشغيل السيرفر اكتب في cmd
nodemon server.js
بعدها نقوم بفتح ملف server.js ونكتب فيه ما في الصورة , في الاول يتم تحميل express عن طريق require , اكسبريس يرجع لنا تلقائيا function هذه ال function تقوم بانشاء سيرفر وقمنا باعطائه اسم app وهو اسم السيرفر , بعدها قمنا بعمل Middlware عن طريق اكسبريس هاد الميدلوير اعطيناه
ميتود عبارة على Get ومهمتها الارسال , تقوم بارسال اي شيء تريد الى اي مكان تريد , في المثال قمنا بتحديد لها routing في / يعني في localhost:8080/ وقلنا لها كلم جاءك request عبارة على / قمي بارسال له رسالة , هذه الرسالة نقوم بطباعتها في res.send على عكس http فنقوم بارسالها
.
.
في res.write ثم نعطيها res.send لكن اكسبريس قالت لنا عندي حل لماذا لا نجمع res.write وres.end في method واحدة وهي res.send وتقوم بالارسال بدون حاجة الى res.end . بعدها قمنا بعمل listin للسيرفر عن طريق البورت 8080 , الان قم بفتح الترمنال في فولد المشروع وقم بتنفيذ
الامر nodemon server.js توجه للمتصفح وقم بالدخول الى الرابط http://localhost:8080 وسيتم طباعة كلمة ترحيبية لك , في http قمنا بعمل routing لموقع فيه 3 صفحات وكان الامر صعب الان دعونا نقوم بانشاء routing عن طريق expres , قم بكتابة الكود الموجود في الصورة تحتل const app = express()
شاهد هنا في express الطريقة رائعة ومنضمة وسهلة جدا على عكس http ويمكننا ارسال اي ملفات او اي بيانات لاي مسار بسهولة كما سنرى في الدروس القادمة , اذا توجهت ل / يقوم بطباعة لك Hello from home وادا دخلت ل /about يطبع لك hello from about الى اخره .
جاري تحميل الاقتراحات...