ممارسة - إعداد نموذج المشروع واستكشافه

مكتمل

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

الحصول على التعليمات البرمجية وإعدادها

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

    git clone https://github.com/MicrosoftDocs/mslearn-module-shifting-nodejs-express-apis-to-serverless learn-functions
    
  2. قم بالتغيير إلى دليل مستودع التعليمات البرمجية.

    cd learn-functions
    
  3. تثبيت تبعيات حزمة npm.

    npm install
    
  4. إنشاء التعليمات البرمجية Node.js Express وAngular.

    npm run full:build
    

فهم بنية التطبيق

نموذج التطبيق هو Node.js التقليدية وExpress API مع أربع طرق تخدم نقاط النهاية التالية:

الأسلوب نقطة نهاية المسار
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

افتح المشروع في Visual Studio Code، وافتح مجلد الخادم لاستكشاف بنية واجهة برمجة التطبيقات.

server
 | - data
 | | - vacations.json
 | - models
 | | - vacation.model.ts
 | - routes
 | | - index.ts            👈 1. Entry point
 | | - vacation.routes.ts  👈 2. The vacation routes
 | - services
 | | - index.ts
 | | - vacation.service.ts 👈 3. The logic and data 
 | - index.ts
 | - server.ts             👈 The Express server
 | - tsconfig.json
  1. نقطة الإدخال هي ملف الخادم/index.ts الذي يقوم بتشغيل التعليمات البرمجية server.ts لبدء تشغيل خادم Express.
  2. ثم يتم تحميل المسارات، مثل /vacations، من المجلد /routes .
  3. تنفذ المسارات التعليمات البرمجية المناسبة في مجلد /services . يتم تعريف تكوين مخزن البيانات في ملف vacation.service.ts .

يقدم HTTP GET تطبيق عميل Angular طلبا للمسار /api/vacations ، والمسار في routes/vacation.routes.ts استدعاء منطق البيانات في services/vacation.service.ts الملف للحصول على الإجازات.

تكوين الوكيل

يجب أن يكون تطبيق Angular قادرا على تقديم طلبات إلى Node.js Express API. يستخدم تطبيق Angular وكيلا لإعادة توجيه الطلبات إلى خادم Express. يمكن إعداد وكيل المستعرض من تحديد موقع خادم Express. افتح proxy.conf.json ولاحظ أنه تم تعيين المنفذ إلى 7070، منفذ تطبيق Express.

{
  "/api": {
    "target": "http://localhost:7070",
    "secure": false
  }
}