1
00:00:00,000 --> 00:00:03,388
>> [Hudba hrát]

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

3
00:00:09,196 --> 00:00:10,180
>> DAVID J. Malan: Dobrý den.

4
00:00:10,180 --> 00:00:12,600
Pojďme se projít
Problem Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
který se chystá vyzvat vás k
čerpají prvky pro Google Maps

6
00:00:15,880 --> 00:00:20,905
s prvky z Google News a kaší
je dohromady do webového applet, který

7
00:00:20,905 --> 00:00:24,150
umožňuje uživateli vyhledávat
mapa pro novinky místní

8
00:00:24,150 --> 00:00:26,780
na konkrétní měst,
města a PSČ.

9
00:00:26,780 --> 00:00:31,040
K tomu, že budeme
integrovat nějaký HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript, a technika
obecně známé jako AJAX, aby

11
00:00:34,390 --> 00:00:36,850
K vytvoření tohoto pohlcující
uživatelské zkušenosti.

12
00:00:36,850 --> 00:00:38,920
>> Podívejme se nejprve na samotné Google Maps.

13
00:00:38,920 --> 00:00:41,220
To je samozřejmě možná
známý rozhraní.

14
00:00:41,220 --> 00:00:45,070
Ale ukazuje se, že Google Maps
také poskytuje aplikaci API--

15
00:00:45,070 --> 00:00:48,360
programování interface-- přes který
si můžete vzít prvky Google Maps

16
00:00:48,360 --> 00:00:50,740
a integrovat je do
vlastní aplikace.

17
00:00:50,740 --> 00:00:52,650
Opravdu, v celém tomto
proces, budete

18
00:00:52,650 --> 00:00:55,140
nalézt několik adres URL
zvláště užitečné, že

19
00:00:55,140 --> 00:00:57,820
jsou uvedeny v
specifikace problému Set 8,

20
00:00:57,820 --> 00:01:00,980
Konkrétně to Začínáme
Průvodce nebo Příručce pro vývojáře

21
00:01:00,980 --> 00:01:07,640
pro Google Maps API verze 3, jakož
jako API Google Maps JavaScript

22
00:01:07,640 --> 00:01:10,260
v3 odkaz, který je
bit více Arcane ke čtení

23
00:01:10,260 --> 00:01:14,600
ale ve skutečnosti má všechny nižší úrovni
Podrobnosti o tom, co funkce nebo metody

24
00:01:14,600 --> 00:01:18,220
a objekty a vlastnosti a
Události ve skutečnosti přicházejí s API,

25
00:01:18,220 --> 00:01:20,720
velmi podobné v duchu
na [] neslyšitelný stránek.

26
00:01:20,720 --> 00:01:23,480
>> Nyní, když se podíváme
na Google News, budete

27
00:01:23,480 --> 00:01:25,370
snad vidět známé rozhraní zde.

28
00:01:25,370 --> 00:01:29,350
Ale ukazuje se, můžete vyhledávat
Google News pro konkrétní zeměpisných

29
00:01:29,350 --> 00:01:32,000
pomocí parametru HTTP s názvem geo.

30
00:01:32,000 --> 00:01:35,100
Ve skutečnosti, když jsem přiblížit
tady, uvidíte, že

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

32
00:01:41,672 --> 00:01:43,630
A opravdu, když jsem zoom
out, uvidíte, že já jsem

33
00:01:43,630 --> 00:01:47,090
při pohledu na stránku s celou partou
názory na Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Mezitím, když jsem skutečně změní
URL nebýt PSČ takhle,

35
00:01:50,620 --> 00:01:55,580
ale něco trochu Messier
jako je Cambridge, Massachusetts +,

36
00:01:55,580 --> 00:02:00,740
kde a je způsob, jak kódovat
mezera v URL a stiskněte klávesu Enter,

37
00:02:00,740 --> 00:02:02,907
uvidíte, že jsem vlastně
vidět téměř stejný zprávy.

38
00:02:02,907 --> 00:02:05,489
Možná, že je to trochu jinak
protože Cambridge vlastně

39
00:02:05,489 --> 00:02:06,910
má více poštovní směrovací čísla.

40
00:02:06,910 --> 00:02:09,410
Nyní, jak bych to mohla vědět, a
Ve skutečnosti, jak bych mohl nějak

41
00:02:09,410 --> 00:02:12,940
tie měst a obcí
na poštovních směrovacích čísel pro případ, že

42
00:02:12,940 --> 00:02:15,064
Chcete, aby uživatel
vyhledat buď?

43
00:02:15,064 --> 00:02:17,480
No, ukázalo se, že je tu
webové stránky tam volal

44
00:02:17,480 --> 00:02:20,060
geonames.org který je
iniciativa mít

45
00:02:20,060 --> 00:02:23,760
volně k dispozici databáze všech
druhy geografických informací,

46
00:02:23,760 --> 00:02:27,040
a to nejen pro USA, ale také
pro ostatní země stejně.

47
00:02:27,040 --> 00:02:30,430
Ve skutečnosti, když půjdu na tuto adresu URL, která sem
je také zmínil se v problému nastavené

48
00:02:30,430 --> 00:02:34,510
specifikace, budete to vidět tři
výpis spoustu zip souborů

49
00:02:34,510 --> 00:02:36,400
kterýkoliv z nich si můžete stáhnout vámi.

50
00:02:36,400 --> 00:02:39,900
Ve skutečnosti, pro tento problém nastavit
budete stahovat us.zip.

51
00:02:39,900 --> 00:02:43,790
Nyní v tomto souboru, je celý
banda dat v textovém formátu.

52
00:02:43,790 --> 00:02:47,760
Soubory je velmi podobná
CSV-- hodnoty oddělené file--

53
00:02:47,760 --> 00:02:51,294
ale ve skutečnosti používá
Karty vymezit pole.

54
00:02:51,294 --> 00:02:53,710
A teď, zatím, když se podíváte
tady na to, co jsem se zvýrazní,

55
00:02:53,710 --> 00:02:56,459
pole v tomto souboru se děje
být věci jako kódy zemí,

56
00:02:56,459 --> 00:02:58,980
poštovní směrovací čísla, místní názvy,
a pak, v nějaké formě

57
00:02:58,980 --> 00:03:04,230
nebo jiných, stavy a kraje,
komunity, a další.

58
00:03:04,230 --> 00:03:06,630
Ve skutečnosti, jsem už
stáhli tento soubor předem.

59
00:03:06,630 --> 00:03:09,750
Nech mě jít napřed a otevřete jej here--
us.text-- a samozřejmě budete

60
00:03:09,750 --> 00:03:16,660
zjistil, jestli bych přejděte na linku 16792
uvidíte několik záznamů pro Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts a jeho různé zip kódy.

62
00:03:19,120 --> 00:03:22,150
To, co vidím také, že je kraj,
některá čísla, které jsem se opravdu

63
00:03:22,150 --> 00:03:24,500
Rozumím, ale také všechny
jak na pravé,

64
00:03:24,500 --> 00:03:27,170
Některé GPS coordinates--
zeměpisné šířky a délky.

65
00:03:27,170 --> 00:03:30,440
To je skvělé, protože jeden z
Rysy Google Maps API

66
00:03:30,440 --> 00:03:33,670
je schopnost detekovat
kde jste geograficky

67
00:03:33,670 --> 00:03:36,850
pokud jde o GPS souřadnic.

68
00:03:36,850 --> 00:03:40,210
>> Nyní pojďme začít přijít na to, jak se
spustit vázání tyto věci dohromady.

69
00:03:40,210 --> 00:03:42,900
Dali jsme vám celý
banda distribuce kódu,

70
00:03:42,900 --> 00:03:44,970
jakož i databáze MySQL.

71
00:03:44,970 --> 00:03:49,100
Ve skutečnosti, když jsem vytáhnout phpMyAdmin mající
již importovány, jak brzy bude,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, uvidíte tabulku MySQL, který
vypadá to, ID pole, země

73
00:03:54,800 --> 00:03:57,400
kód, poštovní směrovací číslo, název místa a další.

74
00:03:57,400 --> 00:04:00,490
Typy všechny ty,
sloupce I odvozené prostě

75
00:04:00,490 --> 00:04:03,870
čtením readme.text
soubor zde uvedená

76
00:04:03,870 --> 00:04:07,330
zda pole je celé číslo,
nebo varchar nebo podobně.

77
00:04:07,330 --> 00:04:10,510
>> Proto jsme vytvořili uvedené tabulky pro
Vy a vám dal příkazy SQL

78
00:04:10,510 --> 00:04:12,770
vykonat vytvářet že
stůl ve své vlastní databázi,

79
00:04:12,770 --> 00:04:15,290
ale je to vlastně v ní dosud žádné údaje.

80
00:04:15,290 --> 00:04:19,600
Spíše, budete muset
ke stažení us.zip nebo zip jakékoli země

81
00:04:19,600 --> 00:04:21,500
soubor od té tam URL.

82
00:04:21,500 --> 00:04:24,940
A pak budete muset psát
příkazový řádek skript v PHP, který je

83
00:04:24,940 --> 00:04:28,420
chystá otevřít, že text
soubor, iteraci přes své linky,

84
00:04:28,420 --> 00:04:31,180
a pak pro každou
tyto řádky udělat vložku

85
00:04:31,180 --> 00:04:34,940
do toho místa tabulky
v databázi MySQL.

86
00:04:34,940 --> 00:04:37,880
Takže na konci tohoto procesu, budete
narazily, že skript nakonec

87
00:04:37,880 --> 00:04:39,610
jen jednou v teorii.

88
00:04:39,610 --> 00:04:41,780
Ve skutečnosti pravděpodobně budete
spustit to spoustu časů

89
00:04:41,780 --> 00:04:45,460
při pokusu opravit různé chyby.

90
00:04:45,460 --> 00:04:48,440
>> Nakonec, budete mít
opravdu velké databáze s tisíci

91
00:04:48,440 --> 00:04:50,139
a tisíce geografických řádků.

92
00:04:50,139 --> 00:04:52,930
Pak se chystáte dát, aby dovoz
skript stranou jednou, že to funguje

93
00:04:52,930 --> 00:04:55,140
a databáze je hezké
a správné, a pak se

94
00:04:55,140 --> 00:04:58,880
chystáte přejít na skutečně
provádění mashup sám.

95
00:04:58,880 --> 00:05:01,670
Mashup bude vypadat
trochu něco takového.

96
00:05:01,670 --> 00:05:05,165
V mashup.cs50.net jsme
má řešení zaměstnanců

97
00:05:05,165 --> 00:05:06,990
že vypadá trochu něco takového.

98
00:05:06,990 --> 00:05:11,070
Ve skutečnosti, když jsem klikněte na tento noviny
Ikonka pro Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
uvidíte spřádání
krátce a poté ikonu

100
00:05:13,300 --> 00:05:16,370
objednal seznam
odrážkami seznam článků

101
00:05:16,370 --> 00:05:18,280
vztahující se k Cambridge, Massachusetts.

102
00:05:18,280 --> 00:05:20,352
Když kliknu na Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Uvidím, stejné pro dané město.

104
00:05:21,685 --> 00:05:24,174
A když jsem klikněte na
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
mohlo by neměl být žádný
Zprávy o z Watertown,

106
00:05:26,090 --> 00:05:28,630
takže uvidíte něco
jako pomalý novinky den.

107
00:05:28,630 --> 00:05:32,140
>> A teď, zatím, v levé horní části jsou
Některé známé ovládací Google Maps

108
00:05:32,140 --> 00:05:34,980
aby vám oddálit, pan
nahoru, dolů, doleva a doprava,

109
00:05:34,980 --> 00:05:37,360
ale také vyhledávací pole, které jsme tam dal.

110
00:05:37,360 --> 00:05:40,910
Takže když jsem se hledat, upřímně řečeno,
Jedinou další poštovní směrovací číslo vím,

111
00:05:40,910 --> 00:05:45,020
90.210, budeme skutečně vidět
Beverly Hills, Kalifornie.

112
00:05:45,020 --> 00:05:48,550
Po kliknutí mě to vede k
Kalifornie a celá parta

113
00:05:48,550 --> 00:05:50,369
ze zprávy o Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Nyní si všimnout, i to, co se tam stalo.

115
00:05:51,910 --> 00:05:57,040
Pokud se i tentokrát hledání 02138 nebo dokonce
Cambridge čárka Massachusetts nebo nějaká

116
00:05:57,040 --> 00:06:00,300
variantu, dostanete
málo autocomplete dropdown.

117
00:06:00,300 --> 00:06:03,840
Nyní to je pomocí plugin
pro knihovnu s názvem jQuery,

118
00:06:03,840 --> 00:06:05,732
a že plugin se nazývá dopředné.

119
00:06:05,732 --> 00:06:07,440
Prostě jsme pročíst
dokumentace,

120
00:06:07,440 --> 00:06:13,150
stáhli JS soubor integrovaných
do distribuční kódu, takže vás

121
00:06:13,150 --> 00:06:16,900
v konečném důsledku může psát kód, který
vyplní, že rozbalovací nabídky se auto

122
00:06:16,900 --> 00:06:19,350
výběry nebo jejich auto návrhy.

123
00:06:19,350 --> 00:06:23,820
>> Nyní distribuce kód, i když, že
jste dostali nedělá skoro stejně.

124
00:06:23,820 --> 00:06:26,860
Získáte Map Google vložený, a
dostanete ovládací prvky v levém horním rohu,

125
00:06:26,860 --> 00:06:28,240
a dostanete vyhledávací pole.

126
00:06:28,240 --> 00:06:32,760
Ale když píšu něco jako
02138, žádná místa jsou nalezeny dosud.

127
00:06:32,760 --> 00:06:34,730
Takže to bude
Jedním z našich cílů zde.

128
00:06:34,730 --> 00:06:37,430
Navíc, pokud budete mít o krok
zpět a podívat se na mapu sám,

129
00:06:37,430 --> 00:06:38,950
není novinka vůbec.

130
00:06:38,950 --> 00:06:41,780
I když jsem klepněte na tlačítko a
táhnout, žádné značky vlastně

131
00:06:41,780 --> 00:06:45,560
se objevují novinky, protože to
Problém je ponechán i pro vás.

132
00:06:45,560 --> 00:06:48,490
>> Pojďme se podívat a pak
v distribučním kódu.

133
00:06:48,490 --> 00:06:51,460
Poté, co jste si stáhli
pset8.zip a rozepnul ho

134
00:06:51,460 --> 00:06:54,430
do vhost adresáře
V CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
uvidíte tyto
adresáře tady uvnitř.

136
00:06:56,550 --> 00:07:00,200
Bin-- což obecně znamená
binární spustitelné programs--

137
00:07:00,200 --> 00:07:04,870
zahrnuje, jak je v pset7, některé PHP
Soubory, které ostatní soubory obsahují,

138
00:07:04,870 --> 00:07:06,710
pak veřejnost, což je
soubory, které potřebují

139
00:07:06,710 --> 00:07:09,369
být veřejně přístupné
uživateli v prostředí internetového prohlížeče.

140
00:07:09,369 --> 00:07:11,410
Pojďme se podívat na
bin, a my budeme

141
00:07:11,410 --> 00:07:13,890
vidět, že tam je soubor
tam už volal Importovat.

142
00:07:13,890 --> 00:07:17,591
Po otevření to s gedit, uvidíme
že, bohužel, že to není moc

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

144
00:07:18,090 --> 00:07:20,250
Vše, co je tam, i když,
je shebang nahoře

145
00:07:20,250 --> 00:07:23,410
který určuje, které
interpreter-- v tomto případě PHP--

146
00:07:23,410 --> 00:07:25,759
by měly být použity pro skutečně
spustit tento soubor.

147
00:07:25,759 --> 00:07:27,550
Ale pak, kde se říká, že
TODO je místo, kde jste

148
00:07:27,550 --> 00:07:31,130
bude muset napsat nějaký kód
která pravděpodobně vyžaduje config

149
00:07:31,130 --> 00:07:35,820
Soubor, který je v adresáři zahrnuje
jak jsme udělali předtím s PHP soubory.

150
00:07:35,820 --> 00:07:38,180
A pak budete
muset nějak otevřít

151
00:07:38,180 --> 00:07:41,920
us.text která vám pravděpodobně
rozbalení už.

152
00:07:41,920 --> 00:07:44,690
Pak budete muset
opakovat na tratích v tomto souboru,

153
00:07:44,690 --> 00:07:47,800
případně s využitím některých funkcí
navrženo ve specifikaci.

154
00:07:47,800 --> 00:07:51,390
Poté vložte každý z nich
linky do databáze MySQL

155
00:07:51,390 --> 00:07:54,940
pomocí funkce dotazu, který
jsme opět vám poskytl with--

156
00:07:54,940 --> 00:07:58,010
nebo alespoň varianta
tom functions.php,

157
00:07:58,010 --> 00:07:59,560
který uvidíme za chvíli.

158
00:07:59,560 --> 00:08:04,430
>> Nyní pojďme uzavřít dovoz a vrátit se do
našem seznamu, a tentokrát jít do

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

160
00:08:05,300 --> 00:08:09,210
A když to udělám ls tam, uvidíte
tři soubory docela líbí Zadání problému 7.

161
00:08:09,210 --> 00:08:13,760
A pojďme se rychle podívat,
Například, v config.php.

162
00:08:13,760 --> 00:08:16,730
V tam je méně řádků
než dříve, a to

163
00:08:16,730 --> 00:08:20,712
Zdá se, tento soubor obsahuje
constants.php a functions.php.

164
00:08:20,712 --> 00:08:23,670
Používáme mírně odlišný
Technika tentokrát skutečně

165
00:08:23,670 --> 00:08:30,910
upřesnit, že tyto soubory jsou relativní
k aktuálnímu adresáři __ DIR__

166
00:08:30,910 --> 00:08:35,280
znamená cokoliv adresář to
soubor config.php, je sám o sobě v.

167
00:08:35,280 --> 00:08:37,600
Tak tohle je víc
explicitní způsob zadávání

168
00:08:37,600 --> 00:08:40,100
jaké další soubory, které chcete potřebovat.

169
00:08:40,100 --> 00:08:44,020
>> Nyní, když uzavřu tento soubor a
otevřít constants.php místo toho,

170
00:08:44,020 --> 00:08:47,430
uvidíte soubor velmi připomínající
k problému Set 7 je také, i když

171
00:08:47,430 --> 00:08:50,050
s jiné databázi s názvem pset8.

172
00:08:50,050 --> 00:08:54,020
A konečně, v functions.php,
uvidíme pouze jednu funkci

173
00:08:54,020 --> 00:08:55,942
tentokrát s názvem dotazu.

174
00:08:55,942 --> 00:08:59,150
To je téměř stejný s výjimkou vyřizujeme
Chyby tentokrát trochu

175
00:08:59,150 --> 00:09:02,860
jinak, ale je to využití je
stejně jako v problém nastavit sedm.

176
00:09:02,860 --> 00:09:08,090
>> A teď se vraťme do naší pset8
adresář, jít do veřejnosti, a tam

177
00:09:08,090 --> 00:09:14,420
když to udělám ls, uvidíte tohle--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
a update.php-- všechny soubory.

179
00:09:16,940 --> 00:09:22,010
A pak CSS fonty, img, a
js adresář docela rád pset7.

180
00:09:22,010 --> 00:09:24,660
>> Pojďme se podívat na
index.html, který je

181
00:09:24,660 --> 00:09:27,290
bude opravdu
vstupní bod do smashup.

182
00:09:27,290 --> 00:09:31,820
Nyní v index.html, uvidíte celý
banda odkazů prvků v hlavě,

183
00:09:31,820 --> 00:09:36,540
konkrétně pro bootstrap pro naše vlastní
CSS následuje spoustu skriptu

184
00:09:36,540 --> 00:09:41,520
tagy pro věci, jako mapy, API
sám, speciální značka s popiskem

185
00:09:41,520 --> 00:09:44,950
nástroj, který jsme zmínili v
specifikace je vám k dispozici,

186
00:09:44,950 --> 00:09:48,420
jQuery sám, bootstrap
sám, a další knihovny

187
00:09:48,420 --> 00:09:50,990
volal podtržítko, které
hovoříme o ve spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js jako jquery.js
je knihovna JavaScript

189
00:09:57,031 --> 00:10:00,280
který má spoustu funkcí
že mnoho lidí ve světě přání

190
00:10:00,280 --> 00:10:02,020
existovalo v samotném JavaScriptu.

191
00:10:02,020 --> 00:10:04,560
Takže všichni z nich jsou
vlastně docela populární.

192
00:10:04,560 --> 00:10:07,140
Jsme také zmínil dopředné
který je knihovna, která

193
00:10:07,140 --> 00:10:11,180
dělá automatického dokončování dropdown a
nakonec odkaz na naše vlastní JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Mezitím, a možná
Naštěstí tento mashup

195
00:10:13,880 --> 00:10:17,550
je řízen poměrně málo
HTML tady dole.

196
00:10:17,550 --> 00:10:22,330
Všimněte si, že jsme zadali div v
naše tělo třídy kontejneru tekutiny.

197
00:10:22,330 --> 00:10:24,610
To, na Bootstrap je
dokumentace, jen

198
00:10:24,610 --> 00:10:29,840
Znamená to, že tento div bude vyplnit
výřez nebo okna prohlížeče je plně.

199
00:10:29,840 --> 00:10:33,020
>> Mezitím, pod tím máme div
že je otevřel a okamžitě zavřel

200
00:10:33,020 --> 00:10:34,790
s unikátním ID mapového okna.

201
00:10:34,790 --> 00:10:37,400
To je nyní od společnosti Google
Dokumentace Mapy

202
00:10:37,400 --> 00:10:42,490
pro jeho API, čímž jsem se prostě musíte
máte prázdný DIV, do které chcete aplikovat,

203
00:10:42,490 --> 00:10:44,470
nakonec, skutečný Google Maps.

204
00:10:44,470 --> 00:10:46,310
Ale o tom více v jen trochu.

205
00:10:46,310 --> 00:10:48,850
>> Konečně, tam je formulář
uvnitř které zde

206
00:10:48,850 --> 00:10:52,930
implementuje textového pole nahoře vlevo nahoře
v našem rozhraní pro vyhledávání.

207
00:10:52,930 --> 00:10:54,730
Všimněte si, že jsme použili
trochu bootstrap

208
00:10:54,730 --> 00:10:57,670
Zde too-- věci jako
form-inline a forma-group.

209
00:10:57,670 --> 00:11:00,080
Dali jsme dřívější
Unikátní ID formy.

210
00:11:00,080 --> 00:11:04,510
A pak, konečně, vlastně mám
typu vstupu, což je docela známý,

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

212
00:11:06,440 --> 00:11:07,230
Jen konvence.

213
00:11:07,230 --> 00:11:09,234
Q pro query-- by mohly mít
byl povolán cokoliv.

214
00:11:09,234 --> 00:11:11,400
A pak zástupný symbol,
Mezitím, je město, stát,

215
00:11:11,400 --> 00:11:16,200
a poštovní směrovací číslo, které by vás mohly vyvolat
vidění v našem mashup demo dříve.

216
00:11:16,200 --> 00:11:17,980
Pojďme uzavřít tento soubor.

217
00:11:17,980 --> 00:11:24,460
>> Nyní se podívej na soubory, PHP, které
čekají a pak soubory JavaScript.

218
00:11:24,460 --> 00:11:27,700
V našich PHP soubory, máme
která již byla provedena pro vás,

219
00:11:27,700 --> 00:11:29,960
Například, aktualizace.

220
00:11:29,960 --> 00:11:35,060
Update.php-- nebudeme utrácet obrovské
Množství času na here-- v kostce

221
00:11:35,060 --> 00:11:38,400
je soubor, který dotazy
Kód JavaScript se děje

222
00:11:38,400 --> 00:11:41,610
kontaktovat přes AJAX, že
asynchronní technika, která je

223
00:11:41,610 --> 00:11:45,980
zabudované do JavaScriptu v těchto dnech, že je to
bude nám umožní požádat update.php

224
00:11:45,980 --> 00:11:47,410
Pro více informací.

225
00:11:47,410 --> 00:11:50,045
>> Konkrétně, kdykoliv
uživatel táhne mapu

226
00:11:50,045 --> 00:11:53,310
nebo provede vyhledávání, který skáče
Uživatel na jiné místo,

227
00:11:53,310 --> 00:11:55,250
náš kód JavaScript,
jak brzy uvidíte, je

228
00:11:55,250 --> 00:11:59,610
zavolá update.php
a požádat o 10 nebo tak markerů

229
00:11:59,610 --> 00:12:02,630
ve výřezu na bázi
o GPS souřadnicích

230
00:12:02,630 --> 00:12:06,510
v horní a dolní části
rohy této mapě.

231
00:12:06,510 --> 00:12:10,520
Pak jsme se znovu osídlit mapy nyní,
uživatel přesunul obrazovce v pořadí

232
00:12:10,520 --> 00:12:14,210
vidět, 10 asi nové
markery různých městech.

233
00:12:14,210 --> 00:12:18,340
Mezitím, tento soubor je v konečném důsledku
chystá spustit SQL dotazu

234
00:12:18,340 --> 00:12:21,680
proti naší databázi
tabulku s názvem místa, která

235
00:12:21,680 --> 00:12:26,380
se bude vracet ty
10 nebo méně místa.

236
00:12:26,380 --> 00:12:32,620
>> Mezitím, v articles.php, je dalším
soubor psali jsme v plném rozsahu.

237
00:12:32,620 --> 00:12:35,820
Je to velmi podobné v duchu k
Funkce vyhledávání Zadání problému 7 je,

238
00:12:35,820 --> 00:12:39,450
který kontaktoval Yahoo Finance pro vás.

239
00:12:39,450 --> 00:12:43,710
Tento soubor kontakty Google News
pro vás, nakonec popadl

240
00:12:43,710 --> 00:12:46,050
strojově čitelné
version-- v něčem

241
00:12:46,050 --> 00:12:49,720
volal RSS format-- z novinek
pro Cambridge nebo Beverly Hills

242
00:12:49,720 --> 00:12:52,880
nebo co město, které jste hledali
na na základě tohoto geoparameter.

243
00:12:52,880 --> 00:12:57,250
My analyzovat tento RSS, která je jen
typ značkovacího jazyka XML volal,

244
00:12:57,250 --> 00:13:00,740
a pak jsme vlastně
vrátit do vašeho prohlížeče

245
00:13:00,740 --> 00:13:03,570
a do kódu JavaScript,
konkrétně ve formátu s názvem

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

247
00:13:06,097 --> 00:13:08,180
Teď uvidíte v
specification-- vám ukázat

248
00:13:08,180 --> 00:13:10,720
na to, jak můžete skutečně vidět
některé z JSON nadcházející back--

249
00:13:10,720 --> 00:13:15,210
že tato funkce nakonec
vám umožní naplnit ty vyskakovací menu tak

250
00:13:15,210 --> 00:13:16,960
že po klepnutí na tlačítko
na marker v mapě

251
00:13:16,960 --> 00:13:19,430
je skutečně vidět spoustu
kuliček, z nichž každá

252
00:13:19,430 --> 00:13:21,020
odkazy na článek.

253
00:13:21,020 --> 00:13:25,000
>> Nyní se pojďme podívat na jeden poslední
PHP soubor, který, naštěstí, není

254
00:13:25,000 --> 00:13:27,970
mají hodně jít on--
jen docela velký TODO.

255
00:13:27,970 --> 00:13:32,170
Právě teď tento soubor prohlašuje
pole s názvem místa.

256
00:13:32,170 --> 00:13:35,980
A pak nakonec tisky
že pole v JSON format--

257
00:13:35,980 --> 00:13:38,720
to pěkně, tisk jen proto, aby
věci jsou jednodušší ladění.

258
00:13:38,720 --> 00:13:41,480
Bohužel, v
Uprostřed je to TODO,

259
00:13:41,480 --> 00:13:46,890
hovory, které pro vás vyhledávání
databáze pro místa odpovídajících geo HTTP

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

261
00:13:47,490 --> 00:13:49,865
>> A skutečně, to bude
být jeden z vašich challenges--

262
00:13:49,865 --> 00:13:54,240
implementovat tuto funkci zde
tak, že když se obrátíte na tento soubor

263
00:13:54,240 --> 00:14:00,610
URL jako vyhledávání. php? geo = něco,
Váš kód bude nakonec vrátí JSON

264
00:14:00,610 --> 00:14:05,020
pole ze všech míst ve vašem
databázové tabulky, které odpovídají, že vstup.

265
00:14:05,020 --> 00:14:08,960
Takže v případě, že uživatel zadá ve městě Cambridge,
váš soubor zde search.php

266
00:14:08,960 --> 00:14:12,680
by měla v konečném důsledku vrátit pole JSON
pro všechny zápasy na Cambridge,

267
00:14:12,680 --> 00:14:16,990
který by mohl být v Massachusetts
ale může být i kdekoliv jinde.

268
00:14:16,990 --> 00:14:21,040
>> A konečně, pojďme se podívat na dvě
soubory, které jsou statické ultimately--

269
00:14:21,040 --> 00:14:23,680
Váš CSS soubor a váš soubor JavaScript.

270
00:14:23,680 --> 00:14:26,779
Když jdu do naší CSS adresáře,
je tu celá parta souborů tam,

271
00:14:26,779 --> 00:14:28,070
ale většina z nich jsou knihovny.

272
00:14:28,070 --> 00:14:31,530
Jdu se podívat,
specificky, na styles.css,

273
00:14:31,530 --> 00:14:35,440
což je naše vlastní globální CSS, že je to
bude stylizovat celý tento mashup.

274
00:14:35,440 --> 00:14:38,840
Nechám to na vás, abyste přečíst
komentáře zde, ale v kostce,

275
00:14:38,840 --> 00:14:43,490
to je CSS, který zajišťuje, že naše
mashup, ve výchozím nastavení po vybalení z krabice,

276
00:14:43,490 --> 00:14:46,950
vypadá přesně tak, jak chceme to--
s mapou plnící výřezu

277
00:14:46,950 --> 00:14:49,720
a s hledáním
box se v levém horním rohu.

278
00:14:49,720 --> 00:14:52,870
Také jsme vzít svobodu
stylizace, že typeahead rozevírací

279
00:14:52,870 --> 00:14:55,170
Nabídka trochu stejně.

280
00:14:55,170 --> 00:14:58,030
>> Nejdůležitější soubor
možná pro tento problém nastavit

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

282
00:15:01,070 --> 00:15:03,800
Uvnitř adresáře JS
je i více souborů.

283
00:15:03,800 --> 00:15:08,090
Všechny z nich jsou soubory knihoven
s výjimkou pro tento jeden, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Po otevření toto nahoru, pojďme se naše
Poslední turné prostřednictvím funkcí, které

285
00:15:11,460 --> 00:15:13,820
jsou zabudovány do tohoto souboru
pro vás a upozornit

286
00:15:13,820 --> 00:15:16,200
na Todos, které leží před námi.

287
00:15:16,200 --> 00:15:19,110
>> V horní části tohoto souboru,
jsou tři globální proměnné.

288
00:15:19,110 --> 00:15:22,910
Jeden pro mapy, který se chystá
je odkaz na naši mapu Google.

289
00:15:22,910 --> 00:15:25,510
Můžete si ji
trochu jako ukazatel.

290
00:15:25,510 --> 00:15:27,710
Mezitím, máme
další globální proměnné

291
00:15:27,710 --> 00:15:31,500
volal info, který se zdá být
uložení návratové hodnoty volání

292
00:15:31,500 --> 00:15:34,170
nové google.maps.InfoWindow.

293
00:15:34,170 --> 00:15:37,835
JavaScript podporuje objekty, které
jsou velmi podobné v duchu k vzpěrami.

294
00:15:37,835 --> 00:15:40,250
A co tento řádek pro
naše účely je na tom

295
00:15:40,250 --> 00:15:42,820
je vytvoření nové info
Okno v paměti a pak

296
00:15:42,820 --> 00:15:46,330
vedení kolem odkazu
ní v proměnné s názvem Info.

297
00:15:46,330 --> 00:15:48,330
A mezi těmi,
Mezitím, je to, co se zdá

298
00:15:48,330 --> 00:15:51,060
být prázdný JavaScript
pole s názvem značky.

299
00:15:51,060 --> 00:15:55,392
Všechny tyto novin ikon, nebo
může zvolit jinou ikonu úplně,

300
00:15:55,392 --> 00:15:57,350
se bude skladovat
nakonec v tomto poli

301
00:15:57,350 --> 00:16:01,570
takže můžeme velice snadno přidat do
Mapa a odstranit z mapy.

302
00:16:01,570 --> 00:16:03,990
>> Nyní přejděte dolů
trochu a svist

303
00:16:03,990 --> 00:16:07,690
prostřednictvím kódu, který je bude
proveden jakmile DOM nebo dokument

304
00:16:07,690 --> 00:16:10,480
objektový model, nebo
strana sama o sobě je připraven.

305
00:16:10,480 --> 00:16:12,942
Připomeňme si, že tuto syntaxi
tady prostě určuje

306
00:16:12,942 --> 00:16:14,900
že následující kód
by měly být prováděny pouze

307
00:16:14,900 --> 00:16:17,840
v případě, že prohlížeč dokončení
načítání všechno ostatní.

308
00:16:17,840 --> 00:16:19,750
>> Poprvé jsme se prohlásit
spoustu stylů,

309
00:16:19,750 --> 00:16:22,410
který končí stylizace
Mapa podle spec.

310
00:16:22,410 --> 00:16:24,790
Pak jsme prohlásit
spoustu možností,

311
00:16:24,790 --> 00:16:28,630
což dále přizpůsobit Google
mapa, která se chystáme vložit.

312
00:16:28,630 --> 00:16:32,090
My pak použít trochu jQuery kódu,
která je vysvětlena v trochu podrobněji

313
00:16:32,090 --> 00:16:35,000
v spec, chytit
tento prvek, mapa, plátno

314
00:16:35,000 --> 00:16:36,980
že jsme tak jednoznačně identifikovány.

315
00:16:36,980 --> 00:16:40,640
A pak se tato linka je zde
to, co se zdá, jako mávnutím kouzelného proutku, aby nám

316
00:16:40,640 --> 00:16:43,560
Google uvnitř
naše vlastní aplikace,

317
00:16:43,560 --> 00:16:47,020
uložení odkaz na ně
V této proměnné s názvem mapy.

318
00:16:47,020 --> 00:16:50,550
>> A konečně, tady dole jsme se zaregistrujte
co se nazývá posluchač.

319
00:16:50,550 --> 00:16:54,690
Myslíš, že back-- cesta, cesta
back-- na týden nula v CS50

320
00:16:54,690 --> 00:16:57,430
když jsme se podívali na Scratch a
jeho podpora prostřednictvím procházku

321
00:16:57,430 --> 00:16:59,935
díky za věci s názvem
události a vysílání.

322
00:16:59,935 --> 00:17:01,810
Možná nepoužili
it yourself, ale je to

323
00:17:01,810 --> 00:17:03,900
mechanismus, který
prohlížeče v tomto případě

324
00:17:03,900 --> 00:17:07,940
Můžete získat naši pozornost, když je to
připraveni skutečně spustit nějaký kód.

325
00:17:07,940 --> 00:17:12,170
V tomto případě, že to bude poslouchat
na mapu na akci s názvem nečinnosti.

326
00:17:12,170 --> 00:17:14,930
To znamená, že prohlížeč má
dokončil načtení mapy Google.

327
00:17:14,930 --> 00:17:18,380
V tomto bodě s názvem funkce
configure by nakonec

328
00:17:18,380 --> 00:17:19,339
být provedeny.

329
00:17:19,339 --> 00:17:22,510
Tato funkce, konfigurovat,
uvidíme, je napsán u nás.

330
00:17:22,510 --> 00:17:24,550
>> Teď tady je funkce
že, bohužel,

331
00:17:24,550 --> 00:17:25,871
je jen TODO add značka.

332
00:17:25,871 --> 00:17:28,620
Per spec. budete potřebovat
napsat kód, který skutečně

333
00:17:28,620 --> 00:17:32,840
přidává marker-- ať to vypadá
jako noviny, nebo palec připínáček,

334
00:17:32,840 --> 00:17:35,360
nebo něco else-- na Google mapě.

335
00:17:35,360 --> 00:17:37,720
Tady už je to, že funkce
volal configure.

336
00:17:37,720 --> 00:17:40,390
Nechám to na vás, abyste přečíst
přes to podrobněji,

337
00:17:40,390 --> 00:17:42,600
ale uvědomit, že přidáme
parta více posluchačů

338
00:17:42,600 --> 00:17:46,620
takže můžeme spustit kód, když
uživatel klepne na vytáhne mapu.

339
00:17:46,620 --> 00:17:50,730
Máme také kód zde, že
inicializuje, že typeahead plugin

340
00:17:50,730 --> 00:17:53,120
takže dropdown
nabídka skutečně funguje.

341
00:17:53,120 --> 00:17:55,690
>> Ale pojďme zaměřit na právě
Pár míst zde.

342
00:17:55,690 --> 00:17:57,590
Konkrétně se to dělat.

343
00:17:57,590 --> 00:18:00,410
Budu odložit na on-line
dokumentace a specifikace

344
00:18:00,410 --> 00:18:02,530
na to, jak vyplnit tuto TODO.

345
00:18:02,530 --> 00:18:05,890
Ale ve zkratce, tato knihovna
dopředné umožňuje předat

346
00:18:05,890 --> 00:18:09,790
v tom, co je obecně známé jako šablonu,
, která má nějaké proměnné zástupné symboly

347
00:18:09,790 --> 00:18:13,690
velmi podobný svým duchem printf je%. * s.

348
00:18:13,690 --> 00:18:16,030
Ale v tomto případě,
Šablona na spec

349
00:18:16,030 --> 00:18:18,760
umožňuje zadat
to, co chcete, proměnné

350
00:18:18,760 --> 00:18:24,880
aplikovat z údajů, které pocházejí
zpět z něčeho, jako je PHP

351
00:18:24,880 --> 00:18:29,810
soubory, které jste napsali
které jsou emitující výstup JSON.

352
00:18:29,810 --> 00:18:35,170
>> Teď sem si uvědomil, že jsme
poslech pro dopředné výběry

353
00:18:35,170 --> 00:18:38,050
když uživatel skutečně provádí
vyhledávání a vybere hodnotu.

354
00:18:38,050 --> 00:18:40,270
To je, jak jsme vlastně
bude naslouchat, že

355
00:18:40,270 --> 00:18:42,250
a spustit nějaký kód jako výsledek.

356
00:18:42,250 --> 00:18:45,300
Dále budeme pokračovat v konfiguraci
mashup jen trochu.

357
00:18:45,300 --> 00:18:48,000
A nakonec, nazýváme
tato funkce aktualizace.

358
00:18:48,000 --> 00:18:49,640
Aktualizuje značek na obrazovce.

359
00:18:49,640 --> 00:18:51,529
Více o tom za chvíli.

360
00:18:51,529 --> 00:18:53,570
Mezitím, je tu pár
malé funkce v zde.

361
00:18:53,570 --> 00:18:56,820
Jedním z nich je hideInfo který
prostě zavře InfoWindow.

362
00:18:56,820 --> 00:19:00,020
Další funkcí, která sem nakonec
nebude příliš dlouhá, odstranit značky.

363
00:19:00,020 --> 00:19:03,580
To bude vrátit cokoliv
Váš add funkce značka dělá.

364
00:19:03,580 --> 00:19:04,960
A pak tady je vyhledávání.

365
00:19:04,960 --> 00:19:08,610
A tohle je zajímavé, protože my
psali kód JavaScriptu, který je

366
00:19:08,610 --> 00:19:13,490
mluvit do search.php na
serveru a získat zpět část odpovědi.

367
00:19:13,490 --> 00:19:16,110
>> Ty, samozřejmě, bude i nadále
muset implementovat search.php,

368
00:19:16,110 --> 00:19:18,310
ale my jsme realizován
JavaScript kód, který je

369
00:19:18,310 --> 00:19:22,480
bude zvládnout skutečně provádí
vyhledává od tohoto textového pole.

370
00:19:22,480 --> 00:19:25,340
Zejména, oznámení
že tato funkce zde,

371
00:19:25,340 --> 00:19:29,160
vyhledávání, to volání search.php
metodou zvanou

372
00:19:29,160 --> 00:19:31,072
dostat JSON, který jsme viděli v přednášce.

373
00:19:31,072 --> 00:19:32,780
A syntax zde
je trochu jinak

374
00:19:32,780 --> 00:19:37,110
z přednášky v tom, že jsme pomocí
jQuery tzv slib rozhraní.

375
00:19:37,110 --> 00:19:38,479
O tom více v spec.

376
00:19:38,479 --> 00:19:40,520
To jednoduše znamená pro naši
účely se, že tam

377
00:19:40,520 --> 00:19:43,870
jsou dvě speciální funkce jsme
třeba volat bodovým zápisem

378
00:19:43,870 --> 00:19:46,230
zde hned po volání dostat JSON.

379
00:19:46,230 --> 00:19:47,510
Jedním z nich je tzv hotovo.

380
00:19:47,510 --> 00:19:49,870
Jedním z nich je tzv selhání.

381
00:19:49,870 --> 00:19:51,790
Můžete si myslet o těchto
jako ovladač úspěch

382
00:19:51,790 --> 00:19:54,960
a psovod selhání právě
V případě, že se něco pokazí.

383
00:19:54,960 --> 00:19:57,760
>> Nyní se podívejme na poslední
několik funkcí v tomto souboru.

384
00:19:57,760 --> 00:20:00,180
Tady dole je funkce
nazvaný showInfo, který

385
00:20:00,180 --> 00:20:03,090
zobrazuje informace v jednom z těch,
malé info okna, která

386
00:20:03,090 --> 00:20:05,380
se objeví, když uživatel klepne na značku.

387
00:20:05,380 --> 00:20:08,470
Tady dole je další
že funkce aktualizace

388
00:20:08,470 --> 00:20:10,510
že jsme zavedli pro vás.

389
00:20:10,510 --> 00:20:15,250
To určuje hranice mapy.

390
00:20:15,250 --> 00:20:19,360
Jaké jsou GPS souřadnice jeho
severovýchod a jihozápadní rohy zde.

391
00:20:19,360 --> 00:20:22,780
Připravili jsme některé parametry HDP
tady a pak přešel je nakonec

392
00:20:22,780 --> 00:20:26,160
ke update.php, který máme
implementovány i pro vás.

393
00:20:26,160 --> 00:20:31,390
To nakonec dostane zpět část JSON
od soubor s názvem update.php

394
00:20:31,390 --> 00:20:34,050
a pak se odstraní všechny
značky na obrazovce

395
00:20:34,050 --> 00:20:36,650
a pak se opakuje po
Data, která se vrátí

396
00:20:36,650 --> 00:20:40,350
z update.php, který
opět je jen pole JSON.

397
00:20:40,350 --> 00:20:45,130
A pak se to nakonec přidá značku pro
každé z těchto míst, manipulace selhání

398
00:20:45,130 --> 00:20:47,750
nebo chyby, které by mohly velmi dobře stát.

399
00:20:47,750 --> 00:20:51,550
>> Teď už jen stačí, aby vám chuť na to, jak
může jít o ladění tohoto projektu,

400
00:20:51,550 --> 00:20:55,420
Uvědomuji si, že jsem otevřel v
předem tuto kartu sem na tuto adresu URL,

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

402
00:21:01,320 --> 00:21:04,050
Nyní, znovu, články o
PHP jsme zavedli pro Vás

403
00:21:04,050 --> 00:21:06,320
takže to není tak moc
to, co budete používat

404
00:21:06,320 --> 00:21:08,190
ladění, ale spíše techniky.

405
00:21:08,190 --> 00:21:10,590
Všimněte si, že jsem hledal
Cambridgeova PSČ tady,

406
00:21:10,590 --> 00:21:15,260
a já jsem dostal zpátky, opravdu, JSON
Pole JSON objektů uvnitř kterého

407
00:21:15,260 --> 00:21:17,640
jsou dva keys-- odkaz a název.

408
00:21:17,640 --> 00:21:19,860
>> Tak tato funkce
pracuje již pro vás.

409
00:21:19,860 --> 00:21:24,330
Ale tato technika manuálně děje
na adresu URL, jako je to na něco jako

410
00:21:24,330 --> 00:21:31,710
search.php? geo = Cambridge nebo 02138 nebo
co uživatel napsal by mel

411
00:21:31,710 --> 00:21:35,770
neocenitelné jako vy, sami, zkuste
přesně zjistit, zda je, nebo proč

412
00:21:35,770 --> 00:21:38,510
search.php funguje, nebo ne.

413
00:21:38,510 --> 00:21:41,720
>> Nakonec pak máte
několik Todos před vámi.

414
00:21:41,720 --> 00:21:44,250
Budeš první nářadí
že import skript, který

415
00:21:44,250 --> 00:21:46,520
čte us.text do databáze.

416
00:21:46,520 --> 00:21:48,760
Ty pak bude potřebovat
implementovat search.php

417
00:21:48,760 --> 00:21:51,320
tak, že se chová přesně tak, jak je uvedeno.

418
00:21:51,320 --> 00:21:54,170
Ty pak bude chtít
zaměřit se na scripts.js

419
00:21:54,170 --> 00:21:57,520
a nakonec implementuje
těch pár Todos,

420
00:21:57,520 --> 00:21:59,950
včetně configure
a že šablona,

421
00:21:59,950 --> 00:22:03,220
přidat značky, odstranit značky, a
pak poslední, ale v neposlední řadě, jeden

422
00:22:03,220 --> 00:22:04,330
osobní kontakt.

423
00:22:04,330 --> 00:22:07,477
>> Jakmile máte mashup práci
docela jako je ta naše, cíl na dosah ruky

424
00:22:07,477 --> 00:22:09,560
je pro vás přidat osobní
dotek na vaší mashup,

425
00:22:09,560 --> 00:22:11,290
ať už je to estetické nebo funkční.

426
00:22:11,290 --> 00:22:13,950
Vezměte mashup někdy tak
mírně na další úroveň.

427
00:22:13,950 --> 00:22:18,330
Tak dlouho, jak budete tlačit sami za
Váš obeznámenost s spec samotným

428
00:22:18,330 --> 00:22:20,840
a vyzvednout jednu techniku
nový, i když je to jen

429
00:22:20,840 --> 00:22:25,610
něco estetický jako měnící se
uspořádání mapy, který používáte,

430
00:22:25,610 --> 00:22:28,070
rozsah, že očekáváme
budou spokojeni.

431
00:22:28,070 --> 00:22:30,260
To je pak problém Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Zůstaňte naladěni na více
specifikace a hodně štěstí

433
00:22:33,070 --> 00:22:36,400
řešení, vaše poslední
CS50 problém nastavit vůbec.

434
00:22:36,400 --> 00:22:39,750
>> [Hudba hrát]

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