Often as a software developer working in an innovation agency, I have to be able to rapidly prototype an app idea or concept in order to test the idea with our design team and target customers. It helps when the app is connected with a backend serving real data as this allows us to figure out how the concept will actually work in the wild. The dream is to have a backend service with an API and NoSQL style data structure that allows us to change the structure quickly without having to worry about configuring a complex relational database. This is where Google’s Firebase comes to the rescue. As Google states:
Firebase is Google’s mobile platform that helps you quickly develop high-quality apps and grow your business.
Awesome!! In our case, we wanted to quickly develop an IoT application, as part of the application we’d use an iOS app to pick a colour for our IoT connected device to sort out M&Ms. The current colour chosen would be communicated to the device using Firebase’s Firestore database, that scenario worked really well that I decided to do a write up about how you’d create and connect an iOS app to Firebase.
— Installing Firebase through cocoa-pods — Setting up a basic Firebase project — Using basic FireStore interactions
Sheda uses Design, Artificial Intelligence and technology to solve complex problems with an emphasis on delivering solutions that make and accelerate impact and bring about social change.
The best way to think about Firestore is like a big editable JSON file in the cloud. It is a NoSQL database that is server-less so its perfect for rapid prototyping because once you are connected to it there is no more set up needed.
And that's it. It’s really that easy to create a server-less database on the firebase.
To showcase how you could use an iOS app with Firebase, I created a pretty basic little app just for sending and receiving data from Firebase that looks a little something like this:
It’s a contrived example with a segment control (A horizontal control made of multiple segments. Each segment has its own function) and a Table View to display some data. I’ll walk you through how I set up all of the elements in the view controller.
To get started with Firebase we must first import Firebase at the top of the file.
It will get the index of the currently selected segment as an int
The index corresponds to a specific location in an array of colours, it gets the current colour index and saves this in Firebase. We store the currently selected colour setting in a document “device1” which is in a Firebase collection of “settings” (The assumption is we pull the current colour setting data from on an IoT device based on the device name)
We also have hooks in case the transaction fails, we print why it failed and deal with the error.
Next, we can set up a listener to subscribe to and listen for when there is an update to data related to “device1”.
Calls the FireStore collection “settings” and document “device1” to listen for any updates
Checks if there’s an error retrieving data
If data is empty send error
Get the current colour and status data
Set the data of the component with the colour and status data
This setup will give us real-time updates when running:
As you can see from the gif, we are getting real-time updates of the current status. I know it just looks like the status display is just linked to the segment selector, but what’s actually happening is data is being sent from the app to our Firebase backend so when the status changes the label is updated in real time. Next up we will go through how to configure the app for real-time updates of ordered data. In this case, we’ll be sending messages and displaying them in chronological order with the latest first.
For this, we will use a basic UITableView, a UITextField, and a UIButton and create a very simple real-time messaging system.