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
The first step in creating the application is to set up a basic Xcode single page iOS app. For this you will need to have Xcode installed which you can find how to do here:
Once you have Xcode installed you can now begin creating a new project.
Then select Single Page Application and give the project a name.
This will create a blank application that we will now install firebase into.
Using Ruby Gems install CocoaPods:
Then CD into your project directory and run pod init:
This will create a new Podfile, inside we will declare our project dependencies.
Then proceed to make sure that XCode is closed and run:
You now can open the project, **MAKE SURE** that you access the project via .xcworkspace NOT .xcodeproj
This is all that is needed to set up a basic Xcode project next we will set up a project in Firebase.
To get started we need to go to:
To create a new Firebase Project.
This will then prompt you to create a project name, accept terms and conditions, and to select the cloud zone.
Next, we get started with setting up an iOS app in firebase.
This will take you to a setup page that will ask you for you iOS bundle ID this can be found in the Xcode project:
Paste the bundle id into the Firebase setup page.
This will then prompt you to download a .plist file which should be moved to the root of your Xcode project.
Finally, you will be prompted to add a few lines of code in your application delegate.
Once you’ve done that, run the app in XCode and you should have it all set up.
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.
First, create the database.
During creation make sure you select test-mode (you’ll want to make sure you change the access rules if you plan on making anything public or storing anything private see the Firebase Database security docs for more info.
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.
Then create a database reference.
using the onChange hook function for the segment control, I added a little bit of code:
This does a couple of things:
Next, we can set up a listener to subscribe to and listen for when there is an update to data related to “device1”.
This does as follows:
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.
Our data for this will look like:
Next, let’s implement listening for and sending a message via FireStore:
Phew, that was a lot.
Now, when we run this e should be able to see messages in real-time via the table view!
A full version of this project can be found in this repo:
You can use this example to build a more complex IoT system with messaging and displaying data in an interesting way. Have a look at more advanced queries you can use:
However, for getting started and creating proof of concepts with Firebase leveraging this example might be the way to go.
I use this template at Sheda to create a simple IoT device to sort M&Ms with d an iOS app to pick the colour of M&M to be sorted. You can have a read of how did this below: