Exploring VueJS, TypeScript and Google FireStore[part 2]

This post finishes our tour of using VueJs with Google FireStore. I hope this content helps developers wanting to build quick and simple CRUD based web applications, PWA’s, or mobile applications. This post will mainly review Google FireStore operations.   Make sure to check out the previous post if you’re interested in seeing how VueJs works.

Exploring VueJS, TypeScript and Google FireStore[part 1]

To inspect the finished code sample, please visit my github at https://github.com/michaelprosario/fireTodo.

In the previous post, we introduced a few abstractions for adding, deleting, and listing todo items. The todo class represents an application entity record with properties. The TodoDataServices class has methods for our database operations. You’ll quickly notice that the data services class depends upon a FireStoreDataServices class. This class provides generic implementations for common Google FireStore database operations.

export class TodoRecord{
    id: string = '';
    action: string = '';
    priority: string = '';
    complexity: string = '';
}

export class TodoDataServices{

    dataServices: FireStoreDataServices;
    constructor(){
        this.dataServices = new FireStoreDataServices();
    }

    Add(todo: TodoRecord){
        var data = JSON.parse(JSON.stringify(todo));
        return this.dataServices.addRecord(data, "tasks");
    }

    Delete(recordId: string){
        return this.dataServices.deleteRecord(recordId, "tasks");
    }

    GetAll(){
        return this.dataServices.getAll("tasks", DocToTodoRecordMap);
    }
}

You can inspect the full implementation of FireStoreDataServices here: https://github.com/michaelprosario/fireTodo/blob/master/src/views/FireStoreDataServices.ts .

In the ‘getRecord’ method, we specify a recordId, table reference, and mapping function to load a record from the database. We structured this method to return promises so that client programmers can cleanly handle happy cases and error cases.

getRecord(recordID: string, tableName: string, docToRecordMap) {
    return new Promise(function (resolve, reject) {
        db.collection(tableName).doc(recordID).get().then(function (doc) {
            if (doc.exists) {
                resolve(docToRecordMap(doc));
            } else {
                reject("Record not found");
            }
        }).catch(function (error) {
            reject(error);
        });            
    });
}

The mapping function will convert the Firebase document into an entity object that we have authored.

export function DocToTodoRecordMap(doc) : TodoRecord {
    var rowData = doc.data();
    var record = {
        id: doc.id,
        action: rowData.action,
        priority: rowData.priority,
        complexity: rowData.complexity
    };

    return record;
}

To load all records from a table, we leverage the following function. This method also leverages the docToRecordMapping function to convert a database document into our application entity.

getAll(tableName: string, docToRecordMap) {
    return new Promise(function (resolve, reject) {

        var records = [];
        db.collection(tableName)
            .get()
            .then((querySnapshot) => {
                querySnapshot.forEach((doc) => {
                    records.push(docToRecordMap(doc));
                });

                resolve(records);
            });
    });
}

To remove a record from the system, we can leverage the following code.

deleteRecord(recordID: string, tableName: string) {
    return new Promise(function (resolve, reject) {
        db.collection(tableName).doc(recordID).delete().then(function (doc) {
            resolve();
        }).catch(function (error) {
            reject(error);
        });
    });
}

In general, Google FireStore provides an easy software as a service feature. For the hobby, startup, or side-hussle project, you’ll really appreciate that you’ll probably fall under the free tier of usage. Production loads feel inexpensive. In this tour, we reviewed implementing Google FireStore for web. It should be noted that Google Firebase/FireStore can be leveraged in your C#, iOS, Android, Unity, Kotlin, Dart, and Node projects. Make sure to check out their documents for details.

https://cloud.google.com/firestore/docs/quickstart-mobile-web