التمرين - معلمات المسار والاستعلام - Training

4 دقائق

بصفتك مهندسا في Tailwind Traders، قم بإنشاء واجهات برمجة التطبيقات الخاصة بك لتكون فعالة لكل من الخادم والعميل عن طريق الحد من كمية البيانات التي يتم إرسالها أو إرجاعها من واجهة برمجة التطبيقات.

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

لتجنب هذا السيناريو، يُستحسن الحد من حجم الاستجابة:

استخدام معلمات المسار لطلب سجل معين
استخدم معلمات الاستعلام لتحديد مجموعة فرعية من السجلات.

هذا التمرين يعلم كلا التقنيتين.

ابدأ العملية لإنشاء GitHub Codespace جديد على main فرع MicrosoftDocs/node-essentials مستودع GitHub.

افتح هذا المشروع في GitHub Codespaces
في صفحة Create codespace ، راجع إعدادات تكوين مساحة التعليمات البرمجية ثم حدد Create new codespace
انتظر حتى تبدأ مساحة التعليمات البرمجية. قد تستغرق عملية بدء التشغيل هذه بضع دقائق.
افتح محطة طرفية جديدة في مساحة التعليمات البرمجية.

تلميح

يمكنك استخدام القائمة الرئيسية للانتقال إلى خيار القائمة Terminal ثم تحديد خيار New Terminal .
تحقق من تثبيت Node.js في بيئتك:
```
node --version
```
أغلق المحطة الطرفية.
تتم التدريبات المتبقية في هذا المشروع في سياق حاوية التطوير هذه.

افتح Visual Studio Code في سياق دليل فارغ.
تأكد من تثبيت ملحق حاويات Dev في Visual Studio Code.
افتح محطة طرفية جديدة في المحرر.

تلميح

يمكنك استخدام القائمة الرئيسية للانتقال إلى خيار القائمة Terminal ثم تحديد خيار New Terminal .
MicrosoftDocs/node-essentials استنساخ مستودع GitHub في الدليل الحالي.
```
git clone https://github.com/MicrosoftDocs/node-essentials.git .
```
افتح المجلد الذي قمت باستنساخ مستودع GitHub فيه.
افتح لوحة الأوامر، وابحث عن أوامر حاويات التطوير، ثم حدد حاويات التطوير: إعادة الفتح في الحاوية.

تلميح

قد يطالبك Visual Studio Code تلقائيا بإعادة فتح المجلد الموجود داخل حاوية تطوير. هذا مكافئ وظيفيا لاستخدام لوحة الأوامر لإعادة فتح مساحة العمل الحالية في حاوية.
تحقق من تثبيت Node.js في بيئتك:
```
node --version
```
أغلق المحطة الطرفية.
تتم التدريبات المتبقية في هذا المشروع في سياق حاوية التطوير هذه.

إعداد ملفات للمشروع

لفحص المشروع لهذه الوحدة النمطية، افتح ./nodejs-http/exercise-express-routing/parameters المجلد في محرر التعليمات البرمجية.

يجب أن يحتوي دليل المعلمات على هذه الملفات:

الملف	الغرض
`app.js`	يحتوي هذا الملف على تطبيق Express.
`package.json`	يحتوي هذا الملف على تبعيات المشروع.
`package-lock.json`	يحتوي هذا الملف على الإصدارات الدقيقة من التبعيات.

انقر بزر الماوس الأيمن فوق اسم المجلد في مستكشف الملفات، /nodejs-http/exercise-express-routing/parameters وحدد Open in integrated terminal.
في المحطة الطرفية، قم بتشغيل الأمر التالي لتثبيت تبعيات المشروع:
```
npm install
```
افتح app.js لمعاينته. يجب أن يبدو الملف على النحو التالي:
```
const express = require('express')
const app = express()
const port = 3000

const products = [
{
  id: 1,
  name: "Ivanhoe",
  author: "Sir Walter Scott",
},
{
  id: 2,
  name: "Colour Magic",
  author: "Terry Pratchett",
},
{
  id: 3,
  name: "The Bluest eye",
  author: "Toni Morrison",
},
];

app.get('/', (req, res) => res.send('Hello API!'));

app.get("/products/:id", (req, res) => {});

app.get('/products', (req, res) => {});

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`));
```
تنشئ التعليمة البرمجية JavaScript خادم Express.js أساسي. وهو يعرف صفيفا من products ويعين ثلاثة مسارات: الجذر (/)، /products/:idو، و /products. يستمع الخادم على المنفذ 3000. المسارات /products/:id و /products هي عناصر نائبة بدون وظائف حتى الآن.

يتم ترميز البيانات لتبسيط التمرين. في سيناريو العالم الحقيقي، تأتي البيانات من قاعدة بيانات أو تخزين آخر.

تنفيذ مسار المنتج لإرجاع منتج واحد

تحتوي التعليمات البرمجية على تطبيق Express. الخطوة التالية هي تنفيذ مسارين:

/products/:id: يجب أن يعود هذا المسار بمنتجٍ واحدٍ.
/products:يجب أن يرجع هذا المسار كافة المنتجات أو العديد من المنتجات التي تطلبها معلمات الاستعلام.

لتنفيذ المسار /products/:id، حدد موقع التعليمات البرمجية التالية في ملف app.js في دليل المعلمات :
```
app.get("/products/:id", (req, res) => {});
```
استبدلها بهذه التعليمة البرمجية:
```
app.get("/products/:id", (req, res) => {
  res.json(products.find(p => p.id === +req.params.id));
});
```
في terminal، بادر بتشغيل الأمر التالي لتشغيل التطبيق:
```
node app.js
```
عندما ينبثق Visual Studio Code إعلام فتح المستعرض، حدد فتح في المستعرض.
أضف ما يلي إلى نهاية عنوان URL:
```
/products/1
```
تكون النتيجة:
```
{
  "id": 1,
  "name": "Ivanhoe",
  "author": "Sir Walter Scott"
}
```
تهانينا! لقد نفذت المسار بشكل صحيح. يستخدم التطبيق معلمة المسار id للعثور على منتج معين.
في المحطة الطرفية، حدد Ctrl+C لإيقاف التطبيق.

تنفيذ مسار المنتجات لإرجاع قائمة بالمنتجات

لتنفيذ المسار /products، حدد موقع التعليمات البرمجية التالية:

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

استبدلها بهذه التعليمة البرمجية:

app.get("/products", (req, res) => {
  const page = +req.query.page;
  const pageSize = +req.query.pageSize;

  if (page && pageSize) {
    const start = (page - 1) * pageSize;
    const end = start + pageSize;
    res.json(products.slice(start, end));
  } else {
    res.json(products);
  }
});

في terminal، بادر بتشغيل الأمر التالي لبدء تشغيل التطبيق واختبار التعليمة البرمجية:
```
node app.js
```
عندما ينبثق Visual Studio Code إعلام فتح المستعرض، حدد فتح في المستعرض.
أضف ما يلي إلى نهاية عنوان URL:
```
/products?page=1&pageSize=2
```
تكون النتيجة:
```
[{
  "id": 1,
  "name": "Ivanhoe",
  "author": "Sir Walter Scott"
},
{
  "id": 2,
  "name": "Colour Magic",
  "author": "Terry Pratchett"
}]
```
تظهر الاستجابة أول سجلين من ثلاثة سجلات. تعني هذه الاستجابة أن معلمات الاستعلام، page و pageSize، تمت تصفيتها أسفل حجم الاستجابة من القائمة الكاملة إلى عنصرين.
قم بتغيير عنوان URL لاستخدام المسار التالي، products?page=2&pageSize=2 لتغيير عدد الصفحات من صفحة إلى صفحتين. الاستجابة هي:
```
[{
  "id": 3,
  "name": "The Bluest eye",
  "author": "Toni Morrison"
}]
```

نظرا لأن التعليمات البرمجية تحتوي على ثلاثة سجلات فقط، يجب أن تحتوي الصفحة الثانية على سجل واحد فقط.

في المحطة الطرفية، حدد Ctrl+C لإيقاف التطبيق.

لقد طبقت معلمات الاستعلام بنجاح للحد من الاستجابة.

متابعة

التمرين - معلمات المسار والاستعلام

فتح المشروع في حاوية التطوير

إعداد ملفات للمشروع

تنفيذ مسار المنتج لإرجاع منتج واحد

تنفيذ مسار المنتجات لإرجاع قائمة بالمنتجات

الملاحظات