بعد از این درس چه کاری میتوانی انجام بدهی؟
- جریان داده را از ابتدا تا انتها ببینی
- خطای واقعی کاربر را مدیریت کنی
- نسخه کوچک اما کامل بسازی
HTML را ساده بفهم
HTML مثل اسکلت و برچسبهای یک فروشگاه است؛ مشخص میکند هر بخش عنوان، توضیح، تصویر یا دکمه است.
جزئیات فنی خطا برای کاربر مناسب نیست؛ پیام روشن و غیرحساس بده و علت را در محیط امن ثبت کن.
چرا مهم است؟ ورودی از کجا میآید و کجا میرود؟
اولین تمرین تو: جریان واقعی «صفحه معرفی یک محصول واقعی» را از ورودی تا خروجی رسم و برای یک شکست شبکه یا فایل، رفتار قابل فهم تعریف کن.
از یک مثال کوچک شروع کن
در محصول واقعی چند بخش به هم وصل میشوند: ورودی، اعتبارسنجی، منطق، ذخیره یا شبکه و بازخورد کاربر. شکست هر مرز باید رفتار مشخص داشته باشد. مسیر موفق تنها نیمی از طراحی است؛ timeout، داده نامعتبر و پاسخ خالی هم بخشی از محصولاند.
۱. جریان را رسم کن
ورودی از کجا میآید و نتیجه کجا مصرف میشود؟
۲. مرزها را قرارداد کن
هر بخش چه میگیرد و چه برمیگرداند؟
۳. شکست را طراحی کن
پیام کاربر، لاگ فنی و امکان تلاش دوباره را جدا کن.
جزئیات فنی خطا برای کاربر مناسب نیست؛ پیام روشن و غیرحساس بده و علت را در محیط امن ثبت کن.
سه قطعهای که باید بفهمی
جریان داده
ورودی از کجا میآید و کجا میرود؟
قرارداد
هر بخش چه چیزی میگیرد و تحویل میدهد؟
بازخورد
کاربر نتیجه موفق یا خطا را چگونه میفهمد؟
صفحه معرفی محصولی که کاربر و موتور جستوجو هر دو ساختارش را درست بفهمند.
در این درس، بخشی واقعی از پروژه «صفحه معرفی یک محصول واقعی» را میسازیم. قبل از کد یا پرامپت، ورودی، قانون و خروجی مورد انتظار را روی کاغذ مشخص میکنیم.
قطعهها را به ترتیب درست بچین
روی هر قطعه بزن تا وارد پاسخ شود؛ برای برگرداندن دوباره روی آن بزن. با دکمههای جابهجایی هم میتوانی بدون کشیدن و رهاکردن ترتیب را اصلاح کنی.
اجرا و پیشنمایش
این نمونه واقعاً داخل محیط جدا و امن مرورگر اجرا میشود؛ مقدار را تغییر بده و نتیجه را مستقیم ببین.
یک بخش را تغییر بده و دکمه بررسی را بزن.
راهنماییها مرحلهای هستند؛ اول خودت پیام خطا را بخوان.
جریان واقعی «صفحه معرفی یک محصول واقعی» را از ورودی تا خروجی رسم و برای یک شکست شبکه یا فایل، رفتار قابل فهم تعریف کن.
این سه اشتباه را انجام نده
فرض موفقیت همیشگی I/O
نمایش جزئیات حساس خطا
اتصال مستقیم همه لایهها به هم
با 5 سؤال مطمئن شو که مفهوم را گرفتهای
بهترین روش استفاده از نمونه این درس چیست؟
مسیر واقعی چه حالتهایی دارد؟
جزئیات فنی خطا کجا میرود؟
کدام روش نشان میدهد این درس را واقعاً فهمیدهای؟
کدام رفتار احتمال خطا را در همین موضوع بیشتر میکند؟
فهمیدی، تغییر دادی، نتیجه را توضیح دادی؟
فقط در این صورت درس را کامل کن و سراغ مرحله بعد برو.