ایجاد یک Project View

ما منطق لازم را برای ادامه پروژه های جدید داریم ، با این حال ، ما هنوز صفحه "create project" را ایجاد نکرده ایم. بنابراین در این ویدئو مارا همراهی کنید.

فهرست برنامه آموزشی

    1. Meet Birdboard

      مدت آموزش 2:31

      در این ویدئو میخواهیم با بررسی برنامه ای که قصد ساخت آن را داریم ، شروع کنیم. پس با نصب لاراول و انجام اولین commit کار را پیش میبریم.

    2. شروع با یک Test

      مدت آموزش 12:48

      انتظار داریم که تا حد ممکن ، workflow واقعی را هنگام نوشتن برنامه ها داشته باشیم. با توجه به این موضوع ، اجازه دهید با اولین تست شروع کنیم.

    3. تست اعتبارسنجی

      مدت آموزش 5:32

      ما هنوز هیچ logic یی برای درخواست اعتبارسنجی (request validation) ننوشتیم. مانند گذشته ، میخواهیم از یک روش TDD برای مشخص کردن نیازهای validation استفاده کنیم.

    4. Model Test ها

      مدت آموزش 7:33

      ما باید مطمئن شویم که کاربر می تواند از صفحه پروژه بازدید کند. اگرچه باید با یک feature test شروع کنید، دراین قسمت از آموزش به سراغ model test میرویم.

    5. خب ما اکنون می توانیم پروژه هایی را ایجاد کنیم، اما آنها در حال حاضر با هیچ کاربری در ارتباط نیستند. این عملی نیست. برای رفع این مشکل ، ما یک تست را برای تأیید اینکه کاربر authenticate شده همیشه به عنوان owner هر پروژه جدیدی که در طول session آنها ایجاد شده است ، اختصاص داده ایم.

    6. Scoping Project ها

      مدت آموزش 11:39

      در این قسمت ، ما به روند انتخاب پروژه هایی که برای کاربر قابل نمایش باشد، ادامه خواهیم داد. همچنین پیاده سازی page authorization مناسب را شروع خواهیم کرد.

    7. ایجاد یک Project View

      مدت آموزش 6:38

      ما منطق لازم را برای ادامه پروژه های جدید داریم ، با این حال ، ما هنوز صفحه "create project" را ایجاد نکرده ایم. بنابراین در این ویدئو مارا همراهی کنید.

    8. اماده سازی Frontend

      مدت آموزش 8:19

      قبل از شروع نوشتن CSS ، ابتدا باید تنظیماتی انجام دهیم. با کشیدن تمام وابستگی های ضروری npm و کانفیگ Tailwind با Laravel Mix شروع خواهیم کرد.

    9. Go Go Gadget Tailwind

      مدت آموزش 16:39

      در این قسمت ، با Tailwind ساخت UI Birdboard را شروع می کنیم.

    10. Grid Spacing و Card Tweaks

      مدت آموزش 16:56

      میخواهیم به کار روی CSS برای پروژه ها ادامه دهیم. این فرصتی به ما می دهد تا در مورد grid spacing بحث کنیم ، و اینکه چگونه می توانیم با استفاده از ترکیب padding و negative margins ستون های خود را به طور کامل align کنیم.

    11. طرح یک صفحه پروژه

      مدت آموزش 12:20

      قبل از اینکه به PHP برگردیم ، بیایید یک درس دیگر از CSS را آموزش بدهیم..

    12. تسک های یک پروژه

      مدت آموزش 15:24

      ما یک بخش به صفحه پروژه خود را برای task ها اضافه کرده ایم ، اما این عملکرد هنوز وجود ندارد. لطفا مارا برای نمایش این ویدئو همراهی کنید.

    13. Task UI Update ها

      مدت آموزش 9:11

      مرحله بعدی به روزرسانی UI صفحه پروژه برای نمایش و اضافه کردن task های جدید است.

    14. بخش دوم: Task UI Update ها

      مدت آموزش 18:31

      در این بخش، ما تمام تسک ها را در یک form انجام می دهیم تا به راحتی با کلیک یک دکمه ، وضعیت توضیحات یا تکمیل آن را به روز کنیم.

    15. Touch It

      مدت آموزش 5:05

      می خواهیم همه پروژه ها را در داشبورد خود طبق برنامه هایی که اخیراً به روز شده اند مرتب کنم. این بدان معناست که ، هنگامی که شما یک تسک را در یک پروژه add یا modify می کنید، باید updated_at روی پروژه parent در زمان پردازش حس شود. در این بخش از ویدئوی آموزشی مارا دنبال کنید.

    16. نکته ها و پالیسی ها

      مدت آموزش 18:04

      در مرحله بعد ، باید بخش "General Notes" را روی پروژه ایجاد کنیم. مثل همیشه ، ما از تست هایی برای آپدیت های جدید استفاده خواهیم کرد، همچنین در خصوص authorization policy classes صحبت میکنیم.

    17. بیایید ساختار تستها را ارتقا دهیم. اجازه دهید این کد را در یک factory class ریفکتور کنیم تا در وقت صرفه جویی شود.

    18. کاهش Duplication

      مدت آموزش 14:06

      در این درس، یک فرم برای به روزرسانی یک پروژه موجود اضافه خواهیم کرد. اما در این فرآیند، چگونگی کاهش تکرار در ایجاد و ویرایش view ها با استخراج یک reusable partial بررسی خواهیم کرد.

    19. ما این قسمت را با پرداختن به رگرسیون کوچکی که در قسمت قبلی معرفی شده آغاز می کنیم: دیگر نمی توانیم general note ها را بدون ایجاد validation error آپدیت کنیم. مطمئناً راه حل آسان این مسئله را بررسی خواهیم کرد ، علاوه بر این در مورد کامنت کاربر اخیر مربوط به جوانب مثبت و منفی استخراج form request class بحث خواهیم کرد. در این قسمت می توانید منتظر نکات جالب توجه باشید.

    20. Project Activity Feed ها

      مدت آموزش 13:39

      می خواهیم به فیچر بعدی خود برویم: هر پروژه یک activity feed ایجاد می کند.

    21. اجازه دهید کار بر روی ویژگی project activity را ادامه دهیم. علاوه بر این ، هنگام ایجاد یا تکمیل یک تسک، باید activity را ثبت کنیم.

    22. قبل از اینکه به سراغ activity feed refactor بزرگتر برویم ، بیایید ابتدا چند تغییر کوچک برای clean کردن برخی چیزها ایجاد کنیم.

    23. قبل از اینکه سرانجام project's activity feed را در مرورگر مشاهده کنیم ، فقط چند مورد برای جمع بندی داریم.

    24. وقت آن است که activity feed یک پروژه را روی صفحه ارائه دهید. این به ما فرصتی می دهد تا بر اساس نوع activity، نحوه استفاده از چند شکلی را برای لود view مناسب بررسی کنیم.

    25. موضوع Activity

      مدت آموزش 12:00

      اکنون که با موفقیت activity feed یک پروژه را در صفحه نمایش می دهیم، می خواهیم اطلاعات بیشتری را برای هر بروزرسانی ارائه دهیم. به عنوان مثال ، به جای پیام "شما یک تسک را انجام دادید"، باید نام آن تسک باشد: "شما" پایان دوره "را تکمیل کردید". این مشکلی را به وجود می آورد زیرا وقتی فعالیت را رکورد می کنیم ، هنوز هیچ اشاره ای به موضوع نمی کنیم. بیایید در این قسمت این مشکل را برطرف کنیم.

    26. رکورد تغییرات Model

      مدت آموزش 15:49

      کار بعدی ما ردیابی ویژگی هایی است که هنگام به روزرسانی model تغییر کرده اند. این به ما امکان می دهد برای مثال رکوردکنیم که کاربر عنوان پروژه را از "Test Project" به "Real Project" تغییر داده است.

    27. فرآیند Refactor

      مدت آموزش 21:47

      در این قسمت، ما تمام قابلیت های "activity" را به یک ویژگی reusable تبدیل خواهیم کرد. همانطور که مشاهده خواهید کرد، ما به سرعت در یک جریان سریع refactor قرار خواهیم گرفت.

    28. Activity Card

      مدت آموزش 13:51

      بیایید در این درس بر روی میزان کارایی activity card کار کنیم. ما می خواهیم نشان دهیم که کدام قسمت ها آپدیت شده اند و چه کسی این آپدیت را انجام داده است.

    29. ما در این قسمت یک مورد آسان داریم: کاربرانی که مجوزهای مناسب برای حذف یا آرشیو پروژه دارند.

    30. همانطور که ما به سمت دعوت کاربران به پروژه ها حرکت می کنیم، این فرصت خوبی برای بحث درمورد تست های لایه ای به ما می دهد. در این قسمت ، ما test name یکسانی را در دو سطح مختلف خواهیم نوشت: از خارج (feature) و در سطح پایین (unit).

    31. False Positives

      مدت آموزش 14:08

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

    32. Gravatars و توابع Helper

      مدت آموزش 7:26

      صفحه پروژه ما هنوز همه اعضایی را که به آن دسترسی دارند نمایش نمی دهد. بیایید از Gravatar برای تولید این تصاویر کوچک استفاده کنیم. با این کار، این فرصت را به ما داده می شود تا در مورد نحوه ایجاد و بارگذاری فایل توابع helper بحث کنیم.

    33. در این قسمت ، ما چند feature test جدید برای تأیید شرایطی که project owner، کاربر را به یک پروژه دعوت کند، می نویسیم.

    34. هنگامی که چندین فرم را به یک صفحه اضافه کنید، به سرعت متوجه خواهید شد که دیگر نمی توانید به validation error های پیش فرض وابسته باشید. در این قسمت، ما می آموزیم که چگونه کلاس form request شما را با یک error bag مرتبط کنیم.

    35. در حال حاضر، هر کاربر دعوت شده ای اجازه حذف کامل پروژه را دارد. این اقدام باید فقط به مالک پروژه محدود شود.

    36. اگر بخواهیم به کاربران توانایی ورود به یک UI theme تیره تر را دهیم، چه می کنیم؟ با توجه به اینکه کلاسهای Tailwind مانند text-grey و text-blue در HTML پراکنده هستند، دقیقاً چگونه می توانیم این کار را انجام دهیم؟ پاسخ، استفاده از متغیرهای CSS است. ما در این قسمت به شما نشان خواهیم داد.

    37. Theme Review ها

      مدت آموزش 2:15

      قبل از شروع به ساخت theme switcher، خیلی سریع، بیایید نتایج و همچنین ساختاری که انتخاب کردیم را مرور کنیم.

    38. ساخت یک Theme Switcher

      مدت آموزش 15:07

      اکنون که چندین UI theme در دسترس ما قرار دارد، مرحله بعدی ساخت یک theme switcher است که آن را در navigation bar سایت خود قرار خواهیم داد. از آنجا که رفتار مربوط به هر دکمه تم وجود دارد، ما از Vue برای ساخت این کامپوننت کوچک استفاده خواهیم کرد.

    39. New Project Modal

      مدت آموزش 12:20

      از آنجا که به پایان این مجموعه نزدیک می شویم، بیایید چند قسمت را به بررسی برخی موارد JavaScript اختصاص دهیم. به طور خاص، ما فرم "New Project" را به یک داینامیک مدل Vue component تغییر شکل می دهیم.

    40. New Project Modal: Behavior

      مدت آموزش 17:51

      اکنون که style اصلی مدل "New Project" به پایان رسیده است، می توانیم به سراغ رفتار آن برویم.

    41. New Project Modal: تسکها

      مدت آموزش 4:45

      یک مرحله نهایی تا تکمیل وجود دارد: controller ما هنوز اجازه ایجاد task ها کنار پروژه را نمی دهد. حالا حلش می کنیم.

    42. Object-Oriented JavaScript

      مدت آموزش 20:44

      اگر نگاهی دوباره به فایل NewProjectModal خود بیندازیم، متوجه خواهید شد که بیشتر JavaScript با ارائه و مدیریت فرم سروکار دارد. با این حساب، بیایید کلاس BirdboardForm را استخراج کنیم تا کمی مفاهیم شفاف تر شود.

    43. بیایید با ایجاد یک reusable dropdown Vue componen، کارها را جمع بندی کنیم.

    44. جمع بندی

      مدت آموزش 1:37

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

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