‫-: [Jonas Schmedtman] Nous avons donc déjà des modèles HTML.
‫Vient maintenant la partie la plus difficile,
‫qui consiste à remplacer les espaces réservés par le contenu.
‫Commençons donc par la vue d'ensemble.
‫Et donnons-nous un peu de répit ici
‫et ajoutons quelques commentaires.
‫(en tapant sur
‫un clavier) Donc page d'aperçu et quelques commentaires ici.
‫Donc la page produit, et là nous avons l'API.
‫Et puis ici, nous avons le Not found.
‫Bon, ça a l'air déjà un peu mieux.
‫Encore une fois, nous commençons par la page de présentation.
‫Et donc, la
‫première étape consiste à charger réellement la vue d'ensemble du modèle.
‫D'accord, donc chaque fois qu'il y a une
‫nouvelle demande pour cet itinéraire, donc l'itinéraire ajusté ou
‫/Aperçu, la première chose que nous
‫allons faire est de lire l'aperçu du modèle.
‫Mais, comme avant, nous pouvons le
‫faire en dehors de ce rappel, d'accord ?
‫Parce que ces modèles, ils seront toujours les mêmes.
‫Vous pouvez donc les lire
‫en mémoire dès le début lorsque nous démarrons l'application.
‫Et puis, si nécessaire, nous allons
‫simplement de l'avant et remplaçons le contenu là-dedans.
‫D'accord, comme nous l'avons fait avec les données ici, il
‫n'est pas non plus nécessaire de lire les données
‫à chaque fois qu'il y a
‫une demande et la même chose se produit pour les modèles.
‫D'accord?
‫Je vais donc aller
‫de l'avant et le faire pour les trois modèles
‫ici afin que nous ayons cela à l'écart.
‫Je vais donc aller de l'avant, et juste pour obtenir celui-ci, appelez-le temp
‫pour un aperçu
‫du modèle et le nom du DAR et
‫nous avons ici des modèles.
‫Et puis /template-overview.
‫D'accord, alors dupliquez-le ici deux fois afin que
‫nous en
‫ayons un pour la carte, donc
‫modèle-carte, puis un pour le modèle de produit.
‫Produit, d'accord.
‫Et encore une fois, gardez à l'esprit que
‫nous pouvons le faire avec la version synchronisée car nous sommes
‫dans le code de niveau supérieur.
‫Nous n'avons exécuté qu'une seule fois, dès le
‫début lorsque nous chargeons ces applications.
‫Nous ne pouvions donc pas faire cela à l'intérieur
‫de cette fonction de rappel createServer, d'accord ?
‫Car celui-ci est appelé à chaque fois qu'il y a une demande.
‫Et si nous avons un million de requêtes en même temps, alors
‫nous pourrions bloquer le code un million de fois, une
‫fois pour chaque requête.
‫Et c'est quelque chose que nous ne voulons pas.
‫Donc, la vue d'ensemble, allons-y et
‫tout d'abord juste
‫pour la tester, envoyons ce tempOverview comme réponse.
‫Maintenant, avant de
‫pouvoir le faire, nous devons aller de l'avant et définir ce type de contenu sur HTML.
‫Alors laissez-moi copier ce morceau de code ici.
‫Le code d'état est donc
‫200 et le type de contenu doit être text/html.
‫Redémarrez donc le serveur
‫ici et regardons maintenant, et en effet,
‫c'est parti.
‫Voici donc notre page
‫stylisée que nous connaissons déjà de celle-ci.
‫Maintenant, ce qui manque bien
‫sûr ici, ce sont ces lignes, et
‫c'est parce que nous avons toujours notre espace réservé.
‫Et donc la tâche suivante consiste maintenant à remplacer cet espace réservé par
‫les cartes réelles.
‫Et comment allons-nous faire cela?
‫Eh bien, rappelez-vous que dans l'objet de données, nous
‫avons un tableau de tous les objets qui sont dans
‫les données. JSON.
‫Donc, tous ces cinq objets, tous dans des objets JavaScript, car nous
‫avons déjà analysé ces données avec juste une chaîne.
‫D'accord?
‫Donc, l'objet de données est à nouveau un
‫tableau de cinq objets à ce stade.
‫Donc, ce que
‫nous devons faire, c'est essentiellement parcourir
‫ce tableau et, pour chacun d'eux, remplacer
‫les espaces réservés dans le modèle par les
‫données réelles du produit actuel, d'accord ?
‫Avoir du sens ?
‫Alors, mettons cela dans le code.
‫Donc, objet de données, nous allons le parcourir avec une carte parce
‫que nous voulons retourner quelque chose
‫et ce quelque chose, nous allons l'enregistrer dans
‫un nouveau tableau, appelons-le donc le cardsHtml, d'accord
‫?
‫Et donc je suis sûr que vous connaissez la méthode de la carte, d'accord ?
‫Donc, ce que fait la carte est d'accepter une
‫fonction de rappel et cette fonction de rappel obtient comme argument
‫l'élément actuel, donc l'élément de la boucle actuelle et tout ce
‫que nous retournons ici
‫seront ensuite enregistrés dans un tableau, d'accord ?
‫Disons donc qu'on boucle sur un tableau à cinq éléments ce qui
‫est le
‫cas ici, et pour chaque élément, on
‫va retourner quelque chose, et que quelque chose sera alors
‫mis à la même position mais dans ce nouveau tableau cardsHtml.
‫Alors, que ferons-nous dans chacune de ces itérations ?
‫Eh bien, nous voulons remplacer les espaces réservés, n'est-ce pas ?
‫Et donc je vais en
‫fait créer une
‫fonction pour cela et qui s'appellera replaceTemplate.
‫D'accord?
‫Et replaceTemplate prendra en compte le HTML de la carte.
‫Donc, fondamentalement, le tempCard.
‫Et il prendra dans l'objet courant, donc element.
‫D'accord?
‫C'est donc cet élément qui contient les données, n'est-ce pas ?
‫Encore une fois, chacun d'eux est maintenant un
‫objet qui contient les données dans chacune de ces propriétés.
‫D'accord?
‫Et ne vous inquiétez pas, si cela n'a pas de sens à 100%
‫maintenant, cela le sera une fois que nous aurons créé cette fonction replaceTemplate, d'accord ?
‫Faisons-le maintenant ici aussi.
‫Donc replaceTemplate est une fonction qui prend
‫un modèle, je vais juste l'appeler temp ici et
‫bien sûr un produit.
‫Bien.
‫Créons donc une variable appelée
‫output et
‫celle-ci sera un modèle. remplacer dans notre espace réservé.
‫Et nous allons mettre ici tous les espaces
‫réservés que nous avons, en commençant par PRODUCTNAME, d'accord ?
‫Et pour que celui-ci soit remplacé par un produit. NOM DU PRODUIT.
‫Donc produit, qui est cet argument que nous avons passé
‫dans la fonction, . PRODUCTNAME parce que,
‫eh bien, c'est le nom du champ
‫où se trouve le nom du produit.
‫Bien?
‫Alors, allez-y et copiez celui-ci, et d'accord.
‫Maintenant, une petite astuce que nous devons
‫utiliser ici est de ne pas utiliser les
‫guillemets, mais d'utiliser à la place une expression régulière.
‫Et c'est parce qu'il
‫peut y avoir plusieurs instances de cet espace
‫réservé et donc l'astuce consiste à l'envelopper dans une expression régulière et à
‫utiliser le drapeau g ensuite dessus.
‫Ce qui signifie global et
‫donc cela fera en sorte que tous ces espaces réservés seront remplacés et
‫pas seulement le premier qui se produit.
‫Donc, cela remplace le nom du
‫produit, maintenant allons-y et remplaçons tous les autres.
‫Donc
‫sortie = sortie. remplacer, et maintenant nous
‫allons simplement aller
‫de l'avant et copier ceci pour me faciliter la vie.
‫Donc image, et ça s'appelle image et
‫pas en majuscule, donc comme ça.
‫D'accord?
‫Maintenant, ici, j'ai créé cette
‫variable parce que je voulais remplacer ce nom de produit dans temp.
‫Donc dans l'argument, et ce n'est pas une bonne
‫pratique de manipuler directement les arguments que l'on
‫passe à une fonction.
‫Et donc j'ai créé une nouvelle variable
‫et à partir
‫de maintenant, je vais manipuler la première, d'accord ?
‫Et c'est pourquoi ce n'est pas un const, mais un let.
‫Alors laissez, nous pouvons muter après sa création, d'accord ?
‫Maintenant, permettez-moi d'aller de l'avant, copiez-en quelques-uns.
‫Donc le prix, et ça s'appelle le prix ici aussi, alors
‫nous avons de,
‫puis nous avons des nutriments.
‫Bien sûr, je pourrais copier tout
‫cela, mais je ne vais pas faire des allers-retours ici.
‫Donc quantité, description,
‫et je
‫vais probablement faire une erreur ici en
‫écrivant tout cela manuellement mais dans
‫un petit produit, ce n'est pas grave du tout.
‫Donc en fait, nous n'avons pas besoin de celui-ci,
‫ou en fait nous
‫en avons besoin parce que pour le
‫bio, donc le bio qui
‫manque, mais rappelez-vous que le bio était un peu spécial.
‫Donc dans ce cas, si le produit n'est pas bio,
‫alors produit. organique, si c'est
‫faux, alors
‫rappelez-vous, c'est en fait une mise en gras.
‫Ainsi, par exemple, nous avons du vrai organique ici,
‫mais nous avons du faux ici.
‫D'accord?
‫Et donc si c'est faux, eh bien dans ce cas, on
‫veut alors remplacer le NOT. BIOLOGIQUE.
‫Donc le NON. Espace réservé BIO avec tout simplement non-bio.
‫Donc non bio car c'est le nom de la classe
‫que je vous ai montré tout à l'heure.
‫C'est
‫donc celui-ci.
‫D'accord?
‫Il sera donc remplacé ici, d'accord ?
‫Et encore une fois, au cas où
‫ce n'est pas organique, eh bien, le nom
‫de la classe NOT_ORGANIC sera ici et tout ce lot ne sera alors pas déplacé.
‫D'accord, ça a du sens ?
‫Voyons donc
‫s'il w-- ah, désolé, le
‫code
‫réel est en dessous.
‫Essayons donc de lui donner plus de sens.
‫Encore une fois, nous bouclons cet objet de données déjà
‫ici qui contient tous les produits et
‫à chaque itération, nous remplacerons les espaces réservés
‫dans la carte modèle par le produit actuel qui
‫est l'élément, n'est-ce pas ?
‫Et cette fonction flèche le renverra alors implicitement ici.
‫Donc c'est la même chose que de revenir ici, d'accord ?
‫Mais ce n'est pas
‫vraiment nécessaire car dans une fonction flèche, si vous
‫n'avez pas les accolades, cette valeur ici est automatiquement renvoyée.
‫D'accord, juste au cas où vous ne
‫le sauriez pas, je viens de me rappeler que nous avons oublié
‫de renvoyer la sortie d'ici.
‫D'accord?
‫Alors bien sûr, nous saisissons le modèle et le produit, mais
‫ensuite, bien sûr, nous devons sortir le HTML final.
‫Droit?
‫Et pour que cela soit ensuite branché
‫ici, et finalement, tout cela ici
‫remplacera un tableau, avec les cinq derniers HTML, chacun pour
‫l'une des cinq cartes.
‫Alors, chacun pour l'un des cinq produits, d'accord ?
‫Maintenant, allons de l'avant et enregistrons-le dans la
‫console avant de le mettre sur la page Web de présentation.
‫Donc cardHtml juste pour s'assurer que tout fonctionne ici.
‫D'accord?
‫Nous devons donc recharger le serveur, ne l'oubliez pas.
‫Tout cela fonctionne de
‫la même manière, mais regardons maintenant la console.
‫Et je commence à voir de belles choses ici.
‫Nous avons donc un tableau,
‫et nous avons en fait remplacé le matériel.
‫Nous avons donc des avocats ici.
‫Il est écrit ici FreshAvocados.
‫Il y a les quatre avocats par boîte,
‫le prix, et donc oui, tout cela
‫est en fait très joli.
‫Et en effet c'est aussi un tableau.
‫Nous avons donc ce
‫premier chiffre, puis une virgule et donc ici commence
‫l'élément suivant donc le prochain chiffre, d'accord ?
‫Nous avons donc maintenant un tableau de tous ces éléments mais ce
‫que nous voulons n'est en fait pas un tableau
‫mais nous voulons une grosse chaîne contenant tout ce code HTML.
‫Donc, c'est en fait très simple à réaliser.
‫Tout ce que nous avons à faire est à la fin de ce
‫tableau, donc nous nous souvenons de tout
‫cela ici renvoie ce tableau que nous voyons ici, et
‫donc à la fin tout ce
‫que nous faisons est de joindre par une chaîne
‫vide, et donc cela rejoindra tout de ces éléments dans une chaîne.
‫Et maintenant, cardsHtml est vraiment une chaîne.
‫D'accord?
‫Et maintenant, nous avons nos cartes prêtes
‫et la dernière pièce du puzzle
‫est d'aller de l'avant et de remplacer cet espace réservé.
‫Donc ceci ici, en fait en le copiant maintenant, donc
‫maintenant en remplaçant cet espace réservé
‫par le code HTML que nous venons de créer.
‫Appelons-le sortie ici et tout ce
‫que nous avons à
‫faire est tempOverview
‫avec juste une chaîne qui contient le HTML de vue d'ensemble, n'est-ce pas ? remplacez-le et remplacez-le par
‫cardsHtml.
‫Bien?
‫C'est ça.
‫Maintenant, tout ce
‫que nous avons à faire est de répondre avec la sortie et non avec ce que nous avions auparavant.
‫D'accord, cool.
‫Cela avait donc l'air un
‫peu complexe, mais si vous y réfléchissez, j'espère que
‫cela vous semble tout à fait logique.
‫Et donc allons-y et testons cela maintenant et j'espère
‫que je n'ai pas d'erreurs et
‫que quelque chose s'est mal passé, d'accord.
‫Alors qu'est-ce que c'est ?
‫Bon, j'ai juste mal orthographié remplacer.
‫C'est l'une des erreurs les plus courantes que je reçois tout le temps.
‫Comme une petite faute d'orthographe.
‫Rechargez et bam, c'est parti.
‫Voici donc nos cinq rangées.
‫Tellement beau, beau, beau.
‫Maintenant, ça ne ressemble pas tout
‫à fait à l'original parce que ce qui manque, c'est comme ça, cet organique ici.
‫D'accord?
‫Voyons donc ce qui ne va pas.
‫Aussi pour une raison quelconque, je ne
‫vois pas la quantité ici mais seulement si ce n'est pas bio.
‫Eh bien, c'est bizarre, alors essayons d'enquêter sur ce qui se
‫passe ici.
‫L'erreur est donc probablement quelque part ici dans
‫cette fonction replaceTemplate.
‫Mais en fait, tout semble plutôt correct ici.
‫Alors aussi ici sur ce remplacement non organique.
‫Jetons donc un coup d'œil à notre carte modèle et,
‫donc je vois ici que quand
‫il
‫y a ce NOT_ORGANIC, eh bien, en fait toute cette
‫boîte ici, donc aussi ce H6 ne
‫sera plus visible.
‫Donc quelque chose ne
‫va pas ici, jetons un coup d'œil à l'original juste
‫pour inspecter le code HTML ici.
‫Donc le détail de la carte est
‫celui-ci et donc nous, oui, donc nous avons en fait trois
‫détails de carte ici
‫alors que dans le modèle, nous n'en avons qu'un, d'accord ?
‫Alors allons-y et copiez celui-ci.
‫Donc, dans les détails, vous pouvez réellement copier un élément
‫et il copiera ensuite, comme ça, l'intégralité
‫de l'élément.
‫C'est donc à ça que ça doit ressembler.
‫Et donc ici, il faut dire bio et non quantité
‫par boîte, d'accord ?
‫Celui-là est probablement le suivant.
‫Alors, corrigeons cela
‫rapidement.
‫Et ici, bien
‫sûr, nous ne voulons pas de cela, et alors
‫oui, ça a l'air mieux, fermez-le, redémarrez le
‫serveur et vérifions à nouveau celui-ci.
‫Et maintenant, bam, on y va.
‫Alors maintenant, cela fonctionne et en effet, cela fonctionne exactement de la même manière.
‫Beau.
‫Voilà, c'est vraiment sympa.
‫Allons de l'avant et supprimons,
‫par exemple, les avocats juste pour voir ce qui se passe.
‫Je vais juste faire
‫le contrôle, X pour le couper, le recharger ici, et ça ne
‫change pas et c'est bien sûr parce que rappelez-vous
‫que cela, ces données ne sont
‫en
‫fait lues qu'au début
‫lorsque nous démarrons l'application, d'accord ?
‫Donc, pour que cela prenne effet, nous devons
‫effectivement redémarrer l'application.
‫Bon, donc pas grave.
‫Et maintenant c'est parti, d'accord ?
‫Parce que ce n'est plus dans
‫le fichier JSON qu'il est lu au
‫moment où l'on démarre
‫l'application OK ?
‫Remettez-le
‫ici, sauvez-le, redémarrez, ouvrez ce type, rechargez, et le voici de retour.
‫Cela fonctionne donc maintenant vraiment de manière dynamique en lisant toutes ces
‫données directement à partir du fichier JSON.
‫Donc, celui-ci fonctionne, vérifions également les liens là-bas
‫dans le coin inférieur gauche.
‫Vous voyez que l'ID passe de zéro, un à,
‫et ainsi de suite, mais si je clique
‫ici, eh bien, lorsque nous obtenons
‫la page introuvable.
‫Et c'est parce que notre itinéraire n'est pas encore prêt pour cela.
‫D'accord?
‫Et donc
‫faisons-le dans la vidéo suivante et implémentons la page de détail
‫du produit pour chacun de ces produits.
‫Alors, n'attendez pas et passons à autre chose maintenant.