1
00:00:01,170 --> 00:00:04,190
‫Commençons par configurer notre moteur de modèles dans Express,

2
00:00:04,190 --> 00:00:06,480
‫qui nous permettra ensuite de rendre des

3
00:00:06,480 --> 00:00:09,830
‫sites Web à l'aide de modèles simples, comme nous en

4
00:00:09,830 --> 00:00:11,333
‫avons parlé précédemment.

5
00:00:12,660 --> 00:00:14,520
‫Donc, comme vous le

6
00:00:14,520 --> 00:00:16,850
‫savez déjà, dans cette partie du

7
00:00:16,850 --> 00:00:21,210
‫cours, il est maintenant temps d'envoyer un site Web rendu final au

8
00:00:21,210 --> 00:00:23,200
‫client contenant, bien sûr, toutes

9
00:00:23,200 --> 00:00:25,590
‫les données avec lesquelles nous avons

10
00:00:25,590 --> 00:00:28,770
‫travaillé jusqu'à présent, comme les visites, utilisateurs et avis.

11
00:00:28,770 --> 00:00:32,970
‫Maintenant, comment construisons-nous ou rendons-nous réellement ces sites Web ?

12
00:00:32,970 --> 00:00:35,920
‫Eh bien, nous utilisons ce qu'on appelle un moteur

13
00:00:35,920 --> 00:00:38,060
‫de modèle qui nous permettra de

14
00:00:38,060 --> 00:00:41,610
‫créer un modèle, puis de remplir facilement ce modèle avec nos données.

15
00:00:41,610 --> 00:00:43,580
‫Et le moteur de template

16
00:00:43,580 --> 00:00:46,210
‫que nous allons utiliser dans ce cours s'appelle pug.

17
00:00:46,210 --> 00:00:48,700
‫Il existe quelques autres moteurs de templates

18
00:00:48,700 --> 00:00:52,800
‫comme le guidon ou EGS pour les personnes qui n'aiment pas pug, car

19
00:00:52,800 --> 00:00:56,010
‫je sais qu'il y a des opinions bien arrêtées autour

20
00:00:56,010 --> 00:00:59,160
‫de pug, mais je dirais quand même que pug

21
00:00:59,160 --> 00:01:03,190
‫est en fait le moteur de template le plus couramment utilisé avec Express.

22
00:01:03,190 --> 00:01:05,650
‫Alors maintenant, dans cette vidéo, installons carlin

23
00:01:05,650 --> 00:01:08,453
‫et rendons notre toute première page Web en l'utilisant.

24
00:01:09,310 --> 00:01:11,920
‫La première étape consiste à dire à

25
00:01:11,920 --> 00:01:14,510
‫Express quel moteur de modèle nous

26
00:01:14,510 --> 00:01:16,970
‫allons utiliser, et nous le faisons

27
00:01:16,970 --> 00:01:18,920
‫en disant juste

28
00:01:19,910 --> 00:01:24,050
‫au début de l'application, app. set, donc fondamentalement, c'est comme

29
00:01:24,050 --> 00:01:29,050
‫un paramètre pour le moteur de vue, puis nous définissons cela sur pug.

30
00:01:32,600 --> 00:01:33,910
‫Et c'est tout.

31
00:01:33,910 --> 00:01:35,850
‫Ainsi, Express prend automatiquement

32
00:01:35,850 --> 00:01:38,320
‫en charge les moteurs les plus courants,

33
00:01:38,320 --> 00:01:40,970
‫et bien sûr, carlin est l'un d'entre eux.

34
00:01:40,970 --> 00:01:43,470
‫Nous n'avons donc même pas besoin d'installer Pug, et nous

35
00:01:43,470 --> 00:01:45,940
‫n'avons pas non plus besoin de l'exiger n'importe où.

36
00:01:45,940 --> 00:01:47,660
‫Tout cela se passe

37
00:01:47,660 --> 00:01:49,870
‫dans les coulisses en interne dans Express.

38
00:01:49,870 --> 00:01:51,910
‫Nous avons donc défini notre moteur

39
00:01:51,910 --> 00:01:54,450
‫de vue, maintenant nous devons également définir où ces

40
00:01:54,450 --> 00:01:57,013
‫vues se trouvent réellement dans notre système de fichiers.

41
00:01:57,916 --> 00:02:02,230
‫Ainsi, nos modèles de carlin sont en fait appelés vues dans Express.

42
00:02:02,230 --> 00:02:04,960
‫C'est parce que ces modèles sont en

43
00:02:04,960 --> 00:02:08,090
‫fait les vues dans l'architecture du contrôleur de vue

44
00:02:08,090 --> 00:02:11,720
‫modèle que nous avons utilisé dans ce cours jusqu'à ce point.

45
00:02:11,720 --> 00:02:13,980
‫Comme vous le savez, nous avons déjà les contrôleurs

46
00:02:13,980 --> 00:02:15,273
‫et les dossiers modèles.

47
00:02:16,180 --> 00:02:17,650
‫Fermons ces derniers.

48
00:02:17,650 --> 00:02:20,703
‫Et maintenant, il est temps de créer le dossier de vues.

49
00:02:25,210 --> 00:02:27,590
‫Avec cela, nous avons les trois

50
00:02:27,590 --> 00:02:29,583
‫composants de l'architecture MVC.

51
00:02:30,900 --> 00:02:32,860
‫Afin de définir maintenant dans quel dossier nos

52
00:02:32,860 --> 00:02:35,070
‫vues se trouvent réellement, tout ce que nous

53
00:02:35,070 --> 00:02:38,943
‫devons refaire est de dire app. set, et cette fois

54
00:02:40,660 --> 00:02:44,763
‫c'est le paramètre de vue, ou en fait vues, et

55
00:02:46,310 --> 00:02:48,660
‫puis ici le nom du chemin.

56
00:02:48,660 --> 00:02:52,500
‫Maintenant, ici, nous pourrions simplement mettre quelque

57
00:02:52,500 --> 00:02:57,380
‫chose comme ça, donc /views, mais ce n'est pas idéal.

58
00:02:57,380 --> 00:03:00,040
‫Comme vous le savez déjà, le chemin que nous

59
00:03:00,040 --> 00:03:02,330
‫fournissons ici est toujours relatif au répertoire à

60
00:03:02,330 --> 00:03:05,240
‫partir duquel nous avons lancé l'application Note, et il s'agit

61
00:03:05,240 --> 00:03:07,760
‫généralement du dossier racine du projet, mais ce n'est

62
00:03:07,760 --> 00:03:09,180
‫peut-être pas le cas.

63
00:03:09,180 --> 00:03:11,170
‫Nous ne devrions donc pas utiliser de

64
00:03:11,170 --> 00:03:14,410
‫point ici, mais nous devrions plutôt utiliser la variable de nom de répertoire.

65
00:03:14,410 --> 00:03:17,550
‫Alors faisons-le, et avec une astuce intéressante

66
00:03:17,550 --> 00:03:22,150
‫que nous pouvons utiliser avec Note, qui utilise le module path.

67
00:03:22,150 --> 00:03:26,340
‫Path est un module Note intégré, donc un module de base, qui

68
00:03:26,340 --> 00:03:29,593
‫est utilisé pour manipuler les noms de chemin, essentiellement.

69
00:03:32,130 --> 00:03:35,860
‫Il faut donc un chemin, donc bien sûr, nous

70
00:03:35,860 --> 00:03:37,650
‫n'avons rien à installer.

71
00:03:37,650 --> 00:03:40,143
‫C'est juste un module intégré natif.

72
00:03:41,320 --> 00:03:44,333
‫Ce que nous pouvons maintenant faire, c'est chemin. join, puis

73
00:03:46,340 --> 00:03:51,340
‫le nom du répertoire, puis les vues.

74
00:03:52,930 --> 00:03:55,790
‫Cela créera ensuite, essentiellement dans

75
00:03:55,790 --> 00:04:00,403
‫les coulisses, un chemin joignant le nom du répertoire /views.

76
00:04:01,640 --> 00:04:03,520
‫Maintenant, il peut sembler un peu

77
00:04:03,520 --> 00:04:06,620
‫exagéré d'utiliser ce chemin. join fonction ici, mais

78
00:04:06,620 --> 00:04:08,880
‫nous ne savons pas toujours si un

79
00:04:08,880 --> 00:04:13,120
‫chemin que nous recevons de quelque part a déjà une barre oblique ou non.

80
00:04:13,120 --> 00:04:16,290
‫Vous verrez donc cette fonction ici utilisée tout le

81
00:04:16,290 --> 00:04:19,040
‫temps afin d'éviter ce genre de bug.

82
00:04:19,040 --> 00:04:21,440
‫Parce que de cette façon, nous n'avons même

83
00:04:21,440 --> 00:04:23,380
‫pas besoin de penser aux barres

84
00:04:23,380 --> 00:04:26,463
‫obliques ou non, car Note créera automatiquement un chemin correct.

85
00:04:28,140 --> 00:04:30,140
‫En fait, nous devrions

86
00:04:30,140 --> 00:04:33,343
‫également l'utiliser ici où nous créons ce middleware.

87
00:04:34,290 --> 00:04:37,623
‫Ici, nous devrions en effet utiliser exactement la même chose ici.

88
00:04:39,070 --> 00:04:40,533
‫Alors dupliquons simplement ceci.

89
00:04:43,540 --> 00:04:45,703
‫Alors chemin d'accès, et public.

90
00:04:54,470 --> 00:04:57,510
‫Mettons en fait celui-ci ici en haut,

91
00:04:57,510 --> 00:05:01,373
‫car il appartient en quelque sorte à ceux-ci ici.

92
00:05:02,330 --> 00:05:04,580
‫Encore un middleware, mais comme vous le

93
00:05:04,580 --> 00:05:07,020
‫verrez dans l'une des prochaines vidéos, cela fonctionne

94
00:05:07,020 --> 00:05:09,053
‫étroitement avec un moteur de vues.

95
00:05:10,520 --> 00:05:14,050
‫Mais ici, nous avons maintenant mis en place notre moteur de carlin.

96
00:05:14,050 --> 00:05:17,400
‫Il est maintenant temps de créer notre tout premier modèle.

97
00:05:17,400 --> 00:05:19,890
‫Donc ici, créons notre premier fichier

98
00:05:21,660 --> 00:05:24,970
‫pug appelé base. pug, et comme vous le

99
00:05:24,970 --> 00:05:29,453
‫verrez, vs code a en fait sa propre icône sympa pour ce type de fichier.

100
00:05:30,919 --> 00:05:32,950
‫Tout ce que je veux vraiment faire

101
00:05:32,950 --> 00:05:36,220
‫ici pour le moment, c'est de créer un élément h1, donc un

102
00:05:36,220 --> 00:05:38,660
‫titre principal simplement avec le nom d'une tournée, et

103
00:05:38,660 --> 00:05:41,720
‫la façon dont cela fonctionne avec carlin est exactement comme ça.

104
00:05:41,720 --> 00:05:45,170
‫Donc h1, puis le contenu de l'élément.

105
00:05:45,170 --> 00:05:49,030
‫Disons le Park Camper.

106
00:05:49,030 --> 00:05:50,520
‫Et c'est effectivement tout !

107
00:05:50,520 --> 00:05:54,730
‫Cela se traduira alors par ceci

108
00:05:54,730 --> 00:05:59,730
‫ici, h1 The Park Camper, puis fermera cela.

109
00:06:04,730 --> 00:06:07,680
‫Donc, en html, nous aurions à écrire ceci, mais

110
00:06:07,680 --> 00:06:10,250
‫la syntaxe pug rend tellement plus facile

111
00:06:10,250 --> 00:06:12,193
‫d'écrire du html comme celui-ci.

112
00:06:13,470 --> 00:06:14,670
‫Bien sûr, cela nous

113
00:06:14,670 --> 00:06:16,880
‫permettra également de mettre toutes sortes de variables

114
00:06:16,880 --> 00:06:19,780
‫ici, afin que nous puissions vraiment injecter nos données dans ces

115
00:06:19,780 --> 00:06:21,650
‫modèles, mais pour l'instant, je suis vraiment

116
00:06:21,650 --> 00:06:23,853
‫intéressé à publier quelque chose dans le navigateur.

117
00:06:25,240 --> 00:06:27,570
‫Vous en apprendrez beaucoup plus sur le fonctionnement du carlin

118
00:06:27,570 --> 00:06:29,220
‫au cours des deux prochaines conférences.

119
00:06:30,870 --> 00:06:33,400
‫Pour l'instant, nous avons notre modèle de base ici, et

120
00:06:33,400 --> 00:06:34,793
‫gardons ce nom à l'esprit.

121
00:06:37,225 --> 00:06:40,680
‫Nous pouvons maintenant créer une nouvelle route à partir de

122
00:06:40,680 --> 00:06:43,383
‫laquelle nous accéderons ensuite à ce modèle.

123
00:06:45,260 --> 00:06:48,893
‫Faisons-le donc ici juste avant la route api.

124
00:06:51,160 --> 00:06:56,160
‫Alors, app. get, qui pour le rendu des pages dans

125
00:06:56,680 --> 00:06:59,060
‫un navigateur est généralement toujours celui

126
00:06:59,060 --> 00:07:02,990
‫que nous utilisons, et donc qui a spécifié l'url ici, donc la route,

127
00:07:02,990 --> 00:07:05,763
‫et c'est simplement la racine de notre site Web.

128
00:07:07,060 --> 00:07:10,283
‫Ensuite, comme avant, nous avons bien sûr besoin

129
00:07:11,780 --> 00:07:14,363
‫d'une fonction de gestionnaire, donc demande,

130
00:07:17,140 --> 00:07:19,150
‫réponse, et maintenant pour

131
00:07:19,150 --> 00:07:22,210
‫rendre notre modèle comme avant d'utiliser l'objet de

132
00:07:22,210 --> 00:07:27,210
‫réponse, nous définissons toujours le statut sur 200 dans ce cas pour ok.

133
00:07:28,100 --> 00:07:31,830
‫Mais au lieu d'utiliser json, comme celui-ci, comme nous

134
00:07:31,830 --> 00:07:34,250
‫l'avons toujours utilisé jusqu'à présent,

135
00:07:34,250 --> 00:07:37,133
‫il est maintenant temps d'utiliser render.

136
00:07:38,015 --> 00:07:40,230
‫Donc, render rendra ensuite le modèle

137
00:07:40,230 --> 00:07:42,340
‫avec le nom que nous

138
00:07:42,340 --> 00:07:44,963
‫passons, et c'est dans ce cas, base.

139
00:07:46,640 --> 00:07:49,910
‫Nous n'avons même pas besoin de spécifier l'extension

140
00:07:49,910 --> 00:07:52,070
‫pug car Express saura automatiquement

141
00:07:52,070 --> 00:07:54,490
‫qu'il s'agit du fichier que nous

142
00:07:54,490 --> 00:07:56,920
‫recherchons et bien sûr il cherchera

143
00:07:56,920 --> 00:07:59,060
‫ce fichier dans le

144
00:07:59,060 --> 00:08:03,600
‫dossier qui a été spécifié dès le début, donc ceci une.

145
00:08:03,600 --> 00:08:05,390
‫Il ira dans le dossier des

146
00:08:05,390 --> 00:08:08,303
‫vues et y cherchera le modèle avec le nom de base.

147
00:08:09,920 --> 00:08:12,840
‫Ensuite, il prendra ce modèle, le

148
00:08:12,840 --> 00:08:16,430
‫rendra, puis l'enverra essentiellement en réponse au navigateur.

149
00:08:16,430 --> 00:08:18,563
‫Super, alors testons ça maintenant.

150
00:08:22,190 --> 00:08:23,850
‫Ainsi, notre serveur fonctionne

151
00:08:23,850 --> 00:08:27,223
‫toujours sur le port hôte local 3000, je crois.

152
00:08:32,170 --> 00:08:34,970
‫Et cela nous donne cette erreur,

153
00:08:34,970 --> 00:08:37,790
‫impossible de trouver le module pug, et donc

154
00:08:37,790 --> 00:08:41,323
‫en fait, nous devons vraiment installer le module pug.

155
00:08:42,845 --> 00:08:45,250
‫J'ai donc dit plus tôt que nous ne

156
00:08:45,250 --> 00:08:47,723
‫l'avons pas fait, mais en fait, nous devons le faire.

157
00:08:49,220 --> 00:08:52,210
‫Express le chargera toujours automatiquement dans les coulisses, mais il

158
00:08:52,210 --> 00:08:54,890
‫n'est pas fourni avec tous ces moteurs de modèles

159
00:08:54,890 --> 00:08:56,553
‫installés prêts à l'emploi.

160
00:08:57,460 --> 00:08:59,753
‫Alors npm installez carlin.

161
00:09:06,063 --> 00:09:08,063
‫Et c'est parti, alors

162
00:09:09,220 --> 00:09:11,620
‫essayons à nouveau, et maintenant, en

163
00:09:11,620 --> 00:09:14,310
‫effet, nous obtenons le camping-car du parc.

164
00:09:14,310 --> 00:09:17,610
‫C'est notre élément h1 que nous venons

165
00:09:17,610 --> 00:09:22,610
‫de créer dans la base. pug, et si nous l'inspectons

166
00:09:22,830 --> 00:09:26,750
‫maintenant, vous verrez qu'il s'agit d'un simple élément h1.

167
00:09:26,750 --> 00:09:28,210
‫Bien sûr, il n'y a

168
00:09:28,210 --> 00:09:31,160
‫pas de style ni de CSS à ce stade, mais nous

169
00:09:31,160 --> 00:09:32,530
‫allons nous en occuper

170
00:09:32,530 --> 00:09:34,290
‫au cours des deux prochaines conférences.

171
00:09:34,290 --> 00:09:36,180
‫Pour l'instant, ce qui compte ici,

172
00:09:36,180 --> 00:09:40,070
‫c'est que lorsque nous accédons à notre racine, route ici sur notre hôte, donc avoir

173
00:09:40,070 --> 00:09:42,883
‫ceci est en effet la même chose que d'avoir ceci.

174
00:09:44,560 --> 00:09:46,810
‫En accédant à cette route, nous avons

175
00:09:46,810 --> 00:09:48,900
‫maintenant accès à un site

176
00:09:48,900 --> 00:09:53,320
‫Web rendu dynamiquement basé sur notre base. modèle de carlin, super.

177
00:09:53,320 --> 00:09:56,150
‫C'est la première étape de la configuration de carlin, et au

178
00:09:56,150 --> 00:09:57,670
‫cours des deux prochaines conférences,

179
00:09:57,670 --> 00:10:00,570
‫vous apprendrez ensuite à vraiment utiliser ce moteur de modèle pour

180
00:10:00,570 --> 00:10:02,663
‫créer des sites Web incroyables et dynamiques.