I'm going to dive into the process of making a native SwiftUI app. This post will outline the purpose of the app and the first building blocks before starting the code. This is an important part of the process because it forms a vision of what the final product might look like and how to get there.
The app that I'll be making is a Habit/Quality tracking app. I've wanted to make a simple app like this for while. As I've used other alternatives, I noticed that there are a few required features that I haven't been able to find.
So here I've noted some of those requirements:
- Track goals I want to work on. Including qualitative and quantitative.
- Categorize goals to allow for organization
- Offline first. I won't share my goal data unless I opt in
- Optimized to only track a few habits
- Quick and satisfying to use.
- Simple enough for a kid to use.
- Useful for individuals and families
And lastly, in this case the audience for this app is myself and my close family and friends. Though it's possible I'll eventually cast a wider net, I'll be selective about the audience I'm building for, for now.
With those requirements in mind I can start planning different aspects of the app!
To start off, I'm not a designer by any means. Though I am aware of basic native app design patterns. So I hope to keep it simple but at the same time include some helpful visual features. I wanted to start with a basic design just to get an idea of what the app could look like and how it might function. I approached this mostly by brainstorming and looking at any source of inspiration. This included looking at other apps, books, and other sources. By no means is any of permanent and I actually expect it to change as I start building it.
I find that using a non restrictive medium like a pencil and piece of paper, or in this case an iPad and Notability, allows me to freely design without commitment.
Below are some sketches I drew while considering what this app could look like
I took a similar approach in designing the data model. For those unfamiliar, the data model is simply a model of the data within the app. Depending on the complexity of the app or service, the data model may consist of various entities. In this case, the app will only start out with a few entities and relations. Similar to the app design, this will probably change as we realize new requirements. There are different formal ways of representing the data model but in this case we will keep it simple and show entities/concepts, their attributes and their relations.
Below is the quick and dirty data model I sketched out.
As you can see the model is fairly simple, We want a way of representing a user, their goals and all the attributes related to a goal, including, it's type, category, frequency and history.
This will be useful to refer back to as I am implementing the the data model in the frontend and backend of the app.
Tools and choices
As I mentioned before there are a few requirements I have for this app. These are the priority when choosing tools for the app. When those priorities are satisfied, then we can reach for tools we are more comfortable with.
In this case the requirements are easily satisfied with most tools. And since the purpose of this series is to cover the use of some specific tools. I'll be sticking to those.
In this case here are the technical tools I'm using and some of their benefits.
- SwiftUI. Fastest way to build native iOS, iPadOS and MacOS apps.
- GraphQL. Simplifies front end code, allows the frontend to only get what is needed from the server.
- Hasura a server easily configured to expose a GraphQL endpoint.
I'll be covering those tools as I start using them. In the next post I'll be covering the process of setting up the environment for the server, the frontend, and setting up a connection between the two.
I hope you've found this post useful. If you have any questions or comments, please feel free to reach out!
Get In Touch
or via telegram