ساخت فروم با لاراول و TDD

فروم یک چیز پیچیده است. مطمئناً از موضوعات و پاسخ ها تشکیل شده است ، اما چه چیز دیگری به عنوان بخشی از یک فروم ممکن است وجود داشته باشد درمورد پروفایل ها ، یا اشتراک های موضوع ، یا فیلتر یا اعلان های(notifications) به صورتreal-time ؟ همانطور که معلوم است ، یک فروم یک پروژه عالی برای تقویت پایه برنامه نویسی شماست. در این بخش، ما میخواهیم یکی را از A تا Z بسازیم. 

ساخت فروم با لاراول و TDD

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

    1. بیایید با بررسی حداقل شرایط لازم برای یک فروم شروع کنیم.اگر به آن فکر کنید ، ما نمی توانیم بدون کاربران ، موضوعات و پاسخها یک فروم ایجاد کنیم.

    2. موضوعات Test-Driving

      مدت آموزش 9:26

      اکنون که داده seed خود را در اختیار داریم ، می توانیم سراغ یک ویژگی کوچک برویم: "یک کاربر باید بتواند موضوعات را بخواند." همینقدر ساده! ما با یک تست اولیه شروع می کنیم ، و سپس آن را گسترش میدهیم..

    3. اکنون که یک ویژگی اصلی برای خواندن موضوعات انجمن اضافه کرده ایم ، می توانیم در ادامه مشاهده همه پاسخ های مرتبط با هر موضوع را شروع کنیم. مانند گذشته ، ما برای نتیجه مطلوب خود با یک تست شروع خواهیم کرد.

    4. ما عملکردهای لازم را برای ارائه یک متن با تمام پاسخ های مربوطه اعمال کرده ایم ، اما هنوز به کاربر اجازه نداده ایم که یک پاسخ را تایپ کند و آن را به سرور ارسال کند. بیایید از همین حالا شروع کنیم.

    5. فرم پاسخ

      مدت آموزش 5:14

      اکنون که ما end-point را برای اضافه کردن پاسخ جدید تست کرده ایم ، تنها مرحله باقی مانده ایجاد HTML برای فرم است. در این فرآیند ، ما همچنین مطمئن خواهیم شدکه فقط کاربران لاگین کرده قادر به دیدن آن هستند.

    6. تا الان کاربر می تواند موضوعات را بخواند و پاسخ دهد ، اما آنها هنوز توانایی انتشار موضوعات خود را ندارند. بیایید این قسمت را بررسی کنیم.

    7. ساختن تست

      مدت آموزش 5:43

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

    8. مدیریت Exception

      مدت آموزش 7:54

      اکنون که تست های endpoint ما تمام شده اند ، می توانیم فرم HTML را برای انتشار موضوع جدید بسازیم. با این حال ، در این فرایند در برخی موارد استثناء دچار مشکل خواهیم شد. خوشبختانه ،Adam Wathan راه حل مفیدی دارد که ما می توانیم آن را پیاده سازی کنیم.

    9. در حال حاضر ، همه موضوعات به صورت "global" است . در حالت ایده آل ، ما باید هر موضوع را به یک کانال اختصاص دهیم. به این ترتیب ، برای یک دولوپر فروم ، ما می توانیم به راحتی موضوعات را توسط PHP یا JavaScript یا سرور فیلتر کنیم.

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

    11. اکنون که همه موضوعات را با یک کانال مرتبط کرده ایم ، اکنون می توانیم اپدیت های ضروری UI را انجام دهیم تا کاربران بتوانند موضوعات را توسط کانال مورد نظر خود فیلتر کنند.

    12. در این قسمت ، ما باید در صفحه "ایجاد موضوع" کمی کار انجام دهیم. ما ابتدا لینکی به نوار پیمایش یا navigation bar اضافه می کنیم و سپس به سراغ تغییر فرم خود ، می رویم. به طور خاص ، ما باید بازخورد خطای اعتبارسنجی را ارائه دهیم ، و اطمینان حاصل کنیم که در صورت ایجاد خطای اعتبارسنجی ، متنی که کاربر در قسمتهای مختلف فرم وارد می کند ، یادآوری می شود..

    13. در حال حاضر ، ما دو کوئری مختلف SQL برای واکشی کلیه کانالها به طور مستقیم در لایه view خود داریم. بیایید در این آموزش آن را با استخراج یک view composer اختصاصی رفع کنیم.

    14. اگر هر کاربر بتواند لینکی داشته باشد که فقط موضوعاتی را که شخصاً ایجاد کرده است را ببینید خیلی خوب است. و حتی فراتر از آن ، چرا نمی توان امکان مشاهده موضوعات کاربر را فراهم کرد؟ بیایید در این آموزش این را بررسی کنیم.

    15. درسی در مورد Refactoring

      مدت آموزش 18:47

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

    16. Meta Details و Pagination

      مدت آموزش 9:19

      برای اطلاعات متنوع ، مانند زمان انتشار موضوع ، تعداد پاسخ ها و موارد دیگر ، باید یک sidebar به هر صفحه موضوع اضافه کنیم. علاوه بر این ، باید pagination را به برنامه خود اضافه کنیم. چه اتفاقی می افتد وقتی که یک موضوع بیش از صد پاسخ داشته باشد؟ بیایید مطمئن شویم که پیوندهای pagination مناسب را به کار می بریم.

    17. اگر کاربران توانایی فیلتر کردن همه موضوعات با محبوبیت بیشتر را داشته باشند خیلی خوب است. به این ترتیب ، فعال ترین موضوعات همیشه بالا قرار میگیرند. بیایید یک تست بنویسیم و سپس این feature را اجرا کنیم.

    18. این امر مفید خواهد بود اگر کاربران معتبر (authenticated ) بتوانند توانایی پاسخگویی به موضوعات مورد علاقه خودشان را داشته باشند. بیایید پیاده سازی این قابلیت ها را با استفاده از روابط polymorphic شروع کنیم.

    19. دکمه Favorite

      مدت آموزش 7:37

      اکنون که فرآیند کامل favoriting a reply را تست کرده ایم ، می توانیم به سمت ایجاد فرمی برای پردازش این اکشن برای یوزر برویم. در این فرآیند، در مورد N+1 problem بحث خواهیم کرد.

    20. میخواهیم مسئله N + 1 را مرور کنیم ، زیرا مربوط به Eloquent است. برای این کار ، Laravel Debugbar را نصب می کنیم تا بتوانیم کوئری های دقیق SQL را که برای هر بار صفحه اجرا می شود ، تجزیه و تحلیل کنیم. همانطور که یاد خواهید گرفت ، چندین گام ساده وجود دارد که می توانیم برای کاهش تعداد کوئری های خود توسط ده ها نفر استفاده کنیم.

    21. در این بخش به بررسی global Eloquent scopes می پردازیم.

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

    23. یکی از قابلیت های ساده ای که ما هنوز پیاده سازی نکرده ایم ، گزینه حذف موضوعات است. اگر "John Doe" موضوعی را ایجاد کند و بعداً نظر خود را تغییر دهد ، اجازه دهید آن را به طور کامل حذف کند.

    24. Authorization با Policy ها

      مدت آموزش 10:28

      باید مراقب باشیم که سهواً هیچ یک از کاربران رجیستر شده در انجمن نتواند همه موضوعات را حذف کند. بیایید یک policy class ایجاد کنیم تا مطمئن شویم که این اتفاق نمی تواند رخ دهد.

    25. در این قسمت، ما از TDD برای هدایت یک activity feed استفاده خواهیم کرد. برای مثال می توانیم track کنیم که کاربر موضوع جدیدی در انجمن ایجاد می کند یا پاسخی ارسال می کند. مثل همیشه، با ابتدایی ترین پیاده سازی ممکن شروع خواهیم کرد.

    26. اکنون که کد لازم برای ثبت کلیه activity های مربوطه را نوشتیم، در این قسمت می توانیم آن را به صفحه پروفایل کاربر ارائه دهیم و همه رکوردهای مربوطه را بر اساس تاریخ آنها گروه بندی کنیم.

    27. در حال حاضر، ما یک Eloquent query در کنترلرخود داریم. بیایید از TDD برای استخراج آن در Activity model استفاده کنیم.

    28. باگ حذف Activity

      مدت آموزش 5:10

      به نظر میاد یک باگ در activity feed خود داریم. اگر موضوعی را حذف کنیم چه اتفاقی می افتد؟ آیا این کار باعث حذف کلیه activity های مربوطه در این فرآیند می شود؟ و در غیر این صورت، چه اتفاقی می افتد که می خواهیم صفحه پروفایل کاربر را مشاهده کنیم؟بیایید یک تست رگرسیون بنویسیم تا بفهمیم.

    29. Flash Messaging با Vue

      مدت آموزش 13:59

      در این قسمت، ما با استفاده از Vue یک سیستم flash messaging را پیاده سازی خواهیم کرد. به این ترتیب، هنگامی که یک کاربر اکشن مهمی را انجام می دهد، می توانیم flash message کنیم تا نتیجه را نشان دهد.

    30. در حال حاضر، activity feed کاربر منحصراً یک timeline از موضوعات و پاسخهای خود را نشان می دهد. بیایید آن را در این قسمت گسترش دهیم تا هر پاسخی را که مورد پسند شما قرار گرفته است در آن بگنجانید.

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

    32. Vue Reply Component

      مدت آموزش 13:51

      ما در حال درک این مسئله هستیم که هر پاسخ فروم به صورت جداگانه باید رفتار مناسبی با آن داشته باشد. با توجه به این نکته، در این قسمت یک Vue component اختصاصی برای پاسخ ایجاد خواهیم کرد، و سپس عملکردهای لازم را برای ویرایش سریع متن پاسخ بدون نیاز به refresh صفحه پیاده سازی می کنیم.

    33. Ajaxifying Delete Button

      مدت آموزش 4:22

      اکنون که هر پاسخ در یک Vue instance قرار گرفته شده است، ما می توانیم به راحتی فرم قدیمی حذف پاسخ را با یک نسخه snappier AJAX که نیازی به Refresh صفحه ندارد، عوض کنیم.

    34. یک Vue Favorite Component

      مدت آموزش 16:28

      در مورد Reply component، آخرین قطعه از پازل را داریم. عملکرد Favorite هنوز هم از یک شکل قدیمی تشکیل شده است. بیایید این مورد را به یک Favorite component اختصاصی تبدیل کنیم.

    35. اصلاح باگ ها

      مدت آموزش 8:31

      من فکر می کنم ما چند باگ مربوط به اضافه کردن و حذف activity را معرفی کرده ایم. بیایید قبل از اینکه به سراغ یک feature جدید برویم، در این قسمت با آنها کار کنیم و همه چیز را اصلاح کنیم.

    36. Data-centric Approach

      مدت آموزش 21:59

      در این قسمت، هنگامی که به Vue component ها می پردازیم، بخشی از Refactoring را انجام خواهیم داد تا به سمت یک روش data-centric حرکت کنیم. به عنوان بخشی از این refactor، باید نحوه بازنویسی inline-template هایی که از Blade در JavaScript استفاده می کنند را بدانیم.

    37. یک Reply Component جدید

      مدت آموزش 11:44

      اکنون که به Vue collection ها فکر می کنیم، می توانیم به راحتی فرم Reply جدید را به کامپوننت خود تبدیل کنیم. به این ترتیب، وقتی کاربر فرم را ارسال می کند، می توانیم برای ادامه داده ها، یک AJAX را فراخوانی کنیم و سپس به مجموعه "replies" فشار بیاوریم که در response، به طور خودکار re-render را اجرا کند.

    38. Laravel و Vue Pagination

      مدت آموزش 31:02

      از آنجا که اکنون همه reply ها را با JavaScript ارائه می دهیم، دیگر نمی توانیم به ارائه pagination link ها در سمت سرور وابسته باشیم. برای جبران، بیایید یک paginator Vue component اختصاصی ایجاد کنیم تا تمام رفتارهای logic لازم را مدیریت کند.

    39. از اجرای Laracasts forum یاد گرفته ایم که کاربران اغلب می خواهند همه موضوعات را با توجه به مواردی که هنوز پاسخی دریافت نکرده اند فیلتر کنند. بیایید همین قابلیت را در این قسمت اضافه کنیم.

    40. اشتراک های موضوعات

      مدت آموزش 10:53

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

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