آموزش مقدماتی لاراول - توسعه سمت کاربر یا front-end

در قدم بعدی می‌خواهیم در مورد front-end صحبت کنیم. اگه با توسعه سمت کاربر آشنا نیستید و تا بحال برنامه‌نویسی فرانت نکردید. باید بگم که لاراول قابلیت‌ها و ابزارهای بسیار کاربردی و متنوعی برای این کار داره! در این مقاله بیشتر در مورد laravel-mix و vue صحبت خواهم کرد. اگر با vue آشنا نیستید اصلا نگران نباشید در آینده حتما یه دوره کامل برای کار با آخرین نسخه منتشر شده یعنی Vue3 خواهیم داشت. بطور کلی ابزار متنوعی برای کار در فرانت وجود داره یکی دیگه از این ابزارهای محبوب React هست. خود من بشخصه بیشتر از Vue بعنوان یکی از مدرن‌ترین  فریم‌ورک‌های js استفاده کردم. اما فرقی نمیکنه شما در لاراول می‌تونید از هر فریم‌ورکی استفاده کنید.


پیش از شروع شما باید nodejs و npm رو در سیستم‌تون نصب داشته باشید. nodejs یک محیط اجرای js هست و npm ابزار مدیریت پکیج‌های js هست مشابه composer در php. برای نصب کافیه به سایت nodejs برید و آخرین نسخه lts رو نصب کنید. در صورتیکه نصب شما با موفقیت انجام شده باشد خروجی زیر را دریافت خواهید کرد:

Image for post
Image for post

اولین قدم مانند composer دستور نصب npm هست. پس به دایرکتوری پروژه برگردید و دستور زیر را اجرا کنید:

npm install

پس از نصب دایرکتوری پروژه شما بصورت زیر خواهد شد. در واقع دستور نصب npm پکیج‌هایی رو برای شما نصب میکنه و همانند vendor در composer فایل‌هایی که دانلود میکنه رو در فولدری جداگانه بنام node_modules میریزه. بنابراین فولدر vendor شامل پکیج‌ها و وابستگی‌هایی هست که برای برنامه‌نویسی سمت بک و node_modules شامل پکیج‌ها و وابستگی‌هایی هست که برای برنامه‌نویسی سمت فرانت مورد نیاز هست. 

Image for post
Image for post

دقت کنید هر دو فولدر باید در gitignore قرار بگیرند چراکه ما نمی‌خوایم هر دفعه که پروژه رو داخل git میفرستیم حجم اضافه‌ای ارسال بشه. خب حالا می‌خوام توجهتون رو به دوتا فایل که درون هر پروژه لاراولی بصورت پیش‌فرض وجود داره جلب کنم: composer.json و package.json

composer.json یکسری تنظیماته که برای نصب کتابخانه‌های php استفاده میشه و package.json هم برای js. 

اگر کمی دقیق‌تر به فایل package.json نگاه کنیم میبینیم این فایل json بطور پیش‌فرض شامل ۳تا تگه. قسمت script که برای بیلد استفاده میشه و قسمت وابستگی‌ها که نشون ما چه پکیج‌هایی رو در حال حاضر در پروژمون داریم. این‌ تنظیمات پیش‌فرض و حداقلی تنظیماتی هستند که لاراول بصورت پیش‌فرض پیشنهاد میده.

Image for post
Image for post

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

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

اگر داخل دایرکتوری پروژه رو نگاه کنید فایلی وجود داره به نام webpack.mix.js همانطور که گفتیم از laravel-mix استفاده میکنه. داخل این فایل دوتا خط کد ساده وجود داره یکی برای وارد کردن پکیج laravel-mix و دیگری منابعی که باید کامپایل بشن رو آدرس‌دهی کرد

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', []);

البته در کد بالا از تابع postCss استفاده شده که بسته به اینکه شما از چه فناوری استفاده می‌کنید میتونه تغییر کنه برای نمونه تابع sass.

اگر وارد فایل‌های app.css و app.js بشید میبینید که عملاً در این فایل ها چیزی وجود نداره. دلیل اون اینکه از نسخه ۷ لاراول پکیجی به عنوان laravel/ui منتشر شد که قسمت رابط کاربری  رو در یک پکیج جداگانه بسته‌بندی کرد و با این کار تیم لاراول به صورت جداگانه بر روی UI توسعه رو پیش می‌برد. این پکیج به صورت جداگانه‌ای فریم ورک‌های Vue، React و Bootstrap رو هندل میکنه! در حال حاضر اگر وارد صفحه گیت‌هاب  laravel/ui توصیه شده از پکیج‌های دیگر Breeze و Jetstream استفاده بشه! ظاهرا دیگه قرار نیست در نسخه‌های آتی لاراول laravel/ui پشتیبانی بشه. ما در این آموزش برای اینکه کار ساده‌تر پیش بره از پکیج  laravel/ui استفاده می‌کنیم. بیایید شروع کنیم:

composer require laravel/ui

و برای نصب bootstrap دستور زیر را خواهیم دید.

php artisan ui bootstrap

حالا اگر به فایل webpack.mix.js برگردید متوجه یک سری تغییرات میشید اولین تغییر اینه که mix دیگه از css برای ترجمه استایل‌ها استفاده نمی‌کنه بلکه از scss استفاده میکنه که یک ورژن پیشرفته تره نسبت به css هست. اگر داخل resources/sass/app.scss رو مشاهده کنید متوجه وارد شدن استایل‌های bootstrap و سینتکس scss خواهید شد. تغییر بعدی هم مربوط میشه به فایل bootstrap.js همانطور که مشاهده می کنید jQuery و اسکریپت‌هایی که bootstrap.js نیاز داره وارد شدند که همه این پکیج‌ها بصورت اتوماتیک در فایل package.json وارد شدند.

Image for post
Image for post

حالا تنها کاری که لازمه انجام بدیم نصب این پکیج‌هاست:

npm install
npm run dev

خب الان پکیج bootstrap نصب کردیم ولی درون پروژه ما از طریق آدرس‌دهی CDN به پکیج از پیش کامپایل شده استفاده کردیم. حالا می‌تونیم با آدرس‌دهی به فایل‌های css و js که درون پروژه خودمون کامپایل کردیم آدرس‌دهی کنیم. برای اینکار می‌تونید از طریق تابع asset برای آدرس استفاده کنید:

    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">

اما من یه ایرادی در راستچین شدن نسخه فعلی پیدا کردم و اونم بخاطر تفاوت در نسخه CDN و پکیجی هست که نصب شده اگر شما دارید از نسخه 4.6 استفاده می‌کنید احتمالا همین مشکل رو خواهید داشت. برای این موضوع دوتا راه‌حل هست یکی اینکه وارد فایل  package.json بشید و نسخه bootstrap رو به ورژن 5.1.3 تغییر بدید و مجدداً فرایند نصب npm رو اجرا کنید در غیر این صورت می‌توانید از روش زیر نسخه‌ای که برای زبان فارسی ویرایش شده رو نصب کنید:


در این مقاله در مورد برنامه‌نویسی فرانت‌اند و ابزارهایی که در لاراول برای شما مهیاست صحبت کردیم. در اینجا بطور خاص درمورد فریم‌ورک bootstrap صحبت شد ولی لاراول امکان استفاده از  فریم‌ورک‌های vue و react رو هم به همین سادگی فراهم کرده که بسیار کار کردن باهاشون میتونه جذاب باشه! در ادامه و درمقاله بعدی با کمک همین ابزار فرایند احراز هویت و ثبت‌نام کاربر رو در پروژه خودمون پیاده‌سازی خواهیم کرد.