1
00:00:00,000 --> 00:00:03,388
>> [Muziek]

2
00:00:03,388 --> 00:00:09,196

3
00:00:09,196 --> 00:00:10,180
>> DAVID J. MALAN: Hallo.

4
00:00:10,180 --> 00:00:12,600
Laten we eens een wandeling door
Probleem Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
die zal je uitdagen om
putten elementen voor Google Maps

6
00:00:15,880 --> 00:00:20,905
met elementen uit Google News en mash
ze samen in een web-applet dat

7
00:00:20,905 --> 00:00:24,150
Een gebruiker zoeken
een kaart voor nieuws lokaal

8
00:00:24,150 --> 00:00:26,780
specifieke plaatsen,
steden en postcodes.

9
00:00:26,780 --> 00:00:31,040
Om dit te doen, gaan we
integreren wat HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript, en een techniek
algemeen bekend als AJAX in orde

11
00:00:34,390 --> 00:00:36,850
dit meeslepende creëren
gebruikerservaring.

12
00:00:36,850 --> 00:00:38,920
>> Laten we eerst naar Google Maps zelf.

13
00:00:38,920 --> 00:00:41,220
Dit is natuurlijk misschien
Een bekende interface.

14
00:00:41,220 --> 00:00:45,070
Maar het blijkt dat Google Maps
biedt ook een API-- applicatie

15
00:00:45,070 --> 00:00:48,360
programmering interface-- via welke
U kunt elementen van Google Maps te nemen

16
00:00:48,360 --> 00:00:50,740
en integreren in
uw eigen toepassingen.

17
00:00:50,740 --> 00:00:52,650
Inderdaad, in deze
proces, je gaat

18
00:00:52,650 --> 00:00:55,140
om een ​​paar URL's vinden
bijzonder nuttig dat

19
00:00:55,140 --> 00:00:57,820
zijn vermeld in de
specificatie voor Probleemverzameling 8,

20
00:00:57,820 --> 00:01:00,980
specifiek deze slag
Begeleiden of de handleiding voor ontwikkelaars

21
00:01:00,980 --> 00:01:07,640
voor de Google Maps API Versie 3, alsmede
als de Google Maps JavaScript API

22
00:01:07,640 --> 00:01:10,260
v3 referentie, een
beetje meer geheimzinnige te lezen

23
00:01:10,260 --> 00:01:14,600
maar eigenlijk alle lagere niveau
details over welke functies of methoden

24
00:01:14,600 --> 00:01:18,220
en objecten en eigenschappen en
gebeurtenissen eigenlijk komen met de API,

25
00:01:18,220 --> 00:01:20,720
vergelijkbaar geest
om [onverstaanbaar] pagina's.

26
00:01:20,720 --> 00:01:23,480
>> Als we nu een kijkje nemen
bij Google News, zult u

27
00:01:23,480 --> 00:01:25,370
misschien zie hier een vertrouwde interface.

28
00:01:25,370 --> 00:01:29,350
Maar het blijkt dat je kunt ook zoeken
Google Nieuws voor specifieke geografische regio's

29
00:01:29,350 --> 00:01:32,000
via een HTTP-parameter genaamd geo.

30
00:01:32,000 --> 00:01:35,100
In feite, als ik in te zoomen
hier, zult u zien dat

31
00:01:35,100 --> 00:01:41,672
Ik ben op
news.google.com/news/section?geo=02138.

32
00:01:41,672 --> 00:01:43,630
En inderdaad, als ik te zoomen
out, zult u zien dat ik ben

33
00:01:43,630 --> 00:01:47,090
kijken naar een pagina met een hele hoop
opvattingen over Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Ondertussen, als ik eigenlijk veranderen de
URL niet om een ​​postcode als dit,

35
00:01:50,620 --> 00:01:55,580
maar iets slordiger
zoals Cambridge, + Massachusetts,

36
00:01:55,580 --> 00:02:00,740
waar de plus is de manier waarop je coderen voor een
spatie in een URL en druk op Enter,

37
00:02:00,740 --> 00:02:02,907
je zult zien dat ik eigenlijk
zie bijna hetzelfde nieuws.

38
00:02:02,907 --> 00:02:05,489
Misschien is het een beetje anders
omdat Cambridge eigenlijk

39
00:02:05,489 --> 00:02:06,910
heeft meerdere postcodes.

40
00:02:06,910 --> 00:02:09,410
Nu hoe zou ik weten dat en,
in feite, hoe kon ik een of andere manier

41
00:02:09,410 --> 00:02:12,940
binden steden en gemeenten
om postcodes voor het geval ik

42
00:02:12,940 --> 00:02:15,064
de gebruiker wilt toestaan
opzoeken ofwel?

43
00:02:15,064 --> 00:02:17,480
Nou, het blijkt dat er
een website die er zijn genoemd

44
00:02:17,480 --> 00:02:20,060
geonames.org die
een initiatief om te hebben

45
00:02:20,060 --> 00:02:23,760
een vrij beschikbare database van alle
allerlei geografische informatie,

46
00:02:23,760 --> 00:02:27,040
niet alleen voor de VS, maar ook
voor andere landen ook.

47
00:02:27,040 --> 00:02:30,430
In feite, als ik naar deze URL hier, die
Ook in de probleemstelling genoemde

48
00:02:30,430 --> 00:02:34,510
specificatie, zult u het zien van drie
notering van een hele hoop van zip-bestanden

49
00:02:34,510 --> 00:02:36,400
elk van die kan worden gedownload door u.

50
00:02:36,400 --> 00:02:39,900
In feite, voor dit probleem stellen
je gaat us.zip downloaden.

51
00:02:39,900 --> 00:02:43,790
Nu in dit bestand, is een hele
bos van gegevens in tekstformaat.

52
00:02:43,790 --> 00:02:47,760
De bestanden is vergelijkbaar met een
CSV-- komma's gescheiden waarden file--

53
00:02:47,760 --> 00:02:51,294
maar het daadwerkelijk gebruikt
tabbladen om velden af ​​te bakenen.

54
00:02:51,294 --> 00:02:53,710
Nu, ondertussen, als je kijkt
hier bij wat ik heb gemarkeerd,

55
00:02:53,710 --> 00:02:56,459
de velden in dit bestand gaan
om zaken als land codes zijn,

56
00:02:56,459 --> 00:02:58,980
postcodes, plaatsnamen,
en vervolgens, in een bepaalde vorm

57
00:02:58,980 --> 00:03:04,230
of andere, staten en provincies,
gemeenschappen en nog veel meer.

58
00:03:04,230 --> 00:03:06,630
Sterker nog, ik heb al
gedownload dit bestand op voorhand.

59
00:03:06,630 --> 00:03:09,750
Laat me ga je gang en open het hier--
us.text-- en, inderdaad, dan heb je

60
00:03:09,750 --> 00:03:16,660
kijken of ik scroll naar beneden naar lijn 16.792
zie je een paar records voor Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts en de verschillende postcodes.

62
00:03:19,120 --> 00:03:22,150
Wat zie je er ook is de provincie,
sommige nummers die ik niet echt

63
00:03:22,150 --> 00:03:24,500
begrijpen, maar ook alle
de weg aan de rechterkant,

64
00:03:24,500 --> 00:03:27,170
sommige GPS coordinates--
lengte- en breedtegraad.

65
00:03:27,170 --> 00:03:30,440
Dit is geweldig, want één van
de functies van Google Maps API

66
00:03:30,440 --> 00:03:33,670
is kan waarnemen
waar je bent geografisch

67
00:03:33,670 --> 00:03:36,850
qua GPS coördinaten.

68
00:03:36,850 --> 00:03:40,210
>> Laten we nu eens beginnen om erachter te komen hoe
beginnen samen te binden deze dingen.

69
00:03:40,210 --> 00:03:42,900
We hebben u krijgt een hele
stelletje verdeelsleutel,

70
00:03:42,900 --> 00:03:44,970
evenals MySQL database.

71
00:03:44,970 --> 00:03:49,100
In feite, als ik trek een phpMyAdmin met
al geïmporteerd, zoals u binnenkort,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, dan heb je een MySQL tabel te zien dat
ziet er zo uit, een ID-veld, land

73
00:03:54,800 --> 00:03:57,400
code, postcode, plaatsnaam en nog veel meer.

74
00:03:57,400 --> 00:04:00,490
De aard van al deze
kolommen I afgeleide gewoon

75
00:04:00,490 --> 00:04:03,870
het lezen van de readme.text
bestand hier dat gespecificeerd

76
00:04:03,870 --> 00:04:07,330
of een veld een geheel getal,
of VARCHAR of iets dergelijks.

77
00:04:07,330 --> 00:04:10,510
>> Dus hebben we die tafel voor gemaakt
u en gezien u de SQL-commando's

78
00:04:10,510 --> 00:04:12,770
uitvoeren te creëren dat
tabel in uw eigen database,

79
00:04:12,770 --> 00:04:15,290
maar er is eigenlijk nog geen gegevens in.

80
00:04:15,290 --> 00:04:19,600
Integendeel, je gaat te hebben om
downloaden us.zip of zip elk land

81
00:04:19,600 --> 00:04:21,500
bestand van die URL daar.

82
00:04:21,500 --> 00:04:24,940
En dan zul je te hebben om te schrijven
een command line script in PHP dat is

83
00:04:24,940 --> 00:04:28,420
gaat om open te stellen dat de tekst
bestand, itereren over de lijnen,

84
00:04:28,420 --> 00:04:31,180
en vervolgens voor elk van
die lijnen doen een insert

85
00:04:31,180 --> 00:04:34,940
in die plaatst tafel
in uw MySQL database.

86
00:04:34,940 --> 00:04:37,880
Dus aan het einde van dit proces, zult u
heb dat script uiteindelijk draaien

87
00:04:37,880 --> 00:04:39,610
één keer in theorie.

88
00:04:39,610 --> 00:04:41,780
In werkelijkheid zul je waarschijnlijk
draaien een paar keer

89
00:04:41,780 --> 00:04:45,460
terwijl het proberen om verschillende bugs te repareren.

90
00:04:45,460 --> 00:04:48,440
>> Uiteindelijk zul je een hebben
echt grote databank met duizenden

91
00:04:48,440 --> 00:04:50,139
en duizenden geografische rijen.

92
00:04:50,139 --> 00:04:52,930
Dan ga je dat import zetten
script opzij zodra het werkt

93
00:04:52,930 --> 00:04:55,140
en uw database is leuk
en correct, en dan

94
00:04:55,140 --> 00:04:58,880
je gaat om verder te gaan om daadwerkelijk
de uitvoering van de mashup zelf.

95
00:04:58,880 --> 00:05:01,670
De mashup is gaan kijken
een beetje iets als dit.

96
00:05:01,670 --> 00:05:05,165
Bij mashup.cs50.net we
hebben een staf oplossing

97
00:05:05,165 --> 00:05:06,990
dat ziet er een beetje iets als dit.

98
00:05:06,990 --> 00:05:11,070
Sterker nog, als ik klik op deze krant
pictogram voor Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
je zult een draaiende zien
icon kort en vervolgens

100
00:05:13,300 --> 00:05:16,370
een geordende lijst, een
opsommingstekens lijst van artikels

101
00:05:16,370 --> 00:05:18,280
gerelateerd aan Cambridge, Massachusetts.

102
00:05:18,280 --> 00:05:20,352
Als ik klik op Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Ik zie hetzelfde voor die stad.

104
00:05:21,685 --> 00:05:24,174
En als ik klik op
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
er zou geen zijn
nieuws uit Watertown,

106
00:05:26,090 --> 00:05:28,630
dus je zult iets zien
zoals langzaam nieuws dag.

107
00:05:28,630 --> 00:05:32,140
>> Nu, ondertussen, linksboven zijn
een aantal bekende Google Maps controles

108
00:05:32,140 --> 00:05:34,980
om u te laten uitzoomen, pan
omhoog, omlaag, naar links en naar rechts,

109
00:05:34,980 --> 00:05:37,360
maar ook een zoekvak dat we daar te zetten.

110
00:05:37,360 --> 00:05:40,910
Dus als ik naar, eerlijk gezegd,
de enige andere postcode Ik weet het,

111
00:05:40,910 --> 00:05:45,020
90210, zullen we echt zien
Beverly Hills, Californië.

112
00:05:45,020 --> 00:05:48,550
Toen klikte het leidt me naar
Californië en een hele hoop

113
00:05:48,550 --> 00:05:50,369
van nieuws over Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Merk nu, ook, wat daar gebeurde.

115
00:05:51,910 --> 00:05:57,040
Als ik deze keer zoeken naar 02138 of zelfs
Cambridge Massachusetts komma of een

116
00:05:57,040 --> 00:06:00,300
variant daarvan, krijg je een
weinig autocomplete dropdown.

117
00:06:00,300 --> 00:06:03,840
Nu wordt dit met behulp van een plugin
voor een bibliotheek genaamd jQuery,

118
00:06:03,840 --> 00:06:05,732
en dat de plugin heet typeahead.

119
00:06:05,732 --> 00:06:07,440
We gewoon door te lezen
de documentatie,

120
00:06:07,440 --> 00:06:13,150
downloadde het .js bestand geïntegreerde
in de distributie-code, zodat u

121
00:06:13,150 --> 00:06:16,900
Uiteindelijk kan de code te schrijven die
vult dat dropdown menu met de auto

122
00:06:16,900 --> 00:06:19,350
selecties of de automatische suggesties.

123
00:06:19,350 --> 00:06:23,820
>> Nu is de verdeelsleutel, hoewel, dat
u hebt ontvangen niet bijna net zo veel te doen.

124
00:06:23,820 --> 00:06:26,860
U krijgt de Google Map ingebed, en
krijg je de besturing van de links boven,

125
00:06:26,860 --> 00:06:28,240
en je krijgt het zoekvak.

126
00:06:28,240 --> 00:06:32,760
Maar als ik iets typt
02138, zijn geen plaatsen nog niet gevonden.

127
00:06:32,760 --> 00:06:34,730
Dus dat gaat worden
één van onze doelen hier.

128
00:06:34,730 --> 00:06:37,430
Bovendien, als je een stap te nemen
terug en kijk naar de kaart zelf,

129
00:06:37,430 --> 00:06:38,950
er is geen enkel nieuws.

130
00:06:38,950 --> 00:06:41,780
Zelfs als ik op en
slepen, geen markers eigenlijk

131
00:06:41,780 --> 00:06:45,560
verschijnen voor nieuws, want dat
uitdaging overblijft voor u als goed.

132
00:06:45,560 --> 00:06:48,490
>> Laten we eens een kijkje nemen dan
bij de verdeelsleutel.

133
00:06:48,490 --> 00:06:51,460
Als je eenmaal hebt gedownload
pset8.zip en uitgepakt

134
00:06:51,460 --> 00:06:54,430
in uw vhost directory
in de CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
je zult zien dat deze
directories hier binnen.

136
00:06:56,550 --> 00:07:00,200
Bin-- die algemeen betekent
binaire uitvoerbare programs--

137
00:07:00,200 --> 00:07:04,870
omvat, zoals in pset7, sommige PHP
Bestanden die andere bestanden bevatten,

138
00:07:04,870 --> 00:07:06,710
Vervolgens publiek, dat is
de bestanden die moeten

139
00:07:06,710 --> 00:07:09,369
publiekelijk toegankelijk zijn
Een gebruiker met een browser.

140
00:07:09,369 --> 00:07:11,410
Laten we eens een kijkje nemen in de
bin directory, en we zullen

141
00:07:11,410 --> 00:07:13,890
zien dat er een bestand
er reeds Import genoemd.

142
00:07:13,890 --> 00:07:17,591
Als we deze openen met gedit, we zullen zien
dat, helaas, er is niet veel

143
00:07:17,591 --> 00:07:18,090
daar.

144
00:07:18,090 --> 00:07:20,250
Dat alles is er, hoewel,
is een keet aan de bovenkant

145
00:07:20,250 --> 00:07:23,410
waarin wordt aangegeven welke
interpreter-- in dit geval PHP--

146
00:07:23,410 --> 00:07:25,759
worden gebruikt om daadwerkelijk
voeren dit bestand.

147
00:07:25,759 --> 00:07:27,550
Maar dan waar het zegt
TODO is waar je bent

148
00:07:27,550 --> 00:07:31,130
gaat nodig hebben om wat code te schrijven
die waarschijnlijk vereist dat de config

149
00:07:31,130 --> 00:07:35,820
bestand dat is in de includes directory
zoals we eerder hebben gedaan met PHP-bestanden.

150
00:07:35,820 --> 00:07:38,180
En dan ga je
moeten een of andere manier open te stellen

151
00:07:38,180 --> 00:07:41,920
us.text die je vermoedelijk
zijn al uitgepakt.

152
00:07:41,920 --> 00:07:44,690
Dan bent u gaat te hebben om
itereren over de lijnen in het bestand

153
00:07:44,690 --> 00:07:47,800
wellicht met behulp van een aantal van de functies
voorgesteld in de specificatie.

154
00:07:47,800 --> 00:07:51,390
Plaats vervolgens elk van deze
lijnen in MySQL-database

155
00:07:51,390 --> 00:07:54,940
Door de query functie die
we hebben je weer voorzien met--

156
00:07:54,940 --> 00:07:58,010
of ten minste een variant
daarvan in functions.php,

157
00:07:58,010 --> 00:07:59,560
die we zullen zien in slechts een ogenblik.

158
00:07:59,560 --> 00:08:04,430
>> Laten we nu eens sluiten import en ga terug naar
onze directory en deze keer gaan in

159
00:08:04,430 --> 00:08:05,300
omvat.

160
00:08:05,300 --> 00:08:09,210
En als ik ls doen daar, zie je
drie bestanden heel graag Probleemverzameling 7.

161
00:08:09,210 --> 00:08:13,760
En laten we eens een snelle blik,
bijvoorbeeld bij config.php.

162
00:08:13,760 --> 00:08:16,730
Daar, is minder regels
dan voorheen, en

163
00:08:16,730 --> 00:08:20,712
lijkt dit bestand bevat
constants.php en functions.php.

164
00:08:20,712 --> 00:08:23,670
We gebruiken een iets andere
techniek rond deze tijd om daadwerkelijk

165
00:08:23,670 --> 00:08:30,910
specificeren dat deze bestanden zijn ten opzichte
naar de huidige directory __ DIR__

166
00:08:30,910 --> 00:08:35,280
vertegenwoordigt welke map deze
bestand config.php, is zelf in.

167
00:08:35,280 --> 00:08:37,600
Dus dit is een
expliciete manier van specificeren

168
00:08:37,600 --> 00:08:40,100
wat andere bestanden die u wilt vragen.

169
00:08:40,100 --> 00:08:44,020
>> Nu als ik sluit dit bestand en
openstellen constants.php plaats,

170
00:08:44,020 --> 00:08:47,430
je een bestand te zien erg denken
om Probleemverzameling 7's als goed, zij het

171
00:08:47,430 --> 00:08:50,050
met een andere database genaamd pset8.

172
00:08:50,050 --> 00:08:54,020
Tot slot, in functions.php,
we zullen gewoon één functie zien

173
00:08:54,020 --> 00:08:55,942
dit keer genaamd zoekopdracht.

174
00:08:55,942 --> 00:08:59,150
Dit is bijna hetzelfde, behalve wij omgaan
fouten deze keer een beetje

175
00:08:59,150 --> 00:09:02,860
anders, maar het is gebruik is
hetzelfde als in problemen stelde zeven.

176
00:09:02,860 --> 00:09:08,090
>> Nu gaan we terug in onze pset8
directory, gaan in het openbaar, en daar

177
00:09:08,090 --> 00:09:14,420
als ik ls doet, zul je zien dit--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
en update.php-- alle bestanden.

179
00:09:16,940 --> 00:09:22,010
En dan is de css fonts, img en
js directory heel graag pset7.

180
00:09:22,010 --> 00:09:24,660
>> Laten we eens een kijkje nemen op
index.html, hetgeen

181
00:09:24,660 --> 00:09:27,290
gaat echt het zijn
toegangspunt tot de Smashup.

182
00:09:27,290 --> 00:09:31,820
Nu in index.html, zie je een hele
stelletje koppeling elementen in het hoofd,

183
00:09:31,820 --> 00:09:36,540
in het bijzonder, voor de bootstrap voor onze eigen
CSS gevolgd door een hele hoop script

184
00:09:36,540 --> 00:09:41,520
tags voor dingen zoals de kaarten, API
zelf, een speciale marker met label

185
00:09:41,520 --> 00:09:44,950
hulpprogramma dat we in de genoemde
specificatie is voor u beschikbaar,

186
00:09:44,950 --> 00:09:48,420
jQuery zelf, bootstrap
zelf en andere bibliotheek

187
00:09:48,420 --> 00:09:50,990
genaamd underscore die
we praten over de spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js zoals jquery.js
is een JavaScript-bibliotheek

189
00:09:57,031 --> 00:10:00,280
dat heeft een hele hoop functionaliteit
dat veel mensen in de wereld wens

190
00:10:00,280 --> 00:10:02,020
bestonden in JavaScript zichzelf.

191
00:10:02,020 --> 00:10:04,560
Dus al deze zijn
eigenlijk heel populair.

192
00:10:04,560 --> 00:10:07,140
We hebben ook gezegd typeahead
die de bibliotheek

193
00:10:07,140 --> 00:10:11,180
doet dat autocomplete dropdown en
eindelijk een link naar onze eigen JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Ondertussen, en misschien
Gelukkig, dit mashup

195
00:10:13,880 --> 00:10:17,550
wordt door relatief weinig
HTML hier beneden op de bodem.

196
00:10:17,550 --> 00:10:22,330
Merk op dat we een div in hebt opgegeven
ons lichaam van klasse-container vloeistof.

197
00:10:22,330 --> 00:10:24,610
Dit, per bootstrap's
documentatie, net

198
00:10:24,610 --> 00:10:29,840
betekent dat deze div gaat het vullen
viewport of raam volledig van de browser.

199
00:10:29,840 --> 00:10:33,020
>> Ondertussen, daaronder we een div
dat is geopend en meteen gesloten

200
00:10:33,020 --> 00:10:34,790
met de unieke ID van de kaart canvas.

201
00:10:34,790 --> 00:10:37,400
Dit is nu van Google
Kaarten documentatie

202
00:10:37,400 --> 00:10:42,490
voor de API, waarbij ik moet gewoon
een lege div waarin te injecteren,

203
00:10:42,490 --> 00:10:44,470
uiteindelijk, een echte Google Maps.

204
00:10:44,470 --> 00:10:46,310
Maar meer daarover in slechts een beetje.

205
00:10:46,310 --> 00:10:48,850
>> Tot slot is er een vorm
binnenkant van hier die

206
00:10:48,850 --> 00:10:52,930
implementeert het tekstvak up linksboven
in onze interface voor het zoeken.

207
00:10:52,930 --> 00:10:54,730
Merk op dat we hebben gebruikt
een beetje van bootstrap

208
00:10:54,730 --> 00:10:57,670
hier too-- dingen zoals
form-inline en vorm-groep.

209
00:10:57,670 --> 00:11:00,080
We hebben de voormalige gegeven
unieke ID van de vorm.

210
00:11:00,080 --> 00:11:04,510
En dan, uiteindelijk, ik heb eigenlijk
een soort input, die redelijk bekend is,

211
00:11:04,510 --> 00:11:06,440
waarvan de ID q.

212
00:11:06,440 --> 00:11:07,230
Gewoon een conventie.

213
00:11:07,230 --> 00:11:09,234
Q voor query-- konden
is er iets geroepen.

214
00:11:09,234 --> 00:11:11,400
En dan is de tijdelijke aanduiding,
Ondertussen is de stad, staat,

215
00:11:11,400 --> 00:11:16,200
en de postcode die u misschien herinneren
zien in onze mashup demo eerder.

216
00:11:16,200 --> 00:11:17,980
Laten we sluiten dit bestand.

217
00:11:17,980 --> 00:11:24,460
>> Neem nu een kijkje op de PHP-bestanden die
wachten en dan de JavaScript-bestanden.

218
00:11:24,460 --> 00:11:27,700
In onze PHP-bestanden, we hebben
reeds geïmplementeerd voor u,

219
00:11:27,700 --> 00:11:29,960
bijvoorbeeld updates.

220
00:11:29,960 --> 00:11:35,060
Update.php-- we niet zullen besteden een enorme
hoeveelheid tijd op hier-- in een notendop

221
00:11:35,060 --> 00:11:38,400
is het bestand dat onze
JavaScript-code gaat

222
00:11:38,400 --> 00:11:41,610
contact op te nemen via AJAX dat
asynchrone techniek die is

223
00:11:41,610 --> 00:11:45,980
ingebouwd in Javascript deze dagen dat is
gaan om ons in staat te update.php vragen

224
00:11:45,980 --> 00:11:47,410
voor meer informatie.

225
00:11:47,410 --> 00:11:50,045
>> In het bijzonder, op elk gewenst moment
de gebruiker de kaart sleept

226
00:11:50,045 --> 00:11:53,310
of voert een zoekopdracht uit dat springt
de gebruiker naar een andere locatie,

227
00:11:53,310 --> 00:11:55,250
onze JavaScript-code,
als we straks zullen zien, is

228
00:11:55,250 --> 00:11:59,610
gaan noemen update.php
en vraag naar 10 of zo markers

229
00:11:59,610 --> 00:12:02,630
binnen de viewport gebaseerde
de GPS coördinaten

230
00:12:02,630 --> 00:12:06,510
van de bovenste en onderste
hoeken van die kaart.

231
00:12:06,510 --> 00:12:10,520
We kunnen dan opnieuw te bevolken de kaart nu dat
de gebruiker het scherm in orde is verhuisd

232
00:12:10,520 --> 00:12:14,210
tot 10 waarschijnlijk nieuwe zien
merkers voor verschillende steden.

233
00:12:14,210 --> 00:12:18,340
Ondertussen is dit bestand is uiteindelijk
gaan naar een SQL-query uit te voeren

234
00:12:18,340 --> 00:12:21,680
tegen onze database
tabel met de naam plaatsen die

235
00:12:21,680 --> 00:12:26,380
zal deze terugkeren
10 of minder plaatsen.

236
00:12:26,380 --> 00:12:32,620
>> Ondertussen, in articles.php, is een
bestand dat we in zijn geheel heb geschreven.

237
00:12:32,620 --> 00:12:35,820
Het is zeer vergelijkbaar in geest
Probleem Set 7's functie ZOEKEN,

238
00:12:35,820 --> 00:12:39,450
die Yahoo Finance gecontacteerd voor u.

239
00:12:39,450 --> 00:12:43,710
Dit bestand contacten Google Nieuws
voor u, uiteindelijk grijpen

240
00:12:43,710 --> 00:12:46,050
een machine leesbare
version-- in iets

241
00:12:46,050 --> 00:12:49,720
genaamd RSS met de indeling van het nieuws
Cambridge of Beverly Hills

242
00:12:49,720 --> 00:12:52,880
of welke stad u heeft gezocht
voor op basis van die geoparameter.

243
00:12:52,880 --> 00:12:57,250
We ontleden dat RSS, dat is gewoon een
type opmaaktaal genaamd XML,

244
00:12:57,250 --> 00:13:00,740
en dan eigenlijk wij
terug te sturen naar uw browser

245
00:13:00,740 --> 00:13:03,570
en om uw JavaScript-code,
in het bijzonder, in een formaat genaamd

246
00:13:03,570 --> 00:13:06,097
JSON, JavaScript Object Notation.

247
00:13:06,097 --> 00:13:08,180
Nu zie je in de
specification-- wijzen wij u

248
00:13:08,180 --> 00:13:10,720
hoe kan je eigenlijk zien
een aantal van de JSON komende Terug--

249
00:13:10,720 --> 00:13:15,210
dat deze functionaliteit uiteindelijk
laat u dus bevolken deze popup menu's

250
00:13:15,210 --> 00:13:16,960
dat wanneer je klikt
op een marker op de kaart

251
00:13:16,960 --> 00:13:19,430
je eigenlijk zien een hele hoop
kogels, die elk

252
00:13:19,430 --> 00:13:21,020
Verwijzingen naar een artikel.

253
00:13:21,020 --> 00:13:25,000
>> Laten we nu eens een kijkje nemen op een laatste
PHP bestand dat, gelukkig, niet

254
00:13:25,000 --> 00:13:27,970
hebben veel gaande on--
gewoon een vrij grote TODO.

255
00:13:27,970 --> 00:13:32,170
Op dit moment is dit bestand verklaart
een array met de naam plaatsen.

256
00:13:32,170 --> 00:13:35,980
En dan uiteindelijk prints
die array in JSON met de indeling

257
00:13:35,980 --> 00:13:38,720
pretty-printen is het gewoon zo dat
dingen zijn makkelijker te debuggen.

258
00:13:38,720 --> 00:13:41,480
Helaas, in de
midden is er dit TODO,

259
00:13:41,480 --> 00:13:46,890
waarin wordt gepleit voor u de zoekopdracht
databank voor plaatsen die overeenkomen met een geo HTTP

260
00:13:46,890 --> 00:13:47,490
parameter.

261
00:13:47,490 --> 00:13:49,865
>> En, inderdaad, dit gaat
een van uw challenges--

262
00:13:49,865 --> 00:13:54,240
om deze functionaliteit te implementeren hier
zodat wanneer u contact opnemen met dit bestand met

263
00:13:54,240 --> 00:14:00,610
een URL zoals zoeken. php? geo = iets,
uw code zal uiteindelijk terug een JSON

264
00:14:00,610 --> 00:14:05,020
matrix van alle plaatsen in
database tabel die overeenkomen met die ingang.

265
00:14:05,020 --> 00:14:08,960
Dus als de gebruiker typt in Cambridge,
uw bestand hier search.php

266
00:14:08,960 --> 00:14:12,680
moet uiteindelijk terug een JSON-array
voor al de wedstrijden voor Cambridge,

267
00:14:12,680 --> 00:14:16,990
die zou kunnen zijn in Massachusetts
maar kon ook ergens anders zijn.

268
00:14:16,990 --> 00:14:21,040
>> Tot slot, laten we een kijkje nemen op twee
bestanden die zijn statisch ultimately--

269
00:14:21,040 --> 00:14:23,680
je CSS-bestand en uw JavaScript-bestand.

270
00:14:23,680 --> 00:14:26,779
Als ik in onze CSS directory,
er is een hele hoop bestanden daar,

271
00:14:26,779 --> 00:14:28,070
maar de meeste van hen zijn bibliotheken.

272
00:14:28,070 --> 00:14:31,530
Ik ga een kijkje nemen,
specifiek, op styles.css,

273
00:14:31,530 --> 00:14:35,440
dat is onze eigen wereldwijde CSS dat is
ga deze hele mashup stileren.

274
00:14:35,440 --> 00:14:38,840
Ik laat het aan u door te lezen
hierin de opmerkingen, maar, in een notendop,

275
00:14:38,840 --> 00:14:43,490
dit is de CSS die ervoor zorgt dat onze
mashup, standaard uit de doos,

276
00:14:43,490 --> 00:14:46,950
ziet er precies zoals we willen het--
met de kaart invullen van het uitzicht haven

277
00:14:46,950 --> 00:14:49,720
en met het zoeken
doos op de top linkerkant.

278
00:14:49,720 --> 00:14:52,870
We hebben ook genomen van de vrijheid van
stileren dat typeahead dropdown

279
00:14:52,870 --> 00:14:55,170
menu een beetje ook.

280
00:14:55,170 --> 00:14:58,030
>> Het belangrijkste bestand
misschien voor dit probleem stellen

281
00:14:58,030 --> 00:15:01,070
is dit laatste, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Binnenkant van je JS directory
nog meer bestanden.

283
00:15:03,800 --> 00:15:08,090
Allemaal zijn library bestanden
behalve deze ene, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Als we open deze op, laten we onze
laatste tour door de functies die

285
00:15:11,460 --> 00:15:13,820
zijn ingebouwd in dit bestand
voor u en vraagaandacht

286
00:15:13,820 --> 00:15:16,200
naar Todos die voor ons liggen.

287
00:15:16,200 --> 00:15:19,110
>> Op de top van dit bestand,
drie globale variabelen.

288
00:15:19,110 --> 00:15:22,910
Een voor een kaart, die gaat
zijn een verwijzing naar onze Google map.

289
00:15:22,910 --> 00:15:25,510
U kunt denken aan het
soort als een pointer.

290
00:15:25,510 --> 00:15:27,710
Ondertussen hebben we
een andere globale variabele

291
00:15:27,710 --> 00:15:31,500
genaamd info, die lijkt te zijn
opslaan van de return waarde van een oproep

292
00:15:31,500 --> 00:15:34,170
om nieuwe google.maps.InfoWindow.

293
00:15:34,170 --> 00:15:37,835
JavaScript ondersteunt voorwerpen die
zijn zeer vergelijkbaar in de geest te Struts.

294
00:15:37,835 --> 00:15:40,250
En wat deze lijn voor
onze doeleinden doet

295
00:15:40,250 --> 00:15:42,820
is het creëren van een nieuwe info
venster in het geheugen en vervolgens

296
00:15:42,820 --> 00:15:46,330
houden rond een referentie
daarop in een variabele genaamd Info.

297
00:15:46,330 --> 00:15:48,330
En tussen die,
Ondertussen, is het blijkbaar

298
00:15:48,330 --> 00:15:51,060
een lege JavaScript te zijn
array met de naam markers.

299
00:15:51,060 --> 00:15:55,392
Al deze krant iconen, of u
misschien een ander pictogram helemaal kiezen,

300
00:15:55,392 --> 00:15:57,350
zullen worden opgeslagen
uiteindelijk in deze array

301
00:15:57,350 --> 00:16:01,570
zodat we heel gemakkelijk kunnen toevoegen aan
de kaart en ze te verwijderen uit de map.

302
00:16:01,570 --> 00:16:03,990
>> Laten we nu eens naar beneden scrollen
een klein beetje en whizzkid

303
00:16:03,990 --> 00:16:07,690
door de code die gaat worden
uitgevoerd zodra de DOM of document

304
00:16:07,690 --> 00:16:10,480
object model of de
pagina zelf is klaar.

305
00:16:10,480 --> 00:16:12,942
Bedenk dat deze syntaxis
hier gewoon specificeert

306
00:16:12,942 --> 00:16:14,900
dat de volgende code
mag alleen worden uitgevoerd

307
00:16:14,900 --> 00:16:17,840
wanneer de browser klaar
het laden van al het andere.

308
00:16:17,840 --> 00:16:19,750
>> Wij verklaren eerst een
heleboel stijlen,

309
00:16:19,750 --> 00:16:22,410
die uiteindelijk het stileren
de kaart volgens de spec.

310
00:16:22,410 --> 00:16:24,790
Verklaren wij dan een
hele hoop opties,

311
00:16:24,790 --> 00:16:28,630
die verder aanpassen van de Google
kaart dat we op het punt om te verankeren.

312
00:16:28,630 --> 00:16:32,090
Vervolgens gebruiken we een beetje van jQuery code,
Dit wordt uitgelegd in wat meer detail

313
00:16:32,090 --> 00:16:35,000
in de spec, om te grijpen
dat element, map-doek

314
00:16:35,000 --> 00:16:36,980
dat we zo uniek geïdentificeerd.

315
00:16:36,980 --> 00:16:40,640
En dan is deze lijn is hier
wat lijkt op magische geven ons

316
00:16:40,640 --> 00:16:43,560
een Google-kaart binnen van
onze eigen applicatie,

317
00:16:43,560 --> 00:16:47,020
opslaan van een verwijzing hiernaar
doordat map met de naam.

318
00:16:47,020 --> 00:16:50,550
>> Tot slot, hier beneden registreren we
wat heet een luisteraar.

319
00:16:50,550 --> 00:16:54,690
Denk Terug-- weg, weg
Terug-- tot week nul in CS50

320
00:16:54,690 --> 00:16:57,430
Toen we keken naar Scratch en
haar steun door middel van een wandeling

321
00:16:57,430 --> 00:16:59,935
door voor dingen geroepen
evenementen en uitzendingen.

322
00:16:59,935 --> 00:17:01,810
Je zou niet hebben gebruikt
het zelf, maar het is

323
00:17:01,810 --> 00:17:03,900
een mechanisme waarbij een
browser casu

324
00:17:03,900 --> 00:17:07,940
kan onze aandacht te krijgen wanneer het
klaar om enkele code daadwerkelijk uit te voeren.

325
00:17:07,940 --> 00:17:12,170
In dit geval gaat het om te luisteren
om de kaart voor een evenement genaamd inactief.

326
00:17:12,170 --> 00:17:14,930
Dit betekent dat de browser
klaar met het laden van de Google map.

327
00:17:14,930 --> 00:17:18,380
Op dit moment wel een functie
configure moet uiteindelijk

328
00:17:18,380 --> 00:17:19,339
uitgevoerd.

329
00:17:19,339 --> 00:17:22,510
Die functie, configureren,
we zullen zien, is geschreven door ons.

330
00:17:22,510 --> 00:17:24,550
>> Nu hier beneden is een functie
dat helaas

331
00:17:24,550 --> 00:17:25,871
is gewoon een TODO markering toevoegen.

332
00:17:25,871 --> 00:17:28,620
Per de spec. je gaat nodig hebben
om de code die eigenlijk te schrijven

333
00:17:28,620 --> 00:17:32,840
voegt een marker-- of het eruit ziet
als een krant, of een duim Tack,

334
00:17:32,840 --> 00:17:35,360
of iets else-- naar de Google map.

335
00:17:35,360 --> 00:17:37,720
Hier is nu die functie
riep configure.

336
00:17:37,720 --> 00:17:40,390
Ik laat het aan u om te lezen
door deze in meer detail,

337
00:17:40,390 --> 00:17:42,600
maar beseffen dat we voegen
een bos meer Luisteraars

338
00:17:42,600 --> 00:17:46,620
zodat we de code kan uitvoeren wanneer de
gebruiker klikt op en trekt de kaart.

339
00:17:46,620 --> 00:17:50,730
We hebben ook de code in hier dat
geïnitialiseerd dat typeahead plugin

340
00:17:50,730 --> 00:17:53,120
zodat de dropdown
menu eigenlijk werkt.

341
00:17:53,120 --> 00:17:55,690
>> Maar laten we focussen op slechts een
paar plaatsen hierin.

342
00:17:55,690 --> 00:17:57,590
Specifiek, dit te doen hier.

343
00:17:57,590 --> 00:18:00,410
Ik zal zich naar de online
documentatie en de specificatie

344
00:18:00,410 --> 00:18:02,530
voor hoe je in deze TODO vullen.

345
00:18:02,530 --> 00:18:05,890
Maar in een notendop, deze bibliotheek
typeahead kunt u doorgeven

346
00:18:05,890 --> 00:18:09,790
in wat algemeen bekend staat als een sjabloon,
die enkele variabele placeholders heeft

347
00:18:09,790 --> 00:18:13,690
zeer vergelijkbaar in de geest om printf's%. * s.

348
00:18:13,690 --> 00:18:16,030
Maar in dit geval, de
sjabloon per de spec

349
00:18:16,030 --> 00:18:18,760
kunt u opgeven
welke variabelen je wilt

350
00:18:18,760 --> 00:18:24,880
injecteren van gegevens die is gekomen
terug van iets als de PHP

351
00:18:24,880 --> 00:18:29,810
bestanden die u hebt geschreven
die worden emitting JSON-uitgang.

352
00:18:29,810 --> 00:18:35,170
>> Nu hier beneden realiseren dat we
luisteren naar typeahead selecties

353
00:18:35,170 --> 00:18:38,050
wanneer de gebruiker geleidt
een zoeken en selecteert een waarde.

354
00:18:38,050 --> 00:18:40,270
Dit is hoe we zijn eigenlijk
gaan voor die te luisteren

355
00:18:40,270 --> 00:18:42,250
en uitvoeren van een code als resultaat.

356
00:18:42,250 --> 00:18:45,300
Daarna gaan we verder om te configureren
de mashup maar een klein beetje.

357
00:18:45,300 --> 00:18:48,000
En, uiteindelijk, noemen we
Deze functie-update.

358
00:18:48,000 --> 00:18:49,640
Het bijwerken van de markeringen op het scherm.

359
00:18:49,640 --> 00:18:51,529
Meer daarover in slechts een moment.

360
00:18:51,529 --> 00:18:53,570
Inmiddels zijn er een paar
kleine functies in hier.

361
00:18:53,570 --> 00:18:56,820
Een daarvan is hideInfo welke
eenvoudigweg sluit de InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Een andere functie hier, die uiteindelijk
zal niet al te lang zijn, te verwijderen markers.

363
00:19:00,020 --> 00:19:03,580
Dat gaat om ongedaan te maken wat
uw add marker functie doet.

364
00:19:03,580 --> 00:19:04,960
En dan hier beneden is zoek.

365
00:19:04,960 --> 00:19:08,610
En dit is interessant, omdat we
de JavaScript-code die is geschreven

366
00:19:08,610 --> 00:19:13,490
naar search.php spreken over de
server en krijgt terug wat respons.

367
00:19:13,490 --> 00:19:16,110
>> U, natuurlijk, zal hij nog altijd
moeten implementeren search.php,

368
00:19:16,110 --> 00:19:18,310
maar we hebben geïmplementeerd de
JavaScript-code dat is

369
00:19:18,310 --> 00:19:22,480
gaan om daadwerkelijk te behandelen uitvoeren
zoekt uit dat tekstvak.

370
00:19:22,480 --> 00:19:25,340
In het bijzonder, bericht
dat deze functie hier,

371
00:19:25,340 --> 00:19:29,160
zoeken, doet oproep search.php
door een methode genaamd

372
00:19:29,160 --> 00:19:31,072
krijgen JSON, die we zagen in de collegezaal.

373
00:19:31,072 --> 00:19:32,780
En de syntax hier
is een beetje anders

374
00:19:32,780 --> 00:19:37,110
vanaf lezing in dat we gebruiken
jQuery zogenaamde belofte interface.

375
00:19:37,110 --> 00:19:38,479
Meer daarover in de spec.

376
00:19:38,479 --> 00:19:40,520
Dit betekent simpelweg onze
doeleinden nu er

377
00:19:40,520 --> 00:19:43,870
zijn twee speciale functies we
moet bellen met puntnotatie

378
00:19:43,870 --> 00:19:46,230
hier onmiddellijk na het aanroepen krijgen JSON.

379
00:19:46,230 --> 00:19:47,510
Een daarvan is gedaan genoemd.

380
00:19:47,510 --> 00:19:49,870
Een heet mislukken.

381
00:19:49,870 --> 00:19:51,790
U kunt denken aan deze
het succes handler

382
00:19:51,790 --> 00:19:54,960
en het falen handler net
in het geval er iets misgaat.

383
00:19:54,960 --> 00:19:57,760
>> Laten we nu eens kijken naar de laatste
paar functies in dit bestand.

384
00:19:57,760 --> 00:20:00,180
Hier beneden is een functie
genaamd showinfo, die

385
00:20:00,180 --> 00:20:03,090
toont info in een van die
weinig info ramen die

386
00:20:03,090 --> 00:20:05,380
opduikt wanneer de gebruiker een marker klikt.

387
00:20:05,380 --> 00:20:08,470
Hier beneden verder is
die update-functie

388
00:20:08,470 --> 00:20:10,510
die wij hebben uitgevoerd voor u.

389
00:20:10,510 --> 00:20:15,250
Het bepaalt de grenzen van de kaart.

390
00:20:15,250 --> 00:20:19,360
Wat zijn de GPS-coördinaten van de
noordoosten en zuidwesten hoeken hier.

391
00:20:19,360 --> 00:20:22,780
We hebben een aantal HDP parameters voorbereid
hier en dan gaf ze uiteindelijk

392
00:20:22,780 --> 00:20:26,160
naar update.php, die we hebben
eveneens uitgevoerd voor u.

393
00:20:26,160 --> 00:20:31,390
Die uiteindelijk krijgt terug wat JSON
uit het bestand met de naam update.php

394
00:20:31,390 --> 00:20:34,050
en verwijdert vervolgens elke
markeringen op het scherm

395
00:20:34,050 --> 00:20:36,650
en dan doorloopt
de gegevens die terug is gekomen

396
00:20:36,650 --> 00:20:40,350
uit update.php, die
weer is gewoon een JSON array.

397
00:20:40,350 --> 00:20:45,130
En dan voegt het uiteindelijk een marker voor
elk van deze plaatsen, behandeling falen

398
00:20:45,130 --> 00:20:47,750
of fouten die heel goed kan gebeuren.

399
00:20:47,750 --> 00:20:51,550
>> Nu alleen maar om u een voorproefje van hoe je geeft
zou kunnen gaan over het debuggen van dit project,

400
00:20:51,550 --> 00:20:55,420
besef dat ik in hebt geopend
vooruit dit tabblad hier om deze URL,

401
00:20:55,420 --> 00:21:01,320
pset8 / articles.php? geo = 02138.

402
00:21:01,320 --> 00:21:04,050
Nu, weer, artikelen over
PHP implementeerden we voor u

403
00:21:04,050 --> 00:21:06,320
dus dit is niet zozeer
wat je zult gebruiken

404
00:21:06,320 --> 00:21:08,190
te debuggen, maar eerder de techniek.

405
00:21:08,190 --> 00:21:10,590
Merk op dat ik heb gezocht naar
Cambridge postcode hier,

406
00:21:10,590 --> 00:21:15,260
en ik heb terug gekregen, inderdaad, een JSON
scala van JSON objecten binnenkant van die

407
00:21:15,260 --> 00:21:17,640
zijn twee keys-- koppeling en de titel.

408
00:21:17,640 --> 00:21:19,860
>> Dus deze functionaliteit
werkt al voor u.

409
00:21:19,860 --> 00:21:24,330
Maar deze techniek handmatig gaan
naar een URL als dit voor iets als

410
00:21:24,330 --> 00:21:31,710
search.php? geo = cambridge of 02138 of
ongeacht de gebruiker heeft getypt moet

411
00:21:31,710 --> 00:21:35,770
onschatbare waarde als je, jezelf, probeer
om erachter te komen of waarom

412
00:21:35,770 --> 00:21:38,510
search.php werkt of niet.

413
00:21:38,510 --> 00:21:41,720
>> Uiteindelijk dan, je hebt
een paar TODOS voor je.

414
00:21:41,720 --> 00:21:44,250
Je gaat naar de eerste werktuigen
dat import script dat

415
00:21:44,250 --> 00:21:46,520
leest in us.text in uw database.

416
00:21:46,520 --> 00:21:48,760
Je bent dan gaat nodig hebben
te implementeren search.php

417
00:21:48,760 --> 00:21:51,320
zodat het zich gedraagt ​​precies zoals aangegeven.

418
00:21:51,320 --> 00:21:54,170
U bent dan van plan te willen
zich te richten op scripts.js

419
00:21:54,170 --> 00:21:57,520
en uiteindelijk implementeert
die paar Todos,

420
00:21:57,520 --> 00:21:59,950
waaronder voor configure
en dat sjabloon,

421
00:21:59,950 --> 00:22:03,220
markers toevoegen, verwijderen markers, en
Vervolgens duren, but not least, een

422
00:22:03,220 --> 00:22:04,330
persoonlijk tintje.

423
00:22:04,330 --> 00:22:07,477
>> Zodra u uw mashup werkende
vrij als de onze, het doel bij de hand

424
00:22:07,477 --> 00:22:09,560
is voor u om een ​​persoonlijke toe te voegen
aanraken om uw mashup,

425
00:22:09,560 --> 00:22:11,290
of het esthetische of functionele.

426
00:22:11,290 --> 00:22:13,950
Neem de mashup ooit zo
iets naar het volgende niveau.

427
00:22:13,950 --> 00:22:18,330
Zolang je duw jezelf voorbij
uw vertrouwdheid met de spec zelf

428
00:22:18,330 --> 00:22:20,840
en halen een techniek
nieuw, zelfs al is het maar

429
00:22:20,840 --> 00:22:25,610
iets esthetisch zoals het veranderen van de
lay-out van de kaart die u gebruikt,

430
00:22:25,610 --> 00:22:28,070
de ruimte die we verwachten
zal worden voldaan.

431
00:22:28,070 --> 00:22:30,260
Dat is dan Probleemverzameling 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Stay tuned voor meer in de
specificatie en het beste van geluk

433
00:22:33,070 --> 00:22:36,400
het aanpakken van deze, uw laatste
CS50 probleem ooit ingesteld.

434
00:22:36,400 --> 00:22:39,750
>> [Muziek]

435
00:22:39,750 --> 00:22:43,542