如何使用Firebase创建动态HTML表？

Question

I'm trying to create an HTML table that can be updated in real time with firebase as my users use my app. I'm really struggling on getting this to work, I don't really know where to start.

basically, all it needs to do is create a new table row and update its cells in real time as the user is interacting with my app.

Does anyone know of any good tutorials that could point me in the right direction? Examples of code on creating the HTML table would also be great! thanks.

UPDATE: OK! thanks to Isaiah Lee, I went out and looked up some tutorials for React. I'm 90% there but there is one problem I can't seem to figure out...

I'm able to update my table with new rows dynamically as the users use my app, but I can't get them to fill up with data. I feel like I'm really close but my inexperience with React is holding me back here...

for some reason, this loop here doesn't populate the td's with any data

render() {
return (
  <div className="App">

    <h1>Talkeetna Numbers</h1>
    <table id="numbers">
      <tbody>
        <tr>
          <th>Driver</th>
          <th>Coach</th>
          <th>Time</th>
          <th>Total People</th>
          <th>AM Train</th>
          <th>PM Train</th>
          <th>MEX</th>
          <th>Employees</th>
          <th>Seats Left</th>

        </tr>

        {this.state.rows.map(row =>
        <tr>
          <td>{this.state.driver}</td>
          <td>{this.state.coach}</td>
          <td>{this.state.time}</td>
          <td>{this.state.totalPeople}</td>
          <td>{this.state.amTrain}</td>
          <td>{this.state.pmTrain}</td>
          <td>{this.state.THEMEX}</td>
          <td>{this.state.Employees}</td>
          <td>{this.state.seatsLeft}</td>
        </tr>)}

    </tbody>
  </table>



  </div>
);

}

Heres my components function

componentDidMount()
{
  const logsRef = firebase.database().ref('logs');

  logsRef.on('child_added', snap => {


  this.addRow(snap.getKey());
  //rows.push(snap.getKey());
  console.log("adding key: ", snap.getKey());


   });

   console.log("loading rows...");

   for(var rowKey = 0; rowKey < this.state.rows.length; rowKey++)
   {

      const root = firebase.database().ref().child('logs/' + rowKey);
      const driverRef = root.child('Driver');
      const coachRef = root.child('Coach');
      const timeRef = root.child('Time');
      const totalPeopleRef = root.child('Total People');
      const AMTrainRef = root.child('AM Train');
      const PMTrainRef = root.child('PM Train');
      const MEXRef = root.child('MEX');
      const EmployeesRef = root.child('Employees');
      const seatsLeftRef = root.child('Seats Left');

      //sync with DB in real time
      driverRef.on('value', snap => {
        this.setState({
          driver: snap.val()
          })
        });
       coachRef.on('value', snap => {
         this.setState({
         coach: snap.val()
       })
       });
       timeRef.on('value', snap => {
       this.setState({
       time: snap.val()
          })
       });

       totalPeopleRef.on('value', snap => {
       this.setState({
        totalPeople: snap.val()
         })
       });

       AMTrainRef.on('value', snap => {
       this.setState({
       amTrain: snap.val()
          })
       });

      PMTrainRef.on('value', snap => {
      this.setState({
      pmTrain: snap.val()
        })
      });
      MEXRef.on('value', snap => {
        this.setState({
       THEMEX: snap.val()
        })
       });
      EmployeesRef.on('value', snap => {
      this.setState({
      Employees: snap.val()
       })
       });
       seatsLeftRef.on('value', snap => {
          this.setState({
          seatsLeft: snap.val()
          })
      });

     }


    }

Answer 1

Sounds like you should look into some frontend framework. In your particular use case, anything with 1-way binding will work (eg react). And of course, anything with 2-way binding will work as well (angular).

Egghead.io has really well done, bite-size tutorials that can get you running shortly: https://egghead.io/browse/frameworks

Edit:

Okay, it's been over a year since I've last been working with react, but I have some ideas that could help.

First, react is all about separating components and breaking things off into smaller bits. The idea is that you have some state change at the top level, those changes are propagated down into the nested components using props.

I'd recommend you have a top level component that listens for changes in Firebase (I havent worked with FB in a long time either), and then sends those down to components that render based on the data. I recommend reading this article written by Dan Abramov (creator of Redux), which discusses smart vs dumb components: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

Again, I haven't used react in a while, so I'll use pseudocode to describe how you might want to design this.

Top Level Component This component should be the only place your app is interacting with Firebase. You'll configure all the listeners here such that when new data is received, it simply propagates down to child components.

constructor() {

    this.firebaseRef = firebase
        .database()
        .ref('logs');

    this.state = {
        logs: []
    };

    // when the table first loads, use the
    // firebase ref to get all the current data
    // and initialize/render the table. After this,
    // you should only be listening for when a new row
    // (or "log") is added. Pseudocode:
    firebase.database().ref('logs')
        .all()
        .then(logs => {
            // project all the logs into the model we need and set to 
            // component's row state
            this.state.logs = logs.map(logMapper);
        });
}

// takes in a log that you get from firebase and maps
// it to an object, modeled such that it contains all 
// the information necessary for a single table row
logMapper(log) {
    return {
        driver: log.child('Driver'),
        time: log.child('Time'),
        ...
    };
}

componentDidMount() {
    const logsRef = firebase
        .database()
        .ref('logs');

    firebaseRef.on('child_added', log => {
        this.state.logs.push(logMapper(log));
    });
}


render() {
    return (
        <table id="numbers">
            <thead>
                <th>Driver</th>
                <th>Coach</th>
                <th>Time</th>
                <th>Total People</th>
                <th>AM Train</th>
                <th>PM Train</th>
                <th>MEX</th>
                <th>Employees</th>
                <th>Seats Left</th>             
            </thead>
            <tbody>
                {this.state.logs.map(row => <TableRow rowData="logs" />}
            </tbody>
        </table>
    );
}

Row Component You have a separate component that receives a log object through props and renders a single row.

render() {
    return (
        <tr>
            <td>{this.props.rowData.driver}</td>
            <td>{this.props.rowData.coach}</td>
            <td>{this.props.rowData.time}</td>
            <td>{this.props.rowData.totalPeople}</td>
            <td>{this.props.rowData.amTrain}</td>
            <td>{this.props.rowData.pmTrain}</td>
            <td>{this.props.rowData.THEMEX}</td>
            <td>{this.props.rowData.Employees}</td>
            <td>{this.props.rowData.seatsLeft}</td> 
        </tr>
    );
}

The above TableRow is an example of a dumb component. It doesn't hold any internal state, nor really modify anything. It just takes what it's given via props and renders what it's supposed to.

Again, you'll have to consider my examples above as pseudocode, it wouldn't work if you tried to copy and run it. But hopefully this gives you some insight into how to design components in react. Remember, "everything is a component".

Just a couple last notes:

1. Components are more useful the more generic they are. The ideal scenario is that you create a component, and if you need something similar later, you can just take the component you already created and plug it in with slight modifications (or in the best case scenario, no change at all!). So if you see yourself needing a bunch of similar tables in your app, you'll want to further generalize my example. For example, the firebase ref explicitly connects with the "logs" collection, making this table component only useful for that one object type. You'll want to make the parent component receive either a table name, or an already initialized firebase reference, that it can use. That way, the component is not tied down to a specific firebase table. The mapping function should also be passed in, as the one in my example is hardcoded to map a "log" object, and you may be wanting to grab other types from firebase.
2. I learned a lot from reading and messing around, but honestly this one Udemy class I took really nailed down all the concepts for me: https://www.udemy.com/react-redux/ I'd highly recommend taking it, although you'd probably want to wait until Udemy has a site-wide sale where you can get the course for $10-20 bucks. I've taken several of his courses and they've all been well worth the money.

Good luck!