Ad

Friday, September 25, 2020

Firebase Tutorial - Cool things you can do with Firebase 2020-2021

Introduction to Firebase

Firebase has been a part and acted like an extension of the Google Cloud platform after being acquired by Google. All resources are organized into projects, like GCP, Google Cloud (in GCP you will also want to create an organization). Each project can be connect to apps like web apps, iOS or Android. 

You control your Firebase using the Firebase console. It is a browser based admin area. 

The console manage one or many projects. 

Project dashboard shows current app usage and statistics. Quality tab shows project health and is useful for launch apps, optimizing apps for users. Can use to segment user. 

Each data resource in each project is called a collection. Like a collection of data. Read the firebase best practice article for better understanding of firebase projects. 

You can add apps to the firebase project. 

To read firebase firestore documentation first search for the docs, then select the Guides tab, select either Get Started or Beginner Guide on the left side menu. 

When you are ready add a web app to the project. Our post focuses on Firebase SDK for web apps including node code snippets and Python. 

Firebase is modular. There's no need to include a functionality if it is not used. Some functionalities include: Analytics, Authentication, Cloud Storage, Cloud Function, Remote Config (relevant for mobile apps) etc.

What is firebase : Online, in the cloud, real time database backed by Google and integrated into Google Cloud

Firebase works on all platforms

Provides iOS SDK, Android SDK, Web SDK

Getting started developing with Firebase by install the Firebase CLI command line too. 

Full list of language and libraries found on its documentation: full list of SDK https://firebase.google.com/docs/database/rest/start

Language Libraries
Clojure taika by Cloudfuji
Dart IO Client in the official firebase-dart library
Go Firego by Steven Berlanga and Tim Gossett
Go Firebase by Cosmin Nicolaescu and Justin Tulloss
Java firebase4j by Brandon Gresham
Perl Firebase-Perl by Kiran Kumar and JT Smith
PHP firebase-php by kreait
firebase-php by Tamas Kalman
Python Pyrebase by James Childs-Maidment
python-firebase by Özgür Vatansever
python-firebase by Michael Huynh
Ruby firebase-ruby by Oscar Del Ben
BigBertha by Fernand Galiana
rest-firebase by Codementor


Even an admin SDK for administrative access. 

Firebase and google cloud

Can add Firebase to an existing GCP project

Use Firebase API to programmatically manage a firebase project. 

Firebase works Google Analytics and other offerings of the Google Cloud.
Fire Hosting is also available

Firebase in the command line | Firebase CLI | Command line tools

Use firebase CLI to launch hosting configuration. Choose JavaScript as a language unless you know Typescript, which will result in some initial error. Use firebase deploy to deploy your app. Carefully, it really is going live. Follow instruction and use npm to install, once installed, use firebase login to login. Can now access Firebase in the command line. Use firebase init to create a project and select which functionality to use. 

Firebase init create files such as the firebase.json, which can be used to configure your firebase application, write url redirects etc. 


NoSQL, object document store using Firestore
"Following Cloud Firestore's NoSQL data model, you store data in documents that contain fields mapping to values. These documents are stored in collections, which are containers for your documents that you can use to organize your data and build queries. Documents support many different data types, from simple strings and numbers, to complex, nested objects. You can also create subcollections within documents and build hierarchical data structures that scale as your database grows. The Cloud Firestore data model supports whatever data structure works best for your app."

Store hierarchical nested objects easily. 

Firestore is a document store database, data is organized into collections, each collection is a container for one or more documents. Similar to MongoDB. No schema. Yay



Retrieving Data
Quote the documentation:

There are two ways to retrieve data stored in Cloud Firestore. Either of these methods can be used with documents, collections of documents, or the results of queries:

  • Call a method to get the data.
  • Set a listener to receive data-change events.

When you set a listener, Cloud Firestore sends your listener an initial snapshot of the data, and then another snapshot each time the document changes.

In other words, when using get you likely only need and retrieve the data once. Versus receive data-change via snapshot, your application will track firestore database side changes. This is one key difference between static retrieval and real time matching.  Firestore allows to make open socket connection with the database and keep those connections open. 

As of 2019 Firebase supports Collection Group Query allows you to query across collections of documents.  Previously: Each query has to be on a specific collection, its documents or sub collections. It cannot span across multiple collections. Important : to use this feature, must enable Indexing on Collection Group Scope to allow Firestore to index collections as if they are a sub collection of a higher collection. That logic is handled by Firestore you just have to enable it in setting. 

Implement Search Functionality in Firebase Firestore
Use the query function to do SQL like filtering. 
However, Firestore does not natively support search. Instead it recommends using Algolia a search as a service platform. Algolia requires you to upload all your data to Algolia in order to make search possible. Though the term of service seems to say A cannot compete with you, you do have to expose your data to a 3rd party, it is a bit of a tie-down. The plus side is Algolia provides search UI, one click demo generation, so you can implement a prototype fast.  

firebase first need to initialize the firebase instance

using a config variable where the tokens and api keys are stored.
You can get this config variable from your firebase console in the web browser, select add firebase to web app option. 

Cost Saving

Every firebase project corresponds with a GCP project. Be sure to set quota on the GCP project, billing alert, limits. 

To Use Firebase Function First Install Firebase Tools in the Command Line

First check that node is installed before proceeding

npm install -g firebase-tools

Will also want to log into firebase in the command line. firebase login
Initialize the project with : firebase init
Deploy with : firebase deploy. Can deploy to custom domain with an easy DNS verification. Currently there doesn't seem to be native support for minifying js files. You may want to minimize before use the firebase deploy command. Source 22
Conceptually firebase deploy upload the public folder into a Google Storage and allow you to host it as a site via Firebase Hosting.  web.app domain is included.



Select firebase function to initiate a firebase function project

When initializing a firebase function you will be asked to select a few options, configurations: for example, you will want to select the language JavaScript or Typescript. Different dependencies modules and lint will be installed. Each has pros and cons. Strong typed TypeScript may be easier for debugging testing but has a learning curve. 

Firebase Authentication

New user will be added in the Auth table, you can manually add user, enable signin providers such as google. The uid is very important, an unique identifier for the user. This is very useful when want to create web apps that serve user specific contents, which is pretty much a required functionality for all social networks.

Firebase security rules



When to use Firebase Security Rule vs when to use cloud IAM

"For mobile and web client libraries, use Firebase Authentication and Cloud Firestore Security Rules to handle serverless authentication, authorization, and data validation. Learn how to secure your data for the Android, iOS, and Web client libraries with Cloud Firestore Security Rules."

"For server client libraries, use Identity and Access Management (IAM) to manage access to your database. Learn how to secure your data for the Java, Python, Node.js, and Go client libraries with IAM."

-- Firestore documentation

Firebase security rule has a monitoring tab, where it shows rule usage data, allowed, rejected etc.

Source
https://stackoverflow.com/questions/48290160/firebase-hosting-minify-served-files-mod-pagespeed
https://stackoverflow.com/questions/29300824/is-it-possible-to-do-on-the-fly-css-js-minification-combination-for-a-firebase-h

Advanced Emulator

Use an emulator offline on your local machine without invoking the firebase cloud. 

Cache

Can set file cache time, backup store time etc.

4 comments:

  1. I must say, as a lot as I enjoyed reading what you had to say, I couldnt help but lose interest after a while. Its as if you had a wonderful grasp on the subject matter, but you forgot to include your readers. Perhaps you should think about this from far more than one angle. Or maybe you shouldnt generalise so considerably. Its better if you think about what others may have to say instead of just going for a gut reaction to the subject. Think about adjusting your own believed process and giving others who may read this the benefit of the doubt.You might be also Interested in reading something similar I written on best gaming phone under 40000.

    ReplyDelete
  2. Thank you very much for writing such an interesting article on this topic. This has really made me think and I hope to read more. get more info

    ReplyDelete
  3. Yes i am totally agreed with this article and i just want say that this article is very nice and very informative article.I will make sure to be reading your blog more. You made a good point but I can't help but wonder, what about the other side? !!!!!!THANKS!!!!!! go there

    ReplyDelete

React UI, UI UX, Reactstrap React Bootstrap

React UI MATERIAL  Install yarn add @material-ui/icons Reactstrap FORMS. Controlled Forms. Uncontrolled Forms.  Columns, grid