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

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

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

4
00:00:10,180 --> 00:00:12,600
Facciamo una passeggiata attraverso
Problema Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
che sta per sfidare a
attingere elementi per Google Maps

6
00:00:15,880 --> 00:00:20,905
con elementi da Google News e schiacciarle
insieme in un applet web che

7
00:00:20,905 --> 00:00:24,150
consente a un utente di ricerca
una mappa per le notizie locali

8
00:00:24,150 --> 00:00:26,780
a città specifiche,
città e codici di avviamento postale.

9
00:00:26,780 --> 00:00:31,040
Per fare questo, stiamo andando a
integrare alcuni HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript e tecnica
generalmente noto come AJAX per

11
00:00:34,390 --> 00:00:36,850
per creare questa coinvolgente
esperienza utente.

12
00:00:36,850 --> 00:00:38,920
>> Di prima per Google Maps si Let.

13
00:00:38,920 --> 00:00:41,220
Questo, naturalmente, è forse
un'interfaccia familiare.

14
00:00:41,220 --> 00:00:45,070
Ma si scopre che Google Maps
fornisce anche un'applicazione API--

15
00:00:45,070 --> 00:00:48,360
programmazione interface-- via che
si può prendere elementi di Google Maps

16
00:00:48,360 --> 00:00:50,740
e integrarli in
le proprie applicazioni.

17
00:00:50,740 --> 00:00:52,650
Infatti, in questo
processo, si sta andando

18
00:00:52,650 --> 00:00:55,140
per trovare un paio di URL
particolarmente utile che

19
00:00:55,140 --> 00:00:57,820
sono menzionati nel
Specifica per Problem Set 8,

20
00:00:57,820 --> 00:01:00,980
in particolare questo Getting Started
Guida o Guida per gli sviluppatori

21
00:01:00,980 --> 00:01:07,640
per Google Maps API versione 3 e
come l'API di Google Maps JavaScript

22
00:01:07,640 --> 00:01:10,260
riferimento v3, che è un
po 'di più arcano da leggere

23
00:01:10,260 --> 00:01:14,600
ma in realtà ha tutte livello inferiore
dettagli su cosa funzioni o metodi

24
00:01:14,600 --> 00:01:18,220
e oggetti e proprietà e
eventi effettivamente venire con l'API,

25
00:01:18,220 --> 00:01:20,720
molto simile nello spirito
a [incomprensibile] pagine.

26
00:01:20,720 --> 00:01:23,480
>> Ora, se diamo uno sguardo
a Google News, ti

27
00:01:23,480 --> 00:01:25,370
forse vedere un'interfaccia familiare qui.

28
00:01:25,370 --> 00:01:29,350
Ma si scopre che si può anche cercare
Google News per specifiche aree geografiche

29
00:01:29,350 --> 00:01:32,000
tramite un parametro HTTP chiamato geo.

30
00:01:32,000 --> 00:01:35,100
In realtà, se lo zoom in
qui, vedrete che

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

32
00:01:41,672 --> 00:01:43,630
E, in effetti, se lo zoom
fuori, vedrete che io sono

33
00:01:43,630 --> 00:01:47,090
guardando una pagina con un sacco di
opinioni circa Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Nel frattempo, se ho effettivamente cambiare la
URL di non essere un codice postale come questo,

35
00:01:50,620 --> 00:01:55,580
ma qualcosa di un po 'di Messier
come Cambridge, Massachusetts +,

36
00:01:55,580 --> 00:02:00,740
dove il vantaggio è il modo in cui si codifica un
carattere di spazio in un URL e premere Invio,

37
00:02:00,740 --> 00:02:02,907
vedrai che io in realtà
vedere quasi la stessa notizia.

38
00:02:02,907 --> 00:02:05,489
Forse è un po 'diverso
perché in realtà Cambridge

39
00:02:05,489 --> 00:02:06,910
ha molteplici codici di avviamento postale.

40
00:02:06,910 --> 00:02:09,410
Ora come faccio a sapere che e,
infatti, come potrei in qualche modo

41
00:02:09,410 --> 00:02:12,940
cravatta città e paesi
di codici di avviamento postale in caso I

42
00:02:12,940 --> 00:02:15,064
voler consentire all'utente
per cercare uno?

43
00:02:15,064 --> 00:02:17,480
Beh, si scopre che non c'è
un sito web là fuori chiamato

44
00:02:17,480 --> 00:02:20,060
geonames.org che è
un'iniziativa di avere

45
00:02:20,060 --> 00:02:23,760
un database liberamente disponibile di tutti
i tipi di informazioni geografiche,

46
00:02:23,760 --> 00:02:27,040
non solo per gli Stati Uniti, ma anche
per gli altri paesi.

47
00:02:27,040 --> 00:02:30,430
In realtà, se vado a questo URL qui, che
è citato anche nel problema set

48
00:02:30,430 --> 00:02:34,510
specifiche, vedrete che tre
quotazione di un intero gruppo di file zip

49
00:02:34,510 --> 00:02:36,400
qualsiasi che può essere scaricato da voi.

50
00:02:36,400 --> 00:02:39,900
Infatti, per questo problema impostare
si sta andando a scaricare us.zip.

51
00:02:39,900 --> 00:02:43,790
Ora all'interno di questo file, è un tutto
mucchio di dati in formato testo.

52
00:02:43,790 --> 00:02:47,760
I file è molto simile ad una
CSV-- Comma Separated Values ​​file--

53
00:02:47,760 --> 00:02:51,294
ma utilizza in realtà
schede per delimitare i campi.

54
00:02:51,294 --> 00:02:53,710
Ora, nel frattempo, se si guarda
qui a quello che ho evidenziato,

55
00:02:53,710 --> 00:02:56,459
i campi in questo file sono in corso
ad essere le cose come i codici di paese,

56
00:02:56,459 --> 00:02:58,980
codici postali, nomi di località,
e quindi, in qualche forma

57
00:02:58,980 --> 00:03:04,230
o altri, stati e contee,
comunità, e altro ancora.

58
00:03:04,230 --> 00:03:06,630
In realtà, ho già
scaricato questo file in anticipo.

59
00:03:06,630 --> 00:03:09,750
Lasciami andare avanti e apro qui--
us.text-- e, anzi, ti

60
00:03:09,750 --> 00:03:16,660
vedere se ho scorrere fino alla riga 16.792
vedrete alcuni record di Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts e dei suoi vari codici di avviamento postale.

62
00:03:19,120 --> 00:03:22,150
Quello che anche ci vedete è la contea,
alcuni numeri che non ho davvero

63
00:03:22,150 --> 00:03:24,500
capire, ma anche tutto
la strada sulla destra,

64
00:03:24,500 --> 00:03:27,170
alcuni GPS coordinates--
latitudine e longitudine.

65
00:03:27,170 --> 00:03:30,440
Ciò è grande perché uno dei
le funzioni di Google Maps API

66
00:03:30,440 --> 00:03:33,670
è la capacità di rilevare
dove siete geograficamente

67
00:03:33,670 --> 00:03:36,850
in termini di coordinate GPS.

68
00:03:36,850 --> 00:03:40,210
>> Ora cominciamo a capire come
avviare legare queste cose insieme.

69
00:03:40,210 --> 00:03:42,900
Vi abbiamo dato un intero
mucchio di codice di distribuzione,

70
00:03:42,900 --> 00:03:44,970
così come database MySQL.

71
00:03:44,970 --> 00:03:49,100
In realtà, se tiro un phpMyAdmin con
già importati, come presto sarà,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, vedrete una tabella MySQL
si presenta come tale, un campo ID, paese

73
00:03:54,800 --> 00:03:57,400
codice, codice postale, nome della località e più.

74
00:03:57,400 --> 00:04:00,490
I tipi di tutti coloro
colonne I derivati ​​semplicemente

75
00:04:00,490 --> 00:04:03,870
leggendo il readme.text
presentare qui che specificato

76
00:04:03,870 --> 00:04:07,330
se un campo è un numero intero,
o varchar o simili.

77
00:04:07,330 --> 00:04:10,510
>> Per questo abbiamo creato quel tavolo per
si e dato i comandi SQL

78
00:04:10,510 --> 00:04:12,770
da eseguire per creare quella
tabella nel proprio database,

79
00:04:12,770 --> 00:04:15,290
ma c'è in realtà sono dati in esso ancora.

80
00:04:15,290 --> 00:04:19,600
Piuttosto, si sta andando ad avere per
scaricare us.zip o zip qualsiasi paese

81
00:04:19,600 --> 00:04:21,500
il file da questo URL lì.

82
00:04:21,500 --> 00:04:24,940
E poi si sta andando ad avere per scrivere
uno script di riga di comando in PHP che è

83
00:04:24,940 --> 00:04:28,420
andando ad aprire quel testo
presentare, iterare su sue linee,

84
00:04:28,420 --> 00:04:31,180
e per ciascuno degli
quelle righe fanno un inserto

85
00:04:31,180 --> 00:04:34,940
in che pone tavolo
nel vostro database MySQL.

86
00:04:34,940 --> 00:04:37,880
Così, alla fine di questo processo, ti
hanno eseguito lo script alla fine

87
00:04:37,880 --> 00:04:39,610
solo una volta in teoria.

88
00:04:39,610 --> 00:04:41,780
In realtà, probabilmente vi
eseguire un mucchio di volte

89
00:04:41,780 --> 00:04:45,460
durante il tentativo di risolvere vari bug.

90
00:04:45,460 --> 00:04:48,440
>> In ultima analisi, si sta andando ad avere un
davvero grande database con migliaia

91
00:04:48,440 --> 00:04:50,139
e migliaia di righe geografiche.

92
00:04:50,139 --> 00:04:52,930
Poi si sta andando a mettere che l'importazione
sceneggiatura da parte una volta che sta funzionando

93
00:04:52,930 --> 00:04:55,140
e il database è bello
e corretto, e poi

94
00:04:55,140 --> 00:04:58,880
si sta andando a passare alla realtà
attuazione del mashup stesso.

95
00:04:58,880 --> 00:05:01,670
Il mashup sta a guardare
un po 'di qualcosa come questo.

96
00:05:01,670 --> 00:05:05,165
A mashup.cs50.net, abbiamo
avere una soluzione personale

97
00:05:05,165 --> 00:05:06,990
che sembra un po 'qualcosa di simile.

98
00:05:06,990 --> 00:05:11,070
Anzi, se clicco su questo giornale
icona per Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
vedrete una filatura
icona brevemente e poi

100
00:05:13,300 --> 00:05:16,370
un elenco ordinato, un
elenco puntato di articoli

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

102
00:05:18,280 --> 00:05:20,352
Se clicco su Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Ci vediamo la stessa di quella città.

104
00:05:21,685 --> 00:05:24,174
E se clicco su
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
potrebbe non esserci alcun
notizie da Watertown,

106
00:05:26,090 --> 00:05:28,630
così vedrete qualcosa
come lento giorno di notizie.

107
00:05:28,630 --> 00:05:32,140
>> Ora, nel frattempo, in alto a sinistra sono
alcuni familiari di Google Maps controlli

108
00:05:32,140 --> 00:05:34,980
per farvi rimpicciolire, pan
su, giù, sinistra, destra e,

109
00:05:34,980 --> 00:05:37,360
ma anche una casella di ricerca che abbiamo messo lì.

110
00:05:37,360 --> 00:05:40,910
Quindi, se cerco, francamente,
l'unico altro CAP Lo so,

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

112
00:05:45,020 --> 00:05:48,550
Quando cliccato mi porta a
California e un mazzo intero

113
00:05:48,550 --> 00:05:50,369
di notizie su Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Ora notare, anche, che cosa è successo lì.

115
00:05:51,910 --> 00:05:57,040
Se questa ricerca di tempo per 02138 o anche
Cambridge Massachusetts virgola o qualche

116
00:05:57,040 --> 00:06:00,300
variante di ciò, si ottiene un
poco discesa completamento automatico.

117
00:06:00,300 --> 00:06:03,840
Ora questo sta usando un plugin
per una libreria chiamata jQuery,

118
00:06:03,840 --> 00:06:05,732
e che plugin viene chiamato typeahead.

119
00:06:05,732 --> 00:06:07,440
Leggiamo semplicemente attraverso
la documentazione,

120
00:06:07,440 --> 00:06:13,150
Scaricato il .js file integrato
nel codice di distribuzione in modo da

121
00:06:13,150 --> 00:06:16,900
in ultima analisi, in grado di scrivere il codice che
riempie quel menu a tendina con l'auto

122
00:06:16,900 --> 00:06:19,350
selezioni o i suggerimenti automatici.

123
00:06:19,350 --> 00:06:23,820
>> Ora il codice di distribuzione, però, che
avete ricevuto non fa quasi più.

124
00:06:23,820 --> 00:06:26,860
È possibile ottenere la Google Map incorporato, e
si ottengono i controlli in alto a sinistra,

125
00:06:26,860 --> 00:06:28,240
e si ottiene la casella di ricerca.

126
00:06:28,240 --> 00:06:32,760
Ma se digito qualcosa di simile
02138, nessun luogo si trovano ancora.

127
00:06:32,760 --> 00:06:34,730
In modo che sara '
uno dei nostri obiettivi qui.

128
00:06:34,730 --> 00:06:37,430
Inoltre, se si prende un passo
indietro e guardare la mappa stessa,

129
00:06:37,430 --> 00:06:38,950
non ci sono notizie di sorta.

130
00:06:38,950 --> 00:06:41,780
Anche se mi scatto e
trascinamento, senza marcatori realtà

131
00:06:41,780 --> 00:06:45,560
appaiono notizie perché
sfida è lasciato per voi pure.

132
00:06:45,560 --> 00:06:48,490
>> Diamo uno sguardo allora
il codice di distribuzione.

133
00:06:48,490 --> 00:06:51,460
Una volta scaricato
pset8.zip e decompresso esso

134
00:06:51,460 --> 00:06:54,430
nella directory vhost
nel CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
vedrete questi
directory qui dentro.

136
00:06:56,550 --> 00:07:00,200
Bin-- che generalmente sta per
binario per programs-- eseguibile

137
00:07:00,200 --> 00:07:04,870
include, come in pset7, alcuni PHP
i file che includono altri file,

138
00:07:04,870 --> 00:07:06,710
poi pubblico, che è
i file che devono

139
00:07:06,710 --> 00:07:09,369
per essere accessibile al pubblico
a un utente con un browser.

140
00:07:09,369 --> 00:07:11,410
Diamo uno sguardo al
bin, e faremo

141
00:07:11,410 --> 00:07:13,890
vedere che c'è un file
c'è già chiamato Import.

142
00:07:13,890 --> 00:07:17,591
Se apriamo questo con gedit, vedremo
che, purtroppo, non c'è molto

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

144
00:07:18,090 --> 00:07:20,250
Tutto quello che c'è, però,
è una faccenda in alto

145
00:07:20,250 --> 00:07:23,410
che specifica che
interpreter-- in questo caso PHP--

146
00:07:23,410 --> 00:07:25,759
dovrebbe essere utilizzato per effettivamente
eseguire questo file.

147
00:07:25,759 --> 00:07:27,550
Ma allora dove si dice
TODO è dove sei

148
00:07:27,550 --> 00:07:31,130
bisogno di andare a scrivere del codice
che richiede probabilmente il config

149
00:07:31,130 --> 00:07:35,820
file è nella directory include
come abbiamo fatto prima con i file PHP.

150
00:07:35,820 --> 00:07:38,180
E poi si sta andando a
necessario aprire in qualche modo su

151
00:07:38,180 --> 00:07:41,920
us.text che presumibilmente
hanno già decompresso.

152
00:07:41,920 --> 00:07:44,690
Poi si sta andando ad avere per
iterare sulle righe in quel file,

153
00:07:44,690 --> 00:07:47,800
magari utilizzando alcune delle funzioni
suggerito nelle specifiche.

154
00:07:47,800 --> 00:07:51,390
Quindi inserire ciascuno di questi
linee in database MySQL

155
00:07:51,390 --> 00:07:54,940
utilizzando la funzione di query, che
abbiamo ancora una volta che hai fornito with--

156
00:07:54,940 --> 00:07:58,010
o almeno una variante
ciò in functions.php,

157
00:07:58,010 --> 00:07:59,560
che vedremo in un attimo.

158
00:07:59,560 --> 00:08:04,430
>> Ora chiudiamo l'importazione e tornare alla
la nostra directory e questa volta andare in

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

160
00:08:05,300 --> 00:08:09,210
E se lo faccio ls lì, vedrete
tre file piuttosto come un problema Set 7.

161
00:08:09,210 --> 00:08:13,760
E diamo un rapido sguardo,
per esempio, in config.php.

162
00:08:13,760 --> 00:08:16,730
Lì, è meno linee
rispetto a prima, e

163
00:08:16,730 --> 00:08:20,712
Sembra questo file include
constants.php e functions.php.

164
00:08:20,712 --> 00:08:23,670
Stiamo usando un po 'diverso
tecnica questa volta effettivamente

165
00:08:23,670 --> 00:08:30,910
specificano che questi file sono relativi
alla directory corrente __ DIR__

166
00:08:30,910 --> 00:08:35,280
rappresenta qualsiasi directory presente
file config.php, è di per sé in.

167
00:08:35,280 --> 00:08:37,600
Quindi questo è più
modo esplicito di specificare

168
00:08:37,600 --> 00:08:40,100
quali altri file che si desidera richiedere.

169
00:08:40,100 --> 00:08:44,020
>> Ora, se chiudo questo file e
aprire constants.php invece,

170
00:08:44,020 --> 00:08:47,430
vedrete un file molto ricorda
per di così, anche se Problem Set 7

171
00:08:47,430 --> 00:08:50,050
con un altro database chiamato pset8.

172
00:08:50,050 --> 00:08:54,020
Infine, in functions.php,
vedremo solo una funzione

173
00:08:54,020 --> 00:08:55,942
questa volta chiamato query.

174
00:08:55,942 --> 00:08:59,150
Questa è quasi la stessa, tranne gestiamo
errori questa volta un po '

175
00:08:59,150 --> 00:09:02,860
diversamente, ma è l'uso è
gli stessi problemi impostare sette.

176
00:09:02,860 --> 00:09:08,090
>> Ora torniamo nel nostro pset8
directory, andare in pubblico, e in là

177
00:09:08,090 --> 00:09:14,420
se faccio ls, vedrete questo--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
e update.php-- tutti i file.

179
00:09:16,940 --> 00:09:22,010
E poi il font CSS, img, e
directory js abbastanza come pset7.

180
00:09:22,010 --> 00:09:24,660
>> Diamo uno sguardo a
index.html, che è

181
00:09:24,660 --> 00:09:27,290
sta per essere davvero il
punto di accesso al smashup.

182
00:09:27,290 --> 00:09:31,820
Ora in index.html, vedrete un intero
mucchio di elementi di collegamento nella testa,

183
00:09:31,820 --> 00:09:36,540
in particolare, per il bootstrap per il nostro
CSS seguito da un intero gruppo di scrittura

184
00:09:36,540 --> 00:09:41,520
tag per le cose come le mappe, API
sé, un marcatore speciale con etichetta

185
00:09:41,520 --> 00:09:44,950
utility che abbiamo menzionato in
specifica è a vostra disposizione,

186
00:09:44,950 --> 00:09:48,420
jQuery sé, bootstrap
stesso, e un'altra libreria

187
00:09:48,420 --> 00:09:50,990
chiamato sottolineatura che
si parla nelle specifiche.

188
00:09:50,990 --> 00:09:57,031
Underscore.js come jquery.js
è una libreria JavaScript

189
00:09:57,031 --> 00:10:00,280
che ha un sacco di funzionalità
che un sacco di gente nella volontà mondo

190
00:10:00,280 --> 00:10:02,020
esisteva in JavaScript sé.

191
00:10:02,020 --> 00:10:04,560
Quindi tutti questi sono
in realtà molto popolare.

192
00:10:04,560 --> 00:10:07,140
Abbiamo anche accennato typeahead
che è la libreria che

193
00:10:07,140 --> 00:10:11,180
fa che autocomplete discesa e
infine, un link al nostro JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Nel frattempo, e forse
per fortuna, questo mashup

195
00:10:13,880 --> 00:10:17,550
è guidato da relativamente poco
HTML qui in basso.

196
00:10:17,550 --> 00:10:22,330
Si noti che abbiamo specificato un div in
il nostro corpo di liquido classe container.

197
00:10:22,330 --> 00:10:24,610
Questo, per bootstrap del
documentazione, basta

198
00:10:24,610 --> 00:10:29,840
significa che questo div sta per riempire il
viewport o la finestra del browser completamente.

199
00:10:29,840 --> 00:10:33,020
>> Nel frattempo, al di sotto che abbiamo un div
che è aperto e immediatamente chiuso

200
00:10:33,020 --> 00:10:34,790
con l'ID univoco della mappa.

201
00:10:34,790 --> 00:10:37,400
Questo è ora da Google
Documentazione Maps

202
00:10:37,400 --> 00:10:42,490
per la sua API, per cui ho semplicemente bisogno di
avere un div vuoto in cui iniettare,

203
00:10:42,490 --> 00:10:44,470
in ultima analisi, un vero e Google Maps.

204
00:10:44,470 --> 00:10:46,310
Ma più che in appena un po '.

205
00:10:46,310 --> 00:10:48,850
>> Infine, c'è un modulo
all'interno di qui che

206
00:10:48,850 --> 00:10:52,930
implementa la casella di testo in alto in alto a sinistra
in nostra interfaccia per la ricerca.

207
00:10:52,930 --> 00:10:54,730
Si noti che abbiamo usato
un po 'di bootstrap

208
00:10:54,730 --> 00:10:57,670
qui too-- cose come
forma-linea e forma-gruppo.

209
00:10:57,670 --> 00:11:00,080
Abbiamo dato il primo
ID univoco del modulo.

210
00:11:00,080 --> 00:11:04,510
E poi, alla fine, io in realtà sono
un tipo di ingresso, che è abbastanza familiare,

211
00:11:04,510 --> 00:11:06,440
il cui ID è q.

212
00:11:06,440 --> 00:11:07,230
Solo una convenzione.

213
00:11:07,230 --> 00:11:09,234
Q per query-- potrebbe avere
stato chiamato niente.

214
00:11:09,234 --> 00:11:11,400
E poi il segnaposto,
nel frattempo, è la città, lo stato,

215
00:11:11,400 --> 00:11:16,200
e il codice postale che si potrebbe ricordare
vedendo nel nostro mashup demo precedente.

216
00:11:16,200 --> 00:11:17,980
Chiudiamo questo file.

217
00:11:17,980 --> 00:11:24,460
>> Ora date un'occhiata ai file PHP che
attendere e quindi i file JavaScript.

218
00:11:24,460 --> 00:11:27,700
Nelle nostre file PHP, abbiamo
già implementato per voi,

219
00:11:27,700 --> 00:11:29,960
per esempio, gli aggiornamenti.

220
00:11:29,960 --> 00:11:35,060
Update.php-- noi non spendere un enorme
quantità di tempo su qui-- in poche parole

221
00:11:35,060 --> 00:11:38,400
è il file che il nostro
Codice JavaScript sta andando

222
00:11:38,400 --> 00:11:41,610
contattare via AJAX che
tecnica asincrona che è

223
00:11:41,610 --> 00:11:45,980
costruita in JavaScript in questi giorni che è
andando a permetterci di chiedere update.php

224
00:11:45,980 --> 00:11:47,410
per ulteriori informazioni.

225
00:11:47,410 --> 00:11:50,045
>> In particolare, in qualsiasi momento
l'utente trascina la mappa

226
00:11:50,045 --> 00:11:53,310
o esegue una ricerca che salta
l'utente in un'altra posizione,

227
00:11:53,310 --> 00:11:55,250
il nostro codice JavaScript,
come vedremo tra poco, è

228
00:11:55,250 --> 00:11:59,610
chiamerà update.php
e chiedere 10 o giù di lì marcatori

229
00:11:59,610 --> 00:12:02,630
all'interno della finestra base
sulle coordinate GPS

230
00:12:02,630 --> 00:12:06,510
della parte superiore e inferiore
angoli di quella mappa.

231
00:12:06,510 --> 00:12:10,520
Possiamo poi ripopolare la mappa ora che
l'utente ha spostato la schermata per

232
00:12:10,520 --> 00:12:14,210
per vedere 10 probabilmente nuovo
marcatori per diverse città.

233
00:12:14,210 --> 00:12:18,340
Nel frattempo, questo file è in ultima analisi,
andando ad eseguire una query SQL

234
00:12:18,340 --> 00:12:21,680
contro la nostra banca dati
luoghi da tavolo chiamato che

235
00:12:21,680 --> 00:12:26,380
sta per tornare quelli
10 o meno punti.

236
00:12:26,380 --> 00:12:32,620
>> Nel frattempo, in articles.php, è un altro
file che abbiamo scritto nella sua interezza.

237
00:12:32,620 --> 00:12:35,820
E 'molto simile nello spirito
Funzione CERCA di Problem Set 7,

238
00:12:35,820 --> 00:12:39,450
che contattato Yahoo Finance per voi.

239
00:12:39,450 --> 00:12:43,710
Questo file contatti di Google News
per voi, in ultima analisi, afferrando

240
00:12:43,710 --> 00:12:46,050
un leggibile macchina
version-- in qualcosa

241
00:12:46,050 --> 00:12:49,720
chiamato RSS format-- della notizia
per Cambridge o Beverly Hills

242
00:12:49,720 --> 00:12:52,880
o qualunque paese che hai cercato
per basata su quella geoparameter.

243
00:12:52,880 --> 00:12:57,250
Noi analizziamo quella RSS, che è solo un
tipo di linguaggio di markup chiamato XML,

244
00:12:57,250 --> 00:13:00,740
e poi abbiamo effettivamente
restituirlo al vostro browser

245
00:13:00,740 --> 00:13:03,570
e al codice JavaScript,
in particolare, in un formato chiamato

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

247
00:13:06,097 --> 00:13:08,180
Ora si vedrà nel
specification-- segnaliamo voi

248
00:13:08,180 --> 00:13:10,720
a come si può effettivamente vedere
alcuni dei JSON venuta back--

249
00:13:10,720 --> 00:13:15,210
che questa funzionalità in ultima analisi,
consente di inserire quei menu popup così

250
00:13:15,210 --> 00:13:16,960
che quando si fa clic
su un marcatore nella mappa

251
00:13:16,960 --> 00:13:19,430
in realtà vede un sacco
di proiettili, ciascuna delle quali

252
00:13:19,430 --> 00:13:21,020
link ad un articolo.

253
00:13:21,020 --> 00:13:25,000
>> Ora diamo un'occhiata a un ultimo
File PHP che, per fortuna, non

254
00:13:25,000 --> 00:13:27,970
hanno molto andare on--
solo una bella grande TODO.

255
00:13:27,970 --> 00:13:32,170
In questo momento questo file dichiara
un array chiamato luoghi.

256
00:13:32,170 --> 00:13:35,980
E poi, in definitiva, stampe
che array in JSON format--

257
00:13:35,980 --> 00:13:38,720
pretty-stampa solo in modo che
le cose sono più facili da eseguire il debug.

258
00:13:38,720 --> 00:13:41,480
Purtroppo, in
mezzo c'è questo TODO,

259
00:13:41,480 --> 00:13:46,890
che chiede di cercare il
database per posti che corrispondono a un geo HTTP

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

261
00:13:47,490 --> 00:13:49,865
>> E, in effetti, questo sta per
essere uno dei vostri challenges--

262
00:13:49,865 --> 00:13:54,240
per implementare questa funzionalità qui
in modo che quando si contattare questo file con

263
00:13:54,240 --> 00:14:00,610
un URL del tipo di ricerca. php? geo = qualcosa,
il codice alla fine tornare a JSON

264
00:14:00,610 --> 00:14:05,020
array di tutti i posti nel vostro
tabella di database che corrisponde a quella di ingresso.

265
00:14:05,020 --> 00:14:08,960
Quindi, se l'utente a Cambridge,
il file qui search.php

266
00:14:08,960 --> 00:14:12,680
dovrebbe infine restituire un array di JSON
per tutte le partite di Cambridge,

267
00:14:12,680 --> 00:14:16,990
che potrebbe essere in Massachusetts
ma potrebbe essere anche altrove.

268
00:14:16,990 --> 00:14:21,040
>> Infine, diamo uno sguardo a due
i file che sono ultimately-- statico

269
00:14:21,040 --> 00:14:23,680
il file CSS e file JavaScript.

270
00:14:23,680 --> 00:14:26,779
Se vado nella nostra directory CSS,
c'è un sacco di file lì,

271
00:14:26,779 --> 00:14:28,070
ma la maggior parte di essi sono librerie.

272
00:14:28,070 --> 00:14:31,530
Io vado a dare un'occhiata,
in particolare, a styles.css,

273
00:14:31,530 --> 00:14:35,440
che è il nostro CSS globale che è
andando a stilizzare tutta questa mashup.

274
00:14:35,440 --> 00:14:38,840
Lascio a voi di leggere attraverso
i commenti qui, ma, in poche parole,

275
00:14:38,840 --> 00:14:43,490
questo è il CSS che assicura che la nostra
mashup, per impostazione predefinita, fuori dalla scatola,

276
00:14:43,490 --> 00:14:46,950
appare esattamente il modo in cui vogliamo it--
con la mappa riempimento della porta di visualizzazione

277
00:14:46,950 --> 00:14:49,720
e con la ricerca
box in alto in alto a sinistra.

278
00:14:49,720 --> 00:14:52,870
Abbiamo anche preso la libertà di
stilizzazione che typeahead discesa

279
00:14:52,870 --> 00:14:55,170
menù un po 'pure.

280
00:14:55,170 --> 00:14:58,030
>> Il file più importante
forse per questo problema impostare

281
00:14:58,030 --> 00:15:01,070
è quest'ultimo, scripts.js.

282
00:15:01,070 --> 00:15:03,800
All'interno della directory JS
è anche più file.

283
00:15:03,800 --> 00:15:08,090
Tutti loro sono file di libreria
tranne per questo, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Se apriamo questo in su, diamo il nostro
ultimo tour attraverso le funzioni che

285
00:15:11,460 --> 00:15:13,820
sono costruiti in questo file
per voi e per l'attenzione chiamata

286
00:15:13,820 --> 00:15:16,200
alle TODOs che ci attendono.

287
00:15:16,200 --> 00:15:19,110
>> Nella parte superiore di questo file,
sono tre variabili globali.

288
00:15:19,110 --> 00:15:22,910
Una per una mappa, che sta per
essere un riferimento alla nostra mappa Google.

289
00:15:22,910 --> 00:15:25,510
Si può pensare di esso
sorta di come un puntatore.

290
00:15:25,510 --> 00:15:27,710
Nel frattempo, abbiamo
un'altra variabile globale

291
00:15:27,710 --> 00:15:31,500
chiamato info, che sembra essere
memorizzare il valore di ritorno di una chiamata

292
00:15:31,500 --> 00:15:34,170
di nuovo google.maps.InfoWindow.

293
00:15:34,170 --> 00:15:37,835
JavaScript supporta oggetti
sono molto simile nello spirito a Struts.

294
00:15:37,835 --> 00:15:40,250
E che questa linea per
i nostri scopi sta facendo

295
00:15:40,250 --> 00:15:42,820
è la creazione di un nuovo Info
Finestra in memoria e poi

296
00:15:42,820 --> 00:15:46,330
mantenendo intorno a un riferimento
ad essa in una variabile denominata Info.

297
00:15:46,330 --> 00:15:48,330
E tra questi,
nel frattempo, è ciò che appare

298
00:15:48,330 --> 00:15:51,060
essere un JavaScript vuota
array chiamato marcatori.

299
00:15:51,060 --> 00:15:55,392
Tutte queste icone di giornale, o
potrebbe scegliere un'altra icona del tutto,

300
00:15:55,392 --> 00:15:57,350
stanno per essere memorizzati
in ultima analisi, in questo array

301
00:15:57,350 --> 00:16:01,570
in modo da poter facilmente aggiungere
la mappa e li rimuove dalla mappa.

302
00:16:01,570 --> 00:16:03,990
>> Ora diamo scorrere verso il basso
un po 'e mago

303
00:16:03,990 --> 00:16:07,690
attraverso il codice che sta per essere
eseguito non appena il DOM o il documento

304
00:16:07,690 --> 00:16:10,480
modello a oggetti o la
pagina stessa è pronta.

305
00:16:10,480 --> 00:16:12,942
Ricordiamo che questa sintassi
qui specifica semplicemente

306
00:16:12,942 --> 00:16:14,900
che il codice seguente
deve essere eseguito solo

307
00:16:14,900 --> 00:16:17,840
quando il browser è terminato
caricare tutto il resto.

308
00:16:17,840 --> 00:16:19,750
>> Per prima cosa dichiariamo una
tutta una serie di stili,

309
00:16:19,750 --> 00:16:22,410
che finiscono stilizzazione
la mappa secondo le specifiche.

310
00:16:22,410 --> 00:16:24,790
Abbiamo poi dichiariamo un
sacco di opzioni,

311
00:16:24,790 --> 00:16:28,630
che personalizzare ulteriormente il Google
mappa che stiamo per incorporare.

312
00:16:28,630 --> 00:16:32,090
Utilizziamo quindi un po 'di codice jQuery,
che è spiegato in un po 'più in dettaglio

313
00:16:32,090 --> 00:16:35,000
nelle specifiche, per afferrare
tale elemento, carta-tela

314
00:16:35,000 --> 00:16:36,980
che abbiamo identificato in modo univoco.

315
00:16:36,980 --> 00:16:40,640
E poi questa linea qui è
ciò che sembra a noi dare magicamente

316
00:16:40,640 --> 00:16:43,560
una mappa di Google all'interno di
la nostra applicazione,

317
00:16:43,560 --> 00:16:47,020
memorizzare un riferimento a tale
in quella variabile denominata mappa.

318
00:16:47,020 --> 00:16:50,550
>> Infine, qui registriamo
quello che chiama un ascoltatore.

319
00:16:50,550 --> 00:16:54,690
Pensate modo back--, modo
back-- in settimana zero nel CS50

320
00:16:54,690 --> 00:16:57,430
quando abbiamo guardato Scratch e
il suo sostegno attraverso una passeggiata

321
00:16:57,430 --> 00:16:59,935
through per cose chiamate
eventi e trasmissioni.

322
00:16:59,935 --> 00:17:01,810
Non potrebbe avere usato
da soli, ma è

323
00:17:01,810 --> 00:17:03,900
un meccanismo per cui un
il browser in questo caso

324
00:17:03,900 --> 00:17:07,940
può ottenere la nostra attenzione quando è
pronto ad eseguire effettivamente codice.

325
00:17:07,940 --> 00:17:12,170
In questo caso, sta andando ad ascoltare
alla mappa per un evento chiamato inattività.

326
00:17:12,170 --> 00:17:14,930
Ciò significa che il browser ha
terminato il caricamento della mappa di Google.

327
00:17:14,930 --> 00:17:18,380
A questo punto una funzione chiamata
configure dovrebbe in ultima analisi,

328
00:17:18,380 --> 00:17:19,339
essere eseguito.

329
00:17:19,339 --> 00:17:22,510
Tale funzione, configurare,
vedremo, è scritto da noi.

330
00:17:22,510 --> 00:17:24,550
>> Ora qui è una funzione
che, purtroppo,

331
00:17:24,550 --> 00:17:25,871
è solo un marcatore TODO add.

332
00:17:25,871 --> 00:17:28,620
Per le specifiche. si sta andando ad avere bisogno
scrivere il codice che effettivamente

333
00:17:28,620 --> 00:17:32,840
aggiunge un marker-- se sembra
come un giornale, o una puntina,

334
00:17:32,840 --> 00:17:35,360
o qualcosa else-- alla mappa di Google.

335
00:17:35,360 --> 00:17:37,720
Ecco ora è che la funzione
chiamato configure.

336
00:17:37,720 --> 00:17:40,390
Lascio a voi di leggere
attraverso questo più in dettaglio,

337
00:17:40,390 --> 00:17:42,600
ma si rende conto che aggiungiamo
un mazzo più ascoltatori

338
00:17:42,600 --> 00:17:46,620
in modo da poter eseguire il codice quando il
utente fa clic su e trascina la mappa.

339
00:17:46,620 --> 00:17:50,730
Abbiamo anche il codice qui che
inizializza quel plugin typeahead

340
00:17:50,730 --> 00:17:53,120
in modo che la discesa
Menu effettivamente funziona.

341
00:17:53,120 --> 00:17:55,690
>> Ma concentriamoci solo su un
paio di posti qui.

342
00:17:55,690 --> 00:17:57,590
In particolare, questo da fare qui.

343
00:17:57,590 --> 00:18:00,410
Mi rimetto alla linea
la documentazione e le specifiche

344
00:18:00,410 --> 00:18:02,530
per come compilare questo TODO.

345
00:18:02,530 --> 00:18:05,890
Ma in poche parole, questa biblioteca
typeahead consente di passare

346
00:18:05,890 --> 00:18:09,790
in quello che è noto come modello,
che ha alcuni segnaposto variabili

347
00:18:09,790 --> 00:18:13,690
molto simile nello spirito al di printf%. * s.

348
00:18:13,690 --> 00:18:16,030
Ma in questo caso, la
modello per le specifiche

349
00:18:16,030 --> 00:18:18,760
consente di specificare
quali variabili vuoi

350
00:18:18,760 --> 00:18:24,880
per iniettare dai dati che è venuto
indietro da qualcosa come il PHP

351
00:18:24,880 --> 00:18:29,810
file che hai scritto
che emettono uscita JSON.

352
00:18:29,810 --> 00:18:35,170
>> Ora qui rendiamo conto che siamo
ascolto per le selezioni typeahead

353
00:18:35,170 --> 00:18:38,050
quando l'utente effettua effettivamente
una ricerca e seleziona un valore.

354
00:18:38,050 --> 00:18:40,270
Questo è il modo in cui siamo realmente
andare ad ascoltare per quello

355
00:18:40,270 --> 00:18:42,250
ed eseguire del codice di conseguenza.

356
00:18:42,250 --> 00:18:45,300
Poi continuiamo a configurare
il mashup solo un po '.

357
00:18:45,300 --> 00:18:48,000
E, in ultima analisi, che noi chiamiamo
questo aggiornamento funzione.

358
00:18:48,000 --> 00:18:49,640
Esso aggiorna i marcatori sullo schermo.

359
00:18:49,640 --> 00:18:51,529
Più su quello in un attimo.

360
00:18:51,529 --> 00:18:53,570
Nel frattempo, c'è un paio
piccole funzioni in qui.

361
00:18:53,570 --> 00:18:56,820
Uno dei quali è che hideInfo
semplicemente chiude il InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Un'altra funzione qui, che alla fine
non sarà troppo lungo, togliere i marcatori.

363
00:19:00,020 --> 00:19:03,580
Che sta per annullare qualunque
la funzione marcatore add fa.

364
00:19:03,580 --> 00:19:04,960
E poi qui è la ricerca.

365
00:19:04,960 --> 00:19:08,610
E questo è interessante perché noi
hanno scritto il codice JavaScript che è

366
00:19:08,610 --> 00:19:13,490
andando a parlare con search.php sulla
server e tornare qualche risposta.

367
00:19:13,490 --> 00:19:16,110
>> Lei, naturalmente, sarà ancora
necessario implementare search.php,

368
00:19:16,110 --> 00:19:18,310
ma abbiamo implementato il
Codice JavaScript che è

369
00:19:18,310 --> 00:19:22,480
andando a gestire realmente eseguire
ricerche da quella casella di testo.

370
00:19:22,480 --> 00:19:25,340
In particolare, avviso
che questa funzione qui,

371
00:19:25,340 --> 00:19:29,160
Ricerca, non chiamare search.php
con un metodo chiamato

372
00:19:29,160 --> 00:19:31,072
ottenere JSON, che abbiamo visto in conferenza.

373
00:19:31,072 --> 00:19:32,780
E la sintassi qui
è un po 'diverso

374
00:19:32,780 --> 00:19:37,110
da lezione in che stiamo usando
jQuery cosiddetta interfaccia promessa.

375
00:19:37,110 --> 00:19:38,479
Più su che nelle specifiche.

376
00:19:38,479 --> 00:19:40,520
Questo significa semplicemente per la nostra
scopo ora che ci

377
00:19:40,520 --> 00:19:43,870
sono due funzioni speciali che
bisogno di chiamare con notazione punto

378
00:19:43,870 --> 00:19:46,230
qui subito dopo la chiamata ottiene JSON.

379
00:19:46,230 --> 00:19:47,510
Uno si chiama fatto.

380
00:19:47,510 --> 00:19:49,870
Uno si chiama fallire.

381
00:19:49,870 --> 00:19:51,790
Si può pensare a questi
come gestore successo

382
00:19:51,790 --> 00:19:54,960
e il gestore di fallimento appena
in caso qualcosa vada storto.

383
00:19:54,960 --> 00:19:57,760
>> Ora diamo un'occhiata all'ultimo
paio di funzioni in questo file.

384
00:19:57,760 --> 00:20:00,180
Quaggiù è una funzione
chiamato showInfo, che

385
00:20:00,180 --> 00:20:03,090
di visualizzare le informazioni in uno di quelli
piccole finestre informative che

386
00:20:03,090 --> 00:20:05,380
si apre quando l'utente fa clic su un marcatore.

387
00:20:05,380 --> 00:20:08,470
Quaggiù ulteriormente è
che funzione di aggiornamento

388
00:20:08,470 --> 00:20:10,510
che abbiamo realizzato per voi.

389
00:20:10,510 --> 00:20:15,250
Esso determina i limiti della mappa.

390
00:20:15,250 --> 00:20:19,360
Quali sono le coordinate GPS della sua
nord-est e sud-ovest angoli qui.

391
00:20:19,360 --> 00:20:22,780
Abbiamo preparato alcuni parametri HDP
qui e poi passati definitiva

392
00:20:22,780 --> 00:20:26,160
a update.php, che abbiamo
inoltre implementato per voi.

393
00:20:26,160 --> 00:20:31,390
Che ottiene infine indietro alcuni JSON
dal file denominato update.php

394
00:20:31,390 --> 00:20:34,050
e poi rimuove qualsiasi
indicatori sullo schermo

395
00:20:34,050 --> 00:20:36,650
e poi itera su
il dato che è tornato

396
00:20:36,650 --> 00:20:40,350
da update.php, che
ancora una volta è solo una matrice JSON.

397
00:20:40,350 --> 00:20:45,130
E poi aggiunge infine un marcatore per
ciascuno di questi luoghi, la manipolazione fallimento

398
00:20:45,130 --> 00:20:47,750
o errori che potrebbero benissimo accadere.

399
00:20:47,750 --> 00:20:51,550
>> Ora solo per darvi un assaggio di come si
potrebbe andare sul debug di questo progetto,

400
00:20:51,550 --> 00:20:55,420
rendo conto che ho aperto in
avanzare questa scheda qui a questo URL,

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

402
00:21:01,320 --> 00:21:04,050
Ora, di nuovo, articoli su
PHP abbiamo implementato per voi

403
00:21:04,050 --> 00:21:06,320
quindi questo non è tanto
quello che userete

404
00:21:06,320 --> 00:21:08,190
per eseguire il debug, ma piuttosto la tecnica.

405
00:21:08,190 --> 00:21:10,590
Si noti che ho cercato
CAP di Cambridge,

406
00:21:10,590 --> 00:21:15,260
e ho ottenuto di nuovo, anzi, un JSON
array di oggetti JSON all'interno del quale

407
00:21:15,260 --> 00:21:17,640
sono due collegamento keys-- e titolo.

408
00:21:17,640 --> 00:21:19,860
>> Così questa funzionalità
già lavora per voi.

409
00:21:19,860 --> 00:21:24,330
Ma questa tecnica di manualmente andare
a un URL come questo per qualcosa come

410
00:21:24,330 --> 00:21:31,710
search.php? geo = cambridge o 02138 o
qualunque sia l'utente ha digitato dovrebbe

411
00:21:31,710 --> 00:21:35,770
rivelarsi prezioso come voi, voi stessi, provate
per capire esattamente se e perché

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

413
00:21:38,510 --> 00:21:41,720
>> In definitiva quindi, si ha
alcuni TODOs davanti a voi.

414
00:21:41,720 --> 00:21:44,250
Stai andando a primi attrezzi
quello script di importazione che

415
00:21:44,250 --> 00:21:46,520
legge in us.text nel database.

416
00:21:46,520 --> 00:21:48,760
Stai andando poi ad avere bisogno
implementare search.php

417
00:21:48,760 --> 00:21:51,320
in modo che si comporta esattamente come specificato.

418
00:21:51,320 --> 00:21:54,170
Stai andando poi a voler
di concentrarsi su scripts.js

419
00:21:54,170 --> 00:21:57,520
e implementa definitiva
quelli paio di Todos,

420
00:21:57,520 --> 00:21:59,950
anche per configure
e tale modello,

421
00:21:59,950 --> 00:22:03,220
aggiungere marcatori, rimuovere i marcatori, e
quindi durare, ma non meno importante, un

422
00:22:03,220 --> 00:22:04,330
tocco personale.

423
00:22:04,330 --> 00:22:07,477
>> Una volta che hai il tuo lavoro mashup
piuttosto come la nostra, l'obiettivo a portata di mano

424
00:22:07,477 --> 00:22:09,560
è per voi di aggiungere un personal
tocca al tuo mashup,

425
00:22:09,560 --> 00:22:11,290
se è estetico o funzionale.

426
00:22:11,290 --> 00:22:13,950
Prendete il mashup mai così
un po 'al livello successivo.

427
00:22:13,950 --> 00:22:18,330
Finché si spinge al di là
la familiarità con le specifiche sé

428
00:22:18,330 --> 00:22:20,840
e prendere una tecnica
nuovo, anche se è solo

429
00:22:20,840 --> 00:22:25,610
qualcosa di estetica come cambiare la
il layout della mappa che si sta utilizzando,

430
00:22:25,610 --> 00:22:28,070
la portata che ci aspettiamo
sarà soddisfatto.

431
00:22:28,070 --> 00:22:30,260
Che poi è un problema Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Restate sintonizzati per di più in
specifiche e buona fortuna

433
00:22:33,070 --> 00:22:36,400
affrontare questo, la tua ultima
Problema CS50 set mai.

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

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