1
00:00:00,360 --> 00:00:01,320
Nous saluons le retour.

2
00:00:01,680 --> 00:00:05,790
Cette vidéo représente donc un jalon assez important dans cette classe.

3
00:00:05,790 --> 00:00:11,580
Nous passons des technologies purement frontales à notre premier goût du développement du dos et du web.

4
00:00:11,580 --> 00:00:13,940
Nous allons donc continuer à utiliser tout ce que nous avons appris.

5
00:00:13,950 --> 00:00:20,880
C'est G-mail CSSA javascript, mais nous allons apprendre quelques nouvelles technologies qui nous aident à faire des applications Web complets.

6
00:00:20,880 --> 00:00:25,300
Bien sûr, avant de commencer à écrire un code, nous avons quelques autres choses dont nous devons prendre soin.

7
00:00:25,410 --> 00:00:27,840
Nous allons commencer par examiner comment fonctionne l'Internet.

8
00:00:27,840 --> 00:00:38,580
Ensuite, nous allons parler de statique vs sites dynamiques et où les ajustements avant et où l'arrière et les ajustements et surtout Nous parlerons plus en profondeur sur le dos spécifique et les technologies que nous allons travailler avec.

9
00:00:39,030 --> 00:00:43,660
OK alors commençons par la version de 60 secondes de la façon dont l'Internet fonctionne.

10
00:00:43,980 --> 00:00:50,790
Quand nous allons à un euro ici à me dot com slash cours il ya quelques choses qui se passent dans les coulisses.

11
00:00:50,790 --> 00:00:56,130
La première chose est que notre ordinateur a besoin de comprendre quelle adresse IP pour envoyer une demande.

12
00:00:56,490 --> 00:01:04,840
Donc il nous prend vous R-OH vous lire à venir il obtient l'adresse IP correcte qui est le localisateur unique pour vous et moi serveur.

13
00:01:05,130 --> 00:01:10,050
Ensuite, une fois que nous avons cette adresse IP et New Age TTP demande est envoyée.

14
00:01:10,290 --> 00:01:14,910
Ainsi, une demande est envoyée à cette adresse IP et ce n'est pas une simple demande vierge.

15
00:01:14,910 --> 00:01:16,800
Il a un tas d'informations.

16
00:01:16,800 --> 00:01:20,830
Nous parlerons plus en détail des détails spécifiques qui figurent dans cette demande dans la prochaine vidéo.

17
00:01:21,090 --> 00:01:27,910
Mais la version courte est qu'il a des choses comme votre propre adresse IP le temps que vous l'envoyez à ce type de demande.

18
00:01:27,990 --> 00:01:31,920
Et surtout la page spécifique que vous demandez.

19
00:01:31,950 --> 00:01:34,710
Dans ce cas, nous demandons la page du cours.

20
00:01:34,830 --> 00:01:43,010
Donc, c'est codé dans la demande qui est envoyée à côté de moi obtient cette demande et il trouve ce qu'il faut faire.

21
00:01:43,140 --> 00:01:44,810
Et puis il répond avec quelque chose.

22
00:01:45,030 --> 00:01:52,230
Donc, si nous demandons des cours Slash, le serveur Tomy trouvera ce qu'il faut faire sur la page du cours.

23
00:01:52,230 --> 00:02:13,580
Donc, je suppose qu'il va dans une base de données et prend un tas de cours et les images les compile dans ce fichier long HTL avec un certain succès et un peu de javascript et puis il est enfin renvoyé à moi à mon ordinateur a la réponse HTP et puis il obtient À un navigateur dont le travail est de rendre la page.

24
00:02:13,860 --> 00:02:19,880
Donc c'est ce que le contenu réel ressemble avant notre navigateur prend soin de lui et rend pour nous en tant qu'êtres humains.

25
00:02:20,010 --> 00:02:24,880
C'est ce que l'ordinateur voit juste HMO succès en javascript.

26
00:02:25,050 --> 00:02:42,600
Pour résumer tout cela quand je vais à une URL et je frappe entrez la première chose qui se produit est nous devons trouver l'IP address pour ce domaine et alors nous envoyons une demande de HTP demandant une page particulière à cette adresse IP et puis le serveur Reçoit cette demande.

27
00:02:42,750 --> 00:02:45,310
Il détermine ce qu'il faut faire avec quoi répondre.

28
00:02:45,570 --> 00:02:51,300
Et puis il répond de retour avec H.M. SS en javascript.

29
00:02:51,300 --> 00:02:56,510
La prochaine chose que je veux discuter est la différence entre les pages Web statiques et dynamiques.

30
00:02:56,610 --> 00:03:00,960
Nous en avons parlé également dans l'une des premières vidéos sur la façon dont Internet fonctionne.

31
00:03:00,960 --> 00:03:05,730
Je voudrais faire un rapide rappel parce que c'est important pour la discussion de fond que nous sommes sur le point d'avoir.

32
00:03:06,330 --> 00:03:22,530
Il existe donc deux types différents de sites Web pages statiques et pages dynamiques pages Web dynamiques sont des sites qui sont compilés sur le côté serveur où le serveur est tirant ensemble ou construire une page Web avant qu'il soit renvoyé en réponse.

33
00:03:22,530 --> 00:03:25,610
Tout ce que nous avons écrit jusqu'ici a été statique.

34
00:03:25,650 --> 00:03:31,330
Donc, même quelque chose comme ça, il ne semble pas que c'est statique parce qu'il ya du contenu dynamique.

35
00:03:31,350 --> 00:03:35,000
Nous obtenons des couleurs aléatoires à chaque fois et c'est un jeu.

36
00:03:35,010 --> 00:03:48,030
Il ne semble pas aussi statique que l'exemple de page Web de restaurant que j'ai utilisé sur la vidéo précédente sur ce sujet, mais il est encore statique parce que c'est le même HMO C Ss en javascript.

37
00:03:48,060 --> 00:03:49,160
A chaque fois.

38
00:03:49,440 --> 00:03:58,530
Oui, il a l'air différent parce que nous avons des couleurs aléatoires mais ce sont les mêmes éléments fondamentaux chaque fois que nous ouvrons dans le navigateur sur un site Web dynamique.

39
00:03:58,560 --> 00:04:04,620
Nous pourrions avoir différents javascript ou différents C Ss différents chaque équipe qui est renvoyé à chaque fois.

40
00:04:04,980 --> 00:04:11,580
Donc, quand nous allons à quelque chose comme Reddit par exemple et je rafraîchir la page, je peux obtenir du contenu différent ici.

41
00:04:11,820 --> 00:04:19,330
Et en fait, je fais chaque fois que vous êtes frais la page que vous obtenez du nouveau contenu et il ya donc une base de données qui est la compilation des choses.

42
00:04:19,380 --> 00:04:28,020
Il ya quelques codes de vérification si vous êtes connecté et si vous êtes connecté, puis il ne sera pas vous montrer un formulaire ici, mais il vous montrera un bouton de déconnexion.

43
00:04:28,320 --> 00:04:34,360
Et si vous n'êtes pas connecté, il vous montre un formulaire et il vous montre les boutons de connexion ou d'inscription.

44
00:04:35,370 --> 00:04:44,430
Donc, cette page web n'est pas exactement la même chose dans javascript qui m'a renvoyé à chaque fois que le serveur est en fait décider quoi envoyer.

45
00:04:44,430 --> 00:04:53,540
En construisant une page Web avant de l'envoyer à moi par rapport à ce site, c'est le même contenu exact à chaque fois.

46
00:04:56,320 --> 00:04:59,260
OK alors concentrons-nous un peu plus sur le back-end maintenant.

47
00:04:59,350 --> 00:05:09,800
Donc, ce diagramme est d'une pile générique et la pile est un terme qui est utilisé pour désigner toutes les technologies utilisées par une application Web particulière.

48
00:05:09,820 --> 00:05:17,770
So H.T. Melchior dit en javascript sont toujours font presque toujours partie d'une pile de nos jours sur de grandes applications web de fantaisie.

49
00:05:17,770 --> 00:05:21,310
Techniquement, nous pourrions avoir un site Web qui n'a pas de succès.

50
00:05:21,340 --> 00:05:22,690
Ce serait juste hideux.

51
00:05:22,780 --> 00:05:28,420
Nous pourrions avoir un site Web qui n'a pas de javascript de côté de client aussi bien et il juste ne serait pas très interactif.

52
00:05:28,540 --> 00:05:46,050
Mais nous pouvons toujours faire un site Web tout à fait bon comme nous l'avons fait avec le site de portfolio de photographie d'origine seulement chaque équipe Eliseus nous mais la plupart des applications Web comme je l'ai mentionné tous ont HDMI elsea dit et Javascript qui est renvoyé sur le backend est où nous voyons un Beaucoup plus de variantes.

53
00:05:46,270 --> 00:05:57,720
Donc, il existe différentes langues que nous pouvons écrire le code côté serveur et nous pouvons écrire ou de retour et en utilisant Ruby ou Python ou Skala ou Java ou javascript ou THP.

54
00:05:57,820 --> 00:05:59,500
Il y a tellement de choix.

55
00:05:59,530 --> 00:06:01,930
Il existe toutes sortes de bases de données différentes là-bas.

56
00:06:01,930 --> 00:06:07,760
Post post-crise et la suite dans mon ainsi et Mongo et il ya tellement de choix.

57
00:06:07,810 --> 00:06:16,110
Donc, la pile terme se réfère à ce que les choix particuliers des développeurs ont fait et quelles technologies exactes qu'ils utilisent.

58
00:06:16,180 --> 00:06:19,200
C'est une question très courante pour les développeurs de se demander les uns les autres.

59
00:06:19,450 --> 00:06:25,010
Quelle est votre pile à cette entreprise ou quelle pile utilisez-vous sur ce projet spécifique.

60
00:06:25,030 --> 00:06:28,290
Voici donc un exemple réel de la pile Reddit.

61
00:06:28,510 --> 00:06:32,830
Ce sont donc quelques-unes des technologies que Reddit utilise sur son site Web.

62
00:06:33,160 --> 00:06:37,010
Donc, le site est écrit en Python en utilisant un cadre appelé flacon.

63
00:06:37,410 --> 00:06:42,610
Il est construit sur un serveur X moteur et il utilise des postscripts comme base de données.

64
00:06:42,610 --> 00:06:48,250
Il ya effectivement un site Web consacré au partage de différentes piles d'entreprises appelé partage de pile.

65
00:06:48,460 --> 00:06:55,470
Donc je l'ai ouvert ici et c'est la page Reddit sur la texture et nous pouvons voir toutes les différentes technologies qu'ils utilisent.

66
00:06:55,660 --> 00:06:59,270
Et génétique Python post gresse Amazon S3.

67
00:06:59,410 --> 00:07:02,590
Et il vous dit ci-dessous un peu sur ce qu'ils sont utilisés pour.

68
00:07:02,590 --> 00:07:04,980
Ne soyez pas submergé par combien d'icônes il ya.

69
00:07:05,110 --> 00:07:09,530
Combien de noms et toutes ces différentes catégories et tous ces termes différents.

70
00:07:09,790 --> 00:07:11,100
Ce n'est pas l'objectif ici.

71
00:07:11,340 --> 00:07:15,910
Tout ce que je veux vous montrer, c'est que différents sites Web utilisent des technologies différentes.

72
00:07:15,910 --> 00:07:20,190
Donc, nous allons cliquer sur les piles et nous pouvons jeter un oeil à d'autres piles d'entreprise.

73
00:07:20,290 --> 00:07:33,130
Par exemple l'air B et B peuvent voir que FBN B utilise des rails et Ruby qui utilisent mon bien Esky bien au javascript Java.

74
00:07:33,520 --> 00:07:35,720
Ils utilisent toute une série de technologies différentes.

75
00:07:35,770 --> 00:07:38,500
Revenons donc à nos diapositives ici.

76
00:07:38,500 --> 00:07:45,650
Une autre chose que je veux faire ressortir, c'est que cette ligne bleue à droite ici désigne la frontière entre l'arrière et l'avant.

77
00:07:46,000 --> 00:07:51,490
Nous avons donc discuté de la façon dont un site dynamique est construit par un serveur sur le backend.

78
00:07:51,490 --> 00:07:57,050
Donc, ici, cette partie du diagramme est l'endroit où la partie dynamique du site entre en jeu.

79
00:07:57,250 --> 00:08:13,130
Donc, c'est toute la logique écrite en Python en rouge c'est le cas qui détermine si un utilisateur est connecté si nous devons montrer un formulaire ce qui ajoute à ajouter dans la page quelles images à mettre si nous devons avoir un signe et Verrouillage du bouton ou un bouton de déconnexion.

80
00:08:13,240 --> 00:08:23,600
Tout cela se fait à l'arrière et dans cette partie du schéma puis il renvoie h tim L C S S et Javascript.

81
00:08:23,680 --> 00:08:26,170
Voici donc la pile que nous allons apprendre.

82
00:08:26,380 --> 00:08:27,800
Nous allons utiliser le noeud j.

83
00:08:27,870 --> 00:08:28,440
Oui.

84
00:08:28,450 --> 00:08:33,120
Nous allons donc encore écrire javascript, mais nous allons l'écrire sur le backend.

85
00:08:33,280 --> 00:08:40,090
Nous allons utiliser un cadre appelé Express et nous allons également utiliser Mangu DBI comme base de données.

86
00:08:40,370 --> 00:08:46,490
Et puis, bien sûr, nous aurons également h t m l c s s et Javascript tout comme nous l'avons utilisé dans les dernières unités.

87
00:08:46,720 --> 00:08:58,950
Donc en ce moment à ce stade du cours, vous pouvez vous considérer comme un développeur avant ou un développeur de front-end dans la formation où nous avons couvert tout ce que vous devez savoir pour commencer à faire l'avant-garde des sites Web.

88
00:08:58,960 --> 00:09:14,510
Maintenant, nous allons commencer à parler de retour dans le développement web et une fois que nous apportons ces deux ensemble vers la fin du cours où que l'écriture côté serveur code avec Express A.J. Comme Mongo D-B nous avons l'utilisateur ouvrent une session mais nous écrivons également le côté client ou l'extrémité avant javascript.

89
00:09:14,510 --> 00:09:16,170
H Tim L et C Ss.

90
00:09:16,390 --> 00:09:19,090
C'est ce que nous appellerions le développement de la pile complète.

91
00:09:19,270 --> 00:09:26,380
Le terme développement de pile complète se réfère à l'écriture de code sur toutes les parties de la pile de l'arrière et l'extrémité avant.

92
00:09:26,710 --> 00:09:30,990
Voici un diagramme de certaines des fonctionnalités que nous pouvons mettre en œuvre sur le panier.

93
00:09:31,210 --> 00:09:51,420
Et c'est en utilisant Reddit comme un exemple à nouveau vous pouvez voir que nous avons des fonctionnalités comme vérifier si l'utilisateur est connecté inscrivez-vous un utilisateur ajouter un nouveau post à la base de données créer un nouveau commentaire supprimer un post de la base de données trier et classer les messages créer Un nouveau sous Reddit ajouter un abonné à la newsletter et enregistrer que dans la base de données.

94
00:09:51,760 --> 00:10:00,270
Et le plus important, bien sûr, est de comprendre ce que chaque équipe verra évaluer en javascript pour renvoyer à l'utilisateur qui est ensuite renvoyé.

95
00:10:00,460 --> 00:10:10,730
Traversant cette ligne bleue où nous allons maintenant à l'extrémité avant que H.M.S. Assassins et Javascript est renvoyé à moi et puis je le vois dans mon navigateur.

96
00:10:11,020 --> 00:10:17,260
J'ai un diagramme de plus ici qui parle également de front end contre back-end mais il est formaté légèrement différemment.

97
00:10:17,560 --> 00:10:24,070
Ce diagramme montre la séquence des événements entre l'extrémité avant et arrière et au cours de quelques charges de page.

98
00:10:24,370 --> 00:10:29,410
Donc, sur l'extrémité avant si je vais lire le point com et rafraîchir.

99
00:10:29,680 --> 00:10:34,790
J'envoie une demande pour la page d'accueil de Reddit et puis ça va le lire.

100
00:10:34,960 --> 00:10:39,340
Cette demande le fait à leur serveur et le serveur voit que je demande la page d'accueil.

101
00:10:39,370 --> 00:10:52,040
Donc, il ya une logique côté serveur qui saisit le top post de la base de données et fait tout le temps LNC SS et javascript que je vois ici et puis envoie ce retour à moi que je vois ensuite dans mon navigateur.

102
00:10:52,780 --> 00:11:02,370
La prochaine étape est que je pourrais taper quelque chose dans une boîte de recherche comme les chiens que je vais faire maintenant chiens de type ici et appuyez sur Entrée.

103
00:11:02,710 --> 00:11:10,320
Et quand je frappe entrer une nouvelle demande est renvoyée au serveur Reddit cette fois en disant que je suis à la recherche de chiens.

104
00:11:10,570 --> 00:11:25,930
Donc, le serveur a une certaine logique qui prend mes chiens terme de recherche et il trouve tous les messages qui correspondent à ce terme dans la base de données et puis il me fait un nouvel âge masculin évaluer en javascript pour la page de résultats du chien et puis il envoie que de retour à moi .

105
00:11:26,620 --> 00:11:32,700
Et puis mon navigateur le rend et je vois cela qui est une version très très simplifiée évidemment.

106
00:11:32,810 --> 00:11:39,660
Il y a beaucoup plus de choses qui se passent dans les coulisses et Reddit va réellement créer notre propre version d'une application très similaire à la lire.

107
00:11:39,820 --> 00:11:46,630
Une fois que nous en apprendre plus sur Express et de savoir J.S. Et Mongo DB Et nous allons faire une application pleine pile.