آشنایی با  MEAN Stack 

طراحی و ساخت یک وب‌اپلیکیشن مستلزم استفاده از تکنولوژی‌ها و ابزارهای مختلف است. از دستکاری در دیتابیس‌ها گرفته تا عملیات سمت سرور و سمت کاربر، باید همه به صورت دقیق انجام شود تا بتوان نتیجه را دید. قبل از شروع هر پروژه‌ای باید ساختار کلی پروژه در بیاید که می‌توان گفت یک کار طاقت‌فرسا و زمان‌بر است. استفاده از یک Framewrok یا Stack میتواند سرعت شما را افزایش دهد و کار توسعه را برای شما آسان‌تر کند.

MEAN چیست؟

به گفته‌ی وب‌سایت رسمی، MEAN یک پلتفرم Full-stack جاوا اسکریپت است که برای طراحی و پیاده‌سازی وب‌اپلیکیشن‌های مدرن از آن استفاده می‌کنند.

همان‌گونه که در بالا نیز به آن اشاره کردیم بسیار مشهود است که MEAN تمامی توسعه‌دهندگان جاوا اسکریپت را مورد هدف قرار داده چه توسعه‌دهندگان فرانت‌اند، چه توسعه‌دهندگان بک‌اند هم‌چنین یک پلتقرم Stack است که شامل چند Componenet است.
این componenet ها شامل موارد زیر است:

MongoDB
Express
AngularJS
NodeJS

همان‌گونه که می‌بینید MEAN تمامی تکنولوژی‌های به‌نام و محبوب جاوااسکریپتی را در یک جا جمع کرده تا به ساده‌ترین شکل ممکن اپلیکیشن‌های پیچیده را پیاده‌سازی کنید.

پروسه نصب

برای نصب MEAN Stack شما دو راه دارید:

1. سری به وب‌سایت Mean.io بزنید و پروسه نصب را از آنجا دنبال کنید.
2. استفاده از  Yoeman

نصب MEAN از وب‌سایت

این روش بسیار ساده است، وارد وب‌سایت شوید و کل Framework را در قالب یک فایل Zip  دانلود کنید.

یکی دیگر از راه‌های نصب آن برای کسانی که میانه‌ی خوبی با ترمینال سیستم خود دارند این است که کل مخزن GIthub پروژه را روی سیستم خود Clone کنید:

git clone https://github.com/linnovate/mean.git

 

نصب MEAN با استفاده از Yeoman

تعداد تولیدکنندگان  Yeoman که توسط توسعه‌دهندگان مختلفی ارایه شده است زیاد است .

برای نصب MEAN از این روش دو مرحله وجود دارد اول اینکه تولیدکننده Yeoman را نصب کنیم سپس از طریق آن  MEAN را نصب کنیم:

npm install -g generator-meanstack

سپس نوبت به نصب MEAN رسیده:

yo meanstack

ما در این مقاله کل پروژه را از گیت‌هاب Clone خواهیم کرد. اگر دوست دارید با روش Yeoman شروع به کار کنید، پیشنهاد می‌شود نوشته Addy Osmani را در این حوزه را مالعه کنید.

بعد از نصب با دستور cd وارد فولدری شوید که MEAN را در آن نصب کرده‌اید. سپس دستور grunt را وارد کنید به یاد داشته باشید که باید grunt-cli را باید از قبل نصب کرده باشید.

این دستور یک سرور با پورت ۳۰۰۰ درست می‌کند. یعنی زمانی که شما آدرس زیر را تایپ کنید عکس زیر برای شما نمایش داده خواهد شد:

http://localhost:3000

MEAN Stack در واقع موتوری بسیار قوی برای درست‌کردن بلاگ است که با استفاده از روش‌های مختلفی مانند فیسبوک، گیت‌هاب، توییتر و گوگل‌پلاس اجازه دسترسی می‌دهد. همچنین شما می‌توانید با استفاده از یک نام کاربری و رمز عبور ساده نیز از ان استفاده کنید.

در تصویر زیر شما شاهد ساختار کلی فایل‌های  MEAN هستید.

بخش سرور MEAN به دو فولدر و یک فایل دسته‌بندی شده است:

فولدر App: شامل model,view و Controllerها تقسیم شده است که کل اپلیکیشن را می‌سازد.

فولدر config: به شما کمک می‌کند تا رفتار بخش‌های مختلف اپلیکیشن را از این طریق کنترل کنید.

همچنین فایل server.js نقطه‌ی ورودی اپلیکیشن است.

بیاید هریک را به صورت جداگانه بررسی کنیم:

فولدر app

در این فولدر تمامی کدهای سمت سرور نگه‌داری میشود. این فولدر شامل زیرفولدرهایی با نام‌های model view controller است که در مجموع به MVC سرور ختم می‌شود و همچنین یک فولدر برای روت‌ها.

به صورت پیش‌فرض کنترلرها برای مقالات، کاربران و فایل ایندکس برای مسیر روت وجود دارد.

هم‌جنین برای آنها Modelهایی نیز تعبیه شده است.

و همچنین روت‌ها برای تمامی آنها در طول نصب درست خواهد شد.
ساختار کلی پوشه views به صورت زیر خواهد بود:

فولدر includes شامل فوتر و هدر کل اپلیکیشن است که در تمامی صفحات اپلیکیشن قابل مشاهده است. فولد Layout شامل HTML خالی است که برای پیکربندی کل اپلیکیشن از آن استفاده می‌شود.

فولد user شامل کدهای ورورد و خروج و هم چنین اجازه دسترسی به قسمت های محختلف وب اپلکیشن را شامل می‌شود.

در روت فولدر views به غیر از index.html فایل هایی با نام های ۴۰۴  , ۵۰۰ وجود دارد.

فولدر Config

این فولدر شامل فایل‌های پیکربندی اپلیکیشن ماست. داخل این فولدر شما شاهد یک فولدر دیگر هستید که به اسم env که شامل پیکربندی بخش توسعه تولید و متدهای تست برای اجرای اپلیکیشن است.

همچنین شامل فایل‌های است که برای پیکربندی خود اپلیکیشن استفاده می‌شود. مثل بخش express و passport برای کنترل ورود و خروج.

فایل server.js

این فایلی است کل اپلیکیشن را شروع می‌کند. اگر نمی‌خواهید از grunt استفاده کنید می‌توانید از دستور node server.js برای راه‌اندازی سرور استفاده کنید.

وظایف فایل server.js عبارت است از:

• بارگذاری پیکربندی کلی، که شامل اجازه دسترسی به دیتابیس‌ها و … را می‌دهد.
• Bootstraping مدل‌ها
• پیکربندی اپلیکیشن Express
• پیکربندی روت‌های اپلیکیشن Express
• شروع به پرداختن به پورت پیکربندی‌شده برای سرور

قسمت کاربر

کدهای سمت کاربر در فولدر Public قرار دارد. این فولدر شامل دو زیرفولدر به اسم‌های CSS برای قراردادن فایل‌های استایل و فولدر دیگر img برای ذخیره عکس‌های استفاده شده در اپلیکیشن.

بیشترین تمرکز باید بر روی فولدر js باشد که شامل کدهای angular ما برای سمت کاربر نوشته شده است و در آخر هم پوشه lib شامل کتابخانه‌ی angular است.

تست اپلیکیشن

فولدر test شامل فایل‌هایی برای تست اپلیکیشن است.

در حقیقت شامل برای تست فایل‌های سمت سرور از Mocha و برای تست قسمت کاربری از Karma استفاده می‌شود.

در مقاله بعدی سعی خواهد شد یک اپلیکیشن کامل را با هم طراحی و پیاده‌سازی کنیم.

منبع: +