the Brush Tracker app in 3 days with no prior expertise with Swift, the principle programming language for iOS growth. Though I’ve a totally useful app reside on the App Retailer, I nonetheless have little or no Swift information as a result of I used “vibe coding” to develop this app.
On this article, I’ll clarify the method, AI instruments I used, and share a few of my learnings and insights.
Something as Lovable various
I beforehand used Lovable for creating internet purposes but it surely doesn’t appear to be an possibility for cell app growth, no less than for now.
There are options to Lovable for app growth. I not too long ago got here throughout a instrument referred to as Something, and since I’d had such expertise with Lovable, I made a decision to present it a attempt to develop my app. At first, it appeared to work nicely, however the general expertise wasn’t as environment friendly as I’d hoped.
The toughest half was not having the ability to take a look at my adjustments, fixes, and enhancements immediately. Something does have a built-in UI for testing, however the expertise wasn’t very clean. It additionally directs you to check the code by the Expo app, however that didn’t work nicely for me both.
I ought to point out that I didn’t have any prior app growth expertise. For builders or anybody with some coding background, Something might in all probability be a extra productive instrument than it was for me.
I exported the code from Something and tried to check it on Xcode on my mac however obtained many errors and couldn’t get it to working. So I made a decision to make use of an alternate. Cursor appeared to the plain alternative.
Cursor
I’ve heard excellent issues about Cursor from many associates who’re actively utilizing it. I wished to present it a attempt myself.
I used the identical immediate in Cursor and requested it to construct the app. Then I created an XCode venture with the folders and information generated by Cursor. I began the simulator on XCode and it labored on the primary attempt.
The objective of Brush Tracker is that can assist you keep constant together with your every day toothbrushing. It offers you a cleanliness rating that begins at 100%. In case you skip a day, the rating drops and your enamel within the app begin to look a bit yellowish to match the cleanliness rating.
Word: All photos used on this article embrace screenshots from my app, Brush Tracker.
The primary model solely had the principle function of the app. I believe that is probably the most environment friendly means of constructing merchandise with AI-based instruments. Get the primary model up and operating earlier than including options.
To check the app’s core function on the simulator, I needed to change the simulator’s date with out finishing “at the moment’s brushing” to verify whether or not the cleanliness rating would drop and the enamel visualizations would replace as anticipated.
Cursor prompt to vary the date on the XCode simulator however the simulator doesn’t have the date and time settings anymore. Older variations of XCode simulator had this setting however not anymore.
A workaround answer was to vary the date on my Mac. This fashion, the date on the simulator additionally modified and I used to be capable of take a look at the function.
One factor I observed was that once I modified the date on my Mac, Cursor didn’t see my account and didn’t work. It obtained again to regular once I modified the date again to auto.
Timer function
A built-in brushing timer felt like the nice addition to Brush Tracker. Customers can merely mark a brushing session as performed or use the timer whereas they brush.
It took me a number of tries to get this function working the best way I imagined. You’ll be able to simply inform Cursor so as to add a function, but it surely works significantly better while you tweak the immediate and clarify precisely what you need. When you give clear directions, Cursor often does an important job.
Reward function
I wished so as to add an additional motivation when the consumer completes every day brushings. After finishing the periods, they’ll faucet “Get Your Every day Reward” and see a brief motivational quote. It’s a small contact however a pleasant reminder for dental well being.
You’ll be able to truly be taught whereas vibe coding
Cursor not solely writes the code but additionally helps you be taught. After I was attempting so as to add the reward function, the implementation was not appropriate at first. It wasn’t working correctly.
I described the difficulty to Cursor, and it defined each what should be blamed for the issue and easy methods to repair it. Listed below are two examples of how Cursor may help you be taught alongside the best way:
The difficulty is that rewardQuote is empty on the primary faucet as a result of handleRewardTap() units it, however the sheet is offered instantly. I would like to make sure the quote is ready earlier than exhibiting the sheet.
Mounted the difficulty! The issue was that showReward = true was being set instantly after rewardQuote, however SwiftUI’s sheet presentation can occur earlier than the state replace is totally processed.
Use Cursor extra effectively
Cursor is a good instrument however there are some methods to make it extra environment friendly.
Let’s assume code fails or it doesn’t execute accurately. If you realize the problematic half, spotlight that part and add to the chat. It undoubtedly makes it simpler for Cursor to repair downside.
In Brush Tracker, I used to be having an issue when organising notifications. I outlined the issue and requested Cursor to repair it. Cursor instructed me it was mounted however the issue nonetheless existed. Then, from the code adjustments I discovered the place the issue was occurring and added that half to the chat.
Cursor mounted it on the subsequent attempt: The issue is that the onTapGesture is utilized to the Picker, however in SwiftUI, segmented pickers don’t at all times reply nicely to faucet gestures as a result of they’ve their very own inside gesture dealing with. The onChange modifier solely triggers when the choice truly adjustments, not when the identical worth is tapped.
One other factor price mentioning is the “context used” share in Cursor. It routinely captures related context out of your codebase, so that you don’t have to inform it which information to have a look at. However your chat historical past can be included in that context, and generally it accommodates previous issues or irrelevant code.
That further muddle can improve token utilization or make Cursor much less environment friendly. When the context used share will increase, I clear the chat historical past.
Distributing your app within the App Retailer
When you full testing your app utilizing the simulator or a bodily machine (e.g. your personal iPhone), it’s time to distribute your app within the App Retailer in order that others can see (and hopefully use) your app.
It’s not an advanced course of however there are a variety of particulars, which could take lengthy particularly while you’re doing it for the primary time. I discovered a video on YouTube that clearly explains all the course of step-by-step.
After finishing all of the steps, I submitted my app for overview. As soon as it was authorised, I obtained an e-mail from App Retailer Join letting me realize it was prepared for distribution.
I’d wish to level out that I don’t have any affiliation with any of the AI instruments talked about on this article.
Thanks for studying! You’ll be able to take a look at Brush Tracker on the App Retailer. I’d love to listen to from you in case you attempt it or have any suggestions.
