1
00:00:00,000 --> 00:00:03,388
>> [REPRODUCCIÓ DE MÚSICA]

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

3
00:00:09,196 --> 00:00:10,180
>> DAVID J. Malan: Hola.

4
00:00:10,180 --> 00:00:12,600
Anem a fer una passejada a través de
Problemes de 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
que et va a desafiar
basarien en elements de Google Maps

6
00:00:15,880 --> 00:00:20,905
amb elements de Google Notícies i puré
junts en un applet de web que

7
00:00:20,905 --> 00:00:24,150
permet a l'usuari buscar
un mapa per a les notícies locals

8
00:00:24,150 --> 00:00:26,780
a ciutats específiques,
ciutats i codis postals.

9
00:00:26,780 --> 00:00:31,040
Per a això, anem a
integrar una mica d'HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript, i una tècnica de
generalment conegut com AJAX per tal

11
00:00:34,390 --> 00:00:36,850
per crear aquesta immersió
experiència de l'usuari.

12
00:00:36,850 --> 00:00:38,920
>> Del primer per a si mateix Google Maps Let.

13
00:00:38,920 --> 00:00:41,220
Això, per descomptat, és potser
una interfície familiar.

14
00:00:41,220 --> 00:00:45,070
Però resulta que Google Maps
també proporciona una aplicació API--

15
00:00:45,070 --> 00:00:48,360
interface-- programació a través del qual
vostè pot prendre elements de Google Maps

16
00:00:48,360 --> 00:00:50,740
i integrar-les en
les seves pròpies aplicacions.

17
00:00:50,740 --> 00:00:52,650
De fet, durant tot aquest
procés, vas

18
00:00:52,650 --> 00:00:55,140
trobar un parell d'adreces URL
particularment útil que

19
00:00:55,140 --> 00:00:57,820
s'esmenten en el
especificació per Problemes de 8,

20
00:00:57,820 --> 00:01:00,980
específicament aquest Getting Started
Guia o la Guia del desenvolupador

21
00:01:00,980 --> 00:01:07,640
per a Google Maps API versió 3, així
com l'API de JavaScript de Google Maps

22
00:01:07,640 --> 00:01:10,260
referència v3, que és una
poc més arcà de llegir

23
00:01:10,260 --> 00:01:14,600
però en realitat té tot el nivell inferior
detalls sobre quines funcions o mètodes

24
00:01:14,600 --> 00:01:18,220
i objectes i propietats i
esdeveniments en realitat vénen amb l'API,

25
00:01:18,220 --> 00:01:20,720
molt similar en esperit
a [inaudible] pàgines.

26
00:01:20,720 --> 00:01:23,480
>> Ara bé, si fem un cop d'ull
a Google Notícies, podràs

27
00:01:23,480 --> 00:01:25,370
potser veure una interfície familiar aquí.

28
00:01:25,370 --> 00:01:29,350
Però resulta que també pot buscar
Google Notícies per geografies específiques

29
00:01:29,350 --> 00:01:32,000
a través d'un paràmetre HTTP anomenada geo.

30
00:01:32,000 --> 00:01:35,100
De fet, si puc ampliar
fins aquí, veuràs que

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

32
00:01:41,672 --> 00:01:43,630
I, de fet, si el zoom
fora, veuràs que sóc

33
00:01:43,630 --> 00:01:47,090
mirant a una pàgina amb un munt de
opinions sobre Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Mentrestant, si realment canviar el
URL no sigui un codi postal com aquesta,

35
00:01:50,620 --> 00:01:55,580
però una cosa una mica més desordenat
com Cambridge, Massachusetts +,

36
00:01:55,580 --> 00:02:00,740
on l'avantatge és la manera de codificar un
caràcter d'espai en una direcció URL i premeu Enter,

37
00:02:00,740 --> 00:02:02,907
veuràs que en realitat
veure gairebé les mateixes notícies.

38
00:02:02,907 --> 00:02:05,489
Potser és una mica diferent
perquè en realitat Cambridge

39
00:02:05,489 --> 00:02:06,910
té diversos codis postals.

40
00:02:06,910 --> 00:02:09,410
Ara, com anava jo a saber que i,
de fet, com podria jo d'alguna manera

41
00:02:09,410 --> 00:02:12,940
lligar ciutats i pobles
als codis postals en cas que

42
00:02:12,940 --> 00:02:15,064
desitgi permetre a l'usuari
per buscar qualsevol?

43
00:02:15,064 --> 00:02:17,480
Bé, resulta que hi ha
un lloc web per aquí diu

44
00:02:17,480 --> 00:02:20,060
geonames.org que és
una iniciativa per tenir

45
00:02:20,060 --> 00:02:23,760
una base de dades de lliure accés de tots
tipus d'informació geogràfica,

46
00:02:23,760 --> 00:02:27,040
no només per als EUA, sinó també
per a altres països també.

47
00:02:27,040 --> 00:02:30,430
De fet, si vaig a aquest URL aquí, que
També s'esmenta en el conjunt de problemes

48
00:02:30,430 --> 00:02:34,510
especificació, vostè veurà que 3
llista d'un munt d'arxius zip

49
00:02:34,510 --> 00:02:36,400
qualsevol dels quals es pot descarregar per vostè.

50
00:02:36,400 --> 00:02:39,900
De fet, per a aquest conjunt de problemes
vas a descarregar us.zip.

51
00:02:39,900 --> 00:02:43,790
Ara dins d'aquest arxiu, és un tot
munt de dades en format de text.

52
00:02:43,790 --> 00:02:47,760
Els arxius és molt similar a una
CSV-- Valors separats per comes file--

53
00:02:47,760 --> 00:02:51,294
però utilitza realment
pestanyes per delimitar camps.

54
00:02:51,294 --> 00:02:53,710
Ara, per la seva banda, si ens fixem
aquí, en el que jo he destacat,

55
00:02:53,710 --> 00:02:56,459
els camps d'aquest arxiu es van
a ser coses com els codis de país,

56
00:02:56,459 --> 00:02:58,980
codis postals, noms de llocs,
i després, en alguna forma

57
00:02:58,980 --> 00:03:04,230
o altres, els estats i comtats,
comunitats, i més.

58
00:03:04,230 --> 00:03:06,630
De fet, ja he
descarregat aquest arxiu per avançat.

59
00:03:06,630 --> 00:03:09,750
Déjame anar per davant i l'obro aquí--
us.text-- i, de fet, se li

60
00:03:09,750 --> 00:03:16,660
veure si em desplaço fins a la línia 16792
veuràs alguns registres de Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts i els seus diferents codis postals.

62
00:03:19,120 --> 00:03:22,150
El que també es veu allà és el comtat,
alguns números que jo realment no

63
00:03:22,150 --> 00:03:24,500
entendre, sinó també tots
el camí de la dreta,

64
00:03:24,500 --> 00:03:27,170
alguns GPS coordinates--
latitud i longitud.

65
00:03:27,170 --> 00:03:30,440
Això és molt bo perquè un
les característiques de l'API de Google Maps

66
00:03:30,440 --> 00:03:33,670
és la capacitat de detectar
on es troba geogràficament

67
00:03:33,670 --> 00:03:36,850
en termes de coordenades GPS.

68
00:03:36,850 --> 00:03:40,210
>> Ara anem a començar a trobar la manera de
començar a lligar aquestes coses juntes.

69
00:03:40,210 --> 00:03:42,900
Els hem donat un tot
manat de codi de distribució,

70
00:03:42,900 --> 00:03:44,970
així com la base de dades MySQL.

71
00:03:44,970 --> 00:03:49,100
De fet, si em tiri una phpMyAdmin tenir
prèviament importats, com aviat ho sabrà,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, veuràs una taula de MySQL que
són aquestes, un camp d'ID, país

73
00:03:54,800 --> 00:03:57,400
codi, codi postal, nom del lloc i més.

74
00:03:57,400 --> 00:04:00,490
Els tipus de tots aquells
columnes que deriven simplement

75
00:04:00,490 --> 00:04:03,870
mitjançant la lectura de la readme.txt
presentar aquí que especifica

76
00:04:03,870 --> 00:04:07,330
si un camp és un nombre sencer,
o varchar o similars.

77
00:04:07,330 --> 00:04:10,510
>> Per això hem creat aquesta taula per
i et donen les ordres SQL

78
00:04:10,510 --> 00:04:12,770
executar per crear aquest
taula en la seva pròpia base de dades,

79
00:04:12,770 --> 00:04:15,290
però hi ha en realitat no hi ha dades en això encara.

80
00:04:15,290 --> 00:04:19,600
Per contra, hauràs de
descarregar us.zip o postal de qualsevol país

81
00:04:19,600 --> 00:04:21,500
presentar d'aquesta URL allà.

82
00:04:21,500 --> 00:04:24,940
I llavors hauràs de escriure
un script de línia d'ordres en PHP que és

83
00:04:24,940 --> 00:04:28,420
va a obrir aquest text
presentar, iterar sobre les seves línies,

84
00:04:28,420 --> 00:04:31,180
i després per a cada un
aquestes línies fan un insert

85
00:04:31,180 --> 00:04:34,940
en què els llocs taula
a la base de dades MySQL.

86
00:04:34,940 --> 00:04:37,880
Així que al final d'aquest procés, se li
han corregut aquesta seqüència de comandaments en última instància,

87
00:04:37,880 --> 00:04:39,610
només una vegada en la teoria.

88
00:04:39,610 --> 00:04:41,780
En realitat probablement et
executar un munt de vegades

89
00:04:41,780 --> 00:04:45,460
en tractar d'arreglar diversos bugs.

90
00:04:45,460 --> 00:04:48,440
>> Al final, vostè tindrà un
realment gran base de dades amb milers

91
00:04:48,440 --> 00:04:50,139
i milers de files geogràfiques.

92
00:04:50,139 --> 00:04:52,930
Després et vas a posar aquesta importació
guió de banda una vegada que està funcionant

93
00:04:52,930 --> 00:04:55,140
i la seva base de dades és agradable
i correcta, i després

94
00:04:55,140 --> 00:04:58,880
passaràs a realitat
l'aplicació de la mateixa mashup.

95
00:04:58,880 --> 00:05:01,670
El mashup es va a veure
una mica d'alguna cosa com això.

96
00:05:01,670 --> 00:05:05,165
En mashup.cs50.net, ens
tenir una solució personal

97
00:05:05,165 --> 00:05:06,990
que es veu una mica d'alguna cosa com això.

98
00:05:06,990 --> 00:05:11,070
De fet, si faig clic en aquest diari
icona de Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
veuràs un filat
icona breument i després

100
00:05:13,300 --> 00:05:16,370
una llista ordenada, un
llista amb vinyetes d'articles

101
00:05:16,370 --> 00:05:18,280
relacionada amb Cambridge, Massachusetts.

102
00:05:18,280 --> 00:05:20,352
Si faig clic a Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Vaig a veure el mateix per a aquella ciutat.

104
00:05:21,685 --> 00:05:24,174
I si faig clic a
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
potser no hi hagi cap
notícies de de Watertown,

106
00:05:26,090 --> 00:05:28,630
pel que veurà alguna cosa
com el dia de poques notícies.

107
00:05:28,630 --> 00:05:32,140
>> Ara, per la seva banda, a la part superior esquerra són
alguns familiars controls de Google Maps

108
00:05:32,140 --> 00:05:34,980
deixar que s'allunya, cassola
amunt, avall, esquerra i dreta,

109
00:05:34,980 --> 00:05:37,360
sinó també un quadre de recerca que posem allà.

110
00:05:37,360 --> 00:05:40,910
Així que si jo busco, francament,
l'únic altre codi postal sé,

111
00:05:40,910 --> 00:05:45,020
90210, anem a veure realment
Beverly Hills, Califòrnia.

112
00:05:45,020 --> 00:05:48,550
En fer clic en ella em porta a
Califòrnia i un manat sencer

113
00:05:48,550 --> 00:05:50,369
de notícies sobre Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Ara noti, també, el que va passar allà.

115
00:05:51,910 --> 00:05:57,040
Si aquesta recerca de temps per 02.138 o fins i tot
Cambridge Massachusetts coma o algun

116
00:05:57,040 --> 00:06:00,300
variant de la mateixa, s'obté una
poc desplegable autocompletar.

117
00:06:00,300 --> 00:06:03,840
Ara això des d'un plugin
per a una biblioteca anomenada jQuery,

118
00:06:03,840 --> 00:06:05,732
i aquest plugin es diu typeahead.

119
00:06:05,732 --> 00:06:07,440
Simplement llegeix a través de
la documentació,

120
00:06:07,440 --> 00:06:13,150
descarregat arxius integrat els .js
en el codi de distribució de manera que vostè

121
00:06:13,150 --> 00:06:16,900
en última instància, poden escriure el codi que
omple aquest menú desplegable amb l'acte

122
00:06:16,900 --> 00:06:19,350
seleccions o els suggeriments d'automòbils.

123
00:06:19,350 --> 00:06:23,820
>> Ara el codi de distribució, però, que
vostè va rebre no fa gairebé tant.

124
00:06:23,820 --> 00:06:26,860
Vostè aconsegueix el Google Map incrustat, i
a obtenir els controls de la part superior esquerra,

125
00:06:26,860 --> 00:06:28,240
i s'obté el quadre de cerca.

126
00:06:28,240 --> 00:06:32,760
Però si escric alguna cosa com
02138, no hi ha llocs es troben encara.

127
00:06:32,760 --> 00:06:34,730
Així que serà
un dels nostres objectius aquí.

128
00:06:34,730 --> 00:06:37,430
A més, si vostè pren un pas
enrere i mirar el mapa en si,

129
00:06:37,430 --> 00:06:38,950
no hi ha cap notícia.

130
00:06:38,950 --> 00:06:41,780
Fins i tot si faig clic i
arrossegament, no hi ha marcadors realitat

131
00:06:41,780 --> 00:06:45,560
apareixerà per les notícies perquè això
desafiament es deixa per a vostè també.

132
00:06:45,560 --> 00:06:48,490
>> Fem una ullada a continuació,
en el codi de distribució.

133
00:06:48,490 --> 00:06:51,460
Un cop hagi descarregat
pset8.zip i va obrir la cremallera

134
00:06:51,460 --> 00:06:54,430
en el directori d'amfitrió virtual
al CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
veuràs aquests
directoris aquí dins.

136
00:06:56,550 --> 00:07:00,200
Bin-- que generalment significa
binari per programs-- executable

137
00:07:00,200 --> 00:07:04,870
inclou, com en pset7, una mica de PHP
arxius que altres arxius inclouen,

138
00:07:04,870 --> 00:07:06,710
llavors públic, que és
els arxius que necessiten

139
00:07:06,710 --> 00:07:09,369
per ser accessible públicament
a un usuari amb un navegador.

140
00:07:09,369 --> 00:07:11,410
Anem a fer una ullada al
bin, i anem a

141
00:07:11,410 --> 00:07:13,890
veure que hi ha un fitxer
ja deien Importar.

142
00:07:13,890 --> 00:07:17,591
Si obrim aquesta amb gedit, ja veurem
que, per desgràcia, no hi ha molt

143
00:07:17,591 --> 00:07:18,090
ja està.

144
00:07:18,090 --> 00:07:20,250
Tot el que hi és, però,
és un tinglado a la part superior

145
00:07:20,250 --> 00:07:23,410
que especifica que
interpreter-- en aquest cas PHP--

146
00:07:23,410 --> 00:07:25,759
ha de ser utilitzat per realment
executar aquest fitxer.

147
00:07:25,759 --> 00:07:27,550
Però llavors on diu
TOT és on ets

148
00:07:27,550 --> 00:07:31,130
va a haver d'escriure codi
que probablement requereix l'config

149
00:07:31,130 --> 00:07:35,820
arxiu que està en el directori includes
com ho hem fet abans amb arxius PHP.

150
00:07:35,820 --> 00:07:38,180
I després vas a
ha d'obrir alguna manera

151
00:07:38,180 --> 00:07:41,920
us.text que presumiblement
ja han descomprimit.

152
00:07:41,920 --> 00:07:44,690
Llavors hauràs de
iterar sobre les línies a l'arxiu,

153
00:07:44,690 --> 00:07:47,800
potser utilitzant algunes de les funcions
suggerit en l'especificació.

154
00:07:47,800 --> 00:07:51,390
A continuació, inseriu cadascun dels
línies a la base de dades MySQL

155
00:07:51,390 --> 00:07:54,940
mitjançant l'ús de la funció de consulta, que
hem de nou li proporcionem con--

156
00:07:54,940 --> 00:07:58,010
o almenys una variant
del mateix en functions.php,

157
00:07:58,010 --> 00:07:59,560
que veurem en un moment.

158
00:07:59,560 --> 00:08:04,430
>> Ara anem a tancar la importació i tornar a
el nostre directori i aquesta vegada entrar a

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

160
00:08:05,300 --> 00:08:09,210
I si ho faig ls allà, veuràs
tres arxius bastant com de problemes 7.

161
00:08:09,210 --> 00:08:13,760
I anem a fer una ullada ràpida,
Per exemple, en config.php.

162
00:08:13,760 --> 00:08:16,730
Allà, és menys línies
que abans, i es

163
00:08:16,730 --> 00:08:20,712
Sembla que aquest arxiu inclou
constants.php i functions.php.

164
00:08:20,712 --> 00:08:23,670
Estem usant una mica diferent
tècnica en aquesta ocasió per realment

165
00:08:23,670 --> 00:08:30,910
especifiquen que aquests arxius són relatius
al directori actual __ DIR__

166
00:08:30,910 --> 00:08:35,280
representa el directori que aquest
arxiu, config.php, és en si mateix en.

167
00:08:35,280 --> 00:08:37,600
Així que aquesta és una més
manera explícita de l'especificació

168
00:08:37,600 --> 00:08:40,100
Quins altres fitxers que voleu exigir.

169
00:08:40,100 --> 00:08:44,020
>> Ara si tanco aquest fitxer i
obrir constants.php lloc,

170
00:08:44,020 --> 00:08:47,430
veuràs un arxiu molt reminiscent
per de així, encara que de problemes 7

171
00:08:47,430 --> 00:08:50,050
amb una base de dades diferent anomenat pset8.

172
00:08:50,050 --> 00:08:54,020
Finalment, en functions.php,
anem a veure només una funció

173
00:08:54,020 --> 00:08:55,942
aquesta vegada trucada de consulta.

174
00:08:55,942 --> 00:08:59,150
Això és gairebé el mateix, llevat que fem servir
errors en aquesta ocasió una mica

175
00:08:59,150 --> 00:09:02,860
de manera diferent, però és d'ús és
el mateix que en el problema conjunt de set.

176
00:09:02,860 --> 00:09:08,090
>> Ara anem a tornar al nostre pset8
directori, entra en públic, i allà

177
00:09:08,090 --> 00:09:14,420
si ho faig ls, veurà esto--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
i update.php-- tots els arxius.

179
00:09:16,940 --> 00:09:22,010
I llavors la fonts css, img, i
directori js agrada bastant pset7.

180
00:09:22,010 --> 00:09:24,660
>> Fem una ullada a
index.html, que és

181
00:09:24,660 --> 00:09:27,290
serà realment el
punt d'entrada a la Smashup.

182
00:09:27,290 --> 00:09:31,820
Ara a index.html, veuràs un tot
munt d'elements d'enllaç al cap,

183
00:09:31,820 --> 00:09:36,540
específicament, per arrencada per al nostre propi
CSS seguit per un munt d'escriptura

184
00:09:36,540 --> 00:09:41,520
etiquetes per a coses com els mapes, API
en si, un marcador especial amb etiqueta

185
00:09:41,520 --> 00:09:44,950
utilitat que hem esmentat en el
especificació està disponible per a vostè,

186
00:09:44,950 --> 00:09:48,420
si jQuery, bootstrap
si mateix, i una altra biblioteca

187
00:09:48,420 --> 00:09:50,990
anomenat subratllat que
parlem en l'especificació.

188
00:09:50,990 --> 00:09:57,031
Underscore.js com jquery.js
és una biblioteca JavaScript

189
00:09:57,031 --> 00:10:00,280
que té un munt de funcionalitat
que un munt de gent al món desitgen

190
00:10:00,280 --> 00:10:02,020
existit en si mateixa JavaScript.

191
00:10:02,020 --> 00:10:04,560
Així que tots aquests són
en realitat bastant popular.

192
00:10:04,560 --> 00:10:07,140
També hem esmentat typeahead
que és la biblioteca que

193
00:10:07,140 --> 00:10:11,180
fa que desplegable autocompletar i
finalment, un enllaç al nostre propi JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Mentrestant, i potser
per sort, aquest mashup

195
00:10:13,880 --> 00:10:17,550
és impulsat per relativament poc
HTML aquí baix a la part inferior.

196
00:10:17,550 --> 00:10:22,330
Tingueu en compte que hem especificat un div a
el nostre cos de fluid classe contenidor.

197
00:10:22,330 --> 00:10:24,610
Això, de per arrencada
documentació, només

198
00:10:24,610 --> 00:10:29,840
significa que aquest div va a omplir el
viewport o finestra completament del navegador.

199
00:10:29,840 --> 00:10:33,020
>> Mentrestant, per sota que tenim un div
això es van obrir i van tancar immediatament

200
00:10:33,020 --> 00:10:34,790
amb l'ID exclusiu del mapa llenç.

201
00:10:34,790 --> 00:10:37,400
Això ara és de Google
Documentació Mapes

202
00:10:37,400 --> 00:10:42,490
per la seva API, pel qual jo simplement necessito
tenir un div buit en el qual injectar,

203
00:10:42,490 --> 00:10:44,470
en última instància, un ral de Google Maps.

204
00:10:44,470 --> 00:10:46,310
Però més d'això en només una mica.

205
00:10:46,310 --> 00:10:48,850
>> Finalment, hi ha una forma
dins de la qual aquí

206
00:10:48,850 --> 00:10:52,930
implementa el quadre de text fins a la part superior esquerra
en la nostra interfície de cerca.

207
00:10:52,930 --> 00:10:54,730
Tingueu en compte que hem utilitzat
una mica d'arrencada

208
00:10:54,730 --> 00:10:57,670
aquí també- coses com
forma-inline, cenyida al grup.

209
00:10:57,670 --> 00:11:00,080
Hem donat a l'antiga
ID única de la forma.

210
00:11:00,080 --> 00:11:04,510
I després, en última instància, en realitat tinc
un tipus d'entrada, que és bastant familiar,

211
00:11:04,510 --> 00:11:06,440
el ID és q.

212
00:11:06,440 --> 00:11:07,230
Només una convenció.

213
00:11:07,230 --> 00:11:09,234
Q per query-- podria tenir
ha cridat res.

214
00:11:09,234 --> 00:11:11,400
I llavors el marcador de posició,
per la seva banda, és la ciutat, estat,

215
00:11:11,400 --> 00:11:16,200
i el codi postal que es pot recordar
veient en la nostra mashup de demostració abans.

216
00:11:16,200 --> 00:11:17,980
Anem a tancar aquest fitxer.

217
00:11:17,980 --> 00:11:24,460
>> Ara fes un cop d'ull als arxius PHP que
esperar i després els arxius JavaScript.

218
00:11:24,460 --> 00:11:27,700
En els nostres arxius PHP, tenim
ja implementat per a vostè,

219
00:11:27,700 --> 00:11:29,960
per exemple, les actualitzacions.

220
00:11:29,960 --> 00:11:35,060
Update.php-- no anem a gastar una enorme
quantitat de temps en aquí-- en poques paraules

221
00:11:35,060 --> 00:11:38,400
és l'arxiu que la nostra
Codi JavaScript se'n va

222
00:11:38,400 --> 00:11:41,610
posar-se en contacte a través d'AJAX que
tècnica asíncrona que és

223
00:11:41,610 --> 00:11:45,980
incorporat en JavaScript aquests dies que és
permetrem que ens preguntem update.php

224
00:11:45,980 --> 00:11:47,410
per més informació.

225
00:11:47,410 --> 00:11:50,045
>> En concret, en qualsevol moment
l'usuari arrossega el mapa

226
00:11:50,045 --> 00:11:53,310
o realitza una recerca que salta
l'usuari a una altra ubicació,

227
00:11:53,310 --> 00:11:55,250
nostre codi JavaScript
com aviat veurem, és

228
00:11:55,250 --> 00:11:59,610
va a cridar update.php
i demanar 10 o més marcadors

229
00:11:59,610 --> 00:12:02,630
dins de la finestra gràfica basada
en les coordenades GPS

230
00:12:02,630 --> 00:12:06,510
de la part superior i inferior
cantonades d'aquest mapa.

231
00:12:06,510 --> 00:12:10,520
Llavors podem repoblar el mapa ara que
l'usuari ha mogut la pantalla per tal

232
00:12:10,520 --> 00:12:14,210
veure 10 probablement nova
marcadors de diferents ciutats.

233
00:12:14,210 --> 00:12:18,340
Mentrestant, aquest fitxer és en última instància,
va a executar una consulta SQL

234
00:12:18,340 --> 00:12:21,680
en contra de la nostra base de dades
taula anomenada llocs que

235
00:12:21,680 --> 00:12:26,380
va a tornar els
10 o menys llocs.

236
00:12:26,380 --> 00:12:32,620
>> Mentrestant, en articles.php, és una altra
arxivem que hem escrit íntegrament.

237
00:12:32,620 --> 00:12:35,820
És molt similar en esperit a
Funció CERCAR de Problemes de 7,

238
00:12:35,820 --> 00:12:39,450
que contactar Yahoo Finances per a vostè.

239
00:12:39,450 --> 00:12:43,710
Aquest fitxer contactes de Google Notícies
per a vostè, en última instància, l'acaparament

240
00:12:43,710 --> 00:12:46,050
una màquina de lectura
versió-- en alguna cosa

241
00:12:46,050 --> 00:12:49,720
anomenada RSS format-- de les notícies
per Cambridge o Beverly Hills

242
00:12:49,720 --> 00:12:52,880
o el que sigui la ciutat que has buscat
per sobre la base que geoparámetros.

243
00:12:52,880 --> 00:12:57,250
Que s'analitzen els que RSS, que és només una
tipus de llenguatge anomenat XML,

244
00:12:57,250 --> 00:13:00,740
i després en realitat
retornar al seu navegador

245
00:13:00,740 --> 00:13:03,570
i al codi JavaScript,
En concret, en un format anomenat

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

247
00:13:06,097 --> 00:13:08,180
Ara veuràs a la
specification-- assenyalem que

248
00:13:08,180 --> 00:13:10,720
la forma en què vostè pot veure realment
alguns dels posterior-- vinguda JSON

249
00:13:10,720 --> 00:13:15,210
que aquesta funcionalitat en última instància
li permet omplir els menús emergents de manera

250
00:13:15,210 --> 00:13:16,960
que en fer clic
en un marcador al mapa

251
00:13:16,960 --> 00:13:19,430
que vegi en realitat un munt
de bales, cadascun dels quals

252
00:13:19,430 --> 00:13:21,020
enllaços a un article.

253
00:13:21,020 --> 00:13:25,000
>> Ara donem una ullada a una última
Arxiu PHP que, afortunadament, no ho fa

254
00:13:25,000 --> 00:13:27,970
molt tenir anar en--
només un bastant gran TOT.

255
00:13:27,970 --> 00:13:32,170
Ara mateix aquest fitxer declara
una matriu anomenat llocs.

256
00:13:32,170 --> 00:13:35,980
I en última instància impressions
aquesta matriu a JSON format--

257
00:13:35,980 --> 00:13:38,720
bastant-imprimir només perquè
les coses són més fàcils de depurar.

258
00:13:38,720 --> 00:13:41,480
Desafortunadament, en el
mig hi ha aquest TOT,

259
00:13:41,480 --> 00:13:46,890
que demana que vostè busqui la
base de dades de llocs que coincideixen amb un geo HTTP

260
00:13:46,890 --> 00:13:47,490
paràmetre.

261
00:13:47,490 --> 00:13:49,865
>> I, de fet, això va a
ser un del seu challenges--

262
00:13:49,865 --> 00:13:54,240
per implementar aquesta funcionalitat aquí
de manera que quan es comuniqui amb aquest arxiu amb

263
00:13:54,240 --> 00:14:00,610
un URL com la recerca. php? geo = alguna cosa,
el seu codi en última instància, tornar un JSON

264
00:14:00,610 --> 00:14:05,020
conjunt de tots els llocs en el seu
taula de base de dades que coincideixin amb aquesta entrada.

265
00:14:05,020 --> 00:14:08,960
Així que si l'usuari escriu a Cambridge,
seu arxiu aquí search.php

266
00:14:08,960 --> 00:14:12,680
en última instància, ha de retornar una matriu JSON
per a tots els partits de Cambridge,

267
00:14:12,680 --> 00:14:16,990
el que podria ser a Massachusetts
però podria ser fins i tot qualsevol altre lloc.

268
00:14:16,990 --> 00:14:21,040
>> Finalment, anem a fer una ullada a 2
arxius que són ultimately-- estàtica

269
00:14:21,040 --> 00:14:23,680
seu arxiu CSS i el seu arxiu JavaScript.

270
00:14:23,680 --> 00:14:26,779
Si entro al nostre directori CSS,
hi ha un munt d'arxius allà,

271
00:14:26,779 --> 00:14:28,070
però la majoria d'ells són les biblioteques.

272
00:14:28,070 --> 00:14:31,530
Vaig a fer una ullada,
específicament, en styles.css,

273
00:14:31,530 --> 00:14:35,440
que és el nostre propi CSS global que és
va a estilitzar tot aquest mashup.

274
00:14:35,440 --> 00:14:38,840
Ho deixo perquè llegeixi
els comentaris en aquest document, però, en poques paraules,

275
00:14:38,840 --> 00:14:43,490
aquest és el CSS que assegura que el nostre
mashup, per defecte fora de la caixa,

276
00:14:43,490 --> 00:14:46,950
es veu exactament com volem it--
amb el mapa d'omplir el port vista

277
00:14:46,950 --> 00:14:49,720
i amb la recerca
caixa a la part superior esquerra.

278
00:14:49,720 --> 00:14:52,870
També ens hem pres la llibertat de
estilitzant que desplegable typeahead

279
00:14:52,870 --> 00:14:55,170
menú una mica també.

280
00:14:55,170 --> 00:14:58,030
>> L'arxiu més important
potser per aquest conjunt de problemes

281
00:14:58,030 --> 00:15:01,070
és aquest últim, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Dins del directori JS
és encara més arxius.

283
00:15:03,800 --> 00:15:08,090
Tots ells són arxius de la biblioteca
a excepció d'aquest, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Si obrim això, anem a prendre el nostre
última gira a través de les funcions que

285
00:15:11,460 --> 00:15:13,820
estan incorporats en aquest arxiu
per a vostè i per cridar l'atenció

286
00:15:13,820 --> 00:15:16,200
als tots que s'acosten.

287
00:15:16,200 --> 00:15:19,110
>> A la part superior d'aquest arxiu,
són tres variables globals.

288
00:15:19,110 --> 00:15:22,910
Un per un mapa, que es va a
ser una referència en el nostre mapa de Google.

289
00:15:22,910 --> 00:15:25,510
Vostè pot pensar en ell
tipus de com un punter.

290
00:15:25,510 --> 00:15:27,710
Mentrestant, tenim
una altra variable global

291
00:15:27,710 --> 00:15:31,500
anomenat info, que sembla ser
emmagatzemar el valor de retorn d'una trucada

292
00:15:31,500 --> 00:15:34,170
a nova google.maps.InfoWindow.

293
00:15:34,170 --> 00:15:37,835
JavaScript suporta objectes que
són molt similars en esperit a Struts.

294
00:15:37,835 --> 00:15:40,250
I el que aquesta línia per
nostres propòsits està fent

295
00:15:40,250 --> 00:15:42,820
és la creació d'una nova informació
finestra a la memòria i després

296
00:15:42,820 --> 00:15:46,330
mantenir voltant d'una referència
al mateix en una variable anomenada Info.

297
00:15:46,330 --> 00:15:48,330
I entre aquells,
per la seva banda, és el que sembla

298
00:15:48,330 --> 00:15:51,060
ser un JavaScript buit
array anomenat marcadors.

299
00:15:51,060 --> 00:15:55,392
Totes les icones de diaris, o
podria triar una nova icona conjunt,

300
00:15:55,392 --> 00:15:57,350
seran emmagatzemats
en última instància, en aquesta matriu

301
00:15:57,350 --> 00:16:01,570
perquè puguem afegir molt fàcilment a
el mapa i eliminar del mapa.

302
00:16:01,570 --> 00:16:03,990
>> Ara anem a desplaçar-se cap avall
una mica i geni

303
00:16:03,990 --> 00:16:07,690
a través del codi que serà
executada tan aviat com el DOM o document

304
00:16:07,690 --> 00:16:10,480
model d'objectes o la
pàgina en si està llest.

305
00:16:10,480 --> 00:16:12,942
Recordem que aquesta sintaxi
aquí simplement especifica

306
00:16:12,942 --> 00:16:14,900
que el codi següent
s'ha de fer només

307
00:16:14,900 --> 00:16:17,840
quan el navegador ha acabat
carregar tota la resta.

308
00:16:17,840 --> 00:16:19,750
>> En primer lloc, declarem 1
tota munt d'estils,

309
00:16:19,750 --> 00:16:22,410
que acaben estilització
el mapa com per l'especificació.

310
00:16:22,410 --> 00:16:24,790
Llavors Declarem 1
tota munt d'opcions,

311
00:16:24,790 --> 00:16:28,630
que personalitzar encara més el Google
mapa que estem a punt d'encastar.

312
00:16:28,630 --> 00:16:32,090
A continuació, utilitzem una mica de codi jQuery,
que s'explica en detall una mica més

313
00:16:32,090 --> 00:16:35,000
en l'especificació, per agafar
aquest element, mapa-lona

314
00:16:35,000 --> 00:16:36,980
que identifiquem de manera exclusiva.

315
00:16:36,980 --> 00:16:40,640
I després aquesta línia aquí és
el que sembla màgicament ens donen

316
00:16:40,640 --> 00:16:43,560
un mapa de Google dins de
la nostra pròpia aplicació,

317
00:16:43,560 --> 00:16:47,020
emmagatzemar una referència a la mateixa
en aquesta variable anomenada mapa.

318
00:16:47,020 --> 00:16:50,550
>> Finalment, aquí es registra
el que es diu un oient.

319
00:16:50,550 --> 00:16:54,690
Penseu forma part posterior--, camí
posterior-- a la setmana zero a CS50

320
00:16:54,690 --> 00:16:57,430
quan mirem les ratllades i
el seu suport a través d'un passeig

321
00:16:57,430 --> 00:16:59,935
a través de coses trucades
esdeveniments i transmissions.

322
00:16:59,935 --> 00:17:01,810
És possible que no hagi utilitzat
vostè mateix, però és

323
00:17:01,810 --> 00:17:03,900
un mecanisme per el qual una
navegador en aquest cas

324
00:17:03,900 --> 00:17:07,940
pot cridar la nostra atenció quan és
a punt per executar en realitat una mica de codi.

325
00:17:07,940 --> 00:17:12,170
En aquest cas, es va a escoltar
al mapa d'un esdeveniment anomenat inactiu.

326
00:17:12,170 --> 00:17:14,930
Això significa que el navegador té
acabat de carregar el mapa de Google.

327
00:17:14,930 --> 00:17:18,380
En aquest punt una funció anomenada
configuri hauria en última instància,

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

329
00:17:19,339 --> 00:17:22,510
Aquesta funció, configurar,
anem a veure, està escrit per nosaltres.

330
00:17:22,510 --> 00:17:24,550
>> Ara aquí és una funció
que, per desgràcia,

331
00:17:24,550 --> 00:17:25,871
és només un marcador TOT add.

332
00:17:25,871 --> 00:17:28,620
Per l'especificació. vostè va a necessitar
per escriure el codi que realment

333
00:17:28,620 --> 00:17:32,840
S'afegeix un marker-- si sembla
com un diari o una tatxa,

334
00:17:32,840 --> 00:17:35,360
o alguna cosa else-- al mapa Google.

335
00:17:35,360 --> 00:17:37,720
Aquí ara és que la funció
anomenat configuri.

336
00:17:37,720 --> 00:17:40,390
Ho deixo a vostè a llegir
a través d'això amb més detall,

337
00:17:40,390 --> 00:17:42,600
però adonem que afegim
un munt més oients

338
00:17:42,600 --> 00:17:46,620
perquè puguem executar codi quan el
usuari fa clic i arrossega el mapa.

339
00:17:46,620 --> 00:17:50,730
També hem codi aquí que
inicialitza aquest plugin typeahead

340
00:17:50,730 --> 00:17:53,120
perquè en el menú desplegable
menú realment funciona.

341
00:17:53,120 --> 00:17:55,690
>> Però ens centrarem en només un
parell de llocs en aquest document.

342
00:17:55,690 --> 00:17:57,590
En concret, això veure aquí.

343
00:17:57,590 --> 00:18:00,410
Et remeto a la línia
documentació i l'especificació

344
00:18:00,410 --> 00:18:02,530
de com omplir aquest TOT.

345
00:18:02,530 --> 00:18:05,890
Però en poques paraules, aquesta biblioteca
typeahead li permet passar

346
00:18:05,890 --> 00:18:09,790
en el que es coneix generalment com a plantilla,
que té uns marcadors de posició variables

347
00:18:09,790 --> 00:18:13,690
molt similar a la de% de printf. * s.

348
00:18:13,690 --> 00:18:16,030
Però en aquest cas, la
plantilla per l'especificació

349
00:18:16,030 --> 00:18:18,760
permet especificar
quines variables desitja

350
00:18:18,760 --> 00:18:24,880
per injectar a partir de dades que es vénen
darrere d'una cosa així com el PHP

351
00:18:24,880 --> 00:18:29,810
arxius que has escrit
que estan emetent sortida JSON.

352
00:18:29,810 --> 00:18:35,170
>> Ara aquí adonem que som
l'escolta de seleccions TYPEAHEAD

353
00:18:35,170 --> 00:18:38,050
quan l'usuari porta a terme realment
una recerca i seleccioneu un valor.

354
00:18:38,050 --> 00:18:40,270
Així com en realitat som
va a escoltar perquè

355
00:18:40,270 --> 00:18:42,250
i executar algun codi com a resultat.

356
00:18:42,250 --> 00:18:45,300
Després continuem configurar
el mashup només una mica.

357
00:18:45,300 --> 00:18:48,000
I, en última instància, que anomenem
aquesta actualització funció.

358
00:18:48,000 --> 00:18:49,640
Actualitza les adreces d'interès a la pantalla.

359
00:18:49,640 --> 00:18:51,529
Més sobre això en un moment.

360
00:18:51,529 --> 00:18:53,570
Mentrestant, hi ha alguns
petites funcions en aquí.

361
00:18:53,570 --> 00:18:56,820
Una d'elles és que hideInfo
simplement tanca la finestra d'informació.

362
00:18:56,820 --> 00:19:00,020
Una altra funció aquí, que en última instància
no serà massa llarg, treure marcadors.

363
00:19:00,020 --> 00:19:03,580
Això va a desfer el que sigui
la seva funció de marcador add fa.

364
00:19:03,580 --> 00:19:04,960
I llavors aquí és la recerca.

365
00:19:04,960 --> 00:19:08,610
I aquest és interessant perquè ens
haver escrit el codi JavaScript que és

366
00:19:08,610 --> 00:19:13,490
va a parlar amb search.php al
servidor i tornar alguna resposta.

367
00:19:13,490 --> 00:19:16,110
>> Vostè, per descomptat, seguirà
necessitarà implementar search.php,

368
00:19:16,110 --> 00:19:18,310
però hem implementat el
Codi JavaScript que és

369
00:19:18,310 --> 00:19:22,480
va a manejar en realitat dur a terme
Cerca des d'aquest quadre de text.

370
00:19:22,480 --> 00:19:25,340
En particular, la notificació
que aquesta funció aquí,

371
00:19:25,340 --> 00:19:29,160
recerca, no cridi search.php
per un mètode anomenat

372
00:19:29,160 --> 00:19:31,072
obtenir JSON, que vam veure a classe.

373
00:19:31,072 --> 00:19:32,780
I la sintaxi aquí
és una mica diferent

374
00:19:32,780 --> 00:19:37,110
de conferència en la qual estem usant
jQuery l'anomenada interfície promesa.

375
00:19:37,110 --> 00:19:38,479
Més sobre això en l'especificació.

376
00:19:38,479 --> 00:19:40,520
Això simplement vol dir per a la nostra
propòsits ara que hi ha

377
00:19:40,520 --> 00:19:43,870
són dues funcions especials que
necessita trucar amb la notació de punt

378
00:19:43,870 --> 00:19:46,230
aquí immediatament després de cridar a aconseguir JSON.

379
00:19:46,230 --> 00:19:47,510
Un es diu fer.

380
00:19:47,510 --> 00:19:49,870
Un es diu fallen.

381
00:19:49,870 --> 00:19:51,790
Vostè pot pensar en aquests
com el controlador d'èxit

382
00:19:51,790 --> 00:19:54,960
i el gestor de fallades només
en cas que alguna cosa va malament.

383
00:19:54,960 --> 00:19:57,760
>> Ara donem una ullada a l'última
parell de funcions en aquest arxiu.

384
00:19:57,760 --> 00:20:00,180
Aquí sota és una funció
anomenat showInfo, que

385
00:20:00,180 --> 00:20:03,090
mostra informació en un dels
info petites finestres que

386
00:20:03,090 --> 00:20:05,380
apareix quan l'usuari fa clic a un marcador.

387
00:20:05,380 --> 00:20:08,470
Aquí sota addicional és
que la funció d'actualització

388
00:20:08,470 --> 00:20:10,510
que hem implementat per a vostè.

389
00:20:10,510 --> 00:20:15,250
Es determina els límits del mapa.

390
00:20:15,250 --> 00:20:19,360
Quines són les coordenades GPS de la seva
cantonades nord-est i sud-oest d'aquí.

391
00:20:19,360 --> 00:20:22,780
Hem preparat alguns paràmetres HDP
aquí i després els va passar en última instància,

392
00:20:22,780 --> 00:20:26,160
a update.php, que hem
També implementat per a vostè.

393
00:20:26,160 --> 00:20:31,390
Que finalment aconsegueix recuperar part JSON
des de l'arxiu anomenat update.php

394
00:20:31,390 --> 00:20:34,050
i després elimina qualsevol
marcadors a la pantalla

395
00:20:34,050 --> 00:20:36,650
i després itera sobre
les dades que ha tornat

396
00:20:36,650 --> 00:20:40,350
de update.php, que
de nou és simplement una matriu JSON.

397
00:20:40,350 --> 00:20:45,130
I llavors s'afegeix en última instància, un marcador de
cada un d'aquests llocs, insuficiència manipulació

398
00:20:45,130 --> 00:20:47,750
o errors que podria molt bé succeir.

399
00:20:47,750 --> 00:20:51,550
>> Ara només has de donar-te una idea de com es
podria anar sobre la depuració d'aquest projecte,

400
00:20:51,550 --> 00:20:55,420
m'adono que he obert a
avançar en aquesta fitxa aquí a aquesta URL,

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

402
00:21:01,320 --> 00:21:04,050
Ara, de nou, articles sobre
PHP implementem per a vostè

403
00:21:04,050 --> 00:21:06,320
pel que aquest no és tant
el podràs fer servir

404
00:21:06,320 --> 00:21:08,190
depurar, sinó més aviat la tècnica.

405
00:21:08,190 --> 00:21:10,590
Tingueu en compte que he buscat
El codi postal de Cambridge aquí,

406
00:21:10,590 --> 00:21:15,260
i m'he quedat enrere, de fet un JSON
varietat d'objectes JSON dins dels quals

407
00:21:15,260 --> 00:21:17,640
són dos keys-- enllaç i el títol.

408
00:21:17,640 --> 00:21:19,860
>> Així aquesta funcionalitat
treballa ja per a vostè.

409
00:21:19,860 --> 00:21:24,330
Però aquesta tècnica de forma manual va
a un URL com aquesta per alguna cosa com

410
00:21:24,330 --> 00:21:31,710
search.php? geo = cambridge o 02138 o
qualsevol que sigui l'usuari ha escrit a ha de

411
00:21:31,710 --> 00:21:35,770
de gran valor com vostè, vostè mateix, intenta
d'esbrinar exactament si o per què

412
00:21:35,770 --> 00:21:38,510
search.php està funcionant o no.

413
00:21:38,510 --> 00:21:41,720
>> En última instància, llavors, vostè té
alguns Tots davant.

414
00:21:41,720 --> 00:21:44,250
Esteu primera implements
que script d'importació que

415
00:21:44,250 --> 00:21:46,520
llegeix en us.text a la base de dades.

416
00:21:46,520 --> 00:21:48,760
Vostè està llavors necessitarà
per implementar search.php

417
00:21:48,760 --> 00:21:51,320
de manera que es comporta exactament com s'especifica.

418
00:21:51,320 --> 00:21:54,170
Vostè està llavors voldrà
centrar-se en scripts.js

419
00:21:54,170 --> 00:21:57,520
i implementa en última instància
aquest parell de Tots,

420
00:21:57,520 --> 00:21:59,950
fins i tot per a configurar
i aquesta plantilla,

421
00:21:59,950 --> 00:22:03,220
afegir marcadors, treure marcadors, i
a continuació, l'última, però no menys important, un

422
00:22:03,220 --> 00:22:04,330
toc personal.

423
00:22:04,330 --> 00:22:07,477
>> Un cop s'hagi posat en funcionament mashup
bastant com la nostra, l'objectiu a la mà

424
00:22:07,477 --> 00:22:09,560
és perquè vostè afegir un personal
toc per la seva mashup,

425
00:22:09,560 --> 00:22:11,290
ja sigui estètica o funcional.

426
00:22:11,290 --> 00:22:13,950
Prengui el mashup sempre tan
lleugerament al següent nivell.

427
00:22:13,950 --> 00:22:18,330
Sempre que vostè s'empeny més enllà
la seva familiaritat amb la mateixa especificació

428
00:22:18,330 --> 00:22:20,840
i recollir una tècnica
nou, fins i tot si és només

429
00:22:20,840 --> 00:22:25,610
alguna cosa estètic com canviar el
disseny del mapa que utilitzeu,

430
00:22:25,610 --> 00:22:28,070
l'abast que esperem
serà satisfet.

431
00:22:28,070 --> 00:22:30,260
Això és, doncs, de problemes 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Estiguin atents per més en el
especificació i millor de les sorts

433
00:22:33,070 --> 00:22:36,400
fer front a aquest, el seu últim
Problema CS50 establert mai.

434
00:22:36,400 --> 00:22:39,750
>> [REPRODUCCIÓ DE MÚSICA]

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