PG6300-14 webutvikling og api-design
02: API, Node.js (+ NPM), Express <3 Angular
Webutvikling
Api-design
- (HTTP) GET /users
- (HTTP) GET /users/theneva
Pensum
$19.24 for Kindle edition @ Amazon
(kan leses online)
Tar et par timer å bla gjennom
(eller en uke å løse oppgavene til)
Lenes tungt på
Det er under 150 kroner
Pls read it
== operator
http://stackoverflow.com/questions/359494/does-it-matter-which-equals-operator-vs-i-use-in-javascript-comparisons
Chrome DevTools
JSON er gyldig javascript
var someLanguage = { "name": "Java" };
var languages = [
{ "name": "C#" },
someLanguage,
{ "name": "Haskell" }
];
console.log(languages);
Fordeler?
Ulemper?
AJAX / AJAJ
- Hent data fra utenfor koden
- Filer, API-er, ...?
- Filer, API-er, ...?
- XMLHttpRequest i plain JS
- "MVC"-rammeverk for web apps (klientside)
- Deklarativt (vs. imperative JQuery)
- Statisk web app
Node.js
- Runtime for JavaScript (på server)
- Your computer is a server!
EKSEMPEL: Hello, node (nodemon)
server-generert kode
- Før 2005-ish
- Server har full styring på hvordan ting presenteres
- Templates ligger på server
- Ta i mot request fra browser
- Les ut templates
- Hent data fra kilde (DB?)
- Generer HTML/CSS/JS basert på data
- Send response til browser
EKSEMPEL: Vanilla HTTP
http://en.wikipedia.org/wiki/JavaServer_Pages#mediaviewer/File:JSP_Model_2.svg
Fordeler
- Nettleser trenger bare å vise frem
- Fungerer utmerket for tynne klienter
- Fungerer utmerket for tynne klienter
- Færre SPOF-er
Ulemper
- Data må presenteres på én måte per type enhet
- Kjipt for serveren
- Mye data å overføre
- "Null" async lasting
Klientside-generert kode
- Angular
- Spør serveren om "ren" data (XML/JSON)
- Serveren "vet" ingenting om presentasjon
- Klienten må kjenne datastruktur
- API-DOC
- API-DOC
- Endring av datastruktur?
- Versjonering
EKSEMPEL Vanilla + Express
Fordeler
- Separation of concerns
- Flere typer klienter mot API-et
- Web (duh)
- Telefon
-
- Async lasting av ressurser
- Tredjepartsapplikasjoner!
Ulemper
- Fungerer kun på tykke klienter
- "Enda" et lag i applikasjonen
- Er (>2 år gamle) telefoner tykke?
REST
http://phpflow.com/wp-content/uploads/2012/07/rest-websrvices.jpg
Filosofi
Eksponering av ressurser (typisk database)
http://jiraclone.com/...
/users
/users/theneva
/projects
/projects/issues/
CRUD i REST
- HTTP-verb ("metoder")
- POST (create) (HTTP 201)
- GET (read) (HTTP 200)
- PUT (update) (HTTP 200)
- DELETE (...) (HTTP 204?)
- POST (create) (HTTP 201)
REST i Angular: $http
CURL & POSTMAN
- Trenger ikke JS for å sende requests
- Bare en REST-klient
- Bare en REST-klient
- Terminalkrigere: cURL
- Bedre(?): Postman (Chrome app)
NODE-API
Skriver en server
Config
Setter opp "endepunkter" for å ta i mot requests fra klient (Angular, app...)
EKSEMPEL: vanilla HTTP server
libraries: /node_modules/
Legg en mappe node_modules/ i rotmappa til prosjektet
Node finner biblioteker som legges der automatisk
require
libraries: npm
NPM: Package manager (som brew, apt-get)
$ npm install express
legger serveren express i mappa node_modules/
libraries: package.json
- Sjekke inn biblioteker i versjonskontroll?
- package.json beskriver avhengigheter (og andre ting)
$ npm install --save express
legger serveren express i mappa node_modules/
OG referanse til express inn i package.json
$ npm install
Express + body-parser
- CRUD: post/get/put/delete
- EKSEMPEL: Let's make a real server
var server = require('express')();
var bodyParser = require('body-parser');
server.use(bodyParser.json());
var port = 5432;
server.get('/api', function(req, res) {
return res.status(201).send({message: 'hi'});
});
server.post('/api', function(req, res) {
console.log(req.body);
return res.send(req.body);
});
server.listen(port);
console.log('listening on: ' + port);Static content
server.use(express.static(__dirname + './path/to/static/files'));- Server statisk innhold
- Filer, bilder
- Angular-appen?
- (note: Emmet)
Angular <3 API
EKSEMPEL: the $http service component
Bonus: images
URLs are cool
Øving
- Lag et (statisk) API som serverer en JSON-samling av noe
- Eksempel: platesamling
- Eksempel: platesamling
- Server en Angular-app som presenterer LP-ene
- Bonus: bilder (hint: static content)
PG6300-14-02 API, Node.js (+ NPM), Express <3 Angular
By theneva
PG6300-14-02 API, Node.js (+ NPM), Express <3 Angular
Forelesning 2 i PG6300-14 Webutvikling og API-design
