Joel Ross
Spring 2023

<info 340/>

Firebase

View of the Day

  • Project Final Draft Requirements

  • Firebase Database (code demo)

Project Final Draft

For the Final Draft of the project, we're looking for it to be totally complete! See the Canvas page for full details.

  • Well-structured and appropriate HTML (in React)
  • Well-constructed React Components. Uses props and state!
  • Interactive features: "two and a half" significant features
  • Routing and navigation Needs multiple pages; url params
  • External React Library rendering a Component. react-bootstrap is okay (if used meaningfully e.g., interactive widget)
  • External Data either a fetch() request for data, or Firebase DB
    • Needs asynchronous work (effect hooks, promises)
  • Good Style, Accessibility, Responsiveness
  • Correct code style -- check the course textbook!

Project Final Draft

Final Projects will be graded in two parts:

  1. Group portion (50%): has your group implemented a complete project? Does it meet all requirements; etc.
    ​
  2. Individual mastery (50%): have you individually demonstrated that you've learned the material (HTML, CSS, React)?
    • Need git commits that show you've contributed to all these
    • If you have not demonstrated you've learned the material, you will not get full credit.
    • "Supporting the group" (helping others learn, etc) will earn extra credit. Failure to work effectively in a group (poor communication, missing deadlines, etc) will reduce score.
      This is not a measure of "how much work you did", but how well you worked with your team.

See textbook

https://info340.github.io/firebase.html

Firebase

Firebase is a web backend solution; it provides multiple features which you can access without need to "code" them yourselves.

  • Web Hosting
  • Databases
  • User Authentication

Effect Hooks

An effect hook is used to specify "side effects" of Component rendering -- code you want to execute only once and not on each render!

//import the hooks used
import React, { useState, useEffect } from 'react';

function MyComponent(props) {
  const [stateData, setStateData] = useState([]);

  //specify the effect hook function
  useEffect(() => {
    //code to do only once here!
    //asynchronous methods (like fetch), etc
    fetch(dataUri) //e.g., send AJAX request 
    //...
    setStateData(data); //okay to call state setters here
    
  }, []) //array is the second arg to the `useEffect()` function
         //It lists which variables will "rerun" the hook if they 
         //change

  //...
}

Effect Hook Cleanup

In order to "clean up" any work done in an effect hook (e.g., disconnect listeners), have the callback return a "cleanup function" to execute. Not needed for fetch()

import React, { useState, useEffect } from 'react';

function MyComponent(props) {
  //specify the effect hook function
  useEffect(() => {

    //...do persistent work, set up subscriptions, etc

    //function to run when the Component is being removed
    function cleanup() {
      console.log("component being removed")
    }    
    return cleanup; //return function for React to call later    
  }, [])

  return ...
}

Action Items!

  • Review Everything

  • Problem Set 09 due Wednesday​

  • Final Project due week from Monday
     

Next time: Firebase Authentication

info340sp23-firebase-db

By Joel Ross

info340sp23-firebase-db

  • 241

More from Joel Ross