Joel Ross
Spring 2025

<info 340/>

Firebase Database

View of the Day

  • Final Draft Requirements

    • Grading Group Projects

  • Questions on AJAX?

  • Firebase

    • Configuration

    • Database

More on Firebase next week

Can also check the videos & textbook!

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)
  • Data Persistence through Firebase (includes asynchronous work; effect hooks, etc)
  • Good Visual 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.

Questions on AJAX?

AJAX Requests

fetch(url)
    .then((response) => {
        const dataPromise = response.json();
        return dataPromise;
    })
    .then((data) => {
        //do something with the data!!
        console.log(data);
    });

Asynchronous

AJAX requests are asynchronous, so happen simultaneously with the rest of the code.

That means that after the request is sent, the next line of code is executed without waiting for the request to finish! 

   console.log('About to send request');

   //send request for data to the url
   fetch(url);

   console.log('Sent request');

(1)

(2)

(3)

(4) Data is actually received some time later,
      and Promise is fulfilled

does NOT return the data,

but a Promise for it

Promises

Promises

We use the .then() method to specify a callback function to be executed when the promise is fulfilled (when the asynchronous request is finished) 

//what to do when we get the response
function successCallback(response) {
   console.log(response);
}

//when fulfilled, execute the callback function
//(which will be passed the http response)
const promise = fetch(url);
promise.then(successCallback);


//more common to use anonymous variables/callbacks:
fetch(url).then(function(response) {
   console.log(response);
});

reads like English?

callback will be passed the request response 

# switch to starter branch to get new starter code
git checkout starter

# download new starter code
git pull

# switch back to main branch for coding
git checkout main

# merge in new starter code (use default msg)
git merge starter --no-edit

# code and enjoy!

Get the starter code from the starter branch, but do all of your work on main.

Updating Lecture Code

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.

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!

  • Complete task list for Week 9 (all items)

  • Review everything

  • Problem Set 09 due tonight!

 

Next time: Firebase authentication and image storage