ساخت برنامه تک صفحه ای Todo با MEAN – بخش دوم

ساخت برنامه تک صفحه ای Todo با MEAN – بخش دوم

در بخش اول برنامه Todo خود را پیکربندی اولیه کردیم و همچنین از طریق ماژول mongoose به دیتابیس MongoDB متصل شدیم. حال اجازه دهید بدون مقدمه مراحل بعدی را انجام دهیم.

 

برای ساخت پروژه از MongoDB‌ استفاده می کنیم پس اگر در حال حاظر آن را نصب نکرده اید، آموزش نصب MongoDB را در Peedes دنبال کنید.

 

ساختار برنامه

حال می خواهیم خلاصه‌ای از آنچه که چگونه بخش‌های مختلف برنامه با هم کار می کنند داشته باشیم. بسیاری ایده و تکنولوژی های مختلف در این برنامه ترکیب شده اند که با قرار دادن آنها در کنار هم می توانید برنامه های جذابی درست کنید. در نمودار زیر نشان داده شده است که بخش های مختلف چطور به هم گره خورده اند و با هم یک برنامه کامل را تشکیل می دهند.

آموزش MEAN.js

آنگولار در Front-End به کار می رود. به تمام داده‌ها از طریق API نود دسترسی پیدا می کند. Node اطلاعات دیتابیس را می گیرد و اطلاعات را در قالب JSON به Angular ارسال می کند.

با این روش می توانید برنامه را از front-end و API جدا کنید. بطوری که اگر می خواهید API را توسعه دهید، می توانید همیشه مسیرها و توابع را  بدون تاثیر در برنامه آنگولار اضافه کنید. بنابراین با این روش می توانزد برنامه های متفاوت بر روی پلتفرم‌های مختلف درست کنید. تنها کافیست API خود طراحی کنید.

 

ساخت API نود برنامه

قبل از اینکه سراغ بخش front-end برنامه برویم، نیاز داریم ابتدا RESTful API خود را درست کنیم. این به ما اجازه می دهد تا از طریق api قادر به دسترسی، ایجاد، حذف todo باشیم. همچنین باعث می شود داده ها در قالب JSON برگشت داده شوند.

 

مدل TODO

ما می بایست ابتدا مدل (model) ساده خود را برای Todo تعریف کنیم. مدل زیر را بعد از بخش تنظیمات و قبل از listen اضافه کنید:

تمام چیزی که ما می خواهیم تنها یک متن برای todo است. MongoDB خود کلید id_ برای هر کدام از todoها تولید می کند.

 

RESTFUL API ROUTES

حال اجازه دهید مسیرهای Express خود را برای فراخوانی API تعریف کنیم.

بر اساس این routeها در زیر توضیح داده شده است که چطور برنامه front-end باید داده از API درخواست کند:

درخواست HTTP URL توضیحات
GET /api/todos دریافت تمامی todo ها
POST /api/todos ایجاد یک todo
DELETE /api/todos/:todo_id حذف یک todo بر اساس id

در داخل هر یک از مسیرها، ما از متدهای Mongoose‌ استفاده کرده ایم تا به راحتی با دیتابیس تعامل داشته باشیم. ما قبلا دیتابیس خود را با var Todo = mongoose.model درست کرده ایم و حالا با استفاده از find، create و remove می توانیم عملیاتی بر روی دیتابیس انجام دهیم. کارهای زیادی است که می توانید با mongoose انجام دهید، تنها کافیس به سایت آن مراجعه کنید.

حال خوشحال باشید چون API ما ساخته شد! حال اگر برنامه را اجرا کنید می توانید از طریق آدرس http://localhost:3000/api/todos تمام todo ها را مشاهده کنید. اما حالا چیزی برای نشان دادن وجود ندارد چون هنوز هیچ todo به دیتابیس اضافه نکرده ایم.

در پست بعدی خواهیم دید که چطور بخش Front-End را با AngularJS درست کنیم.