ساخت یک برنامه وب مدرن با لاراول و Vue - قسمت 5: ایجاد یک کلون ساده Trello با استفاده از Laravel و Vue

در فصل های قبلی این سری از مجموعه آموزش های لاراول، ما چند مفهوم مفید را برای توسعه برنامه های وب مدرن با لاراول و Vue یاد گرفتیم.

در این قسمت آخر، ما قصد داریم از تمام مفاهیم موجود در قسمت های قبلی  برای ساختن یک کلون Trello با کمک Laravel و Vue استفاده کنیم.

در اینجا یک اسکرین رکورد وجود دارد که نشان می دهد برنامه پس از تکمیل به چه صورت خواهد بود:
App Demo

پیش نیازها

برای یادگیری این قسمت از مجموعه باید:

  • پارت های قبلی این مجموعه را خوانده باشید.
  • تمام الزامات پارت های قبلی این مجموعه را داشته باشید.

وقتی همه شرایط را داشتید، می توانید ادامه دهید.

تنظیم برای development

ما قبلاً در مورد تنظیم environment شما در قسمتهای قبلی این مجموعه بحث کرده ایم، بنابراین در صورت نیاز لطفا آموزش های قبلی را بخوانید. همچنین اگر بخش های دیگر را نیز دنبال کرده اید، باید  پروژه لاراول را تنظیم کرده باشید.

اگر پروژه ای تنظیم نکرده اید، باید به قسمت های قبلی برگردید و آنها را مطالعه کنید زیرا راهنمای کاملی در مورد چگونگی تنظیم همه موارد، برای این آموزش می دهد.

ایجاد API route ها

در یکی از آموزش های قبلی، ما در مورد ایجادRESTful API ها صحبت کردیم که تکنیک های ذکر شده در اینجا استفاده می شود. بیایید endpoint های API Trello clone خود را ایجاد کنیم.

فایل routes/api.php، را باز کرده مطمئن شوید که شامل کد زیر است:

     'auth:api'], function() {
        Route::get('/category/{category}/tasks', 'CategoryController@tasks');    
        Route::resource('/category', 'CategoryController');
        Route::resource('/task', 'TaskController');
    });

به عنوان یک تمرین خوب، هنگام ایجاد روت ها، همیشه route های خاص تر را از روت های دیگر بالاتر قرار دهید. به عنوان مثال، در کد بالای روت /category/{category}/tasks  بالاتر از روت /category است.

در کد بالا، روت هایAPI خود را تعریف کردیم. قرار دادن تعاریف در فایل routes/api.php به لاراول می گوید که روت ها API route هستند. لاراول روت های دارای /api را در URL پیشوند می کند تا این روت ها را از web route ها متمایز کند.

همچنین در Route group بالا، یک middleware auth:api اضافه کردیم، که اطمینان می دهد هر فراخوانی به route ها در آن گروه باید تأیید شود.

نکته قابل توجه این است که استفاده از متد resource در کلاس Route به ما کمک می کند تا برخی روت های اضافی را ایجاد کنیم. در اینجا خلاصه ای از تمام route های موجود هنگام اضافه کردن کد بالا به فایل وجود دارد:

Route های مربوط به category resource

Method URI Function
GET /api/category لیست کردن تمام category های موجود
POST /api/category ایجاد یک  new category resource جدید
DELETE /api/category/{category_id} حذف یک  category resource خاص
GET /api/category/{category_id} واکشی یک category resource خاص
GET /api/category/{category}/tasks واکشی همه task ها برای category خاص
PUT /api/category/{category_id} آپدیت یک category resource خاص

Route های مربوط به task resource

Method URI Function
GET /api/task لیست کردن همه task های موجود
POST /api/task ایجاد یک new task resource جدید
DELETE /api/task/{task_id} حذف یک task خاص
GET /api/task/{task_id} واکشی یک task resource خاص
PUT /api/task/{task_id} آپدیت یک  task resource خاص

Route های مربوط به user resource

Method URI Function
POST /api/register ایجاد یک کاربر جدید
POST /api/login لاگین کاربر

برای دیدن لیست کامل route، دستور زیر را اجرا کنید: $ php artisan route:list.

اکنون که درک درستی از route های خود داریم، بیایید ببینیم controller ها چگونه کار خواهند کرد.

ایجاد یک controller logic

ما نگاه عمیق تری به پیاده سازی controller های مختلف خود خواهیم انداخت.

User controller

از آنجا که ما قبلاً این قسمت را در پارت دوم این مجموعه از آموزش لاراول ایجاد و پیاده سازی کرده ایم، می توانیم از آن صرف نظر کنیم و به کنترلر بعدی برویم.

Category controller

 CategoryController را باز کنید و محتوای آن را با کد زیر جایگزین کنید:

توابع موجود در controller بالا، عملیات اساسی CRUD برای resource را کنترل می کنند. متدهای tasks تسک های مرتبط با یک category را برمی گرداند.

Task controller

 TaskController را باز کنید. در این کنترلر، task ها را مدیریت خواهیم کرد. به یک task مقدار داده می شود و به یک category مرتبط است. محتوای فایل را با کد زیر جایگزین کنید:

اینها برای controller ها است. از آنجا که ما مدل ها را در فصل قبلی ایجاد کرده ایم، بیایید به سمت ایجاد frontend برویم.

ساخت frontend

از آنجا که ما کار ساخت backend را انجام دادیم، با استفاده از VueJS می خواهیم frontend را بسازیم. برای کار با Vue، به پکیج های Vue router و Vue نیاز داریم که در آموزش قبلی نصب کردیم. ما همچنین به پکیج [vuedraggable](https://github.com/SortableJS/Vue.Draggable) نیاز خواهیم داشت. برای نصب آن، دستور زیر را اجرا کنید:

    $ npm install vuedraggable --save

ایجاد  Vue router های route

از آنجا که ما در حال ساخت یک Single Page App هستیم، می خواهیم vue-router خود را تنظیم کنیم تا بتواند بین صفحات مختلف برنامه ما جابجا شود. فایل resources/assets/js/app.js را باز کنید و کد زیر را جایگزین کنید:

بعد، فایل routes/web.php را باز کنید و کد زیر را جایگزین کنید:

این route ترافیک ورودی را به متد index از  SinglePageController که در آموزش قبل ایجاد کرده ایم هدایت می کند.

 authentication

از آنجا که API ما امن است، برای فراخوانی آن به access token احتیاج داریم. وقتی با موفقیت لاگین یا رجیستر می کنیم، token ها تولید و صادر می شوند. ما قصد داریم از localStorage برای نگه داشتن token تولید شده توسط برنامه خود استفاده کنیم تا در صورت نیاز به فراخوانی API به راحتی آن را دریافت کنیم.

محتوای موجود در حافظه لوکال از طریق مرورگر قابل خواندن است، بنابراین ممکن است بخواهید بدانید که token های شما کوتاه مدت هستند و اغلب refresh می شوند.

بیایید register component را تنظیم کنیم. فایل resources/assets/js/views/Register.vue  را ایجاد کنید و محتوای زیر را برای template اضافه کنید:

سپس برای اسکریپت، دستورات زیر را در همان فایل، زیر تگ بسته شدن template اضافه کنید:

در کد بالا، ما یک متد handleSubmit داریم که وقتی کاربر فرم ثبت نام را ارسال می کند، فراخوانی می شود. تمام داده های فرم را به API می فرستد، response را می گیرد و jwt را در localStorage ذخیره می کند.

ما همچنین یک متد beforeRouterEnter داریم که قبل از لود component، توسط vue-router فراخوانی می شود. در این callback، بررسی می کنیم که آیا کاربر از قبل لاگین شده است یا اگر کاربر باشد، به صفحه برنامه هدایت می شود.

login component به روش مشابه تنظیم می شود. فایلresources/assets/js/views/Login.vue را ایجاد کنید و کد زیر را برای template اضافه کنید:

سپس برای اسکریپت، دستورات زیر را در همان فایل، زیر تگ بسته شدن template اضافه کنید:

این همه برای Login component است.

ما باید در wrapper component برنامه شما کمی تغییر ایجاد کنیم. فایل resources/assets/js/views/App.vue را باز کنید و محتوای آن را با کد زیر در بخش template آپدیت کنید:

همچنین، محتوای تگ script در همان فایل را با کد زیر جایگزین کنید:

در کد بالا، ما بررسی می کنیم که آیا کاربر به سیستم لاگین شده است یا خیر و سپس با استفاده از این آگاهی می توان route link ها را hide یا show کرد.

 ایجاد secure API call ها

 بیایید صفحه اصلی برنامه را ایجاد کنیم. یک فایل resources/assets/js/views/Board.vue ایجاد کنید، کد زیر را به فایل اضافه کنید:

در template بالا ما کامپوننت [vue-draggable](https://github.com/SortableJS/Vue.Draggable)را که قبلاً نصب کردیم پیاده سازی کردیم. این یک draggable div به ما می دهد که می توانیم از آن برای انتقال کارت های Trello از یک صفحه به صفحه دیگر استفاده کنیم. در تگ draggable آپشن هایی ارسال کردیم که به زودی در بخش script کامپوننت تعریف خواهیم کرد.

برای اطمینان از اینکه می توانیم با استفاده از vue draggable از میان چندین لیست drag کنیم، باید categories attribute خود را به کامپوننت parent draggable پیوند دهیم. مهمترین قسمت اتصال element.tasks به child draggable component است که مانند prop با استفاده از v-model است. اگر نتوانیم bind کنیم، نمی توانیم آیتم ها را از طریق category های مختلفی که داریم منتقل کنیم.

ما همچنین متدی را تعریف می کنیم که وقتی درگ یک آیتم انجام می شود (@end)، زمانی که برای ویرایش یک آیتم کلیک می کنیم یا هنگامی که روی Add New Card کلیک می کنیم فراخوانی شود.

برای style ما دستورات زیر را بعد از تگ بسته شدن template اضافه کنید:

درست بعد از کد بالا، کد زیر را اضافه کنید:

Loading category ها

با ماونت Board کامپوننت، category های خود را لود کنیم. متد mounted همان فایل را آپدیت کنید تا دستورات زیر را داشته باشید:

در کد بالا، axios را تنظیم می کنیم. این بسیار مهم است زیرا vue قبل از لود صفحه ابتدا متد mounted را فراخوانی می کند ، بنابراین روشی مناسب برای لود واقعی داده هایی است که باید در صفحه خود استفاده کنیم.

ما برخی از هدرهای پیش فرض axios را تنظیم کرده ایم بنابراین دیگر نیازی به ارسال هدرهای هر فراخوانی نداریم.

Loading task ها

اکنون می توانیم logic را برای لودینگ تسک ها از یک category اضافه کنیم. در ابجکت methods کامپوننت Board، متد loadTasks را با کد زیر آپدیت کنید:

افزودن task های جدید

بیایید logic را برای task های جدید اضافه کنیم. در ابجکت methods کامپوننت Board، متد addNew را با کد زیر آپدیت کنید:

وقتی متد addNew فراخوانی می شود، id آن category ارسال می شود، که به ما کمک می کند تعیین کنیم task جدید کجا باید اضافه شود. ما task ای را برای آن category ایجاد می کنیم و یک dummy text را به عنوان یک placeholder ارسال می کنیم تا کاربر بتواند آن را مشاهده کند.

ویرایش task ها

اکنون می توانیم logic را برای ویرایش تسک ها اضافه کنیم. در ابجکت methods کامپوننت Board، متد endEditing را با کد زیر آپدیت کنید:

هنگامی که تسکی ویرایش می شود، آن را به متد endEditing ارسال می کنیم که آن را به API می فرستد.

Reordering task ها

بیایید logic را برای reorder تسک ها اضافه کنیم. در ابجکت methods کامپوننت Board، متد changeOrder را با کد زیر آپدیت کنید:

وقتی element یی را که drag کرده اید drop کنید، Draggable یک object را برمی گرداند. آبجکت برگردانده شده حاوی اطلاعاتی از محل انتقال element و drop آن است. ما برای تعیین اینکه یک task از کدام category منتقل شده است از این آبجکت استفاده می کنیم.

ساخت application

مورد بعدی که باید انجام دهیم ساخت asset ها است. برای ساخت برنامه، دستور زیر را اجرا کنید:

 $ npm run prod

استفاده از prod ساخت را بهینه می کند. به ویژه هنگامی که می خواهید برای محصول bulid بگیرید پیشنهاد می شود. value دیگر در اینجا dev است که در طول فرایند توسعه استفاده می شود

وقتی build کامل شد، اکنون می توانیم برنامه را اجرا کنیم:

 $ php artisan serve

نتیجه

در این آموزش لاراول، ما نحوه ساخت یک کلون ساده Trello را مشاهده کرده ایم و برخی از مفاهیم کلیدی را که باید هنگام ساخت برنامه های وب با استفاده از Laravel و Vue بدانید، توضیح دادیم.

× در حال پاسخ به: