00:00:00,354 --> 00:00:02,520 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.