이 동영상으로 돌아와서 우리는이 과정의 나머지 부분에서 작업 할 Yelp 캠프 응용 프로그램에서 시작할 것입니다.
우리는 기본 설정을 시작함으로써 시작할 것입니다.
신속한 앱 사용 및 처음 몇 개의 경로와 템플릿 사용
그러나 우리가 그것에 대해 이야기하기 전에 여기서 워크 플로우와 다른 기능을 지속적으로 추가 할 때 어떻게 작동하는지 설명하고 싶습니다.
어느 시점에서든 코드를 볼 수 있기를 바랍니다. 최종 솔루션을보고 싶지는 않습니다.
그래서 내가 할 일은 다른 폴더에서 작업하는 것입니다.
그래서 저는 옐프 캠프 디렉토리가 있습니다. 그리고 Yelp 캠프 대신 다른 버전을 추가 할 것입니다.
그래서 당신은 이것을 할 필요가 없습니다.
계속해서 다른 버전을 만들고 싶다면 계속해서 한 버전에 직접 추가 할 수 있습니다.
나는 항상 어떤 버전을 사용하는지 지적 하겠지만, 목표는 버전 2와 버전 3 사이에 추가 된 것을 되돌아보고 싶다면 버전 2와 버전 3 디렉토리를 열어 비교할 수 있습니다.
이제 여기서 시작하는 것이 좋습니다.
우리가 할 일은 기본 응용 프로그램이 설치 될 익스프레스와 각각을 설치하는 것입니다. 예를 들어 뷰 디렉토리를 얻은 다음 두 개의 다른 경로를 추가 할 것입니다.
그래서 우리는 기본적으로 Yelp 캠프에 오신 것을 환영하는듯한 홈 페이지를 갖게 될 것입니다.
여기에 우리가하는 일에 대한 작은 글이 있습니다.
가입 버튼이 있습니다.
여기 아직 실제로 작동하지 않을 연락처 링크가 있습니다.
그리고 거기에서부터 우리는 우리 캠프 그라운드 페이지를 만들 것입니다.이 페이지는 저희 데이터베이스의 모든 캠프장을 나열 할 우리 앱의 메인 페이지가 될 것이고 아직 데이터베이스가 없습니다.
그래서 우리는 친구들과 함께 마지막 비디오에서했던 것처럼 캠프장의 배열이 될 것입니다.
곧 우리는 새로운 데이터베이스로 옮길 것입니다. 캠프장은 두 가지 다른 정보만을 가질 것입니다.
코스가 끝날 무렵 캠프장에는 10-15 개의 다른 조각이 있지만 지금은 연어 크릭이나 듀이 포인트 또는 캠프장의 이름이 무엇인지간에 이름이 붙은 다음 표시 할 수있는 이미지가 있습니다. 이미지는 단지 aur l이 될 것입니다.
이제 시작하겠습니다.
먼저 NPM을 실행하여 시작하고 여기서 Enter를 눌러 다시 입력 할 것입니다.
우리는 이것을 cam v1이라고 부를 것입니다.
나는 진입 점과 같은 것을 만들 것이다.
그리고 거기에 우리가 간다.
작성자를 입력하고 Enter 키를 누릅니다.
한번 더.
승인.
이제 NPM 설치 Express와 yes를 실행 해 봅시다.
대시 대시 저장.
나는 이것을 아직 보지 못했지만 한 번에 여러 개의 패키지를 공백으로 구분하여 설치하려는 경우 훨씬 쉬운 방법입니다.
그리고 패키지 스텁 Jason을 보면 SJS가 있고 표현할 수 있습니다.
이제 앱을 만들어 보겠습니다.
예, 여기를 열어서 여기에 기본 Express를 가져 오면 바로 지금 Express가 필요합니다.
그리고 나서 앱 변수는 실행중인 익스프레스 함수와 동일하게 뛰어 오르고 점프하고 옵트 아웃을 수행합니다. 어느쪽에 대해서도 잘 알고 있어야합니다.
EMV IP와 콜백을 처리하는 Ian VI 포트 프로세스와 여기 Yelp 캠프가 시작되었다는 영사 로그를 작성합니다.
캠프 서버를 그렇게 만들고 저장하십시오.
이제 방문 페이지를 추가하여 시작하겠습니다.
대부분의 애플리케이션과 마찬가지로 방문 페이지가 올바른 경로에 있습니다.
플래시를 사용하는 앱을 추가하기 만하면됩니다. 빨간색으로 시작해서 보낼 것입니다. 제대로 작동하는지 확인하고 곧 방문 페이지로 저장하고 저장 한 다음 시작합니다. 서버는 캠프 서버가 시작되었는지 확인한 다음 다시 돌아가서 경로 경로를 새로 고침합니다.
승인.
그리고 우리가 찾고있는 것이 전부입니다.
이제 템플리트를 설정하여 디렉토리보기를 만드는 뉴스 디렉토리를 만들어야하며, views 디렉토리에있는 우리 각자가 상륙한다고하는 템플릿을 만들 것입니다.
예, 거기에 우리가 간다.
그리고 나서 우리는 그 슬래시 착륙을 열어 여기에 아주 간단한 마크 업을 넣을 것입니다.
방문 페이지를 방문한 다음 단락을 입력하면됩니다.
오프라 캠프에 오신 것을 환영합니다.
그리고 물론 이것은 모두 변경 될 것이고 과정이 끝날 때마다 매우 다른 스타일이 될 것입니다.
하지만 지금은 우리가 일을하고 있는지 확인하고 싶습니다.
그럼 APT로 돌아 가자.
예.
그리고 우리가 할 첫 번째 일은 나머지를 랜더링으로 렌더링하고 점을 버릴 것입니다.
예.
그리고 그 일을하기 위해 나는 J.S.가 될 뷰 세트 엔진을 app에 추가 할 필요가있다.
그리고 우리는 쓸 필요가 없습니다.
E.J. 여기서는 서버를 다시 저장합니다.
제임스 새로 고침과 우리의 방문 페이지 템플릿을 얻을.
큰.
다음은 캠프장 루트에서 작업 해 보겠습니다.
그래서 우리는 얻을 앱을 갖게 될 것이고, 당신은 오로라가 캠프장을 내리고 이것이 우리가 가지고있는 모든 야영장을 보여줄 것입니다.
그러나 곧 저장과 같은 요청과 응답을 드리겠습니다.
그리고 우리는 캠프 그라운드 배열을 정의 할 필요가 있습니다.
다음으로 큰 변화는 데이터베이스를 추가하고 캠프장을 데이터베이스에 저장하는 것입니다. 이제는 배열이고 각 캠프장에는 이름과 이미지가 있습니다.
그래서 이렇게 보일 것입니다.
또는 배열이 있고 배열의 각 항목이 객체입니다.
그리고 각자는 이름을 가지고 있습니다. 그리고 나서 그냥 이름이 연어 크릭이라고 말하면서 최근에 캠핑을하러 갔다가 그 다음에 이미지를 찍은 다음 HW와 같은 이미지의 URL이 될 것입니다.
우리는 거기에 갈.
그리고 우리는 이것들을 배열 할 것입니다.
그래서 코스가 끝날 때까지 10 개의 캠프장 100 개가있을 수 있습니다.
그리고 그들 각각은 이름과 이미지를 가지고 있습니다. 그리고 나서 그들은 위도와 경도와 같은 것들을 갖게 될 것입니다. 그리고 주소는이 모든 다른 속성들을 주소로 삼습니다. 그러나 우리는 단순한 이름과 이미지를 시작하고 있습니다.
Apter Yes로 돌아 가자.
그리고 우리가 할 일은 그 배열을 찾는 것입니다. 우리는 여기에서 그것을 수행함으로써 시작할 수 있습니다. 지금까지 우리는 이것을 캠프 그라운드라고 부르겠습니다. 배열과 같습니다.
그리고 배열 내부에 우리가 배열 안에 들어갈 때 조금 더 좋아 지도록 포맷합니다. 우리는 몇 가지 시작 객체를 가질 것입니다.
그리고 첫번째 것은 이름을 가지고있을 것이고 나는 Semon Creek과 함께 갈 것입니다.
당신은 무엇이든을 만들 수 있고 심상이있을 것이다. 나는 돌아와서 이미지를 채울 것이다.
그리고 나서 다음 사람이 이것을 할 것입니다. 우리는 Granites 언덕이라고 부르는 또 다른 사이트를 만들었고, 한 번 더 순찰하는 산 염소 가슴을 만들었습니다.
괜찮아.
그래서 3 개의 야영장은 완전히 허구의 이름과 이미지를 가지고 있습니다.
나는 사실 어떤 크리에이티브 커먼즈 사진을 사용하려고하기 때문에 나는 어떤 문제도 일으키지 않는다.
이것들은 내가 실제로 구경했던 어떤 캠프장과도 일치하지 않을 것이지만, 여기에 몇 가지 이미지를 고를 것입니다.
이걸로 시작합시다.
그래서 당신이나 내가 여기로 돌아갈 이미지를 복사 할거고 그것은 산 염소 휴식이 될 것입니다.
왜 안돼.
그리고 우리는 다시 되돌아 갈 것이고 여기 나는 이것을 가져갈 것입니다.
RL에 그를 복사해라. 그러면 Salmon Creek이 될거야.
그리고 나서 우리는 하나 더 필요로하고 이것을 가지고 갈 것입니다.
물론 이것은 정말로 캠프장이 아니다. 그러나 그것은 여기의 요지 옆에있다.
나는 당신이 걱정하는 경우에 당신이 진짜 야영지 위치 심상에있는 진짜 야영장 이름을 사용하는 촉구한다.
만약에 당신이 캠핑을 싫어한다면, 나는 이것이 내가 어떤 사람들을 멀 리게 할까봐 걱정했다.하지만 네가 생각하는 캠핑을 싫어할지라도이 응용 프로그램을 다른 것으로 쉽게 바꿀 수있을 것이다.
일단 우리가 그것을 끝내면 이벤트 앱으로 만들 수 있습니다. 파티의 애플리케이션 레스토랑 리뷰 사이트에는 아무 것도 없습니다. 그러나 코스 끝까지 기다려서 이름을 지정하고 다른 변수와 혼동하지 않도록하는 것이 좋습니다. 우리는 가지고있다.
그래서 캠프장 ​​오늘은 지금 캠프장을 가짜로 만들고 배열의 다른 요소들 사이에 쉼표를 추가하거나 쉼표를 붙이십시오.
이제 시작하고 템플릿 시작을 렌더링하여 시작할 것입니다. 그러면 캠프 그라운드라고 불릴 것입니다. 아직 데이터를 전달하지 않을 것입니다.
우리는 템플릿이 올바르게 작동하는지 확인하려고합니다.
이제 우리는 서버 터치를 멈추게해야합니다. E.J. 우리가 그걸 열어 줄거야.
그것은 그것과 같고 여기서 우리는 H1을 추가 할 것입니다.
이것은 캠프장 페이지이며 저장하고 서버를 시작할 때 해당 페이지가 표시되는지 확인하고 새로 고침하고 캠프장을 내 보자.
이것은 캠프장 페이지입니다.
그리고 우리가 여기있는 동안 깜박 거리기를 추가하는 것이 좋을 것입니다.
따라서 방문 페이지에 링크를 추가하여 모든 캠프장보기 및 그 작업을 수행하고 대출 템플리트로 이동해야하며 ref 속성에 고정 태그의 맨 아래에 ATF가 있어야합니다. 슬래시 캠프장.
그리고 나는 여러분에게 모든 캠프장을 말하고 캠브리지의 서버 새로 고침보기를 다시 시작하면 캠프장 페이지로 이동합니다.
좋습니다. 그러면 이제 우리 캠프장을 통해 데이터를 렌더링 호출의 나머지 부분으로 전달하고 모든 것을 반복하여 각 이미지를 표시하고 템플릿의 각 이름을 업데이트하도록 시작할 것입니다. 그리고 여기에 우리가 통과시키고 자하는 모든 데이터의 대상인 두 번째 논의를 추가하면 캠프 그라운드라는 이름으로 캠프장을 통과하게됩니다.
따라서 이것이 우리가 전달하는 데이터이며 이것이 우리가주고 자하는 이름이라는 것을 기억하십시오.
우리는 이것을 우리가 원한 무엇이라도 부를 수 있습니다. 그러나 같은 것을 지칭하는 것이 일반적입니다.
그래서 우리는 지금 저장하고 템플릿으로 돌아가서이 캠프장을 시작하여 시작할 것입니다. 만약 우리가 무엇이든 보게되면 그것은 객체 객체처럼 보일 것입니다.
올바르게 수행했다면 서버를 다시 시작하거나 Rigaud를 세 개의 객체가 들어있는 배열로 새로 고침하여 데이터를 전달한 것입니다.
이제 루프를 통해 각 제목이나 각 이름과 이미지를 표시해 보겠습니다.
그래서 나는이 대괄호를 여기서 지킬 것이다. 그러나 나는 등호를 제거 할 것이고 우리는 각각을 할 것이다.
그래서 각각의 캠프장이 될 것이고 익명의 함수를 콜백으로 전달할 것입니다. 우리는 캠프 그라운드라고 부를 것이고 우리는 여기에 입력 할 것입니다. 그리고 우리는 돌아가서 정확한 닫는 것을 추가해야합니다. Ejay us 괄호로 묶은 다음 여기에 우리 각자에게도 이것을 넣어야합니다.
승인.
그래서 그 캠프장을 통해 반복해야합니다 그리고 우리는 각 하나를 위해 우리가 먼저 이름을 표시합니다.
그래서 우리는 동맹국과 함께 시작할 것입니다.
왜 안돼.
그리고 우리는 우리의 E.J. s는 등호로 표시하고 모두가 약간의 공간을 만들어서 어떤 일이 일어나고 있는지 쉽게 볼 수 있습니다.
그리고 우리는 Y 캠프장 안에 전시 할 것입니다.
점 이름을 입력하고 모든 공간을 절약하십시오.
이제 페이지를로드하고이를 새로 고치고 3 개의 캠프 그라운드 이름을 얻자.
내가하고 싶은 마지막 일은 이미지를 표시하는 것입니다.
그래서 우리는 여기로 돌아갈 것이고 동맹국이 아니라 각 캠프장을위한 div 태그를 갖도록 변경하겠습니다.
div 태그에는 h가 표시됩니다.
캠프 그라운드 이름으로 4를하고 그 아래에 이미지 태그를 붙이자.
그리고 우리가해야 할 일은 이미지를 소스와 인용구 안에 넣는 것입니다. 여러분이 무엇이든지 ELAS가 캠프장에서 이미지를 넣을 것이고 우리는 그 이미지를 campground 할 수 없습니다.
우리는 Ejay가 대괄호로 필요합니다.
그래서 우리는 처음에 캠프 그 이미지가 이미 문자열이기 때문에 약간의 학생들에게 혼란스러운 따옴표 안에 그것을해야합니다.
그리고 여러분은 여기서 볼 수 있습니다. 그러나 이것을 우리가 템플릿에 넣을 때 그 따옴표가 함께 올 수 없다는 것을 기억하십시오.
그냥 텍스트로 추가되었습니다.
그래서이 HTP 콜론은 우리가 그 주위에 따옴표를 써야 할 필요가있을 때마다 슬래시처럼 보일 것입니다.
따라서 Ejaz 태그를 따옴표 안에 추가해야합니다.
승인.
그래서 우리가하고 싶은 것은 캠프장 이미지가 우리가 이미지를 사용하는지 확인하는 것입니다.
우리는 거기에 갈.
저는 A-G입니다. 정확히 같은 방법으로 철자를 쓰면 서버를 다시 시작하지 않게됩니다.
돌아가서 페이지를 새로 고침 해보면 3 개의 이미지가있는 3 개의 캠프장을 얻을 수 있습니다.
좋아.
그래서이 비디오에서 제가하고 싶은 것은 우리의 두 경로를 기본 구조로 설정하는 것입니다.
우리가해야 할 모든 일을 확실히하기 위해 돌아 갑시다.
그래서 예 방문 페이지에서 우리는 모든 캠프장을 나열하는 캠프장 페이지에서 그렇게했습니다.
우리는 또한 각 캠프장에는 이름과 이미지가 있습니다.