Building a To-Do App in Swift — Part 1
Author: Mary Paskhaver
Want to keep track of your homework, workouts, or groceries? You’ll need a list. Want to learn programming? Then why not build a to-do list app yourself?
I’ll walk you through it every step of the way. No prior coding experience is necessary.
Let’s get into it.
Step 1: Get the Necessities
To build this app, you’ll need to download Xcode. This is the environment where you’ll be coding the app and testing it out on different devices.
Mac users can download Xcode from the Mac App Store.
For Windows users, it’s a little more complicated, since Xcode is built for Apple devices. If you want to download it, you’ll need to create some sort of virtual machine on your computer to do so. This tutorial is a good place to start.
Step 2: Create a New Xcode Project
When you open Xcode for the first time, you’ll be prompted to create a new project with this screen. Create a new project.
Then select that you want to build an app for iOS.
After that, you’ll be prompted to pick a name (I chose List) and organization identifier — that’s just an internal identifier; you don’t need to be part of an organization — for your app. You can choose whatever names you want, but make sure your settings match those in the following picture. You do not need a Team, but you can create an account with your Apple ID if you wish.
Great! Now you can pick a location to create this project in and get to work on it. You don’t have to create a Git repository to track your file changes, but if you want to learn how to do it, go ahead. For this tutorial, I’m just going to focus on nothing but Swift and Xcode basics.
Step 3: Set Up the User Interface
What are the absolute basic things we need to make a list app?
- A structure for storing our list items. In Swift, this is a UITableView.
- A plus button to add items.
So let’s make that part of our app’s user interface. Select Main in the left sidebar. This will take you to your Main.storyboard file, which is a visual and programmatic representation of your app.
Notice how the current “iPhone representation,” or UIViewController, is blank? It has no buttons, tables, or anything? That isn’t really helpful, so delete it. Now hold CMD + Shift + L and drag a Table View Controller to Main.storyboard.
A Table View Controller has a lot of default functionality, like a UITableView, that will help us get started faster. See how it already has prototype cells for us? Just make sure you set this new view controller to be the Initial View Controller. This will let Xcode know which screen to start your app on. To do this, select the Attributes inspector in the right sidebar, then check Is Initial View Controller, like so:
Excellent. So we’ve got a table for storing to-dos. But how do we add a button for adding to-dos? First, embed the current Table View Controller selected in a Navigation Controller. This will allow us to put buttons at the top of our Table View Controller.
Now do CMD + Shift + L again and drag a Bar Button Item to the top right of your Table View Controller. In the Attributes inspector for the button, set System Item to Add.
Awesome, everything we need has been added now. Let’s see how our app looks like on an iPhone. Click this List > My Mac (or whatever this might say) in Xcode and select a device to run the app on.
I recommend running on the same device your storyboard uses. In this case, I have iPhone 11 set for both the Storyboard and the simulator, so I can run the app now by pressing the large triangle at the top of Xcode and not worry about anything being out of place.
Tada! Eugh. There’s nothing there. Don’t worry! That’s perfectly normal, since our UITableView isn’t set up and has no cells in it to display.
Which begs the question: how do we add elements to it?
That’ll be a question I address in part 2 of this series.
