The Step-by-Step Technique of Including a New Function to My IOS App with Cursor

I vibe-coding to create web sites and IOS apps. I have already got two apps dwell on the App Retailer.

My first app was Brush Tracker, which helps you monitor your every day brushing habits, keep constant, and hold your enamel clear by small motivational nudges. I additionally wrote an article on your entire means of constructing the app and transport it to the App Retailer.

Just lately, I made a decision so as to add a brand new function to Brush Tracker: a calendar-like grid that reveals the consumer’s month-to-month brushing consistency. On this article, I’ll stroll you thru how I applied this function utilizing Cursor and some handbook changes I made.

Preliminary immediate

What I had in thoughts was just like the grids you see in habit-tracking apps or the contribution graph on GitHub.

I began with the Plan Mode of Cursor, which I’ve discovered extremely environment friendly when including a brand new function or making a giant change. You outline the function or clarify the duty and Cursor generates an in depth implementation plan.

Right here is the precise immediate I used within the Plan Mode to get began:

I wish to add a calendar-like grid to trace days consumer full brushings. Make the grid with squares the place every sq. represents a day in a month. The preliminary state of the squares within the grid are black. Paint the sq. with inexperienced if the consumer completes all of the brushings, with gentle inexperienced if the consumer partially full the brushings. For instance, consumer units the every day brushings rely as 2. In the event that they full one brushing in a day, the sq. ought to be gentle inexperienced. In the event that they full two brushings in day, the sq. for that day ought to be inexperienced. The grid ought to be accessible by urgent a calendar icon on the highest left of the display screen.

Cursor requested me two inquiries to make clear some particulars earlier than finalizing the implementation plan. I actually appreciated this step as a result of it’s reassuring to see Cursor search clarification as a substitute of creating assumptions by itself.

The 2 questions Cursor requested:

• Ought to the calendar grid present solely the present month, or permit navigation between months?
• Ought to we begin monitoring from immediately ahead, or additionally present previous days (which might be black)?

I instructed Cursor to permit navigation between months and to show the earlier days of the month in black. Then, Cursor created a markdown file outlining an in depth implementation plan.

The plan explains intimately how the function shall be applied and in addition features a listing of actionable todo gadgets.

Cursor’s TODO gadgets:

• Lengthen BrushModel to trace historic every day brushing information with persistence

• Create CalendarGridView part with month grid and color-coded squares

• Add calendar icon button to prime left of ContentView

• Combine CalendarGridView with ContentView utilizing sheet presentation

Subsequent, I requested Cursor to implement the plan. It additionally permits for modifying the plan earlier than execution, however I wished to stay with Cursor’s authentic define as-is.

The implementation labored on the very first attempt, and I used to be capable of take a look at the function straight within the Xcode simulator. Nonetheless, the design was horrible:

Be aware: All photos used on this article embrace screenshots from my app, Brush Tracker.

Xcode simulator not consists of date and time settings, so I modified the system date on my Mac to check how the grid colours up to date throughout totally different days.

I didn’t like this fashion in any respect. So I requested Cursor to revamp the grid utilizing the next immediate:

We have to change the design of the grid. What I take into account is one thing like Github contributions grid. Additionally, don’t present the day values within the squares representing days.

This immediate didn’t work as I’d hoped. The one change it made was eradicating the day numbers:

Subsequent, I shared a pattern picture of the grid fashion I need and requested Cursor to make an identical design.

The brand new design was nearer to what I had in thoughts however it had structural points. The squares had been too small and didn’t scale properly inside the structure:

So there are two most important issues with this design:

1. Every month incorporates 42 squares (not representing the times in any month).
2. Squares are too small.

I requested Cursor to repair the primary downside with this immediate:

Within the present implementation, there are 42 squares in November and December. Squares within the grid characterize days in a month so the variety of squares should be equal to the variety of days in that month.

The opposite downside was easier and I may resolve it by adjusting some parameter values. As an example, the scale of the squares within the grid will be modified by the squareSize parameter:

struct DaySquare: View {
    let isToday: Bool
    let isCurrentMonth: Bool
    let brushCount: Int
    let brushesPerDay: Int
    
    non-public let squareSize: CGFloat = 8 // change this parameter

Right here is how the grid takes care of I modified the sq. measurement to 32:

The opposite downside that may very well be solved by adjusting parameter values is the padding between rows.

Within the screenshot above, there appears to be no area between rows. This may be modified by rising padding between rows.

I additionally wish to have 8 squares (i.e. days) in a row and alter the area between rows.

All of those will be carried out within the following code snippet:

            // Calendar grid - smaller GitHub fashion
            LazyVGrid(columns: Array(repeating: GridItem(.versatile(), spacing: 0.2), rely: 8), spacing: 0) {
                ForEach(Array(calendarDays.enumerated()), id: .offset) { index, dayInfo in
                    DaySquare(
                        isToday: dayInfo.isToday,
                        isCurrentMonth: dayInfo.isCurrentMonth,
                        brushCount: dayInfo.brushCount,
                        brushesPerDay: mannequin.brushesPerDay,
                        measurement: 32
                    )
                    .padding(.backside, 3)
                }
            }

• spacing controls the area between squares in a row
• padding controls the area between rows
• rely controls the variety of squares in a row

After taking part in round with these parameter values within the code snippet above, I obtained the next grid:

If the consumer completes all brushings in a day, she will get a shiny inexperienced. In case of partial completion, the sq. for that day is coloured with pale inexperienced. The opposite days are proven in black and the present day is indicated with a white body.

After implementing the function to maintain monitor of previous days, it appeared pure so as to add notifications for streaks. I requested Cursor to do that utilizing the next immediate:

Add notifications for when the consumer accomplished all brushings for 10, 20, and 30 days. Additionally, add a month notification for when the consumer completes all days in a month. Notifications ought to be encouraging and motivating.

The grid I created is just not one of the best design however it’s adequate to ship the message. When a consumer appears at this grid, she instantly will get an concept of her enamel brushing frequency.

With the assistance of Cursor and a few handbook tweaks, I used to be capable of implement and ship this function in just a few hours. On the time of writing this text, this model remains to be in App Retailer assessment. By the point you learn the article, it could be distributed. Right here is the App Retailer hyperlink to Brush Tracker if you happen to’d like to check out it or check out the app.

Thanks for studying! When you’ve got any suggestions concerning the article or the app, I’d love to listen to your ideas.