1
00:00:00,460 --> 00:00:05,250
さて、このビデオでは、Yelpキャンプのアプリケーションから始める予定です。これについては、このコースの残りの部分で取り上げます。

2
00:00:05,250 --> 00:00:07,010
 

3
00:00:07,050 --> 00:00:09,280
基本的な設定を始めることから始めます。

4
00:00:09,280 --> 00:00:12,720
明示的なアプリケーションを取得し、我々の最初のいくつかのルートとテンプレートを持っている。

5
00:00:12,720 --> 00:00:17,490
しかし、私たちが話をする前に、ここでワークフローを説明したいと思います。

6
00:00:17,490 --> 00:00:19,890
 

7
00:00:19,950 --> 00:00:25,080
どの時点でもコードを見ることができるようにしておきたいと思います。

8
00:00:25,380 --> 00:00:28,370
だから、私は別のフォルダで作業するつもりです。

9
00:00:28,470 --> 00:00:33,610
だから私はyelpのキャンプディレクトリを持っているし、Yelpキャンプの代わりに私は別のバージョンを追加するつもりです。

10
00:00:33,720 --> 00:00:34,970
あなたはこれをする必要はありません。

11
00:00:35,040 --> 00:00:39,780
続行して別のバージョンを作成する場合は、1つのバージョンだけを継続的に追加することができます。

12
00:00:39,780 --> 00:00:40,710
 

13
00:00:40,710 --> 00:00:45,570
 

14
00:00:45,570 --> 00:00:51,570
私はいつもバージョンを指摘しますが、目標は、バージョン2とバージョン3の間で追加したものを振り返りたい場合、バージョン2とバージョン3のディレクトリを開き、それらを比較することができます。

15
00:00:51,570 --> 00:00:52,580
 

16
00:00:52,960 --> 00:00:55,770
それでは、ここから始めましょう。

17
00:00:55,830 --> 00:01:01,950
私たちがやろうとしていることは、基本的なアプリケーションがExpressとそれぞれをインストールするように設定されています。私たちはviewsディレクトリを取得し、次に2つの異なるルートを追加します。

18
00:01:01,950 --> 00:01:05,050
 

19
00:01:05,130 --> 00:01:09,660
だから、私たちは基本的にYelpキャンプへの歓迎のようなホームページを持っているつもりです。

20
00:01:09,840 --> 00:01:11,750
ここでは、私たちが何をしているかについての少しの宣伝があります。

21
00:01:11,880 --> 00:01:12,750
ここにサインアップボタンがあります。

22
00:01:12,750 --> 00:01:15,760
実際にはまだ動作しない連絡先リンクがあります。

23
00:01:15,840 --> 00:01:21,060
そしてそこから、私たちのデータベースのキャンプ場をすべて一覧表示するアプリケーションのメインページとなるキャンプ場ページを作成します。まだデータベースはありません。

24
00:01:21,270 --> 00:01:25,410
 

25
00:01:25,410 --> 00:01:30,600
だから、ちょうど我々が友人のアレイを持っていた友人と最後のビデオでやったように、キャンプ場の配列になるだろう。

26
00:01:30,660 --> 00:01:31,930
 

27
00:01:32,010 --> 00:01:38,100
すぐに私たちは新しいデータベースに移行します。現在、キャンプ場には2つの異なる情報があります。

28
00:01:38,100 --> 00:01:39,530
 

29
00:01:39,840 --> 00:01:44,880
コースの終わりまでにキャンプグラウンドには10〜15の異なる部分がありますが、今のところサケ・クリークやデューイ・ポイントのような名前だけでなく、私たちのキャンプ場の名前が何であれ、それを表示したり、イメージはちょうどaur

30
00:01:45,180 --> 00:01:51,120
lになります。

31
00:01:51,120 --> 00:01:55,000
 

32
00:01:55,380 --> 00:01:56,460
だから行きましょう。

33
00:01:56,760 --> 00:02:04,110
まずNPMを実行してから、ここに入力して再度入力します。

34
00:02:04,380 --> 00:02:07,810
これをカムv1と呼ぶことにします。

35
00:02:08,640 --> 00:02:11,990
私はエントリーポイントのようなものを作ります。

36
00:02:12,480 --> 00:02:13,790
そしてそこに行く。

37
00:02:14,060 --> 00:02:17,670
著者を作成してEnterキーを押します。

38
00:02:17,700 --> 00:02:18,550
もう1回。

39
00:02:18,780 --> 00:02:19,300
OK。

40
00:02:19,500 --> 00:02:23,920
次に、NPMのインストールExpressとyesを実行しましょう。

41
00:02:23,940 --> 00:02:25,320
ダッシュダッシュを保存します。

42
00:02:25,410 --> 00:02:29,580
私はあなたにこれをまだ示していませんが、一度に複数のパッケージをインストールしたい場合は、スペースで区切ります。

43
00:02:29,580 --> 00:02:33,540
 

44
00:02:35,820 --> 00:02:43,300
パッケージスタブJasonを見ると、SJSがあることがわかります。

45
00:02:44,160 --> 00:02:45,590
それでは、アプリケーションを作成しましょう。

46
00:02:45,680 --> 00:02:57,840
はい、それを開いてここには、エクスプレスが必要な現時点ではかなり快適なはずの基本的なエクスプレスインポートが追加されています。

47
00:02:57,840 --> 00:03:00,700
 

48
00:03:01,050 --> 00:03:10,700
そして、app変数は、実行されているexpress関数と等しくなります。そして、ジャンプしてオプトアウトします。これもあなたが今プロセスに精通している必要があります。

49
00:03:10,700 --> 00:03:15,570
 

50
00:03:15,610 --> 00:03:22,980
Ian

51
00:03:25,680 --> 00:03:34,510
VIポートはEMV IPとコールバックを処理し、ここでYelpキャンプが開始されたことを示す領事ログを作成します。

52
00:03:35,100 --> 00:03:42,000
ちょうどそのようなキャンプサーバーを作って保存しましょう。

53
00:03:42,320 --> 00:03:45,510
さあ、ここに戻り、ランディングページを追加してみましょう。

54
00:03:45,720 --> 00:03:49,210
ほとんどのアプリケーションと同様に、ランディングページは正しいパスにあります。

55
00:03:49,440 --> 00:03:52,770
 

56
00:03:58,770 --> 00:04:04,410
だから、フラッシュを取得するアプリを追加するだけで、赤いスタート送信から始まり、問題が解決するかどうかを確認します。すぐにリンク先ページに送信して保存してから、開始しますサーバーはキャンプサーバーが起動したことを確認してから、戻ってルートパスを更新します。

57
00:04:04,410 --> 00:04:13,080
 

58
00:04:13,080 --> 00:04:18,010
 

59
00:04:18,300 --> 00:04:18,700
OK。

60
00:04:18,720 --> 00:04:21,690
そして私たちは私たちが探しているすべての応答を得ます。

61
00:04:21,810 --> 00:04:28,230
 

62
00:04:28,830 --> 00:04:36,680
今度はテンプレートを設定して、ディレクトリ・ビューを作成するニュース・ディレクトリを作成し、viewsディレクトリ内の各ユーザーが着陸する着陸テンプレートを作成します。

63
00:04:36,810 --> 00:04:39,080
はい、そこに行きます。

64
00:04:39,240 --> 00:04:47,580
そして、それを使ってスラッシュ・ランディングを開きます。ここには非常に単純なマークアップを入れます。

65
00:04:47,580 --> 00:04:54,030
ランディングページをクリックしてここで行うと、段落を置くことができます。

66
00:04:54,030 --> 00:04:56,340
Oprahキャンプへようこそ。

67
00:04:56,340 --> 00:05:00,720
もちろん、これはすべて変更され、コース終了時には非常に異なったスタイルになります。

68
00:05:01,110 --> 00:05:03,750
しかし、今のところ私たちは物事が働いていることを確認したいだけです。

69
00:05:03,810 --> 00:05:05,110
次にAPTに戻ってみましょう。

70
00:05:05,120 --> 00:05:05,770
はい。

71
00:05:06,030 --> 00:05:12,470
そして、最初に行うのは、これを変更して残りのレンダリングをレンダリングすることです。点を外します。

72
00:05:12,480 --> 00:05:12,880
 

73
00:05:13,000 --> 00:05:13,560
はい。

74
00:05:13,770 --> 00:05:23,490
そしてそれをするために、私はJにするためにアプリセットビューエンジンを追加する必要があります S. そして、私たちは書く必要はありません。

75
00:05:23,880 --> 00:05:25,100
E. J. ここではサーバーの再起動を保存します。

76
00:05:25,120 --> 00:05:30,630
ジェームズ・リフレッシュとランディング・ページ・テンプレートを取得しました。

77
00:05:30,900 --> 00:05:35,770
すばらしいです。

78
00:05:36,180 --> 00:05:37,400
次に、キャンプ場のルートを作ろう。

79
00:05:37,410 --> 00:05:39,880
 

80
00:05:40,110 --> 00:05:46,470
だから我々は取得するアプリを持っているし、オーロラはキャンプ場をスラッシュする必要があり、これは私たちが今持っているすべてのキャンプ場を示す必要があります我々は何も持っていない。

81
00:05:46,470 --> 00:05:50,910
しかし、私たちはまもなくこれを保存するようにリクエストして応答します。

82
00:05:51,030 --> 00:05:56,820
そして、覚えているキャンプグラウンドアレイを定義する必要があります。

83
00:05:57,060 --> 00:06:02,760
次の大きな変化は、データベースを追加し、私たちのキャンプ場をデータベースに保存することです。今はアレイであり、各キャンプ場には名前とイメージがあります。

84
00:06:02,750 --> 00:06:07,500
 

85
00:06:07,500 --> 00:06:12,960
だから、このように見えるだろう。

86
00:06:12,960 --> 00:06:14,350
または、配列があり、配列の各項目がオブジェクトです。

87
00:06:14,580 --> 00:06:19,840
 

88
00:06:19,950 --> 00:06:27,630
そしてそれぞれが名前を持っていて、名前がサーモンクリークであると言うと、私は最近キャンプに行きました。それからイメージして、そのGWWイメージがどんなものであれ、HTPのようなイメージのURLになります。

89
00:06:28,040 --> 00:06:37,520
そこに行く。

90
00:06:37,560 --> 00:06:38,190
それから私たちはこれらの配列を持っていきます。

91
00:06:38,490 --> 00:06:40,560
だからコースの最後までに10の異なるキャンプ場100があるかもしれない。

92
00:06:40,740 --> 00:06:45,570
 

93
00:06:45,690 --> 00:06:50,460
 

94
00:06:50,460 --> 00:06:57,780
それぞれの名前は名前とイメージを持ち、最終的には緯度と経度の都市と州の住所容量の季節性などのさまざまな属性を持ちますが、単純な名前とイメージを開始しています。

95
00:06:57,770 --> 00:06:59,950
Apter Yesに戻ってみましょう。

96
00:07:00,600 --> 00:07:02,110
 

97
00:07:02,310 --> 00:07:09,140
私たちがやろうとしているのは、配列を見つけて、ここでこれを行うことから始めることができます。これまではキャンプグラウンドと呼んでいます。

98
00:07:09,240 --> 00:07:11,900
 

99
00:07:12,210 --> 00:07:17,740
そして、配列の内部に入り、いくつかのスターターオブジェクトを持つことになるので、これをちょっとだけフォーマットしてください。

100
00:07:17,740 --> 00:07:19,660
そして、最初のものは名前を持っていて、私はセモンクリークと一緒に行くつもりです。

101
00:07:19,800 --> 00:07:25,590
あなたは何かを作ってイメージを持ってくることができ、私は戻ってきてイメージを記入します。

102
00:07:26,000 --> 00:07:30,210
 

103
00:07:30,330 --> 00:07:38,940
そして、次は、Granitesの丘、それからもう1つのパトロールコール山羊の胸に呼ぶ別のサイトを作ります。

104
00:07:38,940 --> 00:07:44,580
大丈夫。

105
00:07:44,580 --> 00:07:45,110
だから3つのキャンプ場は3つの完全に架空の名前と画像です。

106
00:07:45,120 --> 00:07:48,960
私は実際にいくつかの創造的なコモンズの写真を使用するつもりですので、私は問題に遭遇しません。

107
00:07:48,960 --> 00:07:53,540
これらは、私が実際に訪れたキャンプサイトのどれにも対応するつもりはありませんが、ここでいくつかのイメージを選んでいます。

108
00:07:53,550 --> 00:07:57,690
 

109
00:07:57,690 --> 00:07:58,920
これで始めましょう。

110
00:07:59,070 --> 00:08:01,540
だから私はここに戻ってきて、それは山羊の休息になるだろうというイメージをコピーするつもりです。

111
00:08:01,690 --> 00:08:07,550
何故なの。

112
00:08:07,590 --> 00:08:08,340
それから私たちはもう一度戻ってきます。私はここでこれをとっていきます。

113
00:08:08,630 --> 00:08:13,160
彼をRLにコピーしてください。これはSalmon Creekになります。

114
00:08:13,590 --> 00:08:17,800
私たちはもう1つ必要です。私はこれを取るだけです。

115
00:08:18,300 --> 00:08:21,630
もちろん、これは実際にキャンプ場ではありませんが、それはここのポイントの横にあります。

116
00:08:21,690 --> 00:08:26,180
あなたが気にしているなら、あなたは実際のキャンプサイトのイメージで本当のキャンプサイト名を使用することをお勧めします。

117
00:08:26,340 --> 00:08:31,390
 

118
00:08:31,440 --> 00:08:36,120
 

119
00:08:36,120 --> 00:08:41,540
あなたがキャンプを嫌っているのであれば、私はこれが何人かの人々を疎外させるかもしれないと心配しましたが、キャンプは嫌いなのですが、あなたはこのアプリケーションを他のものに簡単に変えることができます。

120
00:08:41,550 --> 00:08:42,660
 

121
00:08:42,750 --> 00:08:48,890
私たちがそれを終えると、あなたはそれをイベントアプリにすることができますパーティーのアプリケーションレストランのレビューサイト何かのようなものですが、私はコースの終わりまでそれを行うことをお勧めしますので、名前と異なる変数我々は持っています。

122
00:08:49,010 --> 00:08:53,040
 

123
00:08:53,040 --> 00:08:55,990
 

124
00:08:56,190 --> 00:09:03,180
だからキャンプ場今日のために今は偽のキャンプ場を保存して、配列のさまざまな要素の間に追加またはカンマを確実に保存します。

125
00:09:03,170 --> 00:09:05,410
 

126
00:09:05,420 --> 00:09:12,410
そこに行くと、テンプレートのレンダリングをレンダリングすることから始まり、それはキャンプ場と呼ばれることになり、まだデータを渡すつもりはありません。

127
00:09:12,920 --> 00:09:15,170
テンプレートが正しく機能していることを確認するだけです。

128
00:09:15,170 --> 00:09:18,170
今、私たちはサーバーのタッチを停止する必要があります。 J.

129
00:09:18,380 --> 00:09:28,380
私たちはそれを開きます。

130
00:09:28,380 --> 00:09:29,370
それはそのようなもので、ここではH1を追加します。

131
00:09:31,370 --> 00:09:35,000
 

132
00:09:35,030 --> 00:09:44,510
これはキャンプ場のページであり、保存して、サーバーを起動したときにそのページが表示されていることを確認して、更新してキャンプ場をスラッシュにしてみましょう。

133
00:09:44,510 --> 00:09:52,850
これはキャンプ場のページです。

134
00:09:52,850 --> 00:09:54,190
そして、私たちがここにいる間に、いくつかの点滅を追加するといいでしょう。

135
00:09:54,440 --> 00:09:57,430
 

136
00:09:57,470 --> 00:10:03,560
そこで、すべてのキャンプ場を表示し、それを行うリンク先ページにリンクを追加し、貸出テンプレートに移動する必要があり、ref属性のアンカータグの一番下にATFが必要ですスラッシュキャンプ場。

137
00:10:03,560 --> 00:10:10,400
 

138
00:10:10,400 --> 00:10:13,490
 

139
00:10:13,820 --> 00:10:24,890
そして私はちょうどあなたがすべてのキャンプ場を言い、キャンプ場のサーバーリフレッシュビューを再起動することを保存すると、キャンプ場ページに私たちを連れて行くようになります。

140
00:10:24,890 --> 00:10:26,610
 

141
00:10:26,630 --> 00:10:32,400
 

142
00:10:32,400 --> 00:10:38,770
 

143
00:10:39,410 --> 00:10:45,800
さて、今度は、キャンプ場を通ってレンダリングの残りの部分にデータを渡してから、すべてをループして各イメージを表示して、テンプレートの各名前を更新してみましょうその2番目の引数をここに追加します。これは、渡すすべてのデータのオブジェクトで、私たちはキャンプグラウンドという名前でキャンプ場で渡します。

144
00:10:45,800 --> 00:10:52,690
だからこれが私たちが渡しているデータであることを覚えておいてください。これが私たちに与えたい名前です。

145
00:10:52,700 --> 00:10:57,220
これを私たちが望むものと呼ぶことができますが、同じことを彼らが見ることは一般的です。

146
00:10:57,320 --> 00:11:00,950
 

147
00:11:01,160 --> 00:11:09,080
だから私たちは今すぐ保存してテンプレートに戻ります。私たちはこのキャンプ場をやるだけで始まり、何かを見たらオブジェクトオブジェクトのように見えます。

148
00:11:09,080 --> 00:11:11,770
 

149
00:11:11,810 --> 00:11:17,420
正しく実行した場合は、サーバを再起動するか、Rigaudに3つのオブジェクトがある配列をリフレッシュしてデータを渡したことがわかります。

150
00:11:17,910 --> 00:11:21,800
それでは、各タイトルまたは各名前と画像をループして表示しましょう。

151
00:11:22,740 --> 00:11:26,840
だから私はここでこれらの括弧を保つだろうが、私は等号を取り除き、我々はそれぞれのために行うだろう。

152
00:11:27,290 --> 00:11:32,020
だからそれはそれぞれのキャンプ場になり、その無名関数をコールバックに渡し、私たちはそれをキャンプグラウンドと呼びます。そして、ここでenterを押してから、戻ってきて、正しい閉じたEjayを追加する必要があります。大括弧で囲んでください

153
00:11:32,150 --> 00:11:41,270
 

154
00:11:41,270 --> 00:11:47,810
 

155
00:11:47,810 --> 00:11:55,010
OK。

156
00:11:56,240 --> 00:11:56,880
 

157
00:11:57,080 --> 00:12:01,820
だから、キャンプ場を通ってループして、それぞれのために何をしたいのかを最初に表示するだけです。

158
00:12:01,820 --> 00:12:02,850
だから我々は味方から始める。

159
00:12:03,080 --> 00:12:05,190
何故なの。

160
00:12:05,270 --> 00:12:05,890
そして、私たちは単に私たちのEをします。 J.

161
00:12:06,050 --> 00:12:13,520
sは等号で表示され、すべてが何らかのスペースを作って、何が起きているのかが少し分かりやすくなっています。

162
00:12:13,520 --> 00:12:14,700
そして、私たちはYキャンプ場の中に展示するつもりです。

163
00:12:14,900 --> 00:12:18,190
ドットの名前は、すべてのスペースを節約します。

164
00:12:18,340 --> 00:12:22,750
ここでページを読み込み、これを更新して、3つのキャンプグラウンド名を取得しましょう。

165
00:12:23,120 --> 00:12:28,460
私がやりたい最後のことは、画像を表示することです。

166
00:12:28,460 --> 00:12:31,880
 

167
00:12:31,880 --> 00:12:39,470
だから私たちはここに戻り、同盟国ではなく、これを変更して各キャンプ場ごとにdivタグがあるようにしましょう。

168
00:12:39,470 --> 00:12:40,290
divタグにhが表示されます。

169
00:12:40,400 --> 00:12:44,390
キャンプグラウンド名で4をしましょう。その下にイメージタグを入れましょう。

170
00:12:44,390 --> 00:12:52,530
 

171
00:12:53,450 --> 00:13:00,950
 

172
00:13:01,490 --> 00:13:08,120
そして、私たちがする必要があることは、あなたがELASであればどんなものであれ、キャンプグラウンドからイメージを入れようとしているにもかかわらず、イメージをソースと引用符で囲むことです。

173
00:13:08,300 --> 00:13:09,160
これらのEjayが括弧の中に必要です。

174
00:13:09,200 --> 00:13:11,030
 

175
00:13:11,330 --> 00:13:16,540
だから私たちは引用符の中でそれをしなければなりません。これは私の生徒の何人かに最初は少し混乱させます。そのイメージはすでに文字列です。

176
00:13:16,550 --> 00:13:19,250
 

177
00:13:19,700 --> 00:13:25,160
そして、あなたはここに見ることができますが、私たちがこれを取ってテンプレートに加えるとき、それらの引用符はそれに伴って来ないことを忘れないでください。

178
00:13:25,160 --> 00:13:26,820
テキストとして追加されたばかりです。

179
00:13:26,900 --> 00:13:28,350
だから、このHTPコロンは、その周りに引用符が必要なものをスラッシュのように見えるでしょう。

180
00:13:28,430 --> 00:13:33,800
だから私たちはEjazタグを引用符の中に追加していることを確認する必要があります。

181
00:13:33,980 --> 00:13:39,080
OK。

182
00:13:39,410 --> 00:13:39,770
だから私たちがしたいことは、キャンプ場のイメージがイメージを使用していることを確認することです。

183
00:13:39,800 --> 00:13:45,800
そこに行く。

184
00:13:45,800 --> 00:13:46,540
私はA-Gです。私たちはまったく同じ方法でここに綴られており、私はサーバを再起動するのを止めます。

185
00:13:46,760 --> 00:13:54,670
戻ってページをリフレッシュし、3つの画像を持つ3つのキャンプ場を取得しましょう。

186
00:13:54,980 --> 00:14:01,650
大丈夫です。

187
00:14:01,670 --> 00:14:02,300
このビデオで私がしたいことは、私たちの2つのルートの基本的な構造を設定することでした。

188
00:14:02,300 --> 00:14:07,270
私たちがやるべきことをすべて実行したことを確認するために戻ってみましょう。

189
00:14:07,280 --> 00:14:10,060
だから、私たちはすべてのキャンプ場を記載したキャンプ場のページでそれを行いました。

190
00:14:10,340 --> 00:14:15,740
また、各キャンプ場には名前とイメージがあります。

191
00:14:15,860 --> 00:14:19,390
大丈夫

192
00:14:19,400 --> 00:14:19,760