World Wide Web → it is a Web and it catalogue of an order of all websites connected to the worldwide internet.

Introduced by Tim Berners-Lee and Nicola Pellow @CERN

HTML → Hypertext Markup Language

HTTP → Hypertext Transfer Protocol :: two methods

• GET :: obtain a website information, the web server will send the request page content back
• POST :: upload data

URL → Uniform Resource Locator

Type of webpage:

• Statistic webpage :: local webpage with fixed content
• Dynamic webpage :: the server will render the page content, all the request data fetch from either databases or other webpage.

WWW = HTML + HTTP + URL

Layers of World Wide Web

• Application layer
• Transport (TCP) layer
• Network (IP) layer
• Data Link layer
• TCP/IP layers

HTTP :: Hypertext Transfer Protocol

• v 0.9 (1991) one verb: GET a resource
• HTML2 (1995) introduce <FORM> tag
• v 1.0 (1996) GET and POST messages
• v 1.1 (1997) GET POST PUT DELETE a resource
• (2010) PATCH (partially) update a resource

A computer send a GET file request to the server —— the server will return the request HTML file

A computer send a GET / POST file request to the server —— the server will run programming script to generate HTML output

A computer uses the REST route —— the server will run a programming script and JSON output, the webpage will be assembled at local.

REST / RESTful API

Representational State Transfer

It relies on a stateless, client-server, cacheable communications protocol

Server

A server is a computer running server software like Node.js, Apache, which listen a particular TCP/IP port, accept requests and send the response back. A server can either be deploy offline (localhost) or online. In addition, online server can deploy on could platform, e.g. Heroku, Azure, and AWS.

• A computer running server software (e.g. Apache, MS IIS, Node.js)

• it 'listens' on a particular TCP/IP port

• it accepts Requests, sends Responses

• runs application code to make responses

• dev computer is a server — use localhost

• it can be 'on premise' or 'in the cloud'

• trend is to host apps on cloud platforms → e.g. Heroku, Firebase, AWS, Azure

  • 'serverless' auto-scaling
  • microservice architectures

  Choose a cloud server, the deployer do not need to worry about the server scaling such as server memory, storage, etc.

const mongoose = require('mongoose')
const bcrypt = require('bcrypt-nodejs')

const foodSchema = new mongoose.Schema({
	name: String,
	photo: String,
	description: String,
	vegan: Boolean,
	organic: Boolean,
	calories: Number,
	fat: Number,
	protein: Number
})

const Food = foodSchema.model("Food", foodSchema)
module.exports = Food // export the Schema

const favouriteSchema = new mongoose.Schema({ 
	foodId: {type: mongoose.Schema.Types.ObjectId, ref: "Food"}
})
const eatenSchema = new mongoose.Schema({
	foodId: {type: mongoose.Schema.Types.ObjectId, ref: "Food"},
	when: {type: Date, default: Date.now}
})
const userSchema = new mongoose.Schema({
	email: {type: String, required: true, unique: true},
	password: {type: String, required: true},
	nameFamily: {type: String, required: true},
	nameGiven: String,
	favourites: [favouriteSchema],
	eaten: [eatenSchema]
})

userSchema.methods.generateHash = password => {
	return bcrypt.hashSync(password, bcrypt.genSaltSync(10), null)
}

userSchema.methods.validPassword = password => {
	return bcrypt.compareSync(password, this.password)
}

const User = mongoose.model('User', userSchema)
const Favourite = mongoose.model('Favourite', favouriteSchema)
const Eaten = mongoose.model('Eaten', eatenSchema)

module.exports = {User, Favourite}

require('dotenv').config()

const mongoose = require('mongooes')

connection_string = "mongodb URI"
db_address = connection_string.replace('<username>', process.env.MONGO_USERNAME)
	.replace('<password>', process.env.MONGO_PASSWORD)

mongoose.connect(db_address, {
	useNewUrlParser: true,
	useCreateIndex: true,
	useUnifiedTopology: true,
	useFindAndModify: false,
	dbName: "Database name" // 
})

const db = monngose.connection

db.on("error", err => {
	console.error(err)
	process.exit(1)
})

db.once("open", async () => {
	console.log(`Mongo connection start on ${db.host} : ${db.port}`)
})

// need to load the food schema, otherwise it will return an error
require("./food")

Web Developer DO:

• design the user interface → a set of HTML files, CSS stylesheets, and other assets
• set up and program a web server such that it delivers these assets when requested by an authorised user.

Software Development lifecycle

Design → Development

Build the right thing → Build the thing right

$\displaystyle \text{Planning }\ \ \displaystyle\overrightarrow{\displaystyle\text{Define Requirements}}\ \ \ \text{Design \& Prototyping} \ \ \ \overrightarrow{\text{Software Development}}\ \ \ \text{Testing }\ \ \ \overrightarrow{\text{Development}}\ \ \ \text{ Operations \& Maintenance}$

Design Thinking

Stanford d. school Design Thinking Process

Empathise

• Interviews
• Shadowing
• Seek to understand
• Non-judgmental

Define

• Personas
• Role objectives
• Decisions
• Challenges
• Pain Points

Interaction Design → Establishing requirements → designing alternatives → prototyping → evaluating → final product