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

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

تا اینجا پست‌های زیادی را در رابطه با Node و Angular دیده و به قدرت آنها ایمان آورده ایم. در این پست قصد داریم با استفاده از ترکیب جادویی MongoDBExpressAngularNode که به اختصار به MEAN معروف است یک برنامه Todo درست کنیم – برنامه ای که می توانیم وظایفی که می خواهیم انجام دهیم را به برنامه اضافه کنیم و با اتمام هر وظیفه آن را از لیست وظایفه حذف کنیم.

[button type=”success” size=”lg” link=”https://github.com/patrickava/baboon-todo”] [fa type=”github-alt”] سورس برنامه [/button]

ما برنامه ای خواهیم ساخت که قابلیت ایجاد و حذف وظیفه‌ها × ذخیره اطلاعات در MongoDB با استفاده از Mongoose × استفاده از فریم ورک Express × ساخت یک RESTful API برای نود × استفاده از آنگولار به عنوان front-end برای دسترسی به API داشته باشد.

در حالی که ساخت این برنامه در سطح ساده و متوسط قرار دارد اما مفاهیمی که در آن خواهیم دید در برنامه های پیشرفته نیز وجود دارد. تمرکز ما در این برنامه بیشتر بر روی ساخت API با نود و آنگولار به عنوان Front-End خواهد بود. در ادامه ما برنامه زیر را خواهیم ساخت:

ساخت Todo با MEAN.js

 

در Github دنبال کنید

 

سورس کد کامل برنامه را می توانید در گیت‌‌هاب پیدا کنید. آن را دانلود کنید و دستور npm install در ریشه پروژه اجرا کنید تا وابستگی ها نصب شوند. آنگاه برنامه را با دستور node server.js اجرا کنید و به آدرس http://localhost:3000 مراجعه کنید.


 

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

خیلی مهم است که ساختار برنامه‌ای را که درست می کنیم ساده باشد. در برنامه‌های بزرگتر هر بخش از برنامه به تکه‌های کوچکتر تقسیم می شود. می توانید از Mean.io که یک boilerplate است برای ساختار برنامه خود استفاده کنید. ابتدا ساختار پروژه Todo را بصورت زیر سازماندهی کنید:

همانطور که می دانیم فایل package.json تمام تنظیمات و وابستگی های Node را نگه می داد. ما از این فایل برای نصب تمام ماژول‌هایی که در برنامه به آن نیاز داریم استفاده می کنیم. تنظیمات زیر به package.json اضافه کنید:

حال دستور npm install را اجرا کنید تا ماژول ها دانلود و نصب شوند.

روش دیگر این است که بجای ساخت package.json بطور دستی، از دستور npm init در ترمینال استفاده کنیم و آنگاه دستور زیر را اجرا کنیم تا تمام ماژول‌ها در فایل ذخیره شوند:

در ساخت برنامه از فریم ورک محبوب Express استفاده شده است و همچنین از Mongoose برای ذخیره داده ها در MongoDB. ماژول Mongoose یک آبجکت مدلینگ برای MongoDB است – همچین چیزی در فریم ورک‌های لاراول یا سیمفونی نیز وجود دارد (ORM).

 

تنظیمات NODE

در package.json تعریف کرده ایم که فایل اصل ما server.js است. این فایل مکانی است که تمام تنظیمات برنامه Node ما را نگهداری می کند. در این فایل کارهای زیر را انجام خواهیم داد:

  • تنظیمات برنامه
  • اتصال به دیتابیس
  • ایجاد یک مدل مدل Mongoose
  • تعریف route برای RESTful API
  • تعریف route برای برنامه آنگولار
  • تنظیم پورت برنامه بر روی 3000 تا از مرورگر قابل مشاهده باشد

در حال حاظر ما فقط برنامه برای Express، دیتابیس MongoDB و تنظیم بورت پیکربندی می کنیم.

فایل server.js را باز کرده و کدهای زیر را به آن اضافه کنید:

  • ابتدا یک برنامه جدید با express تعریف کرده ایم
  • پکیج mongoose برای mongodb
  • morgan – نمایش (log) تمام درخواست ها (requests) در کنسول 
  • body-parser – گرفتن اطلاعات از POST
  • method-override – شبیه سازی DELETE و PUT

در خط 8 – 9 فایل‌های استاتیکی که در node_modules و public قرار می دهیم را تعریف کرده ایم.

در خط 10 تمام request ها را در کنسول چاپ می کنیم

در خط 11 از application/x-www-form-urlencoded استفاده م یکنیم

در خط 12 از application/json استفاده می کنیم

در خط 13 application/vnd.api+json به عنوان json تجزیه می کنیم.

آنگاه از طریق mongoose.connect() به دیتابیس MongoDB متصل می شویم.

 

حال با این تعداد کد ما یک سرور HTTP با Node در اختیار داریم.

 

راه اندازی دیتابیس

همانطور که می دانیم ما از دیتابیس MongoDB استفاده می کنیم، پس آن را از دانلود و نصب کنید. آنگاه با استفاده از کد برنامه فوق به دیتابیس متصل می شویم:

من در اینجا نام دیتابیس را todo قرار داده ام.

 

اجرای برنامه

تا اینجا package.json و server.js‌ داشتیم. می توانیم سرور را اجرا کنیم تا مطمئن شویم تا این مرحله همه چیز خوب پیش رفته است. تنها کافیست در کنسول دستور node server.js را اجرا کنید.

آموزش node

 

حال طبق معمول همیشه به آدرس http://localhost:3000 مراجعه کنید.

 

چنانچه دوست ندارید با هر بار تغییر در کدها سرور را متوقف و از نو اجرا کنید، پیشنهاد می شود از npm install -g nodemon استفاده شود. آنگاه با دستور nodemon server.js سرور را اجرا کنید.

 

امیدوارم تا اینجا به مشکلی بر نخورده باشید. در بخش بعدی ادامه کار را خواهیم دید!


 

  • ممنون که تجربیاتت رو با ما در میون میذاری و ما رو هم توش لذت یادگیریش شریک میکنی.
    مشکل شخصی من با BEAN Stack استفاده از انگولاره! چون به شخصه React رو به انگولار ترجیح میدم. گرچه من تو جاوااسکریپت تازه‌وارد هستم و کم‌تجربه‌تر از این حرفها هستم که این نظر رو بدم. ولی حس شخصیم فعلا اینه.
    باز هم ممنون از نوشته‌هات، برای من که سودمندند و از خوندنشون لذت میبرم.

    • پاتریک درآواکیانس

      خواهش می کنم 🙂
      در کل اینجور فریم ورک ها همه یه جورن، من از ابتدا بطور اتفاقی سراغ آنگولار رفتم و موندگار شدم، حتما سراغ react هم میرم. خیلی خوبه که js انتخاب کردید! جدی، بلاگ شما را هم تو دوستان لینک کردم، موفق باشید 😉

      • ممنون از لطف شما،
        اتفاقا اولین باری که وبلاگتون رو دیدم، صفحه دوستان رو هم دیدم و خیلی خوشم اومد از این کار، برای همین تو وبلاگ خودم هم همچین صفحه‌ای رو اضافه کردم.