‫Narrateur : Ensuite, vous allez
‫apprendre à intégrer une jolie carte qui affiche tous les
‫emplacements d'une certaine visite dans notre site Web à l'aide de Mapbox.
‫Mais avant de faire
‫cela, nous devons d'abord corriger un petit bug que je viens de trouver.
‫Donc, en ce moment, nous sommes dans la tournée des
‫camping-cars du parc, mais vous voyez qu'ici, il est
‫écrit "The Forest Hiker", d'accord ? Et donc, c'est évidemment
‫faux et donc, c'est
‫parce
‫qu'ici dans notre gestionnaire de tournée get, nous
‫passons toujours par ce titre, donc "The
‫Forest Hiker Tour".
‫Ce qui, bien sûr, n'est pas correct, alors corrigeons cela.
‫D'accord, et alors disons ici
‫la tournée. nom puis
‫tournée.
‫Mettons ça en majuscule en fait.
‫Et donc, maintenant nous devrions voir la tournée "The
‫park camper" et ouais la voici.
‫Et maintenant, à propos de cette carte
‫qui va être affichée ici dans
‫cette zone vide, nous allons utiliser une très belle bibliothèque appelée
‫"Mapbox" et cette bibliothèque fonctionne en fait dans le front-end.
‫Et donc, dans cette conférence, nous
‫allons en fait écrire un peu de
‫code frontal, et pas tellement sur le back-end.
‫Mais cela reste très important
‫car vous allez maintenant apprendre à écrire du
‫JavaScript pour le côté client, puis à l'intégrer dans nos modèles.
‫D'accord?
‫Faisons-le et
‫rappelons-nous d'abord que toutes les données, donc tous les
‫actifs disponibles sur le client, se trouvent
‫ici dans ce dossier public.
‫Ainsi, par exemple, notre fichier CSS, nos images et nous
‫avons également un dossier ici pour JavaScript.
‫Et actuellement, c'est vide et créons
‫donc maintenant un nouveau fichier ici appelé
‫Mapbox.
‫js d'accord? Et donc il s'agit essentiellement
‫d'un fichier JavaScript que nous allons intégrer dans
‫notre HTML et qui sera ensuite exécuté côté client.
‫Très bien? Donc, tout comme le JavaScript
‫normal que vous avez écrit toute votre vie (Rires) N'est-ce pas ?
‫Mais pour l'instant, faisons simplement une console simple. connectez-vous ici avant
‫de le connecter réellement à notre back-end.
‫Alors disons simplement console. log bonjour du côté client.
‫Très
‫bien, et maintenant intégrons-le dans nos modèles.
‫Maintenant, il peut sembler que le meilleur
‫endroit pour faire cette intégration est ici dans notre modèle de base, n'est-ce pas ?
‫Mais en fait, nous voulons seulement inclure le script Mapbox sur la page
‫de la visite, n'est-ce pas ?
‫Alors, comment pourrions-nous faire cela?
‫Et la solution pour cela est encore une fois
‫d'étendre un bloc ici dans notre modèle de base, donc je
‫vais créer un nouveau bloc ici que
‫nous allons ensuite étendre à partir de la visite. D'accord?
‫Et en fait, ce bloc sera juste ici,
‫et je l'appelle "tête"
‫et tout ce contenu sera en fait là-dedans.
‫Maintenant, vous vous demandez peut-être pourquoi nous faisons cela,
‫car lorsque nous étendons
‫le bloc, le contenu à l'intérieur disparaît.
‫C'est donc ce qui s'est passé ici, n'est-ce pas ?
‫Mais en fait, il existe une autre façon d'étendre les blocs,
‫qui ajoutera alors simplement le nouveau contenu à la fin
‫ou au début du bloc.
‫Très bien? Voyons donc comment nous pouvons le faire.
‫Et donc juste au début de notre modèle de
‫visite, disons
‫maintenant : bloc
‫tête, et en fait nous disons bloc ajouter tête, d'accord ?
‫Et donc, tout ce que nous écrirons dans ce
‫bloc ici sera alors ajouté au contenu
‫qui est déjà dans ce bloc.
‫D'accord? Et nous pourrions également
‫utiliser "prepend" et ensuite il serait ajouté au début du bloc, d'accord ?
‫Et maintenant, tout ce que nous allons faire ici est d'ajouter
‫un nouveau script.
‫Donc en utilisant une balise de script
‫puis en spécifiant l'attribut source, et
‫c'est donc pour l'instant "js/mapbox. js" d'accord ?
‫Encore une fois, ce modèle ici étend déjà notre modèle
‫de base, et
‫donc avec cela ici, nous pouvons fondamentalement injecter cette
‫ligne de code, dans le
‫bloc d'en-tête qui est déjà dans notre modèle de base.
‫Et donc, nous l'ajoutons, et il apparaîtra alors ici à
‫la fin de ce bloc d'en-tête, donc juste ici.
‫Et en fait, essayons cela maintenant.
‫Donc, quand je
‫recharge, nous devrions maintenant recevoir ce message dans
‫notre console et en effet, "Bonjour du côté
‫client"
‫Super. Ensuite, nous voulons réellement accéder aux données de
‫localisation de la visite
‫que nous essayons actuellement d'afficher, ici
‫même dans le fichier JavaScript.
‫Alors comment vas-tu faire ça ?
‫Eh bien, alors nous pouvons faire une requête Ajax, donc essentiellement
‫un appel à notre API et obtenir les données
‫à partir de là.
‫Mais ce n'est pas vraiment nécessaire dans ce cas.
‫Et donc, laissez-moi vous montrer une très belle astuce.
‫Donc ici, dans notre modèle de visite,
‫nous avons déjà toutes les données sur la visite elle-même
‫et maintenant nous pouvons simplement mettre
‫ces données dans notre code HTML afin que
‫JavaScript puisse ensuite les lire à partir de là, d'accord ?
‫Donc, fondamentalement, nous allons exposer les données de localisation,
‫ici sous forme de chaîne dans le code HTML
‫et notre JavaScript les récupérera ensuite à
‫partir de là sans avoir à le faire, comme n'importe quel appel d'API séparément.
‫Alors, revenons ici à notre classe
‫de cartes ou à notre section, d'accord ?
‫Donc cette section ici, et elle a déjà un élément
‫Diff avec une
‫classe de carte, et vous verrez pourquoi c'est un ID un
‫peu plus tard, d'accord ? Mais pour l'instant, je veux réellement
‫spécifier un attribut de données ici, d'accord ?
‫Il existe donc une astuce très intéressante en
‫JavaScript où nous pouvons spécifier un attribut de données en HTML,
‫puis lire cet attribut en utilisant JavaScript
‫de manière très simple.
‫Et c'est comme ça que
‫ça marche, donc on peut dire "données/" et
‫puis ici comme on veut l'appeler,
‫dans ce cas on dit
‫"lieux" d'accord ? Et puis nous avons mis cela à notre tournée. Emplacements.
‫Maintenant, avant de faire
‫cela, nous devons transformer ce tableau en une chaîne, n'est-ce pas ?
‫Alors, jetons un coup d'œil à cela rapidement.
‫Donc, nos emplacements sont tout ce tableau avec
‫ces objets là-dedans.
‫Mais en HTML, bien sûr, nous ne pouvons pas avoir de
‫tableaux ou d'objets ou quelque chose comme ça, et donc
‫ce que nous devons
‫faire est de convertir tout cela en une chaîne.
‫Et c'est heureusement assez facile, tout
‫ce que nous avons à faire est "JSON. stringifier " d'accord ?
‫Et puis voici la tournée. emplacement, ou en fait ce
‫sont
‫des emplacements. Très bien?
‫Et si nous
‫lui donnons maintenant une sauvegarde, ouvrons-la ici et inspectons cette carte ici, et
‫maintenant vous voyez les emplacements des données, et
‫nous avons cette énorme chaîne ici,
‫qui contient essentiellement toutes nos données de localisation.
‫Très bien, et maintenant,
‫dans notre JavaScript, nous pouvons l'obtenir
‫très facilement.
‫Ainsi, les emplacements sont au
‫document. getElementById puis
‫map, et maintenant cela fait partie de l'astuce, car
‫tout ce que nous mettons dans un attribut de données comme celui-ci, sera
‫ensuite stocké dans la propriété dataset, et
‫dans ce cas dataset. emplacements,
‫car cela s'appelle data/ ou data-location.
‫D'accord? Donc juste comme
‫ça, ensemble de données. emplacements, d'accord?
‫Et maintenant, nous obtenons ici
‫toutes ces erreurs
‫provenant d'ESlint, et c'est parce que ESlint est configuré
‫pour Node. js et non
‫pour JavaScript , et donc
‫ce que nous pouvons faire ici est de désactiver
‫essentiellement ESlint pour tout ce fichier, jusqu'à ce que nous disions essentiellement
‫avec un commentaire au début ici, ESlint désactivé et donc oui, il comprendra
‫alors cela et le tournera complètement désactivé pour tout ce fichier, d'accord ?
‫Ce sont donc les données d'emplacement
‫ici que nous venons de mettre dans
‫notre HTML, mais rappelez-vous qu'il s'agit
‫d'une chaîne et que nous devons donc la reconvertir en JSON, et
‫donc en JSON. analyser et
‫puis tout ce qui est ici.
‫Très bien, et maintenant jetons un coup d'œil à cela juste
‫pour voir si tout fonctionne correctement.
‫Rechargeons, et
‫maintenant quelque chose s'est mal passé ici dans notre fichier Mapbox,
‫eh bien cela semble également correct
‫en fait, alors testons simplement si cela s'appelle réellement map ici et en
‫effet c'est un ID avec map, et donc
‫je pense que le problème est probablement qu'au moment
‫où nous avons appelé ou obtenu
‫l'élément par ID, donc ceci ici, donc
‫probablement à ce moment-là,
‫le DOM n'est en fait pas déjà
‫chargé, d'accord ? Et c'est parce
‫que nous avons notre script intégré juste au début du fichier, donc ce
‫script ici est juste
‫dans la tête, alors qu'il devrait vraiment être
‫au bas de la page. D'accord?
‫Alors laissez-moi copier celui-ci ici et
‫le mettre manuellement dans la base,
‫donc je vais le copier et le commenter, mais
‫ne vous inquiétez pas, nous utiliserons toujours cette technique d'ajout
‫de bloc ici un peu plus tard dans la vidéo, car il
‫y a des trucs provenant de Mapbox que nous
‫devons encore mettre dans la
‫tête, d'accord ? Mais pour l'instant, plaçons
‫ce script juste en bas de la page.
‫D'accord?
‫Cela (Rires) bien
‫sûr, je voulais juste aller dans un
‫autre fichier, afin que je puisse le sauvegarder pour que
‫le serveur se recharge réellement car
‫ces fichiers pug, comme vous
‫l'avez probablement remarqué ici, ne déclenchent pas un
‫redémarrage de notre serveur , très bien?
‫Quoi qu'il en soit, j'espère que maintenant ça va
‫marcher et effectivement, ça marche.
‫Nous avons donc un tableau
‫ici, et en effet ce sont les quatre endroits de notre tournée.
‫Bon, maintenant nous avons tout bien intégré, et tout
‫est prêt à intégrer Mapbox et à créer
‫notre propre carte ici.
‫Mais afin de ne pas créer une vidéo trop longue,
‫je le ferai dans la prochaine.