Una interfaz es un mecanismo que permite la comunicación entre usuarios y un “robot” u objeto tecnológico, por medio de botones, formularios, etc.

API (Application Program Interface) es una interfaz que permite la comunicación entre “robots” (para lo que es desarrollo web sería frontend y backend).

API REST o API RESTFUL cumple la función de una API, con la diferencia que lo hace con la ayuda de internet (HTTP). Con ella se recibirán los datos en formato JSON por parte del backend para que mediante el frontend se muestren esos datos como imágenes, vídeos, etc a los usuarios.

SSR VS CSR

Untitled

SPA VS MPA

Una Single Page Application (SPA) es, como dice la misma palabra, una única página que de manera dinámica, sobreescribe el contenido de la misma en lugar de cargar una nueva: así es como funcionan, por ejemplo, Gmail, Twitter y Facebook. Esta manera dinámica de cargar el contenido de una página ofrece una experiencia totalmente natural para el usuario, pudiendo prescindir de lo tiempos de carga.

Una Multi-Page Application (MPA) es el tradicional sitio web, donde cada página representa una petición especifica a un servidor que nos devuelve, tanto en imágenes como en contenido, un HTML nuevo que corresponde a la página que hemos pedido. Teniendo todo esto en cuenta, podemos imaginar que el volumen de contenido que gestionan es considerable.

Untitled

1.-CONSUMO DE UNA API REST

Para consumir una API REST, existe un repositorio en github que almacena varios enlaces a API’s REST públicas. En enlace es: https://github.com/public-apis/public-apis

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="estilos.css">
    <title>GATOS ALEATORIOS</title>
</head>
<body>
    <main>
        <div class="container-main">
            <h1>GATO MIAU MIAU</h1>
            <img alt="cat-img">
            <button>NEW CAT</button>
            <script src="./main.js"></script>
        </div>
    </main>
</body>
</html>

*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
    font-size: 62.5%;
    background-image: url(<https://e0.pxfuel.com/wallpapers/69/418/desktop-wallpaper-pin-de-trischell-magbuhat-en-cat-phone-fondos-de-gato-empapelado-de-gato-fondo-de-pantalla-de-dibujos-animados-cat-cartoon.jpg>);
    background-repeat: repeat;
}
main{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container-main{
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid black;
    border-radius: 20px;
    background-color: whitesmoke;
}
.container-main h1{
    width:500px;
    font-size: 3rem;
    text-align: center;
}
.container-main img{
    width:500px;
}
.container-main button{
    margin: 16px 0;
    border: none;
    background-color: aquamarine;
    padding: 16px;
    font-weight: bold;
    font-size: 2rem;
    border-radius: 50px;
}

const URL = "<https://api.thecatapi.com/v1/images/search>";

async function fetchData(url) {
    const response = await fetch(url);
    const data = await response.json();
    const img = document.querySelector("img");
    img.src = data[0].url;
}

fetchData(URL);

const button = document.querySelector("button");
button.addEventListener("click",()=>{
    fetchData(URL);
});

Untitled