ساخت اولین اپ کامل با وایب کدینگ؛ پروژهٔ گام‌به‌گام

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

پروژه: ابزار یادداشت سریع

یک صفحهٔ وب ساده که کاربر می‌تواند یادداشت بنویسد، آن را ذخیره کند، لیست یادداشت‌ها را ببیند و هر کدام را حذف کند. یادداشت‌ها در همان مرورگر (localStorage) نگه داشته می‌شوند، پس نیازی به دیتابیس یا بک‌اند نیست.

1. تعریف دقیق پروژه برای خودتان. قبل از هر پرامپتی، یک جملهٔ ساده بنویسید که دقیقاً چه چیزی می‌خواهید. این جمله همان چیزی است که در بخش «زمینه» پرامپت اول استفاده می‌شود.
   
   خروجی این گام: یک جملهٔ مشخص، مثلاً «یک صفحهٔ HTML تک‌فایلی برای افزودن، نمایش و حذف یادداشت با ذخیرهٔ محلی.»
2. پرامپت اول؛ ساخت اسکلت اپ. از مدل بخواهید یک نسخهٔ حداقلی و قابل‌اجرا بسازد، نه نسخهٔ کامل با همهٔ قابلیت‌ها.

   یک فایل HTML تک‌فایلی بساز (HTML و CSS و JavaScript همه در یک فایل) که:
   - یک باکس متنی برای نوشتن یادداشت داشته باشد
   - یک دکمهٔ «افزودن» داشته باشد
   - یادداشت‌های افزوده‌شده را در یک لیست زیر فرم نشان بدهد
   فعلاً نیازی به ذخیره‌سازی دائمی نیست، فقط باید در همان صفحه کار کند.
   خروجی را به‌صورت یک فایل کامل بده تا مستقیم در مرورگر باز کنم.
   

   خروجی این گام: یک فایل HTML که وقتی در مرورگر باز می‌کنید، می‌توانید یادداشت تایپ کنید و در لیست ببینید.

3. اجرا و بررسی. فایل را ذخیره کنید و مستقیم در مرورگر باز کنید (نیازی به هیچ نصبی نیست). چک کنید افزودن یادداشت واقعاً کار می‌کند.
   
   خروجی این گام: صفحه در مرورگر باز می‌شود و یادداشت جدید در لیست ظاهر می‌شود.
4. پرامپت دوم؛ اضافه‌کردن ذخیرهٔ محلی. حالا که اسکلت کار می‌کند، قابلیت ماندگاری اضافه می‌شود تا با رفرش‌کردن صفحه یادداشت‌ها از بین نروند.

   در همین فایل، یادداشت‌ها را در localStorage مرورگر ذخیره کن
   طوری که با رفرش‌کردن صفحه یادداشت‌های قبلی دوباره نمایش داده شوند.
   فقط تغییرات لازم را در کد فعلی اعمال کن، ساختار فعلی را به‌هم نریز.
   کد فعلی: [کد فایل فعلی را اینجا بچسبانید]
   

   خروجی این گام: صفحه را رفرش می‌کنید و یادداشت‌های قبلی هنوز آنجا هستند.

5. پرامپت سوم؛ قابلیت حذف. کنار هر یادداشت یک دکمهٔ حذف اضافه می‌شود.

   کنار هر یادداشت در لیست یک دکمهٔ حذف اضافه کن.
   با کلیک روی آن، یادداشت هم از صفحه و هم از localStorage حذف شود.
   فقط تغییرات لازم را نشان بده.
   

   خروجی این گام: با کلیک روی دکمهٔ حذف، یادداشت واقعاً از لیست و از حافظهٔ مرورگر پاک می‌شود.

6. تست کامل و رفع خطاهای احتمالی. کنسول مرورگر را باز کنید (کلید F12 در اغلب مرورگرها) و ببینید خطایی چاپ نشده. اگر خطا دیدید، طبق حلقهٔ خطا-توضیح-اصلاح که در مقالهٔ قبلی گفتیم، متن کامل خطا را به مدل بدهید.
   
   خروجی این گام: افزودن، نمایش و حذف یادداشت بدون هیچ خطایی در کنسول کار می‌کند.
7. لمس نهایی؛ ظاهر و تجربهٔ کاربری. حالا که منطق کار می‌کند، می‌توانید از مدل بخواهید ظاهر را بهتر کند: فاصله‌گذاری، رنگ، فونت، حالت خالی‌بودن لیست.
   
   خروجی این گام: صفحه‌ای که علاوه بر کارکردن، دیدنش هم خوشایند است.

اگر بخواهید یک قدم جلوتر بروید

بعد از اینکه این نسخهٔ ساده کار کرد، می‌توانید چند قابلیت کوچک دیگر هم به همین روش گام‌به‌گام اضافه کنید: جست‌وجو در یادداشت‌ها، دسته‌بندی با برچسب، یا ویرایش یک یادداشت به‌جای فقط حذف‌کردن آن. هر کدام از این‌ها را هم باید در یک پرامپت جدا و با کد فعلی به‌عنوان ورودی مطرح کنید، دقیقاً همان الگویی که در گام‌های ۴ و ۵ دیدید. اگر در میانهٔ راه به خطایی برخوردید که خودتان نتوانستید حلش کنید، پیام خطای کامل را همراه با کد مربوطه به مدل بدهید؛ همان حلقهٔ خطا-توضیح-اصلاح که پیش‌تر توضیح دادیم دقیقاً برای همین لحظه‌هاست.

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

نکتهٔ کلیدی این پروژه این بود که هیچ‌وقت یک پرامپت غول‌پیکر برای «همهٔ قابلیت‌ها با هم» ندادیم؛ هر پرامپت یک قابلیت اضافه کرد و بعد از تأیید، سراغ بعدی رفتیم. این همان الگویی است که در پروژه‌های بزرگ‌تر هم جواب می‌دهد. اگر می‌خواهید بعد از این تمرین، این ابزار ساده را به یک اپ واقعی با دیتابیس و احراز هویت تبدیل کنید، مقالهٔ بعدی همین سری همان مسیر را باز می‌کند؛ و برای دیدن کل مسیر یادگیری از اینجا تا آنجا، نقشهٔ راه وایب کدینگ را ببینید.

جمع‌بندی

• پروژه را به گام‌های کوچک بشکنید؛ هر گام یک قابلیت اضافه کند و قبل از رفتن به بعدی تست شود.
• پرامپت اول همیشه باید حداقلی باشد (اسکلت)، نه نسخهٔ کامل با همهٔ قابلیت‌ها.
• برای هر تغییر، کد فعلی را به مدل بدهید تا فقط تغییر لازم را اعمال کند، نه بازنویسی کامل.
• تست دستی بعد از هر گام، از انباشته‌شدن چند مشکل روی هم جلوگیری می‌کند.