Practical

Course: Web Development

REST APIs with NodeJS
Winter Semester 2016/17

Tobias Seitz

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 1

Today’s Agenda

• APIs
– What is it?
– REST
– Access Control
• APIs with NodeJS
– Express
– StrongLoop / Loopback
– Adding a datasource
• Hands-On

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 2

What is an API

• “Application Programming Interface”

• Interface: Allow other services to use program logic
• Goal: Allow pieces of software to talk to each other
• Characteristics of a Great API:
– Make it easy for others to use your software.
– “A Good API needs to appeal to laziness” Kevin Lackner
– Intuitive (make it trivial)
– Documented (if something is not trivial)
– Opinionated (do it the way the API encourages you)

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 3

REST API
• Representational State Transfer
• Provide clients access to resources
• Your app manages the states of the resources, but lets other
software access the state through the API
• Reasons for using REST APIs [5]:
– Scalability
– Generality by using HTTP
– Independence from other parts of the app
– Reduced Latency with caching
– Security with HTTP headers
– Encapsulation - APIs do not need to expose everything
• Most common format these days: JSON

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 4

A Typical API URL

Data Model

Dedicated Path

https://www.mywebapp.com/api/v1/things/thing_id

API Version URI

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 5

REST API Quick Glance

• Go and look for a REST API

• Examples
– Spotify
– Google Maps
– Flickr
– Facebook Graph API
• Questions:
– What do you think makes it a good / bad API?
– What kind of access control does it have?
– What kind of restrictions are there?

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 6

API Paradigm: CRUD

• Create
≈ INSERT INTO myData VALUES (....)
• Read
≈ SELECT * FROM myData WHERE ...
• Update
≈ UPDATE myData WHERE ...
• Delete
≈ DELETE FROM myData WHERE ...

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 7

 REST APIS WITH NODEJS

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 8

You should know
• One of the most popular NodeJS frameworks.
• Characteristics:
– minimalistic
– easy to use API
– many utility methods and middleware functionalities
– thin layer on top of NodeJS
– Supports multiple template engines (Pug/Jade, Handlebars, EJS)
• Find the documentation here: http://expressjs.com/
• Package:
npm install --save express
• Express generator:
npm install -g express

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 9

Simple Express App
basics/app.js

var express = require('express');

var app = express();

app.get('/', function (req, res) {

res.send('Hello World!');
});

var server = app.listen(3000, function () {

var host = server.address().address;
var port = server.address().port;
console.log('app listening at http://%s:%s',
host, port)
});

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 10

Express Generator

• Goal: automatically generate the basic

structure
of an express app that includes
views, routes, common dependencies
• Requirements: Install the generator globally:
$ npm install -g express-generator
$ express eg-app
• Documentation:
http://expressjs.com/starter/generator.html
• You still have to install the dependencies
manually:
$ cd eg-app && npm install

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 11

Full Stack Solutions
mean.io

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 12

CRUD with Express
• Example API that manages products.
• Create a new product:
POST /products
• Retrieve all products:
GET /products
• Retrieve a particular product:
GET /product/:id
• Replace a product:
PUT /product/:id
• Update a product
PATCH /product/:id
• Delete a product
DELETE /product/:id

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 13

Testing POST / PUT / DELETE

• Recommended Tool: Postman https://www.getpostman.com/

• Don’t forget the headers, e.g. Content-type: application/json
• Make sure your JSON only uses double quotes

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 14

Dummy database: JavaScript Object.

var products = {
'id_A': {
name: 'Product A',
price: 30
},
'id_B': {
name: 'Product B',
price: 50
}
};

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 15

GET /products

router.get('/', function(req, res) {

var productArray =
Object.keys(products).map(function(key) {
var entry = products[key];
entry.id = key;
return entry;
});
var response = {
code: 200,
products: productArray
};
res.json(response);
});

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 16

Response with all products

{ Opinionated:
"code": 200, Products is an Array,
"products": [ instead of an Object literal.
{
"name": "Product A",
"price": 30,
"id": "id_A"
},
{
"name": "Product B",
"price": 50,
"id": "id_B"
]
}

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 17

POST /products
router.post('/', function(req, res) {
var entry, id, response; Intuitive:
if (req.body.name && req.body.price) { Follow API standards
id = uuid.v1();
entry = {}; ≈ POST creates objects
entry[id] = {
id : id,
name: req.body.name,
price: req.body.price
};
products[id] = entry[id];
response = {
code: 201,
message: 'created product',
products: [entry]
};
} else {
response = {
code: 1000,
message: 'missing parameter. required: name, price.'
}
}
res.json(response);
});

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 18

Response: Product was created
Intuitive:
{ Respond with the entire
"code": 201, created document, so
"message": "created product", clients can update their views.
"products": [
{
"182348e0-abfd-11e6-92a7-4fdc0c2e84f9": {
"id": "182348e0-abfd-11e6-92a7-4fdc0c2e84f9",
"name": "Product C",
"price": 100
}
}
]
}

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 19

What’s up with this?

• Look at the file /routes/products.js

• Can you think of potential problems for your API?

• How would you solve them?

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 20

API Frameworks

• Goal: Simpler, faster creation of APIs and CRUD paradigm for

resources
• Often with an abstraction layer
• Popular examples:
– loopback.io - https://loopback.io/
– hapi.js - http://hapijs.com/
– Restify - http://restify.com/
• Comparison: https://strongloop.com/strongblog/compare-
express-restify-hapi-loopback/

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 21

LoopBack

• Now part of StrongLoop Arc (IBM)

• Installation:
npm install -g strongloop
• Getting started wizard:
slc loopback
– api-server: already contains authentication methods
– empty-server: most basic setup
– hello-world: small working sample
– notes-app: full working example for a note-taking api

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 22

Step 1: Set up the project

spengler:04-apis Tobi$ slc loopback

_-----_
| | ╭──────────────────────────╮
|--(o)--| │ Let's create a LoopBack │
`---------´ │ application! │
( _´U`_ ) ╰──────────────────────────╯
/___A___\ /
| ~ |
__'.___.'__
´ ` |° ´ Y `

? What's the name of your application? loopback-api

? Enter name of the directory to contain the project: loopback-api
create loopback-api/
info change the working directory to loopback-api

? Which version of LoopBack would you like to use? 2.x (stable)

? What kind of application do you have in mind? hello-world
Generating .yo-rc.json …

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 23

Step 2: Create a model

spengler:loopback-api Tobi$ slc loopback:model

? Enter the model name: product
? Select the data-source to attach product to: db (memory)
? Select model's base class PersistedModel
? Expose product via the REST API? Yes
? Custom plural form (used to build REST URL): products
? Common model or server only? common
Let's add some product properties now.

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 24

Step 3: Add properties

Enter an empty property name when done.

? Property name: name
invoke loopback:property
? Property type: string
? Required? Yes
? Default value[leave blank for none]:

Let's add another product property.

...

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 25

Step 4: Run the app
spengler:loopback-api Tobi$ node .
Web server listening at: http://0.0.0.0:3000
Browse your REST API at http://0.0.0.0:3000/explorer

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 26

Supported Methods
localhost:3000/api/products

Use Postman to add some data...

Response:
{
"name": "Product A",
"price": 10,
"id": 1
}

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 27

Persisting Models to a Database
• Loopback allows using “connectors” for various databases
• MySQL connector:
npm install --save loopback-datasource-
juggler loopback-connector-mysql
• Getting started:
slc loopback:datasource
• This is not a trivial step, so you really need to try this yourself.
• Links:
– http://loopback.io/doc/en/lb2/Connecting-to-MySQL.html
– http://loopback.io/doc/en/lb2/MySQL-connector.html
– http://loopback.io/doc/en/lb2/Data-source-generator.html
– https://github.com/strongloop/loopback-connector-mysql

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 28

Add a MySQL Datasource

spengler:loopback-api Tobi$ slc loopback:datasource

? Enter the data-source name: mysql
? Select the connector for mysql: MySQL (supported by StrongLoop)
Connector-specific configuration:
? Connection String url to override other settings (eg:
mysql://user:pass@host/db):
? host: localhost
? port: 3306
? user: pwp
? password: *************
? database: pwp
This will add a new entry to
server/datasources.json

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 29

server/model-config.json

{
...
"product": {
"dataSource": "mysql",
"public": true
}
}

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 30

Things to note at this point

• If you try to run the app now, you will get an error.
• Problem: There is no table “products” in your database
• Goal: You want LoopBack to generate this table for you.
• Solution: Automigration.
• Automigration also works, if you want to switch the database
(e.g. replace MySQL with Cloudant)

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 31

Automigration
var path = require('path');
var app = require(path.resolve(__dirname, '../server/server'));
var ds = app.datasources.mysql;
ds.automigrate('product', function(err) {
if (err) throw err;
var products = [
{
name: 'Product A',
price: 10
},
{
name: 'Product B',
price: 50
}
];
products.forEach(function(product, i) {
app.models.product.create(product, function(err, model) {
if (err) throw err;
console.log('Created: ', model);
if (i === products.length - 1) {
ds.disconnect();
}
});
});
});

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 32

Perform Automigration

spengler:loopback-api Tobi$ node bin/automigrate.js

Created: { name: 'Product A', price: 10, id: 1 }
Created: { name: 'Product B', price: 50, id: 2 }

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 33

After Automigration: We have a table!

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 34

API for your project

• Think of a Resource that is going to be accessible through your

project API
• Try to model it
– properties
– datatypes
• Perform all steps with loopback

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 39

Things that we couldn’t cover

• Autodiscovery of Schemas (LoopBack)

• Securing an API
• Manual Deployment and Configuration
• Process Management and Proxies
• Dockerizing a NodeJS app
• .... and much more.

• ==> We’ll get there, when we need them during the project
phase.

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 40

Personal Experiences

• Put a lot of work into designing and specifying your API. API
changes can break much of the applications using the
interface.
• You don’t want to maintain a lot of different versions of the
API, so it’s better to plan ahead.
• Make sure to bundle API calls on the front end è Only one
module contains API information. The module then exports
methods to use the API across the entire front end.

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 41

Links ‘n’ Stuff
Must read:
1. http://www.restapitutorial.com/

Should read:
1. https://geemus.gitbooks.io/http-api-design/content/en/

Wouldn’t do any harm:

1. https://www.toptal.com/api-developers/5-golden-rules-for-designing-a-
great-web-api
2. https://www.youtube.com/watch?v=heh4OeB9A-c
3. https://www.youtube.com/watch?v=qCdpTji8nxo
4. https://www.youtube.com/watch?v=hdSrT4yjS1g
5. https://stormpath.com/blog/fundamentals-rest-api-design
6. http://web.archive.org/web/20151229055009/http://lcsd05.cs.tamu.edu
/slides/keynote.pdf

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 42

Links ‘n’ Stuff

• http://blog.mwaysolutions.com/2014/06/05/10-best-
practices-for-better-restful-api/
• http://www.vinaysahni.com/best-practices-for-a-pragmatic-
restful-api
• https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
• https://github.com/RestCheatSheet/api-cheat-sheet#api-
design-cheat-sheet

Ludwig-Maximilians-Universität München Practical Course Web Development WS 16/17 - 04 - 43