You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
5.8 KiB
144 lines
5.8 KiB
# Rat-to-Restaurant
|
|
|
|
|
|
|
|
## Prerequisites
|
|
|
|
Data:
|
|
|
|
- [Restaurant violations data](https://data.cityofnewyork.us/Health/DOHMH-New-York-City-Restaurant-Inspection-Results/xx67-kt59)
|
|
|
|
- [Rat sightings data](https://nycopendata.socrata.com/Social-Services/Rat-Sightings/3q43-55fe)
|
|
|
|
You can view the end points for each dataset and the query parameters (field names) that you can pass to these two endpoints by clicking the export tab at the top right.
|
|
|
|
|
|
|
|
|
|
|
|
## Dependencies
|
|
- Express
|
|
- Morgan
|
|
- EJS
|
|
- Request
|
|
|
|
|
|
---
|
|
|
|
*At this point you should have a Node app initialized and all the necesary dependencies installed, directories created, and server set up... set up.*
|
|
|
|
---
|
|
|
|
## Step 1
|
|
|
|
Build two routes, `/rats` and `/violations`. Each will render a separate view that has a form. That form will allow the user to search each dataset by zipcode.
|
|
|
|
(If you aren't sure about how to build your form refer back to the X-Files homework assigned on Thursday)
|
|
|
|
The pure JSON response from the NYC Open Data API will be returned in another route called `/rats/results` and/or `/violations/results`
|
|
|
|
There are a lot of extra data, the user simply doesn't need to see all of it and we're mostly interested in the description and location information.
|
|
|
|
#### 1a:
|
|
|
|
Filter out the unnecessary key-value pairs and only return the following:
|
|
|
|
Rats: boro, location, incident zip, lat, long, descriptor
|
|
|
|
Violations: boro, dba, zip code, grade, street, action, violation_description
|
|
|
|
(If you want to include other data go right ahead)
|
|
|
|
At this point we are just rendering json!
|
|
|
|
|
|
#### 1b:
|
|
Make these views:
|
|
|
|
`rat_sighting_results.html.ejs`
|
|
`violation_results.html.ejs`
|
|
|
|
Now that we have the right data for each request let's style it and make it more user friendly.
|
|
|
|
We're going to use the concept of cards. Each rat sighting or restaurant violation will have it's own card.
|
|
|
|
A card is simply a div that styles and displays the information in a sane and readable way. You can style the card however you like, but for example a bare bones rat sightings card might look like this:
|
|
|
|
|
|
|
|
You can read about cards here:
|
|
https://econsultancy.com/blog/64646-15-delicious-examples-of-card-based-web-design/
|
|
|
|
|
|
### [CHECK IN] What should we have now!?
|
|
|
|
We should now have a web application that has two initial views at `/rats` and `/violations` that each display a form that allows us to search for all rat sightings or all restaurant violations by zip code.
|
|
|
|
When the user clicks the button attached to the form it should direct the user to a new view (our results views) and new route that displays that parsed data using the `card` design pattern.
|
|
|
|
But our cards are all stacked on top of each other!?
|
|
|
|
|
|
|
|
#### 1c
|
|
|
|
If you surround all of your card results in a div with a class of container.
|
|
|
|
Add this css
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
What is [flexbox!?](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) It's super cool!
|
|
|
|
>[Flexbox provides] a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex"). The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow."
|
|
|
|
Those two css properites will now display our cards dynamically so they stretch across the screen inline and will wrap depending on the width of the screen!
|
|
|
|
|
|
|
|
|
|
## Step 2 Restaurants
|
|
|
|
Build a separate route `/restaurants` which will be used to display all relevant information for restaurants. It should be a form, which allows you to search for a zip code. It should take you to `/restaurants/results` which will display information about all restaurant in that respective zip code.
|
|
|
|
#### 2a
|
|
|
|
First start with the violations data you already have / know how to retrieve. There are many `violations` for each restaurant. Combine them in a `restaurants` data structure which is an array of `restaurant` objects. Each `restaurant` object should have at minimum the following properties:
|
|
|
|
- `name`
|
|
- `street`
|
|
- `violations`
|
|
|
|
The violations property should be an array of the violation object you built previously, which pertain to the particular restaurant. Render your `restaurants` array as pure JSON in the browser.
|
|
|
|
|
|
|
|
|
|
#### 2b
|
|
|
|
Now that you have your array of `restaurants`, fetch all the rat sightings for the same zipcode. Add a new property to each `restaurant` object named `rats` and set it to `0` by default. For each rat sighting on the **same street** as a restaurant increment that restaurants `rats` property by one.
|
|
|
|
---
|
|
|
|
*At this point you should be able to make a get request `/restaurants`, search for a zip code and see JSON data in the browser which is an array of `restaurants` each of which have `name`, `street`, `violations` and `rats` as properties*
|
|
|
|
---
|
|
|
|
#### 2c
|
|
|
|
Create a view `restaurants.html.ejs` which displays cards for each restaurant, which matches your query. Keep in mind that each restaurant has violations, each of which is its own card. CARDCEPTION!
|
|
|
|
|
|
|
|
|
|
### Step 3
|
|
|
|
A great metric for the cleanliness of a restaurant is the RAT-O-METER™, which is the ratio of nearby rats to the number of violations. A high RAT-O-METER indicates that a restaurant manages to keep an acceptable level of cleanliness relative to the number of rats around. Sort your results based on their RAT-O-METER rating!
|
|
|
|
## Bonus
|
|
|
|
Finished Everything?! Congratulations! You just built something society can benefit from! Make it pretty and go talk to some investors. This can be the next Yelp!
|