Astronomy Picture of the Day in Vue
The Motivation for this article
Over the weekend I had a fun idea I wanted to implement either as a standalone app or as a component in future projects (I haven’t decided yet). My idea was to use NASA’s Astronomy Picture of the Day API to display a new picture every day of the year using Vue (which I am learning right now). I am familiar with React but I find Vue to be a bit more straightforward to follow. In addition, I found a great deal of material on this very topic for React but not for Vue so I wanted to contribute something.
What are we doing for this small Vue app/component?
At a high level one of the unspoken foundations of computer science is to be able to break down any problem into the smallest element (think about recursion or dynamic programming). So what are we doing here? Well simply put we need to make an API call that grabs the URL where the Astronomy Picture of the Day lives and then stick the URL in a ‘img’ tag.
Getting started
To make a new Vue project you can use the Vue CLI and make a new project https://cli.vuejs.org/.
Alternatively, you can go to https://vercel.com/ and use their Vue template. Either way works fine.
Outline of the app
If you are familiar with Vue or React then you already know that both of these frameworks highly utilize the idea of DRY (don’t repeat yourself) or reusability this is done through the use of components. We can do our API call to grab the Astronomy Picture of the Day in a separate component and then put it in our ‘app.vue’ file. One of our first steps after creating our Vue app is to create a new component, say “picture.vue”. I found an npm package that can be very useful for quickly making new components https://www.npmjs.com/package/vue-generate-component
The first thing that you will want to do is to go and get an API key that you can use to access the Astronomy Picture of the Day API. You can find the API here amongst other NASA made APIs https://api.nasa.gov/.
The best way I found to make the API call was through the use of the ‘created’ hook. The created hook is a Vue function that will fire once the Vue instance is created, which is perfect for our purposes. Then we can use axios to make the API call and gather the URL.
Next, we will want to store the aforementioned URL where the Astronomy Picture of the Day lives. This can be done with the data object that can be used in every Vue component. All we need to do is make a variable in the data object to store the URL and since the URL will be a string we can just set our variable equal to empty quotes. While we are making the API call with axios we can send the URL to the new variable in the data object. To do this we can say ‘this.NewVariable’ = response.data.url’.
Finally, we can send the new variable where the URL is stored to an ‘img’ tag in our component. We can do this by using a Vue feature called binding. After that we’re basically done and just need to import our component into ‘app.vue’ and place it in our app template.
The Code
Where to find the app
You can see the app in action here https://vue-five-omega.vercel.app/.
The challenges
As I said in the beginning, this was a pretty straightforward app if you could break it down to its simplest element. The biggest challenge however, was being able to securely import the API key for use with the API call. In a nutshell, for something like an API key one way to do things is to make a .env file. In your .env file you can store variables like an API key that you can then import for later use. Normally, if you are using just Node you can use a npm package called dotenv, however, in this instance we are using Vue and things are slightly different here. When naming your API key, since we are using Vue, you have to name the variable VUE_APP_* (* is a placeholder for the remainder of the variable name). Then later when you want to grab your API key, you can say “process.env.VUE_APP_VARIABLE_NAME”. You can find even more information on this here https://cli.vuejs.org/guide/mode-and-env.html#environment-variables. Also be sure to include the .env file in your .gitignore file.
Further additions to the app
Going forward, we have the basics that we want so far. However, we could add a few things such as adding the explanation of the photo from the API response, as well as who took the photo (copyright in the API response), or even a search bar to get the picture from a certain date.
Other resources/references
Thanks for reading, have a great week!
