Introduction and Consume an API REST. Communication in Frontend and Backend.
¿ Qué es una API ?
API: Interfaz de Programación de aplicaciones. Permite que dos o más programas se comuniquen entre si.
Nos permite que un software ofrezca un servicio a otro software.
La "API", no son usadas directamente por el usuario sino por el programador que usa la "API", para implementar su programa.
Normalmente usamos el formato "JSON".
API REST (Representation State Transfer)
Estilo de arquitectura de software para sistemas hepermedia distribuidos como la "World Wide Web".
API RESTFul
RESTFul API: Es una "API", basada en "REST".
FETCH
La API Fetch proporciona una interfaz para recuperar recursos (incluso a través de la red).
CRUD (Create, Read, Update, Delete)
(Crear, Leer, Actualizar, Eliminar) Operaciones básicas que se pueden realizar con la información almacenada.
CRUD & HTTP
CRUD & HTTP (Method) => Create == POST, Read == GET, Update == PUT, Delete == DELETE.
CRUD & API (Application Programming Interface)
API: Interfaz de Programación de aplicaciones. Permite que dos o más programas se comuniquen entre si.
Nos permite que un software ofrezca un servicio a otro software.
La "API", no son usadas directamente por el usuario sino por el programador que usa la "API", para implementar su programa.
Normalmente usamos el formato "JSON".
Endpoints
Los endpoints son las URLs de un API o un backend que responden a una petición. Los mismos entrypoints tienen que calzar con un endpoint para existir. Algo debe responder para que se renderice un sitio con sentido para el visitante.
Endpoints Params (Parámetros ":")
app.get('/products', (req, res) => {
res.json([
{
name: 'player soccer',
price: 1750,
},
{
name: 'Shoes soccer',
price: 3500,
},
]);
});
app.get('/categories/:categoriesId/products/:productsId', (req, res) => {
const { categoriesId, productsId } = req.params;
res.json({
categoriesId,
productsId,
});
});
Query Parameters (GET:parámetros query) => Filtrar ("?", "size", "limit", "ofset")
Los endpoints especificos deben declararsen antes de los endpoints dinamicos. Uno de los mandamientos.
/*
"?", "size", "limit", "ofset"
*/
// api.example.com/products
// api.example.com/products?page=1
// api.example.com/products?limit=10&offset=0
// api.example.com/products?region=USA
// api.example.com/products?region=USA&brand=XYZ
// === Query Params
app.get("/users", (req, res) => {
const { limit, offset } = req.query;
if(limit && offset) {
res.json({
limit,
offset
});
} else {
res.send("Sorry! Not exist params");
}
});Todo lo que sea "específico", debe de ir antes de lo que es "dinámico".
//app.get('/products/filter', (req, res) =>
//app.get('/products/:id', (req, res) => {};Rapid API Hub
API Public GitHub
ExpressJs
const express = require(`express`);
const app = express();
const port = process.env.port || 3000;
//*? === Routing ===*/
app.get('/', (req, res) => {
res.send('Hello World');
});
//*? === Listen Port ===*/
app.listen(port, () => {
console.log(`Server is running in Port http://localhost:${port}...`);
});NPM
NodeJs
Nodemon
// => Install Global
npm install -g nodemon
// => Install Development Dependency
npm install --save-dev nodemon
//nodemon ./server.js ==> (localhost 8080 / 3000)
Run Dev (Desarrollo)
run server
npm run => "dev": "nodemon app.js",
Run Production
run server
npm run => "start": "node app.js",
Config Good Practice (Project ESlint & Prettier & Nodemon)
npm i nodemon eslint eslint-config-prettier eslint-plugin-prettier prettier -D
GitIgnore
Model Client & Server
( HTTP,HTTPS,APi REST)
HTTP & HTTPS ( Hypertext Transfer Protocol )
Protocolo de Transferencia de Hipertexto.
Modelo que usamos para acceder a Internet y obtener recursos e información.
El protocolo HTTP, define el formato de los mensajes (request).
Un protocolo, es un conjunto de reglas que permiten transmitir información entre dispositivos de una red.
Client (Cliente)
El Navegador desde el cual se realizan solicitudes a un servidor.
Server (Servidor)
Programa que se ejecuta en un servidor físico para ofrecer un servicio al cliente. Envía información.
El servidor conoce el formato esperado del mensaje que envía el cliente. Además, el cliente, conoce el formato esperado del mensaje que recibe del servidor.
Solicitud (Request) HTTP
- Métodos HTTP
- Caminos (Path)
- Versiones HTTP
- Cabeceras (Headers)
- Curpo (body)
Headers (Cabeceras)
Proveen información adicional sobre la solicitud.
Body (Cuerpo)
Contiene la información que debe ser enviada al servidor para procesar la solicitud. Formato JSON. No se incluye en todas las solicitudes (requieren enviar información como: POST y PUT).
HTTPS (Hypertext Transfer Protocol (HTTP))
Le agrega una capa extra de seguridad.
Método (Method) HTTP
Verbo ("verbos HTTP") o solicitud que indica la intención de la solicitud.
- GET (para Solicitar un recurso específico).
- POST (Para Crear un recurso específico. Agregar ususarios nuevos a una base de datos).
- PUT (Para Modificar un recurso específico. Hacer un cambio en una base de datos.)
- DELETE (Para Eliminar un recurso específico).
Respuesta (Response) HTTP / Código de Estado HTTP
- Código de estado (200, 404...etc).
- Texto de Estado.
- Texto de Estado.
- Cabeceras (Headers).
- Cuerpo (Body).
Números que indican si se han completado exitosamente o no, las solicitudes HTTP.
- Respuestas informativas (100–199),
- Respuestas satisfactorias (200–299),
- Redirecciones (300–399),
- Errores de los clientes (400–499),
- Errores de los servidores (500–599).
Estados Más comunes:
- 200 OK: La respuesta fue exitosa.
- 400 Bad Request: El servidor no pudo interpretar la solicitud.
- 404 Not Found: El mservidor no pudo encontrar el recurso solicitado.
- 500 Internal Server Error: El servidor encontró una situación que no sabe cómo manejar.
AUTH (Autentication or Autenticación) & CORS (Intercambio de Recursos de Origen Cruzado)
Image Create for: Juan Espinola in Course With Platzi
Endpoints and Query Parameters
API Keys
Header Content-Type
FormData
Cliente HTTP basado en Promesas para el navegador y node.js
// NPM
npm install axios
// CDN JS
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>// Axios Config
axios(config)
// Enviar una petición POST
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
// Petición GET para una imagen remota en node.js
const api = axios.create({
method: 'get',
api_url: 'http://bit.ly/2mTM3nY',
responseType: 'stream'
});
api.default.headers.common[`X-API-KEY`] = API_KEY;
.then(function (response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
// Enviar petición GET (método por defecto)
axios('/user/12345');
//
async function save() {
const response = await api.post(`/endpoint`, {
image_id: id;
});
}
save();
// ==> Ya no es necesario poner res.json(); >> Ya lo trae.
// ==> Ya trae data e status >> Ya no es necesario poner (res.status === 200)Mode
- CORS
- NO-CORS
- same-origin
Caché
- Default
- no-store
- reload
- no-cache
- force-cache
- only-if-cached
Redirect
- Follow
- error
- manual
Request.cache
Fetch()-Web APIs
Request-Web APIs
HTTP caching
Headers-Web APIs
HTTP caching
Response-Web APIs
Qué es GraphQL
¿REST o GraphQL?, he ahí el dilema
WebSockets en NodeJS
El rey ha muerto, larga vida a GraphQL
El rey ha muerto, larga vida a GraphQL
Web 3.0: ¿por qué está transformando internet?
Web 3.0: ¿por qué está transformando internet?
SendBeacon
- No espera una respuesta del servidor
- Es buena idea para analytics
Apollo