Firebase, coding with Javascript - examples. part-1

Balaji Muthukumar — Fri, 11 Dec 2020 14:12:16 +0000

Collection Reference
The collection reference is used to read or write documents or query for the documents that are available in the cloud firestore or db(These document in the cloud can be accessed using for..of method

'''javascript
const fs = require('firebase-admin');
var db = fs.firestore();
const collRef = db.collection('fieldname').doc('fieldname');
let arrayVal = new Array();

// async function to get the data

async function myFunction(){
 let docSnapshot = await collRef.get(); 
 for(let val of Object.key(docSnapshot.data())) 
  {
       arrayVal.push([docSnapshot.data()[val],val]);
   }
}
console.log(arrayVal);
'''

The output will be:

[["value1","key1"],["value2","key2"]]

or the object can be enumerated by applying a foreach method).

'''javascript
const fs = require('firebase-admin');
var db = fs.firestore();
const collRef = db.collection('fieldname').doc('fieldname');
let arrayVal = new Array();

// async function to get the data

async function myFunc(){
   let docSnapshot = await collRef.get(); 
Object.keys(docSnapshot.data()).foreach((item) => 
 {
   arrayVal.push([docSnapshot.data()[item],item]);
 }
}

console.log(arrayVal);
'''

The output will be:

[["value1","key1"],["value2","key2"]]

.get()
The get method is used to query the db for the documents that the firebase is having. This method is implemented in such a way that you can only retrieve existing data. So the query will request the cloud for the data and the response will be a promise that has a Query snapshot(Read the below two definition and read this method again!). You only get query snapshot if and only if you request entire collection, else it becomes a query document snapshot.

'''javascript
const collRef = db.collection('fieldname')

//this is called inside async function as 
//docsnapshot in previous example

let querySnapshot = await collRef.get(); 

'''

Document Snapshot
This will return the field from documents selectively, because the user will be manually typing the path for the document. This document snapshot, figuratively speaking will have a collection of data fields which are called document data.

The document snapshot and Query Document snapshot are similar but the only difference is it will contain additional query parameters as part of a query.

Both the query document snapshot and document snapshot return values can be retrieved using .data() or .get('field').

Response values wil be:

QueryDocumentSnapshot {
  _fieldsProto: {
    email: { stringValue: 'mbalaaji1995@gmail.com', valueType: 'stringValue' }
  },
  _ref: DocumentReference {
    _firestore: Firestore {
      _settings: [Object],
      _settingsFrozen: true,
      _serializer: [Serializer],
      _projectId: 'quizapp-011220',
      registeredListenersCount: 0,
      bulkWritersCount: 0,
      _backoffSettings: [Object],
      _clientPool: [ClientPool]
    },
    _path: ResourcePath { segments: [Array] },
    _converter: {
      toFirestore: [Function: toFirestore],
      fromFirestore: [Function: fromFirestore]
    }
  },
  _serializer: Serializer {
    createReference: [Function (anonymous)],
    createInteger: [Function (anonymous)],
    allowUndefined: false
  },
  _readTime: Timestamp { _seconds: 1607694363, _nanoseconds: 641576000 },     
  _createTime: Timestamp { _seconds: 1606843021, _nanoseconds: 548845000 },   
  _updateTime: Timestamp { _seconds: 1607497484, _nanoseconds: 962141000 }    
}

Query Snapshot
Query snapshot is something you will get when requested all the documents in a collection.

Response values wil be:

QuerySnapshot {
  _query: CollectionReference {
    _firestore: Firestore {
      _settings: [Object],
      _settingsFrozen: true,
      _serializer: [Serializer],
      _projectId: 'quizapp-011220',
      registeredListenersCount: 0,
      bulkWritersCount: 0,
      _backoffSettings: [Object],
      _clientPool: [ClientPool]
    },
    _queryOptions: QueryOptions {
      parentPath: [ResourcePath],
      collectionId: 'FreshPrinceChoice',
      converter: [Object],
      allDescendants: false,
      fieldFilters: [],
      fieldOrders: [],
      startAt: undefined,
      endAt: undefined,
      limit: undefined,
      limitType: undefined,
      offset: undefined,
      projection: undefined
    },
    _serializer: Serializer {
      createReference: [Function (anonymous)],
      createInteger: [Function (anonymous)],
      allowUndefined: false
    },
    _allowUndefined: false
  },
  _readTime: Timestamp { _seconds: 1607695217, _nanoseconds: 742184000 },
  _size: 4,
  _materializedDocs: null,
  _materializedChanges: null,
  _docs: [Function (anonymous)],
  _changes: [Function (anonymous)]
}

Module, Packages, Dependencies! What are they?

Balaji Muthukumar — Thu, 26 Nov 2020 18:03:16 +0000

Module is single file of code. Package is a group of modules in a directory. Dependencies are added files in a package to assist the module files to download other modules to have additional features without having to rewrite the code from scratch and use someone else's code.

This will be useful when you work in an organization and you are responsible for a module in a big project. The big projects are maintained by hundreds and thousands of developers(eg Linux os or Microsoft office..etc) where the project will have new features or bug fixes in weekly or monthly basis. These cannot be re-written from scratch. Let's say the big projects have lots of modules with duplicate copies across your system, How do you face this? Understand the entire project?. No, This is where having packages could save you. The packages are files arranged in a central repository in cloud or installed globally in your local pc so that you could import it in you module and use it. Now importing the external modules to your module, How do you do that? Simply by adding an "Import module_name"? Maybe. But in Javascript it does not work like that. The dependency files are created and the names of the files to be added are added in it. This will be read by the IDE to search and download the packages.

Unlike other programming languages, Javascript will need you to add packages individually for each project. This will be useful when you need to fix a bug in the package or do minor alterations in the packages will not affect the files globally and wont affect other people's work.

There are few things I thought should share for the noobs.

+Please don't try to add separate Javascript file for html if you are not using any framework. It wont work. There are factors like changing the script type to module or developing a Javascript listener and rendering the html file as well importing different modules need to done.

+Don't worry about the lines of code being too much or efficient. first try to produce output. Stressing too much will make you procrastinate.

DEV Community: Balaji Muthukumar

Firebase, coding with Javascript - examples. part-1

Module, Packages, Dependencies! What are they?