پروژه ساخت اپلیکیشن نمونه MEAN Stack با پشتیبانی از انگولار 9 (قسمت اول)

در این دوره قصد داریم تا با هم یک اپلیکیشن MEAN Stack را با استفاده از انگولار 9 و 8 و 7 و بوت استرپ 4 بسازیم. در این پروژه از Node.js و Express.js و MongoDB برای بک-اند، و از انگولار 7 تا 9 برای فرانت-اند استفاده خواهیم کرد. این پروژه برای کسانی مناسب است که تا حدودی به این ابزارها (M.E.A.N) آشنایی داشته باشند و بتوانند کدها را بخوانند. لذا این یک دوره برای ساخت یک پروژه است و برای مبتدی ها مناسب نمی باشد.

این اپلیکیشن یک «سیستم مدیریت کارمندان» خواهد بود که با استفاده از MEAN Stack ساخته می شود. سعی را بر آن گذاشته ام که مهم ترین عناوین مربوط به توسعه ی اپلیکیشن های CRUD را در این پروژه بگنجانم. (عبارت CRUD مخفف کلماتCreate ،Read ، Update ،Delete می باشد. در اپلیکیشن های CRUD قابلیت خواندن، نوشتن، بروزرسانی و حذف محتوا وجود دارد)

MEAN stack به چه معناست؟

عبارت MEAN stack مخفف کلمات Mongo DB و Express JS و Angular 7/8/9 و Node JS می باشد.

• Mongo DB: یک دیتابیس متن-باز و بدون SQL و فراپلتفرم و داکیومنت‌محور می باشد (open-source NoSQL cross-platform document-oriented database)
• Express JS: یک فریم ورک وب اپلیکیشنی است که با Node JS کار می کند. این فریم ورک کمک می کند تا وب‌اپلیکیشن (web app) و رست‌ای‌پی‌آی (RESTful API) بسازیم.
• Angular 7/8/9: یک فریم ورک فرانت-اند بر مبنای تایپ اسکریپت می باشد که بوسیله ی تیم طراحی گوگل ساخته شده است.
• Node JS: یک محیط اجریی برای زبان برنامه نویسی جاوا اسکریپت است که کدهای جاوا اسکریپت را خارج از مرورگر اجرا می کند. این ابزار کاربردی برای ویندوز، مک و لینوکس موجود می باشد.

در این آموزش از ابزارهای زیر برای ساخت اپلیکیشن MEAN Stack استفاده خواهیم کرد:

• Node JS
• MongoDB
• Mongoose JS
• Express JS
• Angular CLI 7.2.3
• Visual Studio Code

1. نصب محیط توسعه ی نود جی اس

نود جی اس (Node JS) را از سایت رسمی آن دانلود کرده و بر روی سیستم خود نصب کنید. برای اطمینان از صحت نصب آن، Command Prompt ویندوز خود را باز کرده و درون آن فرمان زیر را بنویسید و اجرا کنید تا بدین وسیله ورژن نصب شده از نود جی اس را بر روی ویندوز خود مشاهده نمایید.

node -v

2. ساخت یک بک-اند با نود جی اس

برای نوشتن کدهای قابل مدیریت و ویرایش باید فولدر مربوط به بک-اند MEAN Stack را مجزا در نظر بگیریم. فولدری با نام backend در روت (root) دایرکتوری انگولار (angular) بسازید (بوسیله ی فرمان زیر). این فولدر مسئولیت به دوش کشیدن کدهای بک-اند اپلیکیش ما را برعهده خواهد داشت. به خاطر داشته باشید که این فولدر دارای یک پوشه ی node_modules مجزا از انگولار خواهد بود.

mkdir backend

برای رفتن به داخل فولدر backend فرمان زیر را اجرا کنید.

cd backend

حالا که داخل فولدر backend هستید، فرمان زیر را برای ایجاد فایل package.json وارد کنید. این فایل حاوی متادیتای (meta data) اپلیکیشن شما خواهد بود. این فایل به عنوان فایل مانیفست (manifest) پروژه های نود جی اس هم شناخته می شود.

npm init -y

نصب و پیکربندی پکیج NPM برای توسعه ی اپلیکیشن های MEAN Stack

برای نصب نودماژول (node modules) مذکور، فرمان زیر را بنویسید و اجرا کنید (اینتر بزنید).

npm install --save body-parser cors express mongoose

در فرمان بالا:

• body-parser: یک میان‌افزار (middleware) برای تجزیه ی JSON می باشد. این ابزار کمک می کند تا دیتا، متن یا آبجکت JSON را تجزیه کنیم.
• CORS: این پکیج را با عنوان «میان افزار اکسپرس جی اس» هم می شناسند. این ابزار امکان فعال کردن CORS را با چندین آپشن فراهم می آورد.
• Express.js: یک فریم ورک اوپن-سورس از وب‌اپلیکیشن های نود جی اس است. این ابزار به ما در ساخت WEB APPLICATION و RESTFUL API ها کمک می کند.
• Mongoose: یک ODM از MongoDB برای Node است که امکان تعامل با مونگو دیتابیس را برای ما فراهم می آورد.

شروع دوباره ی سرور، هر دفعه که تغییری ایجاد می شود، کاری وقت گیر به حساب می آید. برای رهایی از این مشکل، از یک ماژول (npm module) با نام nodemon استفاده می کنیم. این پکیج هر بار که تغییری ایجاد کنیم، به صورت اتوماتیک سرور را ری‌استارت می کند. (مثلا زمانی که رنگ یک دکمه را در اپلیکیشن عوض می کنیم، نیازی نیست تا سرور نمایش دهنده ی زنده ی اپلیکیشن را رفرش کنیم تا تغییرات را ببینیم، بلکه این رفرش کردن به صورت اتوماتیک انجام می شود)

این ماژول را با استفاده از فرمان زیر، به صورت محلی (لوکال یا local) نصب می کنیم:

npm install nodemon --save-dev

حال دوباره به داخل دایرکتوری backend بروید و در آنجا یک فایل جدید با نام server.js ایجاد کنید. (با استفاده از فرمان زیر)

touch server.js

اکنون کدهای زیر را داخل این فایل کپی کنید:

let express = require('express'),
   path = require('path'),
   mongoose = require('mongoose'),
   cors = require('cors'),
   bodyParser = require('body-parser'),
   dbConfig = require('./database/db');

// Connecting with mongo db
mongoose.Promise = global.Promise;
mongoose.connect(dbConfig.db, {
   useNewUrlParser: true
}).then(() => {
      console.log('Database sucessfully connected')
   },
   error => {
      console.log('Database could not connected: ' + error)
   }
)

// Setting up port with express js
const employeeRoute = require('../backend/routes/employee.route')
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
   extended: false
}));
app.use(cors()); 
app.use(express.static(path.join(__dirname, 'dist/mean-stack-crud-app')));
app.use('/', express.static(path.join(__dirname, 'dist/mean-stack-crud-app')));
app.use('/api', employeeRoute)

// Create port
const port = process.env.PORT || 4000;
const server = app.listen(port, () => {
  console.log('Connected to port ' + port)
})

// Find 404 and hand over to error handler
app.use((req, res, next) => {
   next(createError(404));
});

// error handler
app.use(function (err, req, res, next) {
  console.error(err.message); // Log error message in our server's console
  if (!err.statusCode) err.statusCode = 500; // If err has no specified error code, set error code to 'Internal Server Error (500)'
  res.status(err.statusCode).send(err.message); // All HTTP requests must have a response, so let's send back an error with its status code and message
});

خب! به پایان قسمت اول آموزش ساخت پروژه با انگولار رسیدیم. با ما در قسمت بعدی همراه باشید تا این اپلیکیشن را مرحله به مرحله با هم بسازیم.

منبع: سایت Positronx