1
00:00:00,000 --> 00:00:03,388
>> [MUSIC SPILLE]

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

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

4
00:00:10,180 --> 00:00:12,600
La oss ta en spasertur gjennom
Problem Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
som kommer til å utfordre deg til
trekke på elementer for Google Maps

6
00:00:15,880 --> 00:00:20,905
med elementer fra Google News og mos
dem sammen til en web-applet som

7
00:00:20,905 --> 00:00:24,150
lar brukeren søke
et kart for nyheter lokalt

8
00:00:24,150 --> 00:00:26,780
til bestemte byer,
byer og postnummer.

9
00:00:26,780 --> 00:00:31,040
For å gjøre dette, skal vi
integrere noen HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
Javascript, og en teknikk
vanligvis kjent som AJAX for

11
00:00:34,390 --> 00:00:36,850
å skape denne oppslukende
brukeropplevelse.

12
00:00:36,850 --> 00:00:38,920
>> La oss først for Google Maps selv.

13
00:00:38,920 --> 00:00:41,220
Dette er selvfølgelig er kanskje
et velkjent grensesnitt.

14
00:00:41,220 --> 00:00:45,070
Men det viser seg at Google Maps
gir også en API-- søknad

15
00:00:45,070 --> 00:00:48,360
programmering interface-- via som
du kan ta elementer av Google Maps

16
00:00:48,360 --> 00:00:50,740
og integrere dem i
dine egne applikasjoner.

17
00:00:50,740 --> 00:00:52,650
Faktisk, i hele denne
prosessen, du kommer

18
00:00:52,650 --> 00:00:55,140
for å finne et par webadresser
spesielt nyttig at

19
00:00:55,140 --> 00:00:57,820
er nevnt i
spesifikasjon for Problem Set 8,

20
00:00:57,820 --> 00:01:00,980
spesielt denne Komme i gang
Veilede eller utviklerveiledningen

21
00:01:00,980 --> 00:01:07,640
for Google Maps API versjon 3, så vel
som Google Maps Javascript API

22
00:01:07,640 --> 00:01:10,260
v3 referanse, som er et
litt mer uforståelige å lese

23
00:01:10,260 --> 00:01:14,600
men har faktisk alle de lavere nivå
detaljer om hvilke funksjoner eller metoder

24
00:01:14,600 --> 00:01:18,220
og objekter og egenskaper og
hendelsene faktisk kommer med API,

25
00:01:18,220 --> 00:01:20,720
svært like i ånden
til [uhørbart] sider.

26
00:01:20,720 --> 00:01:23,480
>> Nå hvis vi tar en titt
på Google News, vil du

27
00:01:23,480 --> 00:01:25,370
kanskje se et kjent grensesnitt her.

28
00:01:25,370 --> 00:01:29,350
Men det viser seg at du kan også søke
Google News for bestemte geografiske områder

29
00:01:29,350 --> 00:01:32,000
via en HTTP parameter kalt geo.

30
00:01:32,000 --> 00:01:35,100
Faktisk, hvis jeg zoome inn
opp her, vil du se at

31
00:01:35,100 --> 00:01:41,672
Jeg er på
news.google.com/news/section?geo=02138.

32
00:01:41,672 --> 00:01:43,630
Og, ja, hvis jeg zoome
ut, vil du se at jeg er

33
00:01:43,630 --> 00:01:47,090
ser på en side med en hel haug med
synspunkter om Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> I mellomtiden, hvis jeg faktisk endre
URL ikke å være et postnummer som dette,

35
00:01:50,620 --> 00:01:55,580
men noe litt Messier
som Cambridge, + Massachusetts,

36
00:01:55,580 --> 00:02:00,740
der pluss er måten du koder en
mellomromstegnet i en URL og trykk Enter,

37
00:02:00,740 --> 00:02:02,907
vil du se at jeg faktisk
se nesten de samme nyhetene.

38
00:02:02,907 --> 00:02:05,489
Kanskje det er en litt annerledes
fordi Cambridge faktisk

39
00:02:05,489 --> 00:02:06,910
har flere postnumre.

40
00:02:06,910 --> 00:02:09,410
Nå hvordan skulle jeg vite det og,
faktisk, hvordan kunne jeg liksom

41
00:02:09,410 --> 00:02:12,940
knytte byer og tettsteder
til postnumre i tilfelle jeg

42
00:02:12,940 --> 00:02:15,064
vil tillate brukeren
å slå opp heller?

43
00:02:15,064 --> 00:02:17,480
Vel, det viser seg at det er
et nettsted der ute kalt

44
00:02:17,480 --> 00:02:20,060
geonames.org som er
et initiativ for å få

45
00:02:20,060 --> 00:02:23,760
en fritt tilgjengelig database over alle
slags geografisk informasjon,

46
00:02:23,760 --> 00:02:27,040
ikke bare for USA, men også
for andre land også.

47
00:02:27,040 --> 00:02:30,430
Faktisk, hvis jeg går til denne nettadressen her, som
er også nevnt i oppgavesettet

48
00:02:30,430 --> 00:02:34,510
spesifikasjonen, vil du se det tre
oppføring av en hel haug med zip-filer

49
00:02:34,510 --> 00:02:36,400
noen som kan lastes ned av deg.

50
00:02:36,400 --> 00:02:39,900
Faktisk, for dette oppgavesettet
du kommer til å laste ned us.zip.

51
00:02:39,900 --> 00:02:43,790
Nå innenfor denne filen, er en hel
haug av data i tekstformat.

52
00:02:43,790 --> 00:02:47,760
Filene som er svært lik en
CSV-- .csv file--

53
00:02:47,760 --> 00:02:51,294
men det faktisk bruker
kategoriene for å avgrense felt.

54
00:02:51,294 --> 00:02:53,710
Nå, i mellomtiden, hvis du ser
her hva jeg har uthevet,

55
00:02:53,710 --> 00:02:56,459
feltene i denne filen skal
å være ting som landkoder,

56
00:02:56,459 --> 00:02:58,980
postnummer, stedsnavn,
og deretter, i en eller annen form

57
00:02:58,980 --> 00:03:04,230
eller andre, stater og fylker,
lokalsamfunn, og mer.

58
00:03:04,230 --> 00:03:06,630
Faktisk har jeg allerede
lastet ned denne filen på forhånd.

59
00:03:06,630 --> 00:03:09,750
La meg gå videre og åpne den her--
us.text-- og, faktisk, vil du

60
00:03:09,750 --> 00:03:16,660
se om jeg bla ned til linje 16 792
du vil se noen poster for Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts og dets ulike postnummer.

62
00:03:19,120 --> 00:03:22,150
Det du også se det er fylket,
noen tall som jeg egentlig ikke liker

63
00:03:22,150 --> 00:03:24,500
forstå, men også alle
veien på høyre side,

64
00:03:24,500 --> 00:03:27,170
noen GPS coordinates--
breddegrad og lengdegrad.

65
00:03:27,170 --> 00:03:30,440
Dette er bra fordi en av
funksjonene i Google Maps API

66
00:03:30,440 --> 00:03:33,670
er evnen til å detektere
hvor du er geografisk

67
00:03:33,670 --> 00:03:36,850
i form av GPS-koordinater.

68
00:03:36,850 --> 00:03:40,210
>> La oss nå begynne å finne ut hvordan du
begynne å knytte disse tingene sammen.

69
00:03:40,210 --> 00:03:42,900
Vi har gitt deg en hel
haug med distribusjon kode,

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

71
00:03:44,970 --> 00:03:49,100
Faktisk, hvis jeg trekker en phpMyAdmin ha
allerede importert, som du snart vil,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, vil du se en MySQL tabell som
ser ut som dette, et ID-feltet, country

73
00:03:54,800 --> 00:03:57,400
kode, postnummer, stedsnavn og mer.

74
00:03:57,400 --> 00:04:00,490
Typene alle de
kolonner jeg avledet rett og slett

75
00:04:00,490 --> 00:04:03,870
ved å lese readme.text
fil her som er spesifisert

76
00:04:03,870 --> 00:04:07,330
om et felt er et helt tall,
eller varchar eller lignende.

77
00:04:07,330 --> 00:04:10,510
>> Så vi har laget dette bordet for
deg og gitt deg de SQL-kommandoer

78
00:04:10,510 --> 00:04:12,770
for å utføre for å skape den
bord i din egen database,

79
00:04:12,770 --> 00:04:15,290
men det er faktisk ingen data i det ennå.

80
00:04:15,290 --> 00:04:19,600
Heller, du er nødt til å
laste us.zip eller ethvert lands zip

81
00:04:19,600 --> 00:04:21,500
fil fra denne nettadressen der.

82
00:04:21,500 --> 00:04:24,940
Og da er du nødt til å skrive
en kommandolinje skript i PHP som er

83
00:04:24,940 --> 00:04:28,420
kommer til å åpne opp som tekst
fil, iterere over sine linjer,

84
00:04:28,420 --> 00:04:31,180
og deretter for hver av
disse linjene gjør en innsats

85
00:04:31,180 --> 00:04:34,940
inn som plasserer bordet
i din MySQL database.

86
00:04:34,940 --> 00:04:37,880
Så på slutten av denne prosessen, vil du
har kjørt skriptet slutt

87
00:04:37,880 --> 00:04:39,610
bare en gang i teorien.

88
00:04:39,610 --> 00:04:41,780
I realiteten vil du sannsynligvis
kjøre den en rekke ganger

89
00:04:41,780 --> 00:04:45,460
mens du prøver å fikse diverse bugs.

90
00:04:45,460 --> 00:04:48,440
>> Til syvende og sist, er du nødt til å ha en
virkelig stor database med tusenvis

91
00:04:48,440 --> 00:04:50,139
og tusenvis av geografiske rader.

92
00:04:50,139 --> 00:04:52,930
Deretter kommer du til å sette det import
script til side når det fungerer

93
00:04:52,930 --> 00:04:55,140
og databasen din er fin
og riktig, og deretter

94
00:04:55,140 --> 00:04:58,880
du kommer til å gå videre til faktisk
implementere mashup selv.

95
00:04:58,880 --> 00:05:01,670
Mashup kommer til å se
litt noe sånt som dette.

96
00:05:01,670 --> 00:05:05,165
På mashup.cs50.net, vi
har en stab løsning

97
00:05:05,165 --> 00:05:06,990
som ser litt noe sånt som dette.

98
00:05:06,990 --> 00:05:11,070
Faktisk, hvis jeg klikker på denne avis
ikon for Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
du får se et spinnende
ikon raskt, og deretter

100
00:05:13,300 --> 00:05:16,370
en ordnet liste, en
punktliste over artikler

101
00:05:16,370 --> 00:05:18,280
relatert til Cambridge, Massachusetts.

102
00:05:18,280 --> 00:05:20,352
Hvis jeg klikker på Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Jeg vil se den samme for den byen.

104
00:05:21,685 --> 00:05:24,174
Og hvis jeg klikker på
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
det kan ikke være noen
nyheter fra Watertown,

106
00:05:26,090 --> 00:05:28,630
så vil du se noe
som sakte nyheter dag.

107
00:05:28,630 --> 00:05:32,140
>> Nå, i mellomtiden, øverst til venstre er
noen kjente Google Maps kontroller

108
00:05:32,140 --> 00:05:34,980
å la deg zoome ut, pan
opp, ned, til venstre og høyre,

109
00:05:34,980 --> 00:05:37,360
men også en søkeboks som vi satt der.

110
00:05:37,360 --> 00:05:40,910
Så hvis jeg søker etter, ærlig,
den eneste andre postnummer jeg vet,

111
00:05:40,910 --> 00:05:45,020
90210, får vi faktisk se
Beverly Hills, California.

112
00:05:45,020 --> 00:05:48,550
Når klikket det fører meg til
California og en hel haug

113
00:05:48,550 --> 00:05:50,369
av nyheter om Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Nå legger merke til, også, hva som skjedde der.

115
00:05:51,910 --> 00:05:57,040
Hvis jeg denne gang søk etter 02138 eller til og med
Cambridge komma Massachusetts eller noen

116
00:05:57,040 --> 00:06:00,300
variant av denne, får du en
lite autofullfør nedtrekksmenyen.

117
00:06:00,300 --> 00:06:03,840
Nå dette er å bruke en plugin
for et bibliotek kalt jQuery,

118
00:06:03,840 --> 00:06:05,732
og at plugin kalles typeahead.

119
00:06:05,732 --> 00:06:07,440
Vi bare lese gjennom
dokumentasjonen,

120
00:06:07,440 --> 00:06:13,150
lastet ned JS-fil integrert
i fordelingen koden slik at du

121
00:06:13,150 --> 00:06:16,900
til slutt kan skrive koden som
fyller det nedtrekksmenyen med auto

122
00:06:16,900 --> 00:06:19,350
valg eller auto forslag.

123
00:06:19,350 --> 00:06:23,820
>> Nå fordelingen kode, men at
du mottok gjør ikke på langt nær så mye.

124
00:06:23,820 --> 00:06:26,860
Du får Google Map innebygd, og
du får kontrollene øverst til venstre,

125
00:06:26,860 --> 00:06:28,240
og du får søkeboksen.

126
00:06:28,240 --> 00:06:32,760
Men hvis jeg skriver noe sånt
02138, er ingen steder funnet ennå.

127
00:06:32,760 --> 00:06:34,730
Så det kommer til å bli
ett av våre mål her.

128
00:06:34,730 --> 00:06:37,430
Dessuten, hvis du tar et skritt
tilbake og se på selve kartet,

129
00:06:37,430 --> 00:06:38,950
det er ingen nyheter hodet.

130
00:06:38,950 --> 00:06:41,780
Selv om jeg klikker og
dra, ingen markører faktisk

131
00:06:41,780 --> 00:06:45,560
vises for nyheter fordi det
Utfordringen er igjen for deg også.

132
00:06:45,560 --> 00:06:48,490
>> La oss ta en titt da
ved fordelingskode.

133
00:06:48,490 --> 00:06:51,460
Når du har lastet ned
pset8.zip og pakket det

134
00:06:51,460 --> 00:06:54,430
inn din vhost katalogen
i CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
du vil se disse
kataloger her inne.

136
00:06:56,550 --> 00:07:00,200
Bin-- som vanligvis står for
binær for kjørbar programs--

137
00:07:00,200 --> 00:07:04,870
omfatter, som i pset7, noen PHP
filer som andre filer inkluderer,

138
00:07:04,870 --> 00:07:06,710
deretter offentlige, som er
filene som trenger

139
00:07:06,710 --> 00:07:09,369
å være offentlig tilgjengelig
til en bruker med en nettleser.

140
00:07:09,369 --> 00:07:11,410
La oss ta en titt i
bin-katalogen, og vi vil

141
00:07:11,410 --> 00:07:13,890
se at det er en fil
det allerede kalt Import.

142
00:07:13,890 --> 00:07:17,591
Hvis vi åpner dette med gedit, vi får se
at, dessverre, det er ikke mye

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

144
00:07:18,090 --> 00:07:20,250
Alt som er der, skjønt,
er en shebang på topp

145
00:07:20,250 --> 00:07:23,410
som angir hvilke
interpreter-- i dette tilfellet PHP--

146
00:07:23,410 --> 00:07:25,759
skal brukes til å faktisk
kjøre denne filen.

147
00:07:25,759 --> 00:07:27,550
Men så der det står
TODO er der du er

148
00:07:27,550 --> 00:07:31,130
kommer til å trenge å skrive noen kode
som trolig krever config

149
00:07:31,130 --> 00:07:35,820
fil som er i den inkluderer katalogen
som vi har gjort før med PHP-filer.

150
00:07:35,820 --> 00:07:38,180
Og så kommer dere til
må liksom åpne opp

151
00:07:38,180 --> 00:07:41,920
us.text som du antagelig
har pakket allerede.

152
00:07:41,920 --> 00:07:44,690
Da er du nødt til å
iterere over linjene i denne filen,

153
00:07:44,690 --> 00:07:47,800
kanskje bruke noen av funksjonene
antydet i beskrivelsen.

154
00:07:47,800 --> 00:07:51,390
Deretter setter hver av dem
linjer i MySQL database

155
00:07:51,390 --> 00:07:54,940
ved hjelp av spørrefunksjon som
vi har igjen gitt deg with--

156
00:07:54,940 --> 00:07:58,010
eller i det minste en variant
derav i functions.php,

157
00:07:58,010 --> 00:07:59,560
som vi vil se i bare et øyeblikk.

158
00:07:59,560 --> 00:08:04,430
>> Nå la oss lukke import og gå tilbake til
vår katalog og denne gangen går inn

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

160
00:08:05,300 --> 00:08:09,210
Og hvis jeg gjør ls der, vil du se
tre filer helt som Problem Set 7.

161
00:08:09,210 --> 00:08:13,760
Og la oss ta en rask titt,
for eksempel ved config.php.

162
00:08:13,760 --> 00:08:16,730
Der inne, er færre linjer
enn før, og det

163
00:08:16,730 --> 00:08:20,712
synes denne fila inneholder
constants.php og functions.php.

164
00:08:20,712 --> 00:08:23,670
Vi bruker en litt annen
teknikk denne gangen rundt å faktisk

165
00:08:23,670 --> 00:08:30,910
spesifisere at disse filene er relativ
til gjeldende katalog __ DIR__

166
00:08:30,910 --> 00:08:35,280
representerer uansett katalogen dette
fil, config.php, er i seg selv i.

167
00:08:35,280 --> 00:08:37,600
Så dette er en mer
eksplisitt måte å angi

168
00:08:37,600 --> 00:08:40,100
hva andre filer du vil kreve.

169
00:08:40,100 --> 00:08:44,020
>> Nå hvis jeg lukker denne filen og
åpne opp constants.php stedet,

170
00:08:44,020 --> 00:08:47,430
vil du se en fil veldig minner
til Problem Set 7-tallet også, om enn

171
00:08:47,430 --> 00:08:50,050
med en annen database kalt pset8.

172
00:08:50,050 --> 00:08:54,020
Til slutt, i functions.php,
vi får se bare én funksjon

173
00:08:54,020 --> 00:08:55,942
denne gangen kalt spørringen.

174
00:08:55,942 --> 00:08:59,150
Dette er nesten det samme bortsett fra at vi håndterer
feil denne gangen rundt en liten bit

175
00:08:59,150 --> 00:09:02,860
annerledes, men det er bruken er
det samme som i oppgavesettet sju.

176
00:09:02,860 --> 00:09:08,090
>> Nå la oss gå tilbake til vår pset8
katalog, gå inn i offentligheten, og i det

177
00:09:08,090 --> 00:09:14,420
hvis jeg gjør ls, vil du se dette--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
og update.php-- alle filer.

179
00:09:16,940 --> 00:09:22,010
Og så css fonter, img, og
js katalogen helt som pset7.

180
00:09:22,010 --> 00:09:24,660
>> La oss ta en titt på
index.html, som er

181
00:09:24,660 --> 00:09:27,290
kommer til å bli virkelig
inngangspunkt til smashup.

182
00:09:27,290 --> 00:09:31,820
Nå i index.html, vil du se en hel
haug med leddelementene i hodet,

183
00:09:31,820 --> 00:09:36,540
spesifikt, for bootstrap for vår egen
CSS etterfulgt av en hel haug med script

184
00:09:36,540 --> 00:09:41,520
koder for ting som kart, API
seg selv, en spesiell markør med etikett

185
00:09:41,520 --> 00:09:44,950
verktøy som vi nevnte i
spesifikasjonen er tilgjengelig for deg,

186
00:09:44,950 --> 00:09:48,420
jQuery selv, bootstrap
seg selv, og en annen bibliotek

187
00:09:48,420 --> 00:09:50,990
kalt strek som
vi snakker om i spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js som jquery.js
er en Javascript-bibliotek

189
00:09:57,031 --> 00:10:00,280
som har en hel haug med funksjonalitet
at mange mennesker i verden ønske

190
00:10:00,280 --> 00:10:02,020
eksistert i Javascript seg selv.

191
00:10:02,020 --> 00:10:04,560
Så alle disse er
faktisk ganske populær.

192
00:10:04,560 --> 00:10:07,140
Vi har også nevnt typeahead
som er biblioteket som

193
00:10:07,140 --> 00:10:11,180
gjør at autofullfør dropdown og
endelig en link til vår egen Javascript.

194
00:10:11,180 --> 00:10:13,880
>> I mellomtiden, og kanskje
heldigvis, dette mashup

195
00:10:13,880 --> 00:10:17,550
drives med forholdsvis liten
HTML her nede på bunnen.

196
00:10:17,550 --> 00:10:22,330
Legg merke til at vi har spesifisert en div i
vår kropp av klasse-container væske.

197
00:10:22,330 --> 00:10:24,610
Dette, per bootstrap s
dokumentasjon, bare

198
00:10:24,610 --> 00:10:29,840
betyr at denne div kommer til å fylle
view eller nettleservinduet fullt.

199
00:10:29,840 --> 00:10:33,020
>> I mellomtiden, under at vi har en div
som er åpnet og umiddelbart stengt

200
00:10:33,020 --> 00:10:34,790
med den unike ID av kartet lerret.

201
00:10:34,790 --> 00:10:37,400
Dette er nå fra Google
Kartene dokumentasjon

202
00:10:37,400 --> 00:10:42,490
for sin API, hvor jeg bare trenger å
har en tom div inn for å injisere,

203
00:10:42,490 --> 00:10:44,470
til slutt, en faktisk Google Maps.

204
00:10:44,470 --> 00:10:46,310
Men mer om det i bare litt.

205
00:10:46,310 --> 00:10:48,850
>> Til slutt er det en form
innsiden av her som

206
00:10:48,850 --> 00:10:52,930
implementerer tekstboksen opp øverst til venstre
i vår søkegrensesnitt mot.

207
00:10:52,930 --> 00:10:54,730
Legg merke til at vi har brukt
en bit av bootstrap

208
00:10:54,730 --> 00:10:57,670
her også-- ting som
form inline og form gruppe.

209
00:10:57,670 --> 00:11:00,080
Vi har gitt den tidligere
unik ID av form.

210
00:11:00,080 --> 00:11:04,510
Og så, til slutt, jeg har faktisk
en input type, som er ganske kjent,

211
00:11:04,510 --> 00:11:06,440
hvis ID er q.

212
00:11:06,440 --> 00:11:07,230
Bare en konvensjon.

213
00:11:07,230 --> 00:11:09,234
Q for query-- kunne ha
blitt kalt noe.

214
00:11:09,234 --> 00:11:11,400
Og så plassholderen,
i mellomtiden, er by, stat,

215
00:11:11,400 --> 00:11:16,200
og postnummer som du kanskje husker
se i vår mashup demo tidligere.

216
00:11:16,200 --> 00:11:17,980
La oss avslutte denne filen.

217
00:11:17,980 --> 00:11:24,460
>> Nå tar en titt på PHP-filer som
avvente og deretter Javascript-filer.

218
00:11:24,460 --> 00:11:27,700
I våre PHP-filer, vi har
allerede implementert for deg,

219
00:11:27,700 --> 00:11:29,960
for eksempel, oppdateringer.

220
00:11:29,960 --> 00:11:35,060
Update.php-- vi ikke vil bruke en stor
mengde tid på her-- i et nøtteskall

221
00:11:35,060 --> 00:11:38,400
er filen som vår
Javascript-kode kommer

222
00:11:38,400 --> 00:11:41,610
å ta kontakt via AJAX som
asynkron teknikk som er

223
00:11:41,610 --> 00:11:45,980
bygget inn Javascript i disse dager som er
kommer til å tillate oss å spørre update.php

224
00:11:45,980 --> 00:11:47,410
for mer informasjon.

225
00:11:47,410 --> 00:11:50,045
>> Spesifikt, når som helst
brukeren drar kartet

226
00:11:50,045 --> 00:11:53,310
eller utfører et søk som hopper
brukeren til et annet sted,

227
00:11:53,310 --> 00:11:55,250
vår Javascript-kode,
som vi vil snart se, er

228
00:11:55,250 --> 00:11:59,610
kommer til å ringe update.php
og be om 10 eller så markører

229
00:11:59,610 --> 00:12:02,630
innenfor synsfeltet basert
på GPS-koordinatene

230
00:12:02,630 --> 00:12:06,510
fra toppen og bunnen
hjørner av det kartet.

231
00:12:06,510 --> 00:12:10,520
Vi kan deretter fylle den på kartet nå at
at brukeren har beveget seg på skjermen i rekkefølge

232
00:12:10,520 --> 00:12:14,210
å se 10 trolig ny
markører for ulike byer.

233
00:12:14,210 --> 00:12:18,340
I mellomtiden er denne filen til slutt
kommer til å utføre en SQL-spørring

234
00:12:18,340 --> 00:12:21,680
mot vår database
bord kalt steder som

235
00:12:21,680 --> 00:12:26,380
kommer til å returnere dem
10 eller færre steder.

236
00:12:26,380 --> 00:12:32,620
>> I mellomtiden, i articles.php, er en annen
fil vi har skrevet i sin helhet.

237
00:12:32,620 --> 00:12:35,820
Det er veldig likt i ånden til
Problem Set 7s oppslag funksjon,

238
00:12:35,820 --> 00:12:39,450
som kontaktet Yahoo Finance for deg.

239
00:12:39,450 --> 00:12:43,710
Denne filen kontakter Google News
for deg, slutt å gripe

240
00:12:43,710 --> 00:12:46,050
maskinlesbart
version-- i noe

241
00:12:46,050 --> 00:12:49,720
kalt RSS format-- av nyhetene
for Cambridge eller Beverly Hills

242
00:12:49,720 --> 00:12:52,880
eller hva byen du har søkt
for, basert på at geoparameter.

243
00:12:52,880 --> 00:12:57,250
Vi analysere det RSS, som er bare en
type kodespråket XML,

244
00:12:57,250 --> 00:13:00,740
og da vi faktisk
returnere det til nettleseren din

245
00:13:00,740 --> 00:13:03,570
og til Javascript-koden,
spesifikt, i et format som heter

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

247
00:13:06,097 --> 00:13:08,180
Nå vil du se i
specification-- vi peke deg

248
00:13:08,180 --> 00:13:10,720
på hvordan du faktisk kan se
noen av JSON kommende back--

249
00:13:10,720 --> 00:13:15,210
at denne funksjonaliteten i siste instans
lar deg fylle disse popup menyer så

250
00:13:15,210 --> 00:13:16,960
at når du klikker
på en markør i kartet

251
00:13:16,960 --> 00:13:19,430
du faktisk se en hel haug
av kuler, hver av hvilke

252
00:13:19,430 --> 00:13:21,020
linker til en artikkel.

253
00:13:21,020 --> 00:13:25,000
>> Nå la oss ta en titt på en siste
PHP-fil som, heldigvis, ikke

254
00:13:25,000 --> 00:13:27,970
har mye å gå on--
bare en ganske stor TODO.

255
00:13:27,970 --> 00:13:32,170
Akkurat nå denne filen erklærer
en array kalt steder.

256
00:13:32,170 --> 00:13:35,980
Og så til slutt utskrifter
denne matrisen i JSON format--

257
00:13:35,980 --> 00:13:38,720
pen-utskrift det bare slik at
ting er lettere å feilsøke.

258
00:13:38,720 --> 00:13:41,480
Dessverre, i
midten er det dette TODO,

259
00:13:41,480 --> 00:13:46,890
som krever deg til å søke på
database for steder som sams en geo HTTP

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

261
00:13:47,490 --> 00:13:49,865
>> Og, ja, dette kommer til å
være en av dine challenges--

262
00:13:49,865 --> 00:13:54,240
å implementere denne funksjonaliteten her
slik at når du tar kontakt med denne filen med

263
00:13:54,240 --> 00:14:00,610
en URL som søk. php? geo = noe,
koden vil til slutt returnere en JSON

264
00:14:00,610 --> 00:14:05,020
utvalg av alle stedene i din
databasetabell som passer den inngangen.

265
00:14:05,020 --> 00:14:08,960
Så hvis brukeren skriver i Cambridge,
din fil her search.php

266
00:14:08,960 --> 00:14:12,680
bør til slutt returnere en JSON matrise
for alle kampene for Cambridge,

267
00:14:12,680 --> 00:14:16,990
som kan være i Massachusetts
men kan bli enda noe annet sted.

268
00:14:16,990 --> 00:14:21,040
>> Til slutt, la oss ta en titt på to
filer som er statisk ultimately--

269
00:14:21,040 --> 00:14:23,680
CSS-filen og Javascript-fil.

270
00:14:23,680 --> 00:14:26,779
Hvis jeg går inn i vår CSS katalog,
det er en hel haug med filer der,

271
00:14:26,779 --> 00:14:28,070
men de fleste av dem er biblioteker.

272
00:14:28,070 --> 00:14:31,530
Jeg kommer til å ta en titt,
spesifikt, ved styles.css,

273
00:14:31,530 --> 00:14:35,440
som er vår egen globale CSS som er
kommer til å stilisere hele denne mashup.

274
00:14:35,440 --> 00:14:38,840
Jeg overlater det til deg å lese gjennom
kommentarene her, men, i et nøtteskall,

275
00:14:38,840 --> 00:14:43,490
dette er CSS som sikrer at vår
mashup som standard ut av boksen,

276
00:14:43,490 --> 00:14:46,950
ser ut akkurat slik vi ønsker it--
med kartet fyller utsikten port

277
00:14:46,950 --> 00:14:49,720
og med søket
boksen opp øverst til venstre.

278
00:14:49,720 --> 00:14:52,870
Vi har også tatt meg den frihet å
stylizing at typeahead dropdown

279
00:14:52,870 --> 00:14:55,170
menyen litt også.

280
00:14:55,170 --> 00:14:58,030
>> Det viktigste fil
kanskje for dette oppgavesettet

281
00:14:58,030 --> 00:15:01,070
er dette siste, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Innsiden av JS katalogen
er enda flere filer.

283
00:15:03,800 --> 00:15:08,090
Alle av dem er bibliotekfiler
bortsett fra denne ene, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Hvis vi åpner dette opp, la oss ta vår
endelig tur gjennom de funksjonene som

285
00:15:11,460 --> 00:15:13,820
er bygget inn i denne filen
for deg og ringe oppmerksomhet

286
00:15:13,820 --> 00:15:16,200
til de todos som ligger foran oss.

287
00:15:16,200 --> 00:15:19,110
>> På toppen av denne filen,
er tre globale variabler.

288
00:15:19,110 --> 00:15:22,910
Ett for et kart, som kommer til å
være en referanse til vår Google kart.

289
00:15:22,910 --> 00:15:25,510
Du kan tenke på det
liksom som en peker.

290
00:15:25,510 --> 00:15:27,710
I mellomtiden har vi
en annen global variabel

291
00:15:27,710 --> 00:15:31,500
kalt info, som synes å være
lagring av returverdien til et anrop

292
00:15:31,500 --> 00:15:34,170
til ny google.maps.InfoWindow.

293
00:15:34,170 --> 00:15:37,835
Java støtter gjenstander som
er svært like i ånden til Struts.

294
00:15:37,835 --> 00:15:40,250
Og hva denne linjen for
vårt formål er å gjøre

295
00:15:40,250 --> 00:15:42,820
er å skape en ny info
vindu i minnet, og deretter

296
00:15:42,820 --> 00:15:46,330
holde rundt en referanse
dertil i en variabel kalt info.

297
00:15:46,330 --> 00:15:48,330
Og i mellom disse,
i mellomtiden, er det som vises

298
00:15:48,330 --> 00:15:51,060
å være en tom Java
array kalt markører.

299
00:15:51,060 --> 00:15:55,392
Alle disse avis ikoner, eller du
kan velge et annet ikon helt,

300
00:15:55,392 --> 00:15:57,350
kommer til å bli lagret
til slutt i denne matrisen

301
00:15:57,350 --> 00:16:01,570
slik at vi kan veldig enkelt legge til
kartet og fjerne dem fra kartet.

302
00:16:01,570 --> 00:16:03,990
>> Nå la oss rulle ned
litt og whiz

303
00:16:03,990 --> 00:16:07,690
gjennom koden som kommer til å være
utføres så snart DOM eller dokument

304
00:16:07,690 --> 00:16:10,480
objektmodell eller
side selv er klar.

305
00:16:10,480 --> 00:16:12,942
Husker at denne syntaksen
her bare spesifiserer

306
00:16:12,942 --> 00:16:14,900
at følgende kode
skal utføres kun

307
00:16:14,900 --> 00:16:17,840
når nettleseren er ferdig
lasting alt annet.

308
00:16:17,840 --> 00:16:19,750
>> Vi først erklære en
hel haug med stiler,

309
00:16:19,750 --> 00:16:22,410
som ender opp stylizing
kartet som per spec.

310
00:16:22,410 --> 00:16:24,790
Da erklærer vi en
hel haug av alternativer,

311
00:16:24,790 --> 00:16:28,630
som ytterligere tilpasse Google
kart som vi er i ferd med å bygge.

312
00:16:28,630 --> 00:16:32,090
Deretter bruker vi en bit av jQuery-kode,
som er forklart i litt mer detalj

313
00:16:32,090 --> 00:16:35,000
i spec, for å hente
som element, kart-lerret

314
00:16:35,000 --> 00:16:36,980
at vi så entydig identifisert.

315
00:16:36,980 --> 00:16:40,640
Og så denne linjen her er
hva synes å magisk gi oss

316
00:16:40,640 --> 00:16:43,560
et Google-kart på innsiden av
vår egen søknad,

317
00:16:43,560 --> 00:16:47,020
lagre en henvisning til denne
i den variabelen som kalles kartet.

318
00:16:47,020 --> 00:16:50,550
>> Til slutt ned her vi registrere
det som kalles en lytter.

319
00:16:50,550 --> 00:16:54,690
Tenk back-- vei, vei
back-- til uke null i CS50

320
00:16:54,690 --> 00:16:57,430
når vi så på Scratch og
sin støtte gjennom en spasertur

321
00:16:57,430 --> 00:16:59,935
gjennom for ting som kalles
hendelser og sendinger.

322
00:16:59,935 --> 00:17:01,810
Du kanskje ikke har brukt
det selv, men det er

323
00:17:01,810 --> 00:17:03,900
en mekanisme hvorved en
leseren i dette tilfellet

324
00:17:03,900 --> 00:17:07,940
kan få vår oppmerksomhet når det er
klar til å faktisk utføre noen kode.

325
00:17:07,940 --> 00:17:12,170
I dette tilfellet kommer det til å lytte
til kartet for en hendelse som heter inaktiv.

326
00:17:12,170 --> 00:17:14,930
Dette betyr at leseren har
ferdig med å laste Google-kartet.

327
00:17:14,930 --> 00:17:18,380
På dette punktet en funksjon kalt
configure bør til slutt

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

329
00:17:19,339 --> 00:17:22,510
Som funksjon, konfigurere
vi får se, er skrevet av oss.

330
00:17:22,510 --> 00:17:24,550
>> Nå ned her er en funksjon
at, dessverre,

331
00:17:24,550 --> 00:17:25,871
er bare en TODO legg til markør.

332
00:17:25,871 --> 00:17:28,620
Per spec. du kommer til å trenge
å skrive koden som faktisk

333
00:17:28,620 --> 00:17:32,840
legger en marker-- om det ser ut
som en avis, eller en tommel tack,

334
00:17:32,840 --> 00:17:35,360
eller noe else-- til Google-kartet.

335
00:17:35,360 --> 00:17:37,720
Her nå, er at funksjonen
kalt konfigurere.

336
00:17:37,720 --> 00:17:40,390
Jeg overlater det til deg å lese
gjennom dette i mer detalj,

337
00:17:40,390 --> 00:17:42,600
men innser at vi legger
en haug flere Lyttere

338
00:17:42,600 --> 00:17:46,620
slik at vi kan kjøre kode når
brukeren klikker på og drar kartet.

339
00:17:46,620 --> 00:17:50,730
Vi har også kode her at
initialiserer at typeahead plugin

340
00:17:50,730 --> 00:17:53,120
slik at dropdown
menyen fungerer faktisk.

341
00:17:53,120 --> 00:17:55,690
>> Men la oss fokusere på bare en
par steder her.

342
00:17:55,690 --> 00:17:57,590
Spesielt dette å gjøre her.

343
00:17:57,590 --> 00:18:00,410
Jeg skal utsette til den elektroniske
dokumentasjon og spesifikasjon

344
00:18:00,410 --> 00:18:02,530
for hvordan du fyller ut denne TODO.

345
00:18:02,530 --> 00:18:05,890
Men i et nøtteskall, dette biblioteket
typeahead lar deg passere

346
00:18:05,890 --> 00:18:09,790
i det som er allment kjent som en mal,
som har noen variable plassholdere

347
00:18:09,790 --> 00:18:13,690
svært lik i ånden til printf sin%. * s.

348
00:18:13,690 --> 00:18:16,030
Men i dette tilfellet
mal per spec

349
00:18:16,030 --> 00:18:18,760
lar deg spesifisere
hva variablene du ønsker

350
00:18:18,760 --> 00:18:24,880
å injisere fra data som er kommet
tilbake fra noe som PHP

351
00:18:24,880 --> 00:18:29,810
filer som du har skrevet
som avgir JSON utgang.

352
00:18:29,810 --> 00:18:35,170
>> Nå ned her innse at vi er
lytter for typeahead valg

353
00:18:35,170 --> 00:18:38,050
når brukeren faktisk gjennomfører
en søke og velger en verdi.

354
00:18:38,050 --> 00:18:40,270
Dette er hvordan vi er faktisk
kommer til å lytte til det

355
00:18:40,270 --> 00:18:42,250
og utføre noen kode som resultat.

356
00:18:42,250 --> 00:18:45,300
Deretter fortsetter vi å konfigurere
mashup bare en liten bit.

357
00:18:45,300 --> 00:18:48,000
Og, til slutt, kaller vi
denne funksjonen oppdatering.

358
00:18:48,000 --> 00:18:49,640
Den oppdaterer markører på skjermen.

359
00:18:49,640 --> 00:18:51,529
Mer om det i løpet av et øyeblikk.

360
00:18:51,529 --> 00:18:53,570
I mellomtiden, det er noen
små funksjoner i her.

361
00:18:53,570 --> 00:18:56,820
En av dem er hideInfo som
bare lukker InfoWindow.

362
00:18:56,820 --> 00:19:00,020
En annen funksjon her, som til slutt
vil ikke være for lang, fjerner markører.

363
00:19:00,020 --> 00:19:03,580
Det kommer til å angre uansett
add markør funksjonen gjør.

364
00:19:03,580 --> 00:19:04,960
Og deretter ned her er søk.

365
00:19:04,960 --> 00:19:08,610
Og dette er interessant fordi vi
har skrevet Javascript-kode som er

366
00:19:08,610 --> 00:19:13,490
kommer til å snakke med search.php på
server og få tilbake noen respons.

367
00:19:13,490 --> 00:19:16,110
>> Deg, selvfølgelig, vil fortsatt
må implementere search.php,

368
00:19:16,110 --> 00:19:18,310
men vi har implementert
Javascript-kode som er

369
00:19:18,310 --> 00:19:22,480
kommer til å håndtere faktisk utfører
søker fra at tekstboksen.

370
00:19:22,480 --> 00:19:25,340
Spesielt varsel
at denne funksjonen her,

371
00:19:25,340 --> 00:19:29,160
søk, ikke ringe search.php
ved en metode som kalles

372
00:19:29,160 --> 00:19:31,072
få JSON, som vi så i forelesning.

373
00:19:31,072 --> 00:19:32,780
Og syntaksen her
er litt annerledes

374
00:19:32,780 --> 00:19:37,110
fra forelesning i at vi bruker
jQuery såkalt løfte grensesnitt.

375
00:19:37,110 --> 00:19:38,479
Mer om det i spec.

376
00:19:38,479 --> 00:19:40,520
Dette betyr ganske enkelt for vår
formål nå at der

377
00:19:40,520 --> 00:19:43,870
er to spesialfunksjoner vi
trenger å ringe med dot notasjon

378
00:19:43,870 --> 00:19:46,230
her umiddelbart etter ringer få JSON.

379
00:19:46,230 --> 00:19:47,510
Heter gjort.

380
00:19:47,510 --> 00:19:49,870
Heter mislykkes.

381
00:19:49,870 --> 00:19:51,790
Du kan tenke på disse
som suksessen handler

382
00:19:51,790 --> 00:19:54,960
og svikt handler bare
i tilfelle noe går galt.

383
00:19:54,960 --> 00:19:57,760
>> Nå la oss se på den siste
par funksjoner i denne filen.

384
00:19:57,760 --> 00:20:00,180
Ned her er en funksjon
kalt showInfo, som

385
00:20:00,180 --> 00:20:03,090
viser info i en av dem
lite info vinduer som

386
00:20:03,090 --> 00:20:05,380
dukker opp når brukeren klikker på en markør.

387
00:20:05,380 --> 00:20:08,470
Ned her lenger er
at oppdateringsfunksjonen

388
00:20:08,470 --> 00:20:10,510
at vi har implementert for deg.

389
00:20:10,510 --> 00:20:15,250
Det bestemmer grensene av kartet.

390
00:20:15,250 --> 00:20:19,360
Hva er GPS-koordinatene til sin
nordøst og sørvest hjørner her.

391
00:20:19,360 --> 00:20:22,780
Vi har utarbeidet noen HDP parametere
her og deretter passerte dem til slutt

392
00:20:22,780 --> 00:20:26,160
å update.php, som vi har
også implementert for deg.

393
00:20:26,160 --> 00:20:31,390
Som til slutt får tilbake noen JSON
fra filen heter update.php

394
00:20:31,390 --> 00:20:34,050
og deretter fjerner eventuelle
markører på skjermen

395
00:20:34,050 --> 00:20:36,650
og deretter gjentas i løpet av
dataene som er kommet tilbake

396
00:20:36,650 --> 00:20:40,350
fra update.php, som
igjen er bare en JSON array.

397
00:20:40,350 --> 00:20:45,130
Og så er det til syvende og sist legger en markør for
hver av disse stedene, håndtering svikt

398
00:20:45,130 --> 00:20:47,750
eller feil som kan meget vel skje.

399
00:20:47,750 --> 00:20:51,550
>> Nå bare for å gi deg en smak av hvordan du
kan gå om debugging dette prosjektet,

400
00:20:51,550 --> 00:20:55,420
innser at jeg har åpnet i
fremme denne kategorien her på denne nettadressen,

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

402
00:21:01,320 --> 00:21:04,050
Nå, igjen, artikler om
PHP vi implementert for deg

403
00:21:04,050 --> 00:21:06,320
så dette er ikke så mye
hva du skal bruke

404
00:21:06,320 --> 00:21:08,190
å feilsøke, men heller teknikken.

405
00:21:08,190 --> 00:21:10,590
Legg merke til at jeg har søkt etter
Cambridges postnummer her,

406
00:21:10,590 --> 00:21:15,260
og jeg har fått tilbake, ja, en JSON
utvalg av JSON objekter innsiden av som

407
00:21:15,260 --> 00:21:17,640
er to keys-- link og tittel.

408
00:21:17,640 --> 00:21:19,860
>> Så denne funksjonaliteten
arbeider allerede for deg.

409
00:21:19,860 --> 00:21:24,330
Men denne teknikken for manuelt å gå
til en URL som dette for noe sånt

410
00:21:24,330 --> 00:21:31,710
search.php? geo = cambridge eller 02138 eller
hva brukeren har tastet inn bør

411
00:21:31,710 --> 00:21:35,770
være uvurderlig som du, selv, prøve
å finne ut nøyaktig om hvorfor

412
00:21:35,770 --> 00:21:38,510
search.php fungerer eller ikke.

413
00:21:38,510 --> 00:21:41,720
>> Til syvende og sist så har du
noen todos foran deg.

414
00:21:41,720 --> 00:21:44,250
Du kommer til første redskaper
at import skript som

415
00:21:44,250 --> 00:21:46,520
leser i us.text inn i databasen.

416
00:21:46,520 --> 00:21:48,760
Du da kommer til å trenge
å implementere search.php

417
00:21:48,760 --> 00:21:51,320
slik at den oppfører seg nøyaktig som angitt.

418
00:21:51,320 --> 00:21:54,170
Du da kommer til å ønske
å fokusere på scripts.js

419
00:21:54,170 --> 00:21:57,520
og til slutt implementerer
de par Todos,

420
00:21:57,520 --> 00:21:59,950
herunder for configure
og at malen,

421
00:21:59,950 --> 00:22:03,220
legge til markører, fjerne markører, og
deretter vare, men ikke minst, en

422
00:22:03,220 --> 00:22:04,330
personlig preg.

423
00:22:04,330 --> 00:22:07,477
>> Når du har din mashup arbeids
helt som vårt, målet på hånden

424
00:22:07,477 --> 00:22:09,560
er for deg å legge til en personlig
røre til din mashup,

425
00:22:09,560 --> 00:22:11,290
enten det er estetisk eller funksjonell.

426
00:22:11,290 --> 00:22:13,950
Ta mashup aldri så
svakt til det neste nivå.

427
00:22:13,950 --> 00:22:18,330
Så lenge du presser deg selv utover
ditt kjennskap til spec selv

428
00:22:18,330 --> 00:22:20,840
og plukke opp en teknikk
nytt, selv om det bare er

429
00:22:20,840 --> 00:22:25,610
noe estetiske som å endre
layout av kartet som du bruker,

430
00:22:25,610 --> 00:22:28,070
omfanget som vi forventer
vil bli fornøyd.

431
00:22:28,070 --> 00:22:30,260
Som da er Problem Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Stay tuned for mer i
spesifikasjon og lykke

433
00:22:33,070 --> 00:22:36,400
takle dette, din siste
CS50 oppgavesettet noensinne.

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

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