Well not technically but I went the through process of having an idea for a habit tracking app
Step one: Have the idea for the app (Habit Tracking app)
While I was doing the Angela Yu course and I was creating some of the apps, I was inspired by the idea of making a habit tracking app. Because my thought was all I would have to do is create a button for the user to tap and then update the state-binded variable.
If the button Track was pressed then it would add one to the variable and update the view. If the reset button was tapped then it would reset the variable back to zero as this would imply the user has broken his streak.
From this process I started to imagine what a potential UI could look like. Of course the end goal is always much prettier in your mind than it is in a wireframe. But I thought putting a wireframe together would be great as it would motivate me more to turn the app into a reality.
I did choose to go with SwiftUI mainly because Angela’s course is a bit UIKit heavy, which is great but I know I needed to keep on sharpening and refreshing my SwiftUI skills set. I also saw a lot of people tweeting about the new updates for SwiftUI.
Step Two: Open XCode and Start Building
So once I started getting into the development side of it. I found that relatively easy because I had defined the logic in my head. There were some implementation issues because are one point I tried to push the variable through a function, until I figured I was over complicating it.
Eventually I was able to put together a very basic UI with all of the key functionality I needed.
I was pretty happy with how it turned out, especially when I installed it on a device. One of the things I really love about iOS development is being able to install the app on a device and just keep on playing around with it.
Here is a screenshot of some of the code I put together to create the simple Habit Tracker UI. I rebuilt it multiple times to make the code cleaner and easier to understand.
There are definitely some features I would like to add. The first thing I noticed when I opened the app on a device was the lack of elements on dark mode and I realised I had put everything together on Simulator light mode. But that is a great takeaway to make sure whenever I am working on UI make sure to test on various displays.
Step Three: Design and Implement the Launch Screen Logo
Another thing I played around with today was the launch screen file. I designed a simple logo and embedded it within the info.plist file. It was a nice experiment, and seemed to work quite well apart from the white logo background when I was testing the app in dark mode. But it was an exciting part of my App Development journey.
Thanks again for reading :)
