آموزش ساخت اپلیکیشن مدیریت وظایف با لاراول : قسمت دوم

دسته بندی: برنامه نویسی
سطح مقاله: متوسط
زمان مطالعه: ۸ دقیقه
۱۹ خرداد ۱۳۹۸

در  این سری آموزشی قصد داریم یک اپلیکیشن بسیار ساده مدیریت وظیفه یا Task Scheduler را در لاراول بسازیم. در قسمت قبل از سری آموزشی "آموزش ساخت اپلیکیشن مدیریت وظیفه با لاراول"، لاراول را راه اندازی کرده و تنظیمات آن را انجام دادیم. در ضمن دیتابیس پروژه را به همراه تنها جدول مورد نیاز آن ایجاد کردیم. در این قسمت و همینطور قسمت بعدی، قصد داریم فرانت اند مورد نیاز برای پروژه را راه اندازی کنیم. پس ادامه این مطلب را با ما بخوانید تا اولین پروژه لاراولی خود را به همراه هم بسازیم.

آموزش ساخت یک برنامه مدیریت وظیفه با لاراول

در این سری آموزشی برای راه اندازی فرانت اند پروژه از لاراول میکس (Laravel Mix) استفاده می کنیم. لاراول میکس به شما کمک می کند بتوانید از ابزار وب پک (Webpack) در لاراول استفاده کرده و پیش پردازنده های رایج مانند SASS را در پروژه خود به کار ببرید. اما برای استفاده از این ویژگی قدرتمند وردپرس ابتدا نیاز داریم Node.js را روی سیستم خود نصب کنیم تا بتوانیم از دستورات npm استفاده کنیم.

آموزش ساخت اپلیکیشن مدیریت وظایف با لاراول

آموزش راه اندازی NPM

همانطور که گفتیم برای استفاده از لاراول میکس  و اجرای دستورات npm احتیاج داریم Node.js را روی سیستم خود نصب کنیم. برای این کار کافی است به وب سایت رسمی Node.js مراجعه کنید. در هنگام دانلود فایل نصبی مربوط به Node.js دو پیشنهاد به عنوان نسخه های نصب به شما داده می شود. پیشنهاد اول نسخه LTS است. نسخه LTS همان آخرین نسخه Stable یا پایدار هر نرم افزار است. و اما نسخه دوم یا نسخه Current، آخرین نسخه ای است که از این نرم افزار منتشر شده است. البته پیشنهاد ما و همچنین وب سایت Node.js نصب نسخه LTS است. چرا که این نسخه از پایداری پیشتری نسبت به آخرین نسخه برخوردار است.

آموزش راه اندازی NPM

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

Npm –v

اگر Node.js به درستی در سیستم شما نصب شده باشد، ترمینال نسخه فعلی Node.js روی سیستم شما را نشان می دهد. حال باید محیط کار لاراول میکس را راه اندازی کنید. برای این کار دستور زیر را در ترمینال وارد نمایید:

Npm i

همانطور که مشاهده می کنید یک فایل با نام webpack.mix.js به پوشه پروژه شما اضافه می شود. شما در این فایل به لاراول میکس می گویید که کدام فایل های پیش پردازنده را ترجمه کند. ما در این پروژه از پیش پردازنده SASS استفاده می کنیم. ما برای راحتی کارتان،  فرانت اند پروژه مدیریت وظایف را از پیش آماده کرده ایم. کافی است آن را از بخش دانلود فایل همین مقاله دانلود کنید.

به مسیر resources>sass>files بروید. فایل فشرده فرانت اند را از حالت فشرده خارج کنید و محتویات پوشه css را به پوشه files منتقل کنید. تمام فایل css این پوشه در پایان کار توسط لاراول میکس در قالب یک فایل فشرده و minify خواهند شد. ضمنا پوشه fonts را به مسیر resources>sass منتقل کنید.

حال باید به لاراول میکس بگوییم که باید کدام فایل ها را در نظر گرفته و فشرده کند. بنابراین فایل app.scss در مسیر resources>sass را باز کنید. محتویات این فایل مربوط به فرانت اند پیشفرض صفحه خوشامدگویی لاراول است. بنابراین به این محتویات احتیاج نداریم! با خیال راحت همه آن را پاک کنید! سپس کد پایین را در آن وارد کنید:

@import "files/bootstrap.min.css";

@import "files/bootstrap-theme.min.css";

@import "files/bootstrap-rtl.min.css";

@import "files/fontiran.css";

@import "files/app.css";

شما در در مسیر resources>sass>files یک فایل با نام main.css دارید. آن را باز کرده و محتویات آن را به ادامه فایل app.scss الحاق کنید. دیگر به فایل main.css احتیاجی ندارید. بنابراین می توانید آن را پاک کنید. البته انجام این مرحله اختیاری است و می توانید به جای آن صرفا آدرس فایل را به عنوان یک import جدید به فایل app.scss اضافه کنید.

دوباره به فرانت اند پروژه بروید و تمامی فایل های پوشه js را به مسیر resources>js پروژه منتقل کنید.  فایل app.js در این مسیر را باز کنید و کد زیر را در آن وارد کنید:

require('./jquery-1.12.4.min');

require('./bootstrap');

require('./bootstrap.min');

require('./main');

این کد به لاراول میکس اطلاع می دهد که چه فایل های جاوا اسکریپتی را باید مد نظر قرار داده و ترجمه و فشرده کند. پس از انجام دادن تمام این مراحل دوباره به فایل webpack.mix.js در پوشه اصلی پروژه بروید و آن را باز کنید. این دو خط کد باید در این فایل نوشته شده باشد. اگر نیست حتما آن را اضافه کنید:

mix.js('resources/js/app.js', 'public/js')

    .sass('resources/sass/app.scss', 'public/css');

این دو خط فایل های اصلی و مادر را برای ترجمه به لاراول میکس معرفی می کند. در نهایت تمام فایل های import و require شده در این فایل ها در مسیر public در قالب فایلی ترجمه و تجمیع شده در می آید. البته برای رسیدن به این اتفاق ابتدا باید یک کار دیگر هم انجام دهید! دوباره به ترمینال بروید و دستور زیر را در آن وارد کنید:

Npm run watch

همانطور که از نام آن مشخص است، این دستور به لاراول میکس دستور می دهد که از این پس از تمام فایل هایی که به آن معرفی کنیم نگهبانی کند. یعنی در صورت ایجاد کوچک ترین تغییر در هر یک از این فایل ها لاراول میکس بلافاصله تغییرات را بدون نیاز به اجرای دوباره روی فرانت اند پروژه اعمال می کند. می توانید پس از آماده سازی فایل های بخش view کمی با کدها بازی کرده و این مورد را امتحان کنید! توجه داشته باشید که از این پس برای کدنویسی روی پروژه همیشه این دو دستور را وارد می کنیم:

Php artisan serve

Npm run watch

البته بعد از اینکه فایل ها یک بار ترجمه شدند، در صورتی که تغییری در آن ها وارد نشود دیگر احتیاجی به ترجمه دوباره ندارند و لاراول همان فایل های ترجمه شده پوشه public را به رسمیت خواهد شناخت.

جمع بندی

در این قسمت از سری آموزش ساخت یک وب اپلیکیشن مدیریت وظایف، به آموزش کار با ابزار لاراول میکس پرداختیم. لاراول میکس ابزاری است که به شما کمک می کند در پروژه های خود از webpack و پیش پردازنده هایی مثل SASS استفاده کنید. شما حتی می توانید با استفاده از لاراول میکس فایل های css و js پروژه های خود را فشرده سازی کنید.در قسمت بعدی بخش View پروژه را راه اندازی کرده و با بعضی از دستورات اولیه موتور قالب blade آشنا می شویم. اگر در هر جای این پروژه به مشکلی برخوردید از پاسخ دادن به سوالات شما در بخش نظرات خوشحال خواهیم شد!

 

بیشتر مطالعه کنید : 

نویسنده

نظرات کاربران

دانیال یوسفی فر

با عرض سلام. ببخشید بخش دانلود این مقاله کجاست چون میخوام فایل رو دانلود کنم.

حسین

فایل فشرده کجاست؟؟؟؟؟

محمدرضا

با سلام . ممنون از آموزش های خوبتون. فایل فشرده مربوط به فرانت اند پروژه رو قرار بدید لطفا

خدابنده

چطور میشه همه لینک های مربوط به این آموزش رو داشته باشیم سرچش نتیجه نداره. خیلی خوب میشه لینک دسترسی به مقالات چند قسمتی کنارشون باشه
مرسی از آموزشهای مفید و ارزشمندتون

خدابنده

سلام منم فایل دانلودی پیدا نکردم . تشکر از آموزش تون

ارسال دیدگاه
خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :

 
گزارش مشکل