1
00:00:00,000 --> 00:00:03,388
>> [Jouer de la musique]

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

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

4
00:00:10,180 --> 00:00:12,600
Prenons une promenade à travers
Problème Set 8 Mashup,

5
00:00:12,600 --> 00:00:15,880
qui va vous mettre au défi de
se appuyer sur des éléments de Google Maps

6
00:00:15,880 --> 00:00:20,905
avec des éléments de Google Nouvelles et réduire en purée
ensemble dans une applet Web

7
00:00:20,905 --> 00:00:24,150
permet à un utilisateur de rechercher
une carte des nouvelles locales

8
00:00:24,150 --> 00:00:26,780
aux villes spécifiques,
villes et codes postaux.

9
00:00:26,780 --> 00:00:31,040
Pour ce faire, nous allons
intégrer certains HTML, CSS, PHP, SQL,

10
00:00:31,040 --> 00:00:34,390
JavaScript et une technique
généralement connu sous le nom AJAX afin

11
00:00:34,390 --> 00:00:36,850
pour créer cette immersive
expérience de l'utilisateur.

12
00:00:36,850 --> 00:00:38,920
>> De première pour Google Maps se laisser.

13
00:00:38,920 --> 00:00:41,220
Ceci, bien sûr, est sans doute
une interface familière.

14
00:00:41,220 --> 00:00:45,070
Mais il se avère que Google Maps
fournit également une application de API--

15
00:00:45,070 --> 00:00:48,360
interface-- programmation par l'intermédiaire duquel
vous pouvez prendre des éléments de Google Maps

16
00:00:48,360 --> 00:00:50,740
et les intégrer dans
vos propres applications.

17
00:00:50,740 --> 00:00:52,650
En effet, tout au long du
processus, vous allez

18
00:00:52,650 --> 00:00:55,140
de trouver un couple d'URL
particulièrement utile que

19
00:00:55,140 --> 00:00:57,820
sont mentionnés dans le
spécification pour problème Set 8,

20
00:00:57,820 --> 00:01:00,980
spécifiquement ce Getting Started
Ou au Guide du développeur

21
00:01:00,980 --> 00:01:07,640
Google Maps API version 3 ainsi
que l'API Google Maps JavaScript

22
00:01:07,640 --> 00:01:10,260
v3 référence, qui est un
peu plus obscur à lire

23
00:01:10,260 --> 00:01:14,600
mais a en fait tout le niveau inférieur
des détails sur ce qui fonctionne ou méthodes

24
00:01:14,600 --> 00:01:18,220
et les objets et les propriétés et
événements se fait avec l'API,

25
00:01:18,220 --> 00:01:20,720
très semblable dans l'esprit
à [inaudible] pages.

26
00:01:20,720 --> 00:01:23,480
>> Maintenant, si nous prenons un coup d'oeil
à Google Nouvelles, vous aurez

27
00:01:23,480 --> 00:01:25,370
peut-être voir une interface familière ici.

28
00:01:25,370 --> 00:01:29,350
Mais il se avère que vous pouvez également rechercher
Google Nouvelles pour des zones géographiques spécifiques

29
00:01:29,350 --> 00:01:32,000
via un paramètre HTTP appelée géo.

30
00:01:32,000 --> 00:01:35,100
En fait, si je agrandir
ici, vous verrez que

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

32
00:01:41,672 --> 00:01:43,630
Et, en effet, si je zoome
sur, vous verrez que je suis

33
00:01:43,630 --> 00:01:47,090
regardant une page avec tout un tas de
vues sur Cambridge, Massachusetts.

34
00:01:47,090 --> 00:01:50,620
>> En attendant, si je ai effectivement changer la
URL de ne pas être un code postal comme celui-ci,

35
00:01:50,620 --> 00:01:55,580
mais quelque chose d'un peu messier
comme Cambridge, + Massachusetts,

36
00:01:55,580 --> 00:02:00,740
où le plus est la façon dont vous encodez un
caractère espace dans une URL et appuyez sur Entrée,

37
00:02:00,740 --> 00:02:02,907
vous verrez que je ai effectivement
voir presque les mêmes nouvelles.

38
00:02:02,907 --> 00:02:05,489
Peut-être ce est un peu différent
parce Cambridge fait

39
00:02:05,489 --> 00:02:06,910
a plusieurs codes postaux.

40
00:02:06,910 --> 00:02:09,410
Maintenant, comment le saurais-je et,
en fait, comment pourrais-je en quelque sorte

41
00:02:09,410 --> 00:02:12,940
attacher villes et villages
à des codes postaux au cas où je

42
00:02:12,940 --> 00:02:15,064
vouloir permettre à l'utilisateur
pour rechercher soit?

43
00:02:15,064 --> 00:02:17,480
Eh bien, il se avère qu'il ya
un site Web appelé là-bas

44
00:02:17,480 --> 00:02:20,060
geonames.org qui est
une initiative d'avoir

45
00:02:20,060 --> 00:02:23,760
une base de données disponible librement de tous
sortes de l'information géographique,

46
00:02:23,760 --> 00:02:27,040
non seulement pour les États-Unis, mais aussi
pour d'autres pays.

47
00:02:27,040 --> 00:02:30,430
En fait, si je vais à cette URL ici, ce qui
est également mentionné dans le problème posé

48
00:02:30,430 --> 00:02:34,510
spécification, vous le verrez trois
liste de tout un tas de fichiers zip

49
00:02:34,510 --> 00:02:36,400
ne importe lequel peut être téléchargé par vous.

50
00:02:36,400 --> 00:02:39,900
En fait, pour ce problème posé
vous allez télécharger us.zip.

51
00:02:39,900 --> 00:02:43,790
Maintenant dans ce fichier, est un tout
tas de données au format texte.

52
00:02:43,790 --> 00:02:47,760
Les fichiers est très similaire à un
CSV-- Comma Separated Values ​​file--

53
00:02:47,760 --> 00:02:51,294
mais il utilise en fait
onglets pour délimiter les champs.

54
00:02:51,294 --> 00:02:53,710
Maintenant, quant à lui, si vous regardez
ici ce que je ai mis en évidence,

55
00:02:53,710 --> 00:02:56,459
les champs de ce fichier vont
être des choses comme les codes de pays,

56
00:02:56,459 --> 00:02:58,980
codes postaux, des noms de lieux,
puis, dans une certaine forme

57
00:02:58,980 --> 00:03:04,230
ou d'autres, les États et comtés,
communautés, et plus encore.

58
00:03:04,230 --> 00:03:06,630
En fait, je ai déjà
téléchargé ce fichier à l'avance.

59
00:03:06,630 --> 00:03:09,750
Permettez-moi aller de l'avant et de l'ouvrir ici--
us.text-- et, en fait, vous aurez

60
00:03:09,750 --> 00:03:16,660
voir si je défiler jusqu'à la ligne 16792
vous verrez quelques enregistrements pour Cambridge,

61
00:03:16,660 --> 00:03:19,120
Massachusetts et ses différents codes postaux.

62
00:03:19,120 --> 00:03:22,150
Ce que vous voyez il ya aussi le comté,
quelques chiffres que je ne ai pas vraiment

63
00:03:22,150 --> 00:03:24,500
comprendre, mais aussi tous
le chemin sur la droite,

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

65
00:03:27,170 --> 00:03:30,440
Ce est très bien parce que l'un des
les fonctionnalités de Google Maps API

66
00:03:30,440 --> 00:03:33,670
est la capacité de détecter
où vous êtes géographiquement

67
00:03:33,670 --> 00:03:36,850
en termes de coordonnées GPS.

68
00:03:36,850 --> 00:03:40,210
>> Maintenant, nous allons commencer à comprendre comment
commencer lier ces choses ensemble.

69
00:03:40,210 --> 00:03:42,900
Nous vous avons donné ensemble
tas de code de distribution,

70
00:03:42,900 --> 00:03:44,970
ainsi que la base de données MySQL.

71
00:03:44,970 --> 00:03:49,100
En fait, si je tire un phpMyAdmin ayant
déjà importé, comme vous le sera bientôt,

72
00:03:49,100 --> 00:03:54,800
pset8.SQL, vous verrez une table MySQL
ressemble à ceci, un champ ID, pays

73
00:03:54,800 --> 00:03:57,400
code, code postal, le nom en plus de place.

74
00:03:57,400 --> 00:04:00,490
Les types de toutes les personnes
Je colonnes proviennent tout simplement

75
00:04:00,490 --> 00:04:03,870
en lisant le readme.text
déposer ici que spécifié

76
00:04:03,870 --> 00:04:07,330
si un champ est un nombre entier,
ou varchar ou similaire.

77
00:04:07,330 --> 00:04:10,510
>> Nous avons donc créé ce tableau pour
vous et vous a donné les commandes SQL

78
00:04:10,510 --> 00:04:12,770
à exécuter pour créer ce
table dans votre propre base de données,

79
00:04:12,770 --> 00:04:15,290
mais il ya en fait pas encore de données en elle.

80
00:04:15,290 --> 00:04:19,600
Au contraire, vous allez avoir à
télécharger us.zip ou la fermeture de ne importe quel pays

81
00:04:19,600 --> 00:04:21,500
déposer à partir de cette URL il.

82
00:04:21,500 --> 00:04:24,940
Et puis vous allez avoir à écrire
un script de ligne de commande en PHP qui est

83
00:04:24,940 --> 00:04:28,420
va ouvrir ce texte
déposer, itérer sur ses lignes,

84
00:04:28,420 --> 00:04:31,180
et ensuite pour chacune des
ces lignes font un insert

85
00:04:31,180 --> 00:04:34,940
qui place dans le tableau
dans votre base de données MySQL.

86
00:04:34,940 --> 00:04:37,880
Donc, à la fin de ce processus, vous aurez
ont finalement exécuter ce script

87
00:04:37,880 --> 00:04:39,610
juste une fois en théorie.

88
00:04:39,610 --> 00:04:41,780
En réalité, vous aurez probablement
exécuter un tas de fois

89
00:04:41,780 --> 00:04:45,460
tout en essayant de corriger divers bugs.

90
00:04:45,460 --> 00:04:48,440
>> En fin de compte, vous allez avoir un
vraiment grand base de données avec des milliers

91
00:04:48,440 --> 00:04:50,139
et des milliers de lignes géographiques.

92
00:04:50,139 --> 00:04:52,930
Ensuite, vous allez mettre que l'importation
script de côté une fois que ça marche

93
00:04:52,930 --> 00:04:55,140
et votre base de données est agréable
et correcte, puis

94
00:04:55,140 --> 00:04:58,880
vous allez passer à fait
mise en œuvre du mashup lui-même.

95
00:04:58,880 --> 00:05:01,670
Le mashup va regarder
un petit quelque chose comme ça.

96
00:05:01,670 --> 00:05:05,165
Au mashup.cs50.net, nous
avoir une solution de personnel

97
00:05:05,165 --> 00:05:06,990
qui ressemble un peu quelque chose comme ça.

98
00:05:06,990 --> 00:05:11,070
En effet, si je clique sur ce journal
Icône de Cambridge, Massachusetts,

99
00:05:11,070 --> 00:05:13,300
vous verrez une filature
icone brièvement, puis

100
00:05:13,300 --> 00:05:16,370
une liste ordonnée, une
liste à puces des articles

101
00:05:16,370 --> 00:05:18,280
liée à Cambridge, Massachusetts.

102
00:05:18,280 --> 00:05:20,352
Si je clique sur Charlestown,
Massachusetts,

103
00:05:20,352 --> 00:05:21,685
Je vois la même chose pour cette ville.

104
00:05:21,685 --> 00:05:24,174
Et si je clique sur
Watertown, Massachusetts,

105
00:05:24,174 --> 00:05:26,090
il pourrait ne pas y avoir de
nouvelles du départ de Watertown,

106
00:05:26,090 --> 00:05:28,630
de sorte que vous verrez quelque chose
comme lente jour de nouvelles.

107
00:05:28,630 --> 00:05:32,140
>> Maintenant, quant à lui, en haut à gauche sont
certains familiers contrôles Google Maps

108
00:05:32,140 --> 00:05:34,980
pour vous permettre de faire un zoom arrière, poêle
haut, bas, gauche et droite,

109
00:05:34,980 --> 00:05:37,360
mais aussi une boîte de recherche que nous y mettons.

110
00:05:37,360 --> 00:05:40,910
Donc, si je cherche, franchement,
le seul autre code Je sais,

111
00:05:40,910 --> 00:05:45,020
90 210, nous allons réellement voir
Beverly Hills, en Californie.

112
00:05:45,020 --> 00:05:48,550
Lorsque vous cliquez dessus, il me amène à
Californie et tout un tas

113
00:05:48,550 --> 00:05:50,369
des nouvelles à propos de Beverly Hills.

114
00:05:50,369 --> 00:05:51,910
Maintenant, remarquez, aussi, ce qui est arrivé.

115
00:05:51,910 --> 00:05:57,040
Si je cette recherche de temps pour 02 138 ou même
Cambridge Massachusetts ou une virgule

116
00:05:57,040 --> 00:06:00,300
variante de celui-ci, vous obtenez une
peu déroulant autocomplete.

117
00:06:00,300 --> 00:06:03,840
Maintenant cela est d'utiliser un plugin
pour une bibliothèque appelée jQuery,

118
00:06:03,840 --> 00:06:05,732
et que plugin est appelé typeahead.

119
00:06:05,732 --> 00:06:07,440
Nous avons simplement lisons
la documentation,

120
00:06:07,440 --> 00:06:13,150
téléchargé le fichier .js intégrée
dans le code de distribution de sorte que vous

121
00:06:13,150 --> 00:06:16,900
en fin de compte peut écrire le code qui
remplit ce menu déroulant avec l'auto

122
00:06:16,900 --> 00:06:19,350
sélections ou les suggestions d'automobiles.

123
00:06:19,350 --> 00:06:23,820
>> Maintenant, le code de distribution, cependant, que
vous avez reçu ne fait pas autant.

124
00:06:23,820 --> 00:06:26,860
Vous obtenez la carte Google intégré, et
vous obtenez les contrôles en haut à gauche,

125
00:06:26,860 --> 00:06:28,240
et vous obtenez la boîte de recherche.

126
00:06:28,240 --> 00:06:32,760
Mais si je tape quelque chose comme
02138, pas de lieux se trouvent encore.

127
00:06:32,760 --> 00:06:34,730
Donc cela va être
un de nos objectifs ici.

128
00:06:34,730 --> 00:06:37,430
En outre, si vous prenez une étape
en arrière et regarder la carte elle-même,

129
00:06:37,430 --> 00:06:38,950
il ya pas de nouvelles que ce soit.

130
00:06:38,950 --> 00:06:41,780
Même si je clique et
glisser, pas de marqueurs en fait

131
00:06:41,780 --> 00:06:45,560
apparaître des nouvelles parce que ce
défi est laissé pour vous aussi.

132
00:06:45,560 --> 00:06:48,490
>> Jetons un coup d'oeil, puis
le code de distribution.

133
00:06:48,490 --> 00:06:51,460
Une fois que vous avez téléchargé
pset8.zip et l'ouvrit

134
00:06:51,460 --> 00:06:54,430
dans votre répertoire de serveur virtuel
dans le CS50 Appliance,

135
00:06:54,430 --> 00:06:56,550
vous verrez ces
répertoires ici à l'intérieur.

136
00:06:56,550 --> 00:07:00,200
Bin-- qui se trouve généralement à
exécutable binaire pour programs--

137
00:07:00,200 --> 00:07:04,870
comprend, comme dans pset7, un peu de PHP
fichiers que d'autres fichiers incluent,

138
00:07:04,870 --> 00:07:06,710
alors publique, qui est
les fichiers qui doivent

139
00:07:06,710 --> 00:07:09,369
être accessibles au public
à un utilisateur avec un navigateur.

140
00:07:09,369 --> 00:07:11,410
Jetons un coup d'oeil dans le
bin, et nous allons

141
00:07:11,410 --> 00:07:13,890
voir qu'il ya un fichier
il y avait déjà appelé Importer.

142
00:07:13,890 --> 00:07:17,591
Si nous ouvrons ce avec gedit, nous verrons
que, malheureusement, il n'y a pas beaucoup

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

144
00:07:18,090 --> 00:07:20,250
Tout ce qui est là, cependant,
est un tralala en haut

145
00:07:20,250 --> 00:07:23,410
qui précise ce qui
interpreter-- dans ce cas PHP--

146
00:07:23,410 --> 00:07:25,759
doit être utilisé pour effectivement
exécuter ce fichier.

147
00:07:25,759 --> 00:07:27,550
Mais alors où il est dit
TODO est où vous êtes

148
00:07:27,550 --> 00:07:31,130
allez avoir besoin d'écrire du code
qui exige probablement la config

149
00:07:31,130 --> 00:07:35,820
fichier qui est dans le répertoire comprend
comme nous l'avons fait auparavant avec les fichiers PHP.

150
00:07:35,820 --> 00:07:38,180
Et puis vous allez
avoir à ouvrir en quelque sorte jusqu'à

151
00:07:38,180 --> 00:07:41,920
us.text que vous sans doute
ont déjà décompressé.

152
00:07:41,920 --> 00:07:44,690
Ensuite, vous allez avoir à
itérer sur les lignes de ce fichier,

153
00:07:44,690 --> 00:07:47,800
peut-être en utilisant une partie des fonctions
suggéré dans la description.

154
00:07:47,800 --> 00:07:51,390
Insérez ensuite chacun de ces
lignes en base de données MySQL

155
00:07:51,390 --> 00:07:54,940
à l'aide de la fonction d'interrogation, qui
nous avons encore une fois vous fourni with--

156
00:07:54,940 --> 00:07:58,010
ou au moins un variant
de celui-ci dans functions.php,

157
00:07:58,010 --> 00:07:59,560
que nous verrons dans un instant.

158
00:07:59,560 --> 00:08:04,430
>> Maintenant, nous allons fermer l'importation et revenir à
notre répertoire et cette fois aller dans

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

160
00:08:05,300 --> 00:08:09,210
Et si je fais ls là, vous verrez
trois fichiers tout à fait comme problème Set 7.

161
00:08:09,210 --> 00:08:13,760
Et nous allons jeter un coup d'œil rapide,
par exemple, au config.php.

162
00:08:13,760 --> 00:08:16,730
Dans là, est moins de lignes
qu'avant, et il

163
00:08:16,730 --> 00:08:20,712
semble que ce fichier inclut
constants.php et functions.php.

164
00:08:20,712 --> 00:08:23,670
Nous utilisons un peu différent
technique cette fois réellement

165
00:08:23,670 --> 00:08:30,910
précisent que ces fichiers sont liés
dans le répertoire courant __ DIR__

166
00:08:30,910 --> 00:08:35,280
représente le répertoire que cette
fichier config.php, est lui-même dans.

167
00:08:35,280 --> 00:08:37,600
Donc, ce est un plus
de manière explicite de spécifier

168
00:08:37,600 --> 00:08:40,100
ce que d'autres fichiers que vous souhaitez exiger.

169
00:08:40,100 --> 00:08:44,020
>> Maintenant, si je ferme ce fichier et
ouvrir constants.php place,

170
00:08:44,020 --> 00:08:47,430
vous verrez un fichier très réminiscent
à ce ainsi, quoique problème Set 7

171
00:08:47,430 --> 00:08:50,050
avec une base de données différente appelée pset8.

172
00:08:50,050 --> 00:08:54,020
Enfin, dans functions.php,
nous verrons une seule fonction

173
00:08:54,020 --> 00:08:55,942
cette fois appelé requête.

174
00:08:55,942 --> 00:08:59,150
Ce est presque la même, sauf que nous traitons
erreurs cette fois-ci un peu

175
00:08:59,150 --> 00:09:02,860
différemment, mais ce est l'utilisation est
les mêmes que dans sept problème posé.

176
00:09:02,860 --> 00:09:08,090
>> Maintenant revenons à notre pset8
répertoire, allez dans publique, et il

177
00:09:08,090 --> 00:09:14,420
si je fais ls, vous verrez this--
articles.php, index.html, search.php,

178
00:09:14,420 --> 00:09:16,940
et update.php-- tous les fichiers.

179
00:09:16,940 --> 00:09:22,010
Et puis les polices css, img, et
répertoire js tout à fait comme pset7.

180
00:09:22,010 --> 00:09:24,660
>> Jetons un oeil à
index.html, qui est

181
00:09:24,660 --> 00:09:27,290
va être vraiment
Point à la smashup d'entrée.

182
00:09:27,290 --> 00:09:31,820
Maintenant en index.html, vous verrez un tout
tas d'éléments de liaison dans la tête,

183
00:09:31,820 --> 00:09:36,540
spécifiquement, par bootstrap pour notre propre
CSS suivi par tout un tas de scripts

184
00:09:36,540 --> 00:09:41,520
balises pour des choses comme les cartes, API
lui-même, un marqueur spécial avec étiquette

185
00:09:41,520 --> 00:09:44,950
utilitaire qui nous l'avons mentionné dans le
spécification est disponible pour vous,

186
00:09:44,950 --> 00:09:48,420
jQuery lui-même, bootstrap
lui-même, et une autre bibliothèque

187
00:09:48,420 --> 00:09:50,990
appelé soulignement qui
nous parlons dans la spécification.

188
00:09:50,990 --> 00:09:57,031
Underscore.js comme jquery.js
est une bibliothèque JavaScript

189
00:09:57,031 --> 00:10:00,280
qui a tout un tas de fonctionnalités
que beaucoup de personnes dans le désir du monde

190
00:10:00,280 --> 00:10:02,020
existé dans JavaScript lui-même.

191
00:10:02,020 --> 00:10:04,560
Donc, tous ces éléments sont
fait assez populaire.

192
00:10:04,560 --> 00:10:07,140
Nous avons également mentionné typeahead
qui est la bibliothèque

193
00:10:07,140 --> 00:10:11,180
est-ce que autocomplete déroulant et
enfin un lien vers notre propre JavaScript.

194
00:10:11,180 --> 00:10:13,880
>> Pendant ce temps, et peut-être
Heureusement, ce mashup

195
00:10:13,880 --> 00:10:17,550
est entraîné par relativement peu
HTML ici au fond.

196
00:10:17,550 --> 00:10:22,330
Remarquez que nous avons spécifié un div dans
notre corps de liquide classe conteneur.

197
00:10:22,330 --> 00:10:24,610
Ce, par bootstrap de
documentation, juste

198
00:10:24,610 --> 00:10:29,840
signifie que cette div va remplir le
viewport ou la fenêtre du navigateur entièrement.

199
00:10:29,840 --> 00:10:33,020
>> Pendant ce temps, inférieur à celui que nous avons un div
Ce est ouvert et immédiatement fermé

200
00:10:33,020 --> 00:10:34,790
avec l'ID unique de la carte toile.

201
00:10:34,790 --> 00:10:37,400
Ce est maintenant de Google
La documentation des cartes

202
00:10:37,400 --> 00:10:42,490
pour son API, lequel je ai besoin simplement
avoir un div vide dans laquelle d'injecter,

203
00:10:42,490 --> 00:10:44,470
finalement, un Google réels Maps.

204
00:10:44,470 --> 00:10:46,310
Mais plus que dans un peu.

205
00:10:46,310 --> 00:10:48,850
>> Enfin, il ya une forme
à l'intérieur de laquelle ici

206
00:10:48,850 --> 00:10:52,930
met en œuvre dessus la zone de texte en haut à gauche
dans notre interface pour la recherche.

207
00:10:52,930 --> 00:10:54,730
Notez que nous avons utilisé
un peu de bootstrap

208
00:10:54,730 --> 00:10:57,670
ici too-- choses comme
forme en ligne et la forme-groupe.

209
00:10:57,670 --> 00:11:00,080
Nous avons donné l'ancien
ID unique de la forme.

210
00:11:00,080 --> 00:11:04,510
Et puis, finalement, je ai fait
un type d'entrée, ce qui est assez familier,

211
00:11:04,510 --> 00:11:06,440
dont l'ID est q.

212
00:11:06,440 --> 00:11:07,230
Juste une convention.

213
00:11:07,230 --> 00:11:09,234
Q pour query-- pourrait avoir
été appelé rien.

214
00:11:09,234 --> 00:11:11,400
Et puis l'espace réservé,
quant à lui, est la ville, état,

215
00:11:11,400 --> 00:11:16,200
et le code postal que vous pourriez rappeler
voir dans notre mashup démonstration plus tôt.

216
00:11:16,200 --> 00:11:17,980
Fermons ce fichier.

217
00:11:17,980 --> 00:11:24,460
>> Maintenant, jetez un oeil à des fichiers PHP que
attendre et puis les fichiers JavaScript.

218
00:11:24,460 --> 00:11:27,700
Dans nos fichiers PHP, nous avons
déjà mis en œuvre pour vous,

219
00:11:27,700 --> 00:11:29,960
par exemple, les mises à jour.

220
00:11:29,960 --> 00:11:35,060
Update.php-- nous ne dépenserons pas un énorme
quantité de temps sur ici-- en bref

221
00:11:35,060 --> 00:11:38,400
est le fichier que notre
Code JavaScript va

222
00:11:38,400 --> 00:11:41,610
contacter via AJAX que
technique asynchrone qui est

223
00:11:41,610 --> 00:11:45,980
JavaScript intégré dans ces jours qui est
va nous permettre de poser update.php

224
00:11:45,980 --> 00:11:47,410
pour plus d'informations.

225
00:11:47,410 --> 00:11:50,045
>> Plus précisément, à tout moment
l'utilisateur fait glisser la carte

226
00:11:50,045 --> 00:11:53,310
ou effectue une recherche qui saute
l'utilisateur vers un autre emplacement,

227
00:11:53,310 --> 00:11:55,250
notre code JavaScript,
comme nous le verrons bientôt, est

228
00:11:55,250 --> 00:11:59,610
vais appeler update.php
et demander 10 ou plus marqueurs

229
00:11:59,610 --> 00:12:02,630
à l'intérieur de la zone de visualisation sur la base
sur les coordonnées GPS

230
00:12:02,630 --> 00:12:06,510
des parties supérieure et inférieure
coins de cette carte.

231
00:12:06,510 --> 00:12:10,520
Nous pouvons alors repeupler la carte maintenant que
l'utilisateur a déplacé l'écran afin

232
00:12:10,520 --> 00:12:14,210
pour voir 10 probablement nouvelle
marqueurs pour différentes villes.

233
00:12:14,210 --> 00:12:18,340
Pendant ce temps, ce fichier est finalement
va exécuter une requête SQL

234
00:12:18,340 --> 00:12:21,680
contre notre base de données
table appelée lieux

235
00:12:21,680 --> 00:12:26,380
va revenir ceux
10 endroits ou moins.

236
00:12:26,380 --> 00:12:32,620
>> Pendant ce temps, dans articles.php, est un autre
fichier que nous avons écrit dans son intégralité.

237
00:12:32,620 --> 00:12:35,820
Il est très similaire dans l'esprit
La fonction RECHERCHE de problème Set 7,

238
00:12:35,820 --> 00:12:39,450
qui a contacté Yahoo Finance pour vous.

239
00:12:39,450 --> 00:12:43,710
Ce fichier contacts Google Actualités
pour vous, finalement, l'accaparement

240
00:12:43,710 --> 00:12:46,050
une machine lisible
version-- dans quelque chose

241
00:12:46,050 --> 00:12:49,720
appelé RSS format-- des nouvelles
de Cambridge ou de Beverly Hills

242
00:12:49,720 --> 00:12:52,880
ou quelque ville que vous avez recherché
pour basé sur celui géoparamètres.

243
00:12:52,880 --> 00:12:57,250
Nous analysons ce que RSS, qui est juste un
type de langage de balisage XML appelé,

244
00:12:57,250 --> 00:13:00,740
puis nous avons effectivement
retourner à votre navigateur

245
00:13:00,740 --> 00:13:03,570
et à votre code JavaScript,
Plus précisément, dans un format appelé

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

247
00:13:06,097 --> 00:13:08,180
Maintenant, vous verrez dans le
specification-- nous vous rappelons

248
00:13:08,180 --> 00:13:10,720
comment vous pouvez réellement voir
une partie de la back-- venue JSON

249
00:13:10,720 --> 00:13:15,210
en fin de compte que cette fonctionnalité
permet de vous remplissez ces menus contextuels afin

250
00:13:15,210 --> 00:13:16,960
que lorsque vous cliquez
un marqueur sur la carte

251
00:13:16,960 --> 00:13:19,430
vous voyez tout un tas
de balles, dont chacun

252
00:13:19,430 --> 00:13:21,020
liens vers un article.

253
00:13:21,020 --> 00:13:25,000
>> Maintenant, nous allons jeter un oeil à une dernière
fichier PHP qui, heureusement, ne est pas

254
00:13:25,000 --> 00:13:27,970
beaucoup aller on--
juste un assez grand TODO.

255
00:13:27,970 --> 00:13:32,170
En ce moment, ce fichier déclare
un tableau appelé endroits.

256
00:13:32,170 --> 00:13:35,980
Et puis, finalement, gravures
ce tableau en JSON format--

257
00:13:35,980 --> 00:13:38,720
pretty-imprimant juste pour que
les choses sont plus faciles à déboguer.

258
00:13:38,720 --> 00:13:41,480
Malheureusement, dans le
milieu, il ya cette TODO,

259
00:13:41,480 --> 00:13:46,890
qui appelle pour vous de rechercher le
base de données de lieux correspondant à un géo HTTP

260
00:13:46,890 --> 00:13:47,490
paramètre.

261
00:13:47,490 --> 00:13:49,865
>> Et, en effet, cela va
être un de vos challenges--

262
00:13:49,865 --> 00:13:54,240
pour implémenter cette fonctionnalité ici
de sorte que lorsque vous contacter ce fichier avec

263
00:13:54,240 --> 00:14:00,610
une URL comme la recherche. php? geo = quelque chose,
votre code sera finalement retourner une JSON

264
00:14:00,610 --> 00:14:05,020
tableau de tous les endroits dans votre
table de base de données qui correspondent à cette entrée.

265
00:14:05,020 --> 00:14:08,960
Donc, si les types d'utilisateurs à Cambridge,
votre fichier ici search.php

266
00:14:08,960 --> 00:14:12,680
devrait finalement retourner un tableau JSON
pour tous les matchs pour Cambridge,

267
00:14:12,680 --> 00:14:16,990
qui pourrait être dans le Massachusetts
mais pourrait être même ailleurs.

268
00:14:16,990 --> 00:14:21,040
>> Enfin, nous allons jeter un oeil à deux
les fichiers qui sont ultimately-- statique

269
00:14:21,040 --> 00:14:23,680
votre fichier CSS et votre fichier JavaScript.

270
00:14:23,680 --> 00:14:26,779
Si je vais dans notre répertoire CSS,
il ya tout un tas de fichiers là,

271
00:14:26,779 --> 00:14:28,070
mais la plupart d'entre eux sont des bibliothèques.

272
00:14:28,070 --> 00:14:31,530
Je vais jeter un oeil,
spécifiquement, au styles.css,

273
00:14:31,530 --> 00:14:35,440
qui est notre propre CSS mondiale qui est
aller à styliser toute cette mashup.

274
00:14:35,440 --> 00:14:38,840
Je me en remets à vous de lire à travers
les commentaires ici, mais, en un mot,

275
00:14:38,840 --> 00:14:43,490
ce est le CSS qui assure que notre
mashup, par défaut de la boîte,

276
00:14:43,490 --> 00:14:46,950
ressemble exactement la façon dont nous voulons it--
avec la carte de remplissage du port de vue

277
00:14:46,950 --> 00:14:49,720
et la recherche
Box Up en haut à gauche.

278
00:14:49,720 --> 00:14:52,870
Nous avons également pris la liberté de
styliser que typeahead déroulante

279
00:14:52,870 --> 00:14:55,170
Menu un peu ainsi.

280
00:14:55,170 --> 00:14:58,030
>> Le dossier le plus important
peut-être pour ce problème définir

281
00:14:58,030 --> 00:15:01,070
est ce dernier, scripts.js.

282
00:15:01,070 --> 00:15:03,800
A l'intérieur de votre répertoire JS
est encore plus de fichiers.

283
00:15:03,800 --> 00:15:08,090
Tous sont des fichiers de bibliothèque
sauf pour celui-ci, scripts.js.

284
00:15:08,090 --> 00:15:11,460
Si nous ouvrons cette place, prenons notre
dernière tournée à travers les fonctions

285
00:15:11,460 --> 00:15:13,820
sont intégrées dans ce fichier
pour vous et attirent l'attention

286
00:15:13,820 --> 00:15:16,200
aux TODOs qui nous attendent.

287
00:15:16,200 --> 00:15:19,110
>> Au sommet de ce fichier,
sont trois variables globales.

288
00:15:19,110 --> 00:15:22,910
Un pour une carte, qui va
être une référence à notre carte Google.

289
00:15:22,910 --> 00:15:25,510
Vous pouvez penser que ce
comme une sorte de pointeur.

290
00:15:25,510 --> 00:15:27,710
Pendant ce temps, nous avons
une autre variable globale

291
00:15:27,710 --> 00:15:31,500
appelé d'info, qui semble être
stocker la valeur de retour d'un appel

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

293
00:15:34,170 --> 00:15:37,835
JavaScript prend en charge objets
sont très similaires dans l'esprit Struts.

294
00:15:37,835 --> 00:15:40,250
Et ce que cette ligne pour
nos fins est fait

295
00:15:40,250 --> 00:15:42,820
est la création d'une nouvelle information
fenêtre dans la mémoire, puis

296
00:15:42,820 --> 00:15:46,330
gardant autour d'une référence
celui-ci dans une variable appelée Infos.

297
00:15:46,330 --> 00:15:48,330
Et entre ceux qui,
quant à lui, est ce qui semble

298
00:15:48,330 --> 00:15:51,060
être un JavaScript vide
tableau appelé marqueurs.

299
00:15:51,060 --> 00:15:55,392
Toutes ces icônes de journaux, ou vous
pourrait choisir une toute autre icône,

300
00:15:55,392 --> 00:15:57,350
vont être stockée
en fin de compte dans ce tableau

301
00:15:57,350 --> 00:16:01,570
de sorte que nous pouvons très facilement ajouter à
la carte et de les supprimer de la carte.

302
00:16:01,570 --> 00:16:03,990
>> Maintenant, nous allons faire défiler vers le bas
un peu et whiz

303
00:16:03,990 --> 00:16:07,690
par le code qui va être
exécutée dès que le DOM ou un document

304
00:16:07,690 --> 00:16:10,480
modèle d'objet ou de la
page elle-même est prêt.

305
00:16:10,480 --> 00:16:12,942
Rappelons que cette syntaxe
ici spécifie simplement

306
00:16:12,942 --> 00:16:14,900
que le code ci-dessous
doit être exécuté seulement

307
00:16:14,900 --> 00:16:17,840
lorsque le navigateur a fini
charger tout le reste.

308
00:16:17,840 --> 00:16:19,750
>> Nous déclarons d'abord une
tas ensemble de styles,

309
00:16:19,750 --> 00:16:22,410
qui finissent par styliser
la carte comme pour la spécification.

310
00:16:22,410 --> 00:16:24,790
Nous déclarons alors une
toute tas d'options,

311
00:16:24,790 --> 00:16:28,630
qui personnaliser davantage le Google
carte que nous sommes sur le point d'intégrer.

312
00:16:28,630 --> 00:16:32,090
Nous utilisons ensuite un peu de code jQuery,
ce qui se explique dans un peu plus de détails

313
00:16:32,090 --> 00:16:35,000
dans la spécification, à saisir
cet élément, la carte-toile

314
00:16:35,000 --> 00:16:36,980
que nous avons identifié de manière unique.

315
00:16:36,980 --> 00:16:40,640
Et puis cette ligne est ici
ce qui semble nous donner magie

316
00:16:40,640 --> 00:16:43,560
une carte Google intérieur de
notre propre application,

317
00:16:43,560 --> 00:16:47,020
stocker une référence à celui-ci
dans cette variable appelée carte.

318
00:16:47,020 --> 00:16:50,550
>> Enfin, ici nous enregistrons
ce est ce qu'on appelle un auditeur.

319
00:16:50,550 --> 00:16:54,690
Pensez façon back--, manière
back-- à la semaine zéro dans CS50

320
00:16:54,690 --> 00:16:57,430
lorsque nous avons examiné et Scratch
son soutien à travers une marche

321
00:16:57,430 --> 00:16:59,935
par le biais des choses appelées
événements et émissions.

322
00:16:59,935 --> 00:17:01,810
Vous pourriez ne pas avoir utilisé
vous-même, mais ce est

323
00:17:01,810 --> 00:17:03,900
un mécanisme par lequel un
navigateur dans ce cas

324
00:17:03,900 --> 00:17:07,940
peut attirer notre attention quand il est
prêt à effectivement exécuter du code.

325
00:17:07,940 --> 00:17:12,170
Dans ce cas, il va écouter
à la carte pour un événement appelé ralenti.

326
00:17:12,170 --> 00:17:14,930
Cela signifie que le navigateur a
fini de charger la carte Google.

327
00:17:14,930 --> 00:17:18,380
À ce stade, une fonction appelée
configure devrait finalement

328
00:17:18,380 --> 00:17:19,339
être exécuté.

329
00:17:19,339 --> 00:17:22,510
Cette fonction, configurer,
nous le verrons, est écrit par nous.

330
00:17:22,510 --> 00:17:24,550
>> Maintenant ici est une fonction
que, malheureusement,

331
00:17:24,550 --> 00:17:25,871
est juste un marqueur TODO add.

332
00:17:25,871 --> 00:17:28,620
Par la spécification. vous allez avoir besoin
pour écrire le code qui fait

333
00:17:28,620 --> 00:17:32,840
ajoute un marker-- si il semble
comme un journal, ou une punaise,

334
00:17:32,840 --> 00:17:35,360
ou quelque chose else-- à la carte Google.

335
00:17:35,360 --> 00:17:37,720
Voici maintenant que la fonction
appelé configure.

336
00:17:37,720 --> 00:17:40,390
Je vous laisse le soin de lire
grâce à cela plus en détail,

337
00:17:40,390 --> 00:17:42,600
mais rendons compte que nous ajoutons
un tas d'autres auditeurs

338
00:17:42,600 --> 00:17:46,620
afin que nous puissions exécuter du code lorsque le
utilisateur clique sur la carte et traîne.

339
00:17:46,620 --> 00:17:50,730
Nous avons également le code ici qui
initialise que typeahead Plugin

340
00:17:50,730 --> 00:17:53,120
de sorte que la liste déroulante
menu fonctionne effectivement.

341
00:17:53,120 --> 00:17:55,690
>> Mais concentrons-nous sur quelques-
quelques endroits ici.

342
00:17:55,690 --> 00:17:57,590
Concrètement, cela à faire ici.

343
00:17:57,590 --> 00:18:00,410
Je me en remets à la ligne
la documentation et la spécification

344
00:18:00,410 --> 00:18:02,530
pour savoir comment remplir ce TODO.

345
00:18:02,530 --> 00:18:05,890
Mais en un mot, cette bibliothèque
typeahead vous permet de passer

346
00:18:05,890 --> 00:18:09,790
en ce qui généralement connu en tant que matrice,
qui a des espaces réservés variables

347
00:18:09,790 --> 00:18:13,690
très similaire dans l'esprit à l'% de printf. * s.

348
00:18:13,690 --> 00:18:16,030
Mais dans ce cas, le
modèle pour la spécification

349
00:18:16,030 --> 00:18:18,760
vous permet de spécifier
les variables que vous voulez

350
00:18:18,760 --> 00:18:24,880
pour injecter des données qui viennent
retour de quelque chose comme le PHP

351
00:18:24,880 --> 00:18:29,810
les fichiers que vous avez écrit
qui émettent sortie JSON.

352
00:18:29,810 --> 00:18:35,170
>> Maintenant ici rendons compte que nous sommes
l'écoute pour les sélections de typeahead

353
00:18:35,170 --> 00:18:38,050
lorsque l'utilisateur effectue effectivement
Une recherche et sélectionne une valeur.

354
00:18:38,050 --> 00:18:40,270
Ce est ainsi que nous sommes en fait
vais écouter pour ce

355
00:18:40,270 --> 00:18:42,250
et exécuter du code en conséquence.

356
00:18:42,250 --> 00:18:45,300
Puis nous continuons à configurer
le mashup juste un peu.

357
00:18:45,300 --> 00:18:48,000
Et, finalement, nous appelons
cette mise à jour de la fonction.

358
00:18:48,000 --> 00:18:49,640
Il met à jour les marqueurs sur l'écran.

359
00:18:49,640 --> 00:18:51,529
Plus sur cela dans un instant.

360
00:18:51,529 --> 00:18:53,570
Pendant ce temps, il ya quelques-uns
petites fonctions ici.

361
00:18:53,570 --> 00:18:56,820
Dont l'un est hideInfo qui
ferme simplement la bulle informative.

362
00:18:56,820 --> 00:19:00,020
Une autre fonction ici, qui a finalement
ne sera pas trop long, supprimer des marqueurs.

363
00:19:00,020 --> 00:19:03,580
Cela va défaire tout
votre fonction de marqueur de add fait.

364
00:19:03,580 --> 00:19:04,960
Et puis ici est la recherche.

365
00:19:04,960 --> 00:19:08,610
Et celui-ci est intéressant parce que nous
ont écrit le code JavaScript qui est

366
00:19:08,610 --> 00:19:13,490
vais parler à search.php sur le
serveur et récupérer une partie de réponse.

367
00:19:13,490 --> 00:19:16,110
>> Vous, bien sûr, sera toujours
besoin de mettre en œuvre search.php,

368
00:19:16,110 --> 00:19:18,310
mais nous avons mis en œuvre le
Code JavaScript qui est

369
00:19:18,310 --> 00:19:22,480
allez gérer effectivement l'exécution
Recherches de cette zone de texte.

370
00:19:22,480 --> 00:19:25,340
En particulier, un avis
que cette fonction ici,

371
00:19:25,340 --> 00:19:29,160
recherche, ne appelle search.php
par une méthode appelée

372
00:19:29,160 --> 00:19:31,072
obtenir JSON, que nous avons vu dans la leçon.

373
00:19:31,072 --> 00:19:32,780
Et ici la syntaxe
est un peu différent

374
00:19:32,780 --> 00:19:37,110
de conférence à que nous utilisons
jQuery dite interface promesse.

375
00:19:37,110 --> 00:19:38,479
Plus sur cela dans la spécification.

376
00:19:38,479 --> 00:19:40,520
Cela signifie simplement pour notre
Maintenant qu'il ya des fins

377
00:19:40,520 --> 00:19:43,870
sont deux fonctions spéciales nous
besoin de faire appel à la notation par points

378
00:19:43,870 --> 00:19:46,230
ici immédiatement après l'appel obtenir JSON.

379
00:19:46,230 --> 00:19:47,510
L'un est appelé done.

380
00:19:47,510 --> 00:19:49,870
Un est appelé échec.

381
00:19:49,870 --> 00:19:51,790
Vous pouvez penser de ces
comme gestionnaire de réussite

382
00:19:51,790 --> 00:19:54,960
et le gestionnaire d'échec juste
au cas où quelque chose se passe mal.

383
00:19:54,960 --> 00:19:57,760
>> Maintenant, regardons à la dernière
couple de fonctions de ce fichier.

384
00:19:57,760 --> 00:20:00,180
Ici-bas est une fonction
showInfo appelé, qui

385
00:20:00,180 --> 00:20:03,090
affiche des informations dans un de ces
petites fenêtres d'informations qui

386
00:20:03,090 --> 00:20:05,380
se affiche lorsque l'utilisateur clique sur un marqueur.

387
00:20:05,380 --> 00:20:08,470
Ici encore est
que la fonction de mise à jour

388
00:20:08,470 --> 00:20:10,510
que nous avons mis en place pour vous.

389
00:20:10,510 --> 00:20:15,250
Il détermine les limites de la carte.

390
00:20:15,250 --> 00:20:19,360
Quelles sont les coordonnées GPS de son
au nord-est et sud-ouest coins ici.

391
00:20:19,360 --> 00:20:22,780
Nous avons préparé quelques paramètres HDP
ici et puis les passa finalement

392
00:20:22,780 --> 00:20:26,160
sur update.php, que nous avons
également mis en place pour vous.

393
00:20:26,160 --> 00:20:31,390
Cela devient finalement un certain retour JSON
à partir du fichier appelé update.php

394
00:20:31,390 --> 00:20:34,050
et supprime alors toute
marqueurs sur l'écran

395
00:20:34,050 --> 00:20:36,650
puis parcourt
les données qui reviennent

396
00:20:36,650 --> 00:20:40,350
de update.php, qui
est de nouveau juste un tableau JSON.

397
00:20:40,350 --> 00:20:45,130
Et puis il ajoute finalement un marqueur pour
chacun de ces endroits, Traitement de l'échec

398
00:20:45,130 --> 00:20:47,750
ou des erreurs qui pourraient très bien se produire.

399
00:20:47,750 --> 00:20:51,550
>> Maintenant, juste pour vous donner un avant-goût de la façon dont vous
pourrait aller sur le débogage de ce projet,

400
00:20:51,550 --> 00:20:55,420
rends compte que je ai ouvert en
avancer cette onglet ici pour cette URL,

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

402
00:21:01,320 --> 00:21:04,050
Maintenant, encore une fois, des articles sur
PHP nous mis en œuvre pour vous

403
00:21:04,050 --> 00:21:06,320
si ce ne est pas tellement
ce que vous allez utiliser

404
00:21:06,320 --> 00:21:08,190
à déboguer, mais plutôt la technique.

405
00:21:08,190 --> 00:21:10,590
Remarquez que je ai cherché
Zip code de Cambridge ici,

406
00:21:10,590 --> 00:21:15,260
et je ai obtenu en arrière, en effet, un JSON
tableau de JSON objets à l'intérieur duquel

407
00:21:15,260 --> 00:21:17,640
sont deux keys-- lien et le titre.

408
00:21:17,640 --> 00:21:19,860
>> Donc cette fonctionnalité
travaille déjà pour vous.

409
00:21:19,860 --> 00:21:24,330
Mais cette technique d'aller manuellement
à une URL comme cela pour quelque chose comme

410
00:21:24,330 --> 00:21:31,710
search.php? geo = cambridge ou 02 138 ou
quel que soit l'utilisateur a tapé dans doit

411
00:21:31,710 --> 00:21:35,770
avérer précieux que vous, vous-même, essayez
de comprendre exactement si ou pourquoi

412
00:21:35,770 --> 00:21:38,510
search.php fonctionne ou pas.

413
00:21:38,510 --> 00:21:41,720
>> En fin de compte, puis, vous avez
quelques-uns TODOs devant vous.

414
00:21:41,720 --> 00:21:44,250
Vous allez premiers outils
ce script d'importation qui

415
00:21:44,250 --> 00:21:46,520
lit dans us.text dans votre base de données.

416
00:21:46,520 --> 00:21:48,760
Vous êtes alors allez avoir besoin
à mettre en oeuvre search.php

417
00:21:48,760 --> 00:21:51,320
de sorte qu'il se comporte exactement comme indiqué.

418
00:21:51,320 --> 00:21:54,170
Vous êtes alors allez vouloir
se concentrer sur scripts.js

419
00:21:54,170 --> 00:21:57,520
et met en œuvre définitive
ces quelques TODOs,

420
00:21:57,520 --> 00:21:59,950
y compris pour configure
et ce modèle,

421
00:21:59,950 --> 00:22:03,220
ajouter des marqueurs, supprimer des marqueurs, et
alors durer, mais pas moins, une

422
00:22:03,220 --> 00:22:04,330
touche personnelle.

423
00:22:04,330 --> 00:22:07,477
>> Une fois que vous avez votre travail de mashup
tout à fait comme le nôtre, l'objectif à portée de main

424
00:22:07,477 --> 00:22:09,560
est pour vous d'ajouter un personnelle
toucher à votre mashup,

425
00:22:09,560 --> 00:22:11,290
qu'il se agisse d'esthétique ou fonctionnel.

426
00:22:11,290 --> 00:22:13,950
Prenez le mashup jamais si
légèrement au niveau suivant.

427
00:22:13,950 --> 00:22:18,330
Tant que vous vous pousser au-delà
votre familiarité avec la spec

428
00:22:18,330 --> 00:22:20,840
et ramasser une technique
nouvelle, même si ce est juste

429
00:22:20,840 --> 00:22:25,610
quelque chose comme changer l'esthétique
mise en page de la carte que vous utilisez,

430
00:22:25,610 --> 00:22:28,070
le champ d'application que nous attendons
seront satisfaits.

431
00:22:28,070 --> 00:22:30,260
Ce est alors problème Set 8 Mashup.

432
00:22:30,260 --> 00:22:33,070
Restez à l'écoute pour plus dans le
spécification et bonne chance

433
00:22:33,070 --> 00:22:36,400
aborder ce, votre dernier
problème de réglé CS50 jamais.

434
00:22:36,400 --> 00:22:39,750
>> [Jouer de la musique]

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