1
00:00:00,000 --> 00:00:03,388
>> [Música tocando]

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

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

4
00:00:10,180 --> 00:00:12,600
Imos dar un paseo pola
Problema Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
que vai desafia-lo a
basearse en elementos a Google Maps

6
00:00:15,880 --> 00:00:20,905
con elementos de Google News and mash
Los xuntos nun applet web que

7
00:00:20,905 --> 00:00:24,150
Permite que o usuario buscar
un mapa para noticias locais

8
00:00:24,150 --> 00:00:26,780
para cidades específicas,
cidades e códigos postais.

9
00:00:26,780 --> 00:00:31,040
Para iso, imos
integrar algunhas HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript, e unha técnica
xeralmente coñecido como AJAX en orde

11
00:00:34,390 --> 00:00:36,850
para crear esta inmersa
experiencia do usuario.

12
00:00:36,850 --> 00:00:38,920
>> Imos primeiro ao propio Google.

13
00:00:38,920 --> 00:00:41,220
Isto, naturalmente, é posible que
unha interface familiar.

14
00:00:41,220 --> 00:00:45,070
Pero resulta que Google Maps
Tamén fornece unha aplicación API--

15
00:00:45,070 --> 00:00:48,360
a través do cal a programación interface--
pode tomar elementos de Google Maps

16
00:00:48,360 --> 00:00:50,740
e integralos en
as súas propias aplicacións.

17
00:00:50,740 --> 00:00:52,650
De feito, ao longo desta
proceso, vai

18
00:00:52,650 --> 00:00:55,140
para atopar un par de URL
especialmente útil que

19
00:00:55,140 --> 00:00:57,820
son mencionados na
especificación para Problem Set 8,

20
00:00:57,820 --> 00:01:00,980
especificamente esta Introdución
Guía ou a Guía do desenvolvedor

21
00:01:00,980 --> 00:01:07,640
a Google Maps API versión 3, así
como a API de Google Maps JavaScript

22
00:01:07,640 --> 00:01:10,260
v3 de referencia, que é un
pouco máis misterioso para ler

23
00:01:10,260 --> 00:01:14,600
pero, en realidade, ten todo o nivel máis baixo
detalles sobre o que funciona ou métodos

24
00:01:14,600 --> 00:01:18,220
e obxectos e propiedades e
eventos realmente veñen coa API,

25
00:01:18,220 --> 00:01:20,720
moi semellante en espírito
para [inaudível] páxinas.

26
00:01:20,720 --> 00:01:23,480
>> Agora, se imos dar un ollo
en Google News, vai

27
00:01:23,480 --> 00:01:25,370
quizais ver unha interface familiar aquí.

28
00:01:25,370 --> 00:01:29,350
Pero resulta que tamén pode buscar
Google News para xeografías específicas

29
00:01:29,350 --> 00:01:32,000
a través dun parámetro HTTP chamado geo.

30
00:01:32,000 --> 00:01:35,100
En realidade, se eu aumentar o zoom
ata aquí, vai ver que

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

32
00:01:41,672 --> 00:01:43,630
E, de feito, se eu aumentar
a fóra, vai ver que eu son

33
00:01:43,630 --> 00:01:47,090
mirando para unha páxina con unha morea de
puntos de vista sobre Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Mentres tanto, se realmente cambiar a
URL para non ser un código postal como este,

35
00:01:50,620 --> 00:01:55,580
pero algo un pouco máis confusa
como Cambridge, Massachusetts +,

36
00:01:55,580 --> 00:02:00,740
onde a vantaxe é do xeito que codificar un
carácter de espazo nunha URL e prema Intro,

37
00:02:00,740 --> 00:02:02,907
vai ver que realmente
ver case a mesma noticia.

38
00:02:02,907 --> 00:02:05,489
Quizais sexa un pouco diferente
porque, en realidade, Cambridge

39
00:02:05,489 --> 00:02:06,910
ten varios códigos postais.

40
00:02:06,910 --> 00:02:09,410
Agora como eu ía saber isto e,
En realidade, como eu podería dalgún xeito

41
00:02:09,410 --> 00:02:12,940
amarre cidades e vilas
para códigos postais en caso de eu

42
00:02:12,940 --> 00:02:15,064
quere facer que o usuario
a ollar para arriba, quere?

43
00:02:15,064 --> 00:02:17,480
Ben, resulta que hai
un sitio aí chamado

44
00:02:17,480 --> 00:02:20,060
geonames.org que é
unha iniciativa de ter

45
00:02:20,060 --> 00:02:23,760
unha base de datos de todos libremente dispoñibles
tipo de información xeográfica,

46
00:02:23,760 --> 00:02:27,040
non só para os Estados Unidos, pero tamén
a outros países tamén.

47
00:02:27,040 --> 00:02:30,430
En realidade, se eu for a este URL aquí, que
Tamén é mencionado no conxunto de problemas

48
00:02:30,430 --> 00:02:34,510
especificación, vai ver que tres
Lista de unha morea de arquivos zip

49
00:02:34,510 --> 00:02:36,400
calquera que se pode descargar por ti.

50
00:02:36,400 --> 00:02:39,900
De feito, para este conxunto de problemas
vai baixar us.zip.

51
00:02:39,900 --> 00:02:43,790
Agora dentro deste arquivo, é un todo
banda de datos en formato de texto.

52
00:02:43,790 --> 00:02:47,760
Os ficheiros é moi semellante a un
CSV-- Comma Separated Values ​​file--

53
00:02:47,760 --> 00:02:51,294
pero, en realidade, usa
guías para demarcar campos.

54
00:02:51,294 --> 00:02:53,710
Agora, mentres tanto, se ollar
aquí o que me destacou,

55
00:02:53,710 --> 00:02:56,459
os campos neste arquivo están indo
para ser cousas como códigos de países,

56
00:02:56,459 --> 00:02:58,980
códigos postais, nomes de lugares,
e logo, dunha forma

57
00:02:58,980 --> 00:03:04,230
ou outros, estados e municipios,
comunidades, e moito máis.

58
00:03:04,230 --> 00:03:06,630
En realidade, eu xa
descarga deste ficheiro con antelación.

59
00:03:06,630 --> 00:03:09,750
Deixe-me ir adiante e abrilo aqui--
us.text-- e, en realidade, vai

60
00:03:09,750 --> 00:03:16,660
ver se eu rolar para abaixo para a liña 16792
verás algúns rexistros de Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts e os seus varios códigos postais.

62
00:03:19,120 --> 00:03:22,150
O que tamén ve alí é o concello,
algúns números que realmente non

63
00:03:22,150 --> 00:03:24,500
comprender, pero tamén todos
o camiño á dereita,

64
00:03:24,500 --> 00:03:27,170
algúns GPS coordinates--
latitude e lonxitude.

65
00:03:27,170 --> 00:03:30,440
Isto é óptimo porque un dos
os recursos de Google Maps API

66
00:03:30,440 --> 00:03:33,670
é a capacidade de detectar
onde está xeograficamente

67
00:03:33,670 --> 00:03:36,850
en termos de coordenadas GPS.

68
00:03:36,850 --> 00:03:40,210
>> Agora imos comezar a descubrir como
comezar a amarrar esas cousas xuntas.

69
00:03:40,210 --> 00:03:42,900
Nós demos-lle un todo
chea de código de distribución,

70
00:03:42,900 --> 00:03:44,970
así como base de datos MySQL.

71
00:03:44,970 --> 00:03:49,100
En realidade, se eu tirar un phpMyAdmin ter
xa descargados, como pronto,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, verás unha táboa MySQL que
parécese tanto, un campo ID, país

73
00:03:54,800 --> 00:03:57,400
código, código postal, nome da cidade e moito máis.

74
00:03:57,400 --> 00:04:00,490
Tipo de todos aqueles
columnas I derivada simplemente

75
00:04:00,490 --> 00:04:03,870
lendo o readme.text
arquivar aquí que especificar

76
00:04:03,870 --> 00:04:07,330
un campo é un número enteiro,
ou varchar ou semellantes.

77
00:04:07,330 --> 00:04:10,510
>> Entón creamos esta táboa para
e lle deu os comandos SQL

78
00:04:10,510 --> 00:04:12,770
para realizar a crear ese
táboa no seu propio banco de datos,

79
00:04:12,770 --> 00:04:15,290
pero non hai, en realidade, non hai datos nel aínda.

80
00:04:15,290 --> 00:04:19,600
Pola contra, vai ter que
descargar us.zip ou zip de calquera país

81
00:04:19,600 --> 00:04:21,500
arquivo daquel URL alí.

82
00:04:21,500 --> 00:04:24,940
E entón vai ter que escribir
un guión da liña de comandos en PHP que é

83
00:04:24,940 --> 00:04:28,420
abrirá este texto
arquivo, interactuar sobre as súas liñas,

84
00:04:28,420 --> 00:04:31,180
e, a continuación, para cada un dos
estas liñas facer unha inserción

85
00:04:31,180 --> 00:04:34,940
en que pon a táboa
na súa base de datos MySQL.

86
00:04:34,940 --> 00:04:37,880
Así, a finais deste proceso, vai
ter executado este script en última instancia

87
00:04:37,880 --> 00:04:39,610
só unha vez, en teoría.

88
00:04:39,610 --> 00:04:41,780
En realidade, probablemente,
executa-lo unha morea de veces

89
00:04:41,780 --> 00:04:45,460
ao tentar resolver varios erros.

90
00:04:45,460 --> 00:04:48,440
>> Finalmente, vai ter un
realmente grande base de datos con miles

91
00:04:48,440 --> 00:04:50,139
e miles de liñas xeográficas.

92
00:04:50,139 --> 00:04:52,930
Logo vai poñer esta importación
script de lado xa que funciona

93
00:04:52,930 --> 00:04:55,140
e base de datos é bo
e correcto, e, a continuación,

94
00:04:55,140 --> 00:04:58,880
vai pasar realmente
aplicar o propio mashup.

95
00:04:58,880 --> 00:05:01,670
O mashup vai mirar
un pouco algo así.

96
00:05:01,670 --> 00:05:05,165
No mashup.cs50.net, nós
ten unha solución persoal

97
00:05:05,165 --> 00:05:06,990
que parece un pouco algo así.

98
00:05:06,990 --> 00:05:11,070
En realidade, se eu premer neste xornal
icona para Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
podes ver unha fiación
Icona brevemente e logo,

100
00:05:13,300 --> 00:05:16,370
unha lista ordenada, unha
lista con marcas de artigos

101
00:05:16,370 --> 00:05:18,280
Relacionado coa Cambridge, Massachusetts.

102
00:05:18,280 --> 00:05:20,352
Se eu premer en Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Vou ver o mesmo para aquela cidade.

104
00:05:21,685 --> 00:05:24,174
E se eu premer en
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
pode non haber ningún
noticias de de Watertown,

106
00:05:26,090 --> 00:05:28,630
así vai ver algo
como o día de poucas noticias.

107
00:05:28,630 --> 00:05:32,140
>> Agora, mentres tanto, na esquina superior esquerda son
algúns familiares controis Google Maps

108
00:05:32,140 --> 00:05:34,980
para deixalo reducir, pan
cara arriba, abaixo, esquerda e dereita,

109
00:05:34,980 --> 00:05:37,360
pero tamén unha caixa de busca que poñemos alí.

110
00:05:37,360 --> 00:05:40,910
Entón, se eu buscar, francamente,
o único outro código postal Sei,

111
00:05:40,910 --> 00:05:45,020
90210, imos realmente ver
Beverly Hills, California.

112
00:05:45,020 --> 00:05:48,550
Cando premendo el me leva a
California e un grupo enteiro

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

114
00:05:50,369 --> 00:05:51,910
Agora observe, tamén, o que pasou alí.

115
00:05:51,910 --> 00:05:57,040
Se eu esta busca tempo para 02138 ou mesmo
Cambridge Massachusetts comas ou algúns

116
00:05:57,040 --> 00:06:00,300
variante, que obtén un
pouco suspendida autocomplete.

117
00:06:00,300 --> 00:06:03,840
Agora iso é usar un plugin
para unha biblioteca chamada jQuery,

118
00:06:03,840 --> 00:06:05,732
e ese plugin chámase typeahead.

119
00:06:05,732 --> 00:06:07,440
Nós simplemente ler
a documentación,

120
00:06:07,440 --> 00:06:13,150
a descarga do ficheiro .js integrada
no código de distribución de modo que

121
00:06:13,150 --> 00:06:16,900
en definitiva, pode escribir o código que
enche este menú dropdown coa auto

122
00:06:16,900 --> 00:06:19,350
seleccións ou as suxestións de automóbiles.

123
00:06:19,350 --> 00:06:23,820
>> Agora o código de distribución, con todo, que
recibiu non fai case tanto como.

124
00:06:23,820 --> 00:06:26,860
Colle o mapa de Google incorporado e
tes os controis na parte superior esquerda,

125
00:06:26,860 --> 00:06:28,240
e comeza a caixa de busca.

126
00:06:28,240 --> 00:06:32,760
Pero se eu escribir algo como
02138, non hai lugares se atopan aínda.

127
00:06:32,760 --> 00:06:34,730
Así que será
un dos nosos obxectivos aquí.

128
00:06:34,730 --> 00:06:37,430
Ademais, se der un paso
cara atrás e ollar para o propio mapa,

129
00:06:37,430 --> 00:06:38,950
non hai ningunha noticia calquera.

130
00:06:38,950 --> 00:06:41,780
Mesmo se eu premer e
arrastre, en realidade non hai marcadores

131
00:06:41,780 --> 00:06:45,560
aparecen á noticia, porque iso
reto é deixar para ti tamén.

132
00:06:45,560 --> 00:06:48,490
>> Imos dar un ollo a continuación,
no código de distribución.

133
00:06:48,490 --> 00:06:51,460
Unha vez que teña baixo
pset8.zip e abriu o zíper

134
00:06:51,460 --> 00:06:54,430
no seu directorio vhost
no CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
vai ver estes
directorios aquí dentro.

136
00:06:56,550 --> 00:07:00,200
Bin-- que xeralmente significa
binario para programs-- executable

137
00:07:00,200 --> 00:07:04,870
inclúe, como en pset7, algúns PHP
arquivos que outros ficheiros inclúen,

138
00:07:04,870 --> 00:07:06,710
logo público, que é
os ficheiros que necesitan

139
00:07:06,710 --> 00:07:09,369
para ser accesible ao público
para un usuario cun navegador.

140
00:07:09,369 --> 00:07:11,410
Imos dar un ollo ao
bin, e nós imos

141
00:07:11,410 --> 00:07:13,890
ver que hai un ficheiro
xa chamado Import.

142
00:07:13,890 --> 00:07:17,591
Se abrimos esta con gedit, veremos
que, por desgraza, non hai moito

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

144
00:07:18,090 --> 00:07:20,250
Todo o que está aí, no entanto,
é unha cousa toda enriba

145
00:07:20,250 --> 00:07:23,410
que especifica cales
interpreter-- neste caso PHP--

146
00:07:23,410 --> 00:07:25,759
debe utilizar para realmente
executar este ficheiro.

147
00:07:25,759 --> 00:07:27,550
Pero, entón, onde se di
TODO é o lugar onde está

148
00:07:27,550 --> 00:07:31,130
indo a necesidade de escribir un código
que probablemente require a configuración

149
00:07:31,130 --> 00:07:35,820
ficheiro que está no directorio inclúe
como fixemos antes con arquivos PHP.

150
00:07:35,820 --> 00:07:38,180
E entón vai
ten que abrir algunha maneira se

151
00:07:38,180 --> 00:07:41,920
us.text onde presuntamente
xa descomprimido.

152
00:07:41,920 --> 00:07:44,690
Entón vai ter que
iterado sobre as liñas deste arquivo,

153
00:07:44,690 --> 00:07:47,800
quizais usando algunhas das funcións
suxerido na especificación.

154
00:07:47,800 --> 00:07:51,390
Logo insira cada un destes
liñas na base de datos MySQL

155
00:07:51,390 --> 00:07:54,940
usando a función de procura, o que
temos novo sempre que com--

156
00:07:54,940 --> 00:07:58,010
ou, polo menos, unha variante
mesmos en functions.php,

157
00:07:58,010 --> 00:07:59,560
que veremos en só un momento.

158
00:07:59,560 --> 00:08:04,430
>> Agora imos pechar importación e volver
nosa dirección e esta vez vai en

159
00:08:04,430 --> 00:08:05,300
inclúe.

160
00:08:05,300 --> 00:08:09,210
E se eu fai ls alí, vai ver
tres arquivos moi como Conxunto de problemas 7.

161
00:08:09,210 --> 00:08:13,760
E imos dar un ollo rápida,
por exemplo, no config.php.

162
00:08:13,760 --> 00:08:16,730
De alí, é menos liñas
que antes, e el

163
00:08:16,730 --> 00:08:20,712
Parece que este ficheiro inclúe
constants.php e functions.php.

164
00:08:20,712 --> 00:08:23,670
Utilizamos un pouco diferente
técnica desta vez para realmente

165
00:08:23,670 --> 00:08:30,910
especificar que estes arquivos son relativos
ao directorio actual __ DIR__

166
00:08:30,910 --> 00:08:35,280
representa calquera directorio este
arquivo, config.php é en si mesmo en.

167
00:08:35,280 --> 00:08:37,600
Polo tanto, esta é unha forma máis
xeito explícito especificar

168
00:08:37,600 --> 00:08:40,100
o que os outros arquivos que quere esixir.

169
00:08:40,100 --> 00:08:44,020
>> Agora, se eu pechar este ficheiro e
abrir constants.php no seu lugar,

170
00:08:44,020 --> 00:08:47,430
verás un arquivo moi reminiscente
a do ben, aínda que Problem Set 7

171
00:08:47,430 --> 00:08:50,050
con unha base de datos diferente chamado pset8.

172
00:08:50,050 --> 00:08:54,020
Finalmente, en functions.php,
imos ver só unha función

173
00:08:54,020 --> 00:08:55,942
esta vez chamado consulta.

174
00:08:55,942 --> 00:08:59,150
Isto é case o mesmo, agás lidamos
erros esta vez un pouco

175
00:08:59,150 --> 00:09:02,860
de forma diferente, pero é uso é
o mesmo que no conxunto de problemas de sete.

176
00:09:02,860 --> 00:09:08,090
>> Agora imos voltar á nosa pset8
directorio, entrar en público, e alí

177
00:09:08,090 --> 00:09:14,420
se eu fai ls, verás isto--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
e update.php-- todos os ficheiros.

179
00:09:16,940 --> 00:09:22,010
E entón a fontes css, img, e
directorio js bastante como pset7.

180
00:09:22,010 --> 00:09:24,660
>> Imos dar un ollo
index.html, que é

181
00:09:24,660 --> 00:09:27,290
vai ser realmente o
punto de entrada ao smashup.

182
00:09:27,290 --> 00:09:31,820
Agora en index.html, verá un todo
banda de elementos de conexión na cabeza,

183
00:09:31,820 --> 00:09:36,540
especificamente, para o arranque para o noso propio
CSS seguido por unha morea de guión

184
00:09:36,540 --> 00:09:41,520
etiquetas para cousas como a mapas, API
en si, un marcador especial con etiqueta

185
00:09:41,520 --> 00:09:44,950
utilidade que mencionados na
especificación está dispoñible para ti,

186
00:09:44,950 --> 00:09:48,420
propio jQuery, de bootstrap
en si, e outra biblioteca

187
00:09:48,420 --> 00:09:50,990
chamado subliñado que
falamos no spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js como jquery.js
é unha biblioteca JavaScript

189
00:09:57,031 --> 00:10:00,280
que ten unha morea de funcionalidade
que unha morea de persoas no mundo de desexos

190
00:10:00,280 --> 00:10:02,020
existiron na propia JavaScript.

191
00:10:02,020 --> 00:10:04,560
Entón, todos estes son
realmente moi popular.

192
00:10:04,560 --> 00:10:07,140
Tamén xa mencionei typeahead
que é a biblioteca que

193
00:10:07,140 --> 00:10:11,180
fai iso suspendida autocomplete e
finalmente, unha ligazón para o noso propio JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Mentres tanto, e quizais
por sorte, este mashup

195
00:10:13,880 --> 00:10:17,550
é conducido por relativamente pouco
HTML aquí abaixo na parte inferior.

196
00:10:17,550 --> 00:10:22,330
Teña en conta que temos indicado un div en
noso corpo de fluído clase-container.

197
00:10:22,330 --> 00:10:24,610
Este, á Bootstrap de
documentación, só

198
00:10:24,610 --> 00:10:29,840
significa que este div vai cubrir o
viewport ou fiestra do navegador totalmente.

199
00:10:29,840 --> 00:10:33,020
>> Mentres tanto, a continuación que temos unha div
que está aberta e inmediatamente pechada

200
00:10:33,020 --> 00:10:34,790
con identificador único do mapa lona.

201
00:10:34,790 --> 00:10:37,400
Este momento é de Google
Documentación Mapas

202
00:10:37,400 --> 00:10:42,490
para a súa API, en que eu simplemente debe
ter un div baleiro no que a inxectar,

203
00:10:42,490 --> 00:10:44,470
en definitiva, un real de Google.

204
00:10:44,470 --> 00:10:46,310
Pero máis sobre isto en só un bit.

205
00:10:46,310 --> 00:10:48,850
>> Finalmente, hai un formulario
aquí dentro que

206
00:10:48,850 --> 00:10:52,930
aplica a caixa de texto na parte superior á esquerda
na nosa interface para investigación.

207
00:10:52,930 --> 00:10:54,730
Teña en conta que usamos
un pouco de arranque

208
00:10:54,730 --> 00:10:57,670
aquí demasiado-- cousas como
fórmase liña e fórmase grupo.

209
00:10:57,670 --> 00:11:00,080
Nós demos ao ex-
ID único do formulario.

210
00:11:00,080 --> 00:11:04,510
E entón, en definitiva, eu realmente teño
un tipo de entrada, que é moi familiar,

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

212
00:11:06,440 --> 00:11:07,230
Só unha convención.

213
00:11:07,230 --> 00:11:09,234
Q para query-- podería
foi chamado de calquera cousa.

214
00:11:09,234 --> 00:11:11,400
E entón, o espazo reservado,
con todo, é cidade, provincia,

215
00:11:11,400 --> 00:11:16,200
e código postal que ten que se lembrar
vendo no noso mashup de demostración antes.

216
00:11:16,200 --> 00:11:17,980
Imos pechar este ficheiro.

217
00:11:17,980 --> 00:11:24,460
>> Agora, bótalle un ollo nos arquivos PHP que
agardar e, a continuación, os ficheiros JavaScript.

218
00:11:24,460 --> 00:11:27,700
Nos nosos arquivos PHP, temos
xa aplicadas para ti,

219
00:11:27,700 --> 00:11:29,960
por exemplo, actualizacións.

220
00:11:29,960 --> 00:11:35,060
Update.php-- non imos gastar unha enorme
cantidade de tempo en aqui-- en poucas palabras

221
00:11:35,060 --> 00:11:38,400
é o ficheiro que o noso
Código JavaScript está pasando

222
00:11:38,400 --> 00:11:41,610
entrar en contacto vía AJAX que
técnica asíncrono que é

223
00:11:41,610 --> 00:11:45,980
incorporado JavaScript nestes días que é
vai permitir-nos a preguntar update.php

224
00:11:45,980 --> 00:11:47,410
para máis información.

225
00:11:47,410 --> 00:11:50,045
>> En concreto, a calquera hora
o usuario arrastra o mapa

226
00:11:50,045 --> 00:11:53,310
ou executa unha busca que salta
o usuario a outro lugar,

227
00:11:53,310 --> 00:11:55,250
o noso código JavaScript,
como veremos en breve, é

228
00:11:55,250 --> 00:11:59,610
vai chamar update.php
e pedir 10 ou máis etiquetas

229
00:11:59,610 --> 00:12:02,630
dentro da ventá de visualización con base
sobre as coordenadas GPS

230
00:12:02,630 --> 00:12:06,510
da parte superior e inferior
cantos do mapa.

231
00:12:06,510 --> 00:12:10,520
Podemos, entón, repoboar o mapa agora que
o usuario pasou a pantalla, a fin

232
00:12:10,520 --> 00:12:14,210
ver 10 probablemente novo
etiquetas para diferentes cidades.

233
00:12:14,210 --> 00:12:18,340
Mentres tanto, este arquivo é, en última instancia
indo para executar unha consulta SQL

234
00:12:18,340 --> 00:12:21,680
contra o noso banco de datos
táboa chamada lugares que

235
00:12:21,680 --> 00:12:26,380
volverá aqueles
10 ou menor número de lugares.

236
00:12:26,380 --> 00:12:32,620
>> Mentres tanto, en articles.php, é outro
arquivar temos escrito na súa totalidade.

237
00:12:32,620 --> 00:12:35,820
É moi semellante ao espírito
Función Proc do Conxunto de problemas 7,

238
00:12:35,820 --> 00:12:39,450
que contactado Yahoo Finance para ti.

239
00:12:39,450 --> 00:12:43,710
Este ficheiro de contactos de Google Noticias
para ti, en definitiva, agarrando

240
00:12:43,710 --> 00:12:46,050
unha máquina de lectura
version-- en algo

241
00:12:46,050 --> 00:12:49,720
chamado RSS format-- da noticia
a Cambridge ou Beverly Hills

242
00:12:49,720 --> 00:12:52,880
ou o que quere que cidade investigou
para con base nese geoparâmetros.

243
00:12:52,880 --> 00:12:57,250
Nós analizar ese RSS, que é só unha
tipo de linguaxe de marcado chamada XML,

244
00:12:57,250 --> 00:13:00,740
e entón nós realmente
devolve-lo ao seu navegador

245
00:13:00,740 --> 00:13:03,570
e ao seu código JavaScript,
especificamente, nun formato de chamada

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

247
00:13:06,097 --> 00:13:08,180
Agora vai ver na
specification-- nós sinala-lo

248
00:13:08,180 --> 00:13:10,720
en como pode realmente ver
algúns dos traseira-- benvida JSON

249
00:13:10,720 --> 00:13:15,210
que esta función en definitiva
permite cubrir eses menús emerxentes de xeito

250
00:13:15,210 --> 00:13:16,960
que cando fai clic
nun marcador no mapa

251
00:13:16,960 --> 00:13:19,430
realmente ve un grupo enteiro
de balas, cada un dos cales

252
00:13:19,430 --> 00:13:21,020
ligazóns a unha páxina.

253
00:13:21,020 --> 00:13:25,000
>> Agora imos dar un ollo a un último
Arquivo PHP que, por sorte, non fai

254
00:13:25,000 --> 00:13:27,970
ten moita cousa a suceder on--
só un ben grande TODO.

255
00:13:27,970 --> 00:13:32,170
Agora este ficheiro declara
un array chamado lugares.

256
00:13:32,170 --> 00:13:35,980
E, a continuación, en definitiva, impresións
esa matriz en JSON format--

257
00:13:35,980 --> 00:13:38,720
pretty imprimindo-lo só para que
as cousas son máis fáciles de depurar.

258
00:13:38,720 --> 00:13:41,480
Desafortunadamente, o
medio hai este TODO,

259
00:13:41,480 --> 00:13:46,890
que apela lle buscar o
base de datos para as partes correspondentes a geo HTTP

260
00:13:46,890 --> 00:13:47,490
parámetro.

261
00:13:47,490 --> 00:13:49,865
>> E, de feito, iso vai
ser un dos seus challenges--

262
00:13:49,865 --> 00:13:54,240
para aplicar esta funcionalidade aquí
de xeito que cando vostede poñerse en contacto con este arquivo con

263
00:13:54,240 --> 00:14:00,610
unha URL como investigación. php? geo = algo,
seu código acabará voltar un JSON

264
00:14:00,610 --> 00:14:05,020
matriz de todos os lugares no seu
táboa de base de datos que corresponden a esta entrada.

265
00:14:05,020 --> 00:14:08,960
Polo tanto, se o usuario escribe en Cambridge,
seu arquivo aquí search.php

266
00:14:08,960 --> 00:14:12,680
debe finalmente retornar unha matriz JSON
para todos os xogos de Cambridge,

267
00:14:12,680 --> 00:14:16,990
que se pode en Massachusetts
pero podería ser aínda en calquera outro lugar.

268
00:14:16,990 --> 00:14:21,040
>> Por último, imos dar un ollo en dous
arquivos que están ultimately-- estática

269
00:14:21,040 --> 00:14:23,680
seu arquivo CSS e seu arquivo JavaScript.

270
00:14:23,680 --> 00:14:26,779
Se eu entrar no noso directorio CSS,
hai todo un conxunto de arquivos de alí,

271
00:14:26,779 --> 00:14:28,070
pero a maioría deles son bibliotecas.

272
00:14:28,070 --> 00:14:31,530
Vou dar un ollo,
En concreto, a styles.css,

273
00:14:31,530 --> 00:14:35,440
que é o noso propio CSS global que é
indo estilizar todo este mashup.

274
00:14:35,440 --> 00:14:38,840
Vou deixar para a ler
Os comentarios aquí, pero, en poucas palabras,

275
00:14:38,840 --> 00:14:43,490
este é o CSS que asegura que o noso
mashup, por defecto fóra da caixa,

276
00:14:43,490 --> 00:14:46,950
parece exactamente do xeito que queremos ele--
co mapa de encher o porto vista

277
00:14:46,950 --> 00:14:49,720
e coa busca
caixa-se na parte superior esquerda.

278
00:14:49,720 --> 00:14:52,870
Tamén tomei a liberdade de
estilizando que Dropdown typeahead

279
00:14:52,870 --> 00:14:55,170
Menú algo tamén.

280
00:14:55,170 --> 00:14:58,030
>> O ficheiro máis importante
quizais a este problema establecer

281
00:14:58,030 --> 00:15:01,070
É esta última, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Dentro do seu directorio JS
é aínda máis ficheiros.

283
00:15:03,800 --> 00:15:08,090
Todos eles son ficheiros de biblioteca
excepto para un regalo, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Se abrimos isto, imos dar o noso
última xira a través das funcións que

285
00:15:11,460 --> 00:15:13,820
son incorporadas a este ficheiro
para ti e chamada de atención

286
00:15:13,820 --> 00:15:16,200
para os todos que temos por diante.

287
00:15:16,200 --> 00:15:19,110
>> Na parte superior deste arquivo,
Son tres variables globais.

288
00:15:19,110 --> 00:15:22,910
Un a un mapa, que vai
ser un referente para o noso mapa de Google.

289
00:15:22,910 --> 00:15:25,510
Podes pensar niso
tipo de como un punteiro.

290
00:15:25,510 --> 00:15:27,710
Mentres tanto, temos
outra variable global

291
00:15:27,710 --> 00:15:31,500
Información chamada, o que parece ser
almacenar o valor de retorno dunha chamada

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

293
00:15:34,170 --> 00:15:37,835
JavaScript soporta obxectos que
son moi similares en espírito á Struts.

294
00:15:37,835 --> 00:15:40,250
E o que esta liña para
nosos propósitos está facendo

295
00:15:40,250 --> 00:15:42,820
está creando un novo Información
fiestra na memoria e, a continuación

296
00:15:42,820 --> 00:15:46,330
manter en torno a unha referencia
do mesmo, a unha variable chamada Info.

297
00:15:46,330 --> 00:15:48,330
E entre aqueles,
con todo, é o que parece

298
00:15:48,330 --> 00:15:51,060
ser un baleiro JavaScript
array chamado marcadores.

299
00:15:51,060 --> 00:15:55,392
Todos estes iconas de xornal, ou
pode escoller un ícone completamente,

300
00:15:55,392 --> 00:15:57,350
van ser gardados
en definitiva, esta matriz

301
00:15:57,350 --> 00:16:01,570
de xeito que podemos facilmente engadir
o mapa e eliminar-los do mapa.

302
00:16:01,570 --> 00:16:03,990
>> Agora imos rolar para abaixo
un pouco e Whiz

303
00:16:03,990 --> 00:16:07,690
a través do código que será
executada logo que o documento ou DOM

304
00:16:07,690 --> 00:16:10,480
modelo de obxecto ou o
propia páxina está preparado.

305
00:16:10,480 --> 00:16:12,942
Lembre que esta sintaxe
aquí simplemente especifica

306
00:16:12,942 --> 00:16:14,900
que o código a seguir
só debe ser executada

307
00:16:14,900 --> 00:16:17,840
cando o navegador rematou
Cargando o resto.

308
00:16:17,840 --> 00:16:19,750
>> Nós primeiro declarar unha
todo grupo de estilos,

309
00:16:19,750 --> 00:16:22,410
que acaban stylizing
o mapa de acordo coa especificación.

310
00:16:22,410 --> 00:16:24,790
Nós, entón, declarar unha
todo morea de opcións,

311
00:16:24,790 --> 00:16:28,630
que personalizar aínda máis o Google
mapa que estamos a piques de incorporar.

312
00:16:28,630 --> 00:16:32,090
Logo usan un pouco de código jQuery,
que se explica en detalle un pouco máis

313
00:16:32,090 --> 00:16:35,000
no spec, para coller
ese elemento, o mapa-canvas

314
00:16:35,000 --> 00:16:36,980
que identificamos de forma exclusiva.

315
00:16:36,980 --> 00:16:40,640
E entón esa liña aquí é
o que parece Magic darnos

316
00:16:40,640 --> 00:16:43,560
un mapa de Google dentro
nosa propia aplicación,

317
00:16:43,560 --> 00:16:47,020
almacenando unha referencia a este
nesa variable chamado mapa.

318
00:16:47,020 --> 00:16:50,550
>> Finalmente, aquí registamos
o que se chama un ouvinte.

319
00:16:50,550 --> 00:16:54,690
Pense xeito traseira--, camiño
traseira-- a semana cero no CS50

320
00:16:54,690 --> 00:16:57,430
cando miramos para cero e
o seu apoio a través dunha andaina

321
00:16:57,430 --> 00:16:59,935
a través de cousas chamadas
eventos e transmisións.

322
00:16:59,935 --> 00:17:01,810
Pode non ter usado
Lo só, pero é

323
00:17:01,810 --> 00:17:03,900
un mecanismo polo cal un
navegador, neste caso,

324
00:17:03,900 --> 00:17:07,940
pode chamar a nosa atención cando é
realmente preparado para realizar algún código.

325
00:17:07,940 --> 00:17:12,170
Neste caso, vai escoitar
para o mapa para un evento chamado ausente.

326
00:17:12,170 --> 00:17:14,930
Isto significa que o navegador ten
rematar de cargar o mapa de Google.

327
00:17:14,930 --> 00:17:18,380
Neste punto, unha función chamada
configure debe, en última instancia

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

329
00:17:19,339 --> 00:17:22,510
Esta función, configurar
imos ver, está escrito por nós.

330
00:17:22,510 --> 00:17:24,550
>> Agora aquí é unha función
que, por desgraza,

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

332
00:17:25,871 --> 00:17:28,620
Per o spec. vai ter
para escribir o código que realmente

333
00:17:28,620 --> 00:17:32,840
engade un marker-- parécese
como un xornal ou unha tachinha,

334
00:17:32,840 --> 00:17:35,360
ou algo else-- ao mapa de Google.

335
00:17:35,360 --> 00:17:37,720
Aquí, agora, é que a función
chamado configure.

336
00:17:37,720 --> 00:17:40,390
Vou deixar para a ler
por iso con máis detalle,

337
00:17:40,390 --> 00:17:42,600
pero entendemos que engadir
Un grupo máis oíntes

338
00:17:42,600 --> 00:17:46,620
para que poidamos realizar código cando o
usuario fai clic e arrastra o mapa.

339
00:17:46,620 --> 00:17:50,730
Temos tamén o código aquí que
arrinque este plugin typeahead

340
00:17:50,730 --> 00:17:53,120
de xeito que a lista despregable
Menú realmente funciona.

341
00:17:53,120 --> 00:17:55,690
>> Pero imos concentrar en só un
nalgúns lugares aquí.

342
00:17:55,690 --> 00:17:57,590
En concreto, esta a facer aquí.

343
00:17:57,590 --> 00:18:00,410
Vou retrasar a en liña
documentación e especificación

344
00:18:00,410 --> 00:18:02,530
para saber como encher este TODO.

345
00:18:02,530 --> 00:18:05,890
Pero en poucas palabras, esta biblioteca
typeahead permite que pase

346
00:18:05,890 --> 00:18:09,790
no que é xeralmente coñecido como un modelo,
que ten uns espazos reservados variables

347
00:18:09,790 --> 00:18:13,690
moi similares ao espírito% do printf. * s.

348
00:18:13,690 --> 00:18:16,030
Pero neste caso, o
template por especificación

349
00:18:16,030 --> 00:18:18,760
permite especificar
Que variables quere

350
00:18:18,760 --> 00:18:24,880
a administración a partir de datos que está a benvida
de volta de algo así como o PHP

351
00:18:24,880 --> 00:18:29,810
arquivos que escribiu
que son emisores de saída JSON.

352
00:18:29,810 --> 00:18:35,170
>> Agora aquí entendemos que somos
escoita para as seleccións typeahead

353
00:18:35,170 --> 00:18:38,050
cando o usuario realmente conduce
a procura e selecciona un valor.

354
00:18:38,050 --> 00:18:40,270
Esta é a forma na que estamos, en realidade,
Vai escoitar para que

355
00:18:40,270 --> 00:18:42,250
e executar un código como un resultado.

356
00:18:42,250 --> 00:18:45,300
A continuación, continuar a configurar
o mashup só un pouquiño.

357
00:18:45,300 --> 00:18:48,000
E, en definitiva, a que chamamos
esta actualización función.

358
00:18:48,000 --> 00:18:49,640
El actualiza os marcadores na pantalla.

359
00:18:49,640 --> 00:18:51,529
Máis sobre isto en só un momento.

360
00:18:51,529 --> 00:18:53,570
Mentres tanto, hai algúns
pequenas funcións en aquí.

361
00:18:53,570 --> 00:18:56,820
Unha delas é que hideInfo
simplemente pecha a InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Outra función aquí, o que, en última instancia
non será por moito tempo, eliminar marcadores.

363
00:19:00,020 --> 00:19:03,580
Isto vai desfacer o que quere
súa función de marcador add fai.

364
00:19:03,580 --> 00:19:04,960
E, a continuación, para abaixo aquí é investigación.

365
00:19:04,960 --> 00:19:08,610
E iso é interesante porque nós
escribir o código JavaScript que se

366
00:19:08,610 --> 00:19:13,490
vai falar con search.php no
servidor e volver algunha resposta.

367
00:19:13,490 --> 00:19:16,110
>> Vostede, por suposto, vai aínda
Debe aplicar search.php,

368
00:19:16,110 --> 00:19:18,310
pero temos implantado o
Código JavaScript que é

369
00:19:18,310 --> 00:19:22,480
enfrontará realmente executar
Procuras de que a caixa de texto.

370
00:19:22,480 --> 00:19:25,340
En particular, o aviso previo
que esta función aquí,

371
00:19:25,340 --> 00:19:29,160
investigación, pon search.php
a través dun método chamado

372
00:19:29,160 --> 00:19:31,072
obter JSON, que vimos na charla.

373
00:19:31,072 --> 00:19:32,780
E aquí a sintaxe
é un pouco diferente

374
00:19:32,780 --> 00:19:37,110
desde charla na que estamos usando
jQuery chamado interface de promesa.

375
00:19:37,110 --> 00:19:38,479
Máis sobre iso na spec.

376
00:19:38,479 --> 00:19:40,520
Isto significa simplemente para o noso
propósitos agora que hai

377
00:19:40,520 --> 00:19:43,870
son dúas funcións especiais que
que chamar coa notación de punto

378
00:19:43,870 --> 00:19:46,230
aquí inmediatamente despois chamar obter JSON.

379
00:19:46,230 --> 00:19:47,510
Un chámase feito.

380
00:19:47,510 --> 00:19:49,870
Un chámase fallar.

381
00:19:49,870 --> 00:19:51,790
Podes pensar niso
como o manipulador de éxito

382
00:19:51,790 --> 00:19:54,960
eo manipulador de fallo só
no caso de algo vai mal.

383
00:19:54,960 --> 00:19:57,760
>> Agora imos ollar para o pasado
par de funcións neste arquivo.

384
00:19:57,760 --> 00:20:00,180
Aquí abaixo é unha función
chamado showInfo, que

385
00:20:00,180 --> 00:20:03,090
mostra a información nun deses
Información de pequenas fiestras que

386
00:20:03,090 --> 00:20:05,380
aparece cando o usuario fai clic nun marcador.

387
00:20:05,380 --> 00:20:08,470
Aquí abaixo é aínda máis
que a función de actualización

388
00:20:08,470 --> 00:20:10,510
que temos implementado para ti.

389
00:20:10,510 --> 00:20:15,250
Ela determina os límites do mapa.

390
00:20:15,250 --> 00:20:19,360
Cales son as coordenadas GPS da súa
nordeste e suroeste cantos aquí.

391
00:20:19,360 --> 00:20:22,780
Nós preparamos algúns parámetros HDP
aquí e, a continuación, pasou por eles, en última instancia

392
00:20:22,780 --> 00:20:26,160
para update.php, o que temos
tamén aplicado para ti.

393
00:20:26,160 --> 00:20:31,390
Que finalmente recibe de volta algúns JSON
a partir do ficheiro chamado update.php

394
00:20:31,390 --> 00:20:34,050
e, a continuación, elimina calquera
marcadores na pantalla

395
00:20:34,050 --> 00:20:36,650
e, a continuación, itera sobre
os datos que está de volta

396
00:20:36,650 --> 00:20:40,350
de update.php, que
novo é só unha matriz JSON.

397
00:20:40,350 --> 00:20:45,130
E, a continuación, en definitiva, engade un marcador
cada un destes lugares, tratamento de erros

398
00:20:45,130 --> 00:20:47,750
ou erros que pode moi ben ocorrer.

399
00:20:47,750 --> 00:20:51,550
>> Agora é só para lle dar un gostinho de como
pode ir sobre depuración este proxecto,

400
00:20:51,550 --> 00:20:55,420
entender que eu xa abriu en
avanzar esta guía aquí a este URL,

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

402
00:21:01,320 --> 00:21:04,050
Agora, de novo, artigos sobre
PHP Implementar para ti

403
00:21:04,050 --> 00:21:06,320
de xeito que este non é tanto
o que vai estar usando

404
00:21:06,320 --> 00:21:08,190
depurar, mais si a técnica.

405
00:21:08,190 --> 00:21:10,590
Teña en conta que eu teño procurado por
CEP de Cambridge aquí,

406
00:21:10,590 --> 00:21:15,260
e eu puiden volver, de feito, un JSON
matriz de obxectos JSON dentro do cal

407
00:21:15,260 --> 00:21:17,640
son dous conexión keys-- e título.

408
00:21:17,640 --> 00:21:19,860
>> Polo tanto, esta función
xa funciona para ti.

409
00:21:19,860 --> 00:21:24,330
Pero esta técnica de man indo
a unha URL como esta para algo así como

410
00:21:24,330 --> 00:21:31,710
search.php? geo = Cambridge ou 02138 ou
o que quere que o usuario introduciu no debe

411
00:21:31,710 --> 00:21:35,770
probar inestimable como ti, mesmo, proba
para descubrir exactamente por iso que se debe ou

412
00:21:35,770 --> 00:21:38,510
search.php funciona ou non.

413
00:21:38,510 --> 00:21:41,720
>> En definitiva, entón, ten
algúns Todos á fronte de ti.

414
00:21:41,720 --> 00:21:44,250
Vai primeiros implementos
que script de importación que

415
00:21:44,250 --> 00:21:46,520
le en us.text na súa base de datos.

416
00:21:46,520 --> 00:21:48,760
Está logo vai ter
para aplicar search.php

417
00:21:48,760 --> 00:21:51,320
de xeito que se comporta exactamente como especificado.

418
00:21:51,320 --> 00:21:54,170
Está logo vai querer
para concentrarse en scripts.js

419
00:21:54,170 --> 00:21:57,520
e, finalmente, aplica
aqueles par de Todos,

420
00:21:57,520 --> 00:21:59,950
ata para configurar
e ese modelo,

421
00:21:59,950 --> 00:22:03,220
engadir etiquetas, eliminar etiquetas, e
entón durar, pero non menos importante, unha

422
00:22:03,220 --> 00:22:04,330
toque persoal.

423
00:22:04,330 --> 00:22:07,477
>> Despois de ter o seu traballo mashup
así como o noso, a meta na man

424
00:22:07,477 --> 00:22:09,560
é para engadir un personal
tu mashup,

425
00:22:09,560 --> 00:22:11,290
se é estético ou funcional.

426
00:22:11,290 --> 00:22:13,950
Leve o mashup sempre así
lixeiramente ao seguinte nivel.

427
00:22:13,950 --> 00:22:18,330
Sempre que empurrar-se ademais
súa familiaridade coa propia especificación

428
00:22:18,330 --> 00:22:20,840
e pegar unha técnica
novo, aínda que sexa só

429
00:22:20,840 --> 00:22:25,610
algo estética como o cambio da
esquema do mapa que está a usar,

430
00:22:25,610 --> 00:22:28,070
o alcance que esperamos
Estará satisfeito.

431
00:22:28,070 --> 00:22:30,260
Iso, entón, é Problema Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Sexa conectado para máis no
especificación e boa sorte

433
00:22:33,070 --> 00:22:36,400
facer fronte a este, o seu último
Problema CS50 definir nunca.

434
00:22:36,400 --> 00:22:39,750
>> [Música tocando]

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