فرآیند گام‌به‌گام اضافه‌کردن ویژگی جدید به برنامه iOS من با Cursor

Cursor در نوشتن کد عالی است اما در زمینهٔ طراحی همان‌قدر قوی نیست.

Soner Yıldırım

مدتی است که به برنامه‌نویسی vibe‑coding برای ساخت وب‌سایت‌ها و برنامه‌های iOS پرداخته‌ام. در حال حاضر دو برنامه در App Store به‌صورت زنده موجود دارم.

برنامهٔ اول من Brush Tracker است که به شما کمک می‌کند عادات مسواک‌زدن روزانه‌تان را پیگیری کنید، ثبات داشته باشید و دندان‌های خود را از طریق نکات کوچک انگیزشی تمیز نگه‌دارید. همچنین مقاله‌ای دربارهٔ تمام فرآیند ساخت برنامه و انتشار آن در App Store نوشتم.

به‌تازگی تصمیم گرفتم ویژگی جدیدی به Brush Tracker اضافه کنم: یک جدول شبیه تقویم که سازگاری مسواک‌زدن ماهانهٔ کاربر را نشان می‌دهد. در این مقاله قدم به قدم توضیح می‌دهم چگونه این ویژگی را با استفاده از Cursor و چند تنظیم دستی پیاده‌سازی کردم.

پیشنهاد اولیه

در ذهنم این شبیه به جدول‌هایی بود که در برنامه‌های پیگیری عادات یا نمودار مشارکت‌های GitHub مشاهده می‌کنید.

من با حالت «Plan» در Cursor شروع کردم، که در افزودن ویژگی جدید یا اعمال تغییرات بزرگ بسیار کارآمد است. شما ویژگی یا وظیفه را تعریف می‌کنید و Cursor یک طرح پیاده‌سازی دقیق تولید می‌کند.

در اینجا دقیقاً همان دستوری که در حالت Plan استفاده کردم آمده است:

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

Cursor پیش از نهایی‌سازی طرح پیاده‌سازی دو سؤال برای روشن کردن برخی جزئیات از من پرسید. این مرحله را خیلی دوست داشتم چون اطمینان‌بخش است که Cursor به جای فرضیات دلخواه، برای شفاف‌سازی سؤال می‌کند.

دو سؤال که Cursor پرسید:

• آیا جدول تقویم فقط ماه جاری را نشان دهد یا امکان پیمایش بین ماه‌ها را بدهد؟
• آیا باید از امروز به‌بعد پیگیری را آغاز کنیم یا روزهای گذشته (که به رنگ مشکی خواهند بود) نیز نشان داده شوند؟

به Cursor دستور دادم که امکان پیمایش بین ماه‌ها را فعال کند و روزهای گذشتهٔ ماه را به‌صورت مشکی نمایش دهد. سپس Cursor یک فایل markdown حاوی طرح پیاده‌سازی دقیق ایجاد کرد.

این طرح به‌صورت دقیق نحوه پیاده‌سازی ویژگی را توضیح می‌دهد و همچنین شامل فهرستی از موارد اقدام‌پذیر (todo) است.

موارد TODO Cursor:

• گسترش BrushModel به‌منظور ردیابی تاریخچهٔ داده‌های روزانهٔ مسواک‌زدن با پایداری
• ساخت کامپوننت CalendarGridView شامل شبکه ماهانه و مربع‌های رنگی
• افزودن دکمهٔ آیکون تقویم به بالا‑چپ ContentView
• ادغام CalendarGridView با ContentView با استفاده از نمایش به‌صورت sheet

بعداً از Cursor خواستم تا این طرح را پیاده‌سازی کند. اگرچه امکان اصلاح طرح پیش از اجرا وجود دارد، من تصمیم داشتم دقیقاً همان طرح اصلی Cursor را 그대로 اجرا کنم.

پیاده‌سازی در اولین تلاش کار کرد و توانستم ویژگی را مستقیماً در شبیه‌ساز Xcode آزمایش کنم. اما طراحی آن افتضاح بود:

نکته: تمام تصاویر استفاده‌شده در این مقاله شامل اسکرین‌شات‌های برنامه من، Brush Tracker هستند.

شبیه‌ساز Xcode دیگر تنظیمات تاریخ و زمان را در اختیار ندارد، بنابراین تاریخ سیستم مک من را تغییر دادم تا ببینم رنگ‌های جدول در روزهای مختلف چگونه به‌روزرسانی می‌شوند.

من این سبک را اصلاً دوست نداشتم. بنابراین از Cursor خواستم تا جدول را با استفاده از دستور زیر بازطراحی کند:

ما نیاز داریم طراحی جدول را تغییر دهیم. چیزی که در ذهنم است شبیه به جدول مشارکت‌های Github است. همچنین، عددهای روز را در مربع‌های نمایانگر روزها نشان ندهید.

این دستور مطابق انتظار من عمل نکرد. تنها تغییری که ایجاد کرد حذف اعداد روزها بود:

سپس یک تصویر نمونه از سبک جدول مورد نظرم را به‌اشتراک گذاشتم و از Cursor خواستم طراحی مشابهی بسازد.

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

در نتیجه دو مشکل اصلی در این طراحی وجود دارد:

1. هر ماه دارای ۴۲ مربع است (که نمایانگر روزهای ماه نیست).
2. مربع‌ها بسیار کوچک هستند.

من از Cursor خواستم تا مشکل اول را با این دستور برطرف کند:

در پیاده‌سازی فعلی، در ماه‌های نوامبر و دسامبر ۴۲ مربع وجود دارد. مربع‌های جدول نمایانگر روزهای یک ماه هستند، بنابراین تعداد مربع‌ها باید برابر با تعداد روزهای آن ماه باشد.

مشکل دیگر ساده‌تر بود و می‌توانستم با تنظیم برخی پارامترها آن را حل کنم. به‌عنوان مثال، اندازهٔ مربع‌های جدول می‌تواند با پارامتر squareSize تغییر یابد:

struct DaySquare: View {
    let isToday: Bool
    let isCurrentMonth: Bool
    let brushCount: Int
    let brushesPerDay: Int

    private let squareSize: CGFloat = 8 // change this parameter

در اینجا نحوه نمایش جدول پس از تغییر اندازهٔ مربع‌ها به ۳۲ مشاهده می‌شود:

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

در اسکرین‌شات بالا به‌نظر می‌رسد بین ردیف‌ها فاصله‌ای وجود ندارد. این می‌تواند با افزایش پدینگ بین ردیف‌ها تغییر یابد.

همچنین می‌خواهم در هر ردیف ۸ مربع (یعنی روز) داشته باشم و فاصله بین ردیف‌ها را تغییر دهم.

تمام این موارد می‌توانند در قطعه کد زیر اعمال شوند:

            // Calendar grid - smaller GitHub style
            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 0.2), count: 8), spacing: 0) {
                ForEach(Array(calendarDays.enumerated()), id: \.offset) { index, dayInfo in
                    DaySquare(
                        isToday: dayInfo.isToday,
                        isCurrentMonth: dayInfo.isCurrentMonth,
                        brushCount: dayInfo.brushCount,
                        brushesPerDay: model.brushesPerDay,
                        size: 32
                    )
                    .padding(.bottom, 3)
                }
            }

• spacing فاصله بین مربع‌ها در یک ردیف را کنترل می‌کند
• padding فاصله بین ردیف‌ها را کنترل می‌کند
• count تعداد مربع‌ها در یک ردیف را تعیین می‌کند

پس از آزمایش این پارامترها در قطعه کد بالا، جدول زیر به‌دست آمد:

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

پس از پیاده‌سازی ویژگی پیگیری روزهای گذشته، افزودن اعلان‌ها برای streak‌ها (دنباله‌ها) طبیعتی شد. از Cursor خواستم با استفاده از دستور زیر این کار را انجام دهد:

اعلان‌هایی اضافه کنید برای زمانی که کاربر تمام مسواک زدن‌ها را برای ۱۰، ۲۰ و ۳۰ روز تکمیل کرده باشد. همچنین یک اعلان ماهانه برای زمانی که کاربر تمام روزهای یک ماه را تکمیل کند اضافه کنید. اعلان‌ها باید تشویق‌کننده و انگیزشی باشند.

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

با کمک Cursor و کمی تنظیمات دستی، توانستم این ویژگی را در چند ساعت پیاده‌سازی و منتشر کنم. در زمان نوشتن این مقاله، این نسخه هنوز تحت بررسی App Store است. زمانی که شما مقاله را می‌خوانید، ممکن است در دسترس باشد. در اینجا لینک App Store به Brush Tracker آمده است، اگر می‌خواهید نگاهی به آن بیاندازید یا برنامه را امتحان کنید.

از خواندن این مطلب سپاسگزارم! اگر نظری دربارهٔ مقاله یا برنامه دارید، خوشحال می‌شوم نظراتتان را بشنوم.