1
00:00:01,160 --> 00:00:02,570
‫Instructeur : Dans

2
00:00:02,570 --> 00:00:05,280
‫la conférence précédente, en parlant du front-end

3
00:00:05,280 --> 00:00:08,710
‫et du back-end, j'ai mentionné à quelques reprises des sites

4
00:00:08,710 --> 00:00:11,370
‫Web ou des applications simples et statiques

5
00:00:11,370 --> 00:00:14,600
‫et dynamiques, mais sans vraiment définir ce qu'ils sont.

6
00:00:14,600 --> 00:00:17,870
‫Donc, dans cette vidéo, je voulais clarifier ces choses

7
00:00:17,870 --> 00:00:20,620
‫et aussi parler des API afin d'intégrer

8
00:00:20,620 --> 00:00:23,620
‫tous ces concepts dans l'image plus large du

9
00:00:23,620 --> 00:00:26,013
‫développement Web back-end en général.

10
00:00:27,460 --> 00:00:30,120
‫Commençons donc par parler des sites Web statiques

11
00:00:30,120 --> 00:00:32,410
‫par rapport aux sites Web dynamiques.

12
00:00:32,410 --> 00:00:34,920
‫Ainsi, un site Web statique, ou un site

13
00:00:34,920 --> 00:00:36,630
‫Web simple comme je l'ai

14
00:00:36,630 --> 00:00:39,070
‫appelé dans la dernière vidéo, c'est lorsqu'un développeur

15
00:00:39,070 --> 00:00:43,640
‫télécharge les fichiers finaux prêts à être servis d'un site Web sur le serveur Web.

16
00:00:43,640 --> 00:00:46,580
‫Ces fichiers contiennent généralement du HTML, CSS,

17
00:00:46,580 --> 00:00:50,320
‫JavaScript, des images, etc., et comme je l'ai dit, ce

18
00:00:50,320 --> 00:00:53,970
‫sont les fichiers exacts que le serveur enverra plus tard

19
00:00:53,970 --> 00:00:57,090
‫au navigateur lorsque le site Web sera demandé.

20
00:00:57,090 --> 00:00:59,040
‫Le navigateur prendra alors ces

21
00:00:59,040 --> 00:01:01,320
‫fichiers et les rendra tels qu'ils sont.

22
00:01:01,320 --> 00:01:04,320
‫Cela signifie qu'il n'y a aucun travail effectué sur le

23
00:01:04,320 --> 00:01:07,510
‫serveur, qu'il n'y a pas de code back-end et qu'aucune application

24
00:01:07,510 --> 00:01:08,730
‫n'est en cours d'exécution.

25
00:01:08,730 --> 00:01:09,563
‫D'accord?

26
00:01:09,563 --> 00:01:12,900
‫Donc, c'est juste un serveur Web statique servant des fichiers statiques,

27
00:01:12,900 --> 00:01:15,670
‫exactement comme je l'ai mentionné dans la dernière vidéo.

28
00:01:15,670 --> 00:01:17,460
‫Maintenant, vous pourriez penser, attendez, quand il

29
00:01:17,460 --> 00:01:19,233
‫y a du JavaScript sur la

30
00:01:19,233 --> 00:01:21,290
‫page, alors il y a généralement des effets

31
00:01:21,290 --> 00:01:23,610
‫dynamiques, comme des animations et des trucs, n'est-ce pas ?

32
00:01:23,610 --> 00:01:26,480
‫Eh bien, cette dynamique que vous voulez dire

33
00:01:26,480 --> 00:01:28,050
‫est une dynamique différente.

34
00:01:28,050 --> 00:01:31,580
‫C'est juste dans le contexte du développement front-end.

35
00:01:31,580 --> 00:01:34,370
‫Dans le contexte du navigateur, la dynamique n'a rien à

36
00:01:34,370 --> 00:01:37,200
‫voir avec les effets sur une page ou les choses qui se

37
00:01:37,200 --> 00:01:40,570
‫déplacent mais avec la façon dont les sites Web sont générés sur les serveurs.

38
00:01:40,570 --> 00:01:41,870
‫D'accord?

39
00:01:41,870 --> 00:01:45,210
‫Ainsi, les sites Web dynamiques sont différents des sites Web statiques

40
00:01:45,210 --> 00:01:47,440
‫car ils sont généralement construits sur

41
00:01:47,440 --> 00:01:50,090
‫le serveur chaque fois qu'une nouvelle demande arrive.

42
00:01:50,090 --> 00:01:51,740
‫Ainsi, comme nous l'avons vu

43
00:01:51,740 --> 00:01:55,040
‫dans la dernière vidéo, les sites Web dynamiques contiennent généralement une base

44
00:01:55,040 --> 00:01:57,410
‫de données, puis il y a aussi une

45
00:01:57,410 --> 00:02:01,400
‫application en cours d'exécution, comme un nœud. js app, qui récupère les données

46
00:02:01,400 --> 00:02:04,340
‫de la base de données, puis, avec un modèle

47
00:02:04,340 --> 00:02:07,730
‫prédéfini, crée chaque page que l'utilisateur demande de manière dynamique en

48
00:02:07,730 --> 00:02:10,670
‫fonction des données provenant de la base de données.

49
00:02:10,670 --> 00:02:13,360
‫Ainsi, chaque fois qu'un navigateur demande

50
00:02:13,360 --> 00:02:18,360
‫une page, cette page est ensuite construite sous forme de fichiers HTML, CSS

51
00:02:18,560 --> 00:02:21,640
‫et JavaScript, qui seront ensuite renvoyés au navigateur.

52
00:02:21,640 --> 00:02:23,790
‫L'ensemble de ce processus est parfois

53
00:02:23,790 --> 00:02:25,860
‫appelé rendu côté serveur.

54
00:02:25,860 --> 00:02:28,540
‫Donc, encore une fois, c'est pourquoi on l'appelle dynamique,

55
00:02:28,540 --> 00:02:31,560
‫car le site Web peut changer à tout moment en

56
00:02:31,560 --> 00:02:33,700
‫fonction du contenu de la base

57
00:02:33,700 --> 00:02:36,520
‫de données ou des actions de l'utilisateur sur le site.

58
00:02:36,520 --> 00:02:38,870
‫Par exemple, si vous vous êtes connecté à Twitter,

59
00:02:38,870 --> 00:02:41,140
‫cela vous montrera une page complètement différente de

60
00:02:41,140 --> 00:02:43,510
‫celle lorsque vous vous êtes déconnecté, n'est-ce pas ?

61
00:02:43,510 --> 00:02:45,920
‫Et demain, il vous montrera également une page différente

62
00:02:45,920 --> 00:02:48,600
‫de celle d'aujourd'hui, car il y a de nouveaux tweets, donc

63
00:02:48,600 --> 00:02:50,938
‫de nouvelles données dans la base de données.

64
00:02:50,938 --> 00:02:54,330
‫Et c'est ce que sont les sites Web dynamiques.

65
00:02:54,330 --> 00:02:56,860
‫Maintenant, si vous, par exemple, allez à Jonas. io, et vous

66
00:02:56,860 --> 00:02:58,223
‫devriez, en passant, vous

67
00:02:59,150 --> 00:03:01,130
‫verrez toujours le même contenu, le même

68
00:03:01,130 --> 00:03:03,680
‫site Web, peu importe quand vous le visitez ou

69
00:03:03,680 --> 00:03:05,060
‫ce que vous y faites.

70
00:03:05,060 --> 00:03:08,870
‫Et donc, ça veut dire que c'est une page statique, d'accord ?

71
00:03:08,870 --> 00:03:10,950
‫Cette différence a-t-elle un sens ?

72
00:03:10,950 --> 00:03:14,200
‫Maintenant, nous utilisons parfois le terme de sites Web dynamiques

73
00:03:14,200 --> 00:03:16,450
‫et parfois le terme d'application Web,

74
00:03:16,450 --> 00:03:18,790
‫mais c'est un peu la même chose.

75
00:03:18,790 --> 00:03:21,320
‫Habituellement, lorsque les gens se réfèrent à

76
00:03:21,320 --> 00:03:24,450
‫des applications Web, cela signifie un site Web dynamique avec des

77
00:03:24,450 --> 00:03:27,180
‫fonctionnalités telles que la connexion, la création de profils

78
00:03:27,180 --> 00:03:30,540
‫d'utilisateurs, la recherche de choses et des choses comme ça en général.

79
00:03:30,540 --> 00:03:34,220
‫Les sites Web sont, par exemple, quelque chose comme un blog WordPress.

80
00:03:34,220 --> 00:03:36,380
‫Ils sont toujours générés dynamiquement, mais

81
00:03:36,380 --> 00:03:39,793
‫on ne peut vraiment rien faire d'autre que les lire, non ?

82
00:03:40,790 --> 00:03:44,510
‫Et traditionnellement, les sites Web statiques et dynamiques étaient les deux

83
00:03:44,510 --> 00:03:47,300
‫seuls types de sites Web, mais ces dernières

84
00:03:47,300 --> 00:03:49,840
‫années, grâce à la puissance des

85
00:03:49,840 --> 00:03:53,070
‫navigateurs côté client, nous voyons de plus en plus

86
00:03:53,070 --> 00:03:55,930
‫de sites Web basés essentiellement sur des API.

87
00:03:55,930 --> 00:03:57,580
‫Voyons donc comment cela fonctionne et comment

88
00:03:57,580 --> 00:04:00,193
‫nous pouvons utiliser Node. js pour les alimenter.

89
00:04:02,060 --> 00:04:04,430
‫Gardons simplement les sites Web dynamiques ici dans

90
00:04:04,430 --> 00:04:07,380
‫la diapositive afin que nous puissions mieux comparer les deux.

91
00:04:07,380 --> 00:04:10,610
‫Ainsi, tout comme avec les sites Web dynamiques, nous avons une

92
00:04:10,610 --> 00:04:13,880
‫base de données ici et nous avons une application qui récupère

93
00:04:13,880 --> 00:04:16,020
‫les données de la base de données

94
00:04:16,020 --> 00:04:20,090
‫chaque fois qu'un client fait une demande, donc en ce sens, un site Web

95
00:04:20,090 --> 00:04:23,210
‫alimenté par API est en fait assez similaire à un

96
00:04:23,210 --> 00:04:25,150
‫site Web dynamique. site Internet.

97
00:04:25,150 --> 00:04:27,820
‫Ainsi, les deux fonctionnent de manière dynamique.

98
00:04:27,820 --> 00:04:31,130
‫Maintenant, la grande différence ici est qu'avec une API,

99
00:04:31,130 --> 00:04:33,890
‫nous envoyons uniquement les données au navigateur, généralement

100
00:04:33,890 --> 00:04:36,340
‫au format de données JSON,

101
00:04:36,340 --> 00:04:38,990
‫et non à l'ensemble du site Web.

102
00:04:38,990 --> 00:04:42,090
‫Donc, encore une fois, seules les données sont envoyées au client

103
00:04:42,090 --> 00:04:44,670
‫et non au site Web prêt à être affiché.

104
00:04:44,670 --> 00:04:49,670
‫Donc, pas de HTML, pas de CSS, seulement les données JSON, d'accord ?

105
00:04:49,860 --> 00:04:52,370
‫Ainsi, lors de la création

106
00:04:52,370 --> 00:04:54,670
‫de sites Web

107
00:04:54,670 --> 00:04:58,100
‫basés sur des API, il y a

108
00:04:58,100 --> 00:05:01,110
‫toujours ces deux étapes, la création

109
00:05:01,110 --> 00:05:04,850
‫d'une API, puis la consommation de l'API côté

110
00:05:04,850 --> 00:05:07,800
‫client. un logiciel qui peut

111
00:05:07,800 --> 00:05:11,260
‫être utilisé par un autre logiciel pour,

112
00:05:11,260 --> 00:05:15,340
‫fondamentalement, permettre aux applications de communiquer entre elles.

113
00:05:15,340 --> 00:05:17,220
‫Et nous parlerons un peu plus en

114
00:05:17,220 --> 00:05:21,160
‫détail de ce qu'est réellement une API une fois que nous commencerons à en créer une.

115
00:05:21,160 --> 00:05:24,750
‫Quoi qu'il en soit, maintenant sur le côté client que je viens de mentionner.

116
00:05:24,750 --> 00:05:28,300
‫C'est donc là que le site Web est ensuite

117
00:05:28,300 --> 00:05:31,470
‫assemblé en branchant les données que nous recevons

118
00:05:31,470 --> 00:05:35,500
‫dans une sorte de modèles, généralement à l'aide d'un cadre

119
00:05:35,500 --> 00:05:38,600
‫frontal sophistiqué comme React, Angular ou Vue.

120
00:05:38,600 --> 00:05:40,540
‫Je ne vais pas entrer dans

121
00:05:40,540 --> 00:05:43,170
‫les détails ici car ce serait pour un cours de

122
00:05:43,170 --> 00:05:46,080
‫base, mais en termes très généraux, c'est ainsi que cela fonctionne.

123
00:05:46,080 --> 00:05:49,200
‫Donc, vous voyez que lors de la création d'un site Web basé

124
00:05:49,200 --> 00:05:52,080
‫sur une API, la phase de création du site Web

125
00:05:52,080 --> 00:05:54,970
‫est en quelque sorte passée du back-end au front-end, n'est-ce pas ?

126
00:05:54,970 --> 00:05:59,410
‫Ou on peut aussi dire qu'il est passé du serveur au client.

127
00:05:59,410 --> 00:06:01,120
‫C'est pourquoi vous verrez

128
00:06:01,120 --> 00:06:04,560
‫souvent des sites Web dynamiques appelés rendus côté serveur, car

129
00:06:04,560 --> 00:06:07,730
‫ils sont en fait construits sur le serveur.

130
00:06:07,730 --> 00:06:10,980
‫D'un autre côté, les sites Web basés sur des

131
00:06:10,980 --> 00:06:15,360
‫API sont souvent appelés rendus côté client, ce qui est logique, n'est-ce pas ?

132
00:06:15,360 --> 00:06:17,200
‫Donc, pour nous, développeurs back-end,

133
00:06:17,200 --> 00:06:20,750
‫il est en fait beaucoup plus facile de simplement créer une API

134
00:06:20,750 --> 00:06:24,460
‫et de laisser les personnes front-end créer un site, n'est-ce pas ?

135
00:06:24,460 --> 00:06:27,760
‫Et en fait, Node est un outil absolument parfait pour

136
00:06:27,760 --> 00:06:31,510
‫créer des API, et il est très couramment utilisé pour cela, mais

137
00:06:31,510 --> 00:06:33,610
‫bien sûr, il est également

138
00:06:33,610 --> 00:06:37,210
‫parfaitement adapté pour créer un site Web dynamique rendu côté serveur.

139
00:06:37,210 --> 00:06:40,730
‫Ainsi, dans ce cours, nous allons en fait faire les deux versions,

140
00:06:40,730 --> 00:06:43,960
‫en commençant par l'API, et à la fin du cours,

141
00:06:43,960 --> 00:06:47,870
‫en créant également un site Web rendu en utilisant exactement les mêmes données.

142
00:06:47,870 --> 00:06:51,670
‫J'ai choisi de faire les deux car je pense qu'il est extrêmement important pour

143
00:06:51,670 --> 00:06:54,960
‫vous de savoir comment créer à la fois une API et un

144
00:06:54,960 --> 00:06:56,710
‫site Web rendu côté serveur.

145
00:06:58,150 --> 00:06:59,840
‫Et maintenant juste pour finir

146
00:06:59,840 --> 00:07:02,020
‫cette vidéo, je voulais mentionner rapidement que

147
00:07:02,020 --> 00:07:05,630
‫les API que nous construisons avec Node, ou vraiment, n'importe quel autre

148
00:07:05,630 --> 00:07:07,150
‫langage, peuvent, bien

149
00:07:07,150 --> 00:07:09,930
‫sûr, être consommées par d'autres clients que le navigateur,

150
00:07:09,930 --> 00:07:12,920
‫ce qui est un énorme avantage de créer une API

151
00:07:12,920 --> 00:07:15,350
‫au lieu d'un site Web rendu côté serveur.

152
00:07:15,350 --> 00:07:17,320
‫Donc, disons que nous

153
00:07:17,320 --> 00:07:22,320
‫construisons un exemple d'API sur jonas. io/api/myCourseData.

154
00:07:22,380 --> 00:07:27,350
‫Ainsi, chaque fois que nous atteignons cette URL, le serveur renvoie des données

155
00:07:27,350 --> 00:07:28,980
‫sur les cours

156
00:07:28,980 --> 00:07:31,130
‫de développement Web que j'enseigne actuellement.

157
00:07:31,130 --> 00:07:33,970
‫Jusqu'à présent, nous n'avons parlé que des

158
00:07:33,970 --> 00:07:38,060
‫demandes provenant de navigateurs Web, mais nous pourrions également demander et

159
00:07:38,060 --> 00:07:41,060
‫ensuite utiliser exactement les mêmes données JSON

160
00:07:41,060 --> 00:07:44,860
‫sur une application iOS native ou une application Android, ou

161
00:07:44,860 --> 00:07:47,890
‫même sur des applications de bureau pour Mac

162
00:07:47,890 --> 00:07:50,440
‫ou pour les ordinateurs Windows.

163
00:07:50,440 --> 00:07:54,130
‫Les possibilités sont vraiment infinies lorsque nous construisons une API car

164
00:07:54,130 --> 00:07:56,640
‫nous avons simplement une source de données,

165
00:07:56,640 --> 00:07:59,380
‫qui peut ensuite être demandée et utilisée n'importe où,

166
00:07:59,380 --> 00:08:00,880
‫pas seulement des navigateurs.

167
00:08:00,880 --> 00:08:03,210
‫C'est un peu le problème lorsque nous construisons un

168
00:08:03,210 --> 00:08:04,520
‫site Web dynamique normal.

169
00:08:04,520 --> 00:08:07,700
‫Nous renvoyons des fichiers HTML, CSS et

170
00:08:07,700 --> 00:08:10,960
‫JavaScript, et seuls les navigateurs peuvent vraiment les

171
00:08:10,960 --> 00:08:14,470
‫comprendre, nous sommes donc piégés dans cette plate-forme unique.

172
00:08:14,470 --> 00:08:16,840
‫Et cela peut ne pas être un

173
00:08:16,840 --> 00:08:19,860
‫problème dans de nombreux cas, mais pour les produits complexes

174
00:08:19,860 --> 00:08:22,350
‫qui nécessitent beaucoup d'applications, puis des sites Web

175
00:08:22,350 --> 00:08:25,450
‫et des applications Web, une API est généralement toujours nécessaire.

176
00:08:25,450 --> 00:08:29,530
‫Donc, dans cet exemple sur Jonas. io, je pourrais créer cette

177
00:08:29,530 --> 00:08:32,820
‫API, puis créer un site Web basé sur l'API et quelques

178
00:08:32,820 --> 00:08:35,020
‫applications et obtenir mes données sur tous

179
00:08:35,020 --> 00:08:37,830
‫ces clients à partir d'une seule source, d'accord ?

180
00:08:37,830 --> 00:08:41,100
‫Et certaines personnes ou équipes n'ont même pas de

181
00:08:41,100 --> 00:08:44,240
‫client du tout et vendent simplement l'accès à

182
00:08:44,240 --> 00:08:46,120
‫leur API à des

183
00:08:46,120 --> 00:08:49,560
‫tiers qui utiliseront ensuite ces API et non les leurs.

184
00:08:49,560 --> 00:08:51,680
‫Ainsi, il existe vraiment des entreprises entières

185
00:08:51,680 --> 00:08:54,830
‫construites autour de cette philosophie consistant à simplement vendre une API

186
00:08:54,830 --> 00:08:56,563
‫à d'autres développeurs ou entreprises.

187
00:08:57,520 --> 00:09:00,670
‫Quoi qu'il en soit, j'espère qu'avec cette dernière diapositive, le

188
00:09:00,670 --> 00:09:03,740
‫concept et la raison et, en quelque sorte,

189
00:09:03,740 --> 00:09:07,380
‫la philosophie derrière la création d'API sont devenus clairs pour vous.

190
00:09:07,380 --> 00:09:09,313
‫Alors, passons maintenant.