Getting started with Firebase on iOS: Part 1

7 min readJun 8, 2018

In this blog post series, I’m going to take us through making a full iOS application, using Firebase. We’ll be making a Lunch Train app, which mimics the functionality of the Slack application. This tutorial is aimed at those fairly new to iOS development, and having never used Firebase before. However I would hope those who are experienced in either can find this useful.

The main features are:

A user can create a “Lunch Train”, choosing a place and a time
A user can join a “Lunch Train”
A user can see the passengers of the “Lunch Train”
A user can be notified when people join their train
A user can be notified when the train is leaving

Throughout this post, I will be using the term “train” to refer to a “Lunch Train”.

In this part, we will get the user authenticated, and setup the Cloud Firestore to have references to different trains.

Set up Firebase

Go to the Firebase console, and log in with your Google account. You should be presented with the Firebase welcome screen, click the ‘Add Project’ button.

Fill in the relevant details for your app, this can be anything as you can edit it later. Once the setup is complete, you will be in the Firebase console.

Select the ‘Add Firebase to your iOS app’ button. This is the step where we now want to know a couple of details from our application. Switch over to Xcode.

Create a new single view app in Xcode, with any name you want. The organisation name and identifier form the first part of the bundle ID, and this value is what you will be entering into the Firebase console.

You should now be presented with the project information screen, take a copy of the ‘Bundle Identifier’. Now go back to your Firebase console, and enter it into the first field of the dialog.

Firebase create iOS project dialog — bundle ID field

Next up, Firebase will provide a GoogleService-Info.plist for you to download. Follow the instructions here and insert it into your project.

Firebase Cocoapod

Firebase is provided as a CocoaPod — make sure you have this installed before progressing to the next step.

From the terminal, navigate to where you have created your project, and initialise the pod spec.

cd Documents/Firebase\ Project

pod init

Now open the Podfile. You can do this by simply running open Podfile from the terminal.

# Uncomment the next line to define a global platform for your project
# platform :ios, ‘9.0’
target ‘Firebase Project’ do
# Comment the next line if you’re not using Swift and don’t want to use dynamic frameworks
use_frameworks!
# Pods for Firebase Project
target ‘Firebase ProjectTests’ do
inherit! :search_paths
# Pods for testing
end
end

Add the line:

pod Firebase/Core

Make sure you save! Then back in the terminal, run pod install. This will go through your Podfile and install any missing dependencies. Once this is complete, close Xcode, and open the newly generated .xcworkspace file. You should see the Pods project within the Xcode project navigator now.

User analytics view in the Firebase Console

Click to the next step in the Firebase dialog, and the code provided to insert into the AppDelegate is provided. Simply import the Pod, and add the configure line.

Once this is complete, when you run the app, it will link up to your Firebase account. You should be able to see the active users value is now at one under the Analytics option.

Authentication

Now we have our app linked to Firebase and our project, we can start the development of our Lunch Train app. We will want a way of identifying users, and for users to be able to have trains associated to them, therefore having a form of authentication makes sense.

Luckily for us, Firebase provides a platform for this. In the console, select “Authentication” in the sidebar menu.

We then want to set up some sign in methods. Firebase offers a range of options for this. However for this project we will just stick to Google & email sign ins for simplicity. Simply click through on the Set up sign up method and enable to two options.

Add Authentication to the app

In order to use Firebase authentication, we can use the pre-made authentication flow, which provides some basic UI and handles the calls for us.

We’ll need two more pods for this:

pod ‘FirebaseUI/Auth'

pod 'FirebaseUI/Google'

Then we want to import these into our ViewController.swift class:

import FirebaseAuthUI

import FirebaseGoogleAuthUI

This allows us to then launch the authentication on start up. Add the viewDidAppear override method to your code, and show the authentication flow if needed:

We also need our ViewController to conform to the Auth delegate.

class ViewController: UIViewController, FUIAuthDelegate {

and then implement the auth UI method:

func authUI(_ authUI: FUIAuth, didSignInWith user: User?, error: Error?) {  // Handle user returning from authenticating
}

Once you’ve signed in, you will be able to open the Firebase console, and see that user account in the authentication section.

Showing some data

Now we have users and a way to authenticate them, we can start to use the Cloud Firestore. Navigate to the database section in the console, and enable the Cloud Firestore. We will start off in “Test Mode”, which allows reading and writing data without authentication. We will dig more into database rules in a future post.

Create a trains collection, and add a few test documents. Select auto-ID and create the owner place time and title fields. Make sure the time field is a timestamp type, all the rest can be string .

Now we have a sample set of data set up, we want to be able to view this in the app. First, add the Firestore pod to the project:

pod 'Firebase/Firestore'

Create a TrainList group within the project, and create the classesTrainListViewController.swift TrainListViewModel.swift and TrainListViewData.swift

We’ll start at the data layer. We want to create a Train data model to map from the data from the Firestore, and we want a way to reference the list of trains shown in the app.

Now we want to use this data, in the view model layer, which is where our business logic for retrieving from the Firestore, and handling the data sits.

For initialising our view controllers with a view model, I used the technique detailed in this blog post https://medium.com/@shanev/view-model-specialized-view-controllers-using-storyboards-in-swift-88169d2b43c7

Finally, we want to create our view controller, with a table view to show the trains in the database:

You can customise how the cells are shown if you wish. With a basic implementation you should get something similar to the screenshot here.

I have also added a ‘Create Train’ button here, but this isn’t required yet, and I will cover this in more detail in the next post.

What you should notice now, is that if you have the app open, and add or delete items in your Firestore, it should be reflected in your app immediately, thanks to the listeners added in the view model.

To note, if there are parts that you wish to see more of and dig into the code, you can find the full repository here:

niamh-power/lunch-train

lunch-train - iOS application using Firebase, mimicking the Lunch Train slack app

github.com

Note this is a more complete version than we have currently at this stage in the series, though you should still find everything you need.

In the next post, we will be looking at some refactoring that we can do to the current code, as well as adding the option to create a train, and join any existing ones. You can find that next post here!

Feel free to comment below or message me on Twitter if you have any questions or thoughts!