1
00:00:00,460 --> 00:00:07,010
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.

2
00:00:07,050 --> 00:00:09,280
Nous allons commencer par mettre en place la configuration de base.

3
00:00:09,280 --> 00:00:12,720
Obtenir l'application express et avoir nos premiers itinéraires et modèles.

4
00:00:12,720 --> 00:00:19,890
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.

5
00:00:19,950 --> 00:00:25,370
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.

6
00:00:25,380 --> 00:00:28,370
Donc ce que je vais faire est de travailler dans différents dossiers.

7
00:00:28,470 --> 00:00:33,610
Donc, j'ai un camp yelp répertoire et puis au lieu de camp de Yelp je vais ajouter des versions différentes.

8
00:00:33,720 --> 00:00:34,970
Donc, vous n'avez pas à le faire.

9
00:00:35,040 --> 00:00:40,710
Vous serez en mesure d'ajouter continuellement à une version vous-même si vous voulez suivre le long et faire des versions différentes.

10
00:00:40,710 --> 00:00:52,580
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.

11
00:00:52,960 --> 00:00:55,770
OK maintenant que c'est hors du chemin commençons ici.

12
00:00:55,830 --> 00:01:05,050
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.

13
00:01:05,130 --> 00:01:09,660
Donc, nous allons avoir une page d'accueil essentiellement comme une bienvenue au camp de Yelp.

14
00:01:09,840 --> 00:01:11,750
Voici un petit commentaire sur ce que nous faisons.

15
00:01:11,880 --> 00:01:12,750
Voici un bouton d'inscription.

16
00:01:12,750 --> 00:01:15,760
Voici un lien de contact qui ne fonctionnera pas tout de suite.

17
00:01:15,840 --> 00:01:25,410
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.

18
00:01:25,410 --> 00:01:31,930
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.

19
00:01:32,010 --> 00:01:39,530
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.

20
00:01:39,840 --> 00:01:55,000
À 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.

21
00:01:55,380 --> 00:01:56,460
Alors allons-y.

22
00:01:56,760 --> 00:02:04,110
Je vais commencer par utiliser NPM et ensuite nous allons frapper entrer ici et entrer de nouveau.

23
00:02:04,380 --> 00:02:07,810
Nous appellerons ceci la cam v1.

24
00:02:08,640 --> 00:02:11,990
Je vais faire apt comme mon point d'entrée.

25
00:02:12,480 --> 00:02:13,790
Et voilà.

26
00:02:14,060 --> 00:02:17,670
Auteur et appuyez sur Entrée.

27
00:02:17,700 --> 00:02:18,550
Encore une fois.

28
00:02:18,780 --> 00:02:19,300
D'ACCORD.

29
00:02:19,500 --> 00:02:23,920
Maintenant, exécutez NPM installer Express et oui.

30
00:02:23,940 --> 00:02:25,320
Sauter tableau de bord.

31
00:02:25,410 --> 00:02:33,540
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.

32
00:02:35,820 --> 00:02:43,300
Et si vous regardez le talon du colis Jason vous pouvez voir qu'il a SJS et exprimer.

33
00:02:44,160 --> 00:02:45,590
Alors maintenant, créons l'application.

34
00:02:45,680 --> 00:03:00,700
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.

35
00:03:01,050 --> 00:03:15,570
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.

36
00:03:15,610 --> 00:03:34,510
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é.

37
00:03:35,100 --> 00:03:42,000
Faisons le serveur de camp juste comme ça et sauver.

38
00:03:42,320 --> 00:03:45,510
Et maintenant, revenons en arrière et commençons par ajouter notre page de destination.

39
00:03:45,720 --> 00:03:49,210
Et comme la plupart des applications, la page de destination est sur le bon chemin.

40
00:03:49,440 --> 00:04:18,010
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.

41
00:04:18,300 --> 00:04:18,700
D'ACCORD.

42
00:04:18,720 --> 00:04:21,690
Et nous obtenons la réponse, c'est tout ce que nous recherchons.

43
00:04:21,810 --> 00:04:36,680
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.

44
00:04:36,810 --> 00:04:39,080
Oui, nous y allons.

45
00:04:39,240 --> 00:04:47,580
Et puis nous allons ouvrir que l'utilisation slash atterrissage et nous allons simplement mettre un balisage très simple ici.

46
00:04:47,580 --> 00:04:54,030
Landing Page et puis fait ici nous pouvons mettre un paragraphe.

47
00:04:54,030 --> 00:04:56,340
Bienvenue au camp d'Oprah.

48
00:04:56,340 --> 00:05:00,900
Et bien sûr tout cela sera changé et sera stylé très différemment à la fin du cours.

49
00:05:01,110 --> 00:05:03,750
Mais pour l'instant, nous voulons simplement nous assurer que les choses fonctionnent.

50
00:05:03,810 --> 00:05:05,110
Revenons à l'APT.

51
00:05:05,120 --> 00:05:05,770
Oui.

52
00:05:06,030 --> 00:05:12,880
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.

53
00:05:13,000 --> 00:05:13,560
Oui.

54
00:05:13,770 --> 00:05:23,490
Et pour ce faire, j'ai besoin d'ajouter dans le moteur de vue d'ensemble d'application pour être J.S ..

55
00:05:23,880 --> 00:05:25,100
Et puis nous n'avons pas à écrire.

56
00:05:25,120 --> 00:05:30,630
E.J. Comme ici et nous allons sauver redémarrer le serveur.

57
00:05:30,900 --> 00:05:35,770
James se rafraîchit et nous obtenons notre modèle de page de destination.

58
00:05:36,180 --> 00:05:37,400
Génial.

59
00:05:37,410 --> 00:05:39,880
Ensuite, travaillons sur la route du camping.

60
00:05:40,110 --> 00:05:50,910
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.

61
00:05:51,030 --> 00:05:56,820
Mais nous allons bientôt à la demande et la réponse tout comme ceci économiser.

62
00:05:57,060 --> 00:06:02,760
Et puis nous devons définir la rangée de terrains de camping qui se souviendront sera seulement un tableau temporairement.

63
00:06:02,750 --> 00:06:12,960
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.

64
00:06:12,960 --> 00:06:14,350
Alors ça va ressembler à ça.

65
00:06:14,580 --> 00:06:19,840
Ou nous avons un tableau et chaque élément dans le tableau est un objet.

66
00:06:19,950 --> 00:06:37,520
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.

67
00:06:37,560 --> 00:06:38,190
Voilà.

68
00:06:38,490 --> 00:06:40,560
Et puis nous aurons un tableau de ceux-ci.

69
00:06:40,740 --> 00:06:45,570
Nous pourrions avoir 10 terrains de camping 100 différents à la fin du parcours.

70
00:06:45,690 --> 00:06:59,950
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.

71
00:07:00,600 --> 00:07:02,110
Revenons à Apter Oui.

72
00:07:02,310 --> 00:07:11,900
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.

73
00:07:12,210 --> 00:07:19,660
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.

74
00:07:19,800 --> 00:07:25,590
Et le premier aura le nom et je vais aller avec Semon Creek.

75
00:07:26,000 --> 00:07:30,210
Vous pouvez tout simplement faire quelque chose et aura l'image et je vais revenir et remplir les images.

76
00:07:30,330 --> 00:07:44,580
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.

77
00:07:44,580 --> 00:07:45,110
D'accord.

78
00:07:45,120 --> 00:07:48,960
Ainsi trois campings trois noms totalement fictifs et pour des images.

79
00:07:48,960 --> 00:07:53,540
En fait, je vais utiliser des photos créatives commons juste pour ne pas courir à des problèmes.

80
00:07:53,550 --> 00:07:58,920
Ceux-ci ne vont pas correspondre à aucun des emplacements de camp que j'ai visités mais je vais juste choisir des images ici.

81
00:07:59,070 --> 00:08:01,540
Allons-y avec celui-ci pour commencer.

82
00:08:01,690 --> 00:08:07,550
Donc, je vais copier l'image que vous ou je vais revenir ici et ce sera la chèvre de montagne repos.

83
00:08:07,590 --> 00:08:08,340
Pourquoi pas.

84
00:08:08,630 --> 00:08:13,160
Et puis nous reviendrons et je vais prendre celui-ci ici.

85
00:08:13,590 --> 00:08:17,800
Copiez-le dans RL Et ce sera Salmon Creek.

86
00:08:18,300 --> 00:08:21,630
Et puis nous avons besoin d'un plus et je vais juste prendre celui-ci.

87
00:08:21,690 --> 00:08:26,180
Bien sûr, ce n'est pas vraiment un camping, mais c'est à côté du point ici.

88
00:08:26,340 --> 00:08:31,390
Je vous encourage à utiliser un vrai camping noms dans de vraies images camping site si vous vous inquiétez.

89
00:08:31,440 --> 00:08:42,660
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.

90
00:08:42,750 --> 00:08:55,990
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.

91
00:08:56,190 --> 00:09:05,410
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.

92
00:09:05,420 --> 00:09:15,170
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.

93
00:09:15,170 --> 00:09:18,170
Nous allons simplement nous assurer que le modèle fonctionne correctement.

94
00:09:18,380 --> 00:09:29,370
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.

95
00:09:31,370 --> 00:09:35,000
C'est comme ça et ici nous allons ajouter un H1.

96
00:09:35,030 --> 00:09:52,850
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.

97
00:09:52,850 --> 00:09:54,190
C'est la page des terrains de camping.

98
00:09:54,440 --> 00:09:57,430
Et pendant que nous sommes ici, il serait agréable d'ajouter quelques clignotements.

99
00:09:57,470 --> 00:10:13,490
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.

100
00:10:13,820 --> 00:10:26,610
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.

101
00:10:26,630 --> 00:10:52,690
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.

102
00:10:52,700 --> 00:10:57,220
Donc, souvenez-vous que ce sont les données que nous passons et c'est le nom que nous voulons lui donner.

103
00:10:57,320 --> 00:11:00,950
Nous pourrions appeler cela tout ce que nous voulions, mais il est commun de les voir nommer la même chose.

104
00:11:01,160 --> 00:11:11,770
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.

105
00:11:11,810 --> 00:11:21,800
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.

106
00:11:22,740 --> 00:11:26,840
Donc maintenant, nous allons en boucle et afficher chaque titre ou chaque nom et image.

107
00:11:27,290 --> 00:11:32,020
Je vais donc garder ces crochets ici, mais je vais me débarrasser du signe égal et nous ferons un pour chacun.

108
00:11:32,150 --> 00:11:55,640
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.

109
00:11:56,240 --> 00:11:56,880
D'ACCORD.

110
00:11:57,080 --> 00:12:02,850
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.

111
00:12:03,080 --> 00:12:05,190
Nous allons donc commencer par un allié.

112
00:12:05,270 --> 00:12:05,890
Pourquoi pas.

113
00:12:06,050 --> 00:12:14,700
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.

114
00:12:14,900 --> 00:12:18,190
Et nous allons juste afficher à l'intérieur du terrain de camping Y.

115
00:12:18,340 --> 00:12:22,750
Dot name et enregistrer tout l'espace qui est sorti.

116
00:12:23,120 --> 00:12:28,460
Maintenant, nous allons charger la page et rafraîchir ceci et nous obtenons trois noms de terrain de camping.

117
00:12:28,460 --> 00:12:31,880
La dernière chose que je veux faire est de s'assurer que nous affichons les images.

118
00:12:31,880 --> 00:12:40,290
Donc nous reviendrons ici et plutôt qu'un allié, changeons cela pour que nous ayons une étiquette div pour chaque terrain de camping.

119
00:12:40,400 --> 00:12:44,390
Et dans la balise div affiche un h.

120
00:12:44,390 --> 00:12:52,530
Faisons un 4 avec le nom du terrain de camping et puis en dessous, il mettra une balise d'image.

121
00:12:53,450 --> 00:13:09,160
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.

122
00:13:09,200 --> 00:13:11,030
Nous avons besoin de ces Ejay comme crochets.

123
00:13:11,330 --> 00:13:19,250
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.

124
00:13:19,700 --> 00:13:26,820
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.

125
00:13:26,900 --> 00:13:28,350
Il est juste ajouté comme texte.

126
00:13:28,430 --> 00:13:33,800
Donc, il ressemblerait à ce HTP colon slash tout ce que nous avons besoin de citations autour de lui.

127
00:13:33,980 --> 00:13:39,080
Nous devons donc nous assurer que nous ajoutons les tags Ejaz à l'intérieur des guillemets.

128
00:13:39,410 --> 00:13:39,770
D'ACCORD.

129
00:13:39,800 --> 00:13:45,800
Alors, ce que nous voulons faire, c'est l'image de camping, assurez-vous que nous utilisons l'image.

130
00:13:45,800 --> 00:13:46,540
Voilà.

131
00:13:46,760 --> 00:13:54,670
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é.

132
00:13:54,980 --> 00:14:01,650
Revenons en arrière et rafraîchissons la page et nous obtenons les trois terrains de camping avec les trois images.

133
00:14:01,670 --> 00:14:02,300
Très bien.

134
00:14:02,300 --> 00:14:07,270
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.

135
00:14:07,280 --> 00:14:10,060
Revenons en arrière pour nous assurer que nous avons fait tout ce que nous nous proposons de faire.

136
00:14:10,340 --> 00:14:15,740
Donc, à la page de destination, oui, nous l'avons fait à la page du camping qui énumère tout le terrain de camping.

137
00:14:15,860 --> 00:14:19,390
Nous avons également fait que chaque terrain de camping a un nom et une image.