Nous saluons le retour.
Cette vidéo représente donc un jalon assez important dans cette classe.
Nous passons des technologies purement frontales à notre premier goût du développement du dos et du web.
Nous allons donc continuer à utiliser tout ce que nous avons appris.
C'est G-mail CSSA javascript, mais nous allons apprendre quelques nouvelles technologies qui nous aident à faire des applications Web complets.
Bien sûr, avant de commencer à écrire un code, nous avons quelques autres choses dont nous devons prendre soin.
Nous allons commencer par examiner comment fonctionne l'Internet.
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.
OK alors commençons par la version de 60 secondes de la façon dont l'Internet fonctionne.
Quand nous allons à un euro ici à me dot com slash cours il ya quelques choses qui se passent dans les coulisses.
La première chose est que notre ordinateur a besoin de comprendre quelle adresse IP pour envoyer une demande.
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.
Ensuite, une fois que nous avons cette adresse IP et New Age TTP demande est envoyée.
Ainsi, une demande est envoyée à cette adresse IP et ce n'est pas une simple demande vierge.
Il a un tas d'informations.
Nous parlerons plus en détail des détails spécifiques qui figurent dans cette demande dans la prochaine vidéo.
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.
Et surtout la page spécifique que vous demandez.
Dans ce cas, nous demandons la page du cours.
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.
Et puis il répond avec quelque chose.
Donc, si nous demandons des cours Slash, le serveur Tomy trouvera ce qu'il faut faire sur la page du cours.
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.
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.
C'est ce que l'ordinateur voit juste HMO succès en javascript.
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.
Il détermine ce qu'il faut faire avec quoi répondre.
Et puis il répond de retour avec H.M. SS en javascript.
La prochaine chose que je veux discuter est la différence entre les pages Web statiques et dynamiques.
Nous en avons parlé également dans l'une des premières vidéos sur la façon dont Internet fonctionne.
Je voudrais faire un rapide rappel parce que c'est important pour la discussion de fond que nous sommes sur le point d'avoir.
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.
Tout ce que nous avons écrit jusqu'ici a été statique.
Donc, même quelque chose comme ça, il ne semble pas que c'est statique parce qu'il ya du contenu dynamique.
Nous obtenons des couleurs aléatoires à chaque fois et c'est un jeu.
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.
A chaque fois.
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.
Nous pourrions avoir différents javascript ou différents C Ss différents chaque équipe qui est renvoyé à chaque fois.
Donc, quand nous allons à quelque chose comme Reddit par exemple et je rafraîchir la page, je peux obtenir du contenu différent ici.
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.
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.
Et si vous n'êtes pas connecté, il vous montre un formulaire et il vous montre les boutons de connexion ou d'inscription.
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.
En construisant une page Web avant de l'envoyer à moi par rapport à ce site, c'est le même contenu exact à chaque fois.
OK alors concentrons-nous un peu plus sur le back-end maintenant.
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.
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.
Techniquement, nous pourrions avoir un site Web qui n'a pas de succès.
Ce serait juste hideux.
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.
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.
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.
Il y a tellement de choix.
Il existe toutes sortes de bases de données différentes là-bas.
Post post-crise et la suite dans mon ainsi et Mongo et il ya tellement de choix.
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.
C'est une question très courante pour les développeurs de se demander les uns les autres.
Quelle est votre pile à cette entreprise ou quelle pile utilisez-vous sur ce projet spécifique.
Voici donc un exemple réel de la pile Reddit.
Ce sont donc quelques-unes des technologies que Reddit utilise sur son site Web.
Donc, le site est écrit en Python en utilisant un cadre appelé flacon.
Il est construit sur un serveur X moteur et il utilise des postscripts comme base de données.
Il ya effectivement un site Web consacré au partage de différentes piles d'entreprises appelé partage de pile.
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.
Et génétique Python post gresse Amazon S3.
Et il vous dit ci-dessous un peu sur ce qu'ils sont utilisés pour.
Ne soyez pas submergé par combien d'icônes il ya.
Combien de noms et toutes ces différentes catégories et tous ces termes différents.
Ce n'est pas l'objectif ici.
Tout ce que je veux vous montrer, c'est que différents sites Web utilisent des technologies différentes.
Donc, nous allons cliquer sur les piles et nous pouvons jeter un oeil à d'autres piles d'entreprise.
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.
Ils utilisent toute une série de technologies différentes.
Revenons donc à nos diapositives ici.
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.
Nous avons donc discuté de la façon dont un site dynamique est construit par un serveur sur le backend.
Donc, ici, cette partie du diagramme est l'endroit où la partie dynamique du site entre en jeu.
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.
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.
Voici donc la pile que nous allons apprendre.
Nous allons utiliser le noeud j.
Oui.
Nous allons donc encore écrire javascript, mais nous allons l'écrire sur le backend.
Nous allons utiliser un cadre appelé Express et nous allons également utiliser Mangu DBI comme base de données.
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.
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.
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.
H Tim L et C Ss.
C'est ce que nous appellerions le développement de la pile complète.
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.
Voici un diagramme de certaines des fonctionnalités que nous pouvons mettre en œuvre sur le panier.
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.
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é.
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.
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.
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.
Donc, sur l'extrémité avant si je vais lire le point com et rafraîchir.
J'envoie une demande pour la page d'accueil de Reddit et puis ça va le lire.
Cette demande le fait à leur serveur et le serveur voit que je demande la page d'accueil.
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.
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.
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.
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 .
Et puis mon navigateur le rend et je vois cela qui est une version très très simplifiée évidemment.
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.
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.