ساخت برنامه ای برای نمایش اطلاعات فیلم ها با استفاده از AngularJS، Node.js و MongoDB – بخش اول

ساخت برنامه ای برای نمایش اطلاعات فیلم ها با استفاده از AngularJS، Node.js و MongoDB – بخش اول

خیلی خوب، پس تصمیم گرفته اید که Node.js یاد بگیرید، تصمیم بزرگی را گرفته اید! 🙂 اگر تازه با این تکنولوژی آشنا شده اید پیشنهاد می کنم پست یک راهنمای NODE.JS برای تازه کارها را مطالعه کنید تا پس زمینه ای از آنچه را که در ادامه انجام می دهیم داشته باشید. توجه داشته باشید که این آموزش دنباله پست قبل نیست. در این پست فرض کرده ایم که شما با مقدمات Node آشنایی کافی دارید. در این آموزش می خواهم به شما نشان دهم که چطور می شود یک REST API با Express، احراز هویت و پروسه ثبت نام با Passport، ایجاد و بازیابی داده از دیتابیس MongoDB با استفاده از Mongoose را نشان دهم. front-end را هم با استفاده از AngularJS و Bootstrap Sass خواهیم ساخت و در آخرین مرحله از gulp.js برای بهینه سازی پروژه استفاده خواهد شد.

 

nodejs-mongodb-angular-bootstrap

 

قبل از اینکه شروع به انجام کارهای شگفت انگیز کنیم، مطمئن شوید که موارد خواسته شده زیر را از قبل نصب کرده اید:

 

 

پروژه جدید با Express

 

به مجض اینکه express-generator را نصب کردیم، می توانیم یک برنامه جدید ابتدایی با استفاده از دستور express ایجاد کنیم.

 

دستور express tv را در خط فرمان خود اجرا کنید تا یک پروژه جدید اکسپرس ایجاد شود، در اینجا tv نام پروژه ای است که به دلخواه انتخاب شده است. این پروژه قرار است شبیه به وب سایت معروف IMDb باشد (البته که تمام ویژگی های آن را نخواهد داشت) که اطلاعاتی درباره فیلم ها به ما نشان خواهد داد. 🙂

 

express-generator

 

به دایرکتوری tv رفته و دستور npm install را در آن اجرا کنید تا تمام پکیج های مورد نیاز (dependencies) به این پروژه را نصب کند. همانطور که می دانیم این پکیج ها پس از نصب در پوشه node_modules قرار می گیرند.

 

tv-npm-install

 

شاید شما نیز مثل من گاهی اوقات هنگام نصب پکیج ها با خطاها، پیغام ها و کرش هایی وحشتناک روبرو می شوید، نگران نباشید تنها شما نیستید که با این خطا ها مواجه می شود.

 

Troll-face-problem

 

خوشبختانه جامعه Node بسیار بزرگ است و روز به روز در حال گسترش است، پس به راحتی خطاها را در گوگل سرچ کنید تا راه حلی را پیدا کنید. البته بیشتر وقت ها با اجرا دستور npm cache clean خطا رفع می شود و می توان از نو دستور مورد نظر را اجرا کرد. یکی از صفحاتی عالی که در گیت هاب پیدا کرده ام، مختص اشکال زدایی این موارد است، شدیدا پیشنهاد می کنم آن را دنبال کنید.

 

 

توجه داشته باشید که اگر از لینوکس استفاده می کند، لازم است که sudo را به ابتدا دستور خود اضافه کنیم، مثلا برای اجرا npm cache clean باید sudo npm cache clean را وارد کرد.

 

how_i_feel

 

خیلی خوب برگردیم به پروژه 🙂 . حال دیارکتوری های bin، routes، views را پاک کنید چون به آنها نیازی نداریم. همچنین از آنجایی که قرار است یک فایل app.js دیگر برای آماده سازی AngularJS ایجاد کنیم، باید فایل app.js داخل پروژه را به server.js تغییر نام دهید.

 

tv-delete

 

حال تمام کدهای داخل server.js را با کدهای زیر جایگزین کنید:

 

 

همانطور که مشاهده می کنید کدهای فوق کاملا واضح هستند و نیازی به توضیح اضافی ندارد، چون در خیلی از پست ها شبیه به این کدها را دیده ایم. در آخر برای اینکه مطمئن شویم تا اینجا به درستی عمل کرده ایم، دستور node server.js را اجرا کنید تا سرور روشن شود. 🙂

 

node-server

 

خروجی شما نیز بیاد بصورت عکس فوق باشد. اگر اینطور نیست سعی کنید مشکل را حل کنید. 😉

 

بوت استرپ کردن برنامه AngularJS

 

Bootstrap Sass را از داخل وب سایت بوت استراپ دانلود و از حالت فشرده خارج کنید.

 

bootstrap-sass-download

 

تمام فایل ها glyphicons را از آدرس assets/fonts/bootstrap به public/fonts کپی کنید و هر آنچه که در دایرکتوری assets/stylesheets وجود دارد را به دایرکتوری public/stylesheets/bootstrap منتقل کنید. همانطور که می بینید در این پروژه از فونت های glyphicons که بطور پیشفرض در پروژه Bootstrap قرار دارد استفاده نموده ایم. اما شما می توانید برای داشتن در تنوع آیکون ها از Font-Awesome استفاده کنید.

 

font-awesome

 

این favicon را دانلود کرده و در دایکتوری public خود قرار دهید (البته نیازی به انجام این کار ندارید، این کار تنها باعث می شود که حس انجام یک پروژه واقعی را داشته باشید).

 

شما همچنین باید اسکریپت های زیر را دانلود کرده و آنها را در داخل دایرکتوری public/vendor قرار دهید، توجه داشته باشید که در این پروژه از نسخه min فایل های زیر استفاده شده است:

 

 

angularjs-website

 

خیلی خوب تا اینجا با مقدمات راه اندازی پروژه آشنا شدیم، در بخش بعد بقیه کارها را انجام می دهیم. 😉