قم بترميز API الأول الخاص بك مع نود جي إس و إكسبريس: قم بتوصيل قاعدة البيانات

() translation by (you can also view the original English article)

إنشاء API ريست مع نود جي إس و إكسبريس : توصيل قاعدة بيانات

في البرنامج التعليمي الأول، فهم الواجهات البرمجية لتطبيقات RESTful، تعلمنا ما هي بنية REST وما هي طرق واستجابات HTTP المطلوبة وكيفية فهم نقطة نهاية واجهة برمجة تطبيقات RESTful. في البرنامج التعليمي الثاني، كيفية إعداد خادم واجهة برمجة تطبيقات Express، تعلمنا كيفية إنشاء خوادم باستخدام كل من وحدة http المدمجة في Node وإطار Express، وكيفية توجيه التطبيق الذي أنشأناه إلى نقاط نهاية URL مختلفة.

حاليًا، نحن نستخدم البيانات الثابتة لعرض معلومات المستخدم في شكل خلاصة JSON عندما يتم الوصول إلى نقطة نهاية API مع طلب GET. في هذا البرنامج التعليمي، سنقوم بإعداد قاعدة بيانات MySQL لتخزين جميع البيانات، والاتصال بقاعدة البيانات من تطبيق Node.js، والسماح لواجهة برمجة التطبيقات استخدام طرق GET ، و POST ، و PUT ، و DELETE لإنشاء واجهة برمجة تطبيقات كاملة.

التركيب

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

إذا لم يكن لديك MySQL مثبتًا، فيمكنك تنزيل MAMP لنظام MacOS و Windows، والذي يوفر بيئة خادم محلية وقاعدة بيانات مجانية. وبمجرد الانتهاء من تنزيل هذا البرنامج، افتح البرنامج وانقر فوق "بدء الخوادم" لبدء تشغيل MySQL.

بالإضافة إلى إعداد MySQL نفسه، سنحتاج إلى برنامج GUI لعرض قاعدة البيانات والجداول. بالنسبة لنظام التشغيل Mac، قم بتنزيل SequelPro ، ومن أجل Windows قم بتنزيل SQLyog. بمجرد أن يتم تحميل MySQL وتشغيلها، يمكنك استخدام SequelPro أو SQLyog للاتصال بـ المضيف المحلي مع جذر اسم المستخدم وكلمة سر الجذر على المنفذ 3306.

بمجرد إعداد كل شيء هنا، يمكننا الانتقال إلى إعداد قاعدة البيانات الخاصة بنا API.

إعداد قاعدة البيانات

في برنامج عرض قاعدة البيانات، أضف قاعدة بيانات جديدة واسمها api. تأكد من تشغيل MySQL، وإلا فلن تتمكن من الاتصال بـ المضيف المحلي.

بعد أن تنشئ قاعدة بيانات api، انتقل إليها وقم بتشغيل الاستعلام التالي لإنشاء جدول جديد.

CREATE TABLE `users` (
  `id`       int(11)     unsigned NOT NULL AUTO_INCREMENT,
  `name`     varchar(30) DEFAULT '',
  `email`    varchar(50) DEFAULT '',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

سيعمل استعلام SQL هذا على إنشاء هيكل جدول المستخدمين لدينا. سيحصل كل مستخدم على معرّف يزداد تلقائيًا واسمًا وعنوان بريد إلكتروني.

يمكننا أيضًا ملء قاعدة البيانات بنفس البيانات التي نعرضها حاليًا من خلال مصفوفة JSON ثابتة عن طريق تشغيل استعلام INSERT.

1	INSERT INTO users (name, email)
2	VALUES ('Richard Hendricks', 'richard@piedpiper.com'),
3	('Bertram Gilfoyle', 'gilfoyle@piedpiper.com');

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

الاتصال ب MySQL

مرة أخرى في التطبيق لدينا، علينا الاتصال بـ MySQL من Node.js لبدء العمل مع البيانات. في وقت سابق، قمنا بتثبيت وحدة mysql npm ، والآن سنستخدمها.

قم بإنشاء دليل جديد يسمى البيانات وقم بإنشاء ملف config.js.

سنبدأ بطلب وحدة mysql في data /config.js.

1	const mysql = require('mysql');

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

// Set database connection credentials
const config = {
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'api',
};

لتحقيق الكفاءة، سنقوم بإنشاء مجمع MySQL، مما يسمح لنا باستخدام اتصالات متعددة في وقت واحد بدلاً من الاضطرار إلى فتح وإغلاق عدة اتصالات يدوياً.

1	// Create a MySQL pool
2	const pool = mysql.createPool(config);

أخيرًا، سنقوم بتصدير مجمع MySQL بحيث يمكن للتطبيق استخدامه.

1	// Export the pool
2	module.exports = pool;

يمكنك رؤية ملف تكوين قاعدة البيانات المكتملة في المرجع GitHub.

الآن بعد أن وصلنا إلى MySQL وقد اكتملت إعداداتنا، يمكننا الانتقال إلى التفاعل مع قاعدة البيانات من واجهة برمجة التطبيقات.

الحصول على بيانات API من MySQL

في الوقت الحالي، يعمل ملف route.js على إنشاء مصفوفة JSON للمستخدمين، والتي تبدو كالتالي.

1	const users = [{ ...

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

1	// Load the MySQL pool connection
2	const pool = require('../data/config');

في السابق، كان GET من أجل /مسار المستخدمين يرسل بيانات المستخدمين الثابتة. سوف يقوم الكود المحدث الخاص بنا بالاستعلام عن قاعدة البيانات لهذه البيانات بدلاً من ذلك. سنستخدم استعلام SQL لإختيار الكل من جدول المستخدمين ، الذي يبدو كهذا.

1	SELECT * FROM users

في ما يلي الشكل الذي سيظهر به المستخدمون الجدد للطريق، باستخدام طريقة الاستعلام عن المجمع ().

// Display all users
app.get('/users', (request, response) => {
    pool.query('SELECT * FROM users', (error, result) => {
        if (error) throw error;

        response.send(result);
    });
});

هنا، نقوم بتشغيل استعلام SELECT ثم نرسل النتيجة على JSON إلى العميل عبر نقطة النهاية / للمستخدمين. إذا أعدت تشغيل الخادم وانتقلت إلى صفحة / المستخدمين، فسترى نفس البيانات كما كانت من قبل، ولكنها أصبحت الآن ديناميكية.

استخدام بارامترات URL

حتى الآن، كانت نقاط النهاية لدينا مسارات ثابتة - إما الجذر / أو المستخدمين، ولكن ماذا عندما نريد أن نرى البيانات فقط عن مستخدم معين؟ سنحتاج إلى استخدام نقطة نهاية متغيرة.

بالنسبة لمستخدمينا، قد نرغب في استرداد معلومات حول كل مستخدم على حدة بناءً على بطاقة هويته الفريدة. للقيام بذلك، سوف نستخدم نقطتين (:) للإشارة إلى أنه بارامتر مسار.

// Display a single user by ID
app.get('/users/:id', (request, response) => {
        ...
    });
});

يمكننا استرداد البارامتر الخاص بهذا المسار باستخدام خاصية request.params. بما أن اسمنا مُعرّف، فستكون هذه هي الطريقة التي نشير إليها.

1	const id = request.params.id;

سنقوم الآن بإضافة عبارة WHERE إلى عبارة SELECT الخاصة بنا للحصول على النتائج التي تحتوي على بطاقة التعريف المحددة فقط.

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

pool.query('SELECT * FROM users WHERE id = ?', id, (error, result) => {
    if (error) throw error;

    response.send(result);
});

يبدو الرمز الكامل لمورد المستخدم الفردي لدينا الآن كما يلي:

// Display a single user by ID
app.get('/users/:id', (request, response) => {
    const id = request.params.id;

    pool.query('SELECT * FROM users WHERE id = ?', id, (error, result) => {
        if (error) throw error;

        response.send(result);
    });
});

الآن يمكنك إعادة تشغيل الخادم والتنقل إلى https: // localhost / users / 2 لمشاهدة المعلومات الخاصة بـ Gilfoyle فقط. إذا ظهرت لك رسالة خطأ مثل Cannot GET / users / 2، فهذا يعني أنك بحاجة إلى إعادة تشغيل الخادم.

يجب أن يؤدي الذهاب إلى عنوان URL هذا إلى عرض نتيجة واحدة.

[{
    id: 2,
    name: "Bertram Gilfoyle",
    email: "gilfoyle@piedpiper.com"
}]

إذا كان هذا ما تراه، فتهانينا: لقد قمت بإعداد بارامتر مسار ديناميكي بنجاح!

إرسال طلب POST

حتى الآن، استخدم كل ما قمنا به طلبات GET. هذه الطلبات آمنة، مما يعني أنها لا تغير حالة الخادم. نحن ببساطة نعرض بيانات JSON.

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

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

1	// Add a new user
2	app.post('/users', (request, response) => {
3	...
4	});

لاحظ أننا نستخدم app.post () بدلاً من app.get () الآن.

نظرًا لأننا نقوم بالإنشاء بدلاً من القراءة، سنستخدم استعلام INSERT هنا، مثلما فعلنا عند تهيئة قاعدة البيانات. سنرسل request.body بأكمله إلى استعلام SQL.

1	pool.query('INSERT INTO users SET ?', request.body, (error, result) => {
2	if (error) throw error;

سنحدد أيضًا حالة الاستجابة كـ 201، والتي تعني "تم الإنشاء". للحصول على بطاقة تعريف للعنصر الاخير المدرج، سنستخدم الخاصية insertId.

1	response.status(201).send(`User added with ID: ${result.insertId}`);

سيظهر رمز استلام POST بالكامل على هذا النحو.

// Add a new user
app.post('/users', (request, response) => {
    pool.query('INSERT INTO users SET ?', request.body, (error, result) => {
        if (error) throw error;

        response.status(201).send(`User added with ID: ${result.insertId}`);
    });
});

الآن يمكننا إرسال طلب POST عبره. في معظم الأحيان عندما ترسل طلب POST ، فأنت تقوم بذلك من خلال نموذج ويب. سنتعرف على كيفية إعداد ذلك بنهاية هذه المقالة، ولكن أسرع وأسهل طريقة لإرسال اختبار POST هي باستخدام cURL، باستخدام علامة -d (--data).

سنقوم بتشغيل curl -d، متبوعة بسلسلة استعلام تحتوي على جميع أزواج المفاتيح / القيم ونقطة نهاية الطلب.

1	curl -d "name=Dinesh Chugtai&email=dinesh@piedpiper.com" http://localhost:3002/users

بمجرد إرسال هذا الطلب، يجب أن تحصل على رد من الخادم.

1	User added with ID: 3

إذا انتقلت إلى http: // localhost / users، فستشاهد أحدث إدخال تمت إضافته إلى القائمة.

إرسال طلب PUT

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

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

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

// Update an existing user
app.put('/users/:id', (request, response) => {
    const id = request.params.id;

    pool.query('UPDATE users SET ? WHERE id = ?', [request.body, id], (error, result) => {
        if (error) throw error;

        response.send('User updated successfully.');
    });
});

لإجراء الاختبار، سنقوم بتحرير المستخدم 2 وتحديث عنوان البريد الإلكتروني من gilfoyle@piedpiper.com إلى bertram@piedpiper.com. يمكننا استخدام cURL مرة أخرى، باستخدام العلامة [-X (--request)]، لتحديد أننا نرسل طلب PUT بشكل صريح.

1	curl -X PUT -d "name=Bertram Gilfoyle" -d "email=bertram@piedpiper.com" http://localhost:3002/users/2

تأكد من إعادة تشغيل الخادم قبل إرسال الطلب، وإلا فستحصل على خطأ Cannot PUT / users / 2.

يجب أن ترى هذا:

1	User updated successfully.

يجب الآن تحديث بيانات المستخدم مع بطاقة التعريف 2.

إرسال طلب DELETE

مهمتنا الأخيرة لاستكمال وظيفة CRUD من API هي تقديم خيار لحذف مستخدم من قاعدة البيانات. سيستخدم هذا الطلب استعلام SQL DELETE مع WHERE، وسيقوم بحذف مستخدم فردي يتم تحديده بواسطة بارامتر مسار.

// Delete a user
app.delete('/users/:id', (request, response) => {
    const id = request.params.id;

    pool.query('DELETE FROM users WHERE id = ?', id, (error, result) => {
        if (error) throw error;

        response.send('User deleted.');
    });
});

يمكننا استخدام -X مرة أخرى مع cURL لإرسال الحذف من خلاله. لنحذف أحدث مستخدم أنشأناه.

1	curl -X DELETE http://localhost:3002/users/3

سترى رسالة النجاح.

1	User deleted.

انتقل إلى http: // localhost: 3002، وستلاحظ وجود اثنين فقط من المستخدمين الآن.

تهانينا! عند هذه النقطة ، اكتمل API. قم بزيارة GitHub repo لمشاهدة الرمز الكامل لـ ways.js.

إرسال طلبات عبر الوحدة النمطية `للطلب`

في بداية هذه المقالة، قمنا بتركيب أربعة تبعيات، وكان أحدها وحدة الطلب. بدلاً من استخدام طلبات cURL، يمكنك إنشاء ملف جديد بجميع البيانات وإرساله عبرها. سأقوم بإنشاء ملف يسمى post.js والذي سيخلق مستخدمًا جديدًا عبر POST.

const request = require('request');

const json = {
    "name": "Dinesh Chugtai",
    "email": "dinesh@piedpiper.com",
};

request.post({
    url: 'http://localhost:3002/users',
    body: json,
    json: true,
}, function (error, response, body) {
    console.log(body);
});

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

إرسال طلبات عبر نموذج ويب

عادة، يتم إرسال POST وطرق HTTP الأخرى التي تغير حالة الخادم باستخدام نماذج HTML. في هذا المثال البسيط ، يمكننا إنشاء ملف index.html في أي مكان، وإنشاء حقل لاسم وعنوان بريد إلكتروني. سيشير الإجراء الخاص بالنموذج إلى المورد، في هذه الحالة http // localhost : 3002 / users، وسنقوم بتعيين الطريقة كمشاركة.

أنشئ index.html وأضف الكود التالي إليه:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Node.js Express REST API</title>
</head>

<body>
    <form action="http://localhost:3002/users" method="post">
        <label for="name">Name</label>
        <input type="text" name="name">
        <label for="email">Email</label>
        <input type="email" name="email">
        <input type="submit">
    </form>
</body>

</html>

افتح ملف HTML الثابت هذا في متصفحك، املأه، وأرسله أثناء تشغيل الخادم في الجهاز. يجب أن تشاهد استجابة المستخدم المضافة ببطاقة التعريف: 4، ويجب أن تتمكن من عرض قائمة المستخدمين الجديدة.

استنتاج

في هذا البرنامج التعليمي، تعلمنا كيفية ربط خادم Express بقاعدة بيانات MySQL وإعداد المسارات التي تتوافق مع طرق GET و POST و PUT و DELETE للمسارات وبارامترات المسار الديناميكي. تعلمنا أيضًا كيفية إرسال طلبات HTTP إلى خادم واجهة برمجة التطبيقات باستخدام cURL ووحدة طلب Node.js ونماذج HTML.

في هذه المرحلة، يجب أن يكون لديك فهم جيد للغاية لكيفية عمل واجهات برمجة التطبيقات RESTful ، ويمكنك الآن إنشاء واجهة برمجة التطبيقات الخاصة بك الكاملة في Node.js مع Express و MySQL!