Introduction

About the final app

In this series I will share my experience building a fully functional app, listed on the App Store. This app is an expense tracker called Expenny Link to App Store. The following features are included:

• read & store data from Core Data
• use form controls like: TextField, DatePicker and Picker
• display data as Segmented (Grouped) list with filter
• use form controls with bindings to save new item and to edit existing items
• use of sheet and navigation stack

Future plans:

• Support for different currencies
• Add charts to visualise historical data
• Add ML to predict certain user actions

What I needed?

• Figma to design the logo and wireframes for the app
• xcode installed on my macbook
• Developer license to ship the app and to test on real devices
• an iPhone to test

Starting

Getting to know the platform and the framework

Before I had any idea what I will build, I was curious about iOS design updates and I watched some Videos form Apple's WWDC. These recordings have high quality and you can find references in the developer documentation. For building this app, the following videos were specially useful:

• What's new in SwiftUI
• Hello Swift Charts (in the end I skipped charts from the app for now)
• The SwiftUI cookbook for navigation
• Bring Core Data concurrency to Swift and SwiftUI

Coming up with an idea

The WWDC videos inspired me to build something. I did not wanted to do customer research for that and I did not wanted to build the next Instagram or Facebook. Just something small. I knew my partner wanted to track her expenses. We wanted to know how much we spend on restaurants, petrol, etc.

If you struggle to come up with an idea, you can reach out to me, happy to help.

Next, I opened Figma and visualised what I am going to build:

This exercise helped me to come up with the following list of user features:

• Enter expense amount (for now without currency)
• Set expense date (today's date preselected)
• Choose expense category
• Manage categories
• View expenses per month, per category
• Edit and delete expenses

Playing with SwiftUI

I am a beginner in the world of Swift or SwiftUI development. So I created many small projects where I built small parts of the app.

I started with the form, where the user enters the expense, then I moved to displaying the list of expenses and lastly to modify the list, adding categories, etc.

In general, when I know beforehand what features I will build, I prepare proof of concepts for them in separation. This way is easier to play with edge cases to see if it would even work.

To build the new expense form, I experimented with TextField to learn:

• How to display a full width TextField?
• How to limit to enter only numbers?
• How to show the keyboard when the user arrives on the page?
• How to hide the keyboard?

In the next post of this series I will share my answers to these questions and additionally how I built the entire new expense form.