الاتصال بقواعد البيانات وإنشاء نموذج تسجيل الدخول

في هذا الدرس سوف نتناول الاتصال بقواعد البيانات داخل تطبيقات Nodejs/Express، وسوف نستعين بمكتبة Mongodb. هناك مكتبة mongoose وهي خيار آخر للراغبين بالاتصال بقواعد البيانات من نوع Mongo. لكن أيًا كان نوع قاعدة البيانات، أو المكتبة التي تُفضّل استخدامها، تحتاج من أجل إتمام الدرس لتثبيت Mongo على جهازك الخاص، وهذا بالضغط على الرابط التالي.

بشكل عام، فإن بيئة التطوير الخاصّة بك، حاسبك ونظام تشغيله، لن يحتوي بشكل افتراضي على جميع التقنيات مُثبّتة. وهنا، تحتاج دائمًا قبل استخدام أي مكتبة للتأكّد من وجود التقنية على حاسبك، فقواعد بيانات Mongo بنسبة كبيرة لن تكون موجودة بشكل افتراضي على ويندوز وماك، ومُعظم توزيعات لينكس. لذا احرص على زيارة الموقع الرسمي لأي تقنية وقم بتثبيت آخر نسخة لتجنّب الكثير من المشاكل التي قد تواجهك أثناء التطوير.

بعد تثبيت Mongo وضمان أنها تعمل نتوجّه لمُجلّد المشروع ونكتب الأمر التالي لتثبيت المكتبة

npm install mongodb --save

الآن، نقوم بإنشاء ملف جديد باسم database.js لوضع كل شيء يتعلّق بقاعدة البيانات فيه، إعدادات الاتصال، ودوال الاستعلام وغيرها، ليكون الكود على الشكل التالي

// الاتصال بقواعد البيانات
const MongoClient = require("mongodb").MongoClient; 
const assert = require("assert")
const dbURL = "mongodb://localhost:27017"  // رابط الاتصال بقواعد البيانات
const dbName = "sarahah" // اسم قاعدة البيانات



// دالة مُساعدة للتأكّد من وجود اتصال فقط لا غير
function testDatabaseConnection() {
    
MongoClient.connect(dbURL, function(err, client) {
    assert.equal(null, err);
    console.log("تم الاتصال بنجاح");
   
    const db = client.db(dbName);
   
    client.close();
  });
}

module.exports = {testDatabaseConnection}

في السطر الأخير module.exports نقوم بوضع الدول التي نُريد استخدامها في أي مكان داخل الواجهة البرمجية. وبالعودة إلى ملف index.js الرئيسي، يُمكننا في الأعلى إضافة السطر التالي لاستدعاء ملف قواعد البيانات

var dbConfig = require("./database")

ثم نقوم بإضافة السطر التالي

dbConfig.testDatabaseConnection();

أسفل 

app.get("/", (req, res)=> {

لو قُمنا بتشغيل الواجهة البرمجية وزيارة الرابط localhost:3033 ستظهر نفس نتيجة الدرس السابق؛ Welcome to Sarahah، وبمراجعة موجّه الأوامر Terminal، يجب أن تظهر عبارة "تم الاتصال بنجاح".

الآن، ننتقل لإنشاء نموذج تسجيل الدخول. لن يكون هناك نموذج HTML، بل سوف نعتمد على postman، وهي أداة تسمح لنا التواصل مع الواجهات البرمجية بشكل مُباشر عبر تحديد نوع الطلب؛ Get or POST، وإضافة بيانات للترويسة header وما إلى ذلك.

في ملف index.js سنقوم بإضافة مسار جديد لمعالجة البيانات التي يُرسلها المُستخدم عبر طلب POST على الرابط register، لكن قبل هذا نحتاج لتثبيت مكتبة body-parser للتعامل مع البيانات الواردة من الفورم، وهذه مكتبة تُستخدم بشكل دائم للتعامل مع البيانات من أي فورم، سواء كان HTML أو عبر أدوات مثل postman

npm install body-parser --save

في index.js نُضيف بعد dbconfig الأسطر التالية

var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

الآن كل شيء جاهز لإضافة الدالة التالية من أجل قراءة البيانات من الفورم

app.post("/register", (req, res)=>{
    console.log("استلمت طلب تسجيل.....")
    res.send(req.body);
})

في Postman، شكل الطلب يكون بهذا الشكل، احرص على اختيار POST من القائمة الموجودة إلى جانب الرابط الذي سيكون localhost:3033/register. أما البيانات فهي ستُمرّر عبر الـ Body ثم x-www-form-urlencoded

ستُلاحظ أن النتيجة كانت عبارة عن كائن يحتوي على نفس البيانات التي أرسلتها، وهذا لأننا استخدمنا res.send، سوف نعتمد على هذه الدالة بشكل دائم لإرسال الجواب للمُستخدم. أما مصدر البيانات فهو req.body. وبالتالي فإن قراءة البريد مُمكنة عبر req.body.email وكلمة المرور عبر req.body.password وهكذا.

إلى هنا كل شيء جاهز. لكن دعونا نتأكّد من صحّة البيانات التي أرسلها المُستخدم، بداية تنسيق البريد الإلكتروني ثم تطابق كلمات المرور. وهذا مُمكن يدويًا أو عبر استخدام مكتبة Validator التي أُفضّل استخدامها بشكل شخصي، ولهذا السبب دعونا نقم أولًا بتثبيتها عبر الأمر

npm install validator --save

هل تذكرون دالة قراءة البيانات من الفورم app.psot ؟ دعونا نستبدلها بالتالي

app.post("/register", (req, res)=>{
    var email = req.body.email
    var password = req.body.password
    var passwordConf = req.body.passwordConf
    if (email != undefined && validator.isEmail(email)) {
        if ((password == undefined || passwordConf == undefined)
        || (validator.isEmpty(password) || validator.isEmpty(passwordConf))
         || (password != passwordConf)
        ) {
            res.send("خطأ في كلمة المرور. تأكّد من أن الحقول غير فارغة وأن الكلمتين مُتطابقتان")
        }else{
            //إتمام طلب تسجيل حساب جديد
            res.send("كل شيء تمام. نُتابع في الدرس القادم :) ")
        }
    }else {
        res.send("خطأ في البريد الإلكتروني");
    }
})

في الأسطر الثلاث الأولى قُمنا بتعريف مُتغيّرات واحد للبريد الإلكتروني، وآخرين لكلمة المرور ولتأكيدها. بعدها نقوم بالتأكّد من أن قيمة المُتغيّر لا تساوي undefined، وهذه قيمة سوف نحصل عليها لو لم يقم المُستخدم بإرسال email مع الطلب ضمن الـ Body، بعدها نقوم باستخدام دالة isEmail الموجود ضمن مكتبة validator وهي تعود بـ true أو false. في حالة وجود بريد إلكتروني مُرسل وتنسيقه صحيح وسليم ننتقل لاختبار حقول كلمة المرور للتأكّد من أنها أُرسلت مع الطلب، ومن أنها غير فارغة عبر دالة isEmpty ومن وجود تطابق بينها، وفي حالة تحقّق تلك الشروط، تقوم بقبول الطلب وغير ذلك، نُرسل الخطأ ونوعه للمُستخدم.

لا تنس إضافة السطر في الأعلى :)

var validator = require("validator")

دعونا نتوقّف هنا للتأكّد من أن الجميع وصل لهذه المرحلة دون مشاكل، لمُتابعة الدروس في وقت لاحق. يُمكنكم ترك الاستفسارات هنا. كما يُمكنكم التواصل معي مُباشرة عبر حسابي في الفيس بوك.