<info 340/>

Firebase

Orson Xu

Spring 2023

Slides credited to Joel Ross

View of the Day

  • Project Final Draft Requirements

  • Firebase Database (code demo)

  • FirebaseUI (code demo)

  • Managing Auth State (code demo)

  • Firebase Image Uploading (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

  //...
}

Firebase Database

FirebaseUI

A library (provided by Firebase) that created a sign-in form for your page.

React 18 workarounds

The React bindings for FirebaseUI (firebaseui-web-react) has not been updated for React 18 yet, and may have been abandoned. See the open pull request from Gabriel Villenave.

//in package.json
"react-firebaseui": "https://gitpkg.now.sh/gvillenave/firebaseui-web-react/dist"

# Install library (on command line)
npm install https://gitpkg.now.sh/gvillenave/firebaseui-web-react/dist

A second option is to instead install the firebaseui library (instead of the React bindings) and copy in the StyledFirebaseAuth.tsx file yourself.

Until the pull request is accepted, one work around is to install the updated fork instead of the usual package:

Action Items!

  • Review Everything

  • Problem Set 09 due next Wednesday​

  • Late/missing Problem Sets02-09 due on Friday

  • Final Project due on next^2 Monday (Jun 5)!

    • This is a HARD deadline. No extension!

    • We need to grade all projects
       

Next time (next Wed): The Era of AIGC + Conclusion

info340b-sp23-firebase

By Orson (Xuhai) Xu

Source: Joel Ross

info340b-sp23-firebase

  • 43

More from Orson (Xuhai) Xu