1
00:00:00,460 --> 00:00:07,010
이 동영상으로 돌아와서 우리는이 과정의 나머지 부분에서 작업 할 Yelp 캠프 응용 프로그램에서 시작할 것입니다.

2
00:00:07,050 --> 00:00:09,280
우리는 기본 설정을 시작함으로써 시작할 것입니다.

3
00:00:09,280 --> 00:00:12,720
신속한 앱 사용 및 처음 몇 개의 경로와 템플릿 사용

4
00:00:12,720 --> 00:00:19,890
그러나 우리가 그것에 대해 이야기하기 전에 여기서 워크 플로우와 다른 기능을 지속적으로 추가 할 때 어떻게 작동하는지 설명하고 싶습니다.

5
00:00:19,950 --> 00:00:25,370
어느 시점에서든 코드를 볼 수 있기를 바랍니다. 최종 솔루션을보고 싶지는 않습니다.

6
00:00:25,380 --> 00:00:28,370
그래서 내가 할 일은 다른 폴더에서 작업하는 것입니다.

7
00:00:28,470 --> 00:00:33,610
그래서 저는 옐프 캠프 디렉토리가 있습니다. 그리고 Yelp 캠프 대신 다른 버전을 추가 할 것입니다.

8
00:00:33,720 --> 00:00:34,970
그래서 당신은 이것을 할 필요가 없습니다.

9
00:00:35,040 --> 00:00:40,710
계속해서 다른 버전을 만들고 싶다면 계속해서 한 버전에 직접 추가 할 수 있습니다.

10
00:00:40,710 --> 00:00:52,580
나는 항상 어떤 버전을 사용하는지 지적 하겠지만, 목표는 버전 2와 버전 3 사이에 추가 된 것을 되돌아보고 싶다면 버전 2와 버전 3 디렉토리를 열어 비교할 수 있습니다.

11
00:00:52,960 --> 00:00:55,770
이제 여기서 시작하는 것이 좋습니다.

12
00:00:55,830 --> 00:01:05,050
우리가 할 일은 기본 응용 프로그램이 설치 될 익스프레스와 각각을 설치하는 것입니다. 예를 들어 뷰 디렉토리를 얻은 다음 두 개의 다른 경로를 추가 할 것입니다.

13
00:01:05,130 --> 00:01:09,660
그래서 우리는 기본적으로 Yelp 캠프에 오신 것을 환영하는듯한 홈 페이지를 갖게 될 것입니다.

14
00:01:09,840 --> 00:01:11,750
여기에 우리가하는 일에 대한 작은 글이 있습니다.

15
00:01:11,880 --> 00:01:12,750
가입 버튼이 있습니다.

16
00:01:12,750 --> 00:01:15,760
여기 아직 실제로 작동하지 않을 연락처 링크가 있습니다.

17
00:01:15,840 --> 00:01:25,410
그리고 거기에서부터 우리는 우리 캠프 그라운드 페이지를 만들 것입니다.이 페이지는 저희 데이터베이스의 모든 캠프장을 나열 할 우리 앱의 메인 페이지가 될 것이고 아직 데이터베이스가 없습니다.

18
00:01:25,410 --> 00:01:31,930
그래서 우리는 친구들과 함께 마지막 비디오에서했던 것처럼 캠프장의 배열이 될 것입니다.

19
00:01:32,010 --> 00:01:39,530
곧 우리는 새로운 데이터베이스로 옮길 것입니다. 캠프장은 두 가지 다른 정보만을 가질 것입니다.

20
00:01:39,840 --> 00:01:55,000
코스가 끝날 무렵 캠프장에는 10-15 개의 다른 조각이 있지만 지금은 연어 크릭이나 듀이 포인트 또는 캠프장의 이름이 무엇인지간에 이름이 붙은 다음 표시 할 수있는 이미지가 있습니다. 이미지는 단지 aur l이 될 것입니다.

21
00:01:55,380 --> 00:01:56,460
이제 시작하겠습니다.

22
00:01:56,760 --> 00:02:04,110
먼저 NPM을 실행하여 시작하고 여기서 Enter를 눌러 다시 입력 할 것입니다.

23
00:02:04,380 --> 00:02:07,810
우리는 이것을 cam v1이라고 부를 것입니다.

24
00:02:08,640 --> 00:02:11,990
나는 진입 점과 같은 것을 만들 것이다.

25
00:02:12,480 --> 00:02:13,790
그리고 거기에 우리가 간다.

26
00:02:14,060 --> 00:02:17,670
작성자를 입력하고 Enter 키를 누릅니다.

27
00:02:17,700 --> 00:02:18,550
한번 더.

28
00:02:18,780 --> 00:02:19,300
승인.

29
00:02:19,500 --> 00:02:23,920
이제 NPM 설치 Express와 yes를 실행 해 봅시다.

30
00:02:23,940 --> 00:02:25,320
대시 대시 저장.

31
00:02:25,410 --> 00:02:33,540
나는 이것을 아직 보지 못했지만 한 번에 여러 개의 패키지를 공백으로 구분하여 설치하려는 경우 훨씬 쉬운 방법입니다.

32
00:02:35,820 --> 00:02:43,300
그리고 패키지 스텁 Jason을 보면 SJS가 있고 표현할 수 있습니다.

33
00:02:44,160 --> 00:02:45,590
이제 앱을 만들어 보겠습니다.

34
00:02:45,680 --> 00:03:00,700
예, 여기를 열어서 여기에 기본 Express를 가져 오면 바로 지금 Express가 필요합니다.

35
00:03:01,050 --> 00:03:15,570
그리고 나서 앱 변수는 실행중인 익스프레스 함수와 동일하게 뛰어 오르고 점프하고 옵트 아웃을 수행합니다. 어느쪽에 대해서도 잘 알고 있어야합니다.

36
00:03:15,610 --> 00:03:34,510
EMV IP와 콜백을 처리하는 Ian VI 포트 프로세스와 여기 Yelp 캠프가 시작되었다는 영사 로그를 작성합니다.

37
00:03:35,100 --> 00:03:42,000
캠프 서버를 그렇게 만들고 저장하십시오.

38
00:03:42,320 --> 00:03:45,510
이제 방문 페이지를 추가하여 시작하겠습니다.

39
00:03:45,720 --> 00:03:49,210
대부분의 애플리케이션과 마찬가지로 방문 페이지가 올바른 경로에 있습니다.

40
00:03:49,440 --> 00:04:18,010
플래시를 사용하는 앱을 추가하기 만하면됩니다. 빨간색으로 시작해서 보낼 것입니다. 제대로 작동하는지 확인하고 곧 방문 페이지로 저장하고 저장 한 다음 시작합니다. 서버는 캠프 서버가 시작되었는지 확인한 다음 다시 돌아가서 경로 경로를 새로 고침합니다.

41
00:04:18,300 --> 00:04:18,700
승인.

42
00:04:18,720 --> 00:04:21,690
그리고 우리가 찾고있는 것이 전부입니다.

43
00:04:21,810 --> 00:04:36,680
이제 템플리트를 설정하여 디렉토리보기를 만드는 뉴스 디렉토리를 만들어야하며, views 디렉토리에있는 우리 각자가 상륙한다고하는 템플릿을 만들 것입니다.

44
00:04:36,810 --> 00:04:39,080
예, 거기에 우리가 간다.

45
00:04:39,240 --> 00:04:47,580
그리고 나서 우리는 그 슬래시 착륙을 열어 여기에 아주 간단한 마크 업을 넣을 것입니다.

46
00:04:47,580 --> 00:04:54,030
방문 페이지를 방문한 다음 단락을 입력하면됩니다.

47
00:04:54,030 --> 00:04:56,340
오프라 캠프에 오신 것을 환영합니다.

48
00:04:56,340 --> 00:05:00,900
그리고 물론 이것은 모두 변경 될 것이고 과정이 끝날 때마다 매우 다른 스타일이 될 것입니다.

49
00:05:01,110 --> 00:05:03,750
하지만 지금은 우리가 일을하고 있는지 확인하고 싶습니다.

50
00:05:03,810 --> 00:05:05,110
그럼 APT로 돌아 가자.

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

52
00:05:06,030 --> 00:05:12,880
그리고 우리가 할 첫 번째 일은 나머지를 랜더링으로 렌더링하고 점을 버릴 것입니다.

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

54
00:05:13,770 --> 00:05:23,490
그리고 그 일을하기 위해 나는 J.S.가 될 뷰 세트 엔진을 app에 추가 할 필요가있다.

55
00:05:23,880 --> 00:05:25,100
그리고 우리는 쓸 필요가 없습니다.

56
00:05:25,120 --> 00:05:30,630
E.J. 여기서는 서버를 다시 저장합니다.

57
00:05:30,900 --> 00:05:35,770
제임스 새로 고침과 우리의 방문 페이지 템플릿을 얻을.

58
00:05:36,180 --> 00:05:37,400
큰.

59
00:05:37,410 --> 00:05:39,880
다음은 캠프장 루트에서 작업 해 보겠습니다.

60
00:05:40,110 --> 00:05:50,910
그래서 우리는 얻을 앱을 갖게 될 것이고, 당신은 오로라가 캠프장을 내리고 이것이 우리가 가지고있는 모든 야영장을 보여줄 것입니다.

61
00:05:51,030 --> 00:05:56,820
그러나 곧 저장과 같은 요청과 응답을 드리겠습니다.

62
00:05:57,060 --> 00:06:02,760
그리고 우리는 캠프 그라운드 배열을 정의 할 필요가 있습니다.

63
00:06:02,750 --> 00:06:12,960
다음으로 큰 변화는 데이터베이스를 추가하고 캠프장을 데이터베이스에 저장하는 것입니다. 이제는 배열이고 각 캠프장에는 이름과 이미지가 있습니다.

64
00:06:12,960 --> 00:06:14,350
그래서 이렇게 보일 것입니다.

65
00:06:14,580 --> 00:06:19,840
또는 배열이 있고 배열의 각 항목이 객체입니다.

66
00:06:19,950 --> 00:06:37,520
그리고 각자는 이름을 가지고 있습니다. 그리고 나서 그냥 이름이 연어 크릭이라고 말하면서 최근에 캠핑을하러 갔다가 그 다음에 이미지를 찍은 다음 HW와 같은 이미지의 URL이 될 것입니다.

67
00:06:37,560 --> 00:06:38,190
우리는 거기에 갈.

68
00:06:38,490 --> 00:06:40,560
그리고 우리는 이것들을 배열 할 것입니다.

69
00:06:40,740 --> 00:06:45,570
그래서 코스가 끝날 때까지 10 개의 캠프장 100 개가있을 수 있습니다.

70
00:06:45,690 --> 00:06:59,950
그리고 그들 각각은 이름과 이미지를 가지고 있습니다. 그리고 나서 그들은 위도와 경도와 같은 것들을 갖게 될 것입니다. 그리고 주소는이 모든 다른 속성들을 주소로 삼습니다. 그러나 우리는 단순한 이름과 이미지를 시작하고 있습니다.

71
00:07:00,600 --> 00:07:02,110
Apter Yes로 돌아 가자.

72
00:07:02,310 --> 00:07:11,900
그리고 우리가 할 일은 그 배열을 찾는 것입니다. 우리는 여기에서 그것을 수행함으로써 시작할 수 있습니다. 지금까지 우리는 이것을 캠프 그라운드라고 부르겠습니다. 배열과 같습니다.

73
00:07:12,210 --> 00:07:19,660
그리고 배열 내부에 우리가 배열 안에 들어갈 때 조금 더 좋아 지도록 포맷합니다. 우리는 몇 가지 시작 객체를 가질 것입니다.

74
00:07:19,800 --> 00:07:25,590
그리고 첫번째 것은 이름을 가지고있을 것이고 나는 Semon Creek과 함께 갈 것입니다.

75
00:07:26,000 --> 00:07:30,210
당신은 무엇이든을 만들 수 있고 심상이있을 것이다. 나는 돌아와서 이미지를 채울 것이다.

76
00:07:30,330 --> 00:07:44,580
그리고 나서 다음 사람이 이것을 할 것입니다. 우리는 Granites 언덕이라고 부르는 또 다른 사이트를 만들었고, 한 번 더 순찰하는 산 염소 가슴을 만들었습니다.

77
00:07:44,580 --> 00:07:45,110
괜찮아.

78
00:07:45,120 --> 00:07:48,960
그래서 3 개의 야영장은 완전히 허구의 이름과 이미지를 가지고 있습니다.

79
00:07:48,960 --> 00:07:53,540
나는 사실 어떤 크리에이티브 커먼즈 사진을 사용하려고하기 때문에 나는 어떤 문제도 일으키지 않는다.

80
00:07:53,550 --> 00:07:58,920
이것들은 내가 실제로 구경했던 어떤 캠프장과도 일치하지 않을 것이지만, 여기에 몇 가지 이미지를 고를 것입니다.

81
00:07:59,070 --> 00:08:01,540
이걸로 시작합시다.

82
00:08:01,690 --> 00:08:07,550
그래서 당신이나 내가 여기로 돌아갈 이미지를 복사 할거고 그것은 산 염소 휴식이 될 것입니다.

83
00:08:07,590 --> 00:08:08,340
왜 안돼.

84
00:08:08,630 --> 00:08:13,160
그리고 우리는 다시 되돌아 갈 것이고 여기 나는 이것을 가져갈 것입니다.

85
00:08:13,590 --> 00:08:17,800
RL에 그를 복사해라. 그러면 Salmon Creek이 될거야.

86
00:08:18,300 --> 00:08:21,630
그리고 나서 우리는 하나 더 필요로하고 이것을 가지고 갈 것입니다.

87
00:08:21,690 --> 00:08:26,180
물론 이것은 정말로 캠프장이 아니다. 그러나 그것은 여기의 요지 옆에있다.

88
00:08:26,340 --> 00:08:31,390
나는 당신이 걱정하는 경우에 당신이 진짜 야영지 위치 심상에있는 진짜 야영장 이름을 사용하는 촉구한다.

89
00:08:31,440 --> 00:08:42,660
만약에 당신이 캠핑을 싫어한다면, 나는 이것이 내가 어떤 사람들을 멀 리게 할까봐 걱정했다.하지만 네가 생각하는 캠핑을 싫어할지라도이 응용 프로그램을 다른 것으로 쉽게 바꿀 수있을 것이다.

90
00:08:42,750 --> 00:08:55,990
일단 우리가 그것을 끝내면 이벤트 앱으로 만들 수 있습니다. 파티의 애플리케이션 레스토랑 리뷰 사이트에는 아무 것도 없습니다. 그러나 코스 끝까지 기다려서 이름을 지정하고 다른 변수와 혼동하지 않도록하는 것이 좋습니다. 우리는 가지고있다.

91
00:08:56,190 --> 00:09:05,410
그래서 캠프장 ​​오늘은 지금 캠프장을 가짜로 만들고 배열의 다른 요소들 사이에 쉼표를 추가하거나 쉼표를 붙이십시오.

92
00:09:05,420 --> 00:09:15,170
이제 시작하고 템플릿 시작을 렌더링하여 시작할 것입니다. 그러면 캠프 그라운드라고 불릴 것입니다. 아직 데이터를 전달하지 않을 것입니다.

93
00:09:15,170 --> 00:09:18,170
우리는 템플릿이 올바르게 작동하는지 확인하려고합니다.

94
00:09:18,380 --> 00:09:29,370
이제 우리는 서버 터치를 멈추게해야합니다. E.J. 우리가 그걸 열어 줄거야.

95
00:09:31,370 --> 00:09:35,000
그것은 그것과 같고 여기서 우리는 H1을 추가 할 것입니다.

96
00:09:35,030 --> 00:09:52,850
이것은 캠프장 페이지이며 저장하고 서버를 시작할 때 해당 페이지가 표시되는지 확인하고 새로 고침하고 캠프장을 내 보자.

97
00:09:52,850 --> 00:09:54,190
이것은 캠프장 페이지입니다.

98
00:09:54,440 --> 00:09:57,430
그리고 우리가 여기있는 동안 깜박 거리기를 추가하는 것이 좋을 것입니다.

99
00:09:57,470 --> 00:10:13,490
따라서 방문 페이지에 링크를 추가하여 모든 캠프장보기 및 그 작업을 수행하고 대출 템플리트로 이동해야하며 ref 속성에 고정 태그의 맨 아래에 ATF가 있어야합니다. 슬래시 캠프장.

100
00:10:13,820 --> 00:10:26,610
그리고 나는 여러분에게 모든 캠프장을 말하고 캠브리지의 서버 새로 고침보기를 다시 시작하면 캠프장 페이지로 이동합니다.

101
00:10:26,630 --> 00:10:52,690
좋습니다. 그러면 이제 우리 캠프장을 통해 데이터를 렌더링 호출의 나머지 부분으로 전달하고 모든 것을 반복하여 각 이미지를 표시하고 템플릿의 각 이름을 업데이트하도록 시작할 것입니다. 그리고 여기에 우리가 통과시키고 자하는 모든 데이터의 대상인 두 번째 논의를 추가하면 캠프 그라운드라는 이름으로 캠프장을 통과하게됩니다.

102
00:10:52,700 --> 00:10:57,220
따라서 이것이 우리가 전달하는 데이터이며 이것이 우리가주고 자하는 이름이라는 것을 기억하십시오.

103
00:10:57,320 --> 00:11:00,950
우리는 이것을 우리가 원한 무엇이라도 부를 수 있습니다. 그러나 같은 것을 지칭하는 것이 일반적입니다.

104
00:11:01,160 --> 00:11:11,770
그래서 우리는 지금 저장하고 템플릿으로 돌아가서이 캠프장을 시작하여 시작할 것입니다. 만약 우리가 무엇이든 보게되면 그것은 객체 객체처럼 보일 것입니다.

105
00:11:11,810 --> 00:11:21,800
올바르게 수행했다면 서버를 다시 시작하거나 Rigaud를 세 개의 객체가 들어있는 배열로 새로 고침하여 데이터를 전달한 것입니다.

106
00:11:22,740 --> 00:11:26,840
이제 루프를 통해 각 제목이나 각 이름과 이미지를 표시해 보겠습니다.

107
00:11:27,290 --> 00:11:32,020
그래서 나는이 대괄호를 여기서 지킬 것이다. 그러나 나는 등호를 제거 할 것이고 우리는 각각을 할 것이다.

108
00:11:32,150 --> 00:11:55,640
그래서 각각의 캠프장이 될 것이고 익명의 함수를 콜백으로 전달할 것입니다. 우리는 캠프 그라운드라고 부를 것이고 우리는 여기에 입력 할 것입니다. 그리고 우리는 돌아가서 정확한 닫는 것을 추가해야합니다. Ejay us 괄호로 묶은 다음 여기에 우리 각자에게도 이것을 넣어야합니다.

109
00:11:56,240 --> 00:11:56,880
승인.

110
00:11:57,080 --> 00:12:02,850
그래서 그 캠프장을 통해 반복해야합니다 그리고 우리는 각 하나를 위해 우리가 먼저 이름을 표시합니다.

111
00:12:03,080 --> 00:12:05,190
그래서 우리는 동맹국과 함께 시작할 것입니다.

112
00:12:05,270 --> 00:12:05,890
왜 안돼.

113
00:12:06,050 --> 00:12:14,700
그리고 우리는 우리의 E.J. s는 등호로 표시하고 모두가 약간의 공간을 만들어서 어떤 일이 일어나고 있는지 쉽게 볼 수 있습니다.

114
00:12:14,900 --> 00:12:18,190
그리고 우리는 Y 캠프장 안에 전시 할 것입니다.

115
00:12:18,340 --> 00:12:22,750
점 이름을 입력하고 모든 공간을 절약하십시오.

116
00:12:23,120 --> 00:12:28,460
이제 페이지를로드하고이를 새로 고치고 3 개의 캠프 그라운드 이름을 얻자.

117
00:12:28,460 --> 00:12:31,880
내가하고 싶은 마지막 일은 이미지를 표시하는 것입니다.

118
00:12:31,880 --> 00:12:40,290
그래서 우리는 여기로 돌아갈 것이고 동맹국이 아니라 각 캠프장을위한 div 태그를 갖도록 변경하겠습니다.

119
00:12:40,400 --> 00:12:44,390
div 태그에는 h가 표시됩니다.

120
00:12:44,390 --> 00:12:52,530
캠프 그라운드 이름으로 4를하고 그 아래에 이미지 태그를 붙이자.

121
00:12:53,450 --> 00:13:09,160
그리고 우리가해야 할 일은 이미지를 소스와 인용구 안에 넣는 것입니다. 여러분이 무엇이든지 ELAS가 캠프장에서 이미지를 넣을 것이고 우리는 그 이미지를 campground 할 수 없습니다.

122
00:13:09,200 --> 00:13:11,030
우리는 Ejay가 대괄호로 필요합니다.

123
00:13:11,330 --> 00:13:19,250
그래서 우리는 처음에 캠프 그 이미지가 이미 문자열이기 때문에 약간의 학생들에게 혼란스러운 따옴표 안에 그것을해야합니다.

124
00:13:19,700 --> 00:13:26,820
그리고 여러분은 여기서 볼 수 있습니다. 그러나 이것을 우리가 템플릿에 넣을 때 그 따옴표가 함께 올 수 없다는 것을 기억하십시오.

125
00:13:26,900 --> 00:13:28,350
그냥 텍스트로 추가되었습니다.

126
00:13:28,430 --> 00:13:33,800
그래서이 HTP 콜론은 우리가 그 주위에 따옴표를 써야 할 필요가있을 때마다 슬래시처럼 보일 것입니다.

127
00:13:33,980 --> 00:13:39,080
따라서 Ejaz 태그를 따옴표 안에 추가해야합니다.

128
00:13:39,410 --> 00:13:39,770
승인.

129
00:13:39,800 --> 00:13:45,800
그래서 우리가하고 싶은 것은 캠프장 이미지가 우리가 이미지를 사용하는지 확인하는 것입니다.

130
00:13:45,800 --> 00:13:46,540
우리는 거기에 갈.

131
00:13:46,760 --> 00:13:54,670
저는 A-G입니다. 정확히 같은 방법으로 철자를 쓰면 서버를 다시 시작하지 않게됩니다.

132
00:13:54,980 --> 00:14:01,650
돌아가서 페이지를 새로 고침 해보면 3 개의 이미지가있는 3 개의 캠프장을 얻을 수 있습니다.

133
00:14:01,670 --> 00:14:02,300
좋아.

134
00:14:02,300 --> 00:14:07,270
그래서이 비디오에서 제가하고 싶은 것은 우리의 두 경로를 기본 구조로 설정하는 것입니다.

135
00:14:07,280 --> 00:14:10,060
우리가해야 할 모든 일을 확실히하기 위해 돌아 갑시다.

136
00:14:10,340 --> 00:14:15,740
그래서 예 방문 페이지에서 우리는 모든 캠프장을 나열하는 캠프장 페이지에서 그렇게했습니다.

137
00:14:15,860 --> 00:14:19,390
우리는 또한 각 캠프장에는 이름과 이미지가 있습니다.