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

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

3
00:00:09,196 --> 00:00:10,180
>> David J. MALAN: Buna ziua.

4
00:00:10,180 --> 00:00:12,600
Să aruncăm o plimbare prin
Problemă Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
care este de gând să vă provoc să
bazeze pe elemente pentru Google Maps

6
00:00:15,880 --> 00:00:20,905
cu elemente din Știri Google și must
le împreună într-un applet web care

7
00:00:20,905 --> 00:00:24,150
permite unui utilizator pentru a căuta
o hartă pentru știri locale

8
00:00:24,150 --> 00:00:26,780
la orașe specifice,
orașe, și coduri zip.

9
00:00:26,780 --> 00:00:31,040
Pentru a face acest lucru, vom
integra unele HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript și o tehnică
în general, cunoscut sub numele de AJAX în ordine

11
00:00:34,390 --> 00:00:36,850
pentru a crea această captivantă
experiența utilizatorului.

12
00:00:36,850 --> 00:00:38,920
>> Să primul pentru Google Maps sine.

13
00:00:38,920 --> 00:00:41,220
Acest lucru, desigur, este, probabil,
o interfață familiară.

14
00:00:41,220 --> 00:00:45,070
Dar se pare că Google Maps
oferă, de asemenea o cerere API--

15
00:00:45,070 --> 00:00:48,360
programare interface-- prin care
puteti elemente de Google Maps

16
00:00:48,360 --> 00:00:50,740
și să le integreze în
propriile aplicații.

17
00:00:50,740 --> 00:00:52,650
Într-adevăr, pe parcursul acestui
proces, veti

18
00:00:52,650 --> 00:00:55,140
pentru a găsi o pereche de adrese URL
deosebit de util ca

19
00:00:55,140 --> 00:00:57,820
sunt menționate în
caietul de sarcini pentru problema Set 8,

20
00:00:57,820 --> 00:01:00,980
în special această Noțiuni de bază
Ghid sau Ghidul dezvoltatorului

21
00:01:00,980 --> 00:01:07,640
pentru Google Maps API versiunea 3, precum și
ca API Hărți Google JavaScript

22
00:01:07,640 --> 00:01:10,260
referință v3, care este o
bit mai mult arcane de citit

23
00:01:10,260 --> 00:01:14,600
dar de fapt, are toate nivelul inferior
Detalii despre ce funcții sau metode

24
00:01:14,600 --> 00:01:18,220
și obiecte și proprietăți și
Evenimente vin de fapt cu API,

25
00:01:18,220 --> 00:01:20,720
foarte similare în spirit
la [neauzit] pagini.

26
00:01:20,720 --> 00:01:23,480
>> Acum, dacă ne uităm
la Știri Google, veți

27
00:01:23,480 --> 00:01:25,370
poate vedea o interfata familiara aici.

28
00:01:25,370 --> 00:01:29,350
Dar se pare că puteți căuta, de asemenea
Știri Google pentru zone geografice specifice

29
00:01:29,350 --> 00:01:32,000
prin intermediul unui parametru HTTP numit geo.

30
00:01:32,000 --> 00:01:35,100
De fapt, dacă am mări
aici, veți vedea că

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

32
00:01:41,672 --> 00:01:43,630
Și, într-adevăr, dacă am mări
out, veți vedea că sunt

33
00:01:43,630 --> 00:01:47,090
uita la o pagină cu o grămadă de
opinii cu privire la Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> Între timp, dacă am schimba de fapt
URL-ul să nu fie un cod poștal acest fel,

35
00:01:50,620 --> 00:01:55,580
dar ceva un pic Messier
ca Cambridge, Massachusetts +,

36
00:01:55,580 --> 00:02:00,740
în cazul în care plusul este modul în care codifica o
caracter spațiu într-un URL și apăsați Enter,

37
00:02:00,740 --> 00:02:02,907
veți vedea că eu de fapt
a se vedea aproape aceeași știri.

38
00:02:02,907 --> 00:02:05,489
Poate e un pic diferit
deoarece Cambridge de fapt

39
00:02:05,489 --> 00:02:06,910
are mai multe coduri poștale.

40
00:02:06,910 --> 00:02:09,410
Acum, cum să știu asta și,
în fapt, cum ar putea să cumva

41
00:02:09,410 --> 00:02:12,940
cravată orașe și localități
codurile zip în cazul I

42
00:02:12,940 --> 00:02:15,064
doresc să permită utilizatorului
să se uite în sus fie?

43
00:02:15,064 --> 00:02:17,480
Ei bine, se pare că nu există
un site web acolo numit

44
00:02:17,480 --> 00:02:20,060
geonames.org care este
o inițiativă de a avea

45
00:02:20,060 --> 00:02:23,760
o bază de date disponibil gratuit tuturor
felul de informații geografice,

46
00:02:23,760 --> 00:02:27,040
nu numai pentru Statele Unite, dar, de asemenea,
pentru alte țări.

47
00:02:27,040 --> 00:02:30,430
De fapt, dacă mă duc la această adresă URL aici, care
este, de asemenea, menționat în problema stabilit

48
00:02:30,430 --> 00:02:34,510
caietul de sarcini, veți vedea trei
lista cu o grămadă de fișiere zip

49
00:02:34,510 --> 00:02:36,400
oricare dintre aceștia poate fi descărcat de tine.

50
00:02:36,400 --> 00:02:39,900
De fapt, pentru această problemă set
ai de gând pentru a descărca us.zip.

51
00:02:39,900 --> 00:02:43,790
Acum, în acest dosar, este un întreg
buchet de date în format text.

52
00:02:43,790 --> 00:02:47,760
Fișierele este foarte asemănătoare cu o
CSV-- valori separate prin virgulă file--

53
00:02:47,760 --> 00:02:51,294
dar îl folosește de fapt
file a delimita câmpuri.

54
00:02:51,294 --> 00:02:53,710
Acum, între timp, dacă te uiți
aici la ceea ce am subliniat,

55
00:02:53,710 --> 00:02:56,459
câmpurile din acest fișier vor
a fi lucruri, cum ar fi coduri de țară,

56
00:02:56,459 --> 00:02:58,980
coduri postale, numele de locuri,
și apoi, într-o formă

57
00:02:58,980 --> 00:03:04,230
sau alte state, si judete,
comunități, și mai mult.

58
00:03:04,230 --> 00:03:06,630
De fapt, am deja
descărcat acest fișier în avans.

59
00:03:06,630 --> 00:03:09,750
Lasă-mă să merg mai departe și deschideți-l here--
us.text-- și, într-adevăr, veți

60
00:03:09,750 --> 00:03:16,660
să văd dacă defilați în jos la linia de 16792
veți vedea câteva înregistrări pentru Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts și diversele sale coduri poștale.

62
00:03:19,120 --> 00:03:22,150
Ceea ce vezi, de asemenea, există județ,
unele numere care eu nu prea

63
00:03:22,150 --> 00:03:24,500
Înțeleg, dar, de asemenea, toate
modul din dreapta,

64
00:03:24,500 --> 00:03:27,170
unele GPS coordinates--
latitudine și longitudine.

65
00:03:27,170 --> 00:03:30,440
Acest lucru este mare, deoarece una din
caracteristicile Google Maps API

66
00:03:30,440 --> 00:03:33,670
este abilitatea de a detecta
în cazul în care vă aflați geografic

67
00:03:33,670 --> 00:03:36,850
în ceea ce privește coordonatele GPS.

68
00:03:36,850 --> 00:03:40,210
>> Acum să începem să dau seama cum să
începe leagă aceste lucruri împreună.

69
00:03:40,210 --> 00:03:42,900
Ne-am dat un întreg
grămadă de cod de distribuție,

70
00:03:42,900 --> 00:03:44,970
precum și de baze de date MySQL.

71
00:03:44,970 --> 00:03:49,100
De fapt, dacă am trage o phpMyAdmin având
deja importat, în timp ce în curând va fi,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, veți vedea un tabel MySQL care
arata ca acest, un câmp de identitate, țară

73
00:03:54,800 --> 00:03:57,400
cod, cod postal, nume de loc și mai mult.

74
00:03:57,400 --> 00:04:00,490
Tipurile de toți cei
coloanele I derivat pur și simplu

75
00:04:00,490 --> 00:04:03,870
prin citirea readme.text
fișier aici cea specificată

76
00:04:03,870 --> 00:04:07,330
dacă un câmp este un număr întreg,
sau varchar sau altele asemenea.

77
00:04:07,330 --> 00:04:10,510
>> Deci, am creat acel tabel pentru
tu și tu dat comenzile SQL

78
00:04:10,510 --> 00:04:12,770
pentru a executa pentru a crea acea
tabel în baza de date proprie,

79
00:04:12,770 --> 00:04:15,290
dar nu e de fapt nu există date în ea încă.

80
00:04:15,290 --> 00:04:19,600
Mai degrabă, ai de gând să trebuie să
descărca us.zip sau zip orice țară

81
00:04:19,600 --> 00:04:21,500
fișier de la acea adresă URL acolo.

82
00:04:21,500 --> 00:04:24,940
Si apoi vei avea să scrie
un script linie de comandă în PHP care este

83
00:04:24,940 --> 00:04:28,420
O să deschidă acest text
fișier, itera peste liniile sale,

84
00:04:28,420 --> 00:04:31,180
și apoi pentru fiecare dintre
aceste linii fac o inserție

85
00:04:31,180 --> 00:04:34,940
în care plasează tabel
în baza de date MySQL.

86
00:04:34,940 --> 00:04:37,880
Deci, la sfârșitul acestui proces, veți
au rulat că script în cele din urmă

87
00:04:37,880 --> 00:04:39,610
doar o singură dată în teorie.

88
00:04:39,610 --> 00:04:41,780
În realitate veți probabil
rulați-l o grămadă de ori

89
00:04:41,780 --> 00:04:45,460
în timp ce încerca să stabilească diverse bug-uri.

90
00:04:45,460 --> 00:04:48,440
>> În cele din urmă, ai de gând să aibă o
bază de date foarte mare cu mii

91
00:04:48,440 --> 00:04:50,139
și mii de rânduri geografice.

92
00:04:50,139 --> 00:04:52,930
Apoi, ai de gând să pună că de import
script deoparte după ce a fost de lucru

93
00:04:52,930 --> 00:04:55,140
iar baza de date este frumos
și corectă, și apoi

94
00:04:55,140 --> 00:04:58,880
ai de gând să se mute la efectiv
de punere în aplicare Mashup în sine.

95
00:04:58,880 --> 00:05:01,670
Mashup va arata
ceva de genul asta.

96
00:05:01,670 --> 00:05:05,165
La mashup.cs50.net, noi
au o soluție personal

97
00:05:05,165 --> 00:05:06,990
care arată ceva de genul asta.

98
00:05:06,990 --> 00:05:11,070
Într-adevăr, dacă am faceți clic pe acest ziar
icon pentru Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
veți vedea o filare
icon scurt și apoi

100
00:05:13,300 --> 00:05:16,370
o lista ordonata, un
listă cu marcatori de articole

101
00:05:16,370 --> 00:05:18,280
legate de Cambridge, Massachusetts.

102
00:05:18,280 --> 00:05:20,352
Dacă faceți clic pe Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Voi vedea la fel pentru că a orașului.

104
00:05:21,685 --> 00:05:24,174
Și dacă faceți clic pe
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
nu ar putea fi nici o
știri de la Watertown,

106
00:05:26,090 --> 00:05:28,630
astfel încât veți vedea ceva
ca lent zi de știri.

107
00:05:28,630 --> 00:05:32,140
>> Acum, între timp, la stânga sus sunt
unele controale familiare Google Maps

108
00:05:32,140 --> 00:05:34,980
să vă micșora, pan
sus, jos, stânga, și la dreapta,

109
00:05:34,980 --> 00:05:37,360
dar, de asemenea o casetă de căutare pe care am pus acolo.

110
00:05:37,360 --> 00:05:40,910
Deci, dacă am căuta, sincer,
singurul codul poștal știu,

111
00:05:40,910 --> 00:05:45,020
90210, vom vedea de fapt
Beverly Hills, California.

112
00:05:45,020 --> 00:05:48,550
Când dat click pe acesta mă duce la
California si o gramada

113
00:05:48,550 --> 00:05:50,369
de stiri despre Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Acum observați, de asemenea, ce sa întâmplat acolo.

115
00:05:51,910 --> 00:05:57,040
Dacă această căutare timp de 02138 sau chiar
Cambridge virgulă Massachusetts sau unele

116
00:05:57,040 --> 00:06:00,300
variantă a acesteia, veți obține o
puțin verticală automată.

117
00:06:00,300 --> 00:06:03,840
Acum, acest lucru este cu ajutorul unui plugin
pentru o bibliotecă numită jQuery,

118
00:06:03,840 --> 00:06:05,732
și că plugin se numeste typeahead.

119
00:06:05,732 --> 00:06:07,440
Pur și simplu citit prin
documentația,

120
00:06:07,440 --> 00:06:13,150
descărcat js fișiere integrat
în codul de distribuție, astfel încât să

121
00:06:13,150 --> 00:06:16,900
în cele din urmă pot scrie codul care
umple că meniu vertical cu auto

122
00:06:16,900 --> 00:06:19,350
selecții sau sugestiile auto.

123
00:06:19,350 --> 00:06:23,820
>> Acum, codul de distributie, totuși, că
ați primit nu face aproape la fel de mult.

124
00:06:23,820 --> 00:06:26,860
Ai harta Google încorporat, și
te controalele în partea de sus stânga,

125
00:06:26,860 --> 00:06:28,240
și veți obține caseta de căutare.

126
00:06:28,240 --> 00:06:32,760
Dar dacă tastați ceva de genul
02138, nu locuri sunt găsite încă.

127
00:06:32,760 --> 00:06:34,730
Așa că va fi
unul dintre obiectivele noastre aici.

128
00:06:34,730 --> 00:06:37,430
Mai mult decât atât, dacă luați un pas
înapoi și uita-te la hartă în sine,

129
00:06:37,430 --> 00:06:38,950
nu exista nici un fel de veste.

130
00:06:38,950 --> 00:06:41,780
Chiar dacă am faceți clic și
trageți, nu markeri de fapt

131
00:06:41,780 --> 00:06:45,560
apar pentru știri, pentru că
provocare este lăsat pentru tine, de asemenea.

132
00:06:45,560 --> 00:06:48,490
>> Să aruncăm o privire, atunci
la codul de distribuție.

133
00:06:48,490 --> 00:06:51,460
După ce ați descărcat
pset8.zip și dezarhivat

134
00:06:51,460 --> 00:06:54,430
în directorul vhost
în CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
veți vedea aceste
directoare aici în interiorul.

136
00:06:56,550 --> 00:07:00,200
Bin-- care reprezintă, în general, pentru
binar executabil pentru programs--

137
00:07:00,200 --> 00:07:04,870
include, ca și în pset7, unele PHP
fișierele care alte fișiere includ,

138
00:07:04,870 --> 00:07:06,710
apoi public, care este
fișierele care au nevoie de

139
00:07:06,710 --> 00:07:09,369
să fie accesibile publicului
pentru un utilizator cu un browser.

140
00:07:09,369 --> 00:07:11,410
Să aruncăm o privire în
director bin, și vom

141
00:07:11,410 --> 00:07:13,890
a se vedea că există un fișier
acolo numit deja Import.

142
00:07:13,890 --> 00:07:17,591
Dacă deschidem acest lucru cu gedit, vom vedea
că, din păcate, nu prea

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

144
00:07:18,090 --> 00:07:20,250
Tot ceea ce este acolo, totuși,
este o shebang la vârf

145
00:07:20,250 --> 00:07:23,410
care precizează care
interpreter-- în acest caz PHP--

146
00:07:23,410 --> 00:07:25,759
ar trebui utilizate pentru a efectiv
executa acest fișier.

147
00:07:25,759 --> 00:07:27,550
Dar atunci unde se spune
TODO este locul unde ești

148
00:07:27,550 --> 00:07:31,130
Va trebui să scrie un cod
că, probabil, necesită configurare

149
00:07:31,130 --> 00:07:35,820
fișier care este în include director
așa cum am făcut înainte cu fișiere PHP.

150
00:07:35,820 --> 00:07:38,180
Si apoi vei
trebuie să deschidă cumva în sus

151
00:07:38,180 --> 00:07:41,920
us.text pe care le presupune
au dezarhivat deja.

152
00:07:41,920 --> 00:07:44,690
Apoi, ai de gând să trebuie să
itera peste liniile din acest fișier,

153
00:07:44,690 --> 00:07:47,800
probabil folosind unele dintre funcțiile
sugerat în caietul de sarcini.

154
00:07:47,800 --> 00:07:51,390
Apoi, se introduce fiecare dintre cele
Liniile în baza de date MySQL

155
00:07:51,390 --> 00:07:54,940
prin utilizarea funcției de interogare, care
v-am furnizat din nou aplice:

156
00:07:54,940 --> 00:07:58,010
sau cel puțin o variantă
acestora în functions.php,

157
00:07:58,010 --> 00:07:59,560
care vom vedea într-o clipă.

158
00:07:59,560 --> 00:08:04,430
>> Acum sa inchideti import și du-te înapoi la
directorul nostru și de această dată intra în

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

160
00:08:05,300 --> 00:08:09,210
Și dacă fac E acolo, veți vedea
trei fișiere, cum ar fi destul de Problemă Set 7.

161
00:08:09,210 --> 00:08:13,760
Și haideți să aruncăm o privire rapidă,
de exemplu, la config.php.

162
00:08:13,760 --> 00:08:16,730
Acolo, este mai puține linii
decât înainte, el și

163
00:08:16,730 --> 00:08:20,712
se pare acest fișier include
constants.php și functions.php.

164
00:08:20,712 --> 00:08:23,670
Suntem folosind un ușor diferită
Tehnica de data aceasta în jurul valorii de efectiv

165
00:08:23,670 --> 00:08:30,910
precizeze că aceste fișiere sunt relative
la directorul curent __ DIR__

166
00:08:30,910 --> 00:08:35,280
reprezintă orice director aceasta
fișier, config.php, este ea însăși în.

167
00:08:35,280 --> 00:08:37,600
Deci, aceasta este o mai
mod explicit de a specifica

168
00:08:37,600 --> 00:08:40,100
ce alte fișiere pe care doriți să solicite.

169
00:08:40,100 --> 00:08:44,020
>> Acum, dacă închid acest fișier și
deschide constants.php în schimb,

170
00:08:44,020 --> 00:08:47,430
veți vedea un fișier foarte amintește
Problema a Set 7, precum, chiar dacă

171
00:08:47,430 --> 00:08:50,050
cu un alt bază de date numită pset8.

172
00:08:50,050 --> 00:08:54,020
În cele din urmă, în functions.php,
vom vedea doar o singură funcție

173
00:08:54,020 --> 00:08:55,942
acest moment numit interogare.

174
00:08:55,942 --> 00:08:59,150
Acest lucru este aproape la fel, cu excepția ne ocupam
Erori de data aceasta în jurul valorii de un pic

175
00:08:59,150 --> 00:09:02,860
altfel, dar e de utilizare este
la fel ca și în problema set de șapte.

176
00:09:02,860 --> 00:09:08,090
>> Acum să ne întoarcem în pset8 nostru
director, du-te în public și acolo

177
00:09:08,090 --> 00:09:14,420
dacă fac ls, veți vedea astea--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
și update.php-- toate fișierele.

179
00:09:16,940 --> 00:09:22,010
Și apoi fonturi CSS, img si
Director js destul ca pset7.

180
00:09:22,010 --> 00:09:24,660
>> Să aruncăm o privire la
index.html, care este

181
00:09:24,660 --> 00:09:27,290
Va fi într-adevăr
punct de intrare pentru smashup.

182
00:09:27,290 --> 00:09:31,820
Acum in index.html, veți vedea un întreg
grămadă de elemente de legătură din cap,

183
00:09:31,820 --> 00:09:36,540
în mod special, pentru bootstrap pentru propria noastră
CSS urmată de o grămadă de script

184
00:09:36,540 --> 00:09:41,520
Tag-uri pentru lucruri cum ar fi hărți, API
în sine, un marker special cu eticheta

185
00:09:41,520 --> 00:09:44,950
utilitar care am menționat în
caietul de sarcini este disponibil pentru tine,

186
00:09:44,950 --> 00:09:48,420
jQuery în sine, bootstrap
în sine, și o altă bibliotecă

187
00:09:48,420 --> 00:09:50,990
numit subliniere care
vorbim despre în spec.

188
00:09:50,990 --> 00:09:57,031
Underscore.js ca jquery.js
este o bibliotecă JavaScript

189
00:09:57,031 --> 00:10:00,280
care are o grămadă de funcționalitate
că o mulțime de oameni în dorința lume

190
00:10:00,280 --> 00:10:02,020
existat în JavaScript sine.

191
00:10:02,020 --> 00:10:04,560
Deci toate acestea sunt
de fapt destul de popular.

192
00:10:04,560 --> 00:10:07,140
Am menționat, de asemenea, typeahead
care este biblioteca ce

193
00:10:07,140 --> 00:10:11,180
nu că verticală automată și
în cele din urmă un link către propria noastră JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Între timp, și, probabil,
din fericire, acest mashup

195
00:10:13,880 --> 00:10:17,550
este condus de relativ puțin
HTML aici în partea de jos.

196
00:10:17,550 --> 00:10:22,330
Observați că ne-am specificat un div în
corpul nostru de lichid de clasă-container.

197
00:10:22,330 --> 00:10:24,610
Acest lucru, pe bootstrap lui
documentație, doar

198
00:10:24,610 --> 00:10:29,840
înseamnă că acest div este de gând să umple
viewport sau fereastra de navigare complet.

199
00:10:29,840 --> 00:10:33,020
>> Între timp, de mai jos că avem un div
care este deschisă și închisă imediat

200
00:10:33,020 --> 00:10:34,790
cu ID-ul unic de hartă pânză.

201
00:10:34,790 --> 00:10:37,400
Acest lucru acum este de la Google
Documentație Harta

202
00:10:37,400 --> 00:10:42,490
pentru API sale, prin care pur și simplu am nevoie de
au un div gol, în care se injectează,

203
00:10:42,490 --> 00:10:44,470
în cele din urmă, un Google Maps reale.

204
00:10:44,470 --> 00:10:46,310
Dar, mai mult pe faptul că, în doar un pic.

205
00:10:46,310 --> 00:10:48,850
>> În cele din urmă, există un formular
în interiorul de aici care

206
00:10:48,850 --> 00:10:52,930
pune în aplicare caseta de text până sus stânga
în interfața noastră de căutare.

207
00:10:52,930 --> 00:10:54,730
Observați că am folosit
un pic de bootstrap

208
00:10:54,730 --> 00:10:57,670
aici too-- lucruri, cum ar fi
Formularul-inline și forma-grup.

209
00:10:57,670 --> 00:11:00,080
Am dat prima
ID unic de formă.

210
00:11:00,080 --> 00:11:04,510
Și apoi, în cele din urmă, am de fapt
un tip de intrare, care este destul de familiar,

211
00:11:04,510 --> 00:11:06,440
a căror identitate este q.

212
00:11:06,440 --> 00:11:07,230
Doar o convenție.

213
00:11:07,230 --> 00:11:09,234
Q pentru query-- ar putea avea
fost numit nimic.

214
00:11:09,234 --> 00:11:11,400
Și apoi substituent,
între timp, este oraș, stat,

215
00:11:11,400 --> 00:11:16,200
și codul poștal pe care s-ar putea aminti
văzând în mashup nostru demo mai devreme.

216
00:11:16,200 --> 00:11:17,980
Să închidem acest fișier.

217
00:11:17,980 --> 00:11:24,460
>> Acum, gasiti fisierele PHP care
așteaptă și apoi fișierele JavaScript.

218
00:11:24,460 --> 00:11:27,700
În dosarele noastre PHP, ne-am
deja puse în aplicare pentru tine,

219
00:11:27,700 --> 00:11:29,960
de exemplu, actualizări.

220
00:11:29,960 --> 00:11:35,060
Update.php-- nu vom cheltui o mare
sumă de timp pe here-- într-o coajă de nucă

221
00:11:35,060 --> 00:11:38,400
este fișierul care nostru
Cod JavaScript se întâmplă

222
00:11:38,400 --> 00:11:41,610
Contactati prin AJAX că
Tehnica asincron asta e

223
00:11:41,610 --> 00:11:45,980
construit în JavaScript aceste zile, care este
O să ne permite să cerem update.php

224
00:11:45,980 --> 00:11:47,410
pentru mai multe informații.

225
00:11:47,410 --> 00:11:50,045
>> Mai exact, oricând
utilizatorul trage pe harta

226
00:11:50,045 --> 00:11:53,310
sau efectuează o căutare care sare
utilizatorul în altă locație,

227
00:11:53,310 --> 00:11:55,250
codul nostru JavaScript,
așa cum vom vedea în curând, este

228
00:11:55,250 --> 00:11:59,610
O să sun update.php
și să ceară pentru 10 sau cam asa ceva markeri

229
00:11:59,610 --> 00:12:02,630
în viewport bazat
pe coordonatele GPS

230
00:12:02,630 --> 00:12:06,510
de sus și de jos
colțuri de care hartă.

231
00:12:06,510 --> 00:12:10,520
Putem repopula apoi pe harta acum că
utilizatorul a mutat ecranul în ordine

232
00:12:10,520 --> 00:12:14,210
pentru a vedea 10 probabil nou
markeri pentru diferite orașe.

233
00:12:14,210 --> 00:12:18,340
Între timp, acest fisier este în cele din urmă
O să execute o interogare SQL

234
00:12:18,340 --> 00:12:21,680
împotriva baza noastră de date
de masă denumit locuri care

235
00:12:21,680 --> 00:12:26,380
este de gând să se întoarcă pe cei
10 sau mai puține locuri.

236
00:12:26,380 --> 00:12:32,620
>> Între timp, în articles.php, este un alt
fișier care le-am scris în întregime.

237
00:12:32,620 --> 00:12:35,820
Este foarte similară în spirit de
Funcția Problema Set 7 de LOOKUP,

238
00:12:35,820 --> 00:12:39,450
care a contactat Yahoo Finance pentru tine.

239
00:12:39,450 --> 00:12:43,710
Acest fișier Contacte Noutati Google
pentru tine, în cele din urmă hapsân

240
00:12:43,710 --> 00:12:46,050
o mașină care poate fi citit-
version-- în ceva

241
00:12:46,050 --> 00:12:49,720
numita RSS format-- de știri
pentru Cambridge sau Beverly Hills

242
00:12:49,720 --> 00:12:52,880
sau orice oraș care le-ați căutat
pentru bazat pe acel geoparameter.

243
00:12:52,880 --> 00:12:57,250
Am analiza că RSS, care este doar o
tip de limbaj de marcare numit XML,

244
00:12:57,250 --> 00:13:00,740
și apoi ne-am de fapt
se reveni la browser-ul dvs.

245
00:13:00,740 --> 00:13:03,570
și pentru codul JavaScript,
în mod specific, într-un format numit

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

247
00:13:06,097 --> 00:13:08,180
Acum veți vedea în
specification-- noi vă punctul

248
00:13:08,180 --> 00:13:10,720
la cum puteți vedea de fapt
o parte din back-- venirii JSON

249
00:13:10,720 --> 00:13:15,210
că această funcționalitate în cele din urmă
vă permite să populeze aceste meniuri pop-up așa

250
00:13:15,210 --> 00:13:16,960
că, atunci când faceți clic pe
pe un marker pe hartă

251
00:13:16,960 --> 00:13:19,430
vezi de fapt o grămadă
de gloanțe, fiecare dintre acestea

252
00:13:19,430 --> 00:13:21,020
link-uri către un articol.

253
00:13:21,020 --> 00:13:25,000
>> Acum, haideți să aruncăm o privire la o ultimă
Fișier PHP care, din fericire, nu

254
00:13:25,000 --> 00:13:27,970
au mult merge on--
doar o TODO destul de mare.

255
00:13:27,970 --> 00:13:32,170
Acum acest fișier declară
o matrice numita locuri.

256
00:13:32,170 --> 00:13:35,980
Și apoi în cele din urmă printuri
că matrice în JSON format--

257
00:13:35,980 --> 00:13:38,720
ea destul de imprimare-doar pentru ca
lucrurile sunt mai ușor de depanare.

258
00:13:38,720 --> 00:13:41,480
Din păcate, în
mijloc nu există această TODO,

259
00:13:41,480 --> 00:13:46,890
care solicită să căutați
bază de date pentru locuri potrivite o geo HTTP

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

261
00:13:47,490 --> 00:13:49,865
>> Și, într-adevăr, acest lucru se întâmplă la
fi unul din challenges-- dumneavoastră

262
00:13:49,865 --> 00:13:54,240
să pună în aplicare această opțiune aici
astfel încât, atunci când a contacta această fișier cu

263
00:13:54,240 --> 00:14:00,610
un URL ca căutare. php? geo = ceva,
codul va reveni în cele din urmă un JSON

264
00:14:00,610 --> 00:14:05,020
serie de toate locurile din ta
tabel de baze de date care se potrivesc cu acea intrare.

265
00:14:05,020 --> 00:14:08,960
Deci, dacă utilizatorilor tipurile din Cambridge,
fișierul aici search.php

266
00:14:08,960 --> 00:14:12,680
în cele din urmă ar trebui să se întoarcă de o situare JSON
pentru toate meciurile de Cambridge,

267
00:14:12,680 --> 00:14:16,990
care ar putea fi în Massachusetts
dar ar putea fi chiar oriunde în altă parte.

268
00:14:16,990 --> 00:14:21,040
>> În cele din urmă, haideți să aruncăm o privire la două
fișiere care sunt ultimately-- statice

269
00:14:21,040 --> 00:14:23,680
fișierul CSS și fișierul JavaScript.

270
00:14:23,680 --> 00:14:26,779
Dacă mă duc în directorul nostru CSS,
există o grămadă de dosare acolo,

271
00:14:26,779 --> 00:14:28,070
dar cele mai multe dintre ele sunt biblioteci.

272
00:14:28,070 --> 00:14:31,530
Am de gând să ia o privire,
în mod specific, la styles.css,

273
00:14:31,530 --> 00:14:35,440
care este propria noastră CSS globală, care este
O să stiliza tot acest mashup.

274
00:14:35,440 --> 00:14:38,840
Voi lăsa să vă pentru a citi prin
comentariile aici, dar, într-o coajă de nucă,

275
00:14:38,840 --> 00:14:43,490
acesta este CSS care garantează faptul că noastră
mashup, implicit din centru,

276
00:14:43,490 --> 00:14:46,950
arată exact modul în care ne-o dorim it--
cu harta de umplere portul vedere

277
00:14:46,950 --> 00:14:49,720
și cu căutarea
caseta de până la partea din stânga sus.

278
00:14:49,720 --> 00:14:52,870
Am luat, de asemenea, libertatea de
stylizing că verticală typeahead

279
00:14:52,870 --> 00:14:55,170
Meniul un pic, de asemenea.

280
00:14:55,170 --> 00:14:58,030
>> Cea mai importantă Fișierul
poate pentru această problemă set

281
00:14:58,030 --> 00:15:01,070
este aceasta ultima, scripts.js.

282
00:15:01,070 --> 00:15:03,800
In interiorul directorul dvs. JS
este chiar mai multe fișiere.

283
00:15:03,800 --> 00:15:08,090
Toate acestea sunt fișiere bibliotecă
cu excepția pentru asta, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Dacă deschidem asta, să luăm nostru
tur definitivă prin funcțiile pe care

285
00:15:11,460 --> 00:15:13,820
sunt construite în acest fișier
pentru tine și atenție apel

286
00:15:13,820 --> 00:15:16,200
la Todos care stau în față.

287
00:15:16,200 --> 00:15:19,110
>> În partea de sus a acestui fișier,
Sunt trei variabile globale.

288
00:15:19,110 --> 00:15:22,910
Una pentru o hartă, care va
fie o trimitere la harta Google.

289
00:15:22,910 --> 00:15:25,510
Vă puteți gândi la ea
fel ca un pointer.

290
00:15:25,510 --> 00:15:27,710
Între timp, ne-am
altă variabilă globală

291
00:15:27,710 --> 00:15:31,500
numit informatii, care pare a fi
stocarea valoarea de returnare a unui apel

292
00:15:31,500 --> 00:15:34,170
la noi google.maps.InfoWindow.

293
00:15:34,170 --> 00:15:37,835
JavaScript susține obiecte care
sunt foarte similare în spirit de Struts.

294
00:15:37,835 --> 00:15:40,250
Și ce această linie pentru
scopul nostru este de a face

295
00:15:40,250 --> 00:15:42,820
este de a crea un nou info
fereastră în memorie și apoi

296
00:15:42,820 --> 00:15:46,330
păstrarea în jurul valorii de referință
acesta într-o variabilă numită Info.

297
00:15:46,330 --> 00:15:48,330
Iar în între cei,
între timp, este ceea ce pare

298
00:15:48,330 --> 00:15:51,060
a fi gol o de activarea JavaScript-
matrice numit markeri.

299
00:15:51,060 --> 00:15:55,392
Toate aceste icoane ziare, sau
s-ar putea alege un alt pictogramă cu totul,

300
00:15:55,392 --> 00:15:57,350
vor fi stocate
în cele din urmă în această matrice

301
00:15:57,350 --> 00:16:01,570
astfel încât să putem adăuga foarte ușor de
harta și a le elimina de pe hartă.

302
00:16:01,570 --> 00:16:03,990
>> Acum, haideți să derulați în jos
un pic și bâzâit

303
00:16:03,990 --> 00:16:07,690
prin codul care va fi
executat de îndată ce DOM sau documentul

304
00:16:07,690 --> 00:16:10,480
Modelul obiect sau
pagină în sine este gata.

305
00:16:10,480 --> 00:16:12,942
Amintiți-vă că această sintaxă
aici pur și simplu specifică

306
00:16:12,942 --> 00:16:14,900
că următorul cod
ar trebui să fie executată numai

307
00:16:14,900 --> 00:16:17,840
în cazul în care browser-ul sa terminat
încărcarea orice altceva.

308
00:16:17,840 --> 00:16:19,750
>> Noi declarăm în primul rând o
grămadă de stiluri,

309
00:16:19,750 --> 00:16:22,410
care ajung stylizing
harta ca pe spec.

310
00:16:22,410 --> 00:16:24,790
Apoi, declara o
grămadă de opțiuni,

311
00:16:24,790 --> 00:16:28,630
care personaliza și mai mult Google
hartă pe care suntem pe cale de a încorpora.

312
00:16:28,630 --> 00:16:32,090
Apoi utilizați un pic de cod jQuery,
ceea ce se explică într-un pic mai în detaliu

313
00:16:32,090 --> 00:16:35,000
în spec, pentru a apuca
acel element, harta, panza

314
00:16:35,000 --> 00:16:36,980
că am identificat atât de unic.

315
00:16:36,980 --> 00:16:40,640
Și apoi această linie de aici este
ceea ce pare să ne dea magic

316
00:16:40,640 --> 00:16:43,560
o hartă Google interiorul
propria noastră aplicație,

317
00:16:43,560 --> 00:16:47,020
stocarea o trimitere la acesta
că variabilă numită hartă.

318
00:16:47,020 --> 00:16:50,550
>> În cele din urmă, aici avem Inregistrare
ceea ce se numește un ascultător.

319
00:16:50,550 --> 00:16:54,690
Gândiți-vă mod back--, drum
back-- la săptămână la zero în CS50

320
00:16:54,690 --> 00:16:57,430
când ne-am uitat la zero și
sprijinul printr-o plimbare

321
00:16:57,430 --> 00:16:59,935
prin lucruri numite
evenimente și emisiuni.

322
00:16:59,935 --> 00:17:01,810
Tu nu ar putea fi folosit
singur, dar e

323
00:17:01,810 --> 00:17:03,900
un mecanism prin care un
Browser-ul în acest caz

324
00:17:03,900 --> 00:17:07,940
minim atenția atunci când este
gata să execute efectiv unele cod.

325
00:17:07,940 --> 00:17:12,170
În acest caz, se va asculta
la harta pentru un eveniment numit inactiv.

326
00:17:12,170 --> 00:17:14,930
Acest lucru înseamnă că browser-ul are
terminat de încărcat harta Google.

327
00:17:14,930 --> 00:17:18,380
În acest moment o funcție numită
configurare ar trebui în cele din urmă

328
00:17:18,380 --> 00:17:19,339
fi executat.

329
00:17:19,339 --> 00:17:22,510
Această funcție, configurați,
vom vedea, este scris de noi.

330
00:17:22,510 --> 00:17:24,550
>> Acum, aici este o funcție
că, din păcate,

331
00:17:24,550 --> 00:17:25,871
este doar o TODO adăugare marcator.

332
00:17:25,871 --> 00:17:28,620
Per spec. ai de gând să nevoie
a scrie codul care de fapt

333
00:17:28,620 --> 00:17:32,840
adaugă o marker-- dacă pare
ca un ziar, sau un tac degetul mare,

334
00:17:32,840 --> 00:17:35,360
sau ceva else-- pentru harta Google.

335
00:17:35,360 --> 00:17:37,720
Aici este acum această funcție
numit de configurare.

336
00:17:37,720 --> 00:17:40,390
Voi lăsa să vă pentru a citi
prin aceasta mai detaliat,

337
00:17:40,390 --> 00:17:42,600
dar seama că vom adăuga
un buchet mai multe Ascultătorii

338
00:17:42,600 --> 00:17:46,620
astfel încât să putem executa cod în cazul în care
utilizator face clic pe și trage hartă.

339
00:17:46,620 --> 00:17:50,730
Avem, de asemenea cod aici că
initializeaza că plugin typeahead

340
00:17:50,730 --> 00:17:53,120
astfel încât meniul vertical
Meniul de fapt funcționează.

341
00:17:53,120 --> 00:17:55,690
>> Dar să se concentreze pe doar o
câteva locuri aici.

342
00:17:55,690 --> 00:17:57,590
Mai exact, aceasta a face aici.

343
00:17:57,590 --> 00:18:00,410
Voi amâna pentru online
documentație și caietul de sarcini

344
00:18:00,410 --> 00:18:02,530
pentru modul de a completa acest TODO.

345
00:18:02,530 --> 00:18:05,890
Dar într-o coajă de nucă, această bibliotecă
typeahead vă permite să treci

346
00:18:05,890 --> 00:18:09,790
în ceea ce, în general, cunoscut ca un șablon,
care are unele substituenți variabile

347
00:18:09,790 --> 00:18:13,690
foarte similare în spirit printf lui%. * s.

348
00:18:13,690 --> 00:18:16,030
Dar, în acest caz,
șablon pe spec

349
00:18:16,030 --> 00:18:18,760
vă permite să specificați
ceea ce variabile vrei

350
00:18:18,760 --> 00:18:24,880
pentru a injecta la date care a venit
înapoi de la ceva de genul PHP

351
00:18:24,880 --> 00:18:29,810
fișierele pe care le-ați scris
care emit ieșire JSON.

352
00:18:29,810 --> 00:18:35,170
>> Acum, aici dăm seama că suntem
ascultare pentru selecții typeahead

353
00:18:35,170 --> 00:18:38,050
atunci când utilizatorul este administrat efectiv
o căutare și selectează o valoare.

354
00:18:38,050 --> 00:18:40,270
Acesta este modul în care suntem de fapt
O să asculte că

355
00:18:40,270 --> 00:18:42,250
și executa unele cod ca un rezultat.

356
00:18:42,250 --> 00:18:45,300
Apoi vom continua pentru a configura
Mashup doar un pic.

357
00:18:45,300 --> 00:18:48,000
Și, în cele din urmă, numim
această actualizare funcție.

358
00:18:48,000 --> 00:18:49,640
Aceasta actualizează markerii de pe ecran.

359
00:18:49,640 --> 00:18:51,529
Mai multe despre faptul că într-o clipă.

360
00:18:51,529 --> 00:18:53,570
În același timp, există câteva
Funcții mici de aici.

361
00:18:53,570 --> 00:18:56,820
Una dintre care este hideInfo care
pur și simplu închide InfoWindow.

362
00:18:56,820 --> 00:19:00,020
O altă funcție aici, care în cele din urmă
nu va fi prea mult timp, scoateți markeri.

363
00:19:00,020 --> 00:19:03,580
Asta va anula orice
funcția îi trimită add face.

364
00:19:03,580 --> 00:19:04,960
Și apoi aici este căutare.

365
00:19:04,960 --> 00:19:08,610
Și aceasta este interesant pentru că noi
au scris codul JavaScript care este

366
00:19:08,610 --> 00:19:13,490
O să vorbesc cu search.php pe de
serverul și de a lua înapoi unele măsuri.

367
00:19:13,490 --> 00:19:16,110
>> Tu, desigur, vor în continuare
trebuie să pună în aplicare search.php,

368
00:19:16,110 --> 00:19:18,310
dar ne-am pus în aplicare
Cod JavaScript care este

369
00:19:18,310 --> 00:19:22,480
O să se ocupe efectiv efectuarea
Cautari de la cutia de text.

370
00:19:22,480 --> 00:19:25,340
În special, aviz
că această funcție de aici,

371
00:19:25,340 --> 00:19:29,160
căutare, nu suna search.php
printr-o metodă numită

372
00:19:29,160 --> 00:19:31,072
obține JSON, pe care am văzut în curs.

373
00:19:31,072 --> 00:19:32,780
Și sintaxa aici
este un pic diferit

374
00:19:32,780 --> 00:19:37,110
de la curs în care îl utilizăm
jQuery așa-numita interfață promisiune.

375
00:19:37,110 --> 00:19:38,479
Mai multe despre faptul că, în spec.

376
00:19:38,479 --> 00:19:40,520
Acest lucru înseamnă pur și simplu pentru noastră
scopuri acum că acolo

377
00:19:40,520 --> 00:19:43,870
sunt două funcții speciale noi
nevoie pentru a apela cu notație punct

378
00:19:43,870 --> 00:19:46,230
aici imediat după apel primi JSON.

379
00:19:46,230 --> 00:19:47,510
Un este numit făcut.

380
00:19:47,510 --> 00:19:49,870
Un este numit eșua.

381
00:19:49,870 --> 00:19:51,790
Vă puteți gândi la aceste
ca handler succes

382
00:19:51,790 --> 00:19:54,960
și handler eșec doar
în cazul în care ceva nu merge bine.

383
00:19:54,960 --> 00:19:57,760
>> Acum, să ne uităm la ultimul
două funcții în acest dosar.

384
00:19:57,760 --> 00:20:00,180
Aici jos este o funcție
numita showInfo, care

385
00:20:00,180 --> 00:20:03,090
prezinta informatii intr-unul din cele
mici ferestre de informatii care

386
00:20:03,090 --> 00:20:05,380
apare atunci când utilizatorul face clic pe un marcator.

387
00:20:05,380 --> 00:20:08,470
Aici jos în continuare este
această funcție de actualizare

388
00:20:08,470 --> 00:20:10,510
care le-am implementat pentru tine.

389
00:20:10,510 --> 00:20:15,250
Acesta stabilește limitele pe harta.

390
00:20:15,250 --> 00:20:19,360
Care sunt coordonatele GPS ale sale
nord-est și sud-vest colțuri aici.

391
00:20:19,360 --> 00:20:22,780
Am pregătit niște parametri HDP
aici și apoi au trecut în cele din urmă

392
00:20:22,780 --> 00:20:26,160
la update.php, care ne-am
de asemenea, puse în aplicare pentru tine.

393
00:20:26,160 --> 00:20:31,390
Asta în cele din urmă se întoarce unele JSON
din fișierul numit update.php

394
00:20:31,390 --> 00:20:34,050
și apoi elimină orice
markeri de pe ecran

395
00:20:34,050 --> 00:20:36,650
și apoi reiterează peste
datele care se întoarce

396
00:20:36,650 --> 00:20:40,350
din update.php, care
din nou, este doar o matrice JSON.

397
00:20:40,350 --> 00:20:45,130
Și apoi se adaugă în cele din urmă un marker pentru
fiecare dintre aceste locuri, insuficiență manipulare

398
00:20:45,130 --> 00:20:47,750
sau erori care ar putea foarte bine întâmpla.

399
00:20:47,750 --> 00:20:51,550
>> Acum doar pentru a vă oferi un gust de modul în care
s-ar putea merge despre depanare acest proiect,

400
00:20:51,550 --> 00:20:55,420
dau seama că am deschis în
avansa această filă aici pentru a această adresă URL,

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

402
00:21:01,320 --> 00:21:04,050
Acum, din nou, articolele despre
PHP am implementat pentru tine

403
00:21:04,050 --> 00:21:06,320
deci acest lucru nu este atât de mult
ceea ce veți fi utilizați

404
00:21:06,320 --> 00:21:08,190
la depanare, ci mai degrabă tehnica.

405
00:21:08,190 --> 00:21:10,590
Observați că am căutat
Cod poștal Cambridge aici,

406
00:21:10,590 --> 00:21:15,260
și am ajuns înapoi, într-adevăr, un JSON
matrice de JSON obiecte în interiorul care

407
00:21:15,260 --> 00:21:17,640
sunt două link-keys-- și titlul.

408
00:21:17,640 --> 00:21:19,860
>> Deci, această funcționalitate
lucreaza deja pentru tine.

409
00:21:19,860 --> 00:21:24,330
Dar aceasta tehnica de manual merge
la un URL ca aceasta pentru ceva de genul

410
00:21:24,330 --> 00:21:31,710
search.php? geo = Cambridge sau 02138 sau
indiferent de utilizatorul a introdus în ar

411
00:21:31,710 --> 00:21:35,770
dovedi de neprețuit în timp ce, le încercați
să dau seama exact dacă este sau de ce

412
00:21:35,770 --> 00:21:38,510
search.php este de lucru sau nu.

413
00:21:38,510 --> 00:21:41,720
>> În cele din urmă, atunci, aveți
a todos câteva înainte de voi.

414
00:21:41,720 --> 00:21:44,250
Te duci la primele unelte
că script import care

415
00:21:44,250 --> 00:21:46,520
citește în us.text în baza de date.

416
00:21:46,520 --> 00:21:48,760
Te Apoi avea nevoie de
să pună în aplicare search.php

417
00:21:48,760 --> 00:21:51,320
astfel încât acesta se comportă exact așa cum este specificat.

418
00:21:51,320 --> 00:21:54,170
Te apoi merge la anunt
să se concentreze asupra scripts.js

419
00:21:54,170 --> 00:21:57,520
și în cele din urmă pune în aplicare
cele două Todos,

420
00:21:57,520 --> 00:21:59,950
inclusiv pentru configurare
și că șablon,

421
00:21:59,950 --> 00:22:03,220
adăuga markeri, elimina markeri, și
atunci dura, dar puțin nu, o

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

423
00:22:04,330 --> 00:22:07,477
>> După ce ați lucru dumneavoastră mashup
destul ca a noastră, obiectivul la îndemână

424
00:22:07,477 --> 00:22:09,560
este pentru a adauga o personal
atingeți pentru a mashup-ul,

425
00:22:09,560 --> 00:22:11,290
fie că este vorba estetic sau functional.

426
00:22:11,290 --> 00:22:13,950
Ia Mashup vreodată așa
ușor la nivelul următor.

427
00:22:13,950 --> 00:22:18,330
Atâta timp cât te împinge dincolo de
familiarizarea cu spec sine

428
00:22:18,330 --> 00:22:20,840
și ridica o tehnică
noi, chiar dacă e doar

429
00:22:20,840 --> 00:22:25,610
ceva estetice cum ar fi schimbarea
aspectul hărții pe care îl utilizați,

430
00:22:25,610 --> 00:22:28,070
domeniul de aplicare pe care ne asteptam
vor fi îndeplinite.

431
00:22:28,070 --> 00:22:30,260
Aceasta este atunci Problemă Set de 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Stay tuned pentru mai multe în
caietul de sarcini și cele mai bune de noroc

433
00:22:33,070 --> 00:22:36,400
abordarea asta, ultima ta
Problemă CS50 stabilit vreodată.

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

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