FireBase Lab And Components

Documentation & Snack

Expo has great documentation on interfaces with firebase and firestore https://docs.expo.io/versions/latest/guides/using-firebase/

Below is an example of how to write a Mario document to character collection.

import * as firebase from 'firebase';
import 'firebase/firestore';
const firebaseConfig = { ... }  // apiKey, authDomain, etc. (see above)

firebase.initializeApp(firebaseConfig);
const dbh = firebase.firestore();
dbh.collection("characters").doc("mario").set({
employment: "plumber",
outfitColor: "red",
specialAttack: "fireball"
})

Don’t initialize multiple duplicates.

import firebase from 'firebase'
if (!firebase.apps.length) {
    firebase.initializeApp(config);
}

Here is an example of reading from a collection


let cityRef = db.collection('characters').doc('mario');
let getDoc = cityRef.get()
  .then(doc => {
    if (!doc.exists) {
      console.log('No such document!');
    } else {
      console.log('Document data:', doc.data());
    }
  })
  .catch(err => {
    console.log('Error getting document', err);
  });

Listener syntax for firestore

Listens for changes to the document. It can be modified to listen to changes to a collection.



 let doc = db.collection('characters').doc('mario');
let observer = doc.onSnapshot(docSnapshot => {
  console.log(`Received doc snapshot: ${docSnapshot}`);
  // ...
}, err => {
  console.log(`Encountered error: ${err}`);
});

Firebase lab (total 120 points)

For this lab, implement the following screen meeting these specs (link to design), use the previous lab as your starting point.

1. Integrating with firebase
(total 45 points)

1.1 Invitations and Firebase (25 Points)

When a user accepts or rejects an invitation the appropriate firebase objects are updated or deleted. Spend some time talking with your partner about how you would structure, collections and JSON objects.

Also, think about what queries you could run to get the information that you need. You don’t have to create new collections to represent categories. You can do this with querying.

1.2 Linking Card to Firebase Invitation Card (20 points)

1.2.1 As a user I can click the accept button to accept an invitation and change is reflected in firebase. (10 points)

Once the user clicks the accept button the Invitation should flash green for 1 second and then disappear. After clicking accept/reject, the next pending (if any) invitation replaces the original invitation.

Daniel G. Graham Ph.D