Link Search Menu Expand Document

Backend Configuration

As part of the architecture we have included the use of Firebase as a complement for backend operations. Firebase is a Google Backend-as-a-Service (BaaS) platform that helps you build, improve and grow your applications. It offers a wide range of features, but for the purposes of this project we will focus on the following services:

  • Firebase Authentication (For our user authentication service)
  • Firebase Realtime Database (As realtime database)
  • Cloud Firestore (As database)
  • Cloud Messaging (For Push Notifications)

Warning: Before running the app for the first time, it’s required to first configure a new application from Firebase Console platform.

Below we describe all the steps to configure the Firebase based backend.


Table of contents

  1. Create a Firebase project
    1. Register your app with Firebase (iOS)
    2. Register your app with Firebase (Android)
  2. Firebase Authentication
    1. Apple Sign-in
  3. Firebase Realtime Database
  4. Cloud Firestore
  5. Cloud Messaging (Push Notifications)

Create a Firebase project

Before you can add Firebase to your app, you need to create a Firebase project to connect to your iOS or Android app. Follow these steps or consult the Firebase documentationicon to create a new project.

  1. Sign into Firebaseicon using a Google account.
  2. In the Firebase console, click Add project, then select or enter your Project name
  3. Click Continue.
  4. Click Create project

Firebase automatically provides resources for your project. When the process completes, you’ll be taken to the overview page of your Firebase project.

Register your app with Firebase (iOS)

If you are working with the iOS platform it’s necesary to register a new iOS App in Firebase. From the Project Overview, use the Add app option and then select the iOS icon to open the registration wizard.

Image

In the registration wizard you must fill out the iOS bundle ID of the application (located in the General tab in Xcode), for this project would be: dev.svalbard.app. However for your particular project you must set your own Bundle Identifier, here in Firebase and also in your project from Xcode.

Read more: how to Set up a name for your iOS App.

Image

To finish download the generated configuration file GoogleService-Info.plist and include it into the project from Xcode. This file contains all the information to link our app with the created project, allowing you to access any of the Firebase services.

Warning: This file may be generated with .xml extension, however the project will not recognize this extension so it’s very important to change it to .plist after you download it.

Image

Skip the next steps (we already have done this configuration in the app) and continues until the end of the wizard to finish with the app registration. After that you must setup the Firebase project to allow the authentication, create the databases and activate the push notifications (optional).

Register your app with Firebase (Android)

If you are working with the Android platform it’s necesary to register a new Android App in Firebase. From the Project Overview, use the Add app option and then select the Android icon to open the registration wizard.

Image

In the registration wizard you must fill out the Android package name of the application (specified in the file: /android/app/build.gradle), for this project would be: com.adventuretravelapp. However for your particular project you must set your own applicationId, here in Firebase and also in your project from the /android/app/build.gradle file.

Read more: how to Set up a name for your Android App.

Image

To finish download the generated configuration file google-service.json and add it to the project inside the /android/app/ directory. This file contains all the information to link our app with the created project, allowing you to access any of the Firebase services.

Image

Skip the next steps (we already have done this configuration in the app) and continues until the end of the wizard to finish with the app registration. After that you must setup the Firebase project to allow the authentication, create the databases and activate the push notifications (optional).


Firebase Authentication

Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Apple, Facebook and Twitter, and more. - Firebase Authentication Docsicon

As authentication method we use Email/Password authentication provider, which allows users to register with their email address and password. Firebase Authentication also provide email address verification, password recovery, and email address change primitives. To activate the Email/Password provider go to the Authentication menu of your project in Firebase Consoleicon. Then select the Sign-in method tab and activate the Email/Password provider to start using this authentication method in the app.

Image

Apple Sign-in

For iOS devices you can also activate authentication with Apple Sign-in. With Apple Sign-in users can access the App using their Apple Account and hiding their email address. To activate Apple Sign-in you must go to the Authentication menu of your project in Firebase Consoleicon. Then select the Sign-in method tab and activate the Apple provider to start using this authentication method in the app.

Image

To complete the activation of Apple Sign-in you must go to the Apple Developer Programicon site using your apple developer account and go to the Account menu and then to Certificates, IDs & Profilesicon. Select Identifiers from the menu on the left to add/edit your app identifier.

Image

If your app identifier is not created yet you can click on the plus icon to add your app identifier. In this case you must register an App ID, specify the Bundle ID and check the option for Sign In with Apple. If your App ID already exists select it and go to Sign In with Apple and check it.

Image

In this way you have already configured the Sign in with Apple. If you do not want to include this option you can remove the AppleButton from the LoginScreen screen located in /src/screens/loginScreen/index.js.


Firebase Realtime Database

In some cases you may need to handle data that requires realtime updating to be displayed on different devices at the same time. We have incorporated Firebase Realtime Database (FRD) to store and handle in real time: bookmarks, user information and bookings. When you connect your app to FRD, you’re actually connecting through a WebSocket. WebSockets are much faster than the HTTP protocol, you don’t have to make individual WebSocket calls, because a single socket connection is enough. This allows all your data to be automatically synchronised through that single WebSocket. When you save a change in data, all connected clients receive the updated data almost instantly from the backend.

Image

For this project it’s necessary to create a FRD before running the app for the first time. To do this just go to the Realtime Database menu from Firebase Consoleicon and click on Create Database button. Then select the option Start in test mode, just to start using it, later you must include some validation rules for a better security.

Image

With the introduction of this remote database system we hope you will be able to use it plainly in your project for all the data you need to store and synchronize in realtime.


Cloud Firestore

There are also data that may not require updating in real time and just run the typical CRUD (Create, Read, Update, Delete) operations of a database without any realtime subscription. In this case we also use Cloud Firestore to store application data such as experiences, categories and popular sites, therefore it’s required to create a Firestore database first. To create a Firestore database in your proyect go to the Cloud Firestore menu from Firebase Consoleicon and click on Create Database button. Then select the option Start in test mode, just to start using it, later you must include some validation rules for a better security.

Image


At this point we should have all the backend configuration completed, then we can move on to make other adjustments to the app code and start running it.

Cloud Messaging (Push Notifications)

We have added push notifications to this project, allowing you to send alerts to users using Firebase’s Cloud Messaging service. Firebase Cloud Messaging (FCM) is a cross-platform messaging solution that lets you reliably send messages at no cost. Notifications can be sent directly from Firebase Console or through third party applications integrated with FCM.

The notification service is included by default in Firebase iOS and Android projects, however you need to make a few adjustments before you can start using it. For now we recommend to follow the guide to configure the app and run it for the first time and finally proceed with the settings for Push Notifications.


Copyright © 2020 Svalbard. Distributed by an MIT license.