Skip to main content

How to set up firebase

How to set up firebase feature graphic

Contents

I. What is Firebase?
II. Key features of Firebase
III. How much does it cost to use Firebase
IV. How to create a new Firebase project
V. Add an android app to firebase project
VI. How to get Firebase project ID, app ID and web API
VII. How to add an android app to Firebase project
VIII. How to set up Firebase storage
IX. How to set up Firebase DB
X. Conclusion


I. What is firebase

Firebase is a Google owned platform designed to help developers make, manage and scale up their mobile and web applications.

II. Key features of Firebase

Firebase comes with a number of useful features. These include:

• Authentication

Firebase auth allows you to verify the identity of each of your app's users. It currently supports the following authentication methods:


Email/Password


Phone

Google

Play Games

Game Center

Facebook

Twitter

GitHub

Yahoo

Microsoft

Apple

Anonymous


• Database

Firebase database allows you to store and share data between users in real time. 

• Storage

This allows the storage of user generated content such as documents, audio, image and video files.

• Hosting

Firebase hosting allows users to securely store data and make it accessible for viewing or sharing over the internet

• Machine learning

• Quality performance and measurement tools

• Analytics

• Growth tools



III. How much does it cost to use firebase?

Firebase is free to use for small applications but it also comes with the option to upgrade to a paid plan as your app grows.



IV. How to create a new firebase project

Visit the firebase website

If you already have an account you can login. If you do not have an account you can create a new account and sign up. After signing in, you will be taken to the screen below.

Firebase homescreen


Click the "Get started" button.


Firebase welcome screen


Click 'Create a project'


Naming your new firebase project


Name your project and accept the firebase terms by clicking the checkbox. In the project above I named my project 'My lovely app's


Select google analytics account


Choose a google analytics account to use with firebase. If you do not have a Google Analytics account then you can create one. 


Enable google Analytics


Enable Google Analytics for your project by turning on the switch and click 'continue'. A loading screen will be displayed. After it's done loading it will look as shown below. Click 'continue'.


Project created screen





V. How to add an android app to firebase project

Step 1


Our new project's homescreen will look as shown below. The next step is to connect our app to firebase. If you're creating your app on an android platform click the android icon as shown below.


Add android app to firebase


Step 2

You will be taken to the screen below. Choose a name for your android package. Packages are usually named in the following format:

 com.my.app 

I named my app com.my.lovely app as shown below. I gave it the nickname, social media app. Click 'Register app'


Register new app in firebase



The package name should be similar to the one in your Android Studio, app Inventor or Sketchware project.


If you're using Sketchware and are not sure where to find your package name, go to your Sketchware home screen. Open the project and click 'Advanced settings' as shown below.  You can copy and edit the package name here. 


Sketchware new project screen


Step 3

If you are using a platform like Android studio to create your app you can download the config file.

If you're using Sketchware you will not need this. So simply click 'next'.


Download google services json


Step 4

Scroll down to the page and click next, as shown below.


Fb setup step 4


Step 5

The following step will ask you to run your app to verify installation. We can skip this step for now. So click  'Skip this step' as shown below.


Verify app screen


You will be taken back to th project's home screen. You will notice that it says you now have '1 app' as shown below.





VI. How to get Firebase Project ID, Web API and App ID


We however want to link our app. So you will need the following details:
• Project ID
• Project name
• Web API key
• Storage bucket
 
So the following steps will show how to get your firebase project name, ID, web API key and storage bucket details.


Click the icon next to project overview settings as shown below

Open project options


A new menu similar to the one below will appear. Click 'Project settings'


Open project settings


Your project name, project ID and web API key will be visible. You can highlight and copy them somewhere.


View project id and web api key


If you scroll down on your screen, you will see the web API key as shown below.


View app ID







VII. How to setup Firebase storage


Navigate to the 'Develop' option on your menu as shown below


View develop options


Click the firebase storage option as shown below.



Select storage from menu


The screen below will appear. Click 'Next'


Set rules for cloud storage


Choose your storage location. I simply chose the default item. Click 'Done' to proceed


Set cloud storage location


You will be taken to the following screen. The firebase storage bucket will now be visible, as shown below.


Firebase storage bucket url







VIII. How to set up Firebase authentication

We will need to choose an authentication method for our app. The most common authentication method is email authentication that is the one we will enable in this tutorial. Sketchware also comes with simple Email authentication. 


To get started, navigate to the 'Develop' option on your menu. Click 'Authentication'. After your authentication options appear, click 'Set up sign-in method' as shown below.


Set up sign in method


Choose the 'Email/Password' option as shown below


Select email password auth


Click the switch to enable Email/Password then save as shown below.


Enable email auth in firebase


The Email/Password authentication method is now enabled as shown below. You can enable any other preferred authentication method using the same method.


Email password enabled





IX. How to set up firebase Database

To get started with the creation of your firebase database, navigate to the 'Realtime database option on the main menu. This is highlighted in the image below.

Firebase realtime database menu option


The screen show in the image below will. By default, the 'Start in locked mode'option will be checked. This means that no one can post to your database or view its contents. For us to be able to use our database, select the 'Start in Test Mode'option and then click 'Enable'.


Change security rules for realtime database


Thats it, you have successfully created yout realtime database. Your screen should now look like the one in the screen below.


New firebase realtime database project





X. Conclusion

Firebase provides an easy way to manage the the backend end of your app. This includes handling the  authentication, database and storage for your mobile or web application. 

Firebase also provides secure cloud storage and you can rest easy knowing your data is encrypted.

When starting as a developer, you can take advantage of Firebase's free tier to create and test out your new apps. You can even upgrade to a paid version as your app grows and develops a new set of needs.

Labels:

Comments

Post a Comment

Popular posts from this blog

Hip hop and RnB songs to apologize to your partner

Love is a beautiful thing, but it often goes wrong. This often leads to pain, suffering and sorrow.  Being imperfect beings, hearts tend to get broken all the time regardless how hard we may try to avoid it.  The heartbreak is often inadvertent but at times we find ourselves in the wrong. An oversight, a word unsaid or even a lapse in our judgement can cause our loved ones harm. This doesn't always have to be the end though. Oftentimes, relationships can be mended by simply uttering three simple words: "I AM SORRY". This article is a collection of some of my favourite 'I'm sorry' songs. I hope you'll enjoy these apology songs, but more importantly, I hope you will get a few quotables and some wisdom nuggets from them.  The best apology however, is to change behaviour (got that from a Jay Z interview) so as you apologize, please remember that it was your actions that hurt them. The best apology is one which involves you not repeating those same mistakes aga...
Post a Comment
Read more

How to easily create background notifications in Sketchware(original)

How to easily create background notifications in Sketchware(original) One of the keys to building a successful app is to find mechanisms that will keep your users engaged. You can do this by using background notifications. This tutorial will show you how to do that in Sketchware. We will cover: 1. How to create notifications in Sketchware 2. How to show these notifications even when the app is closed.
7 comments
Read more

Php date: How to get the first and last day of the week

In this tutorial, I'll show you how to get the first and last day of the week in php. By default, in PHP the week runs from Monday to Sunday. However we'll cover two methods to get the first and last day for both those who consider Sunday or Monday as their first day of the week. We will be using 2 functions to achieve this: date() strtotime() We will use a combination of these two functions and store the result in a variable.  How to get the first day of the week If you want to get Sunday, use this method: $firstday = date('l Y-m-d', strtotime("sunday -1 week")); echo $firstday; If you want to get the date for Monday, this current week, use this method: $monday = date('l Y-m-d', strtotime("monday -1 week ")); echo $monday; How to get the last day of the week The following code will give you Saturday as the last day of the current week. $lastday = date('l Y-m-d', strtotime("saturday 0 week")); echo $last...
Post a Comment
Read more