This content originally appeared on DEV Community and was authored by Gurshehzad Singh
What is Firebase?
Firebase is a mobile and web application development platform, backed by Google, to help developers deliver richer app experiences. Firebase manages its own infrastructure with a nice set of tools to simplify the workflow of the developer by providing them with development kits and an online dashboard. These toolkits are interconnected, scalable and integrable with third party software to overcome complex challenges with standard building blocks.
History of Firebase:
Back in 2011, before Firebase was Firebase, it was a startup called Envolve. As Envolve, it provided developers with an API that enabled the integration of online chat functionality into their website. What’s interesting is that people used Envolve to pass application data that was more than just chat messages. Developers were using Envolve to sync application data such as a game state in real time across their users. This led the founders of Envolve, James Tamplin and Andrew Lee, to separate the chat system and the real-time architecture. In April 2012, Firebase was created as a separate company that provided Backend-as-a-Service with real-time functionality. After it was acquired by Google in 2014, Firebase rapidly evolved into the multifunctional behemoth of a mobile and web platform that it is today.
Highlights and Challenges:
Highlights -
1) JSON (JavaScript Object Notation) storage means no barrier between data and objects.
2) Simple serialization of app state.
3) 3-way data binding via Angularfire.
4) Easy access to data, files, auth, and more.
5) No server infrastructure needed to power apps with data.
6) Massive storage size potential.
7) Real time, highly secure and serverless.
Challenges -
1) Not widely used or battle tested for Enterprises. This Technology is still new, so it might take a while to be used for Enterprises.
2) Very limited querying and indexing. You might have to organize everything yourself.
3) No aggregation and no Map Reduce. Map Reduce is available for other JSON data stores. It may yet be coming!
Build better Apps using Firebase
Firebase lets you build more powerful, secure and scalable apps, using world-class infrastructure using:
1) Cloud Firestore : It is a flexible, scalable database for mobile, web, and server development from Firebase and Google Cloud Platform. It is a NoSQL document database that lets you easily store, sync, and query data for your mobile and web apps — at a global scale. It's supporting for Android, iOS and Web Platform.
2) ML Kit : It is a mobile SDK that brings Google’s machine learning expertise to Android and iOS apps in a powerful yet easy-to-use package. Whether you’re new or experienced in machine learning, you can implement the functionality you need in just a few lines of code.
3) Cloud Functions : For Firebase, it lets you automatically run backend code in response to events triggered by Firebase features and HTTPS requests. Your code is stored in Google’s cloud and runs in a managed environment. There’s no need to manage and scale your own servers. It’s supporting for Android, iOS, C++, Unity and Web Platform.
4) Hosting : It is production-grade web content hosting for developers. With a single command, you can quickly deploy web apps and serve both static and dynamic content to a global CDN (content delivery network). You can also pair Firebase Hosting with Cloud Functions to build and host microservices on Firebase. It’s supporting only Web Platform.
5) Cloud Storages : It is for object storage service built for Google scale. The Firebase SDKs for Cloud Storage add Google security to file uploads and downloads for your Firebase apps, regardless of network quality. You can use our SDKs to store images, audio, video, or other user-generated content. On the server, you can use Google Cloud Storage, to access the same files. It’s supporting for Android, iOS, C++, Unity and Web Platform.
Improving App Quality using Firebase
Firebase gives you insights into app performance and stability, so you can channel your resources effectively using:
1) Crashlytics : It is a lightweight, real-time crash reporter that helps you track, prioritize, and fix stability issues that erode your app quality. Crashlytics saves you troubleshooting time by intelligently grouping crashes and highlighting the circumstances that lead up to them. It’s supporting for Android and iOS Platform.
2) Performance Monitoring : It is a service that helps you to gain insight into the performance characteristics of your iOS and Android apps. You use the Performance Monitoring SDK to collect performance data from your app, and then review and analyze that data in the Firebase console. Performance Monitoring helps you to understand where and when the performance of your app can be improved so that you can use that information to fix performance issues. It’s supporting for Android and iOS Platform.
3) Test Labs : It is a cloud-based app-testing infrastructure. It provides a large number of mobile test devices to help you test your apps. It’s supporting for Android and iOS Platform.
So, now that you are introduced with Firebase, here are some key points:
1) Firebase is Google's mobile application development platform.
2) You're going to save tons of time and money using Firebase products instead of building them yourself.
3) You can use all of it, parts of it, or a single piece of it. All those parts work together like a well oiled engine and help you achieve your goal!
Step by Step Guide for installing Firebase in your project
So we have learned about how the Firebase development services help us to develop any web app or any android app. Now we will create a simple demo app by using these services. First we have to make an account on the Firebase platform and make a basic project. Access console.firebase.google.com and sign in with your google account - the homepage looks as below:
Here you can see your existing firebase project or you can create the new firebase app by clicking on the Add Project. Let's move forward for creating the new project.
This is the first step you will see after clicking on the add project option. Enter the name for your project. Here I used app-seed as my project name. Keep note that whenever you create a new firebase app, it also creates a Google-Cloud-Project. You can use this project ID to use the services of the google cloud just like for App engine, Cloud tasks and for other services. Please keep in mind that the Project ID is a globally unique identifier and cannot be changed in future. Here my project id is app-seed-de1a5.
The second step is to set Google Analytics for your Firebase project. The analytics services help us to see how the App users are using our app and make the future prediction based on the user's previous activity and much more. As we are setting a simple app, we can disable this one and click on the Create Project option.
This step might take a while. After creating the project click on continue and it will take you to the homepage of the Firebase app.
Congratulations, you have successfully created your first firebase app. You see how easy it was, just a few clicks and everything is ready for your database, hosting, authentication and all other things. The following are the development services and the top 5 are mostly used for the beginner projects.
Let’s host our website on the firebase. For this we need to install the firebase CLI (firebase-tools) npm package in your local machine. Lets install it, you must have node and NVM installed in your machine for this to work. If your local machine does not have a node installed, install it first and then run this command.
$ npm i -g firebase-tools
The next step after installing firebase CLI is to run the “firebases login” command so that our CLI can know about our firebase projects. Run firebase login in the terminal and it will ask you to open your default browser and ask for the permissions of your project. Allow firebase CLI that access.
After login with the firebase in the terminal, we need to connect our firebase app with the firebase project. So make a new folder anywhere and inside that project run the firebase init command.
$ firebase init
Type Y to proceed further. And select the Hosting by up/down arrow key and press space to select the option and press enter to confirm.
Now it shows all your firebase projects and selects your newly created project. As in our case it was the first one.
Now it asks for the directory which you want to select as the hosting directory. This is where you keep all your HTML files and the content inside this folder will be deployed on the hosting. In the firebase ecosystem we will use the public folder as the hosting directory . Then it asks for the main file that will be opened when someone visits your app . Select Yes to rewrite all URLs to index.html. That’s the last step to configure the firebase project.
Now check your folder where you ran the above commands. The firebase CLI had made some files and folders. As we have selected the Hosting, it has created the public folder. If we had selected the firebase-function as the option then the folder name would be the functions.
Now we have know the purpose of the public folder. Lets know about the other three files.
The resource file .firebaseserc, is very helpful when you have multiple projects with the same codebase. For example, suppose one is your live app and the other is your testing app then you can do the configuration for both projects inside this file.
{
"projects": {
"production": "my-production-project-id",
"testing": "my-staging-project-id"
}
}
You can easily switch between the projects by using the firebase use command. For example, if I have to use the testing app I can switch to the testing project by using “firebase use testing” and now whatever I do to the hosting deployment or function deployment, it refers to the testing project.
Another important file is firebase.json that contains the configuration path of the folder that we will use to deploy the hosting or the function, database rules and much more. The below is what the firebase.json file contains.
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Change the default index.html file and write basic html code or copy the below one.
<html>
<head>
<title>
learn with app seed
</title>
</head>
<body>
<h1>we are learning the firebase with app-seed</h1>
</body>
</html>
Here firebase deploy is the command and --only hosting is used to deploy the hosting only. We can use only the “firebase deploy” command to deploy hosting, functions, database rules at one time . To deploy the firebase functions we use the command:
$ firebase deploy --only functions
As soon as the deployment is finished, it give you a unique URL. Here in our case, it is https://app-seed-de1a5.web.app. Copy your URL into the browser and open it.
Congratulations! You just deployed this simple app. Now go to the firebase console and open the hosting tab. Here you can see your hosting URL and the deployment history.
Thanks for reading!
This content originally appeared on DEV Community and was authored by Gurshehzad Singh
Gurshehzad Singh | Sciencx (2021-06-07T19:22:31+00:00) Working with Firebase – Introduction and Step By Step Guide. Retrieved from https://www.scien.cx/2021/06/07/working-with-firebase-introduction-and-step-by-step-guide/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.