{"id":27840,"date":"2022-03-21T19:24:36","date_gmt":"2022-03-21T19:24:36","guid":{"rendered":"http:\/\/Creating-an-Asteroid-Map-with-the-NASA-API"},"modified":"2022-03-21T19:24:36","modified_gmt":"2022-03-21T19:24:36","slug":"creating-an-asteroid-map-with-the-nasa-api","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/","title":{"rendered":"Creating an Asteroid Map with a NASA API"},"content":{"rendered":"

There are a lot of cool APIs out there that let you work with interesting datasets. If you are interested in space at all, then the NASA APIs might be something you want to check out.<\/p>\n

In this post, we\u2019ll use one of the NASA APIs to create an asteroid map. This will give us a representation of how many asteroids came close to hitting the Earth and how big they were. We\u2019ll save these images to Cloudinary so we can review them later.<\/p>\n

Initial setup<\/h2>\n

There are a few things we need to have in place before starting on the code. First, you\u2019ll need an API key for the NASA Asteroids – NeoWs API we\u2019ll be using. You can get a free one here<\/a>. It\u2019ll send the API key to the email you enter.<\/p>\n

Next, you\u2019ll need a Cloudinary account to store the asteroid map images that you can reference later. You can sign up for a free account here<\/a>.<\/p>\n

We\u2019ll be working with a local Postgres database, so if you don\u2019t have that installed, you can download it here<\/a>.<\/p>\n

Now that we have all of these things set up, we can start working on the app.<\/p>\n

Generate a new Redwood project<\/h2>\n

In a terminal, run the following command:<\/p>\n

$ yarn create redwood-app asteroid-map\n<\/code><\/span><\/pre>\n
This will create a lot of new files and directories for you. Our focus will be in the web<\/code> and api<\/code> folders. The web<\/code> folder is where we\u2019ll write all fo the front-end code in React. The api<\/code> folder is where we\u2019ll handle the Postgres connection and the GraphQL back-end.<\/p>\n
Create the database schema and connection<\/h2>\n
We\u2019ll start by connecting to the database and setting up our schema. First, open the .env<\/code> file in the root of the project. You\u2019ll see a commented-out line that defines the DATABASE_URL<\/code>. Uncomment that line and update it to match your local connection string. That might look similar to this:<\/p>\n
DATABASE_URL=postgres:\/\/postgres:admin@localhost:5432\/asteroids<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You won\u2019t need to create a new database manually. When we run the first migration, the asteroids<\/code> database will be created for you.<\/p>\n
Update the provider<\/code> value from sqlite<\/code> to postgresql<\/code>. This tells Primsa we\u2019re working with a Postgres instance. You can see where the connection string is being read from the DATABASE_URL<\/code> value we set earlier.<\/p>\n
Next, you can delete the example model and replace it with the following:<\/p>\n
model Map<\/span> {\n  id        Int    @id @default<\/span>(autoincrement())\n  name      String<\/span>\n  startDate DateTime\n  endDate   DateTime\n  mapUrl    String<\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This model represents the data we\u2019ll store in the database. The NASA API returns asteroid information based on the dates we submit, so we\u2019re storing those to know which dates correspond to the asteroid maps.<\/p>\n
Running a database migration<\/h3>\n
Since we have the schema in place for the table we\u2019ll save the asteroid maps to, let\u2019s go ahead and run a database migration. In your terminal, run the following command:<\/p>\n
$ yarn redwood prisma migrate dev\n<\/code><\/span><\/pre>\n
This will create the database (if needed) and then add the Map<\/code> table to it.<\/p>\n
Make the GraphQL types and resolvers<\/h2>\n
That\u2019s all we need to do on the database side of this app. Now we can turn to the GraphQL server. Redwood\u2019s CLI has a lot of commands that do some heavy lifting for us. We\u2019re going to generate the types and resolvers for our back-end with this command:<\/p>\n
$ yarn redwood generate sdl --crud map\n<\/code><\/span><\/pre>\n
This will generate several files for us that handle all of the CRUD functionality for our maps. The only things we need to add are the types for the data we get from the NASA API and a resolver to fetch that data.<\/p>\n
Adding the asteroid data types<\/h3>\n
In the api > src > graphql<\/code> directory, open the newly generated maps.sdl.ts<\/code> file. This already has the type definitions for the CRUD queries and mutations we might use to update the database.<\/p>\n
Now we\u2019ll add the type to define the data we\u2019ll get from the API, the input type to send to the API, and the query we can use to return the data. Right below the Map<\/code> type, add this code:<\/p>\n
type Asteroid {\n  missDistance<\/span>: String<\/span>\n  estimatedDiameter<\/span>: String<\/span>\n}\n\ninput AsteroidInput {\n  startDate<\/span>: Date<\/span>!\n  endDate: Date<\/span>!\n  viewDate: Date<\/span>!\n}\n\ntype Query {\n  asteroids(input: AsteroidInput): [Asteroid] @requireAuth\n  maps<\/span>: [Map<\/span>!]! @requireAuth\n  map(id: Int!): Map<\/span> @requireAuth\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
That will give us access to the query and what it needs. Let\u2019s go define the resolver to fetch this data.<\/p>\n
Calling the NASA API through a resolver<\/h3>\n
This is one of the cool things about GraphQL. You can call another API in a resolver and the data gets sent through the same endpoint as if it were hitting your own database.<\/p>\n
In api > src > services > maps<\/code>, open the maps.js<\/code> file. This has the CRUD resolvers created from that CLI command we ran earlier. Below all of these, add the following resolver to fetch the asteroid data:<\/p>\n
export<\/span> const<\/span> asteroids = ({ input }<\/span>) =><\/span> {\n  return<\/span> fetch(`https:\/\/api.nasa.gov\/neo\/rest\/v1\/feed?start_date=${input.startDate.toISOString().split('T'<\/span>)[0<\/span>]}<\/span>&end_date=${input.endDate.toISOString().split('T'<\/span>)[0<\/span>]}<\/span>&api_key=${your_api_key_really_goes_here}<\/span>`<\/span>)\n  .then(response<\/span> =><\/span> {\n    return<\/span> response.json()\n  })\n  .then(rawData<\/span> =><\/span> {\n    const<\/span> data = rawData.near_earth_objects[input.viewDate.toISOString().split('T'<\/span>)[0<\/span>]]\n\n    const<\/span> asteroids = data.map(value<\/span> =><\/span> {\n      return<\/span> {\n        missDistance<\/span>: value.close_approach_data[0<\/span>].miss_distance.kilometers,\n        estimatedDiameter<\/span>: value.estimated_diameter.kilometers.estimated_diameter_max\n      }\n    })\n    \n    return<\/span> asteroids\n  })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This resolver takes the input we pass to it and makes this request to the API. Like with many API requests, we have to send the inputs in a particular format. That\u2019s why we\u2019re splitting the date string the way we are. GraphQL passes the date in a format the NASA API doesn\u2019t like.<\/p>\n
Then we get the data from the response and check out the asteroids that were close by on the viewDate<\/code> we pass in. This date can be any time between the start and end dates. We take the data returned from the API and extract the values we need and that\u2019s what we pass in a successful response.<\/p>\n
That\u2019s everything for the back-end! We have all of the types and resolvers we need to get the asteroid data and save things to the database. We can turn our attention to the front-end where we\u2019ll wrap things up.<\/p>\n
Building the user interface<\/h2>\n
Let\u2019s jump right in. There\u2019s one package that we need to install in order to save the asteroid maps we create. In your terminal, go to the web<\/code> directory and run:<\/p>\n
$ yarn add html-to-image\n<\/code><\/span><\/pre>\n
This will allow us to capture an image of the asteroid map really quickly.<\/p>\n
We can use the Redwood CLI to generate the asteroid map page for us. So in your terminal go back to the root of the project and run the following command:<\/p>\n
$ yarn redwood generate page asteroid\n<\/code><\/span><\/pre>\n
This will update the Routes.tsx<\/code> file to have this new path and it generates a few files for us in web > src > pages > AsteroidPage<\/code>. The file we will work in is AsteroidPage.tsx<\/code>. Open this file and delete all of the existing import statements and replace them with these:<\/p>\n
import<\/span> { useQuery, useMutation } from<\/span> '@redwoodjs\/web'<\/span>\nimport<\/span> { useState, useRef } from<\/span> 'react'<\/span>\nimport<\/span> { toPng } from<\/span> 'html-to-image'<\/span>\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
After these imports, we can add the GraphQL query to get our asteroid data and the mutation to save the map to the Cloudinary and the database.<\/p>\n
const<\/span> CREATE_MAP_MUTATION = gql`\n  mutation CreateMapMutation($input: CreateMapInput!) {\n    createMap(input: $input) {\n      id\n    }\n  }\n`\n\nconst<\/span> GET_ASTEROIDS = gql`\n  query GetAsteroids($input: AsteroidInput!) {\n    asteroids(input: $input) {\n      missDistance\n      estimatedDiameter\n    }\n  }\n`\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
Adding states and using hooks in the component<\/h3>\n
With all of the imports and GraphQL definitions in place, let\u2019s start working inside the AsteroidPage<\/code> component. You can delete everything out of the component because we\u2019ll be writing a lot of different code.<\/p>\n
We\u2019ll start by adding the states and other hooks we need for the component.<\/p>\n
const<\/span> [createMap] = useMutation(CREATE_MAP_MUTATION)\n\nconst<\/span> canvasRef = useRef(null<\/span>)\n\nconst<\/span> [startDate, setStartDate] = useState(\"2021-08-12\"<\/span>)\nconst<\/span> [endDate, setEndDate] = useState(\"2021-08-15\"<\/span>)\nconst<\/span> [viewDate, setViewDate] = useState(\"2021-08-13\"<\/span>)\n\nconst<\/span> { loading, data } = useQuery(GET_ASTEROIDS, {\n  variables<\/span>: { input<\/span>: { startDate<\/span>: startDate, endDate<\/span>: endDate, viewDate<\/span>: viewDate }},\n})\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
First, we create the method that does the mutation to add new records to the database. Then we set the canvas ref that will hold the image of the asteroid map. Next, we set a few different date states. These will let us adjust what\u2019s in the map we save and what we see in the app.<\/p>\n
Then there\u2019s the data fetch query. This calls that resolver we made to get the asteroid data from the NASA API. We pass in the input<\/code> in the shape we defined in the types on the back-end. These values come from the states, so whenever the state values change we can get a new asteroid map.<\/p>\n
Having a loading state<\/h3>\n
You\u2019ll notice that we have a loading<\/code> value from the useQuery<\/code> call. This tells us if the data is still being fetched. It\u2019s important to have some kind of element that tells the user a page is loading. This also prevents the app from crashing when the data isn\u2019t available yet. So below the data query, add this code:<\/p>\n
if<\/span> (loading) {\n  return<\/span> <div<\/span>><\/span>Loading...<\/div<\/span>><\/span><\/span>\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This just renders a loading message on the page.<\/p>\n
The elements that get rendered<\/h3>\n
Now that we have the data coming in, let\u2019s write the return statement for what should render on the page. Below the loading state check, add the following code and we\u2019ll go through it:<\/p>\n
return<\/span> (\n  <><\/span>\n    <h1<\/span>><\/span>AsteroidPage<\/h1<\/span>><\/span>\n    <form<\/span> onSubmit<\/span>={submit}<\/span>><\/span>\n      <div<\/span>><\/span>\n        <label<\/span> htmlFor<\/span>=\"mapName\"<\/span>><\/span>Map Name<\/label<\/span>><\/span>\n        <input<\/span> type<\/span>=\"text\"<\/span> name<\/span>=\"mapName\"<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span>><\/span>\n        <label<\/span> htmlFor<\/span>=\"startDate\"<\/span>><\/span>Start Date<\/label<\/span>><\/span>\n        <input<\/span> type<\/span>=\"date\"<\/span> name<\/span>=\"startDate\"<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span>><\/span>\n        <label<\/span> htmlFor<\/span>=\"endDate\"<\/span>><\/span>End Date<\/label<\/span>><\/span>\n        <input<\/span> type<\/span>=\"date\"<\/span> name<\/span>=\"endDate\"<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span>><\/span>\n        <label<\/span> htmlFor<\/span>=\"viewDate\"<\/span>><\/span>View Date<\/label<\/span>><\/span>\n        <input<\/span> type<\/span>=\"date\"<\/span> name<\/span>=\"viewDate\"<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n      <button<\/span> type<\/span>=\"submit\"<\/span>><\/span>Save Asteroid Map<\/button<\/span>><\/span>\n    <\/form<\/span>><\/span>\n    <button<\/span> type<\/span>=\"button\"<\/span> onClick<\/span>={makeAsteroidMap}<\/span>><\/span>View Map<\/button<\/span>><\/span>\n    <canvas<\/span> id<\/span>=\"asteroidMap\"<\/span> ref<\/span>={canvasRef}<\/span> height<\/span>=\"3000\"<\/span> width<\/span>=\"3000\"<\/span>><\/span><\/canvas<\/span>><\/span>\n  <\/><\/span><\/span>\n)\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
There\u2019s not as much going on as it might seem. We have a form that has a few input elements for the name we want to give an asteroid map and the dates we need to get the data and image. This form has a submit button that fetches new asteroid data based on our inputs and saves a new map.<\/p>\n
There\u2019s another button that lets us view the asteroid map in the canvas element below it. The canvas element is what we target in the useRef<\/code> hook above. The form and view map buttons have functions that we need to write.<\/p>\n
If you want to look at the app so far, run yarn redwood dev<\/code> in your terminal. You should see something like this.<\/p>\n
\"basic<\/p>\n
The submit function<\/h3>\n
We\u2019ll add this function right below the loading state check. This will get the form data, update the date states, take a snapshot of the asteroid map in the canvas, upload it to Cloudinary, and then make a new database record.<\/p>\n
async<\/span> function<\/span> submit<\/span>(e<\/span>) <\/span>{\n  e.preventDefault()\n  const<\/span> mapName = e.currentTarget.mapName.value\n  const<\/span> startDate = e.currentTarget.startDate.value\n  const<\/span> endDate = e.currentTarget.endDate.value\n  const<\/span> viewDate = e.currentTarget.viewDate.value\n\n  setStartDate(startDate)\n  setEndDate(endDate)\n  setViewDate(viewDate)\n  \n  if<\/span> (canvasRef.current === null<\/span>) {\n    return<\/span>\n  }\n\n  const<\/span> dataUrl = await<\/span> toPng(canvasRef.current, { cacheBust<\/span>: true<\/span> })\n\n  const<\/span> uploadApi = `https:\/\/api.cloudinary.com\/v1_1\/${cloudName}<\/span>\/image\/upload`<\/span>\n\n  const<\/span> formData = new<\/span> FormData()\n  formData.append('file'<\/span>, dataUrl)\n  formData.append('upload_preset'<\/span>, upload_preset_value)\n\n  const<\/span> cloudinaryRes = await<\/span> fetch(uploadApi, {\n    method<\/span>: 'POST'<\/span>,\n    body<\/span>: formData,\n  })\n\n  const<\/span> input = {\n    name<\/span>: mapName,\n    startDate<\/span>: new<\/span> Date<\/span>(startDate),\n    endDate<\/span>: new<\/span> Date<\/span>(endDate),\n    mapUrl<\/span>: cloudinaryRes.url\n  }\n\n  createMap({\n    variables<\/span>: { input },\n  })\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
You\u2019ll need to get your cloudName<\/code> and upload preset value from your Cloudinary console. The only function left to write is the one to draw the asteroid map on the canvas.<\/p>\n
Drawing the asteroid map<\/h3>\n
This will create a different sized circle at various distances from the left side of the page to show how close they were to Earth and how big they were.<\/p>\n
function<\/span> makeAsteroidMap<\/span>(<\/span>) <\/span>{\n  if<\/span> (canvasRef.current.getContext) {\n    let<\/span> ctx = canvasRef.current.getContext('2d'<\/span>)\n\n    data.asteroids.forEach((asteroid<\/span>) =><\/span> {\n      const<\/span> scaledDistance = asteroid.missDistance \/ 75000<\/span>\n      const<\/span> scaledSize = asteroid.estimatedDiameter * 100<\/span>\n      let<\/span> circle = new<\/span> Path2D()\n\n      circle.arc(scaledDistance * 2<\/span>, scaledDistance, scaledSize, 0<\/span>, 2<\/span> * Math<\/span>.PI)\n  \n      ctx.fill(circle)\n    })\n  }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The scaling here isn\u2019t based on anything in particular, so feel free to play around with the math!<\/p>\n
Now if you run the app and click the View Map button, you\u2019ll see something like this.<\/p>\n
\"the<\/p>\n
If you update the dates, you can view a different map and save it to the database. That\u2019s all of the code for this app!<\/p>\n
Now you can see how close we almost came to an asteroid event every day.<\/p>\n
Finished code<\/h2>\n
You can take a look at the complete project in the asteroid-map<\/code> folder of this repo<\/a>. Or you can take a look at the front-end in this Code Sandbox<\/a>. You\u2019ll have to update some values to match yours in order for this to work.<\/p>\n<\/div>\n  \n  
\n    <\/iframe>\n  <\/div>\n\n  
Conclusion<\/h2>\n
Working with external APIs is something we commonly do and GraphQL is one of the ways we can centralize all of the APIs we call. Using this as a tool to make visual representations of how close we came to being hit by asteroids every day is just a fun way to use that functionality.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27841,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[332,134,370,177,246,371],"class_list":["post-27840","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-api","tag-guest-post","tag-image","tag-javascript","tag-react","tag-under-review"],"acf":[],"yoast_head":"\nCreating an Asteroid Map with a NASA API<\/title>\n<meta name=\"description\" content=\"There are tons of cool APIs out there that give us access to all kinds of data. If you're into space things at all, you might be happy to know that NASA has APIs that let us work with some of their data. In this post, we'll see how you can make an asteroid map using one of these APIs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating an Asteroid Map with a NASA API\" \/>\n<meta property=\"og:description\" content=\"There are tons of cool APIs out there that give us access to all kinds of data. If you're into space things at all, you might be happy to know that NASA has APIs that let us work with some of their data. In this post, we'll see how you can make an asteroid map using one of these APIs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-21T19:24:36+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926136\/Web_Assets\/blog\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Creating an Asteroid Map with a NASA API\",\"datePublished\":\"2022-03-21T19:24:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926136\/Web_Assets\/blog\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c.jpg?_i=AA\",\"keywords\":[\"API\",\"Guest Post\",\"Image\",\"Javascript\",\"React\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/\",\"name\":\"Creating an Asteroid Map with a NASA API\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926136\/Web_Assets\/blog\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c.jpg?_i=AA\",\"datePublished\":\"2022-03-21T19:24:36+00:00\",\"description\":\"There are tons of cool APIs out there that give us access to all kinds of data. If you're into space things at all, you might be happy to know that NASA has APIs that let us work with some of their data. In this post, we'll see how you can make an asteroid map using one of these APIs.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926136\/Web_Assets\/blog\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926136\/Web_Assets\/blog\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c.jpg?_i=AA\",\"width\":4852,\"height\":3428},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating an Asteroid Map with a NASA API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creating an Asteroid Map with a NASA API","description":"There are tons of cool APIs out there that give us access to all kinds of data. If you're into space things at all, you might be happy to know that NASA has APIs that let us work with some of their data. In this post, we'll see how you can make an asteroid map using one of these APIs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/","og_locale":"en_US","og_type":"article","og_title":"Creating an Asteroid Map with a NASA API","og_description":"There are tons of cool APIs out there that give us access to all kinds of data. If you're into space things at all, you might be happy to know that NASA has APIs that let us work with some of their data. In this post, we'll see how you can make an asteroid map using one of these APIs.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-03-21T19:24:36+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926136\/Web_Assets\/blog\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/"},"author":{"name":"","@id":""},"headline":"Creating an Asteroid Map with a NASA API","datePublished":"2022-03-21T19:24:36+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926136\/Web_Assets\/blog\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c.jpg?_i=AA","keywords":["API","Guest Post","Image","Javascript","React","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/","name":"Creating an Asteroid Map with a NASA API","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926136\/Web_Assets\/blog\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c.jpg?_i=AA","datePublished":"2022-03-21T19:24:36+00:00","description":"There are tons of cool APIs out there that give us access to all kinds of data. If you're into space things at all, you might be happy to know that NASA has APIs that let us work with some of their data. In this post, we'll see how you can make an asteroid map using one of these APIs.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926136\/Web_Assets\/blog\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926136\/Web_Assets\/blog\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c.jpg?_i=AA","width":4852,"height":3428},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/creating-an-asteroid-map-with-the-nasa-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating an Asteroid Map with a NASA API"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926136\/Web_Assets\/blog\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c\/0a0ea18d19659910c20e9ecd19e52e691eadc92d-4852x3428-1_27841c4b2c.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27840"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27840\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27841"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27840"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27840"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Now we can write the schema for the database. In the api > db<\/code> folder, open schema.prisma<\/code>. Redwood uses Prisma<\/a> to handle the database operations. This file is where we use the connection string and write the schema for all of our tables.<\/p>\n