How Google’s FireBase can be used to build a completely functional iOS app?

Hopefully by the end of this tutorial, you will feel like you can build your app on your own without depending on backend web services.

Technical side:

Google’s Firebase provides services like Analytics and crashlytics. But most of us didn’t know that firebase also provides a real-time database support, which can be scaled as per our requirement.

In this article, am gonna show you how you can,

1. Use Firebase database as your backend for iOS mobile app,
2. which can allow user to register themselves,
3. Handle, “sending verification mail” to the user and check the verification status.
4. save the user profile to firebase database,
5. Update the user profile with profile picture,
6. display the available items by fetching it from Firebase database,
7. select list of items with desirable quantity and place an order.

Firebase Database:

To make the reader easier to understand i’m trying to make this as simple as possible.

1. Firebase Database is nothing but a huge JSON structure.
2. User can Query/Read/Write any nodes (remember “Table” in SQL database). Here we say it as node.
3. Authentication: Google provides a ready-made authentication system for the developer’s convenience. Will explain later in this article.
4. Storage: Don’t worry about the storage. Google provides Storage facility too and also can be used to upload and download files and images as per our convenience.
5. Push Notifications: Do you think google will leave us without providing push services. Don’t ever worry, google has provided it.

To summarise, If you ever want to build a completely functional mobile app, and you don’t have any source for your backend, then Firebase must be your choice.

So, How to begin with?

The first thing is create an app on the firebase console.
Click on the below link to login and create a new firebase app.

Sign in - Google Accounts

The steps are pretty straight forward., Provide a better name for your project and continue. And finally click on “create project” to create your first firebase project.

Creating firebase project in firebase console.

Once the project is ready, you can view it from the firebase console, like below.

Firebase console with the created app.

Now, it’s time to create your Firebase project’s first component, i.e iOS project.

Click on “iOS” from the firebase console (under your project) and fill out your iOS project’s details.

Adding the iOS component for your app.

After filling out the details, click on “Register app”. Google will create necessary supporting file, that you will have to include it in your iOS project.

Next step is to download the Google-services.plist file.

Save the file in any of the directory, which we will include later in our iOS project.

The next step is to add the firebase SDK into your iOS project.

If you are familiar with using CocoaPods, you can continue this article, else check the below link to know more about how to use Cocoapods., and then continue with the article.

CocoaPods Tutorial for Swift: Getting Started

It’s time to Start working with XCode.

1. Fire Up XCode.
2. Create New Empty project.(of course we will fill it up! PUN intended.😉)
3. After creating your XCode project — close it. Why? Because we need to add our Firebase SDK through Cocoapods.
4. Open the terminal and move to your project’s root directory.
5. And type “pod init” and then “open podfile”.
6. Now add the required pod dependancies like the below reference. Never mind about the other dependancies. You just need to add only the firebase dependancies to start with.

Your podfile with the required dependancies.

7.Finally, save your podfile and run “pod install”.

Running “pod install” will create “Your-Project.xcworkspace” file, which you will have to use it further.

8. Remember the GoogleServices.plist file which you downloaded from the firebase console, you need it now. Drag the file into your project’s root directory. This is how the contents of the file will look like.

By now, you should have created your firebase console, setup your iOS client with the required SDK’s.

It’s time create some layout for our Login Screen.

Create a new Cocoa Touch Class file and name it as “SignUpViewController” and click create., And design some layouts. Drag two UITextFields and a UIButton and create required references and actions.

First thing: Create the user for our app in firebase database.

import FirebaseAuth into your .swift file and refer below on how to create the user.

Firebase SDK provides dedicated API’s for creating and logging-in users.

These API’s are designed to work asynchronously and provides us the result with the success & failure completion handlers.

As i have mentioned earlier, Firebase will handle sending the verification mail and checking its status.In this else block, once the user is successfully created, we can trigger sending the verification email API on the user object.

Note:

1. “user” is a GoogleAuth object which will be returned in the successful response on login and sign up API’s.
2. FirebaseAuth also provides user to login using their phone number. In such case we can trigger a different API using phone number, and send OTP for that number following the same method.

Similarly, for user login you can follow the below reference.

Once you have successfully created the user, the same can be verified in your firebase console. In the firebase console under authentication tab, the registered user’s list can be seen.

Okay! Successfully created the user and logged in to our app.

So, what’s next.

The DashBoard!

We need display a list of items available in our hotel, so that user can pick their order.

Open firebase console and click on the Realtime DataBase tab, and click “create database”.

Congratulations! You have created your Firebase database, which you can read from your iOS client application.

As i have told you earlier, Firebase Database is a huge JSON structure. Click on the “three dots” on the corner and select “Export Json” option. This will download the empty json structure created for your app.

Note: We can create our own JSON Structure and upload it here, which can then be read from our iOS app client.

Our restaurant provides 4 different categories of items, with many varieties on each category. Every item has their own price, availability status, etc.

So, i have create a json with 4 different categories, under which i have added 10 items each.

Save your JSON file and import it from our firebase console, where you downloaded the file. If you done everything right, your firebase console will look like this.

My json has a “category” node, which is an array of objects. Again every category has an array of items and name of the category.

We are going to read this node from our iOS app. For your better understanding, am showing you how does the “items” object will look like.

This is a sample structure that i have followed for my app., you are free to create the json as per your requirement.

Note: Look at the displayImage key. This is where the Firebase Storage will come into picture. I have added few images for displaying for each item into the firebase console itself, and i have kept a reference in the “items” object.

You are free to group and upload images as per your requirement. Only thing is you will have to read the exact node to get the exact file reference.

Once the image setup and the categories json setup is ready, we can read the json and download images in our iOS app.

Once the user logs-in successfully, call this method to fetch the categories and display it on the dashboard page.

Note:

Look carefully, In this method, we are actually creating a reference to out Firebase Database and provide the path to our “categories” node.

The Firebase Database success response will always be of type SnapShot, which you can decode using Swift Codable features.

This is my swift codable modal structure, which matches the Firebase json categories structure.

In my iOS app UI, i have a PageMenu, which will lists the categories and every page menu has a collection view which will lists the items with the image and the item name details.

On tap of any item, i navigate the user to the description page, where the description of the item will be displayed.

To see it in action, check the below pics.

By now, You should have got the basic idea of how this actually works on real-time.

You have seen how to read a node. In order to write a node, you will follow the similar procedure.

Say for example, user wants to place the order. In this case, we will have to create a node called ”User orders”, under which we will write the order details.

1. You have to get the reference to the Firebase database and append the “node“ name (to get the path), then you have to set the value on that node.

Similarly, for updating the user profile, you have to follow the same thing, except the path and the object.(Obviously)

One thing i must include here is, firebase allows us to upload images to the FireBase Storage using their API’s. It has been designed in such a way that, once the uploaded image is stored in the Firebase Storage, it will return us with the “downloadable URL” as the success response.

It is the developer’s response to refer the downloadable URL and use it accordingly.

This code snippet actually uploads an UIImage object to the Firebase Storage under the specified path, and return us with the downloadable link for that image.

I hope now you have got an overall idea about working with Firebase Database. Once cool thing about firebase i must add here.

Firebase includes a method to observe changes in a Firebase Database node, meaning, the iOS client can observe any changes in the nodes, and update the UI accordingly.

Here, am observing the changes in the “categories” node, and call the fetch categories function in case of any changes.

As i have told you in the beginning, Firebase Database is scalable.

This article is just an introduction for the developers to know about Firebase database. It is totally upto the developers to make complete use of it.

It is just the matter of our imagination, we can make better use of it.

Note: This is how we created a fully functional restaurant app using Firebase as our backend.

The Final demo video of the iOS app:

firebasedemo.mov

I hope now you can relate the title for the article.

Please feel free to ask any doubts on the implementation.

My github bio:

bharathi91 - Overview

email: bharathi91m@gmail.com