DEV Community

Cover image for NASAPLACE
Andrés Jiménez Arias
Andrés Jiménez Arias

Posted on

NASAPLACE

andresjiar image

Bienvenidos a Nasa Place

Descubra datos curiosos e interesantes que proporciona la NASA a través de la facilidades que te proporciona la herramienta GraphQL
Alt Text

Lanzamiento de NASA GraphQL API

Para acceder a la App solo tienes que poner en la barra de tu buscador nasa.place y accederás al cliente o también puedes pinchar aquí.

Alt Text

🎇✨Nasa Place API ✨🎇
NASAPLACE API ya esta disponible!!!🎉
Nasa Place consta de una API GraphQL, la cual es la predeterminada, y también tiene una API Rest a la que puedes acceder poniendo /rest en la barra donde se encuentra la dirección de la página.
En esta API en la que puedes explorar algunos datos curiosos que ofrece la NASA.
En esta API puedes explorar:

  • Eventos naturales 🌎
  • Fotos de eventos astronómicos 🌌
  • Exoplanetas 🪐
  • El tiempo registrado por el módulo InSight Mars de la NASA 🌦🪐
  • Fotos hechas por los rovers Curiosity, Opportunity y Spirit 🤖📸
  • Información sobre los asteroides cercanos a la Tierra ☄
  • Información sobre algunos objetos que orbitan en la Tierra 🛰
  • Algunos de los proyectos en los que esta trabajando la NASA 💻📋

Haz click en el link y interactúa con la API

Antes de que este blog se vuelva algo más técnico, voy a explicar el porque de la creación de esta API.
Soy un estudiante autodidacta de Desarrollador Web y cuando ya complete varios cursos de GraphQL, TypeScript, React, etc... decidí aventurarme a hacer una app con APIs REST y GraphQL, buscando APIs libres, encontré una pagina en la que había muchas APIs libres de la NASA y decidí coger una de ellas y empezar con la migración a GraphQL, en este caso creo recordar que la primera fue la de los Exoplanetas. Al cabo de poco tiempo conseguí terminarla y no le vi demasiada dificultad, así que, me decidí a coger varias de estas APIs que yo considero que son datos interesantes y que tenemos libre accesos a ellos y juntarlos todos en una sola aplicación GraphQL para tener un acceso fácil a ellos.

Migración

Decidí realizar la migración a parte de para probar mis conocimientos, es porque para poder acceder a estos datos curiosos tenia que buscar la URL que me diera el JSON correcto, tiempos de cargas largos hasta que mi navegador era capaz de cargar una cantidad de datos enorme cuando yo solo quería explorar los datos.

Los pasos que seguí fueron:

1️⃣Configurar el server y Schema
2️⃣Crear los Typedef's y resolvers
3️⃣Implementar resolver triviales
4️⃣Arreglar errores y aplicar las lecciones aprendidas
5️⃣Lanzarla 🚀

GraphQL

Beneficios

No voy a ponerme a hablar sobre todos los pros/contras entre GraphQL y REST ya que hay muchos artículos escritos por expertos sobre este tema. Pero si os puedo dejar a pagina oficial de GraphQL si queréis saber sobre este lenguaje de consulta (Query language)

Implementación

Vamos ha hablar sobre la estructura del proyecto y sobre type-safety enseñando las principales herramientas y la mejor forma de usarlas:

🟣 Seguire el enfoque Schema-First utilizando una estructura de esquema modular de dominio.

Alt Text

🟣 El Schema esta dividido por diferetes colecciones datos (apod, eonet, epic, exoplanet, insight, marsroverphoto, neo, techport, tle), también contiene global type definitions (compuesto por GraphQL type definitions comunes y primitivas)
Todos ellos se subdividen en los siguientes:

🔸 typeDefs
Contiene las type definitions de recopilación de datos modularizadas.

🔸 resolvers
Funciones responsables de buscar y filtrar los datos deseados.

🔸 utils
¡Compuesto por funciones de análisis o cualquier operación que los datos devueltos puedan necesitar!

typeDefs Alt Text resolvers

🟣 Proporciona Type-Safety autogenerado los tipos de TypeScript en los typeDefs y resolvers .

CodeSandbox

Me decidí ha hacer tres CodeSandbox con una versión simple con React, Angular y Vue, para que podaís ver más fácil como obtengo los datos de las diferentes APIs para el cliente.

🔹 Angular Starter ❤ (CodeSandbox)[https://codesandbox.io/s/angular-starter-nasa-place-iuf5t]

🔹 React Starter 💙 (CodeSandbox)[https://codesandbox.io/s/react-starter-nasa-place-h660w]

🔹 Vue Starter 💚 (CodeSandbox)[https://codesandbox.io/s/vue-starter-nasa-place-ms93w]

Documentación

Toda la información que se encuentra disponible en NASAPLACE API viene de las APIs abiertas de la NASA, las cuales las puedes encontrar en esta pagina página
Os dejo también mis redes sociales y los enlaces de los repositorios de github del cliente, y de la API .
Puedes preguntarme cualquier duda sobre nasa place vía Twitter.
💻Client 💻API

👉 Twitter (https://twitter.com/AndresJiAr)
👉 Linkedin (https://www.linkedin.com/in/andresjiar/)
👉 Github (https://github.com/AndresJiAr)

Top comments (0)