SwiftUI + MVVM + Xcode 12
SwiftUI | Easy To-Do List With Firebase
Learn how to create a To-Do List with the Firebase Firestore backend to have realtime updates
Difficulty: Beginner | Easy | Normal | Challenging
Environment : Xcode 12, iOS 14, Firebase 7.1.0 & SwiftUI
Create a new project
Open Xcode > App template > Select SwiftUI Interface and Life Cycle > call your project TodoFirebase.
Set up Firebase
Let’s add the Firebase SDK to our project to communicate with the Firebase backend. In order to make this article shorter, I invite you to check out this tutorial first and then get back to this page later:
Once, you have installed the Firebase SDK with Swift Package Manager, head to TodoFirebaseApp.swift and initiate Firebase as followed:
Run your app and if you see the Firebase reporting in the console, you are good to go!
Build the user interface
Let’s head to our ContentView.swiftand add a button and a TextView at the bottom of our View using ToolBar. Replace the current ContentView struct with the following:
We already have our design implemented, pretty fast in SwiftUI right ? Now let’s communicate to our firebase backend!
Read Firebase documents
Now, we will add the listener to fetch the data from Firestore and display it into a list using the MVVM design pattern.
First, create a new Swift file and call it Contact then paste the following code:
Then, create another file called ContactViewModeland paste the following code:
We are going to use this code to fetch data from the Firebase collection called contacts in realtime and the collection will contain a document called name witch has an id and a name. Let’s now present these data in our List.
Head back to the ContentView.swift file , let’s connext our View to our ViewModel using the observable protocol. Paste the following code:
Now, replace the current List with the following:
We just change the current List to fetch data from Firestore and present the name in each row, plus it will return a number of row equal to the number of documents present in this Firebase collection.
Of course, the List will be empty since we didn’t added anything yet. let’s add some data on the Firebase console to check if we have been implementing this feature correctly:
Run the App and you will see our friend Donald !
We are good to go with our List that fetching data from Firestore, let now implement the POST feature.
Implement the post feature
Let’s implement the feature to read the entry from our TextField, extract the String and add it under the Firebase collection contacts. let’s do it!
First, head back to the ContactViewModel.swift file and add the following function:
We are going to use this function to add document to the Firebase collection called “contacts”. Now, simply call this function inside the button action that we designed earlier on the ContentView.swift file, replace the print with the following code:
Voilà! Pretty simple, right? we only needed to call the addDocument from the Firebase APIs to our ViewModel and we add this function inside our Button action.
You can now run the application and start filling the textField with names and add them to the list, plus the UI get updated in real time!
Thanks for reading! You can support my work by either buying my book on SwiftUI & Firebase or subscribing to enjoy unlimited access to my articles and all of Medium through my referral link.
