Web development & API design

L03: Full stack! (and a bit of React)

"Full" stack

  1. React component lifecycle
     
  2. Document databases
     
  3. MongoDB with Node & Express

React Component Lifecycle

Mounting

React Component Lifecycle

Living

How does change occur?

  • Changed state
     
  • Changed props

When does the state change?

HOW does the state change?

this.setState({ key: newValue });
  1. React component lifecycle
     
  2. Document databases
     
  3. MongoDB with Node & Express

Documents

  • represent an entity
     
  • are (typically) nested
     
  • are difficult to bulk update

MongoDB

  • Hugely popular
     
  • Rofl https://www.theregister.co.uk/2017/01/09/mongodb/
     
  • Easy to get started with
     
  • Free ObjectId!

Create some stuff!

$ mongo exampleDb
MongoDB shell version: 2.6.5
connecting to: exampleDb

> db.users.insert({username: 'Theneva'})
WriteResult({ "nInserted" : 1 })

> db.users.insert({username: 'HeroK0'})
WriteResult({ "nInserted" : 1 })

Now let's get it back

$ mongo exampleDb
MongoDB shell version: 2.6.5
connecting to: exampleDb

> db.users.find()
{ "_id" : ObjectId("54c5fbe88ede449775e517d2"), "username" : "Theneva" }
{ "_id" : ObjectId("54c5fbf58ede449775e517d3"), "username" : "HeroK0" }

Filters in the query

$ mongo exampleDb
MongoDB shell version: 2.6.5
connecting to: exampleDb

> db.users.find({ username: /T.*/ })
{ "_id" : ObjectId("59adc46bbca8ed8335c5b6a8"), "username" : "Theneva" }
  1. React component lifecycle
     
  2. Document databases
     
  3. MongoDB with Node & Express
  • Some kind of structure
     
  • Validation
     
  • refs between collections (entities)

Hello, Mongoose

const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/test');

const Cat = mongoose.model('Cat', { name: String });

const kitty = new Cat({
  name: 'Zildjian'
});

kitty.save(err => {
  if (err) {
    console.log(err);
  } else {
    console.log('meow');
  }
});

Express <3 Mongoose

const express = require('express');
const mongoose = require('mongoose');

const app = express();

const kittenSchema = new mongoose.Schema({
    name:  { type: String, required: true },
    level: { type: Number, required: true },
});

const Kitten = mongoose.model('Kitten', kittenSchema);

app.get('/kitten', (req, res) => {
    const kitten = new Kitten({
        name: 'Litten',
        level: 6,
    });

    res.send(person);
});

app.listen(1234);

Post data to Express

BTW

No lecture September 26th

 

(Plan is available on It's Learning)

Exercise

  1. Install MongoDB
     
  2. Write an Express server that lets you POST something you like
    • Types of coffee
    • Restaurants
    • Something else?
       
  3. Store the POSTed items in MongoDB
    • Tip: body-parser
       
  4. Serve all the items back out

PG6300-17-03: Full stack!

By theneva

PG6300-17-03: Full stack!

  • 579