Bien revenir dans cette vidéo, nous allons commencer sur la demande de camp de Yelp que nous allons travailler pour le reste de ce cours.
Nous allons commencer par mettre en place la configuration de base.
Obtenir l'application express et avoir nos premiers itinéraires et modèles.
Mais avant de parler de cela, je veux simplement expliquer le workflow ici et comment cela fonctionnera, car nous ajoutons continuellement des fonctionnalités différentes.
Je veux que vous soyez en mesure de voir le code à n'importe quel moment, je ne veux pas que vous venez de voir la solution finale.
Donc ce que je vais faire est de travailler dans différents dossiers.
Donc, j'ai un camp yelp répertoire et puis au lieu de camp de Yelp je vais ajouter des versions différentes.
Donc, vous n'avez pas à le faire.
Vous serez en mesure d'ajouter continuellement à une version vous-même si vous voulez suivre le long et faire des versions différentes.
Je vais toujours indiquer quelle version nous sommes sur mais le but est que si vous voulez qu'il regarde en arrière à ce que j'ai ajouté entre la version 2 et la version 3 Vous pourriez ouvrir les répertoires de la version 2 et de la version 3 et les comparer.
OK maintenant que c'est hors du chemin commençons ici.
Ce que nous allons faire est de configurer l'application de base va installer Express et chaque Oui, nous allons obtenir le répertoire vues et puis nous allons ajouter deux itinéraires différents.
Donc, nous allons avoir une page d'accueil essentiellement comme une bienvenue au camp de Yelp.
Voici un petit commentaire sur ce que nous faisons.
Voici un bouton d'inscription.
Voici un lien de contact qui ne fonctionnera pas tout de suite.
Et puis de là nous allons créer la page de terrains de camping qui sera la page principale de notre application qui énumérera tous les terrains de camping dans notre base de données et nous n'avons pas encore de base de données.
Donc, ce sera juste un tableau de terrain de camping comme nous l'avons fait dans la dernière vidéo avec les amis où nous avons eu un éventail d'amis.
Très bientôt, nous allons migrer vers une nouvelle base de données pour l'instant un terrain de camping va seulement avoir deux informations différentes.
À la fin du parcours, les terrains de camping auront 10 à 15 pièces différentes, mais pour l'instant, c'est juste un nom comme le ruisseau du saumon ou le point de Dewey ou quel que soit le nom de notre terrain de camping et nous allons avoir une image que nous pouvons afficher et L'image sera juste aur l.
Alors allons-y.
Je vais commencer par utiliser NPM et ensuite nous allons frapper entrer ici et entrer de nouveau.
Nous appellerons ceci la cam v1.
Je vais faire apt comme mon point d'entrée.
Et voilà.
Auteur et appuyez sur Entrée.
Encore une fois.
D'ACCORD.
Maintenant, exécutez NPM installer Express et oui.
Sauter tableau de bord.
Je ne vous ai pas encore montré cela, mais c'est un moyen beaucoup plus facile si vous voulez installer plusieurs paquets à la fois que vous venez de les séparer par un espace.
Et si vous regardez le talon du colis Jason vous pouvez voir qu'il a SJS et exprimer.
Alors maintenant, créons l'application.
Oui et ouvrir que vers le haut et l'intérieur d'ici ajoutent notre importation express de base qui vous devriez être assez à l'aise avec exigent maintenant exprès.
Et puis la variable app est égale à la fonction expresse en cours d'exécution, puis sautera vers le bas et faire l'opt out écouter que vous devriez être assez familier avec le processus maintenant.
Ian processus VI port que EMV IP et le rappel et et ici je vais faire un journal consulaire qui dit camp de Yelp est démarré.
Faisons le serveur de camp juste comme ça et sauver.
Et maintenant, revenons en arrière et commençons par ajouter notre page de destination.
Et comme la plupart des applications, la page de destination est sur le bon chemin.
Donc, nous allons simplement ajouter une application qui obtient flash et nous allons commencer avec un envoi redstart pour s'assurer que les choses fonctionnent bien et nous allons simplement envoyer ce sera la page de destination bientôt et enregistrer et puis nous allons commencer Le serveur assurez-vous que nous avons le camp serveur avait commencé et puis nous revenons en arrière et juste rafraîchir sur notre itinéraire.
D'ACCORD.
Et nous obtenons la réponse, c'est tout ce que nous recherchons.
Maintenant, allons de l'avant et mettre en place nos modèles de sorte que nous avons besoin de faire un annuaire des nouvelles qui font des vues répertoire et nous allons faire un modèle appelé atterrissage que chacun de nous à l'intérieur de l'atterrissage répertoire vues.
Oui, nous y allons.
Et puis nous allons ouvrir que l'utilisation slash atterrissage et nous allons simplement mettre un balisage très simple ici.
Landing Page et puis fait ici nous pouvons mettre un paragraphe.
Bienvenue au camp d'Oprah.
Et bien sûr tout cela sera changé et sera stylé très différemment à la fin du cours.
Mais pour l'instant, nous voulons simplement nous assurer que les choses fonctionnent.
Revenons à l'APT.
Oui.
Et la première chose que nous allons faire est de changer cela afin que ce soit un repos de rendre l'atterrissage et nous allons laisser de côté le point.
Oui.
Et pour ce faire, j'ai besoin d'ajouter dans le moteur de vue d'ensemble d'application pour être J.S ..
Et puis nous n'avons pas à écrire.
E.J. Comme ici et nous allons sauver redémarrer le serveur.
James se rafraîchit et nous obtenons notre modèle de page de destination.
Génial.
Ensuite, travaillons sur la route du camping.
Donc, nous allons avoir une application à obtenir et le auroral devrait être slash terrains de camping et cela devrait montrer tous les terrains de camping que nous avons que maintenant nous n'avons rien.
Mais nous allons bientôt à la demande et la réponse tout comme ceci économiser.
Et puis nous devons définir la rangée de terrains de camping qui se souviendront sera seulement un tableau temporairement.
Le prochain grand changement que vous allez faire est d'ajouter une base de données et d'avoir nos terrains de camping sauvegardés dans la base de données pour l'instant c'est un tableau et chaque terrain de camping a un nom et une image.
Alors ça va ressembler à ça.
Ou nous avons un tableau et chaque élément dans le tableau est un objet.
Et chacun a un nom et alors disons juste le nom est Salmon Creek quelque part je suis allé camper récemment et alors l'image et alors ce sera une URL d'une image comme HTP quelque soit cette image de point de GWW dotcom.
Voilà.
Et puis nous aurons un tableau de ceux-ci.
Nous pourrions avoir 10 terrains de camping 100 différents à la fin du parcours.
Et chacun d'entre eux a un nom et une image et puis finalement ils auront des choses comme Latitude et Longitude ville et l'état d'adresse capacité saisonnalité tous ces attributs différents, mais nous commençons simple nom et image.
Revenons à Apter Oui.
Et ce que nous allons faire est de trouver ce tableau et nous pouvons commencer par le faire ici ici jusqu'à présent, nous allons appeler campgrounds, il est égal à un tableau.
Et puis à l'intérieur du tableau et le format juste un peu mieux que nous allons à l'intérieur du tableau, nous allons avoir quelques objets starter.
Et le premier aura le nom et je vais aller avec Semon Creek.
Vous pouvez tout simplement faire quelque chose et aura l'image et je vais revenir et remplir les images.
Et puis la prochaine fera ceci composent un autre site que nous l'appellerons à la colline de Granites et puis une patrouille plus appel la poitrine de chèvre de montagne.
D'accord.
Ainsi trois campings trois noms totalement fictifs et pour des images.
En fait, je vais utiliser des photos créatives commons juste pour ne pas courir à des problèmes.
Ceux-ci ne vont pas correspondre à aucun des emplacements de camp que j'ai visités mais je vais juste choisir des images ici.
Allons-y avec celui-ci pour commencer.
Donc, je vais copier l'image que vous ou je vais revenir ici et ce sera la chèvre de montagne repos.
Pourquoi pas.
Et puis nous reviendrons et je vais prendre celui-ci ici.
Copiez-le dans RL Et ce sera Salmon Creek.
Et puis nous avons besoin d'un plus et je vais juste prendre celui-ci.
Bien sûr, ce n'est pas vraiment un camping, mais c'est à côté du point ici.
Je vous encourage à utiliser un vrai camping noms dans de vraies images camping site si vous vous inquiétez.
Si ce n'est pas si vous détestez camping qui est quelque chose que j'ai pensé que je ne s'inquiètent que cela pourrait aliéner certaines personnes, mais si vous ne détestez camping qui je suppose est compréhensible, vous pourriez facilement changer cette application à autre chose.
Une fois que nous terminer, vous pourriez le faire dans une application d'événement application d'une partie un site d'examen restaurant quelque chose comme ça, mais je vous recommande d'attendre jusqu'à la fin du cours pour le faire afin que vous ne vous confondre avec la dénomination et différentes variables qui nous avons.
Donc terrain de camping Aujourd'hui Pour les terrains de camping maintenant faux et sauver vous assurer que nous ajoutons ou des virgules entre les différents éléments dans le tableau.
Là-bas nous allons et nous allons commencer par rendre un modèle redstart rendre et il va être appelé camping et nous n'allons pas passer les données à travers encore.
Nous allons simplement nous assurer que le modèle fonctionne correctement.
Maintenant, nous devons arrêter le serveur de toucher un nouveau fichier vues camp de terrain coupé ups que E.J. Et nous allons ouvrir cela.
C'est comme ça et ici nous allons ajouter un H1.
Il s'agit de la page du camping et d'enregistrer et nous allons nous assurer que nous voyons que la page lorsque nous démarrons le serveur jusqu'à nous pouvons rafraîchir et allons à slash terrains de camping et nous obtenons.
C'est la page des terrains de camping.
Et pendant que nous sommes ici, il serait agréable d'ajouter quelques clignotements.
Donc, je vais ajouter un lien vers la page de destination qui dit Voir tous les terrains de camping et de le faire et ont besoin d'aller au modèle de prêt et juste au bas sur une balise ancrée à l'attribut ref et l'ATF doit être Slash terrain de camping.
Et je vais juste dire que vous tous les terrains de camping et sauver redémarrer la vue de rafraîchissement du serveur des terrains de camping maintenant nous emmène à la page camping.
D'accord, maintenant, allons nous assurer que nous passons les données à travers notre terrain de camping dans le reste de l'appel de rendu et puis nous pouvons boucler tout cela et afficher chaque image et chaque nom dans notre modèle va commencer par nous mettre à jour Et ajoutant dans ce deuxième argument ici qui est un objet de toutes les données que nous voulons passer et nous allons passer dans des terrains de camping sous le nom de terrains de camping.
Donc, souvenez-vous que ce sont les données que nous passons et c'est le nom que nous voulons lui donner.
Nous pourrions appeler cela tout ce que nous voulions, mais il est commun de les voir nommer la même chose.
Donc, nous allons sauver maintenant et revenir à notre modèle et nous allons commencer par faire juste ce terrain de camping et si nous voyons quelque chose, il ressemblera à objet objet.
Si nous l'avons fait correctement alors nous savons que nous avons passé les données à travers redémarrer le serveur ou rafraîchir Rigaud un tableau avec trois objets à l'intérieur.
Donc maintenant, nous allons en boucle et afficher chaque titre ou chaque nom et image.
Je vais donc garder ces crochets ici, mais je vais me débarrasser du signe égal et nous ferons un pour chacun.
Donc, ce sera un terrain de camping pour chacun et ensuite passer dans cette fonction anonyme le rappel et nous allons appeler le terrain de camping et nous allons frapper entrer ici et puis nous devons revenir en arrière et assurez-vous que nous ajoutons dans la fermeture correcte Ejay nous Entre parenthèses, puis vers le bas ici, nous devons inclure cela avec chacun d'entre nous aussi.
D'ACCORD.
Donc, cela devrait boucler par les terrains de camping et puis ce que nous voulons faire pour chacun d'eux, nous allons juste afficher le nom d'abord.
Nous allons donc commencer par un allié.
Pourquoi pas.
Et nous ferons juste notre E.J. S avec le signe égal et tous faire un peu d'espace afin qu'il soit un peu plus facile de voir ce qui se passe.
Et nous allons juste afficher à l'intérieur du terrain de camping Y.
Dot name et enregistrer tout l'espace qui est sorti.
Maintenant, nous allons charger la page et rafraîchir ceci et nous obtenons trois noms de terrain de camping.
La dernière chose que je veux faire est de s'assurer que nous affichons les images.
Donc nous reviendrons ici et plutôt qu'un allié, changeons cela pour que nous ayons une étiquette div pour chaque terrain de camping.
Et dans la balise div affiche un h.
Faisons un 4 avec le nom du terrain de camping et puis en dessous, il mettra une balise d'image.
Et ce que nous devons faire est de donner à l'image une source et à l'intérieur des citations plutôt que d'un u r l comme ce que vous êtes ELAS vont mettre l'image du terrain de camping et nous ne pouvons pas simplement faire du camping cette image.
Nous avons besoin de ces Ejay comme crochets.
Donc, nous devons le faire dans les citations qui est un peu déroutant pour certains de mes étudiants d'abord car le camping cette image est déjà une chaîne.
Et vous pouvez voir ici, mais n'oubliez pas que quand nous lorsque nous prenons cela et l'ajouter dans le modèle de ces citations ne viennent pas avec elle.
Il est juste ajouté comme texte.
Donc, il ressemblerait à ce HTP colon slash tout ce que nous avons besoin de citations autour de lui.
Nous devons donc nous assurer que nous ajoutons les tags Ejaz à l'intérieur des guillemets.
D'ACCORD.
Alors, ce que nous voulons faire, c'est l'image de camping, assurez-vous que nous utilisons l'image.
Voilà.
Je suis A-G et nous avons que orthographié ici exactement la même manière et je vais arrêter le serveur redémarré.
Revenons en arrière et rafraîchissons la page et nous obtenons les trois terrains de camping avec les trois images.
Très bien.
Donc, c'est tout ce que je veux faire dans cette vidéo a été d'obtenir la structure de base mis en place de nos deux routes.
Revenons en arrière pour nous assurer que nous avons fait tout ce que nous nous proposons de faire.
Donc, à la page de destination, oui, nous l'avons fait à la page du camping qui énumère tout le terrain de camping.
Nous avons également fait que chaque terrain de camping a un nom et une image.