SwiftUI | fetch data from Firebase Realtime Database
Learn how to read data from Firebase Realtime database
Difficulty: Beginner | Easy | Normal | Challenging
Environment : Xcode 13, iOS 15, MVVM, Firebase & SwiftUI
Github repository at the the end of the tutorial
Introduction
When looking forFirebase tutorials, we often found articles related to Firestore or the authentication SDK. It is forgetting about their realtime database that makes it easy to import our data with a JSON file.
In this tutorial, we are going to import a JSON containing a list of birds and read it using the Firebase SDK, let’s get started!
Create a new project
Go to Xcode > Create a new project > SwiftUI interface & lifecycle > Name it Bird
Add the Firebase SDK to your project
If you don’t know how to add Firebase to your project, please, check out my article below and come back here:
Make sure to add the package FirebaseDatabase, FirebaseDatabaseSwift during the process.
Set up Firebase Realtime Database
Go to your Firebase Console, in the Realtime Database section, set up the database so it is ready to receive data.
Import data to Firebase
I prepared a small JSON file so we have some data to read, download the bird.json file from the following URL:
And, import it with the left icon inside Firebase > import JSON
You should now have a JSON tree inside your database, we can now start coding!
Important note: it is possible that your GoogleService-info.plist file doesn’t contains the database URL related to the Realtime Database you just created. You application will not be able to connect to the database.
How to fix it?
Simply go to project setting, under SDK setup and configuration, download GoogleService-info.plist again, delete the old one and drag the new one to your project folder, it should now contains an entry DATABASE_URL of type String with the correct URL. You are good to go!
Let’s create the Model
First things first, we are going to create our Model, go ahead and create a new file, call it Bird, then, paste the model below:
Create the View Model to fetch data
Now that we have our Model, we can create the View Model where we are going to connect with Realtime Database and fetch the data.
Create a new Swift file, call it BirdViewModel and paste in the following code:
Little explanation here:
- First, we started by importing the Firebase framework to access their APIs.
- Then, with the Published variable we made a reference to the Model we created earlier. Then, we created a database reference which is a String such as follow: “birds”. make sure that it matches what you have in your Realtime Database console, otherwise it won’t display anything.
- We then implemented a function to read the JSON file hold by Firebase, we have a snapshot of the data and we are encoding/decoding the JSON that it holds, also we are printing the error in case there are any.
- Finally, we have a function to stop listening to the database so it doesn’t create a memory retainer which can cause a crash later in your application.
Let’s build the user interface!
Now that we have successfully created a Model and a View Model connected to Firebase realtime Database, we can create a user interface and display these data, it is going to be a simple list containing a text and an image.
Head to the ContentView.swift file and let’s observe our View Model such as follow:
Great, now we are able to fetch data from Firebase and inform the UI accordingly. It’s now to build our list containing image and text.
Add the following list inside the body variable:
Great, now that we have our list UI ready, handling also the user interface in case the images are slow to download. we can download our data, simply using the .onAppear modifier on our list and the .onDisappear to stop receiving update from the database.
Run your application
Congratulation! You can now run your application and start receiving data from Firebase. In your simulator, the list will appear with a progress spinner for the images while there are being downloaded.
I’m always happy to have a chat and collaborate at hello@sullivandecarli.com. Consider subscribing to enjoy unlimited access to my articles and all of Medium through my referral link.
