{"id":9462,"date":"2025-12-06T08:12:46","date_gmt":"2025-12-06T08:12:46","guid":{"rendered":"https:\/\/techtrendfeed.com\/?p=9462"},"modified":"2025-12-06T08:12:46","modified_gmt":"2025-12-06T08:12:46","slug":"the-step-by-step-technique-of-including-a-new-characteristic-to-my-ios-app-with-cursor","status":"publish","type":"post","link":"https:\/\/techtrendfeed.com\/?p=9462","title":{"rendered":"The Step-by-Step Technique of Including a New Characteristic to My IOS App with Cursor"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div>\n<p class=\"wp-block-paragraph\">I  vibe-coding to create web sites and IOS apps. I have already got two apps dwell on the App Retailer.<\/p>\n<p class=\"wp-block-paragraph\">My first app was <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/apps.apple.com\/us\/app\/brush-tracker\/id6754214621\">Brush Tracker<\/a>, which helps you observe your day by day brushing habits, keep constant, and maintain your enamel clear by small motivational nudges. I additionally wrote an <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/towardsdatascience.com\/i-built-an-ios-app-in-3-days-with-literally-no-prior-swift-knowledge\/\">article<\/a> on all the technique of constructing the app and transport it to the App Retailer.<\/p>\n<p class=\"wp-block-paragraph\">Not too long ago, I made a decision so as to add a brand new characteristic to Brush Tracker: a calendar-like grid that reveals the consumer\u2019s month-to-month brushing consistency. On this article, I\u2019ll stroll you thru how I applied this characteristic utilizing Cursor and some handbook changes I made.<\/p>\n<h2 class=\"wp-block-heading\">Preliminary immediate<\/h2>\n<p class=\"wp-block-paragraph\">What I had in thoughts was much like the grids you see in habit-tracking apps or the contribution graph on GitHub.<\/p>\n<p class=\"wp-block-paragraph\">I began with the Plan Mode of Cursor, which I\u2019ve discovered extremely environment friendly when including a brand new characteristic or making a giant change. You outline the characteristic or clarify the duty and Cursor generates an in depth implementation plan.<\/p>\n<p class=\"wp-block-paragraph\">Right here is the precise immediate I used within the Plan Mode to get began:<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">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 mild inexperienced if the consumer partially full the brushings. For instance, consumer units the day by day brushings depend as 2. In the event that they full one brushing in a day, the sq. must be mild inexperienced. In the event that they full two brushings in day, the sq. for that day must be inexperienced. The grid must be accessible by urgent a calendar icon on the highest left of the display screen.<\/p>\n<\/blockquote>\n<p class=\"wp-block-paragraph\">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\u2019s reassuring to see Cursor search clarification as an alternative of creating assumptions by itself.<\/p>\n<p class=\"wp-block-paragraph\">The 2 questions Cursor requested:<\/p>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\">Ought to the calendar grid present solely the present month, or enable navigation between months?<\/li>\n<li class=\"wp-block-list-item\">Ought to we begin monitoring from right now ahead, or additionally present previous days (which might be black)?<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\">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.<\/p>\n<p class=\"wp-block-paragraph\">The plan explains intimately how the characteristic will probably be applied and in addition features a record of actionable todo objects.<\/p>\n<p class=\"wp-block-paragraph\">Cursor\u2019s TODO objects:<\/p>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\"><em>Prolong BrushModel to trace historic day by day brushing knowledge with persistence<\/em><\/li>\n<\/ul>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\"><em>Create CalendarGridView element with month grid and color-coded squares<\/em><\/li>\n<\/ul>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\"><em>Add calendar icon button to high left of ContentView<\/em><\/li>\n<\/ul>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\"><em>Combine CalendarGridView with ContentView utilizing sheet presentation<\/em><\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\">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\u2019s authentic define as-is.<\/p>\n<p class=\"wp-block-paragraph\">The implementation labored on the very first attempt, and I used to be in a position to check the characteristic immediately within the Xcode simulator. Nonetheless, the design was horrible:<\/p>\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/11\/image-418.png\" alt=\"\" class=\"wp-image-633832\" style=\"width:291px;height:auto\"\/><\/figure>\n<p class=\"wp-block-paragraph\">Be aware: All pictures used on this article embody screenshots from my app, Brush Tracker.<\/p>\n<p class=\"wp-block-paragraph\">Xcode simulator now not contains 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.<\/p>\n<p class=\"wp-block-paragraph\">I didn&#8217;t like this model in any respect. So I requested Cursor to revamp the grid utilizing the next immediate:<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">We have to change the design of the grid. What I take into consideration is one thing like Github contributions grid. Additionally, don&#8217;t present the day values within the squares representing days.<\/p>\n<\/blockquote>\n<p class=\"wp-block-paragraph\">This immediate didn&#8217;t work as I\u2019d hoped. The one change it made was eradicating the day numbers:<\/p>\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/11\/image-419.png\" alt=\"\" class=\"wp-image-633834\" style=\"width:262px;height:auto\"\/><\/figure>\n<p class=\"wp-block-paragraph\">Subsequent, I shared a pattern picture of the grid model I would like and requested Cursor to make the same design.<\/p>\n<p class=\"wp-block-paragraph\">The brand new design was nearer to what I had in thoughts but it surely had structural points. The squares had been too small and didn&#8217;t scale properly throughout the structure:<\/p>\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/11\/image-420.png\" alt=\"\" class=\"wp-image-633839\" style=\"width:294px;height:auto\"\/><\/figure>\n<p class=\"wp-block-paragraph\">So there are two predominant issues with this design:<\/p>\n<ol class=\"wp-block-list\">\n<li class=\"wp-block-list-item\">Every month accommodates 42 squares (not representing the times in any month).<\/li>\n<li class=\"wp-block-list-item\">Squares are too small.<\/li>\n<\/ol>\n<p class=\"wp-block-paragraph\">I requested Cursor to repair the primary downside with this immediate:<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Within the present implementation, there are 42 squares in November and December. Squares within the grid signify days in a month so the variety of squares have to be equal to the variety of days in that month.<\/p>\n<\/blockquote>\n<p class=\"wp-block-paragraph\">The opposite downside was easier and I might remedy it by adjusting some parameter values. For example, the dimensions of the squares within the grid may be modified by the <code>squareSize<\/code> parameter:<\/p>\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-python\">struct DaySquare: View {\n    let isToday: Bool\n    let isCurrentMonth: Bool\n    let brushCount: Int\n    let brushesPerDay: Int\n    \n    non-public let squareSize: CGFloat = 8 \/\/ change this parameter<\/code><\/pre>\n<p class=\"wp-block-paragraph\">Right here is how the grid takes care of I modified the sq. dimension to 32:<\/p>\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/11\/image-425.png\" alt=\"\" class=\"wp-image-633846\" style=\"width:322px;height:auto\"\/><\/figure>\n<p class=\"wp-block-paragraph\">The opposite downside that may very well be solved by adjusting parameter values is the padding between rows. <\/p>\n<p class=\"wp-block-paragraph\">Within the screenshot above, there appears to be no area between rows. This may be modified by rising padding between rows.<\/p>\n<p class=\"wp-block-paragraph\">I additionally wish to have 8 squares (i.e. days) in a row and alter the area between rows.<\/p>\n<p class=\"wp-block-paragraph\">All of those may be achieved within the following code snippet:<\/p>\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-python\">            \/\/ Calendar grid - smaller GitHub model\n            LazyVGrid(columns: Array(repeating: GridItem(.versatile(), spacing: 0.2), depend: 8), spacing: 0) {\n                ForEach(Array(calendarDays.enumerated()), id: .offset) { index, dayInfo in\n                    DaySquare(\n                        isToday: dayInfo.isToday,\n                        isCurrentMonth: dayInfo.isCurrentMonth,\n                        brushCount: dayInfo.brushCount,\n                        brushesPerDay: mannequin.brushesPerDay,\n                        dimension: 32\n                    )\n                    .padding(.backside, 3)\n                }\n            }<\/code><\/pre>\n<ul class=\"wp-block-list\">\n<li class=\"wp-block-list-item\"><code>spacing<\/code> controls the area between squares in a row<\/li>\n<li class=\"wp-block-list-item\"><code>padding<\/code> controls the area between rows<\/li>\n<li class=\"wp-block-list-item\"><code>depend<\/code> controls the variety of squares in a row<\/li>\n<\/ul>\n<p class=\"wp-block-paragraph\">After enjoying round with these parameter values within the code snippet above, I acquired the next grid:<\/p>\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/contributor.insightmediagroup.io\/wp-content\/uploads\/2025\/11\/image-443.png\" alt=\"\" class=\"wp-image-633970\" style=\"width:334px;height:auto\"\/><\/figure>\n<p class=\"wp-block-paragraph\">If the consumer completes all brushings in a day, she will get a vivid 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.<\/p>\n<p class=\"wp-block-paragraph\">After implementing the characteristic to maintain observe of previous days, it appeared pure so as to add notifications for streaks. I requested Cursor to do that utilizing the next immediate:<\/p>\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">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 must be encouraging and motivating.<\/p>\n<\/blockquote>\n<p class=\"wp-block-paragraph\">The grid I created isn&#8217;t one of the best design but it surely\u2019s ok to ship the message. When a consumer appears at this grid, she instantly will get an thought of her enamel brushing frequency.<\/p>\n<p class=\"wp-block-paragraph\">With the assistance of Cursor and a few handbook tweaks, I used to be in a position to implement and ship this characteristic in a number of hours. On the time of writing this text, this model continues to be in App Retailer evaluation. By the point you learn the article, it is perhaps distributed. Right here is the App Retailer hyperlink to <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/apps.apple.com\/us\/app\/brush-tracker\/id6754214621\">Brush Tracker<\/a> for those who\u2019d like to try it or check out the app.<\/p>\n<p class=\"wp-block-paragraph\">Thanks for studying! In case you have any suggestions in regards to the article or the app, I\u2019d love to listen to your ideas.<\/p>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>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 observe your day by day brushing habits, keep constant, and maintain your enamel clear by small motivational nudges. I additionally wrote an article on all the [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":9464,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[55],"tags":[986,205,6779,1063,1093,6778,77],"class_list":["post-9462","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-machine-learning","tag-adding","tag-app","tag-cursor","tag-feature","tag-ios","tag-process","tag-stepbystep"],"_links":{"self":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/9462","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9462"}],"version-history":[{"count":1,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/9462\/revisions"}],"predecessor-version":[{"id":9463,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/posts\/9462\/revisions\/9463"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=\/wp\/v2\/media\/9464"}],"wp:attachment":[{"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=9462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/techtrendfeed.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=9462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<!-- This website is optimized by Airlift. Learn more: https://airlift.net. Template:. Learn more: https://airlift.net. Template: 69d9690a190636c2e0989534. Config Timestamp: 2026-04-10 21:18:02 UTC, Cached Timestamp: 2026-05-16 07:54:07 UTC -->