1
00:00:00,000 --> 00:00:03,388
>> [Predvaja glasba]

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

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

4
00:00:10,180 --> 00:00:12,600
Oglejmo sprehod skozi
Problem Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
kar se dogaja, da vas izziv, da
črpati elementov za Google Zemljevide

6
00:00:15,880 --> 00:00:20,905
z elementi iz Google News in pretlačimo
jih skupaj v spletni programček, ki

7
00:00:20,905 --> 00:00:24,150
omogoča uporabniku iskanje
Načrt za novice lokalno

8
00:00:24,150 --> 00:00:26,780
na posebnih mestih,
mesta, in zip kode.

9
00:00:26,780 --> 00:00:31,040
To storite tako, da bomo
vključiti nekaj HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript in tehnika
splošno znana kot AJAX da

11
00:00:34,390 --> 00:00:36,850
ustvariti to Čelada
uporabniška izkušnja.

12
00:00:36,850 --> 00:00:38,920
>> Poglejmo najprej za sam Google Maps.

13
00:00:38,920 --> 00:00:41,220
To je seveda mogoče
seznanjeni vmesnik.

14
00:00:41,220 --> 00:00:45,070
Vendar se izkaže, da je Google Maps
zagotavlja tudi vlogo API--

15
00:00:45,070 --> 00:00:48,360
programiranje interface-- preko katerega
si lahko elemente Google Maps

16
00:00:48,360 --> 00:00:50,740
in jih vključiti v
lastne aplikacije.

17
00:00:50,740 --> 00:00:52,650
Dejansko je ves ta
Proces, boste

18
00:00:52,650 --> 00:00:55,140
da bi našli nekaj spletnih naslovov
še posebej koristno, da

19
00:00:55,140 --> 00:00:57,820
so navedeni v
Specifikacija Problem Set 8,

20
00:00:57,820 --> 00:01:00,980
posebej to Getting Started
Priročnik ali priročnik za razvijalce

21
00:01:00,980 --> 00:01:07,640
za Google Maps API različice 3 kot tudi
kot je Google Maps JavaScript API

22
00:01:07,640 --> 00:01:10,260
Referenčna v3, ki je
nekoliko bolj skrivnostne, da se glasi

23
00:01:10,260 --> 00:01:14,600
vendar ima dejansko vse nižji ravni
Podrobnosti o tem, kaj funkcije ali metode

24
00:01:14,600 --> 00:01:18,220
in predmetov in lastnosti ter
dogodki dejansko prihajajo z API,

25
00:01:18,220 --> 00:01:20,720
Zelo podobno v duhu
na [neslišno] straneh.

26
00:01:20,720 --> 00:01:23,480
>> Zdaj, če pogledamo
na Google News, boste

27
00:01:23,480 --> 00:01:25,370
morda videli znan vmesnik tukaj.

28
00:01:25,370 --> 00:01:29,350
Vendar se izkaže, da lahko tudi iskanje
Google News posebnih geografskih

29
00:01:29,350 --> 00:01:32,000
preko HTTP parametra imenovano geo.

30
00:01:32,000 --> 00:01:35,100
V bistvu, če sem povečavo
tu gor, boste videli, da

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

32
00:01:41,672 --> 00:01:43,630
In, seveda, če bom povečavo
ven, boste videli, da sem

33
00:01:43,630 --> 00:01:47,090
videti na strani z cel kup
pogledi na Cambridgeu, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Medtem, če sem dejansko spremenijo
URL ne sme biti poštna številka, kot je ta,

35
00:01:50,620 --> 00:01:55,580
ampak nekaj malo messier
kot Cambridgeu, Massachusetts +,

36
00:01:55,580 --> 00:02:00,740
kjer je plus način kodiranje
presledek v URL in pritisnite tipko Enter,

37
00:02:00,740 --> 00:02:02,907
boste videli, da sem dejansko
videti skoraj enako novic.

38
00:02:02,907 --> 00:02:05,489
Morda je to malo drugače
ker Cambridge dejansko

39
00:02:05,489 --> 00:02:06,910
ima več zip kode.

40
00:02:06,910 --> 00:02:09,410
Zdaj pa, kako naj vem, da je, in
v resnici, kako bi nekako

41
00:02:09,410 --> 00:02:12,940
tie mestom
zip kode v primeru I

42
00:02:12,940 --> 00:02:15,064
želijo, da se omogoči uporabniku
pogledati niti?

43
00:02:15,064 --> 00:02:17,480
No, izkaže se, da obstaja
Spletna stran tam imenuje

44
00:02:17,480 --> 00:02:20,060
geonames.org ki je
Pobuda, da imajo

45
00:02:20,060 --> 00:02:23,760
prosto dostopna baza podatkov o vseh
vrste geografskih informacij,

46
00:02:23,760 --> 00:02:27,040
ne le za ZDA, ampak tudi
za druge države, kot dobro.

47
00:02:27,040 --> 00:02:30,430
V bistvu, če grem na ta URL tukaj, ki
je omenjeno tudi v problemu, določenem

48
00:02:30,430 --> 00:02:34,510
specifikacija, boste to videli tri
seznam cel kup datotek zip

49
00:02:34,510 --> 00:02:36,400
od katerih lahko prenesete s tabo.

50
00:02:36,400 --> 00:02:39,900
V bistvu, ta problem določiti
boste prenesete us.zip.

51
00:02:39,900 --> 00:02:43,790
Zdaj v tej datoteki, je celotna
kup podatkov v besedilni obliki.

52
00:02:43,790 --> 00:02:47,760
Datoteke je zelo podobna
CSV-- vejico ločene vrednosti file--

53
00:02:47,760 --> 00:02:51,294
vendar se dejansko uporablja
Zavihki za označevanje polj.

54
00:02:51,294 --> 00:02:53,710
Zdaj, medtem, če pogledaš
Tukaj je tisto, kar sem poudaril,

55
00:02:53,710 --> 00:02:56,459
polja v tej datoteki se dogaja
da se stvari, kot oznak držav,

56
00:02:56,459 --> 00:02:58,980
poštne številke, imena krajev,
in nato, v določeni obliki

57
00:02:58,980 --> 00:03:04,230
ali drugih, države in občine,
skupnosti, in še več.

58
00:03:04,230 --> 00:03:06,630
V bistvu sem že
prenesli to datoteko v vnaprej.

59
00:03:06,630 --> 00:03:09,750
Dovolite mi, da gredo naprej in jo odprite here--
us.text-- in, seveda, boste

60
00:03:09,750 --> 00:03:16,660
vidim, če se pomaknite v vrstico 16792
boste videli nekaj zapisov za Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts in njegovih različnih zip kode.

62
00:03:19,120 --> 00:03:22,150
Kaj boste videli tudi, da je okrajno,
nekatere številke, ki res ne

63
00:03:22,150 --> 00:03:24,500
Razumem, ampak tudi vse
način, na desni strani,

64
00:03:24,500 --> 00:03:27,170
nekateri GPS coordinates--
širine in dolžine.

65
00:03:27,170 --> 00:03:30,440
To je le zaradi enega od
značilnosti Google Maps API

66
00:03:30,440 --> 00:03:33,670
je sposobnost zaznavanja
kje ste geografsko

67
00:03:33,670 --> 00:03:36,850
v zvezi z GPS koordinatami.

68
00:03:36,850 --> 00:03:40,210
>> Zdaj pa začnimo, da ugotovimo, kako
začetek vezanje te stvari skupaj.

69
00:03:40,210 --> 00:03:42,900
Mi smo dal cel
kup distribucije kode,

70
00:03:42,900 --> 00:03:44,970
kot tudi baze MySQL.

71
00:03:44,970 --> 00:03:49,100
V bistvu, če potegnem phpMyAdmin ob
že uvožena, kot ste prej bo,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, boste videli MySQL tabelo, ki
Izgleda to polje ID, država

73
00:03:54,800 --> 00:03:57,400
Koda, poštna številka, ime kraja in še več.

74
00:03:57,400 --> 00:04:00,490
Vrste vseh tistih
stolpcih I izvira preprosto

75
00:04:00,490 --> 00:04:03,870
z branjem readme.text
datoteke tukaj, ki je določena

76
00:04:03,870 --> 00:04:07,330
ali je polje število,
ali varchar ali podobno.

77
00:04:07,330 --> 00:04:10,510
>> Zato smo ustvarili to tabelo
vas in vam dal ukaze SQL

78
00:04:10,510 --> 00:04:12,770
izvajati ustvariti, da
Tabela v vaši zbirki podatkov,

79
00:04:12,770 --> 00:04:15,290
vendar pa je dejansko v njem ni podatkov še ni.

80
00:04:15,290 --> 00:04:19,600
Namesto tega boste morali
prenos us.zip ali zip koli države

81
00:04:19,600 --> 00:04:21,500
datoteko iz tega URL tam.

82
00:04:21,500 --> 00:04:24,940
In potem boš moral napisati
skripta ukazne vrstice v PHP, ki je

83
00:04:24,940 --> 00:04:28,420
bomo odprli to besedilo
datoteko, ponovitev čez svoje linije,

84
00:04:28,420 --> 00:04:31,180
in nato za vsako
te vrstice narediti vložek

85
00:04:31,180 --> 00:04:34,940
v to postavi mizo
V zbirki podatkov MySQL.

86
00:04:34,940 --> 00:04:37,880
Torej, na koncu tega procesa, boste
so zagnati skript koncu

87
00:04:37,880 --> 00:04:39,610
samo enkrat v teoriji.

88
00:04:39,610 --> 00:04:41,780
V resnici boste verjetno
to teči kup krat

89
00:04:41,780 --> 00:04:45,460
medtem ko poskuša popraviti različne žuželke.

90
00:04:45,460 --> 00:04:48,440
>> Konec koncev, boste morali
res velika baza podatkov z več tisoč

91
00:04:48,440 --> 00:04:50,139
in tisoče geografskih vrstic.

92
00:04:50,139 --> 00:04:52,930
Potem boš dal, da uvoza
script stran, ko je to delovalo

93
00:04:52,930 --> 00:04:55,140
in vaša podatkovna baza je lepo
in pravilno, in nato

94
00:04:55,140 --> 00:04:58,880
boste, da se premaknete na dejansko
izvajanje Mashup sam.

95
00:04:58,880 --> 00:05:01,670
Mashup bo pogledati
malo kaj takega.

96
00:05:01,670 --> 00:05:05,165
Na mashup.cs50.net smo
imamo rešitev osebja

97
00:05:05,165 --> 00:05:06,990
da izgleda malo kaj takega.

98
00:05:06,990 --> 00:05:11,070
Pravzaprav, če kliknem na tem časopisu
icon za Cambridgeu, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
boste videli predenje
kratko in nato icon

100
00:05:13,300 --> 00:05:16,370
urejen seznam,
označen seznam člankov

101
00:05:16,370 --> 00:05:18,280
povezane z Cambridgeu, Massachusetts.

102
00:05:18,280 --> 00:05:20,352
Če kliknem na Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Bom videla, enaka za to mesto.

104
00:05:21,685 --> 00:05:24,174
In če sem kliknite na
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
tam ne bi bilo katero koli
novice iz Watertown,

106
00:05:26,090 --> 00:05:28,630
tako da boste videli, kaj
kot počasno novice dneva.

107
00:05:28,630 --> 00:05:32,140
>> Zdaj, medtem, na zgornjem levem kotu so
nekatere znane kontrole Google Zemljevidi

108
00:05:32,140 --> 00:05:34,980
da bi vas pomanjšanje, panoramski pregled
gor, dol, levo in desno,

109
00:05:34,980 --> 00:05:37,360
ampak tudi iskalno polje, ki smo se tam.

110
00:05:37,360 --> 00:05:40,910
Torej, če iščem, odkrito povedano,
Edina druga poštna številka vem,

111
00:05:40,910 --> 00:05:45,020
90210, bomo dejansko videli
Beverly Hills, California.

112
00:05:45,020 --> 00:05:48,550
Ob kliku pa me pripelje do
Kalifornija in cel kup

113
00:05:48,550 --> 00:05:50,369
novice o Beverly Hillsu.

114
00:05:50,369 --> 00:05:51,910
Zdaj opazili tudi, kaj se je zgodilo tam.

115
00:05:51,910 --> 00:05:57,040
Če bom tokrat Iskanje 02.138 ali celo
Cambridge Massachusetts vejica ali nekatere

116
00:05:57,040 --> 00:06:00,300
varianta, dobite
malo autocomplete dropdown.

117
00:06:00,300 --> 00:06:03,840
Zdaj je ta z uporabo plugin
za knjižnico, imenovano jQuery,

118
00:06:03,840 --> 00:06:05,732
in da je plugin se imenuje typeahead.

119
00:06:05,732 --> 00:06:07,440
Mi preprosto prebrati
dokumentacija,

120
00:06:07,440 --> 00:06:13,150
prenesli js datoteko integrirano
v kodo distribucije, tako da vas

121
00:06:13,150 --> 00:06:16,900
na koncu lahko napišete kodo,
zapolnjuje to spustni meni z auto

122
00:06:16,900 --> 00:06:19,350
izbori ali auto predlogi.

123
00:06:19,350 --> 00:06:23,820
>> Sedaj koda distribucija, čeprav je, da
ste ga prejeli, ne naredi skoraj toliko.

124
00:06:23,820 --> 00:06:26,860
Dobiš Google Map vgrajeni, in
dobiš kontrole top levo,

125
00:06:26,860 --> 00:06:28,240
in dobiš iskalno polje.

126
00:06:28,240 --> 00:06:32,760
Ampak, če sem tip nekaj podobnega
02.138, niso kraji še najti.

127
00:06:32,760 --> 00:06:34,730
Tako, da se dogaja, da
eden od naših ciljev tukaj.

128
00:06:34,730 --> 00:06:37,430
Poleg tega, če naredimo korak
nazaj in pogled na zemljevid samega,

129
00:06:37,430 --> 00:06:38,950
ni novic whatsoever.

130
00:06:38,950 --> 00:06:41,780
Tudi če kliknem in
drag, ni označevalci dejansko

131
00:06:41,780 --> 00:06:45,560
pojavijo novice, ker to
Izziv je ostalo tudi za vas.

132
00:06:45,560 --> 00:06:48,490
>> Oglejmo si oglejte, potem
na kodo distribucije.

133
00:06:48,490 --> 00:06:51,460
Ko ste prenesli
pset8.zip in ga razpakirati

134
00:06:51,460 --> 00:06:54,430
v vašem vhost imenik
v CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
boste videli to
imenikov tu notri.

136
00:06:56,550 --> 00:07:00,200
Bin-- ki običajno stoji za
binarni izvedljivo programs--

137
00:07:00,200 --> 00:07:04,870
vključuje, kot pset7, nekateri PHP
datoteke, ki vsebujejo druge datoteke,

138
00:07:04,870 --> 00:07:06,710
nato pa javnost, ki je
datoteke, ki jih potrebujejo

139
00:07:06,710 --> 00:07:09,369
biti javno dostopen
da uporabnik z brskalnikom.

140
00:07:09,369 --> 00:07:11,410
Oglejmo si oglejte v
bin in bomo

141
00:07:11,410 --> 00:07:13,890
videli, da obstaja datoteka
je že pozval Import.

142
00:07:13,890 --> 00:07:17,591
Če bomo odprli to s gedit, bomo videli
da, žal, ni veliko

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

144
00:07:18,090 --> 00:07:20,250
Vse to je tam, čeprav,
je shebang na vrh

145
00:07:20,250 --> 00:07:23,410
ki določa, katera
interpreter-- v tem primeru PHP--

146
00:07:23,410 --> 00:07:25,759
je treba uporabiti za dejansko
izvršitev te datoteke.

147
00:07:25,759 --> 00:07:27,550
Ampak potem, ko pravi,
TODO je, če ste

148
00:07:27,550 --> 00:07:31,130
bomo morali napisati nekaj kode
ki verjetno zahteva zaupnik

149
00:07:31,130 --> 00:07:35,820
Datoteka, ki je v vključuje imenik
kot smo storili pred s PHP datotek.

150
00:07:35,820 --> 00:07:38,180
In potem boš
moral nekako odpreti

151
00:07:38,180 --> 00:07:41,920
us.text ki vam verjetno
so že razpakirati.

152
00:07:41,920 --> 00:07:44,690
Potem boste morali
Ponovil preko črt v tej datoteki,

153
00:07:44,690 --> 00:07:47,800
morda z uporabo nekaterih funkcij
predlagal v specifikaciji.

154
00:07:47,800 --> 00:07:51,390
Nato vstavite vsak od teh
linije v podatkovne baze MySQL

155
00:07:51,390 --> 00:07:54,940
s funkcijo poizvedbe, ki
vam že spet, če with--

156
00:07:54,940 --> 00:07:58,010
ali vsaj varianta
le-teh v functions.php,

157
00:07:58,010 --> 00:07:59,560
kar bomo videli čez nekaj trenutkov.

158
00:07:59,560 --> 00:08:04,430
>> Zdaj pa zaprite uvoz in iti nazaj v
naš imenik in tokrat šel v

159
00:08:04,430 --> 00:08:05,300
vključuje.

160
00:08:05,300 --> 00:08:09,210
In če naredim ls tam, boste videli,
Datoteke precej všeč Problem Set 7 trije.

161
00:08:09,210 --> 00:08:13,760
In kaj je na hitro pogledamo,
na primer, v config.php.

162
00:08:13,760 --> 00:08:16,730
Tam je manj linij
kot prej, in ga

163
00:08:16,730 --> 00:08:20,712
zdi ta datoteka vsebuje
constants.php in functions.php.

164
00:08:20,712 --> 00:08:23,670
Mi smo z uporabo nekoliko drugačen
Tehnika ta čas okrog, da dejansko

165
00:08:23,670 --> 00:08:30,910
določajo, da so te datoteke relativna
na trenutni imenik __ DIR__

166
00:08:30,910 --> 00:08:35,280
predstavlja karkoli imenik to
datoteka config.php, je sama v.

167
00:08:35,280 --> 00:08:37,600
Torej je to bolj
eksplicitno način določajo

168
00:08:37,600 --> 00:08:40,100
katere druge datoteke, ki jih želite zahtevati.

169
00:08:40,100 --> 00:08:44,020
>> Zdaj, če zaprem to datoteko in
namesto da bi odprle constants.php,

170
00:08:44,020 --> 00:08:47,430
boste videli datoteko zelo spominja
da Problem Set 7, kot tudi, čeprav

171
00:08:47,430 --> 00:08:50,050
z drugo bazo podatkov, imenovano pset8.

172
00:08:50,050 --> 00:08:54,020
Nazadnje, v functions.php,
bomo videli le eno funkcijo

173
00:08:54,020 --> 00:08:55,942
Tokrat se imenuje poizvedbo.

174
00:08:55,942 --> 00:08:59,150
To je skoraj enako, razen ravnamo
Napake Tokrat malo

175
00:08:59,150 --> 00:09:02,860
drugače, vendar je uporaba je
Enako kot v problem določeno sedem.

176
00:09:02,860 --> 00:09:08,090
>> Zdaj pa se vrnimo v naš pset8
imenik, gredo v javnost in tam

177
00:09:08,090 --> 00:09:14,420
če naredim ls, boste videli this--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
in update.php-- vse datoteke.

179
00:09:16,940 --> 00:09:22,010
In potem css pisave img in
Imenik js precej všeč pset7.

180
00:09:22,010 --> 00:09:24,660
>> Oglejmo si na
index.html, ki je

181
00:09:24,660 --> 00:09:27,290
bo res
vstopna točka za smashup.

182
00:09:27,290 --> 00:09:31,820
Zdaj v index.html, boste videli celoten
kup povezovalnih elementov v glavi,

183
00:09:31,820 --> 00:09:36,540
Natančneje, za bootstrap za naše
CSS sledi cel kup skript

184
00:09:36,540 --> 00:09:41,520
oznake za stvari, kot so zemljevidi, API
sam, posebno marker z etiketo

185
00:09:41,520 --> 00:09:44,950
pripomoček, ki smo jih omenili v
Specifikacija je na voljo za vas,

186
00:09:44,950 --> 00:09:48,420
jQuery sama, bootstrap
sam, in drugo knjižnica

187
00:09:48,420 --> 00:09:50,990
imenovano spodnja ki
govorimo o v spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js kot jquery.js
je knjižnica JavaScript

189
00:09:57,031 --> 00:10:00,280
da ima cel kup funkcionalnosti
da je veliko ljudi na svetu želje

190
00:10:00,280 --> 00:10:02,020
obstajali v JavaScript sami.

191
00:10:02,020 --> 00:10:04,560
Torej, vse to so
pravzaprav precej priljubljen.

192
00:10:04,560 --> 00:10:07,140
Prav tako smo omenili typeahead
ki je knjižnica,

193
00:10:07,140 --> 00:10:11,180
ne da autocomplete dropdown in
Končno povezava z lastno JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Medtem, in morda
na srečo, to mashup

195
00:10:13,880 --> 00:10:17,550
je posledica razmeroma malo
HTML dol na dnu.

196
00:10:17,550 --> 00:10:22,330
Obvestilo, da smo določeno div v
naše telo razreda kontejnerskega tekočine.

197
00:10:22,330 --> 00:10:24,610
Ta, na bootstrap je
Dokumentacija, samo

198
00:10:24,610 --> 00:10:29,840
pomeni, da je ta div se dogaja, da izpolnite
polje ali okno brskalnika v celoti.

199
00:10:29,840 --> 00:10:33,020
>> Medtem, spodaj, da imamo div
ki je odprt in takoj zapre

200
00:10:33,020 --> 00:10:34,790
z edinstveno ID zemljevid platno.

201
00:10:34,790 --> 00:10:37,400
To je zdaj od Googla
Zemljevidi dokumentacija

202
00:10:37,400 --> 00:10:42,490
za svoje API, s katerim sem se preprosto morali
imeti prazen div v kateri injicirati,

203
00:10:42,490 --> 00:10:44,470
navsezadnje, z dejanskim Google Maps.

204
00:10:44,470 --> 00:10:46,310
Vendar več o tem v samo bit.

205
00:10:46,310 --> 00:10:48,850
>> Končno obstaja oblika
Notranjost, ki tukaj

206
00:10:48,850 --> 00:10:52,930
izvaja polje tekst do zgoraj levo
v našem vmesnik za iskanje.

207
00:10:52,930 --> 00:10:54,730
Obvestilo, ki smo jih uporablja
malo bootstrap

208
00:10:54,730 --> 00:10:57,670
Tukaj too-- stvari, kot
Obrazec-inline in obliko-skupina.

209
00:10:57,670 --> 00:11:00,080
Mi smo dal nekdanji
edinstven ID obliki.

210
00:11:00,080 --> 00:11:04,510
In potem, na koncu, sem dejansko imajo
Tip vhod, ki je precej pozna,

211
00:11:04,510 --> 00:11:06,440
katere ID je q.

212
00:11:06,440 --> 00:11:07,230
Samo konvencija.

213
00:11:07,230 --> 00:11:09,234
Q za query-- bi morali
bil imenovan ničesar.

214
00:11:09,234 --> 00:11:11,400
In potem ograda,
Medtem pa je mesto, državo,

215
00:11:11,400 --> 00:11:16,200
in poštna številka, ki jo lahko odpokliče
vidim v našem Mashup demo prej.

216
00:11:16,200 --> 00:11:17,980
Oglejmo zaprite datoteko.

217
00:11:17,980 --> 00:11:24,460
>> Zdaj pa si oglejte na PHP datotek,
čakajo in nato datoteke JavaScript.

218
00:11:24,460 --> 00:11:27,700
V naših PHP datotek, ki smo jih
že izvaja za vas,

219
00:11:27,700 --> 00:11:29,960
za primer, posodobitve.

220
00:11:29,960 --> 00:11:35,060
Update.php-- ne bomo porabili ogromno
Količina časa na here-- na kratko

221
00:11:35,060 --> 00:11:38,400
je datoteka, da je naša
Koda JavaScript bo

222
00:11:38,400 --> 00:11:41,610
stopiti v stik preko AJAX, ki
asinhroni tehnika, ki je

223
00:11:41,610 --> 00:11:45,980
vgrajeno v JavaScript v teh dneh, da je
dogaja, da nam omogočajo, da vprašati update.php

224
00:11:45,980 --> 00:11:47,410
za več informacij.

225
00:11:47,410 --> 00:11:50,045
>> Natančneje, kadarkoli
uporabnik vleče zemljevid

226
00:11:50,045 --> 00:11:53,310
ali opravlja poizvedbe, ki skače
uporabnik na drugo lokacijo,

227
00:11:53,310 --> 00:11:55,250
našo kodo JavaScript,
kot bomo kmalu videli, je

228
00:11:55,250 --> 00:11:59,610
dogaja, da pokličete update.php
in prosi za 10 ali tako označevalcev

229
00:11:59,610 --> 00:12:02,630
znotraj prikaznega polja temelji
o GPS koordinate

230
00:12:02,630 --> 00:12:06,510
na vrhu in na dnu
vogali tem zemljevidu.

231
00:12:06,510 --> 00:12:10,520
Mi lahko potem ponovno naseliti zemljevid zdaj,
Uporabnik se je preselil na zaslon, da bi

232
00:12:10,520 --> 00:12:14,210
da vidim, 10 verjetno nova
označevalci za različne mest.

233
00:12:14,210 --> 00:12:18,340
Medtem, ta datoteka je v končni fazi
bo izvršitev SQL poizvedbo

234
00:12:18,340 --> 00:12:21,680
proti naši podatkovni bazi
namizne imenovane kraje, ki

235
00:12:21,680 --> 00:12:26,380
se dogaja, da se vrnejo tisti,
10 ali manj lokacije.

236
00:12:26,380 --> 00:12:32,620
>> Medtem, v articles.php, je še ena
datoteko, ki smo jih napisal v celoti.

237
00:12:32,620 --> 00:12:35,820
To je zelo podoben v duhu
Funkcija LOOKUP problema, ki je 7,

238
00:12:35,820 --> 00:12:39,450
ki je stopila v stik Yahoo Finance za vas.

239
00:12:39,450 --> 00:12:43,710
Ta datoteka stiki Google News
za vas, na koncu oprijemalne

240
00:12:43,710 --> 00:12:46,050
strojno berljiva
version-- v nekaj

241
00:12:46,050 --> 00:12:49,720
imenovano RSS format-- novic
za Cambridge ali Beverly Hills

242
00:12:49,720 --> 00:12:52,880
ali karkoli mesto ste iskali
za, ki temelji na tem geoparameter.

243
00:12:52,880 --> 00:12:57,250
Mi razčleniti to RSS, ki je pravkar
tip označevalni jezik imenuje XML,

244
00:12:57,250 --> 00:13:00,740
in potem bomo dejansko
da se vrnete v vašem brskalniku

245
00:13:00,740 --> 00:13:03,570
in kodo JavaScript,
Natančneje, v obliki imenuje

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

247
00:13:06,097 --> 00:13:08,180
Zdaj boste videli v
specification-- vam točko

248
00:13:08,180 --> 00:13:10,720
kako si lahko dejansko videli
nekaj JSON prihajajočem back--

249
00:13:10,720 --> 00:13:15,210
da ta funkcionalnost na koncu
vam omogoča, da zapolnijo tiste pojavne menije tako

250
00:13:15,210 --> 00:13:16,960
da ko boste kliknili
na oznako na zemljevidu

251
00:13:16,960 --> 00:13:19,430
boste dejansko videli cel kup
krogel, od katerih je vsak

252
00:13:19,430 --> 00:13:21,020
povezave do članka.

253
00:13:21,020 --> 00:13:25,000
>> Zdaj pa si oglejte na eni zadnjih
PHP datoteke, ki je, na srečo, ne

254
00:13:25,000 --> 00:13:27,970
imajo veliko dogaja on--
samo precej velik TODO.

255
00:13:27,970 --> 00:13:32,170
Zdaj je ta datoteka izjavi
Niz se imenuje kraje.

256
00:13:32,170 --> 00:13:35,980
In nato končno tisk
da matrika v JSON format--

257
00:13:35,980 --> 00:13:38,720
je precej tiskanje samo zato, da
so stvari lažje debug.

258
00:13:38,720 --> 00:13:41,480
Žal, v
srednji je to TODO,

259
00:13:41,480 --> 00:13:46,890
ki zahteva, da poiščete
Podatkovna baza za kraje, ki se ujemajo geo HTTP

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

261
00:13:47,490 --> 00:13:49,865
>> In, seveda, to se dogaja, da
je eden od vaših challenges--

262
00:13:49,865 --> 00:13:54,240
za izvajanje te funkcionalnosti tukaj
tako da, ko se obrnete te datoteke z

263
00:13:54,240 --> 00:14:00,610
URL kot iskanju. php? geo = nekaj,
kodo bo na koncu vrne JSON

264
00:14:00,610 --> 00:14:05,020
množica vseh krajev v vaš
tabela baze podatkov, ki se ujemajo to vhod.

265
00:14:05,020 --> 00:14:08,960
Torej, če uporabnik vnese v Cambridgeu,
datoteka tukaj search.php

266
00:14:08,960 --> 00:14:12,680
bi morala na koncu vrne JSON niz
za vse tekem za Cambridgeu,

267
00:14:12,680 --> 00:14:16,990
ki lahko v Massachusetts
vendar bi bilo še nikjer drugje.

268
00:14:16,990 --> 00:14:21,040
>> Končno, vzemimo si na dveh
datoteke, ki so statični ultimately--

269
00:14:21,040 --> 00:14:23,680
Vaše CSS datoteka in datoteka JavaScript.

270
00:14:23,680 --> 00:14:26,779
Če grem v naš CSS imenik,
tam je cel kup datotek, tam,

271
00:14:26,779 --> 00:14:28,070
vendar je večina od njih so knjižnice.

272
00:14:28,070 --> 00:14:31,530
Bom si oglejte,
Natančneje, pri styles.css,

273
00:14:31,530 --> 00:14:35,440
ki je naša lastna svetovna CSS, ki je
bo Stilizovati to celotno Mashup.

274
00:14:35,440 --> 00:14:38,840
Bom pustite, da vas, da preberete
komentarji tukaj, ampak na kratko,

275
00:14:38,840 --> 00:14:43,490
To je CSS, ki zagotavlja, da je naš
mashup, privzeto iz škatle,

276
00:14:43,490 --> 00:14:46,950
izgleda natanko tako, kot si želimo it--
z zemljevidom, ki polni pogled pristanišče

277
00:14:46,950 --> 00:14:49,720
in z iskanjem
box up v zgornjem levem kotu.

278
00:14:49,720 --> 00:14:52,870
Smo sprejeti tudi svobodo
stylizing da typeahead dropdown

279
00:14:52,870 --> 00:14:55,170
meni malo, kot dobro.

280
00:14:55,170 --> 00:14:58,030
>> Najpomembnejši datoteka
morda za ta problem, določenem

281
00:14:58,030 --> 00:15:01,070
je to zadnja, scripts.js.

282
00:15:01,070 --> 00:15:03,800
Znotraj vašega imenika JS
je tudi več datotek.

283
00:15:03,800 --> 00:15:08,090
Vsi izmed njih so knjižnične datoteke
razen tega enega, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Če bomo to odpirajo, vzemimo naše
Končno turnejo po funkcijah, ki

285
00:15:11,460 --> 00:15:13,820
Vgrajeni so v tej datoteki
za vas in opozarjati

286
00:15:13,820 --> 00:15:16,200
na Todos, ki so pred nami.

287
00:15:16,200 --> 00:15:19,110
>> Na vrhu te datoteke,
tri globalne spremenljivke.

288
00:15:19,110 --> 00:15:22,910
Ena za zemljevid, ki bo na
sklicevanje na našem zemljevidu Google.

289
00:15:22,910 --> 00:15:25,510
Lahko si o njej mislijo
nekako kot kazalec.

290
00:15:25,510 --> 00:15:27,710
Medtem, imamo
druga globalna spremenljivka

291
00:15:27,710 --> 00:15:31,500
imenovane info, kar se zdi, da je
shranjevanje vrednosti povratni klic

292
00:15:31,500 --> 00:15:34,170
na novo google.maps.InfoWindow.

293
00:15:34,170 --> 00:15:37,835
JavaScript podpira predmete, ki
so zelo podobni, v duhu Struts.

294
00:15:37,835 --> 00:15:40,250
In kaj je to linijo za
naš namen je početje

295
00:15:40,250 --> 00:15:42,820
ustvarja novo info
Okno v spomin in nato

296
00:15:42,820 --> 00:15:46,330
Ohranili referenco
z njo v spremenljivko imenovano Info.

297
00:15:46,330 --> 00:15:48,330
In med tistimi,
Medtem pa je tisto, kar se zdi

298
00:15:48,330 --> 00:15:51,060
da je prazna JavaScript
Niz se imenuje označevalcev.

299
00:15:51,060 --> 00:15:55,392
Vseh teh časopisnih ikon, ali pa
lahko izbere drugo ikono v celoti,

300
00:15:55,392 --> 00:15:57,350
se bodo shranjeni
končno v tem polju

301
00:15:57,350 --> 00:16:01,570
tako da bomo lahko zelo preprosto dodate
map in jih odstranite iz zemljevida.

302
00:16:01,570 --> 00:16:03,990
>> Zdaj pa se pomaknite navzdol
malo in čarovnik

303
00:16:03,990 --> 00:16:07,690
s kodo, ki se dogaja, da
izvrši, kakor hitro DOM ali dokument

304
00:16:07,690 --> 00:16:10,480
objektni model ali
Sama stran je pripravljena.

305
00:16:10,480 --> 00:16:12,942
Spomnimo se, da je to sintakso
Tukaj preprosto določa

306
00:16:12,942 --> 00:16:14,900
da naslednjo kodo
naj se izvede samo

307
00:16:14,900 --> 00:16:17,840
ko je končal brskalnik
nakladanje vse ostalo.

308
00:16:17,840 --> 00:16:19,750
>> Prvi izjavljamo
cel kup stilov,

309
00:16:19,750 --> 00:16:22,410
ki končajo stylizing
map kot na spec.

310
00:16:22,410 --> 00:16:24,790
Potem izjavljamo
cel kup možnosti,

311
00:16:24,790 --> 00:16:28,630
kar še dodatno prilagodite Google
Načrt, da smo o tem, da bi vgradili.

312
00:16:28,630 --> 00:16:32,090
Nato bomo uporabili malo jQuery kode,
kar je pojasnjeno v nekoliko podrobneje

313
00:16:32,090 --> 00:16:35,000
v spec, da zgrabite
da je element, map-platno

314
00:16:35,000 --> 00:16:36,980
da smo tako enoznačno opredeliti.

315
00:16:36,980 --> 00:16:40,640
In potem je ta linija je tu
kar se zdi, da nam daje čarobno

316
00:16:40,640 --> 00:16:43,560
Google map znotraj
naša lastna aplikacija,

317
00:16:43,560 --> 00:16:47,020
shranjevanjem sklicevanja na to
v tem spremenljivo imenuje zemljevid.

318
00:16:47,020 --> 00:16:50,550
>> Nazadnje je tu dol beležimo
kar se imenuje poslušalec.

319
00:16:50,550 --> 00:16:54,690
Pomislite back-- pot, pot
back-- nič teden v CS50

320
00:16:54,690 --> 00:16:57,430
ko smo pogledal Scratch in
njena podpora skozi sprehod

321
00:16:57,430 --> 00:16:59,935
skozi stvari, imenovanih
dogodki in oddaj.

322
00:16:59,935 --> 00:17:01,810
Ki ste jih morda ne uporablja
si sam, vendar je

323
00:17:01,810 --> 00:17:03,900
mehanizem, s katerim
Brskalnik je v tem primeru

324
00:17:03,900 --> 00:17:07,940
lahko dobite našo pozornost, ko je to
pripravljeni za dejansko izvedbo nekaj kode.

325
00:17:07,940 --> 00:17:12,170
V tem primeru, se dogaja, da poslušate
na zemljevid za prireditvi v prostem teku.

326
00:17:12,170 --> 00:17:14,930
To pomeni, da ima brskalnik
končal nalaganju Google zemljevid.

327
00:17:14,930 --> 00:17:18,380
Na tej točki funkcija imenuje
configure naj bi v končni fazi

328
00:17:18,380 --> 00:17:19,339
treba izvršiti.

329
00:17:19,339 --> 00:17:22,510
To funkcijo nastavite,
bomo videli, je napisal nas.

330
00:17:22,510 --> 00:17:24,550
>> Zdaj tukaj dol je funkcija
da, žal,

331
00:17:24,550 --> 00:17:25,871
je le TODO add marker.

332
00:17:25,871 --> 00:17:28,620
Per spec. boste potrebovali
napisati kodo, ki dejansko

333
00:17:28,620 --> 00:17:32,840
dodaja marker-- ali izgleda
kot časopis ali palec prečenje,

334
00:17:32,840 --> 00:17:35,360
ali nekaj else-- na Google zemljevidu.

335
00:17:35,360 --> 00:17:37,720
Tu je, da je funkcija
imenovano configure.

336
00:17:37,720 --> 00:17:40,390
Bom pustite, da vas, da preberete
s tem podrobneje

337
00:17:40,390 --> 00:17:42,600
toda zavedati, da smo dodali
kup več Poslušalci

338
00:17:42,600 --> 00:17:46,620
tako da se lahko izvrši kodo, ko
uporabnik klikne in vleče karto.

339
00:17:46,620 --> 00:17:50,730
Imamo tudi kodo tukaj, da
inicializira da typeahead plugin

340
00:17:50,730 --> 00:17:53,120
tako da dropdown
Meni dejansko deluje.

341
00:17:53,120 --> 00:17:55,690
>> Ampak kaj je osredotočiti na samo
Nekaj ​​mest je tu.

342
00:17:55,690 --> 00:17:57,590
Natančneje, to storite tukaj.

343
00:17:57,590 --> 00:18:00,410
Bom odloži na spletu
dokumentacija in specifikacija

344
00:18:00,410 --> 00:18:02,530
kako zapolniti to Todo.

345
00:18:02,530 --> 00:18:05,890
Ampak na kratko, ta knjižnica
typeahead vam omogoča, da prenese

346
00:18:05,890 --> 00:18:09,790
v kaj je splošno znano kot predlogo,
ki ima nekaj spremenljive ograde

347
00:18:09,790 --> 00:18:13,690
Zelo podobno v duhu printf v%. * s.

348
00:18:13,690 --> 00:18:16,030
Toda v tem primeru,
Predloga za spec

349
00:18:16,030 --> 00:18:18,760
vam omogoča, da določite
kaj hočeš spremenljivke

350
00:18:18,760 --> 00:18:24,880
injicirati iz podatkov, ki je prišel
nazaj od nekaj podobnega PHP

351
00:18:24,880 --> 00:18:29,810
datoteke, ki ste jih napisal
da se oddaja JSON izhod.

352
00:18:29,810 --> 00:18:35,170
>> Zdaj tukaj dol spoznali, da smo
posluša typeahead selekcij

353
00:18:35,170 --> 00:18:38,050
ko uporabnik dejansko izvaja
iskanje in izbere vrednost.

354
00:18:38,050 --> 00:18:40,270
To je, kako smo dejansko
bo poslušal, da

355
00:18:40,270 --> 00:18:42,250
in izvesti nekaj kode, kot rezultat.

356
00:18:42,250 --> 00:18:45,300
Potem bomo še naprej, da nastavite
Mashup le malo.

357
00:18:45,300 --> 00:18:48,000
In, navsezadnje, pravimo
ta funkcija posodobitev.

358
00:18:48,000 --> 00:18:49,640
Posodablja označevalce na zaslonu.

359
00:18:49,640 --> 00:18:51,529
Več o tem pa v samo trenutek.

360
00:18:51,529 --> 00:18:53,570
Medtem pa je malo
majhne funkcije tukaj.

361
00:18:53,570 --> 00:18:56,820
Eden od katerih je hideInfo ki
enostavno zapre InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Druga funkcija tu, ki v končni fazi
ne bo predolgo, odstranite označevalcev.

363
00:19:00,020 --> 00:19:03,580
To se dogaja, da razveljavite karkoli
vaš oglas funkcija marker počne.

364
00:19:03,580 --> 00:19:04,960
In potem sem dol, je iskanje.

365
00:19:04,960 --> 00:19:08,610
In to je zanimivo, ker smo
so napisali kodo JavaScript, ki je

366
00:19:08,610 --> 00:19:13,490
dogaja, da se pogovorite s search.php na
strežnik in dobili nazaj nekaj odziva.

367
00:19:13,490 --> 00:19:16,110
>> Vi, seveda, bo še vedno
morajo izvajati search.php,

368
00:19:16,110 --> 00:19:18,310
ampak smo izvajali
JavaScript kode, ki je

369
00:19:18,310 --> 00:19:22,480
gre za ravnanje, ki dejansko opravlja
išče polju tega besedila.

370
00:19:22,480 --> 00:19:25,340
Zlasti, obvestila
Ta funkcija tukaj

371
00:19:25,340 --> 00:19:29,160
iskanje, ali pokličite search.php
z metodo, imenovano

372
00:19:29,160 --> 00:19:31,072
dobili JSON, ki smo ga videli v predavanju.

373
00:19:31,072 --> 00:19:32,780
In sintaksa tukaj
je malo drugačna

374
00:19:32,780 --> 00:19:37,110
iz predavanja v tem, da smo s pomočjo
jQuery tako imenovani promise vmesnik.

375
00:19:37,110 --> 00:19:38,479
Več o tem pa v spec.

376
00:19:38,479 --> 00:19:40,520
To preprosto pomeni za naše
nameni sedaj, tam

377
00:19:40,520 --> 00:19:43,870
sta dve posebni funkciji smo
morali poklicati z dot notacije

378
00:19:43,870 --> 00:19:46,230
Tukaj takoj po klicu dobili JSON.

379
00:19:46,230 --> 00:19:47,510
Ena se imenuje done.

380
00:19:47,510 --> 00:19:49,870
Ena se imenuje ne.

381
00:19:49,870 --> 00:19:51,790
Lahko si misliš o teh
kot uspeh trener

382
00:19:51,790 --> 00:19:54,960
in trener neuspeh samo
v primeru, gre kaj narobe.

383
00:19:54,960 --> 00:19:57,760
>> Zdaj pa si oglejmo zadnji
Nekaj ​​funkcij v tej datoteki.

384
00:19:57,760 --> 00:20:00,180
Tukaj je funkcija
imenovano showinfo, ki

385
00:20:00,180 --> 00:20:03,090
prikazuje informacije v eni od tistih, ki
malo okna z informacijami, ki

386
00:20:03,090 --> 00:20:05,380
pops up, ko uporabnik klikne oznako.

387
00:20:05,380 --> 00:20:08,470
Tukaj je še naprej
da je funkcija update

388
00:20:08,470 --> 00:20:10,510
ki smo jih izvajali za vas.

389
00:20:10,510 --> 00:20:15,250
To določa meje zemljevidu.

390
00:20:15,250 --> 00:20:19,360
Katere so GPS koordinate njenih
severovzhodno in jugozahodno vogali tukaj.

391
00:20:19,360 --> 00:20:22,780
Pripravili smo nekaj HDP parametre
tu in jih nato prenesti na koncu

392
00:20:22,780 --> 00:20:26,160
da update.php, ki smo jih
izvajajo tudi za vas.

393
00:20:26,160 --> 00:20:31,390
Da se na koncu vrne nekaj JSON
iz datoteke imenovane update.php

394
00:20:31,390 --> 00:20:34,050
in nato odstrani katerokoli
označevalci na zaslonu

395
00:20:34,050 --> 00:20:36,650
in potem ponovi več
podatkov, ki je prišel nazaj

396
00:20:36,650 --> 00:20:40,350
iz update.php, ki
spet je le JSON matrika.

397
00:20:40,350 --> 00:20:45,130
In potem na koncu dodaja označevanje
vsak od teh krajev, ravnanje neuspeh

398
00:20:45,130 --> 00:20:47,750
ali napake, ki bi lahko zelo dobro zgodi.

399
00:20:47,750 --> 00:20:51,550
>> Zdaj pa samo, da vam okus, kako ste
bi šel okoli razhroščevanje ta projekt,

400
00:20:51,550 --> 00:20:55,420
spoznali, da sem odprl v
napreduje ta zavihek tukaj na ta URL,

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

402
00:21:01,320 --> 00:21:04,050
Tudi tokrat člankov o
PHP smo izvedli za vas

403
00:21:04,050 --> 00:21:06,320
tako da to ni toliko
kaj boste uporabljali

404
00:21:06,320 --> 00:21:08,190
debug, ampak tehniko.

405
00:21:08,190 --> 00:21:10,590
Obvestilo, da sem iskal
Cambridge je poštna številka tukaj,

406
00:21:10,590 --> 00:21:15,260
in sem prišel nazaj, res, JSON
niz JSON predmetov znotraj katerega

407
00:21:15,260 --> 00:21:17,640
sta dva keys-- povezavo in naslov.

408
00:21:17,640 --> 00:21:19,860
>> Tako da je ta funkcija
deluje že za vami.

409
00:21:19,860 --> 00:21:24,330
Toda to tehniko ročno dogaja
na URL, kot je ta za nekaj podobnega

410
00:21:24,330 --> 00:21:31,710
search.php? geo = cambridge ali 02.138 ali
karkoli je uporabnik vtipka morala

411
00:21:31,710 --> 00:21:35,770
neprecenljiva, kot ste, sami, poskusite
da ugotovimo, točno, ali zakaj

412
00:21:35,770 --> 00:21:38,510
search.php deluje ali ne.

413
00:21:38,510 --> 00:21:41,720
>> Konec koncev, potem imate
Nekaj ​​Todos pred vami.

414
00:21:41,720 --> 00:21:44,250
Boste prvih izvaja
da uvoz skript,

415
00:21:44,250 --> 00:21:46,520
prebere us.text v vaši zbirki podatkov.

416
00:21:46,520 --> 00:21:48,760
Ste potem bo treba
izvajati search.php

417
00:21:48,760 --> 00:21:51,320
tako, da se obnaša tako, kot je določeno.

418
00:21:51,320 --> 00:21:54,170
Si potem želeli
osredotočiti na scripts.js

419
00:21:54,170 --> 00:21:57,520
in končno izvaja
tiste par todos,

420
00:21:57,520 --> 00:21:59,950
vključno za konfiguracijo
in da predlogo,

421
00:21:59,950 --> 00:22:03,220
dodajanje markerjev, odstranite znamenja,
Nato trajala, vendar ne najmanj eno

422
00:22:03,220 --> 00:22:04,330
osebno noto.

423
00:22:04,330 --> 00:22:07,477
>> Ko imate Mashup delo
precej podobne našim, cilj pri roki

424
00:22:07,477 --> 00:22:09,560
je za vas, da dodate osebno
dotikajte z vašim Mashup,

425
00:22:09,560 --> 00:22:11,290
ali je estetska ali funkcionalna.

426
00:22:11,290 --> 00:22:13,950
Vzemite Mashup kdaj tako
nekoliko na naslednjo stopnjo.

427
00:22:13,950 --> 00:22:18,330
Tako dolgo, kot ste sami potisnite dlje
vaše poznavanje spec same

428
00:22:18,330 --> 00:22:20,840
in dvigni eno tehniko
novo, tudi če je to samo

429
00:22:20,840 --> 00:22:25,610
nekaj estetskega kot spreminjanje
Razporeditev na zemljevidu, ki ga uporabljate,

430
00:22:25,610 --> 00:22:28,070
Področje, ki smo pričakovali
bodo zadovoljni.

431
00:22:28,070 --> 00:22:30,260
To je potem Problem Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Ostanite z nami za več
specifikacija in veliko sreče

433
00:22:33,070 --> 00:22:36,400
reševanju tega tvoj zadnji
CS50 problem določiti kdaj.

434
00:22:36,400 --> 00:22:39,750
>> [Predvaja glasba]

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