GUÍA: API de la NASA Gratis para tus proyectos ⭐

¿Qué es la API de la NASA?

La API de la NASA es un conjunto de herramientas y datos que puedes usar para desarrollar aplicaciones relacionadas con la astronomía y los programas de la NASA. La API está disponible de forma 100% gratuita.

Sí… GRATUITA ?.

¿Por qué debería usarla?

La API de la NASA es una de las API más populares y completas disponibles, cuenta con una gran comunidad detrás para apoyarte en la construcción de tus proyectos.
Cuenta con una documentación muy detallada para que puedas acceder de forma muy simple a la inmensa cantidad de datos y contenidos.
Si buscas desarrollar una aplicación relacionada con el espacio o Astronomía, no lo pienses más, estás en el lugar correcto.

Guía: ¿Cómo empezar a usar la API de la NASA?

No hay mejor manera de aprender que con un proyecto práctico. Acompáñame creando una aplicación simple que obtiene las últimas 25 imágenes de Marte y las muestra en nuestra página.

No necesitas instalar librerías adicionales, ya que usaremos solo HTML, CSS y JavaScript. Puedes usar tu editor de código preferido, y si aún no tienes uno instalado te recomiendo leer mi post sobre Visual Studio Code.

1) Crear API Key

Lo primero que debes hacer es registrarte en https://api.nasa.gov/ e ir a la sección Generate API Key, donde deberás indicar un correo para recibir tu clave. Puedes leer más sobre APIs y herramientas para desarrolladores en la sección JavaScript de este sitio web.

2) Creando el HTML

Antes de hacer la consulta crearemos un archivo index.html, style.css y app.js. Comencemos montando la estructura HTML y enlazando nuestro archivos archivos de CSS y JS.

index.html:

<!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="./style.css">
    <title>@fenandogutz - Guía API Nasa</title>
</head>
<body>
    <h1>Fotos recientes de Marte</h1>
    <div class="container">
        <div id="photos"></div>
    </div>

    <script src="./app.js"></script>
</body>
</html>

3) Creando la consulta en JavaScript

Para tu primera prueba con la API, he seleccionado la funcionalidad Latest Photos, es muy rápido de implementar y definitivamente lo recomiendo si estás comenzando a experimentar o no tienes tanta experiencia consumiendo APIs.

app.js:

const apiKey = 'YOUR_API_KEY';
let page = 1; // 25 imágenes por página, la página 1 devuelve las más recientes

// Obtener imágenes
const peticion = fetch(`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/latest_photos?api_key=${apiKey}&page=${page}`);

peticion
    .then( resp => resp.json())
    .then( data => {
        const photos = data.latest_photos;
        let htmlTemplate = '';
        photos.forEach(photo => {
            htmlTemplate += `<img src="${photo.img_src}">`;
            console.log(htmlTemplate);
            
        });
        document.querySelector('#photos').innerHTML += htmlTemplate;

    })
    .catch(console.error);

El código anterior hace la petición a la API, y si la respuesta es correcta, tomará el div html que creamos (#photos) para insertar las 25 imágenes. En caso de obtener algún error lo mostraremos en la consola.

4) Aplicando estilos CSS

Con nuestra página ya funcionando, lo último que nos queda es aplicar algunos estilos CSS para mostrar las imágenes de una manera más atractiva y poder consumir la página web en todos los dispositivos.

style.css:

* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
    background-color: #101010;
    color: #d6d6d6;
    overflow-x: hidden;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#photos {
    max-width: 600px;
    padding: 16px;
}

h1 {
    margin-top: 32px;
    margin-bottom: 24px;
    text-align: center;
}

img {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 16px;
}

Proyectos que usan la API de la NASA

4 proyectos para inspirarte que usan la API de la NASA. Estos proyectos cubren una amplia gama de temas y están disponibles para su uso gratuito.

MARS – Latest Photos by @FernandoGutz

Sitio Web: https://mars.fernandogutz.com/

Sí, es un proyecto muy simple desarrollado por mí con la misma info que he compartido en la guía de arriba, quería mostrarlo en el primer puesto de este listado para que veas que no necesitas grandes herramientas para comenzar a crear con la API. Seguro que al verlo se te ocurren cosas interesantes.

NASA Images

NASA Images es un sitio web gratuito que en el que puedes buscar y ver imágenes de la NASA. El sitio tiene una interfaz de usuario intuitiva y te permite filtrar las imágenes por tema, fecha o ubicación.

NASA TV

En NASA TV puedes ver la televisión en vivo de la NASA. El sitio transmite las últimas noticias y eventos de la NASA, además de ofrecer una variedad de programas educativos y de entretenimiento.

NASA Space Weather

NASA Space Weather es un sitio web gratuito que te permite consultar el clima espacial. El sitio ofrece una variedad de datos y herramientas, además de una sección de noticias para mantenerte al día de las últimas novedades.

Conclusión

La API de la NASA es una gran opción si buscas crear una aplicación relacionada con el espacio, la astronomía o los programas de la NASA. La API está disponible de forma gratuita y te ofrece una cantidad ridícula de datos y herramientas.

Si ya tienes un proyecto en mente y no sabes como comenzar, te sugiero ir a la sección de Diseño UX/UI, donde te ayudaré a darle vida a tu idea y crear algo que tus usuarios realmente quieran consumir.