Mock API

Covalent includes covalent-data, a mock API server that helps designers and developers quickly simulate backend APIs for fast prototyping.

• Covalent-Data Documentation
• Covalent-Data Repo

RESTful API

• Used to communicate with the backend
• Uses HTTP as a transfer mechanism
• No official RESTful standard

TD REST

• Teradata has a RESTful standard that all Covalent based projects should follow. (Why?)
• Naming conventions

Wrong:

GET https://myapi.com/activeUsers/kyle.ledbetter
GET https://myapi.com/active_users/kyle.ledbetter
GET https://myapi.com/activeusers/kyle.ledbetter

Right:

GET https://myapi.com/active-users/kyle.ledbetter

• Object definition

Wrong:

{ "active-users": [
  {
    created: "7/23/2016 12:05 AM",
    display_name: "Richa Vyas",
    email: "[email protected]",
    id: "richa.vyas",
    last_access: "7/23/2016 12:05 AM",
    site_admin: false
  },
  {
    created: "7/23/2016 12:05 AM",
    display_name: "Jason Weaver",
    email: "[email protected]",
    id: "jason.weaver",
    last_access: "7/23/2016 12:05 AM",
    site_admin: false
  }]
}

Right:

[
  {
    created: "7/23/2016 12:05 AM",
    display_name: "Richa Vyas",
    email: "[email protected]",
    id: "richa.vyas",
    last_access: "7/23/2016 12:05 AM",
    site_admin: false
  },
  {
    created: "7/23/2016 12:05 AM",
    display_name: "Jason Weaver",
    email: "[email protected]",
    id: "jason.weaver",
    last_access: "7/23/2016 12:05 AM",
    site_admin: false
  }
]

• HTTP verb usage: GET, POST, PUT, PATCH, DELETE, OPTION

CRUD

• Create

  POST

• Read

  GET

• Update

  PUT (full resource), PATCH (delta)

• Delete

  DELETE

CORS

• Cross Origin Resource Sharing
• Required in majority of modern apps
• Controlled through preflight OPTION request headers

  Access-Control-Allow-Origin: *
  Access-Control-Allow-Methods: GET, PUT, POST, PATCH, DELETE
  Access-Control-Allow-Headers: Authorization, Content-Type
  

Pagination & Sort

• Backend pagination & sort is always preferred to frontend implementations.
• Most simple pagination/sort requests should be handled through query parameters

http://myapi.com/users?page=3&per_page=2&sort=desc:display_name

• Return pagination headers:

  X-Length: 50
  X-Page: 2
  X-Total: 1000
  X-Total-Pages: 20
  

Covalent-Data

Features

• Fully functional API server
• Full CRUD operations & "persistent" data store
• Easily customizable CRUD objects with built in functions
• Pagination & sort
• Supports CORS
• Easily customizable mock chart data w/ live updating
• Tiny footprint, can be run alongside ng serve on a laptop
• npm library support, can be integrated into any node based app

Data seeding

• An object library is created on startup.
• yaml files in the schemas directory tell the server what objects to create.

mock-api/schemas/users.yaml

• txt files in the datum directory tell the server what mock data to populate those objects with.

mock-api/datum/firstname.txt

Lets get to the lab!

Setup

Stash away any items not needed for this lab

git stash

Checkout the repo at the start tag

git checkout tags/lab/mock-api/initialize -b api-lab

Start the local angular-cli server:

ng serve

you should see:

Open a new tab or console. Start the Data Server in a new tab/console:

npm run start-api

You should see:

Finally, point a browser to http://localhost:4200

A login should load! Let's get to work!

Bonus points!

If you are using Chrome, install the JSONView Chrome plugin.

Point your browser to http://localhost:8080/users

If you see a list of JSON user objects, you're ready to go!

Add a custom function

Lets take a closer look at the /users endpoint. http://localhost:8080/users

Lets also look at a single object. http://localhost:8080/users/Kyle.Ledbetter

In a new terminal, open /schemas/users.yaml

• Seed parameters- initial_entries, search_index
• Variables - .firstname, .lastname, .timestamp: all variables and functions are surrounded by double curly braces.

Pretty useful! But there are some issues:

• id: Kyle.Ledbetter - URLs are case sensitive.
• email & site_admin: static. ([email protected] isn't super useful.)

First, stop the API server.

npm run stop-api

in /schemas/users.yaml, replace

id: {{.firstname}}.{{.lastname}}

with

id: {{toLower(.firstname)}}.{{toLower(.lastname)}}

Restart the API server.

npm run start-api

Look once more at http://localhost:8080/users and http://localhost:8080/users/Kyle.Ledbetter. Notice any differences? Why?

Add more mock data and functions

Lets take it a step further. Again, stop the API server.

npm run stop-api

Create a new file- datum/admin.txt Add some boolean values (one per line).

true
false
false
false
false
true
false

Create a new file- datum/company.txt Add some company names (one per line).

microsoft
amazon
sony
apple
samsung
duff

in /schemas/users.yaml, replace

email: [email protected]

with

email: {{toLower(.firstname)}}.{{toLower(.lastname)}}@{{.company}}.com

replace

admin: false

with

admin: {{.admin}}

Restart the API server.

npm run start-api

Look once more at http://localhost:8080/users and http://localhost:8080/users/kyle.ledbetter. What's changed?

Create a new schema

Once more, stop the API server.

npm run stop-api

Create a new file: /schemas/messages.yaml

initial_entries: 10
search_index: id
id: {{uuid()}}
title: {{.messagename}}
desc: {{.description}}
created: {{.timestamp}}
updated: {{.timestamp}}
user: {{toLower(.firstname)}}.{{toLower(.lastname)}}
icon: {{.icon}}
color: {{.color}}

Restart the API server.

npm run start-api

Browse to the messages endpoint. http://localhost:8080/messages

Pick a message ID and browse to that message.

Feel free to explore and add your own data to the message objects!

When you are done, stop your API server to get ready for the next lab.

npm run stop-api