SPEAKER 1: So let's dive into the distribution code,
first by looking at the index.html template.
In the index page, we'll see that we have an embedded Google Map.
In addition to that, there's also a short HTML form
which allows users to search locations that they're
interested in scanning to in the map.
So all of that is completed for you.
But make sure to read it and see how there are a lot of scripts included
in the head section of the HTML file.
Now let's look at application.py.
You'll see that there's a route to index which is completed already
and checks to make sure whether the API key is loaded.
Then we have articles and search, which are both TODOs.
Then we have the update function which finds up to 10 places within view.
Now, I just want to bring your attention to the jsonify function which
is a helper function that we get from Flask.
So you'll see that articles and search actually do call this function jsonify
but don't pass anything into it.
So up to you to figure out exactly what jsonify does, what it takes as input,
and what it returns and figure out how it might help you in this problem.
OK.
Take some time to pause this video and go back to the distribution code
to really understand how everything is matching up and interacting
with one another.
Once you're ready, let's move onto mashup.db.
For this section of the problem, we'll want to decide the appropriate database
schema to represent the US map, or more specifically, the US.txt
file that we've provided.
We'll want to import this file into a SQL table called places.
Now, we've provided a list of values of columns
that you want to load into this table, including postal code, country
name, latitude, and longitude.
Now, we provide the order and the name for all of these columns,
but it's up to you to decide the appropriate data
types for these columns.
Now that we've loaded our database, let's move onto articles.
If you haven't already, now would be a good time
to navigate to the staff solution of mashup in your web browser.
Feel free to navigate around the map, input different locations in the search
bar, and see how your own web app should eventually function.
Once you've done that, feel free to edit the URL of the stuff solution,
adding in /articles and passing in a postal code to the geo parameter.
Once you do that, you should see outputted a JSON array of objects
where each object is an article for geo.
So what we've done in articles is that we submit geo
to articles as a GET parameter.
And then using geo, we then output this JSON array of objects.
Now let's navigate back to application.py.
and edit the articles route.
In order to retrieve the geo argument from the HTIL form,
we'll use request.args.get geo.
Make sure to check for a missing argument triggering a runtime error
if necessary.
Then, if you haven't already, make sure to look at the lookup implementation,
because this function will come in handy, as well the jsonify argument,
because ultimately, we want to return a JSON
object of whatever we've looked up.
Let's go back to the staff solution now and enter in /search,
passing in not a complete postal code but a partial one,
only the first four numbers, 0213.
You'll see that search does actually work here.
You don't need to input a proper full postal code in order for it to work.
What it does is it just returns a very long list of up to 10 places that match
the start of that postal code, 0213.
So you can imagine that there will be more if we only inputted,
say, the first number.
But that's a little overwhelming to look at, so let's
put in the full postal code.
02138.
Here, you'll see that we get a JSON object of our place
that we're looking for, the one that matched this parameter.
So you'll see that q is submitted to search as a GET parameter,
and it outputs a JSON array of objects where each object is going
to be a row from the places SQL table.
Now, the value of q might not be just a postal code.
It could also be a city or a state.
So make sure that, backing your database schema
that we decided before, it accounts for this so that you're able to search
by city or state or postal code.
Finally, remember to use jsonify in order to output
the appropriate JSON array of objects.