1
00:00:00,000 --> 00:00:03,388
>> [REPRODUCCIÓN 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
Vamos a dar un paseo a través de
Problemas de 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
que te va a desafiar a
basarían en elementos de Google Maps

6
00:00:15,880 --> 00:00:20,905
con elementos de Google Noticias y puré
juntos en un applet de web que

7
00:00:20,905 --> 00:00:24,150
permite al usuario buscar
un mapa para las noticias locales

8
00:00:24,150 --> 00:00:26,780
a ciudades específicas,
ciudades y códigos postales.

9
00:00:26,780 --> 00:00:31,040
Para ello, vamos a
integrar algo de HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript, y una técnica de
generalmente conocido como AJAX con el fin

11
00:00:34,390 --> 00:00:36,850
para crear esta inmersión
experiencia del usuario.

12
00:00:36,850 --> 00:00:38,920
>> Del primero para sí mismo Google Maps Let.

13
00:00:38,920 --> 00:00:41,220
Esto, por supuesto, es quizás
una interfaz familiar.

14
00:00:41,220 --> 00:00:45,070
Pero resulta que Google Maps
también proporciona una aplicación API--

15
00:00:45,070 --> 00:00:48,360
interface-- programación a través del cual
usted puede tomar elementos de Google Maps

16
00:00:48,360 --> 00:00:50,740
e integrarlas en
sus propias aplicaciones.

17
00:00:50,740 --> 00:00:52,650
De hecho, durante todo este
proceso, vas

18
00:00:52,650 --> 00:00:55,140
encontrar un par de direcciones URL
particularmente útil que

19
00:00:55,140 --> 00:00:57,820
se mencionan en el
especificación para Problemas de 8,

20
00:00:57,820 --> 00:01:00,980
específicamente este Getting Started
Guía o la Guía del desarrollador

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

22
00:01:07,640 --> 00:01:10,260
referencia v3, que es una
poco más arcano de leer

23
00:01:10,260 --> 00:01:14,600
pero en realidad tiene todo el nivel inferior
detalles acerca de qué funciones o métodos

24
00:01:14,600 --> 00:01:18,220
y objetos y propiedades y
eventos en realidad vienen con la API,

25
00:01:18,220 --> 00:01:20,720
muy similar en espíritu
a [inaudible] páginas.

26
00:01:20,720 --> 00:01:23,480
>> Ahora bien, si echamos un vistazo
en Google Noticias, podrás

27
00:01:23,480 --> 00:01:25,370
tal vez ver una interfaz familiar aquí.

28
00:01:25,370 --> 00:01:29,350
Pero resulta que también puede buscar
Google Noticias para geografías específicas

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

30
00:01:32,000 --> 00:01:35,100
De hecho, si puedo ampliar
hasta aquí, verás que

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

32
00:01:41,672 --> 00:01:43,630
Y, de hecho, si el zoom
fuera, verás que soy

33
00:01:43,630 --> 00:01:47,090
mirando a una página con un montón de
opiniones acerca de Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Mientras tanto, si realmente cambiar el
URL no sea un código postal como esta,

35
00:01:50,620 --> 00:01:55,580
pero algo un poco más desordenado
como Cambridge, Massachusetts +,

36
00:01:55,580 --> 00:02:00,740
donde la ventaja es la manera de codificar un
carácter de espacio en una dirección URL y pulse Enter,

37
00:02:00,740 --> 00:02:02,907
verás que en realidad
ver casi las mismas noticias.

38
00:02:02,907 --> 00:02:05,489
Tal vez es un poco diferente
porque en realidad Cambridge

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

40
00:02:06,910 --> 00:02:09,410
Ahora, ¿cómo iba yo a saber que y,
de hecho, ¿cómo podría yo de alguna manera

41
00:02:09,410 --> 00:02:12,940
atar ciudades y pueblos
a los códigos postales en caso de que

42
00:02:12,940 --> 00:02:15,064
desee permitir al usuario
para buscar cualquiera?

43
00:02:15,064 --> 00:02:17,480
Bueno, resulta que hay
un sitio web por ahí llama

44
00:02:17,480 --> 00:02:20,060
geonames.org que es
una iniciativa para tener

45
00:02:20,060 --> 00:02:23,760
una base de datos de libre acceso de todos
tipo de información geográfica,

46
00:02:23,760 --> 00:02:27,040
no sólo para los EE.UU., sino también
para otros países también.

47
00:02:27,040 --> 00:02:30,430
De hecho, si voy a esta URL aquí, que
También se menciona en el conjunto de problemas

48
00:02:30,430 --> 00:02:34,510
especificación, usted verá que tres
lista de un montón de archivos zip

49
00:02:34,510 --> 00:02:36,400
cualquiera de los cuales puede ser descargado por usted.

50
00:02:36,400 --> 00:02:39,900
De hecho, para este conjunto de problemas
vas a descargar us.zip.

51
00:02:39,900 --> 00:02:43,790
Ahora dentro de este archivo, es un todo
montón de datos en formato de texto.

52
00:02:43,790 --> 00:02:47,760
Los archivos es muy similar a una
CSV-- Valores separados por comas file--

53
00:02:47,760 --> 00:02:51,294
pero utiliza realmente
pestañas para delimitar campos.

54
00:02:51,294 --> 00:02:53,710
Ahora, por su parte, si nos fijamos
aquí, en lo que yo he destacado,

55
00:02:53,710 --> 00:02:56,459
los campos de este archivo se van
a ser cosas como los códigos de país,

56
00:02:56,459 --> 00:02:58,980
códigos postales, nombres de lugares,
y luego, en alguna forma

57
00:02:58,980 --> 00:03:04,230
u otros, los estados y condados,
comunidades, y más.

58
00:03:04,230 --> 00:03:06,630
De hecho, ya he
descargado este archivo por adelantado.

59
00:03:06,630 --> 00:03:09,750
Déjame ir por delante y lo abro aquí--
us.text-- y, de hecho, se le

60
00:03:09,750 --> 00:03:16,660
ver si me desplazo hasta la línea 16792
verás algunos registros de Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts y sus distintos códigos postales.

62
00:03:19,120 --> 00:03:22,150
Lo que también se ve allí es el condado,
algunos números que yo realmente no

63
00:03:22,150 --> 00:03:24,500
entender, sino también todos
el camino de la derecha,

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

65
00:03:27,170 --> 00:03:30,440
Esto es muy bueno porque uno de
las características de la API de Google Maps

66
00:03:30,440 --> 00:03:33,670
es la capacidad de detectar
dónde se encuentra geográficamente

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

68
00:03:36,850 --> 00:03:40,210
>> Ahora vamos a empezar a encontrar la manera de
empezar a atar estas cosas juntas.

69
00:03:40,210 --> 00:03:42,900
Les hemos dado un todo
manojo de código de distribución,

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

71
00:03:44,970 --> 00:03:49,100
De hecho, si me tire un phpMyAdmin tener
previamente importados, como pronto lo sabrá,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, verás una tabla de MySQL que
se parece a esto, un campo de ID, país

73
00:03:54,800 --> 00:03:57,400
código, código postal, nombre del lugar y más.

74
00:03:57,400 --> 00:04:00,490
Los tipos de todos aquellos
columnas que derivan simplemente

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

76
00:04:03,870 --> 00:04:07,330
si un campo es un número entero,
o varchar o similares.

77
00:04:07,330 --> 00:04:10,510
>> Para ello hemos creado esa mesa para
y te dan los comandos SQL

78
00:04:10,510 --> 00:04:12,770
ejecutar para crear ese
tabla en su propia base de datos,

79
00:04:12,770 --> 00:04:15,290
pero hay en realidad no existen datos en ello todavía.

80
00:04:15,290 --> 00:04:19,600
Por el contrario, vas a tener que
descargar us.zip o postal de cualquier país

81
00:04:19,600 --> 00:04:21,500
presentar de esa URL allí.

82
00:04:21,500 --> 00:04:24,940
Y entonces vas a tener que escribir
un script de línea de comandos en PHP que es

83
00:04:24,940 --> 00:04:28,420
va a abrir ese texto
presentar, iterar sobre sus líneas,

84
00:04:28,420 --> 00:04:31,180
y luego para cada uno de
esas líneas hacen un inserto

85
00:04:31,180 --> 00:04:34,940
en que los lugares mesa
en su base de datos MySQL.

86
00:04:34,940 --> 00:04:37,880
Así que al final de este proceso, se le
han corrido esa secuencia de comandos en última instancia,

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

88
00:04:39,610 --> 00:04:41,780
En realidad probablemente te
ejecutarlo un montón de veces

89
00:04:41,780 --> 00:04:45,460
al tratar de arreglar varios bugs.

90
00:04:45,460 --> 00:04:48,440
>> En última instancia, usted va a tener un
realmente grande base de datos con miles

91
00:04:48,440 --> 00:04:50,139
y miles de filas geográficas.

92
00:04:50,139 --> 00:04:52,930
Luego te vas a poner esa importación
guión a un lado una vez que está funcionando

93
00:04:52,930 --> 00:04:55,140
y su base de datos es agradable
y correcta, y luego

94
00:04:55,140 --> 00:04:58,880
vas a pasar a realidad
la aplicación de la misma mashup.

95
00:04:58,880 --> 00:05:01,670
El mashup se va a ver
un poco de algo como esto.

96
00:05:01,670 --> 00:05:05,165
En mashup.cs50.net, nos
tener una solución personal

97
00:05:05,165 --> 00:05:06,990
que se ve un poco de algo como esto.

98
00:05:06,990 --> 00:05:11,070
De hecho, si hago clic en este diario
icono de Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
verás un hilado
icono brevemente y después

100
00:05:13,300 --> 00:05:16,370
una lista ordenada, una
lista con viñetas de artículos

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

102
00:05:18,280 --> 00:05:20,352
Si hago clic en Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Voy a ver el mismo para aquella ciudad.

104
00:05:21,685 --> 00:05:24,174
Y si hago clic en
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
puede que no haya ninguna
noticias de de Watertown,

106
00:05:26,090 --> 00:05:28,630
por lo que verá algo
como el día de pocas noticias.

107
00:05:28,630 --> 00:05:32,140
>> Ahora, por su parte, en la parte superior izquierda son
algunos familiares controles de Google Maps

108
00:05:32,140 --> 00:05:34,980
dejar que se aleja, cacerola
arriba, abajo, izquierda y derecha,

109
00:05:34,980 --> 00:05:37,360
sino también un cuadro de búsqueda que ponemos allí.

110
00:05:37,360 --> 00:05:40,910
Así que si yo busco, francamente,
el único otro código postal sé,

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

112
00:05:45,020 --> 00:05:48,550
Al hacer clic en ella me lleva a
California y un manojo entero

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

114
00:05:50,369 --> 00:05:51,910
Ahora note, también, lo que pasó allí.

115
00:05:51,910 --> 00:05:57,040
Si esta búsqueda de tiempo para 02.138 o incluso
Cambridge Massachusetts coma o algún

116
00:05:57,040 --> 00:06:00,300
variante de la misma, se obtiene una
poco desplegable autocompletar.

117
00:06:00,300 --> 00:06:03,840
Ahora esto es usar un plugin
para una biblioteca llamada jQuery,

118
00:06:03,840 --> 00:06:05,732
y ese plugin se llama typeahead.

119
00:06:05,732 --> 00:06:07,440
Simplemente lee a través de
la documentación,

120
00:06:07,440 --> 00:06:13,150
descargado archivos integrado los .js
en el código de distribución de modo que usted

121
00:06:13,150 --> 00:06:16,900
en última instancia, pueden escribir el código que
llena ese menú desplegable con el auto

122
00:06:16,900 --> 00:06:19,350
selecciones o las sugerencias de automóviles.

123
00:06:19,350 --> 00:06:23,820
>> Ahora el código de distribución, sin embargo, que
usted recibió no hace casi tanto.

124
00:06:23,820 --> 00:06:26,860
Usted consigue el Google Map incrustado, y
a obtener los controles de la parte superior izquierda,

125
00:06:26,860 --> 00:06:28,240
y se obtiene el cuadro de búsqueda.

126
00:06:28,240 --> 00:06:32,760
Pero si escribo algo como
02138, no hay lugares se encuentran todavía.

127
00:06:32,760 --> 00:06:34,730
Así que va a ser
uno de nuestros objetivos aquí.

128
00:06:34,730 --> 00:06:37,430
Además, si usted toma un paso
atrás y mirar el mapa en sí,

129
00:06:37,430 --> 00:06:38,950
no hay noticia alguna.

130
00:06:38,950 --> 00:06:41,780
Incluso si hago clic y
arrastre, no hay marcadores realidad

131
00:06:41,780 --> 00:06:45,560
aparecerá para las noticias porque eso
desafío se deja para usted también.

132
00:06:45,560 --> 00:06:48,490
>> Echemos un vistazo a continuación,
en el código de distribución.

133
00:06:48,490 --> 00:06:51,460
Una vez que haya descargado
pset8.zip y abrió la cremallera

134
00:06:51,460 --> 00:06:54,430
en el directorio de host virtual
en el CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
verás estos
directorios aquí dentro.

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

137
00:07:00,200 --> 00:07:04,870
incluye, como en pset7, algo de PHP
archivos que otros archivos incluyen,

138
00:07:04,870 --> 00:07:06,710
entonces público, que es
los archivos que necesitan

139
00:07:06,710 --> 00:07:09,369
para ser accesible públicamente
a un usuario con un navegador.

140
00:07:09,369 --> 00:07:11,410
Vamos a echar un vistazo en el
bin, y vamos a

141
00:07:11,410 --> 00:07:13,890
ver que hay un archivo
ya llamaban Importar.

142
00:07:13,890 --> 00:07:17,591
Si abrimos esta con gedit, ya veremos
que, por desgracia, no hay mucho

143
00:07:17,591 --> 00:07:18,090
ya está.

144
00:07:18,090 --> 00:07:20,250
Todo lo que está ahí, sin embargo,
es un tinglado en la parte superior

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

146
00:07:23,410 --> 00:07:25,759
debe ser utilizado para realmente
ejecutar este archivo.

147
00:07:25,759 --> 00:07:27,550
Pero entonces donde dice
TODO es donde estás

148
00:07:27,550 --> 00:07:31,130
va a tener que escribir código
que probablemente requiere la config

149
00:07:31,130 --> 00:07:35,820
archivo que está en el directorio includes
como lo hemos hecho antes con archivos PHP.

150
00:07:35,820 --> 00:07:38,180
Y luego vas a
tiene que abrir algún modo

151
00:07:38,180 --> 00:07:41,920
us.text que presumiblemente
ya han descomprimido.

152
00:07:41,920 --> 00:07:44,690
Entonces vas a tener que
iterar sobre las líneas en el archivo,

153
00:07:44,690 --> 00:07:47,800
tal vez utilizando algunas de las funciones
sugerido en la especificación.

154
00:07:47,800 --> 00:07:51,390
A continuación, inserte cada uno de los
líneas en la base de datos MySQL

155
00:07:51,390 --> 00:07:54,940
mediante el uso de la función de consulta, que
hemos de nuevo le proporcionamos con--

156
00:07:54,940 --> 00:07:58,010
o al menos una variante
del mismo en functions.php,

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

158
00:07:59,560 --> 00:08:04,430
>> Ahora vamos a cerrar la importación y volver a
nuestro directorio y esta vez entrar en

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

160
00:08:05,300 --> 00:08:09,210
Y si lo hago ls allí, verás
tres archivos bastante como de problemas 7.

161
00:08:09,210 --> 00:08:13,760
Y vamos a echar un vistazo rápido,
Por ejemplo, en config.php.

162
00:08:13,760 --> 00:08:16,730
Allí, es menos líneas
que antes, y se

163
00:08:16,730 --> 00:08:20,712
Parece que este archivo incluye
constants.php y functions.php.

164
00:08:20,712 --> 00:08:23,670
Estamos usando un poco diferente
técnica en esta ocasión para realmente

165
00:08:23,670 --> 00:08:30,910
especifican que estos archivos son relativos
al directorio actual __ DIR__

166
00:08:30,910 --> 00:08:35,280
representa el directorio que este
archivo, config.php, es en sí mismo en.

167
00:08:35,280 --> 00:08:37,600
Así que esta es una más
manera explícita de la especificación

168
00:08:37,600 --> 00:08:40,100
¿qué otros archivos que desea exigir.

169
00:08:40,100 --> 00:08:44,020
>> Ahora si cierro este archivo y
abrir constants.php lugar,

170
00:08:44,020 --> 00:08:47,430
verás un archivo muy reminiscente
para de así, aunque de problemas 7

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

172
00:08:50,050 --> 00:08:54,020
Finalmente, en functions.php,
vamos a ver sólo una función

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

174
00:08:55,942 --> 00:08:59,150
Esto es casi el mismo, salvo que manejamos
errores en esta ocasión un poco

175
00:08:59,150 --> 00:09:02,860
de manera diferente, pero es de uso es
lo mismo que en el problema conjunto de siete.

176
00:09:02,860 --> 00:09:08,090
>> Ahora vamos a volver a nuestro pset8
directorio, entra en público, y allí

177
00:09:08,090 --> 00:09:14,420
si lo hago ls, verá esto--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
y update.php-- todos los archivos.

179
00:09:16,940 --> 00:09:22,010
Y entonces la fuentes css, img, y
directorio js gusta bastante pset7.

180
00:09:22,010 --> 00:09:24,660
>> Echemos un vistazo a
index.html, que es

181
00:09:24,660 --> 00:09:27,290
va a ser realmente el
punto de entrada a la Smashup.

182
00:09:27,290 --> 00:09:31,820
Ahora en index.html, verás un todo
montón de elementos de enlace en la cabeza,

183
00:09:31,820 --> 00:09:36,540
específicamente, para arranque para nuestro propio
CSS seguido por un montón de escritura

184
00:09:36,540 --> 00:09:41,520
etiquetas para cosas como los mapas, API
en sí, un marcador especial con etiqueta

185
00:09:41,520 --> 00:09:44,950
utilidad que hemos mencionado en el
especificación está disponible para usted,

186
00:09:44,950 --> 00:09:48,420
sí jQuery, bootstrap
sí mismo, y otra biblioteca

187
00:09:48,420 --> 00:09:50,990
llamado subrayado que
hablamos en la especificación.

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

189
00:09:57,031 --> 00:10:00,280
que tiene un montón de funcionalidad
que un montón de gente en el mundo desean

190
00:10:00,280 --> 00:10:02,020
existido en sí misma JavaScript.

191
00:10:02,020 --> 00:10:04,560
Así que todos estos son
en realidad bastante popular.

192
00:10:04,560 --> 00:10:07,140
También hemos mencionado typeahead
que es la biblioteca que

193
00:10:07,140 --> 00:10:11,180
hace que desplegable autocompletar y
por último, un enlace a nuestro propio JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Mientras tanto, y tal vez
por suerte, este mashup

195
00:10:13,880 --> 00:10:17,550
es impulsado por relativamente poco
HTML aquí abajo en la parte inferior.

196
00:10:17,550 --> 00:10:22,330
Tenga en cuenta que hemos especificado un div en
nuestro cuerpo de fluido clase contenedor.

197
00:10:22,330 --> 00:10:24,610
Esto, de por arranque
documentación, sólo

198
00:10:24,610 --> 00:10:29,840
significa que este div va a llenar el
viewport o ventana completamente del navegador.

199
00:10:29,840 --> 00:10:33,020
>> Mientras tanto, por debajo de que tenemos un div
eso se abrieron y cerraron inmediatamente

200
00:10:33,020 --> 00:10:34,790
con el ID exclusivo del mapa lienzo.

201
00:10:34,790 --> 00:10:37,400
Esto ahora es de Google
Documentación Mapas

202
00:10:37,400 --> 00:10:42,490
por su API, por el cual yo simplemente necesito
tener un div vacío en el que inyectar,

203
00:10:42,490 --> 00:10:44,470
en última instancia, un real de Google Maps.

204
00:10:44,470 --> 00:10:46,310
Pero más de eso en sólo un poco.

205
00:10:46,310 --> 00:10:48,850
>> Por último, hay una forma
dentro de la cual aquí

206
00:10:48,850 --> 00:10:52,930
implementa el cuadro de texto hasta la parte superior izquierda
en nuestra interfaz de búsqueda.

207
00:10:52,930 --> 00:10:54,730
Tenga en cuenta que hemos utilizado
un poco de arranque

208
00:10:54,730 --> 00:10:57,670
aquí también-- cosas como
forma-inline, ceñida al grupo.

209
00:10:57,670 --> 00:11:00,080
Hemos dado a la antigua
ID única de la forma.

210
00:11:00,080 --> 00:11:04,510
Y luego, en última instancia, en realidad tengo
un tipo de entrada, que es bastante familiar,

211
00:11:04,510 --> 00:11:06,440
cuyo ID es q.

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

213
00:11:07,230 --> 00:11:09,234
Q para query-- podría tener
ha llamado nada.

214
00:11:09,234 --> 00:11:11,400
Y entonces el marcador de posición,
por su parte, es la ciudad, estado,

215
00:11:11,400 --> 00:11:16,200
y el código postal que se puede recordar
viendo en nuestra mashup de demostración antes.

216
00:11:16,200 --> 00:11:17,980
Vamos a cerrar este archivo.

217
00:11:17,980 --> 00:11:24,460
>> Ahora echa un vistazo a los archivos PHP que
esperar y luego los archivos JavaScript.

218
00:11:24,460 --> 00:11:27,700
En nuestros archivos PHP, tenemos
ya implementado para usted,

219
00:11:27,700 --> 00:11:29,960
por ejemplo, las actualizaciones.

220
00:11:29,960 --> 00:11:35,060
Update.php-- no vamos a gastar una enorme
cantidad de tiempo en aquí-- en pocas palabras

221
00:11:35,060 --> 00:11:38,400
es el archivo que nuestra
Código JavaScript se va

222
00:11:38,400 --> 00:11:41,610
ponerse en contacto a través de AJAX que
técnica asíncrona que es

223
00:11:41,610 --> 00:11:45,980
incorporado en JavaScript estos días que es
vamos a permitir que nos preguntemos update.php

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

225
00:11:47,410 --> 00:11:50,045
>> En concreto, en cualquier momento
el usuario arrastra el mapa

226
00:11:50,045 --> 00:11:53,310
o realiza una búsqueda que salta
al usuario a otra ubicación,

227
00:11:53,310 --> 00:11:55,250
nuestro código JavaScript
como pronto veremos, es

228
00:11:55,250 --> 00:11:59,610
va a llamar update.php
y pedir 10 o más marcadores

229
00:11:59,610 --> 00:12:02,630
dentro de la ventana gráfica basada
en las coordenadas GPS

230
00:12:02,630 --> 00:12:06,510
de la parte superior e inferior
esquinas de ese mapa.

231
00:12:06,510 --> 00:12:10,520
Entonces podemos repoblar el mapa ahora que
el usuario ha movido la pantalla con el fin

232
00:12:10,520 --> 00:12:14,210
ver 10 probablemente nueva
marcadores de diferentes ciudades.

233
00:12:14,210 --> 00:12:18,340
Mientras tanto, este archivo es en última instancia,
va a ejecutar una consulta SQL

234
00:12:18,340 --> 00:12:21,680
en contra de nuestra base de datos
tabla llamada lugares que

235
00:12:21,680 --> 00:12:26,380
va a devolver los
10 o menos lugares.

236
00:12:26,380 --> 00:12:32,620
>> Mientras tanto, en articles.php, es otra
archivamos que hemos escrito en su totalidad.

237
00:12:32,620 --> 00:12:35,820
Es muy similar en espíritu a
Función BUSCAR de Problemas de 7,

238
00:12:35,820 --> 00:12:39,450
que contactarse Yahoo Finanzas para usted.

239
00:12:39,450 --> 00:12:43,710
Este archivo contactos de Google Noticias
para usted, en última instancia, el acaparamiento

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

241
00:12:46,050 --> 00:12:49,720
llamada RSS format-- de las noticias
para Cambridge o Beverly Hills

242
00:12:49,720 --> 00:12:52,880
o lo que sea la ciudad que has buscado
para en base a que geoparámetros.

243
00:12:52,880 --> 00:12:57,250
Que se analizan los que RSS, que es sólo una
tipo de lenguaje llamado XML,

244
00:12:57,250 --> 00:13:00,740
y luego en realidad
devolverlo a su navegador

245
00:13:00,740 --> 00:13:03,570
y al código JavaScript,
En concreto, en un formato llamado

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

247
00:13:06,097 --> 00:13:08,180
Ahora verás en la
specification-- señalamos que

248
00:13:08,180 --> 00:13:10,720
la forma en que usted puede ver realmente
algunos de los posterior-- venida JSON

249
00:13:10,720 --> 00:13:15,210
que esta funcionalidad en última instancia
le permite rellenar los menús emergentes de modo

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

251
00:13:16,960 --> 00:13:19,430
que vea en realidad un montón
de balas, cada uno de los cuales

252
00:13:19,430 --> 00:13:21,020
enlaces a un artículo.

253
00:13:21,020 --> 00:13:25,000
>> Ahora echemos un vistazo a una última
Archivo PHP que, afortunadamente, no lo hace

254
00:13:25,000 --> 00:13:27,970
mucho tener ir en--
sólo un bastante grande TODO.

255
00:13:27,970 --> 00:13:32,170
Ahora mismo este archivo declara
un array llamado lugares.

256
00:13:32,170 --> 00:13:35,980
Y en última instancia impresiones
esa matriz en JSON format--

257
00:13:35,980 --> 00:13:38,720
bastante-imprimirlo sólo para que
las cosas son más fáciles de depurar.

258
00:13:38,720 --> 00:13:41,480
Desafortunadamente, en el
medio hay este TODO,

259
00:13:41,480 --> 00:13:46,890
que pide que usted busque la
base de datos de lugares que coinciden con un geo HTTP

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

261
00:13:47,490 --> 00:13:49,865
>> Y, de hecho, esto va a
ser uno de su challenges--

262
00:13:49,865 --> 00:13:54,240
para implementar esta funcionalidad aquí
de manera que cuando se comunique con este archivo con

263
00:13:54,240 --> 00:14:00,610
una URL como la búsqueda. php? geo = algo,
su código en última instancia, devolver un JSON

264
00:14:00,610 --> 00:14:05,020
conjunto de todos los lugares en su
tabla de base de datos que coincidan con esa entrada.

265
00:14:05,020 --> 00:14:08,960
Así que si el usuario escribe en Cambridge,
su archivo aquí search.php

266
00:14:08,960 --> 00:14:12,680
en última instancia, debe devolver una matriz JSON
para todos los partidos de Cambridge,

267
00:14:12,680 --> 00:14:16,990
lo que podría ser en Massachusetts
pero podría ser incluso cualquier otro lugar.

268
00:14:16,990 --> 00:14:21,040
>> Por último, vamos a echar un vistazo a dos
archivos que son ultimately-- estática

269
00:14:21,040 --> 00:14:23,680
su archivo CSS y su archivo JavaScript.

270
00:14:23,680 --> 00:14:26,779
Si entro en nuestro directorio CSS,
hay un montón de archivos allí,

271
00:14:26,779 --> 00:14:28,070
pero la mayoría de ellos son las bibliotecas.

272
00:14:28,070 --> 00:14:31,530
Voy a echar un vistazo,
específicamente, en styles.css,

273
00:14:31,530 --> 00:14:35,440
que es nuestro propio CSS global que es
va a estilizar todo este mashup.

274
00:14:35,440 --> 00:14:38,840
Lo dejo para que lea
los comentarios en este documento, pero, en pocas palabras,

275
00:14:38,840 --> 00:14:43,490
este es el CSS que asegura que nuestro
mashup, por defecto fuera de la caja,

276
00:14:43,490 --> 00:14:46,950
se ve exactamente como queremos it--
con el mapa de llenar el puerto vista

277
00:14:46,950 --> 00:14:49,720
y con la búsqueda
caja en la parte superior izquierda.

278
00:14:49,720 --> 00:14:52,870
También nos hemos tomado la libertad de
estilizando que desplegable typeahead

279
00:14:52,870 --> 00:14:55,170
menú un poco también.

280
00:14:55,170 --> 00:14:58,030
>> El archivo más importante
tal vez por este conjunto de problemas

281
00:14:58,030 --> 00:15:01,070
es este último, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Dentro de su directorio JS
es aún más archivos.

283
00:15:03,800 --> 00:15:08,090
Todos ellos son archivos de la biblioteca
a excepción de éste, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Si abrimos esto, vamos a tomar nuestro
última gira a través de las funciones que

285
00:15:11,460 --> 00:15:13,820
están incorporados en este archivo
para usted y para llamar la atención

286
00:15:13,820 --> 00:15:16,200
a los TODOs que se avecinan.

287
00:15:16,200 --> 00:15:19,110
>> En la parte superior de este archivo,
son tres variables globales.

288
00:15:19,110 --> 00:15:22,910
Uno para un mapa, que se va a
ser una referencia en nuestro mapa de Google.

289
00:15:22,910 --> 00:15:25,510
Usted puede pensar en él
tipo de como un puntero.

290
00:15:25,510 --> 00:15:27,710
Mientras tanto, tenemos
otra variable global

291
00:15:27,710 --> 00:15:31,500
llamado info, que parece ser
almacenar el valor de retorno de una llamada

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

293
00:15:34,170 --> 00:15:37,835
JavaScript soporta objetos que
son muy similares en espíritu a Struts.

294
00:15:37,835 --> 00:15:40,250
Y lo que esta línea para
nuestros propósitos está haciendo

295
00:15:40,250 --> 00:15:42,820
es la creación de una nueva información
ventana en la memoria y luego

296
00:15:42,820 --> 00:15:46,330
mantener torno a una referencia
al mismo en una variable llamada Info.

297
00:15:46,330 --> 00:15:48,330
Y entre aquellos,
por su parte, es lo que parece

298
00:15:48,330 --> 00:15:51,060
ser un JavaScript vacío
array llamado marcadores.

299
00:15:51,060 --> 00:15:55,392
Todos los iconos de periódicos, o
podría elegir otro icono conjunto,

300
00:15:55,392 --> 00:15:57,350
van a ser almacenados
en última instancia, en esta matriz

301
00:15:57,350 --> 00:16:01,570
para que podamos añadir muy fácilmente a
el mapa y eliminarlas del mapa.

302
00:16:01,570 --> 00:16:03,990
>> Ahora vamos a desplazarse hacia abajo
un poco y genio

303
00:16:03,990 --> 00:16:07,690
a través del código que va a ser
ejecutada tan pronto como el DOM o documento

304
00:16:07,690 --> 00:16:10,480
modelo de objetos o la
página en sí está listo.

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

306
00:16:12,942 --> 00:16:14,900
que el código siguiente
debe ser ejecutada sólo

307
00:16:14,900 --> 00:16:17,840
cuando el navegador ha terminado
cargar todo lo demás.

308
00:16:17,840 --> 00:16:19,750
>> En primer lugar, declaramos una
toda montón de estilos,

309
00:16:19,750 --> 00:16:22,410
que terminan estilización
el mapa como por la especificación.

310
00:16:22,410 --> 00:16:24,790
Entonces Declaramos un
toda montón de opciones,

311
00:16:24,790 --> 00:16:28,630
que personalizar aún más el Google
mapa que estamos a punto de empotrar.

312
00:16:28,630 --> 00:16:32,090
A continuación, utilizamos un poco de código jQuery,
que se explica en detalle un poco más

313
00:16:32,090 --> 00:16:35,000
en la especificación, para agarrar
ese elemento, mapa-lona

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

315
00:16:36,980 --> 00:16:40,640
Y luego esta línea aquí es
lo que parece mágicamente nos dan

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

317
00:16:43,560 --> 00:16:47,020
almacenar una referencia a la misma
en esa variable llamada mapa.

318
00:16:47,020 --> 00:16:50,550
>> Por último, aquí se registra
lo que se llama un oyente.

319
00:16:50,550 --> 00:16:54,690
Piense forma parte posterior--, camino
posterior-- a la semana cero en CS50

320
00:16:54,690 --> 00:16:57,430
cuando miramos los arañazos y
su apoyo a través de un paseo

321
00:16:57,430 --> 00:16:59,935
a través de cosas llamadas
eventos y transmisiones.

322
00:16:59,935 --> 00:17:01,810
Es posible que no haya utilizado
usted mismo, pero es

323
00:17:01,810 --> 00:17:03,900
un mecanismo por el que una
navegador en este caso

324
00:17:03,900 --> 00:17:07,940
puede llamar nuestra atención cuando es
listo para ejecutar en realidad algo de código.

325
00:17:07,940 --> 00:17:12,170
En este caso, se va a escuchar
al mapa de un evento llamado inactivo.

326
00:17:12,170 --> 00:17:14,930
Esto significa que el navegador tiene
terminado de cargar el mapa de Google.

327
00:17:14,930 --> 00:17:18,380
En este punto una función llamada
configure debería en última instancia,

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

329
00:17:19,339 --> 00:17:22,510
Esa función, configurar,
vamos a ver, está escrito por nosotros.

330
00:17:22,510 --> 00:17:24,550
>> Ahora aquí es una función
que, por desgracia,

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

332
00:17:25,871 --> 00:17:28,620
Por la especificación. usted va a necesitar
para escribir el código que realmente

333
00:17:28,620 --> 00:17:32,840
añade un marker-- si parece
como un periódico o una tachuela,

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

335
00:17:35,360 --> 00:17:37,720
Aquí ahora es que la función
llamado configure.

336
00:17:37,720 --> 00:17:40,390
Lo dejo a usted a leer
a través de esto con más detalle,

337
00:17:40,390 --> 00:17:42,600
pero damos cuenta de que añadimos
un montón más oyentes

338
00:17:42,600 --> 00:17:46,620
para que podamos ejecutar código cuando el
usuario hace clic en y arrastra el mapa.

339
00:17:46,620 --> 00:17:50,730
También tenemos código aquí que
inicializa ese plugin typeahead

340
00:17:50,730 --> 00:17:53,120
para que en el menú desplegable
menú realmente funciona.

341
00:17:53,120 --> 00:17:55,690
>> Pero vamos a centrarnos en sólo un
par de lugares en este documento.

342
00:17:55,690 --> 00:17:57,590
En concreto, esto que ver aquí.

343
00:17:57,590 --> 00:18:00,410
Te remito a la línea
documentación y la especificación

344
00:18:00,410 --> 00:18:02,530
de cómo rellenar este TODO.

345
00:18:02,530 --> 00:18:05,890
Pero en pocas palabras, esta biblioteca
typeahead le permite pasar

346
00:18:05,890 --> 00:18:09,790
en lo que se conoce generalmente como una plantilla,
que tiene unos marcadores de posición variables

347
00:18:09,790 --> 00:18:13,690
muy similares en espíritu a% de printf. * s.

348
00:18:13,690 --> 00:18:16,030
Pero en este caso, la
plantilla por la especificación

349
00:18:16,030 --> 00:18:18,760
permite especificar
qué variables desea

350
00:18:18,760 --> 00:18:24,880
para inyectar a partir de datos que se vienen
detrás de algo así como el PHP

351
00:18:24,880 --> 00:18:29,810
archivos que has escrito
que están emitiendo salida JSON.

352
00:18:29,810 --> 00:18:35,170
>> Ahora aquí damos cuenta de que somos
la escucha de selecciones TYPEAHEAD

353
00:18:35,170 --> 00:18:38,050
cuando el usuario lleva a cabo realmente
una búsqueda y selecciona un valor.

354
00:18:38,050 --> 00:18:40,270
Así es como en realidad somos
va a escuchar para que

355
00:18:40,270 --> 00:18:42,250
y ejecutar algún código como resultado.

356
00:18:42,250 --> 00:18:45,300
Luego continuamos configurar
el mashup sólo un poco.

357
00:18:45,300 --> 00:18:48,000
Y, en última instancia, que llamamos
esta actualización función.

358
00:18:48,000 --> 00:18:49,640
Actualiza los marcadores en la pantalla.

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

360
00:18:51,529 --> 00:18:53,570
Mientras tanto, hay algunos
pequeñas funciones en aquí.

361
00:18:53,570 --> 00:18:56,820
Una de ellas es que hideInfo
simplemente cierra la ventana de información.

362
00:18:56,820 --> 00:19:00,020
Otra función aquí, que en última instancia
no será demasiado largo, quitar marcadores.

363
00:19:00,020 --> 00:19:03,580
Eso va a deshacer lo que sea
su función de marcador add hace.

364
00:19:03,580 --> 00:19:04,960
Y entonces aquí es la búsqueda.

365
00:19:04,960 --> 00:19:08,610
Y éste es interesante porque nos
haber escrito el código JavaScript que es

366
00:19:08,610 --> 00:19:13,490
va a hablar con search.php en el
servidor y volver alguna respuesta.

367
00:19:13,490 --> 00:19:16,110
>> Usted, por supuesto, seguirá
necesitará implementar search.php,

368
00:19:16,110 --> 00:19:18,310
pero hemos implementado el
Código JavaScript que es

369
00:19:18,310 --> 00:19:22,480
va a manejar en realidad llevar a cabo
Búsqueda desde ese cuadro de texto.

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

371
00:19:25,340 --> 00:19:29,160
búsqueda, no llame search.php
por un método llamado

372
00:19:29,160 --> 00:19:31,072
obtener JSON, que vimos en clase.

373
00:19:31,072 --> 00:19:32,780
Y la sintaxis aquí
es un poco diferente

374
00:19:32,780 --> 00:19:37,110
de conferencia en la que estamos usando
jQuery la llamada interfaz promesa.

375
00:19:37,110 --> 00:19:38,479
Más sobre esto en la especificación.

376
00:19:38,479 --> 00:19:40,520
Esto simplemente significa para nuestra
propósitos ahora que hay

377
00:19:40,520 --> 00:19:43,870
son dos funciones especiales que
necesita llamar con la notación de punto

378
00:19:43,870 --> 00:19:46,230
aquí inmediatamente después de llamar a conseguir JSON.

379
00:19:46,230 --> 00:19:47,510
Uno se llama hacer.

380
00:19:47,510 --> 00:19:49,870
Uno se llama fallan.

381
00:19:49,870 --> 00:19:51,790
Usted puede pensar en estos
como el controlador de éxito

382
00:19:51,790 --> 00:19:54,960
y el manejador de fallos sólo
en caso de que algo va mal.

383
00:19:54,960 --> 00:19:57,760
>> Ahora echemos un vistazo a la última
par de funciones en este archivo.

384
00:19:57,760 --> 00:20:00,180
Aquí abajo es una función
llamado showInfo, que

385
00:20:00,180 --> 00:20:03,090
muestra información en uno de los
info pequeñas ventanas que

386
00:20:03,090 --> 00:20:05,380
aparece cuando el usuario hace clic en un marcador.

387
00:20:05,380 --> 00:20:08,470
Aquí abajo adicional es
que la función de actualización

388
00:20:08,470 --> 00:20:10,510
que hemos implementado para usted.

389
00:20:10,510 --> 00:20:15,250
Se determina los límites del mapa.

390
00:20:15,250 --> 00:20:19,360
¿Cuáles son las coordenadas GPS de su
esquinas noreste y suroeste de aquí.

391
00:20:19,360 --> 00:20:22,780
Hemos preparado algunos parámetros HDP
aquí y luego los pasó en última instancia,

392
00:20:22,780 --> 00:20:26,160
a update.php, que hemos
También implementado para usted.

393
00:20:26,160 --> 00:20:31,390
Que finalmente consigue recuperar parte JSON
desde el archivo llamado update.php

394
00:20:31,390 --> 00:20:34,050
y luego elimina cualquier
marcadores en la pantalla

395
00:20:34,050 --> 00:20:36,650
y luego itera sobre
los datos que ha regresado

396
00:20:36,650 --> 00:20:40,350
de update.php, que
de nuevo es simplemente una matriz JSON.

397
00:20:40,350 --> 00:20:45,130
Y entonces se añade en última instancia, un marcador de
cada uno de esos lugares, insuficiencia manipulación

398
00:20:45,130 --> 00:20:47,750
o errores que podría muy bien suceder.

399
00:20:47,750 --> 00:20:51,550
>> Ahora sólo tienes que darte una idea de cómo se
podría ir sobre la depuración de este proyecto,

400
00:20:51,550 --> 00:20:55,420
doy cuenta de que he abierto en
avanzar en esta ficha aquí a esta URL,

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

402
00:21:01,320 --> 00:21:04,050
Ahora, de nuevo, artículos sobre
PHP implementamos para usted

403
00:21:04,050 --> 00:21:06,320
por lo que este no es tanto
lo podrás usar

404
00:21:06,320 --> 00:21:08,190
depurar, sino más bien la técnica.

405
00:21:08,190 --> 00:21:10,590
Tenga en cuenta que he buscado
El código postal de Cambridge aquí,

406
00:21:10,590 --> 00:21:15,260
y me he quedado atrás, de hecho, un JSON
variedad de objetos JSON dentro de los cuales

407
00:21:15,260 --> 00:21:17,640
son dos keys-- enlace y el título.

408
00:21:17,640 --> 00:21:19,860
>> Así esta funcionalidad
trabaja ya para usted.

409
00:21:19,860 --> 00:21:24,330
Pero esta técnica de forma manual va
a una URL como esta para algo como

410
00:21:24,330 --> 00:21:31,710
search.php? geo = cambridge o 02138 o
cualquiera que sea el usuario ha escrito en debe

411
00:21:31,710 --> 00:21:35,770
de gran valor como usted, usted mismo, intenta
de averiguar exactamente si o por qué

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

413
00:21:38,510 --> 00:21:41,720
>> En última instancia, entonces, usted tiene
algunos TODOs delante.

414
00:21:41,720 --> 00:21:44,250
Vas a primera implementos
que script de importación que

415
00:21:44,250 --> 00:21:46,520
lee en us.text en su base de datos.

416
00:21:46,520 --> 00:21:48,760
Usted está entonces va a necesitar
para implementar search.php

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

418
00:21:51,320 --> 00:21:54,170
Usted está entonces va a querer
centrarse en scripts.js

419
00:21:54,170 --> 00:21:57,520
e implementa en última instancia
ese par de Todos,

420
00:21:57,520 --> 00:21:59,950
incluso para configurar
y esa plantilla,

421
00:21:59,950 --> 00:22:03,220
añadir marcadores, quitar marcadores, y
a continuación, la última, pero no menos importante, una

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

423
00:22:04,330 --> 00:22:07,477
>> Una vez que haya puesto en funcionamiento mashup
bastante como la nuestra, el objetivo a la mano

424
00:22:07,477 --> 00:22:09,560
es para que usted agregue un personal
toque para su mashup,

425
00:22:09,560 --> 00:22:11,290
ya sea estética o funcional.

426
00:22:11,290 --> 00:22:13,950
Tome el mashup siempre tan
ligeramente al siguiente nivel.

427
00:22:13,950 --> 00:22:18,330
Siempre y cuando usted se empuja más allá
su familiaridad con la misma especificación

428
00:22:18,330 --> 00:22:20,840
y recoger una técnica
nuevo, incluso si es sólo

429
00:22:20,840 --> 00:22:25,610
algo estético como cambiar el
diseño del mapa que está utilizando,

430
00:22:25,610 --> 00:22:28,070
el alcance que esperamos
será satisfecho.

431
00:22:28,070 --> 00:22:30,260
Eso es, pues, de problemas 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Estén atentos para más en el
especificación y mejor de las suertes

433
00:22:33,070 --> 00:22:36,400
hacer frente a este, su último
Problema CS50 establecido nunca.

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

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