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: Olá.

4
00:00:10,180 --> 00:00:12,600
Vamos dar um passeio pela
Problema Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
que vai desafiá-lo a
basear-se em elementos para o Google Maps

6
00:00:15,880 --> 00:00:20,905
com elementos do Google News and mash
-los juntos em um applet web que

7
00:00:20,905 --> 00:00:24,150
Permite que o usuário pesquise
um mapa para notícias 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 fazer isso, vamos
integrar algumas HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript, e uma técnica
geralmente conhecido como AJAX em ordem

11
00:00:34,390 --> 00:00:36,850
para criar esta imersiva
experiência do usuário.

12
00:00:36,850 --> 00:00:38,920
>> Vamos primeiro para o próprio Google Maps.

13
00:00:38,920 --> 00:00:41,220
Isto, naturalmente, é talvez
uma interface familiar.

14
00:00:41,220 --> 00:00:45,070
Mas acontece que o Google Maps
Também fornece uma aplicação API--

15
00:00:45,070 --> 00:00:48,360
através do qual a programação interface--
você pode tomar elementos do Google Maps

16
00:00:48,360 --> 00:00:50,740
e integrá-los em
seus próprios aplicativos.

17
00:00:50,740 --> 00:00:52,650
De facto, ao longo desta
processo, você vai

18
00:00:52,650 --> 00:00:55,140
para encontrar um par de URLs
particularmente útil que

19
00:00:55,140 --> 00:00:57,820
são mencionados na
especificação para Problem Set 8,

20
00:00:57,820 --> 00:01:00,980
especificamente esta Introdução
Guia ou o Guia do desenvolvedor

21
00:01:00,980 --> 00:01:07,640
para o Google Maps API versão 3, bem
como a API do Google Maps JavaScript

22
00:01:07,640 --> 00:01:10,260
v3 de referência, que é um
pouco mais misterioso para ler

23
00:01:10,260 --> 00:01:14,600
mas, na verdade, tem todo o nível mais baixo
detalhes sobre o que funciona ou métodos

24
00:01:14,600 --> 00:01:18,220
e objetos e propriedades e
eventos realmente vêm com a API,

25
00:01:18,220 --> 00:01:20,720
muito semelhante em espírito
para [inaudível] páginas.

26
00:01:20,720 --> 00:01:23,480
>> Agora, se vamos dar uma olhada
no Google News, você vai

27
00:01:23,480 --> 00:01:25,370
talvez ver um interface familiar aqui.

28
00:01:25,370 --> 00:01:29,350
Mas acontece que você também pode pesquisar
Google News para geografias específicas

29
00:01:29,350 --> 00:01:32,000
através de um parâmetro HTTP chamado geo.

30
00:01:32,000 --> 00:01:35,100
Na verdade, se eu aumentar o zoom
até aqui, você vai ver que

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

32
00:01:41,672 --> 00:01:43,630
E, de fato, se eu aumentar
para fora, você vai ver que eu sou

33
00:01:43,630 --> 00:01:47,090
olhando para uma página com um monte de
pontos de vista sobre Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Enquanto isso, se eu realmente mudar a
URL para não ser um código postal como este,

35
00:01:50,620 --> 00:01:55,580
mas algo um pouco mais confusa
como Cambridge, Massachusetts +,

36
00:01:55,580 --> 00:02:00,740
onde a vantagem é do jeito que você codificar um
caractere de espaço em uma URL e pressione Enter,

37
00:02:00,740 --> 00:02:02,907
você vai ver que eu realmente
ver quase a mesma notícia.

38
00:02:02,907 --> 00:02:05,489
Talvez seja um pouco diferente
porque, na verdade, Cambridge

39
00:02:05,489 --> 00:02:06,910
tem vários códigos postais.

40
00:02:06,910 --> 00:02:09,410
Agora como eu ia saber isso e,
Na verdade, como eu poderia de alguma forma

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

42
00:02:12,940 --> 00:02:15,064
quer permitir que o usuário
a olhar para cima, quer?

43
00:02:15,064 --> 00:02:17,480
Bem, acontece que há
um site lá fora chamado

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

45
00:02:20,060 --> 00:02:23,760
uma base de dados de todos livremente disponíveis
tipos de informação geográfica,

46
00:02:23,760 --> 00:02:27,040
não só para os EUA, mas também
para outros países também.

47
00:02:27,040 --> 00:02:30,430
Na verdade, se eu for para este URL aqui, que
Também é mencionado no conjunto de problemas

48
00:02:30,430 --> 00:02:34,510
especificação, você vai ver que três
Lista de um monte de arquivos zip

49
00:02:34,510 --> 00:02:36,400
qualquer um que pode ser baixado por você.

50
00:02:36,400 --> 00:02:39,900
De facto, para este conjunto de problemas
você vai baixar us.zip.

51
00:02:39,900 --> 00:02:43,790
Agora dentro deste arquivo, é um todo
bando de dados em formato de texto.

52
00:02:43,790 --> 00:02:47,760
Os ficheiros é muito semelhante a um
CSV-- Comma Separated Values ​​file--

53
00:02:47,760 --> 00:02:51,294
mas, na verdade, usa
guias para demarcar campos.

54
00:02:51,294 --> 00:02:53,710
Agora, enquanto isso, se você olhar
aqui o que eu destacou,

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

56
00:02:56,459 --> 00:02:58,980
códigos postais, nomes de lugares,
e, em seguida, de uma forma

57
00:02:58,980 --> 00:03:04,230
ou outros, estados e municípios,
comunidades, e muito mais.

58
00:03:04,230 --> 00:03:06,630
Na verdade, eu já
download deste arquivo com antecedência.

59
00:03:06,630 --> 00:03:09,750
Deixe-me ir em frente e abri-lo aqui--
us.text-- e, na verdade, você vai

60
00:03:09,750 --> 00:03:16,660
ver se eu rolar para baixo para a linha 16792
você verá alguns registros de Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts e seus vários códigos postais.

62
00:03:19,120 --> 00:03:22,150
O que você também vê lá é o concelho,
alguns números que eu realmente não

63
00:03:22,150 --> 00:03:24,500
compreender, mas também todos
o caminho à direita,

64
00:03:24,500 --> 00:03:27,170
alguns GPS coordinates--
latitude e longitude.

65
00:03:27,170 --> 00:03:30,440
Isso é ótimo porque um dos
os recursos do Google Maps API

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

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

68
00:03:36,850 --> 00:03:40,210
>> Agora vamos começar a descobrir como
começar a amarrar essas coisas juntas.

69
00:03:40,210 --> 00:03:42,900
Nós demos-lhe um todo
monte de código de distribuição,

70
00:03:42,900 --> 00:03:44,970
bem como banco de dados MySQL.

71
00:03:44,970 --> 00:03:49,100
Na verdade, se eu puxar um phpMyAdmin ter
já importados, como você em breve,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, você verá uma tabela MySQL que
se parece com isso, um campo ID, país

73
00:03:54,800 --> 00:03:57,400
código, código postal, o nome da cidade e muito mais.

74
00:03:57,400 --> 00:04:00,490
Os tipos de todos aqueles
colunas I derivada simplesmente

75
00:04:00,490 --> 00:04:03,870
lendo o readme.text
arquivar aqui que especificado

76
00:04:03,870 --> 00:04:07,330
se um campo é um número inteiro,
ou VARCHAR ou semelhantes.

77
00:04:07,330 --> 00:04:10,510
>> Então nós criamos essa tabela para
e lhe deu os comandos SQL

78
00:04:10,510 --> 00:04:12,770
para executar para criar esse
tabela em seu próprio banco de dados,

79
00:04:12,770 --> 00:04:15,290
mas não há, na verdade, não há dados nele ainda.

80
00:04:15,290 --> 00:04:19,600
Em vez disso, você vai ter que
baixar us.zip ou zip de qualquer país

81
00:04:19,600 --> 00:04:21,500
arquivo daquele URL lá.

82
00:04:21,500 --> 00:04:24,940
E então você vai ter que escrever
um script de linha de comando em PHP que é

83
00:04:24,940 --> 00:04:28,420
vai abrir esse texto
arquivo, interagir sobre suas linhas,

84
00:04:28,420 --> 00:04:31,180
e, em seguida, para cada um dos
essas linhas fazer uma inserção

85
00:04:31,180 --> 00:04:34,940
em que coloca a tabela
em seu banco de dados MySQL.

86
00:04:34,940 --> 00:04:37,880
Assim, no final deste processo, você vai
ter executado esse script em última instância

87
00:04:37,880 --> 00:04:39,610
apenas uma vez, em teoria.

88
00:04:39,610 --> 00:04:41,780
Na realidade, você, provavelmente,
executá-lo um monte de vezes

89
00:04:41,780 --> 00:04:45,460
ao tentar corrigir vários bugs.

90
00:04:45,460 --> 00:04:48,440
>> Finalmente, você vai ter um
realmente grande banco de dados com milhares

91
00:04:48,440 --> 00:04:50,139
e milhares de linhas geográficas.

92
00:04:50,139 --> 00:04:52,930
Em seguida, você vai colocar essa importação
script de lado uma vez que está funcionando

93
00:04:52,930 --> 00:04:55,140
e seu banco de dados é bom
e correto, e, em seguida,

94
00:04:55,140 --> 00:04:58,880
você vai passar para realmente
implementar o próprio mashup.

95
00:04:58,880 --> 00:05:01,670
O mashup vai olhar
um pouco algo como isto.

96
00:05:01,670 --> 00:05:05,165
No mashup.cs50.net, nós
tem uma solução pessoal

97
00:05:05,165 --> 00:05:06,990
que parece um pouco algo como isto.

98
00:05:06,990 --> 00:05:11,070
Na verdade, se eu clicar neste jornal
ícone para Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
você verá uma fiação
Ícone brevemente e, em seguida,

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

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

102
00:05:18,280 --> 00:05:20,352
Se eu clicar em 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 clicar em
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
pode não haver qualquer
notícias de de Watertown,

106
00:05:26,090 --> 00:05:28,630
assim você vai ver algo
como o dia de poucas notícias.

107
00:05:28,630 --> 00:05:32,140
>> Agora, enquanto isso, no canto superior esquerdo são
alguns familiares controles Google Maps

108
00:05:32,140 --> 00:05:34,980
para deixá-lo diminuir o zoom, pan
para cima, baixo, esquerda e direita,

109
00:05:34,980 --> 00:05:37,360
mas também uma caixa de pesquisa que colocamos lá.

110
00:05:37,360 --> 00:05:40,910
Então, se eu procurar, francamente,
o único outro código postal Eu sei,

111
00:05:40,910 --> 00:05:45,020
90210, vamos realmente ver
Beverly Hills, Califórnia.

112
00:05:45,020 --> 00:05:48,550
Quando clicado ele me leva a
Califórnia e um grupo inteiro

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

114
00:05:50,369 --> 00:05:51,910
Agora observe, também, o que aconteceu lá.

115
00:05:51,910 --> 00:05:57,040
Se eu esta busca tempo para 02138 ou mesmo
Cambridge Massachusetts vírgula ou alguns

116
00:05:57,040 --> 00:06:00,300
variante, você recebe um
pouco suspensa autocomplete.

117
00:06:00,300 --> 00:06:03,840
Agora isso é usando um plugin
para uma biblioteca chamada jQuery,

118
00:06:03,840 --> 00:06:05,732
e esse plugin é chamado typeahead.

119
00:06:05,732 --> 00:06:07,440
Nós simplesmente ler
a documentação,

120
00:06:07,440 --> 00:06:13,150
o download do arquivo .js integrada
no código de distribuição de modo que você

121
00:06:13,150 --> 00:06:16,900
em última análise, pode escrever o código que
preenche esse menu dropdown com a auto

122
00:06:16,900 --> 00:06:19,350
seleções ou as sugestões de automóveis.

123
00:06:19,350 --> 00:06:23,820
>> Agora o código de distribuição, no entanto, que
você recebeu não faz quase tanto quanto.

124
00:06:23,820 --> 00:06:26,860
Você pega o mapa do Google incorporado e
você tem os controles na parte superior esquerda,

125
00:06:26,860 --> 00:06:28,240
e você começa a caixa de pesquisa.

126
00:06:28,240 --> 00:06:32,760
Mas se eu digitar algo como
02138, não há lugares são encontrados ainda.

127
00:06:32,760 --> 00:06:34,730
Assim que vai ser
um dos nossos objetivos aqui.

128
00:06:34,730 --> 00:06:37,430
Além disso, se você der um passo
para trás e olhar para o próprio mapa,

129
00:06:37,430 --> 00:06:38,950
não há nenhuma notícia qualquer.

130
00:06:38,950 --> 00:06:41,780
Mesmo se eu clicar e
arrasto, na verdade não há marcadores

131
00:06:41,780 --> 00:06:45,560
aparecem para a notícia, porque isso
desafio é deixado para você também.

132
00:06:45,560 --> 00:06:48,490
>> Vamos dar uma olhada em seguida,
no código de distribuição.

133
00:06:48,490 --> 00:06:51,460
Uma vez que você tenha baixado
pset8.zip e abriu o zíper

134
00:06:51,460 --> 00:06:54,430
em seu diretório vhost
no CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
você vai ver estes
diretórios aqui dentro.

136
00:06:56,550 --> 00:07:00,200
Bin-- que geralmente significa
binário para programs-- executável

137
00:07:00,200 --> 00:07:04,870
inclui, como em pset7, alguns PHP
arquivos que outros arquivos incluem,

138
00:07:04,870 --> 00:07:06,710
em seguida, público, que é
os ficheiros que necessitam

139
00:07:06,710 --> 00:07:09,369
para ser acessível ao público
para um usuário com um navegador.

140
00:07:09,369 --> 00:07:11,410
Vamos dar uma olhada no
bin, e nós vamos

141
00:07:11,410 --> 00:07:13,890
ver que há um arquivo
já chamado Import.

142
00:07:13,890 --> 00:07:17,591
Se abrirmos esta com gedit, vamos ver
que, infelizmente, não há muito

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

144
00:07:18,090 --> 00:07:20,250
Tudo o que está lá, no entanto,
é uma coisa toda em cima

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

146
00:07:23,410 --> 00:07:25,759
deve ser utilizado para realmente
executar este ficheiro.

147
00:07:25,759 --> 00:07:27,550
Mas, então, onde se diz
TODO é o lugar onde você está

148
00:07:27,550 --> 00:07:31,130
indo a necessidade de escrever um código
que provavelmente requer a configuração

149
00:07:31,130 --> 00:07:35,820
arquivo que está no diretório inclui
como fizemos antes com arquivos PHP.

150
00:07:35,820 --> 00:07:38,180
E então você vai
tem que abrir alguma forma-se

151
00:07:38,180 --> 00:07:41,920
us.text onde presumivelmente
já descompactado.

152
00:07:41,920 --> 00:07:44,690
Então você vai ter que
iterar sobre as linhas desse arquivo,

153
00:07:44,690 --> 00:07:47,800
talvez usando algumas das funções
sugerido na especificação.

154
00:07:47,800 --> 00:07:51,390
Em seguida, insira cada um desses
linhas no banco de dados MySQL

155
00:07:51,390 --> 00:07:54,940
usando a função de consulta, o que
temos novamente desde que você com--

156
00:07:54,940 --> 00:07:58,010
ou, pelo menos, uma variante
mesmos em functions.php,

157
00:07:58,010 --> 00:07:59,560
que vamos ver em apenas um momento.

158
00:07:59,560 --> 00:08:04,430
>> Agora vamos fechar importação e voltar para
nossa diretoria e desta vez vá em

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

160
00:08:05,300 --> 00:08:09,210
E se eu fizer ls lá, você vai ver
três arquivos muito como Conjunto de Problemas 7.

161
00:08:09,210 --> 00:08:13,760
E vamos dar uma olhada rápida,
por exemplo, no config.php.

162
00:08:13,760 --> 00:08:16,730
De lá, é menos linhas
do que antes, e ele

163
00:08:16,730 --> 00:08:20,712
Parece que este arquivo inclui
constants.php e functions.php.

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

165
00:08:23,670 --> 00:08:30,910
especificar que esses arquivos são relativos
para o diretório atual __ DIR__

166
00:08:30,910 --> 00:08:35,280
representa qualquer diretório este
arquivo, config.php, é em si mesmo em.

167
00:08:35,280 --> 00:08:37,600
Portanto, esta é uma forma mais
maneira explícita de especificar

168
00:08:37,600 --> 00:08:40,100
o que os outros arquivos que você deseja exigir.

169
00:08:40,100 --> 00:08:44,020
>> Agora, se eu fechar este arquivo e
abrir constants.php em vez disso,

170
00:08:44,020 --> 00:08:47,430
você verá um arquivo muito reminiscente
a do bem, ainda que Problem Set 7

171
00:08:47,430 --> 00:08:50,050
com um banco de dados diferente chamado pset8.

172
00:08:50,050 --> 00:08:54,020
Finalmente, em functions.php,
vamos ver apenas uma função

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

174
00:08:55,942 --> 00:08:59,150
Isso é quase o mesmo, exceto lidamos
erros desta vez um pouco

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

176
00:09:02,860 --> 00:09:08,090
>> Agora vamos voltar para a nossa pset8
diretório, entrar em público, e lá

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

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

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

180
00:09:22,010 --> 00:09:24,660
>> Vamos dar uma olhada
index.html, que é

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

182
00:09:27,290 --> 00:09:31,820
Agora em index.html, você verá um todo
bando de elementos de ligação na cabeça,

183
00:09:31,820 --> 00:09:36,540
especificamente, para a inicialização para o nosso próprio
CSS seguido por um monte de roteiro

184
00:09:36,540 --> 00:09:41,520
tags para coisas como a mapas, API
em si, um marcador especial com rótulo

185
00:09:41,520 --> 00:09:44,950
utilitário que mencionamos na
especificação está disponível para você,

186
00:09:44,950 --> 00:09:48,420
próprio jQuery, de bootstrap
em si, e uma outra biblioteca

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

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

189
00:09:57,031 --> 00:10:00,280
que tem um monte de funcionalidade
que um monte de pessoas no mundo de desejos

190
00:10:00,280 --> 00:10:02,020
existiram na própria JavaScript.

191
00:10:02,020 --> 00:10:04,560
Então, todos esses são
realmente muito popular.

192
00:10:04,560 --> 00:10:07,140
Nós também já mencionei typeahead
que é a biblioteca que

193
00:10:07,140 --> 00:10:11,180
faz isso suspensa autocomplete e
finalmente, um link para o nosso próprio JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Enquanto isso, e talvez
felizmente, este mashup

195
00:10:13,880 --> 00:10:17,550
é conduzido por relativamente pouco
HTML aqui em baixo na parte inferior.

196
00:10:17,550 --> 00:10:22,330
Observe que temos especificado um div em
nosso corpo de fluido classe-container.

197
00:10:22,330 --> 00:10:24,610
Este, por Bootstrap de
documentação, apenas

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

199
00:10:29,840 --> 00:10:33,020
>> Enquanto isso, a seguir que temos uma div
que está aberta e imediatamente fechada

200
00:10:33,020 --> 00:10:34,790
com o ID único do mapa lona.

201
00:10:34,790 --> 00:10:37,400
Este agora é do Google
Documentação Mapas

202
00:10:37,400 --> 00:10:42,490
para a sua API, em que eu simplesmente precisa
ter um div vazio em que a injectar,

203
00:10:42,490 --> 00:10:44,470
em última análise, um real do Google Maps.

204
00:10:44,470 --> 00:10:46,310
Mas mais sobre isso em apenas um bit.

205
00:10:46,310 --> 00:10:48,850
>> Finalmente, há um formulário
aqui dentro que

206
00:10:48,850 --> 00:10:52,930
implementa a caixa de texto no topo à esquerda
em nossa interface para pesquisa.

207
00:10:52,930 --> 00:10:54,730
Note que nós usamos
um pouco de inicialização

208
00:10:54,730 --> 00:10:57,670
aqui demasiado-- coisas como
forma-inline e forma-grupo.

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

210
00:11:00,080 --> 00:11:04,510
E então, em última análise, eu realmente tenho
um tipo de entrada, que é bastante familiar,

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

212
00:11:06,440 --> 00:11:07,230
Apenas uma convenção.

213
00:11:07,230 --> 00:11:09,234
Q para query-- poderia ter
sido chamado de qualquer coisa.

214
00:11:09,234 --> 00:11:11,400
E então, o espaço reservado,
entretanto, é cidade, estado,

215
00:11:11,400 --> 00:11:16,200
e código postal que você deve se lembrar
vendo em nosso mashup de demonstração antes.

216
00:11:16,200 --> 00:11:17,980
Vamos fechar este arquivo.

217
00:11:17,980 --> 00:11:24,460
>> Agora, dê uma olhada nos arquivos PHP que
aguardar e, em seguida, os arquivos JavaScript.

218
00:11:24,460 --> 00:11:27,700
Em nossos arquivos PHP, nós temos
já implementadas para você,

219
00:11:27,700 --> 00:11:29,960
por exemplo, atualizações.

220
00:11:29,960 --> 00:11:35,060
Update.php-- não vamos gastar uma enorme
quantidade de tempo em aqui-- em poucas palavras

221
00:11:35,060 --> 00:11:38,400
é o arquivo que o nosso
Código JavaScript está acontecendo

222
00:11:38,400 --> 00:11:41,610
entrar em contato via AJAX que
técnica assíncrona que é

223
00:11:41,610 --> 00:11:45,980
incorporado JavaScript nestes dias que é
vai permitir-nos a perguntar update.php

224
00:11:45,980 --> 00:11:47,410
para mais informações.

225
00:11:47,410 --> 00:11:50,045
>> Especificamente, a qualquer hora
o usuário arrasta o mapa

226
00:11:50,045 --> 00:11:53,310
ou executa uma pesquisa que salta
o usuário para outro local,

227
00:11:53,310 --> 00:11:55,250
nosso código JavaScript,
como veremos em breve, é

228
00:11:55,250 --> 00:11:59,610
vai chamar update.php
e pedir 10 ou mais marcadores

229
00:11:59,610 --> 00:12:02,630
dentro da janela de exibição com 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ão, repovoar o mapa agora que
o usuário passou a tela, a fim

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

233
00:12:14,210 --> 00:12:18,340
Enquanto isso, este arquivo é, em última instância
indo para executar uma consulta SQL

234
00:12:18,340 --> 00:12:21,680
contra o nosso banco de dados
tabela chamada lugares que

235
00:12:21,680 --> 00:12:26,380
vai voltar aqueles
10 ou menor número de locais.

236
00:12:26,380 --> 00:12:32,620
>> Enquanto isso, em articles.php, é outro
arquivar temos escrito na sua totalidade.

237
00:12:32,620 --> 00:12:35,820
É muito semelhante ao espírito
Função PROC do Conjunto de Problemas 7,

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

239
00:12:39,450 --> 00:12:43,710
Este arquivo de contatos do Google Notícias
para você, em última análise, agarrando

240
00:12:43,710 --> 00:12:46,050
uma máquina de leitura
version-- em algo

241
00:12:46,050 --> 00:12:49,720
chamado RSS format-- da notícia
para Cambridge ou Beverly Hills

242
00:12:49,720 --> 00:12:52,880
ou o que quer que cidade você pesquisou
para com base nesse geoparâmetros.

243
00:12:52,880 --> 00:12:57,250
Nós analisar esse RSS, que é apenas uma
tipo de linguagem de marcação chamada XML,

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

245
00:13:00,740 --> 00:13:03,570
e ao seu código JavaScript,
especificamente, em um 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 você vai ver na
specification-- nós apontá-lo

248
00:13:08,180 --> 00:13:10,720
em como você pode realmente ver
alguns dos traseira-- vinda JSON

249
00:13:10,720 --> 00:13:15,210
que esta funcionalidade em última análise
permite preencher esses menus pop-up de modo

250
00:13:15,210 --> 00:13:16,960
que quando você clica
em um marcador no mapa

251
00:13:16,960 --> 00:13:19,430
você realmente vê um grupo inteiro
de balas, cada um dos quais

252
00:13:19,430 --> 00:13:21,020
links para um artigo.

253
00:13:21,020 --> 00:13:25,000
>> Agora vamos dar uma olhada em um último
Arquivo PHP que, felizmente, não faz

254
00:13:25,000 --> 00:13:27,970
tem muita coisa acontecendo on--
apenas um bem grande TODO.

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

256
00:13:32,170 --> 00:13:35,980
E, em seguida, em última análise, impressões
essa matriz em JSON format--

257
00:13:35,980 --> 00:13:38,720
pretty imprimindo-lo apenas para que
as coisas são mais fáceis de depurar.

258
00:13:38,720 --> 00:13:41,480
Infelizmente, no
meio há este TODO,

259
00:13:41,480 --> 00:13:46,890
que apela para você pesquisar o
banco de dados para os lugares 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 fato, isso vai
ser um de seus challenges--

262
00:13:49,865 --> 00:13:54,240
para implementar essa funcionalidade aqui
de modo que quando você entrar em contato com este arquivo com

263
00:13:54,240 --> 00:14:00,610
uma URL como pesquisa. php? geo = alguma coisa,
seu código acabará por retornar um JSON

264
00:14:00,610 --> 00:14:05,020
matriz de todos os lugares em seu
tabela de banco de dados que correspondem a essa entrada.

265
00:14:05,020 --> 00:14:08,960
Portanto, se o usuário digita em Cambridge,
seu arquivo aqui search.php

266
00:14:08,960 --> 00:14:12,680
deve finalmente retornar uma matriz JSON
para todos os jogos de Cambridge,

267
00:14:12,680 --> 00:14:16,990
que pode ser em Massachusetts
mas poderia ser ainda em qualquer outro lugar.

268
00:14:16,990 --> 00:14:21,040
>> Por último, vamos dar uma olhada em dois
arquivos que estão 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 em nosso diretório CSS,
há todo um conjunto de arquivos de lá,

271
00:14:26,779 --> 00:14:28,070
mas a maioria deles são bibliotecas.

272
00:14:28,070 --> 00:14:31,530
Vou dar uma olhada,
especificamente, a styles.css,

273
00:14:31,530 --> 00:14:35,440
que é o nosso próprio CSS global que é
indo para estilizar todo este mashup.

274
00:14:35,440 --> 00:14:38,840
Vou deixar para você a ler
Os comentários aqui, mas, em poucas palavras,

275
00:14:38,840 --> 00:14:43,490
este é o CSS que assegura que o nosso
mashup, por padrão fora da caixa,

276
00:14:43,490 --> 00:14:46,950
parece exatamente do jeito que queremos ele--
com o mapa de encher o porta vista

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

278
00:14:49,720 --> 00:14:52,870
Também tomei a liberdade de
estilizando que dropdown typeahead

279
00:14:52,870 --> 00:14:55,170
Menu um pouco também.

280
00:14:55,170 --> 00:14:58,030
>> O arquivo mais importante
talvez para este problema definir

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

282
00:15:01,070 --> 00:15:03,800
Dentro de seu diretório JS
é ainda mais arquivos.

283
00:15:03,800 --> 00:15:08,090
Todos eles são arquivos de biblioteca
exceto para um presente, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Se abrirmos isto, vamos dar o nosso
última turnê através das funções que

285
00:15:11,460 --> 00:15:13,820
são incorporadas a esse arquivo
para você e chamada de atenção

286
00:15:13,820 --> 00:15:16,200
para os TODOs que temos pela frente.

287
00:15:16,200 --> 00:15:19,110
>> No topo desse arquivo,
São três variáveis ​​globais.

288
00:15:19,110 --> 00:15:22,910
Um para um mapa, que vai
ser uma referência para o nosso mapa Google.

289
00:15:22,910 --> 00:15:25,510
Você pode pensar nisso
tipo de como um ponteiro.

290
00:15:25,510 --> 00:15:27,710
Enquanto isso, nós temos
outra variável global

291
00:15:27,710 --> 00:15:31,500
Informação chamada, o que parece ser
armazenar o valor de retorno de uma 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 suporta objetos que
são muito similares em espírito à Struts.

294
00:15:37,835 --> 00:15:40,250
E o que esta linha para
nossos propósitos está fazendo

295
00:15:40,250 --> 00:15:42,820
está criando um novo Informação
janela na memória e, em seguida

296
00:15:42,820 --> 00:15:46,330
manter em torno de uma referência
da mesma, a uma variável chamada Info.

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

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

299
00:15:51,060 --> 00:15:55,392
Todos esses ícones de jornal, ou você
pode escolher outro ícone completamente,

300
00:15:55,392 --> 00:15:57,350
vão ser armazenados
em última análise, essa matriz

301
00:15:57,350 --> 00:16:01,570
de modo que podemos facilmente adicionar
o mapa e removê-los do mapa.

302
00:16:01,570 --> 00:16:03,990
>> Agora vamos rolar para baixo
um pouco e whiz

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

304
00:16:07,690 --> 00:16:10,480
modelo de objeto ou o
própria página está pronto.

305
00:16:10,480 --> 00:16:12,942
Lembre-se que esta sintaxe
aqui simplesmente especifica

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

307
00:16:14,900 --> 00:16:17,840
quando o navegador terminou
carregar tudo o resto.

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

309
00:16:19,750 --> 00:16:22,410
que acabam stylizing
o mapa de acordo com a especificação.

310
00:16:22,410 --> 00:16:24,790
Nós, então, declarar uma
todo monte de opções,

311
00:16:24,790 --> 00:16:28,630
que personalizar ainda mais o Google
mapa que estamos prestes a incorporar.

312
00:16:28,630 --> 00:16:32,090
Em seguida, usamos um pouco de código jQuery,
que é explicado em detalhes um pouco mais

313
00:16:32,090 --> 00:16:35,000
no spec, para agarrar
esse 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ão essa linha aqui é
o que parece magicamente nos dar

316
00:16:40,640 --> 00:16:43,560
um mapa do Google dentro de
nossa própria aplicação,

317
00:16:43,560 --> 00:16:47,020
armazenando uma referência a esse
nessa variável chamado mapa.

318
00:16:47,020 --> 00:16:50,550
>> Finalmente, aqui registamos
o que é chamado um ouvinte.

319
00:16:50,550 --> 00:16:54,690
Pense maneira traseira--, caminho
traseira-- a semana zero no CS50

320
00:16:54,690 --> 00:16:57,430
quando olhamos para zero e
o seu apoio através de uma caminhada

321
00:16:57,430 --> 00:16:59,935
através de coisas chamadas
eventos e transmissões.

322
00:16:59,935 --> 00:17:01,810
Você pode não ter usado
-lo sozinho, mas é

323
00:17:01,810 --> 00:17:03,900
um mecanismo pelo qual um
navegador, neste caso,

324
00:17:03,900 --> 00:17:07,940
pode chamar nossa atenção quando é
realmente pronto para executar algum código.

325
00:17:07,940 --> 00:17:12,170
Neste caso, ele vai ouvir
para o mapa para um evento chamado ocioso.

326
00:17:12,170 --> 00:17:14,930
Isto significa que o navegador tem
terminar de carregar o mapa do Google.

327
00:17:14,930 --> 00:17:18,380
Neste ponto, uma função chamada
configure deve, em última instância

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

329
00:17:19,339 --> 00:17:22,510
Essa função, configurar
vamos ver, é escrito por nós.

330
00:17:22,510 --> 00:17:24,550
>> Agora aqui é uma função
que, infelizmente,

331
00:17:24,550 --> 00:17:25,871
é apenas um marcador TODO add.

332
00:17:25,871 --> 00:17:28,620
Per o spec. você vai precisar
para escrever o código que realmente

333
00:17:28,620 --> 00:17:32,840
adiciona um marker-- se parece
como um jornal ou uma tachinha,

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

335
00:17:35,360 --> 00:17:37,720
Aqui, agora, é que a função
chamado configure.

336
00:17:37,720 --> 00:17:40,390
Vou deixar para você a ler
por isso com mais pormenor,

337
00:17:40,390 --> 00:17:42,600
mas percebemos que adicionar
Um grupo mais ouvintes

338
00:17:42,600 --> 00:17:46,620
para que possamos executar código quando o
usuário clica e arrasta o mapa.

339
00:17:46,620 --> 00:17:50,730
Temos também o código aqui que
inicializa esse plugin typeahead

340
00:17:50,730 --> 00:17:53,120
de modo que a lista suspensa
Menu realmente funciona.

341
00:17:53,120 --> 00:17:55,690
>> Mas vamos nos concentrar em apenas um
alguns lugares aqui.

342
00:17:55,690 --> 00:17:57,590
Especificamente, esta a fazer aqui.

343
00:17:57,590 --> 00:18:00,410
Vou adiar para o on-line
documentação e especificação

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

345
00:18:02,530 --> 00:18:05,890
Mas em poucas palavras, esta biblioteca
typeahead permite que você passe

346
00:18:05,890 --> 00:18:09,790
no que é geralmente conhecido como um modelo,
que tem alguns espaços reservados variáveis

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

348
00:18:13,690 --> 00:18:16,030
Mas neste caso, o
template por a especificação

349
00:18:16,030 --> 00:18:18,760
permite especificar
Que variáveis ​​você quer

350
00:18:18,760 --> 00:18:24,880
a administração a partir de dados que está vindo
de volta de algo como o PHP

351
00:18:24,880 --> 00:18:29,810
arquivos que você escreveu
que são emissores de saída JSON.

352
00:18:29,810 --> 00:18:35,170
>> Agora aqui percebemos que somos
escuta para as seleções typeahead

353
00:18:35,170 --> 00:18:38,050
quando o usuário realmente conduz
a busca e seleciona um valor.

354
00:18:38,050 --> 00:18:40,270
Esta é a forma como estamos, na verdade,
vai ouvir para que

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

356
00:18:42,250 --> 00:18:45,300
Em seguida, continuar a configurar
o mashup só um pouquinho.

357
00:18:45,300 --> 00:18:48,000
E, em última análise, a que chamamos
esta atualização função.

358
00:18:48,000 --> 00:18:49,640
Ele atualiza os marcadores na tela.

359
00:18:49,640 --> 00:18:51,529
Mais sobre isso em apenas um momento.

360
00:18:51,529 --> 00:18:53,570
Enquanto isso, há alguns
pequenas funções em aqui.

361
00:18:53,570 --> 00:18:56,820
Uma delas é que hideInfo
simplesmente fecha a InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Outra função aqui, o que, em última instância
não será por muito tempo, remover marcadores.

363
00:19:00,020 --> 00:19:03,580
Isso vai desfazer o que quer
sua função de marcador add faz.

364
00:19:03,580 --> 00:19:04,960
E, em seguida, para baixo aqui é pesquisa.

365
00:19:04,960 --> 00:19:08,610
E isso é interessante porque nós
ter escrito o código JavaScript que é

366
00:19:08,610 --> 00:19:13,490
vai falar com search.php no
servidor e voltar alguma resposta.

367
00:19:13,490 --> 00:19:16,110
>> Você, é claro, vai ainda
precisa implementar search.php,

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

369
00:19:18,310 --> 00:19:22,480
vai lidar realmente executar
Buscas de que a caixa de texto.

370
00:19:22,480 --> 00:19:25,340
Em particular, o aviso prévio
que esta função aqui,

371
00:19:25,340 --> 00:19:29,160
pesquisa, põe search.php
através de um método chamado

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

373
00:19:31,072 --> 00:19:32,780
E aqui a sintaxe
é um pouco diferente

374
00:19:32,780 --> 00:19:37,110
a partir de palestra em que estamos usando
jQuery chamado interface de promessa.

375
00:19:37,110 --> 00:19:38,479
Mais sobre isso na spec.

376
00:19:38,479 --> 00:19:40,520
Isto significa simplesmente para o nosso
propósitos agora que há

377
00:19:40,520 --> 00:19:43,870
são duas funções especiais que
precisa chamar com a notação de ponto

378
00:19:43,870 --> 00:19:46,230
aqui imediatamente após chamar obter JSON.

379
00:19:46,230 --> 00:19:47,510
Um é chamado feito.

380
00:19:47,510 --> 00:19:49,870
Um é chamado de falhar.

381
00:19:49,870 --> 00:19:51,790
Você pode pensar nisso
como o manipulador de sucesso

382
00:19:51,790 --> 00:19:54,960
eo manipulador de falha apenas
no caso de algo correr mal.

383
00:19:54,960 --> 00:19:57,760
>> Agora vamos olhar para o passado
par de funções neste arquivo.

384
00:19:57,760 --> 00:20:00,180
Aqui em baixo é uma função
chamado showInfo, que

385
00:20:00,180 --> 00:20:03,090
mostra as informações em um desses
Informações de pequenas janelas que

386
00:20:03,090 --> 00:20:05,380
aparece quando o usuário clica em um marcador.

387
00:20:05,380 --> 00:20:08,470
Aqui em baixo é ainda mais
que a função de atualização

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

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

390
00:20:15,250 --> 00:20:19,360
Quais são as coordenadas GPS da sua
nordeste e sudoeste cantos aqui.

391
00:20:19,360 --> 00:20:22,780
Nós preparamos alguns parâmetros HDP
aqui e, em seguida, passou por eles, em última instância

392
00:20:22,780 --> 00:20:26,160
para update.php, o que nós temos
também implementado para você.

393
00:20:26,160 --> 00:20:31,390
Que, finalmente, recebe de volta alguns JSON
a partir do arquivo chamado update.php

394
00:20:31,390 --> 00:20:34,050
e, em seguida, remove qualquer
marcadores na tela

395
00:20:34,050 --> 00:20:36,650
e, em seguida, itera sobre
os dados que está de volta

396
00:20:36,650 --> 00:20:40,350
de update.php, que
novamente é apenas uma matriz JSON.

397
00:20:40,350 --> 00:20:45,130
E, em seguida, em última análise, adiciona um marcador de
cada um desses lugares, tratamento de falhas

398
00:20:45,130 --> 00:20:47,750
ou erros que pode muito bem acontecer.

399
00:20:47,750 --> 00:20:51,550
>> Agora é só para lhe dar um gostinho de como você
pode ir sobre depuração este projeto,

400
00:20:51,550 --> 00:20:55,420
perceber que eu já abriu em
avançar este guia aqui para 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, novamente, artigos sobre
PHP implementamos para você

403
00:21:04,050 --> 00:21:06,320
de modo que este não é tanto
o que você vai estar usando

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

405
00:21:08,190 --> 00:21:10,590
Observe que eu tenho procurado por
CEP de Cambridge aqui,

406
00:21:10,590 --> 00:21:15,260
e eu consegui voltar, de fato, um JSON
matriz de objetos JSON dentro do qual

407
00:21:15,260 --> 00:21:17,640
são dois ligação keys-- e título.

408
00:21:17,640 --> 00:21:19,860
>> Portanto, esta funcionalidade
já funciona para você.

409
00:21:19,860 --> 00:21:24,330
Mas esta técnica de manualmente indo
a uma URL como esta para algo como

410
00:21:24,330 --> 00:21:31,710
search.php? geo = Cambridge ou 02138 ou
o que quer que o usuário digitou no deve

411
00:21:31,710 --> 00:21:35,770
provar inestimável como você, você mesmo, tente
para descobrir exatamente por isso que se deve ou

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

413
00:21:38,510 --> 00:21:41,720
>> Em última análise, então, você tem
alguns TODOs à frente de você.

414
00:21:41,720 --> 00:21:44,250
Você vai primeiros implementos
que script de importação que

415
00:21:44,250 --> 00:21:46,520
lê em us.text em seu banco de dados.

416
00:21:46,520 --> 00:21:48,760
Você está em seguida, vai precisar
para implementar search.php

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

418
00:21:51,320 --> 00:21:54,170
Você está em seguida, vai querer
para se concentrar em scripts.js

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

420
00:21:57,520 --> 00:21:59,950
inclusive para configure
e esse modelo,

421
00:21:59,950 --> 00:22:03,220
adicionar marcadores, remover marcadores, e
então durar, mas não menos importante, uma

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

423
00:22:04,330 --> 00:22:07,477
>> Depois de ter seu trabalho mashup
bem como o nosso, a meta na mão

424
00:22:07,477 --> 00:22:09,560
é para você adicionar um personal
toque no seu 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 assim
ligeiramente para o próximo nível.

427
00:22:13,950 --> 00:22:18,330
Contanto que você empurrar-se para além
sua familiaridade com a própria especificação

428
00:22:18,330 --> 00:22:20,840
e pegar uma técnica
novo, mesmo que seja apenas

429
00:22:20,840 --> 00:22:25,610
algo estética como a mudança da
layout do mapa que você está usando,

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

431
00:22:28,070 --> 00:22:30,260
Isso, então, é Problema Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Fique ligado para mais no
especificação e boa sorte

433
00:22:33,070 --> 00:22:36,400
fazer face 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