Primero importamos las dependencias a utilizar:
npm install express axios pathUna vez establecemos un puerto para el servidor, hacemos la petición.
Necesitaremos una función async await:
asyncfunctiongetRandomUnsplashBackground() {
}
Donde, usaremos un try catch para manejar la respuesta.
Pegamos la url y establecemos los parametros necesarios.
En este caso usaremos Unsplash
try {
const response = await axios.get('https://api.unsplash.com/photos/random', {
params: {
query: 'turism', // Coincidencia a buscarorientation: 'landscape', // Tipo de imagenclient_id: 'YOUR_ACCESS_KEY'// Tu key de acceso
}
})
} catch (error) {
}
Manejamos los errores:
try {
...
if (!response) throwError
const imageUrl = response.data.urls.full
return imageUrl
} catch (error) {
console.log(error)
}
Además de recibir datos en un json, vamos a mostrarlos, es por eso que, crearemos una carpeta public, con un archivo index.html.
Usaremos path, para que nos permita navegar por estos archivos.
app.use(express.static(path.join(__dirname, 'public'))) // Carpeta publicEn el archivo index.html, crearemos una interfaz en donde mostraremos la imagen y un botón para hacer la petición:
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Imagen Aleatoriatitle>
<linkrel="stylesheet"href="style.css">
head>
<body><h1>Imagen Aleatoriah1>
<divclass="img-container">
<imgid="random-image"src=""alt="Imagen Aleatoria">
div>
<buttononclick="loadRandomImage()">Cargar Imagen Aleatoriabutton>
<scriptsrc="script.js">script>
body>
html>
Ya tenemos la interfaz lista. Sin embargo, necesitamos una función que se ejecute en cada petición:
Primero creamos las constantes
const idImage = document.getElementById('random-image')
En nuestra función, queremos hacer una petición GET a la dirección /img-gen
functionloadRandomImage(){
}
Por eso, usamos fetch y le damos la dirección, una vez recibida se transforma a json
fetch('/img-gen')
.then(response => response.json())
Acedemos al objeto y lo asignamos a nuestra constante
...
.then(data => {
idImage.src = data.imageUrl
})
.catch(error => console.log(error))
finalmente, ejecutamos la pagina e ingresamos al puerto:
npm run dev
Este seria nuestro resultado 😁
