دوره فشرده Storybook برای توسعه‌دهندگان - React/Vitest

آنچه یاد خواهید گرفت:

• راه‌اندازی و پیکربندی پروژه‌های Storybook برای گردش‌کارهای کارآمد توسعه کامپوننت
• ایجاد استوری‌های جامع برای کامپوننت‌ها با پارامترها، حالت‌های مختلف و مستندات خودکار
• نوشتن تست‌های تعاملی در Storybook برای اعتبارسنجی اقدامات کاربر و رفتار کامپوننت
• پیاده‌سازی راهکارهای شبیه‌سازی داده با استفاده از MSW برای نمایش‌های واقع‌گرایانه کامپوننت بدون نیاز به بک‌اند
• تسلط به تکنیک‌های یافتن عناصر و الگوهای تست برای تعاملات پیچیده کاربر
• استفاده از افزونه‌های Storybook برای گسترش قابلیت‌ها و بهبود تجربه توسعه
• ادغام طراحی‌های Figma در Storybook برای همکاری و تحویل روان بین طراح و توسعه‌دهنده
• شخصی‌سازی تم و رابط کاربری Storybook مطابق با راهنمای برند و ترجیحات تیم

پیش‌نیازهای دوره

• آشنایی اولیه JavaScript و TypeScript

توضیحات دوره

آماده‌اید گردش‌کار توسعه کامپوننت خود را متحول کنید؟ Storybook ابزار استاندارد صنعت برای ساخت، تست و مستندسازی کامپوننت‌های UI به‌صورت ایزوله است - و این دوره شما را از یک مبتدی Storybook به یک کاربر مطمئن تبدیل می‌کند که آماده‌ی ارائه کتابخانه‌های کامپوننت در سطح production است.

آنچه به آن مسلط خواهید شد:

اصول و راه‌اندازی Storybook: با درکی عمیق و مستحکم از اینکه Storybook چیست، چرا تیم‌های Airbnb ،Slack و Microsoft به آن تکیه می‌کنند، و چگونه اولین پروژه Storybook خود را راه‌اندازی کنید، شروع می‌کنید. در عرض چند دقیقه، Storybook را به‌صورت محلی اجرا خواهید کرد و یاد می‌گیرید چگونه در رابط کاربری قدرتمند آن حرکت کنید.

ساخت استوری‌هایی که می‌درخشند: یاد بگیرید اولین استوری‌های Storybook خود را بسازید و آن‌ها را با حالت‌های واقعی و متنوع گسترش دهید. به پارامترهای Storybook مسلط شوید تا رندر را کنترل کنید، چند کامپوننت را هم‌زمان نمایش دهید، و از مستندات خودکار Storybook برای ساخت نمایش‌های زیبا و تعاملی کامپوننت استفاده کنید که طراحان و توسعه‌دهندگان عاشقشان خواهند شد.

تست‌نویسی در Storybook :Storybook را از یک ابزار مستندسازی به یک موتور قدرتمند تست تبدیل کنید. شما تست‌های تعاملی را مستقیماً در Storybook می‌نویسید، چندین روش برای پیدا کردن عناصر را یاد می‌گیرید، اقداماتی مثل تایپ کردن و حذف کردن را تست می‌کنید، فراخوانی توابع را بررسی می‌کنید، و حتی از افزونه Storybook Codegen برای تولید خودکار تست‌ها استفاده می‌کنید. علاوه بر این، با حالت headed برای اشکال‌زدایی ویژوال تست‌های Storybook آشنا می‌شوید.

تسلط به شبیه‌سازی داده: استوری‌های واقع‌گرایانه Storybook را بدون وابستگی به بک‌اند بسازید. یاد بگیرید چگونه فراخوانی توابع، کتابخانه‌های خارجی و درخواست‌های شبکه را با یکپارچه‌سازی MSW (Mock Service Worker) شبیه‌سازی کنید. کامپوننت‌های Storybook شما رفتار دنیای واقعی را نمایش خواهند داد، بدون اینکه به راه‌اندازی سرور نیاز باشد.

شخصی‌سازی Storybook :Storybook را واقعاً متعلق به خودتان کنید. اکوسیستم افزونه‌ها را بررسی کنید، طراحی‌های Figma را مستقیماً با افزونه design در Storybook ادغام کنید تا همکاری طراحی و توسعه روان‌تر شود، و تم سفارشی را برای هماهنگی با برند خود اعمال کنید. خواهید فهمید افزونه‌های Storybook چگونه قابلیت‌ها را گسترش می‌دهند و چگونه از آن‌ها برای بیشترین بهره‌وری استفاده کنید.

چرا این دوره؟

• یادگیری عملی و مبتنی بر پروژه‌: هر مفهوم Storybook از طریق ساختن عملی تثبیت می‌شود.
• پوشش کامل: از اولین استوری Storybook تا تست‌نویسی پیشرفته و شخصی‌سازی
• ابزار استاندارد صنعت: Storybook توسط هزاران شرکت در سراسر جهان استفاده می‌شود
• مهارت‌های آینده‌محور: Storybook با React ،Vue، Angular و موارد دیگر یکپارچه می‌شود - مهارت‌هایی که بین فریم‌ورک‌ها قابل انتقال هستند.

در پایان این دوره

با اطمینان از Storybook برای ساخت استوری‌های ایزوله کامپوننت، نوشتن تست‌های تعاملی جامع در Storybook، شبیه‌سازی سناریوهای پیچیده داده، و شخصی‌سازی Storybook متناسب با نیازهای تیم خود استفاده خواهید کرد. چه در حال ساخت یک پروژه شخصی باشید، چه نگهداری یک سیستم طراحی، یا ارائه یک محصول تجاری، از Storybook برای توسعه سریع‌تر کامپوننت‌ها، با باگ‌های کمتر و مستندات بهتر استفاده خواهید کرد.

Storybook فقط یک ابزار نیست - یک محیط کامل برای توسعه کامپوننت است. یاد بگیرید به آن مسلط شوید.

این دوره برای چه کسانی مناسب است؟

• توسعه‌دهندگانی که آماده‌اند گردش‌کار کامپوننت خود را ارتقا دهند.
• مهندسان فرانت‌اند که سیستم طراحی یا کتابخانه کامپوننت می‌سازند.
• توسعه‌دهندگانی که می‌خواهند کامپوننت‌های UI را به‌صورت ایزوله تست کنند.
• تیم‌هایی که به دنبال بهبود همکاری بین طراحان و توسعه‌دهندگان هستند.
• هر کسی که از تست دستی کامپوننت‌ها در بستر کامل اپلیکیشن خسته شده است.