feras

Members
  • عدد منشوراتي

    6
  • تاريخ الإنضمام

  • تاريخ اخر زياره

السمعه بالموقع

9 Neutral

عن العضو feras

  • الرتبه
    مبدع جديد
  • تاريخ الميلاد 04/27/89

معلومات عامة

  • الجنس
    ذكر
  • السكن
    تركيا
  • هواياتي
    الكتابة، والموسيقى، والرياضة.
    يُمكنك متابعتي على تويتر @FerasAllaou

اخر الزوار

252 زياره للملف الشخصي
  1. المستوى: مُبتدأ/متوسّط يُمكن الاستفادة من مكتبة Multer في nodejs لرفع الصور والملفّات إلى السيرفر، فبأسطر برمجية بسيطة يُمكن رفع الملفات التي قام المُستخدم بتحديدها let app = require("express")() let multer = require("multer") let upload = multer({ dest: 'uploads/' }).any() app.get("/", (req,res)=>{ res.send("Teting...") }) app.post("/upload", (req, res)=>{ upload(req,res, (err)=>{ if (err) throw err }) res.send(req.files) }) app.listen(3000, ()=>{ console.log("Let's Upload....") }) الكود السابق يقوم باستلام الملفّات التي يُرسلها المستخدم إلى المسار /upload ليقوم برفعها ثم طباعة اسم الملف المُستلم. لكن وبعد تنفيذه قد تتفاجئ بأن عملية الرفع تجري بنجاح، إلا أن الاسم لا يظهر ويتم إرسال مصفوفة فارغة على الرغم من أن عملية الرفع تمّت دون مشاكل. السبب في ذلك هو طبيعة Nodejs، والتي سبق وأن تحدّثت عنها في مقال سابق بعنوان "تنفيذ الطلبات بتسلسل وترتيب في Nodejs باستخدام Async/Await". انصحك بقرائته لفهم آلية عمل إطار العمل بشكل كامل. ما يحدث على أرض الواقع هو أن النظام يبدأ بالرفع، ولأن تنفيذ المهام في nodejs يتم بشكل متوازي لتجنّب تأخير الرد على طلب المستخدم، سيقوم النظام فورًا بطباعة محتويات مصفوفة الملفّات req.files، التي ستكون فارغة بالفعل لأن النظام لم ينتهي بالأصل من عملية الرفع. والحل في هذه الحالة هو استخدام async/await ليُصبح الكود من الشكل: let app = require("express")() let multer = require("multer") let upload = multer({ dest: 'uploads/' }).any() app.get("/", (req,res)=>{ res.send("Testing Routes.....") }) let uploadPromise = (req, res)=>{ return new Promise((Resolve, Reject)=>{ upload(req,res, (err)=>{ if (err) Reject(err) Resolve() }) }) } app.post("/upload", async(req, res)=>{ try{ await uploadPromise(req, res) res.send(req.files) }catch(uploadErr){ throw uploadErr } upload(req,res, (err)=>{ if (err) throw err }) }) app.listen(3000, ()=>{ console.log("Let's Upload....") }) حاول تنفيذ الكود السابق وسترى أن اسم الملف سيظهر دون مشاكل لأن النظام قام أولًا برفع الملف ثم قام بطباعة الاسم، وهذا يعني أن المصفوفة لم تعد فارغة بشكل كامل. الفيديو التالي يشرح الفرق بشكل عملي: أما الراغبين بتحديد لاحقة الملف أو قبول نوع مُحدّد من الملفات فهم بحاجة لتعديل بعض جزئيات الكود، ولتجنّب تعقيد الأفكار ما بين Async/Await، سأقوم باستخدا مثال بسيط عن Multer. let app = require("express")() let multer = require("multer") let upload = multer({dest: "uploads"}) app.post("/", upload.single("photos"), (req,res)=>{ res.send("OK...") }) app.listen(3000, ()=>{ console.log("Ready to upload...") }) الكود السابق يشرح طريقة رفع ملف إلى مُجلّد uploads باستخدام multer، فعند طلب الرابط domain.com/ باستخدام POST فإن النظام سيأخذ الملف الموجود في الحقل photos وسيقوم برفعه. لكن ماذا لو أردنا تغيير الاسم أو اختيار اللاحقة؟ الأمر يتم من خلال ميثود موجودة داخل multer تُعرف بـ diskStorage ليُصبح الكود من الشكل let app = require("express")() let multer = require("multer") let storage = multer.diskStorage({ destination: function(req, file, cb){ cb(null, "uploads") }, filename: function(req, file, cb){ let ext = file.mimetype.split("/") ext = ext[ext.length-1] cb(null, file.originalname + "-"+Date.now()+"."+ext) } }) let upload = multer({storage:storage}) app.get("/", (req, res)=>{ console.log(Date.now()) }) app.post("/", upload.single("photos"), (req,res)=>{ res.send("OK...") }) app.listen(3000, ()=>{ console.log("Ready to upload...") }) قُمنا في الميثود بتعريف خاصيّتين الأولى هي destination الخاصّة بتحديد مكان الرفع، والثانية هي اسم الملف. الشرط الوحيد في الخصائص داخل multer هو استخدام دالة cb، وهي اختصار لـ Call Back لتمرير النتيجة التي نرغب بها. في مثالي في الأعلى قُمت بفحص نوع الملف باستخدام الـ mimeType الخاص به، فلو كان صورة سيظهر بالشكل image/jpeg أو image/png وهكذا. بعدها قمت بإضافة تلك اللاحقة للاسم الذي يُمكنك تسميته كيفما تشاء. أما بخصوص رفع نوع واحد من الملفات دونًا عن الغير فهذا مُمكن عبر تعديل السطر الخاص بتعريف upload ليُصبح من الشكل let upload = multer({storage:storage, fileFilter: function(req, file, cb){ if (file.mimetype != "image/jpeg"){ return cb(null, false) } cb(null, true) }}) قُمنا بإضافة ما يُعرف بالـ fileFilter، وهي خاصيّة موجودة في multer قُمنا فيها بفحص نوع الملف مرّة أُخرى عبر mimeType وفي حالة عدم مُطابقة الشروط نقوم برفض الملف من خلال استخدام إعادة الـ callback فارغ مع false. بهذه الحالة سيقفز النظام عن الملف وسيتجاوزه. الفيديو التالي يشرح كل شيء في حالة وجود أي استفسار يُمكن تركه في التعليقات أو مُراسلتي عبر حسابي في تويتر @FerasAllaou
  2. المستوى: مُبتدئ. تتميّز بيئة Nodejs بتنفيذ المهام دون إعاقة عمل التطبيق، بمعنى أن النظام يستلم طلبات المستخدم ويسعى لتنفيذها في نفس الوقت لتجنّب تأخير الرد أولًا، ولتجنّب زيادة الحمل على السيرفر الذي يحدث عندما لا تتوفّر الموارد الكافية لتلبية جميع الطلبات الواردة. أحيانًا، قد تحتاج لتنفيذ بعض المهام المُرتبطة في Nodejs، مثل رفع الصور أولًا إلى السيرفر ثم أخذ أسماء الملفات المرفوعة لتخزينها في قاعدة البيانات. في الوضع الطبيعي لن تفلح في الحصول على أسماء الملفات لو استخدمت التسلسل المنطقي الخاص ببيئة Nodejs، فالنظام سيقوم بتنفيذ جميع المهام معًا أملًا في الرد عليك في أسرع وقت. وكما نعلم، رفع الملفات قد يأخذ وقت أطول من اللازم، وهنا وخلال الرفع سيتم الانتقال لتنفيذ أمر الإضافة لقاعدة البيانات في ذات الوقت وستتفاجئ أن حقل أسماء الملفات فارغ، أو غير مُكتمل. هل من حل؟ بكل تأكيد هناك حل منطقي وبسيط جدًا يتمثّل في Async/Await المدعومة بشكل افتراضي في Nodejs، أي تنفيذ المهام بشكل متزامن. وقبل كتابة المثال دعونا نتّفق على شيء واحد يتمثّل في ضرورة استخدام Promises مع Async/Await فبدونها لن يعمل الكود بالشكل المطلوب. let app = require("express")() let myFunc = ()=>{ return new Promise((Resolve, Reject)=>{ setTimeout(()=>{ console.log("This is in between") Resolve() },3000) }) } app.get("/", (req, res)=>{ console.log("This is First") myFunc() console.log("This is Second") res.send("Ok") }) app.listen(3000, ()=>{ console.log("Running....`") }) باختصار يقوم الكود السابق باستقبال طلب المستخدم وطباعة ثلاث جمل، الأولى This is First والثانية This is in Between والثالثة This is Second. لكن لو قمت بتنفيذ الكود السابق ستتفاجئ بأن النتيجة ليست هكذا، حيث سيتم طبع الجملتين الأولى والثالثة، والثانية سيتم تنفيذها بعد 3 ثوان، وهذا لأنني أنا قمت بتأخيرها يدويًا لمحاولة شرح المُشكلة التي أتحدّث عنها، أي تنفيذ حدث دون انتهاء سابقه، الأمر الذي قد لا نرغب به أحيانًا. يُمكنك تخيّل الجملة الثانية هي رفع الصور والثالثة هي تخزين أسماء الملفات في قاعدة البيانات. وهنا يأتي دور الـ Async/Await ليُصبح الكود على الشكل let app = require("express")() let myFunc = ()=>{ return new Promise((Resolve, Reject)=>{ setTimeout(()=>{ console.log("This is in between") Resolve() },3000) }) } app.get("/", async(req, res)=>{ try{ console.log("This is First") await myFunc() console.log("This is Second") res.send("Ok") }catch(e){ throw e } }) app.listen(3000, ()=>{ console.log("Running....`") }) لو قمت الآن بتشغيل الكود ستجد أن التنفيذ يجري بترتيب منطقي، يتم طباعة الجملة الأولى ثم الانتظار حتى طباعة الثانية، بعدها يقوم النظام بطباعة الثالثة. لا تنس استخدام Promise مع الـ Async/Await، ولا تُفرط في استخدامها كثيرًا، فقط عند الحاجة. وكتنويه بسيط هناك بعض المكتبات مثل mongoose تقوم بإرجاع Promise لك عند إضافة سجل جديد لقاعدة البيانات، الأمر الذي يعني أنك تستطيع ببساطة وضعه ضمن Async/Await لتنفيذ أشياء فقط بعد الانتهاء من الإضافة. الفيديو يُظهر عمليًا ما الذي يحدث مع وبدون الـ Async/Await. أما ما يحدث في الخفاء فهو مشروح في الصور التالية لفهم معمارية NodeJS بشكل كامل. كما يُمكن قراءة الموضوع التالي: "ماهو الـSingle Thread Event Loop في الـNodeJS" إذا كانت هناك أية استفسارات أتمنى تركها في التعليقات أو التواصل معي في حسابي على تويتر @FerasAllaou
  3. المستوى: مُبتدأ/متوسّط يُمكن الاستفادة من مكتبة Multer في nodejs لرفع الصور والملفّات إلى السيرفر، فبأسطر برمجية بسيطة يُمكن رفع الملفات التي قام المُستخدم بتحديدها let app = require("express")() let multer = require("multer") let upload = multer({ dest: 'uploads/' }).any() app.get("/", (req,res)=>{ res.send("Teting...") }) app.post("/upload", (req, res)=>{ upload(req,res, (err)=>{ if (err) throw err }) res.send(req.files) }) app.listen(3000, ()=>{ console.log("Let's Upload....") }) الكود السابق يقوم باستلام الملفّات التي يُرسلها المستخدم إلى المسار /upload ليقوم برفعها ثم طباعة اسم الملف المُستلم. لكن وبعد تنفيذه قد تتفاجئ بأن عملية الرفع تجري بنجاح، إلا أن الاسم لا يظهر ويتم إرسال مصفوفة فارغة على الرغم من أن عملية الرفع تمّت دون مشاكل. السبب في ذلك هو طبيعة Nodejs، والتي سبق وأن تحدّثت عنها في مقال سابق بعنوان "تنفيذ الطلبات بتسلسل وترتيب في Nodejs باستخدام Async/Await". انصحك بقرائته لفهم آلية عمل إطار العمل بشكل كامل. ما يحدث على أرض الواقع هو أن النظام يبدأ بالرفع، ولأن تنفيذ المهام في nodejs يتم بشكل متوازي لتجنّب تأخير الرد على طلب المستخدم، سيقوم النظام فورًا بطباعة محتويات مصفوفة الملفّات req.files، التي ستكون فارغة بالفعل لأن النظام لم ينتهي بالأصل من عملية الرفع. والحل في هذه الحالة هو استخدام async/await ليُصبح الكود من الشكل: let app = require("express")() let multer = require("multer") let upload = multer({ dest: 'uploads/' }).any() app.get("/", (req,res)=>{ res.send("Testing Routes.....") }) let uploadPromise = (req, res)=>{ return new Promise((Resolve, Reject)=>{ upload(req,res, (err)=>{ if (err) Reject(err) Resolve() }) }) } app.post("/upload", async(req, res)=>{ try{ await uploadPromise(req, res) res.send(req.files) }catch(uploadErr){ throw uploadErr } upload(req,res, (err)=>{ if (err) throw err }) }) app.listen(3000, ()=>{ console.log("Let's Upload....") }) حاول تنفيذ الكود السابق وسترى أن اسم الملف سيظهر دون مشاكل لأن النظام قام أولًا برفع الملف ثم قام بطباعة الاسم، وهذا يعني أن المصفوفة لم تعد فارغة بشكل كامل. الفيديو التالي يشرح الفرق بشكل عملي: أما الراغبين بتحديد لاحقة الملف أو قبول نوع مُحدّد من الملفات فهم بحاجة لتعديل بعض جزئيات الكود، ولتجنّب تعقيد الأفكار ما بين Async/Await، سأقوم باستخدا مثال بسيط عن Multer. let app = require("express")() let multer = require("multer") let upload = multer({dest: "uploads"}) app.post("/", upload.single("photos"), (req,res)=>{ res.send("OK...") }) app.listen(3000, ()=>{ console.log("Ready to upload...") }) الكود السابق يشرح طريقة رفع ملف إلى مُجلّد uploads باستخدام multer، فعند طلب الرابط domain.com/ باستخدام POST فإن النظام سيأخذ الملف الموجود في الحقل photos وسيقوم برفعه. لكن ماذا لو أردنا تغيير الاسم أو اختيار اللاحقة؟ الأمر يتم من خلال ميثود موجودة داخل multer تُعرف بـ diskStorage ليُصبح الكود من الشكل let app = require("express")() let multer = require("multer") let storage = multer.diskStorage({ destination: function(req, file, cb){ cb(null, "uploads") }, filename: function(req, file, cb){ let ext = file.mimetype.split("/") ext = ext[ext.length-1] cb(null, file.originalname + "-"+Date.now()+"."+ext) } }) let upload = multer({storage:storage}) app.get("/", (req, res)=>{ console.log(Date.now()) }) app.post("/", upload.single("photos"), (req,res)=>{ res.send("OK...") }) app.listen(3000, ()=>{ console.log("Ready to upload...") }) قُمنا في الميثود بتعريف خاصيّتين الأولى هي destination الخاصّة بتحديد مكان الرفع، والثانية هي اسم الملف. الشرط الوحيد في الخصائص داخل multer هو استخدام دالة cb، وهي اختصار لـ Call Back لتمرير النتيجة التي نرغب بها. في مثالي في الأعلى قُمت بفحص نوع الملف باستخدام الـ mimeType الخاص به، فلو كان صورة سيظهر بالشكل image/jpeg أو image/png وهكذا. بعدها قمت بإضافة تلك اللاحقة للاسم الذي يُمكنك تسميته كيفما تشاء. أما بخصوص رفع نوع واحد من الملفات دونًا عن الغير فهذا مُمكن عبر تعديل السطر الخاص بتعريف upload ليُصبح من الشكل let upload = multer({storage:storage, fileFilter: function(req, file, cb){ if (file.mimetype != "image/jpeg"){ return cb(null, false) } cb(null, true) }}) قُمنا بإضافة ما يُعرف بالـ fileFilter، وهي خاصيّة موجودة في multer قُمنا فيها بفحص نوع الملف مرّة أُخرى عبر mimeType وفي حالة عدم مُطابقة الشروط نقوم برفض الملف من خلال استخدام إعادة الـ callback فارغ مع false. بهذه الحالة سيقفز النظام عن الملف وسيتجاوزه. الفيديو التالي يشرح كل شيء في حالة وجود أي استفسار يُمكن تركه في التعليقات أو مُراسلتي عبر حسابي في تويتر @FerasAllaou
  4. المستوى: مُبتدئ. تتميّز بيئة Nodejs بتنفيذ المهام دون إعاقة عمل التطبيق، بمعنى أن النظام يستلم طلبات المستخدم ويسعى لتنفيذها في نفس الوقت لتجنّب تأخير الرد أولًا، ولتجنّب زيادة الحمل على السيرفر الذي يحدث عندما لا تتوفّر الموارد الكافية لتلبية جميع الطلبات الواردة. أحيانًا، قد تحتاج لتنفيذ بعض المهام المُرتبطة في Nodejs، مثل رفع الصور أولًا إلى السيرفر ثم أخذ أسماء الملفات المرفوعة لتخزينها في قاعدة البيانات. في الوضع الطبيعي لن تفلح في الحصول على أسماء الملفات لو استخدمت التسلسل المنطقي الخاص ببيئة Nodejs، فالنظام سيقوم بتنفيذ جميع المهام معًا أملًا في الرد عليك في أسرع وقت. وكما نعلم، رفع الملفات قد يأخذ وقت أطول من اللازم، وهنا وخلال الرفع سيتم الانتقال لتنفيذ أمر الإضافة لقاعدة البيانات في ذات الوقت وستتفاجئ أن حقل أسماء الملفات فارغ، أو غير مُكتمل. هل من حل؟ بكل تأكيد هناك حل منطقي وبسيط جدًا يتمثّل في Async/Await المدعومة بشكل افتراضي في Nodejs، أي تنفيذ المهام بشكل متزامن. وقبل كتابة المثال دعونا نتّفق على شيء واحد يتمثّل في ضرورة استخدام Promises مع Async/Await فبدونها لن يعمل الكود بالشكل المطلوب. let app = require("express")() let myFunc = ()=>{ return new Promise((Resolve, Reject)=>{ setTimeout(()=>{ console.log("This is in between") Resolve() },3000) }) } app.get("/", (req, res)=>{ console.log("This is First") myFunc() console.log("This is Second") res.send("Ok") }) app.listen(3000, ()=>{ console.log("Running....`") }) باختصار يقوم الكود السابق باستقبال طلب المستخدم وطباعة ثلاث جمل، الأولى This is First والثانية This is in Between والثالثة This is Second. لكن لو قمت بتنفيذ الكود السابق ستتفاجئ بأن النتيجة ليست هكذا، حيث سيتم طبع الجملتين الأولى والثالثة، والثانية سيتم تنفيذها بعد 3 ثوان، وهذا لأنني أنا قمت بتأخيرها يدويًا لمحاولة شرح المُشكلة التي أتحدّث عنها، أي تنفيذ حدث دون انتهاء سابقه، الأمر الذي قد لا نرغب به أحيانًا. يُمكنك تخيّل الجملة الثانية هي رفع الصور والثالثة هي تخزين أسماء الملفات في قاعدة البيانات. وهنا يأتي دور الـ Async/Await ليُصبح الكود على الشكل let app = require("express")() let myFunc = ()=>{ return new Promise((Resolve, Reject)=>{ setTimeout(()=>{ console.log("This is in between") Resolve() },3000) }) } app.get("/", async(req, res)=>{ try{ console.log("This is First") await myFunc() console.log("This is Second") res.send("Ok") }catch(e){ throw e } }) app.listen(3000, ()=>{ console.log("Running....`") }) لو قمت الآن بتشغيل الكود ستجد أن التنفيذ يجري بترتيب منطقي، يتم طباعة الجملة الأولى ثم الانتظار حتى طباعة الثانية، بعدها يقوم النظام بطباعة الثالثة. لا تنس استخدام Promise مع الـ Async/Await، ولا تُفرط في استخدامها كثيرًا، فقط عند الحاجة. وكتنويه بسيط هناك بعض المكتبات مثل mongoose تقوم بإرجاع Promise لك عند إضافة سجل جديد لقاعدة البيانات، الأمر الذي يعني أنك تستطيع ببساطة وضعه ضمن Async/Await لتنفيذ أشياء فقط بعد الانتهاء من الإضافة. الفيديو يُظهر عمليًا ما الذي يحدث مع وبدون الـ Async/Await. أما ما يحدث في الخفاء فهو مشروح في الصور التالية لفهم معمارية NodeJS بشكل كامل. كما يُمكن قراءة الموضوع التالي: "ماهو الـSingle Thread Event Loop في الـNodeJS" إذا كانت هناك أية استفسارات أتمنى تركها في التعليقات أو التواصل معي في حسابي على تويتر @FerasAllaou تم ترقية هذا الطرح المميز الى صفحة المقالات
  5. غالبًا سؤالك في لغة جافا أو "سي++" صحيح؟ بشكل عام ال main method هي الدالة الرئيسية التي يستدعيها البرنامج ويقوم بتنفيذ جميع محتوياتها، بعض اللغات تعمل بهذه الآلية تبحث عن الـ main method وتقوم بتنفيذ كل شيء موجود بداخلها. لكن بخصوص الـ parentheses لم أفهم، ربما تقصد الـ Parameters؟ لو كان قصدك الأولى، فهي الأقواص التي يتم تحديد فيها محتويات الدالة function main() { // قوس الفتح // هنا يأتي كل شيء. } // قوس الإغلاق أما إذا كان قصدك الـ Parameters فهي القيم الوسيطة التي تُمرّر للدالة ومثال بسيط على هذا الاستخدام في دوال مُختلفة مثل function add(int num1, int num2) // num1 & num2 هي القيم الوسيطة التي يتم تمريرها للدالة للقيام ببعض العمليات عليها { return num1+num2; // هنا سنعيد ناتج جمع الرقمين المُمرّرين } مثال آخر في لغات أكثر تقعيدًا، في موجّه الأوامر لدينا أمر مثل cd Desktop، صحيح؟ في حقيقة الأمر يُمكن اعتبار cd دالة يتم تمرير Desktop إليها كقيمة، أو أي قيمة أُخرى، وبالتالي يتم تغيير المُجلّد من الحالي إلى الجديد المُمرّر cd Desktop // تخيّل الدالة من الشكل function cd (string[] args) { System.changeDirectory(args[0]) // هنا سيتم أخذ أول قيمة تم تمريرها وتغيير المجلّد إليها // هذا مثال عام وليس عملي }
  6. مستوى الصعوبة: مبتدئ-متوسّط توفّر الشبكات الاجتماعية مكتبات برمجية تسمح الاستفادة من حسابات المُستخدمين في بقيّة التطبيقات، فعوضًا عن إنشاء حساب جديد وتعبئة كافّة البيانات بشكل يدوي، يُمكن للمستخدم اختيار تسجيل الدخول في حسابه في تويتر أو فيسبوك مثلًا لتتم العملية بسهولة تامّة. في NodeJS هناك مكتبة Passport الشهيرة التي تسمح بإنشاء نظام تسجيل دخول اعتمادًا على حسابات المستخدم في الشبكات الاجتماعية، أو حتى يُمكن إنشاء تسجيل دخول عبر البريد. لكن في هذا الدرس سأستعرض آلية إنشاء نظام تسجيل دخول باستخدام تويتر. قبل الخوض في آلية العمل سأشرح الفكرة النظرية. المستخدم أولًا يقوم في فيسبوك أو تويتر، أو حتى غوغل، بإنشاء تطبيق جديد من مركز المُطوّرين Dev Center ليحصل بذلك على رقم مُعرّف خاص بتطبيقه وعلى رمز سرّي يتم إدخالهما في مكتبة Passport لإتمام عملية تسجيل الدخول. الخطوة الأولى بكل تأكيد هي تثبيت المكتبات وإطار عمل ExpressJS كذلك لتسهيل إنشاء الواجهات البرمجية، والمطلوب تحميل التالي: npm install express passport passport-twitter body-parser cookie-parser express-session --save بعدها نقوم بإنشاء برنامجنا البسيط الذي يعرض زر لتسجيل الدخول عبر تويتر بالشكل التالي let express = require("express") let app = express() let PORT = process.env.PORT || 3000 let passport = require("passport") let cookieParser = require("cookie-parser") let session = require('express-session') let bodyParser = require("body-parser") app.use(cookieParser("3alamPro")) app.use(bodyParser.json()) app.use(bodyParser.urlencoded({ extended: false })) app.use(session({secret: "3alamPRO2017", saveUninitialized:true, resave:true})) app.use(passport.initialize()) app.use(passport.session()) require("./configs/passport")(passport) app.get("/", (req, res)=>{ res.send("<a href='/login/twitter'> تسجيل الدخول عبر تويتر </a>") }) app.get("/login/twitter", passport.authenticate('twitter')) app.get("/login/twitter/cb", passport.authenticate('twitter',{successRedirect:"/", failureRedirect:"/loginFail"})) app.listen(PORT, ()=>{ console.log(`Up & Running ${PORT}`) }) الكود السابق بسيط فهو استدعاء لبعض المكتبات الخاصّة بإدارة الجلسات والكوكيز مع تحديد مسارات تسجيل الدخول عبر تويتر، الأول login/twitter الذي سيتوجه المتصفّح له بعد الضغط على الزر. والثاني سيُعيدنا موقع تويتر إليها وهو ما يُعرف بالـ "كول باك" CallBack. الآن نحتاج لكتابة ملف passport.js ضمن مُجلّد congif مثلما هو واضح في الكود أعلاه، وهو الملف الذي سيحتوي على المنطق الخاص بعملية تسجيل الدخول let twitterStrategy = require("passport-twitter").Strategy module.exports = function(passport){ passport.serializeUser(function(user, done) { done(null, user); }); passport.deserializeUser(function(user, done) { done(null, user); }); passport.use(new twitterStrategy({ consumerKey:"هنا المُعرّف الخاص بالتطبيق تحصل عليه من تويتر", consumerSecret:"الرمز السرّي أيضًا من موقع تويتر", callbackURL: "/login/twitter/cb", // المسار الذي سيُعيدنا موقع تويتر إليه }, function(token, tokenSecret, profile, done){ console.log(profile) // هذه بيانات المستخدم من تويتر return done(null, profile) }))// end of Twitter }//end of exports في بداية الملف قُمنا باستدعاء مكتبة تسجيل الدخول في تويتر الخاصّة بمكتبة Passport. ولو رغبت بإنشاء تسجيل دخول عبر فيسبوك فأنت بحاجة لتثبيت واستدعاء مكتبة خاصّة على الشكل let facebookStrategy = require("passport-facebook").Strategy بعدها نحتاج لاستخدام Middleware خاص بالمكتبة الجديدة، وفي مثالنا هو new twitterStrategy مع إدخال بيانات التطبيق، أما الـ "كول باك" فهو سيُعيد لنا أكثر من عنصر من بينها الـ Profile الذي سيحتوي على بيانات المستخدم بعد تحويله إلى تويتر وموافقته على منح صلاحيات للتطبيق. يُمكنك تسميته ما شئت، وفي هذا المكان وعوضًا عن console.log التي استخدمتها أنا بإمكانك مثلًا الاتصال مع قاعدة بيانات لإدخال بيانات المستخدم أو تحديثها إن كانت موجودة ولاتنس شيئين هامّين: الأول هو استخدام return done لأنها تُخبر برنامجنا أن كل شيء يعمل بسلاسة، والثاني هو تعريف passport.serialize وdeserialize لمرّة واحدة فقط لأنها مسؤولة عن إدارة الجلسات الخاصّة ببيانات المستخدم. أخيرًا، كيف يُمكن التأكيد أن المستخدم قام بتسجيل دخول ناجح وبياناته موجودة ضمن الجلسة من عدمها؟ الطريق بسيطة جدًا فقط اختبر القيمة التالية if (req.isAuthenticated()) return "ok" else return "غير مُسجّل للدخول" ماذا لو أردت استخدام فيسبوك مثلًا؟ المنطق بسيط جدًا. تقوم في تعريف المسارات بإضافة التالي app.get("/login/facebook/", passport.authenticate('facebook')) app.get("/login/facebook/cb", passport.authenticate("facebook", {successRedirect:"/", failureRedirect:"/loginFail"})) ومثلما اتفقنا في صفحة passport تقوم بتعريف "ميدل وير" جديد على الشكل passport.use(new facebookStrategy({ clientID:"معرف التطبيق", clientSecret:"الرمز السرّي", callbackURL:"/login/facebook/cb", }, function(token, refreshToken, profile, done){ console.log(profile._json) return done(null, profile._json) }))// end of FB بانتظار الاستفسارات لو كانت موجودة.
  7. مستوى الصعوبة: مبتدئ-متوسّط توفّر الشبكات الاجتماعية مكتبات برمجية تسمح الاستفادة من حسابات المُستخدمين في بقيّة التطبيقات، فعوضًا عن إنشاء حساب جديد وتعبئة كافّة البيانات بشكل يدوي، يُمكن للمستخدم اختيار تسجيل الدخول في حسابه في تويتر أو فيسبوك مثلًا لتتم العملية بسهولة تامّة. في NodeJS هناك مكتبة Passport الشهيرة التي تسمح بإنشاء نظام تسجيل دخول اعتمادًا على حسابات المستخدم في الشبكات الاجتماعية، أو حتى يُمكن إنشاء تسجيل دخول عبر البريد. لكن في هذا الدرس سأستعرض آلية إنشاء نظام تسجيل دخول باستخدام تويتر. قبل الخوض في آلية العمل سأشرح الفكرة النظرية. المستخدم أولًا يقوم في فيسبوك أو تويتر، أو حتى غوغل، بإنشاء تطبيق جديد من مركز المُطوّرين Dev Center ليحصل بذلك على رقم مُعرّف خاص بتطبيقه وعلى رمز سرّي يتم إدخالهما في مكتبة Passport لإتمام عملية تسجيل الدخول. الخطوة الأولى بكل تأكيد هي تثبيت المكتبات وإطار عمل ExpressJS كذلك لتسهيل إنشاء الواجهات البرمجية، والمطلوب تحميل التالي: npm install express passport passport-twitter body-parser cookie-parser express-session --save بعدها نقوم بإنشاء برنامجنا البسيط الذي يعرض زر لتسجيل الدخول عبر تويتر بالشكل التالي let express = require("express") let app = express() let PORT = process.env.PORT || 3000 let passport = require("passport") let cookieParser = require("cookie-parser") let session = require('express-session') let bodyParser = require("body-parser") app.use(cookieParser("3alamPro")) app.use(bodyParser.json()) app.use(bodyParser.urlencoded({ extended: false })) app.use(session({secret: "3alamPRO2017", saveUninitialized:true, resave:true})) app.use(passport.initialize()) app.use(passport.session()) require("./configs/passport")(passport) app.get("/", (req, res)=>{ res.send("<a href='/login/twitter'> تسجيل الدخول عبر تويتر </a>") }) app.get("/login/twitter", passport.authenticate('twitter')) app.get("/login/twitter/cb", passport.authenticate('twitter',{successRedirect:"/", failureRedirect:"/loginFail"})) app.listen(PORT, ()=>{ console.log(`Up & Running ${PORT}`) }) الكود السابق بسيط فهو استدعاء لبعض المكتبات الخاصّة بإدارة الجلسات والكوكيز مع تحديد مسارات تسجيل الدخول عبر تويتر، الأول login/twitter الذي سيتوجه المتصفّح له بعد الضغط على الزر. والثاني سيُعيدنا موقع تويتر إليها وهو ما يُعرف بالـ "كول باك" CallBack. الآن نحتاج لكتابة ملف passport.js ضمن مُجلّد congif مثلما هو واضح في الكود أعلاه، وهو الملف الذي سيحتوي على المنطق الخاص بعملية تسجيل الدخول let twitterStrategy = require("passport-twitter").Strategy module.exports = function(passport){ passport.serializeUser(function(user, done) { done(null, user); }); passport.deserializeUser(function(user, done) { done(null, user); }); passport.use(new twitterStrategy({ consumerKey:"هنا المُعرّف الخاص بالتطبيق تحصل عليه من تويتر", consumerSecret:"الرمز السرّي أيضًا من موقع تويتر", callbackURL: "/login/twitter/cb", // المسار الذي سيُعيدنا موقع تويتر إليه }, function(token, tokenSecret, profile, done){ console.log(profile) // هذه بيانات المستخدم من تويتر return done(null, profile) }))// end of Twitter }//end of exports في بداية الملف قُمنا باستدعاء مكتبة تسجيل الدخول في تويتر الخاصّة بمكتبة Passport. ولو رغبت بإنشاء تسجيل دخول عبر فيسبوك فأنت بحاجة لتثبيت واستدعاء مكتبة خاصّة على الشكل let facebookStrategy = require("passport-facebook").Strategy بعدها نحتاج لاستخدام Middleware خاص بالمكتبة الجديدة، وفي مثالنا هو new twitterStrategy مع إدخال بيانات التطبيق، أما الـ "كول باك" فهو سيُعيد لنا أكثر من عنصر من بينها الـ Profile الذي سيحتوي على بيانات المستخدم بعد تحويله إلى تويتر وموافقته على منح صلاحيات للتطبيق. يُمكنك تسميته ما شئت، وفي هذا المكان وعوضًا عن console.log التي استخدمتها أنا بإمكانك مثلًا الاتصال مع قاعدة بيانات لإدخال بيانات المستخدم أو تحديثها إن كانت موجودة ولاتنس شيئين هامّين: الأول هو استخدام return done لأنها تُخبر برنامجنا أن كل شيء يعمل بسلاسة، والثاني هو تعريف passport.serialize وdeserialize لمرّة واحدة فقط لأنها مسؤولة عن إدارة الجلسات الخاصّة ببيانات المستخدم. أخيرًا، كيف يُمكن التأكيد أن المستخدم قام بتسجيل دخول ناجح وبياناته موجودة ضمن الجلسة من عدمها؟ الطريق بسيطة جدًا فقط اختبر القيمة التالية if (req.isAuthenticated()) return "ok" else return "غير مُسجّل للدخول" ماذا لو أردت استخدام فيسبوك مثلًا؟ المنطق بسيط جدًا. تقوم في تعريف المسارات بإضافة التالي app.get("/login/facebook/", passport.authenticate('facebook')) app.get("/login/facebook/cb", passport.authenticate("facebook", {successRedirect:"/", failureRedirect:"/loginFail"})) ومثلما اتفقنا في صفحة passport تقوم بتعريف "ميدل وير" جديد على الشكل passport.use(new facebookStrategy({ clientID:"معرف التطبيق", clientSecret:"الرمز السرّي", callbackURL:"/login/facebook/cb", }, function(token, refreshToken, profile, done){ console.log(profile._json) return done(null, profile._json) }))// end of FB بانتظار الاستفسارات لو كانت موجودة.
  8. يسعى المُبرمج دائمًا لاختبار تطبيقاته بصورة مُكثّفة وبأكثر من حالة قبل إطلاقها بشكل رسمي. إلا أن هذا لا يعني أن المشاكل لن تحدث، وهنا يأتي دور فريق العمل الذي يحتاج لمراقبة كل شيء عن كثب لتقديم تجربة استخدام مُميّزة، وإلا سيُغادر المستخدم لو وجد الخطأ يتكرّر على فترة زمنية طويلة. في إطار عمل ExpressJS هناك أكثر من طريقة لمراقبة الطلبات والأخطاء الحاصلة في التطبيق، منها مكتبة Morgan التي تقوم بكتابة كل طلب وارد في الكونسول Console، وبالتالي يُمكن معرفة الطلبات الناجحة وتلك التي عادت بـ 404، دلالة على أن المستخدم طلب صفحة غير موجودة. في هذه الحالة يُمكن للقائمين على التطبيق تحليل الطلب ومعرفة فيما إذا كان هناك خطأ بالفعل للتخلّص منه. استخدام المكتبة بسيط جدًا يبدأ بتثبيتها npm install morgan --save بعدها وفي الملف الرئيسي للتطبيق يتم استخدامها بالطريقة الآتية let morgan = require("morgan") app.use(morgan('combined')) وبعد إتمام تلك الخطوات يُمكن مراقبة الكونسول Console وستظهر الطلبات الواردة بهذا الشكل ويُمكن بالمناسبة تغيير combined إلى dev أو tiny لتتغير البيانات التي يتم تدوينها في الكونسول. ماذا عن الأخطاء الأُخرى الحاصلة نتيجة لـ Throw؟ هل سيقضي المُبرمج وقته مُراقبًا ملفات الـ Log أو الكونسول طوال الوقت؟ بكل تأكيد لا لأن أداة AirBrake تأتي لمعالجة هذه المشكلة. تقوم هذه الأداة برصد الأخطاء ومن ثم إرسال تنبيه للمستخدم عبر بريده بشكل فوري، أو عبر حسابات فريق العمل في تطبيق سلاك مثلًا، وبالتالي يضمن المُبرمج أن يطّلع أولًا بأول على المشاكل الحاصلة. طريقة الاستخدام سهلة أيضًا ومُباشرة، تبدأ بالتوجه لموقع الأداة AirBrake.io ثم تسجيل حساب مجاني وإنشاء تطبيق جديد للحصول على مفتاح خاص. ثم يتم تثبيت مكتبة الأداة بالشكل التالي: npm install airbrake-js --save في الملف الرئيسي للتطبيق نقوم بالآتي let airBrake = require('airbrake-js') let ErrorHandler = require('./node_modules/airbrake-js/dist/instrumentation/express') // إنشاء كائن جديد let airBrakeClient = new airBrake({ projectId: 00000, //يتم استبدال الأصفار بالمعرف الخاص الذي ستحصل عليه بعد التسجيل في الموقع projectKey: 'MYKEY' // يتم استبدال المفتاح هذا بالمفتاح الذي يقوم الموقع بتوليده لك }) أخيرًا وقبل الـ Listen يتم إضافة السطر الآتي app.use(ErrorHandler(airBrakeClient)); في هذه الحالة وعند حدوث أي خطأ سيتم التبليغ عبر لوحة تحكّم الموقع أولًا كما هو موضّح في الصورة. مع إمكانية ربط الحساب مع حسابات أُخرى مثلما ذكرت سابقًا لتسهيل التنبيه على الأخطاء.
  9. يسعى المُبرمج دائمًا لاختبار تطبيقاته بصورة مُكثّفة وبأكثر من حالة قبل إطلاقها بشكل رسمي. إلا أن هذا لا يعني أن المشاكل لن تحدث، وهنا يأتي دور فريق العمل الذي يحتاج لمراقبة كل شيء عن كثب لتقديم تجربة استخدام مُميّزة، وإلا سيُغادر المستخدم لو وجد الخطأ يتكرّر على فترة زمنية طويلة. في إطار عمل ExpressJS هناك أكثر من طريقة لمراقبة الطلبات والأخطاء الحاصلة في التطبيق، منها مكتبة Morgan التي تقوم بكتابة كل طلب وارد في الكونسول Console، وبالتالي يُمكن معرفة الطلبات الناجحة وتلك التي عادت بـ 404، دلالة على أن المستخدم طلب صفحة غير موجودة. في هذه الحالة يُمكن للقائمين على التطبيق تحليل الطلب ومعرفة فيما إذا كان هناك خطأ بالفعل للتخلّص منه. استخدام المكتبة بسيط جدًا يبدأ بتثبيتها npm install morgan --save بعدها وفي الملف الرئيسي للتطبيق يتم استخدامها بالطريقة الآتية let morgan = require("morgan") app.use(morgan('combined')) وبعد إتمام تلك الخطوات يُمكن مراقبة الكونسول Console وستظهر الطلبات الواردة بهذا الشكل ويُمكن بالمناسبة تغيير combined إلى dev أو tiny لتتغير البيانات التي يتم تدوينها في الكونسول. ماذا عن الأخطاء الأُخرى الحاصلة نتيجة لـ Throw؟ هل سيقضي المُبرمج وقته مُراقبًا ملفات الـ Log أو الكونسول طوال الوقت؟ بكل تأكيد لا لأن أداة AirBrake تأتي لمعالجة هذه المشكلة. تقوم هذه الأداة برصد الأخطاء ومن ثم إرسال تنبيه للمستخدم عبر بريده بشكل فوري، أو عبر حسابات فريق العمل في تطبيق سلاك مثلًا، وبالتالي يضمن المُبرمج أن يطّلع أولًا بأول على المشاكل الحاصلة. طريقة الاستخدام سهلة أيضًا ومُباشرة، تبدأ بالتوجه لموقع الأداة AirBrake.io ثم تسجيل حساب مجاني وإنشاء تطبيق جديد للحصول على مفتاح خاص. ثم يتم تثبيت مكتبة الأداة بالشكل التالي: npm install airbrake-js --save في الملف الرئيسي للتطبيق نقوم بالآتي let airBrake = require('airbrake-js') let ErrorHandler = require('./node_modules/airbrake-js/dist/instrumentation/express') // إنشاء كائن جديد let airBrakeClient = new airBrake({ projectId: 00000, //يتم استبدال الأصفار بالمعرف الخاص الذي ستحصل عليه بعد التسجيل في الموقع projectKey: 'MYKEY' // يتم استبدال المفتاح هذا بالمفتاح الذي يقوم الموقع بتوليده لك }) أخيرًا وقبل الـ Listen يتم إضافة السطر الآتي app.use(ErrorHandler(airBrakeClient)); في هذه الحالة وعند حدوث أي خطأ سيتم التبليغ عبر لوحة تحكّم الموقع أولًا كما هو موضّح في الصورة. مع إمكانية ربط الحساب مع حسابات أُخرى مثلما ذكرت سابقًا لتسهيل التنبيه على الأخطاء.

عالم البرمجة

عالم البرمجة مقالات برمجة و دورات مجانية لإحتراف البرمجة هدفنا تبسيط البرمجة ونشرها بيد الكل بشكل ممتع ومتطور ومحدث بإستمرار لمواكبة جديد تطورات البرمجة الحديثة و المتقدمة بدون مقابل