1
00:00:00,000 --> 00:00:00,354


2
00:00:00,354 --> 00:00:02,520
SPEAKER 1: So let's dive
into the distribution code,

3
00:00:02,520 --> 00:00:06,270
first by looking at the
index.html template.

4
00:00:06,270 --> 00:00:10,410
In the index page, we'll see that
we have an embedded Google Map.

5
00:00:10,410 --> 00:00:13,590
In addition to that, there's
also a short HTML form

6
00:00:13,590 --> 00:00:16,020
which allows users to search
locations that they're

7
00:00:16,020 --> 00:00:19,260
interested in scanning to in the map.

8
00:00:19,260 --> 00:00:21,030
So all of that is completed for you.

9
00:00:21,030 --> 00:00:24,690
But make sure to read it and see how
there are a lot of scripts included

10
00:00:24,690 --> 00:00:27,690
in the head section of the HTML file.

11
00:00:27,690 --> 00:00:30,450
Now let's look at application.py.

12
00:00:30,450 --> 00:00:34,530
You'll see that there's a route to
index which is completed already

13
00:00:34,530 --> 00:00:38,230
and checks to make sure
whether the API key is loaded.

14
00:00:38,230 --> 00:00:42,090
Then we have articles and
search, which are both TODOs.

15
00:00:42,090 --> 00:00:47,430
Then we have the update function which
finds up to 10 places within view.

16
00:00:47,430 --> 00:00:50,760
Now, I just want to bring your
attention to the jsonify function which

17
00:00:50,760 --> 00:00:53,970
is a helper function
that we get from Flask.

18
00:00:53,970 --> 00:00:58,140
So you'll see that articles and search
actually do call this function jsonify

19
00:00:58,140 --> 00:01:00,450
but don't pass anything into it.

20
00:01:00,450 --> 00:01:05,010
So up to you to figure out exactly what
jsonify does, what it takes as input,

21
00:01:05,010 --> 00:01:10,180
and what it returns and figure out
how it might help you in this problem.

22
00:01:10,180 --> 00:01:10,850
OK.

23
00:01:10,850 --> 00:01:14,610
Take some time to pause this video
and go back to the distribution code

24
00:01:14,610 --> 00:01:18,330
to really understand how everything
is matching up and interacting

25
00:01:18,330 --> 00:01:19,650
with one another.

26
00:01:19,650 --> 00:01:22,770
Once you're ready, let's
move onto mashup.db.

27
00:01:22,770 --> 00:01:26,370
For this section of the problem, we'll
want to decide the appropriate database

28
00:01:26,370 --> 00:01:32,400
schema to represent the US map,
or more specifically, the US.txt

29
00:01:32,400 --> 00:01:34,350
file that we've provided.

30
00:01:34,350 --> 00:01:39,720
We'll want to import this file
into a SQL table called places.

31
00:01:39,720 --> 00:01:42,750
Now, we've provided a
list of values of columns

32
00:01:42,750 --> 00:01:48,120
that you want to load into this
table, including postal code, country

33
00:01:48,120 --> 00:01:50,430
name, latitude, and longitude.

34
00:01:50,430 --> 00:01:53,170
Now, we provide the order and the
name for all of these columns,

35
00:01:53,170 --> 00:01:55,950
but it's up to you to
decide the appropriate data

36
00:01:55,950 --> 00:01:58,470
types for these columns.

37
00:01:58,470 --> 00:02:02,430
Now that we've loaded our
database, let's move onto articles.

38
00:02:02,430 --> 00:02:04,680
If you haven't already,
now would be a good time

39
00:02:04,680 --> 00:02:08,789
to navigate to the staff solution
of mashup in your web browser.

40
00:02:08,789 --> 00:02:12,600
Feel free to navigate around the map,
input different locations in the search

41
00:02:12,600 --> 00:02:17,100
bar, and see how your own web
app should eventually function.

42
00:02:17,100 --> 00:02:20,580
Once you've done that, feel free to
edit the URL of the stuff solution,

43
00:02:20,580 --> 00:02:26,790
adding in /articles and passing in
a postal code to the geo parameter.

44
00:02:26,790 --> 00:02:30,870
Once you do that, you should see
outputted a JSON array of objects

45
00:02:30,870 --> 00:02:34,380
where each object is an article for geo.

46
00:02:34,380 --> 00:02:38,790
So what we've done in
articles is that we submit geo

47
00:02:38,790 --> 00:02:40,740
to articles as a GET parameter.

48
00:02:40,740 --> 00:02:45,970
And then using geo, we then
output this JSON array of objects.

49
00:02:45,970 --> 00:02:49,050
Now let's navigate
back to application.py.

50
00:02:49,050 --> 00:02:51,090
and edit the articles route.

51
00:02:51,090 --> 00:02:54,730
In order to retrieve the geo
argument from the HTIL form,

52
00:02:54,730 --> 00:02:57,900
we'll use request.args.get geo.

53
00:02:57,900 --> 00:03:01,380
Make sure to check for a missing
argument triggering a runtime error

54
00:03:01,380 --> 00:03:03,300
if necessary.

55
00:03:03,300 --> 00:03:08,940
Then, if you haven't already, make sure
to look at the lookup implementation,

56
00:03:08,940 --> 00:03:13,200
because this function will come in
handy, as well the jsonify argument,

57
00:03:13,200 --> 00:03:16,650
because ultimately, we
want to return a JSON

58
00:03:16,650 --> 00:03:20,280
object of whatever we've looked up.

59
00:03:20,280 --> 00:03:23,820
Let's go back to the staff
solution now and enter in /search,

60
00:03:23,820 --> 00:03:28,110
passing in not a complete
postal code but a partial one,

61
00:03:28,110 --> 00:03:32,250
only the first four numbers, 0213.

62
00:03:32,250 --> 00:03:35,130
You'll see that search
does actually work here.

63
00:03:35,130 --> 00:03:39,690
You don't need to input a proper full
postal code in order for it to work.

64
00:03:39,690 --> 00:03:45,450
What it does is it just returns a very
long list of up to 10 places that match

65
00:03:45,450 --> 00:03:48,645
the start of that postal code, 0213.

66
00:03:48,645 --> 00:03:51,270
So you can imagine that there
will be more if we only inputted,

67
00:03:51,270 --> 00:03:52,950
say, the first number.

68
00:03:52,950 --> 00:03:55,860
But that's a little overwhelming
to look at, so let's

69
00:03:55,860 --> 00:03:57,360
put in the full postal code.

70
00:03:57,360 --> 00:03:59,490
02138.

71
00:03:59,490 --> 00:04:04,350
Here, you'll see that we get
a JSON object of our place

72
00:04:04,350 --> 00:04:07,980
that we're looking for, the one
that matched this parameter.

73
00:04:07,980 --> 00:04:12,270
So you'll see that q is submitted
to search as a GET parameter,

74
00:04:12,270 --> 00:04:16,290
and it outputs a JSON array of
objects where each object is going

75
00:04:16,290 --> 00:04:20,220
to be a row from the places SQL table.

76
00:04:20,220 --> 00:04:23,520
Now, the value of q might
not be just a postal code.

77
00:04:23,520 --> 00:04:25,890
It could also be a city or a state.

78
00:04:25,890 --> 00:04:28,560
So make sure that, backing
your database schema

79
00:04:28,560 --> 00:04:32,340
that we decided before, it accounts
for this so that you're able to search

80
00:04:32,340 --> 00:04:35,490
by city or state or postal code.

81
00:04:35,490 --> 00:04:39,330
Finally, remember to use
jsonify in order to output

82
00:04:39,330 --> 00:04:42,740
the appropriate JSON array of objects.

83
00:04:42,740 --> 00:04:45,325