Previously, we built an API for the State Parks App, using Google Sheets and we set up hosting for the thing. The next step is to actually write the first bit of the thing. When we created the API, we also wrote a little vue.js proof of concept that loops over the data and outputs it as an HTML table. If we combine that with the code that we wrote for “How to sort a list of locations by how close they are to you”, we get a table that lists every park in the system by how close they are to where you (the user) are at this moment.
See the Pen
Wisc Parks (Part 1): Listing state parks by distance from the user by Joe Steinbring (@steinbring)
on CodePen.
The above example loads like shit and is too much information for such a listing but it is a start.
For our next iteration, let’s remove every column except for “Name”, “Property Type”, “Physical Address”, “County”, and “Distance From You”. Since “Property Type” is three booleans (State Park, Recreation Area, and State Forest), we will also need to use v-if to get the job done.
See the Pen
Wisc Parks (Part 2): Listing state parks by distance from the user by Joe Steinbring (@steinbring)
on CodePen.
The above example is a definite improvement but we can do even better. Let’s drop the “Distance From You” column completely if we don’t have that data yet, only show two decimal places for that value, and add a basic loading screen.
See the Pen
Wisc Parks (Part 3): Listing state parks by distance from the user by Joe Steinbring (@steinbring)
on CodePen.
This third iteration is still very much a minimal viable product, but it is enough to justify a dev build. In “Playing with the Vue CLI and Webpack” we transformed one of these pens into a CLI app and in “State Parks App: Hosting and Code Management“, we set up hosting and a git repo for the app.
If you check out the test branch of the WIStateParks repository, you can see the end result of the transformation and you can test it at test.wisparks.jws.app but you will notice that it doesn’t actually work anymore. The night that I finished writing this code, the google sheets API stopped working for me and creating a new one using a duplicate google sheet didn’t help.
So, where do we go from here? I think that the next step might be to save the sheet as a JSON document and just use that instead of the google sheets hack. Have a question, comment, or suggestion? Feel free to drop a comment, below.
[ Cover photo by Mike Benna on Unsplash ]