#INCLUDE

Create For Community

Tech Cohort Workshop 5

INCLUDE

Agenda

Backend!

• APIs
• Asynchronous Functions
• Error Handling Practices
• Backend Toolset

INCLUDE

INCLUDE

What is Backend?

Basically, handles all the logic of the app.

​

1. Server takes in requests from some endpoint/device
2. Processes the request and formats/handles the request for the user
3. Sends back an indication (typically JSON data) that the task was complete as the response

​

Key ideas: Servers, Databases, APIs, etc.

Core Idea

INCLUDE

1. Abstraction: Hide all the nitty gritty details from the user
2. Computation: More expensive to handle all the data processing in the front-end
3. Easier to debug: Can distinguish between issues for frontend and backend

What’s the point?

INCLUDE

INCLUDE

APIs

Application Programming Interface

• Way for two interfaces (i.e your computer and a server) to interact and transfer data if desired
• Mediator between client/server
• Each API has their own server endpoint URL
• EX: Paypal, Google Maps, etc

INCLUDE

INCLUDE

API Endpoints

• Found within the URL of your browser
• Typically indicated by /api that comes before it

​

Eg, http://localhost:3000/api/contact-form,

https://pokeapi.co/api/v2/pokemon?offset=20&limit=30

​

INCLUDE

URL Query Parameters

• Additional Parameters provided by the user
• key=value pairs
• First Query Parameter has ? before it
• Following query params will be split by &
• Useful for specifying filtering conditions used in a request

INCLUDE

INCLUDE

Live Demo

INCLUDE

REST APIs

Representational State Transfer API

API that follows RESTful conventions: CRUD

Used across the web for data handling across many devices

INCLUDE

Create, Read, Update, Delete

• Create: Making new data in a server

POST (url) + payload/body (new data)

• Read: Accessing existing data in a server

GET (url)

• Update: Changing existing data in a server

PUT (url) + payload/body (existing data identifier, new

data)

• Delete: Removing existing data in a server

DELETE (url) + payload/body (existing data identifier)

INCLUDE

Core Idea: Create, Read, Update, Delete

Each operation consists of a conventional HTTP request method

INCLUDE

INCLUDE

RESTful Naming Conventions

Nouns not Verbs

INCLUDE

Pluralize, unless Singleton resources

INCLUDE

Use Hyphens to improve readability

​

​

INCLUDE

Use queries to filter/sort/paginate

​

​

INCLUDE

INCLUDE

Live Demo

INCLUDE

Fetch

JavaScript Fetch

INCLUDE

• fetch: Built in async JS function used to make a request to some API
• Takes in a API url, headers, methods, body, etc
• Loads of options for a fetch call (refer to docs)

INCLUDE

Request & Response

Request & Response Objects

• Request Object: User’s desired action for some API
• Contains CRUD action, and possibly additional data
• Response Object: Data sent by the API to indicate the overall handling of the user’s request
• May include data stored in server depending on request type

​

​

INCLUDE

Various Response Codes

Key Response Codes

​

200: Success

404: Not Found

500: Internal Server Error

…

Many more exist, but these are the most frequent

INCLUDE

INCLUDE

Synchronous vs. Asynchronous

Synchronous vs. Asynchronous

INCLUDE

Synchronous Programming

• Execute one thing at a time
• Wait for one task to finish before moving on to the next one
• When processes are dependent on one another

Asynchronous Programming

• Execute multiple things at a time
• Parallelization
• Achieve outcomes faster
• When processes are independent of one another

INCLUDE

Promises

JavaScript Promises

• JavaScript’s way of indicating that a request to some external API is being processed, and will eventually return that response even if it is not immediate.
• Considered a class, so use new Promise(async task) to create a promise
• There can be multiple promises going at once

​

Think about how you might promise to pay your friend back after a meal.

Issues: Very verbose & can lead to long chains…

INCLUDE

Resolve & Reject

Functions that are built in parameters to a Promise Object

​

• Resolve: Promise request was successfully handled → What to do now?
• Reject: Promise request FAILED at some point → How do I handle the error?

INCLUDE

Then & Catch Methods

• .then(): Called after a Promise is resolved
• Used to pass in resolve function to handle the resulting response
• .catch(): Called after a Promise is rejected
• Used to pass in reject function to handle resulting error

​

INCLUDE

INCLUDE

Async & Await

JavaScript Async & Await

Alternative to JS Promises that offers cleaner & more readable code for handling API requests

​

• async: Used to mark a function to be asynchronous
• await: Put in front of asynchronous calls (i.e fetch) to halt code execution till the awaited request is to be finished

INCLUDE

INCLUDE

Live Demo

INCLUDE

Error Handling

Using Try & Catch

• try & catch: Used to try out a section of code and catching any errors during the process
• Good practice to prevent server from failing completely/producing unwanted side-effects

INCLUDE

Asynchronous function with error handling

async function f() {

try {

let response = await fetch(‘http://someurl’)

const data = response.json()

return data;

} catch (err) {

return errorResponse; //with error msg

}

}

Throwing an Error

throw(error): Used to intentionally end a request

• Typically used with try and catch

INCLUDE

INCLUDE

Creating your own API/server

External Server

Key Libraries for an External Server

​

express.js: Acts as our server

nodemon: Automatically reloads server on any changes

axios: Used as a safe alternative to JS built-in fetching

cors: Handles access perms to our server

INCLUDE

Next.js Serverless Functions

• Next.js has a built-in server that we can use through the /api endpoint
• Makes it so that we don’t need to host our own server & handle all those libraries
• Will be used for our client project.

INCLUDE

INCLUDE

Postman

What is Postman?

3rd Party Application that allows us to interact with any external or personal server endpoints that we make.

​

• This is our main tool for ensuring that the backend is fully functional, so please download it :)
• Great for testing the code without the browser

​

​

​

INCLUDE

INCLUDE

Live Demo

INCLUDE

Thanks for Coming!

Text me on slack if yg need anything!