구축할 내용
도시 목록에서 선택한 호텔 주변의 관심 지점(POI)을 표시하는 단일 페이지 웹 앱을 만들려고 합니다. POI는 대화형 Google 지도에 표시됩니다. 다음은 최종 결과를 보여주는 애니메이션입니다.
좀 더 고급 기술을 보여주기 위해 몇 가지 추가 변형이 있습니다.
- 도시는 같은 도시에 인근 호텔이 있는 공항을 매칭하여 선택됩니다.
- REST 호출을 사용하여 POI를 검색하지만 데이터베이스에 저장합니다.
- 클라이언트 측에서는 다음을 사용하여 푸시를 통해 데이터를 수신합니다. 서버 전송 이벤트.
코드는 짧지만 Vue의 반응형 데이터 바인딩 및 속성 종속성 기능을 사용하여 몇 가지 기술을 보여줍니다. Couchbase의 몇 가지 강력한 기능과 결합하면 많은 작업 없이도 멋지고 잘 작동하는 앱을 만들 수 있습니다.
필요한 것
이 앱은 전적으로 자바스크립트로 제작되었습니다. 시작하려면 몇 가지 준비물만 있으면 됩니다.
또한 다음을 위한 키도 받아야 합니다. Google 지도 자바스크립트 API 및 HERE REST API. 둘 다 무료로 사용할 수 있습니다(제한 사항 있음).
애플리케이션의 데이터는 Couchbase Server 배포에 기본 제공되는 샘플로 제공됩니다.
시작하기
웹 클라이언트 코드부터 시작하여 애플리케이션의 구조를 구축하겠습니다. 다음은 서버 측 Node + Express 코드입니다. 마지막으로 카우치베이스 서버 측을 살펴보겠습니다.
다음을 포함하여 N1Ql 쿼리에 대해 자세히 살펴보겠습니다. ANSI 가입. 이 앱은 새로운 이벤트 서비스 및 기능. 자바스크립트 코드를 살펴보는 것으로 마무리하겠습니다.
시작하려면 프로젝트를 보관할 새 디렉터리를 만듭니다. 명령 프롬프트를 열고 해당 디렉터리로 전환합니다.
웹 클라이언트 스켈레톤
Vue.js 클라이언트 스캐폴딩 생성하기
웹 클라이언트는 다음을 사용합니다. Vue.js.
Vue CLI를 사용하여 기본 프로젝트를 만들겠습니다. 다음을 사용하여 클라이언트와 서버 측을 쉽게 통합하는 방법을 보여드리겠습니다. 웹팩. 이렇게 하면 파일을 약간 재정렬해야 합니다.
아직 설치하지 않은 경우 npm을 사용하여 Vue CLI를 설치합니다.
|
1 |
npm 설치 -g @vue/cli |
저는 부트스트랩. Boostrap과 Vue를 통합하는 프로젝트는 적어도 두 개 이상 있습니다. 저는 부트스트랩 뷰. 이것은 실제로 필요하지 않습니다. 원한다면 이 종속성을 제거하는 것은 그리 어렵지 않습니다.
프로젝트 상용구를 만듭니다. 여기서 간단한 웹팩 템플릿이 등장합니다. 템플릿의 init 명령을 실행하면 몇 가지 질문이 표시됩니다. 기본값을 사용해도 괜찮습니다.
|
1 2 |
npm 설치 -g @vue/cli-init vue init 부트스트랩-vue/웹팩-simple 클라이언트 |
구조 조정 및 수정
이제 클라이언트 디렉토리로 전환합니다. 클라이언트 디렉터리에서 package.json 그리고 .gitignore 파일을 생성합니다. 이렇게 하면 프로젝트 전체에서 파일을 공유할 수 있습니다.
|
1 2 |
cd 클라이언트/ mv 패키지.json .gitignore .. |
웹팩 구성에도 작은 버그가 있습니다. Open
webpack.config.js. 로 시작하는 섹션 아래
|
1 |
테스트: /\.(png|jpg|gif|svg)$/, |
옵션 줄을 다음과 같이 변경합니다.
|
1 |
이름: 'assets/[이름].[내선]?[해시]' |
종속성 설치 및 빌드
기본 종속성을 초기화하고 설치합니다.
|
1 |
npm 설치 |
다른 종속 요소를 설치합니다. 이들 중 다수는 표준 패키지(모건, 바디 파서)입니다. 저는 axios 네트워크 통화의 경우 sse-channel 는 멋진 서버 전송 이벤트 패키지입니다. 제가 사용해 본 다른 패키지보다 조금 더 정교하고 사용하기 쉽습니다. 그리고 Vue에서 Google 지도를 쉽게 작업할 수 있는 패키지가 있습니다. vue2-google-maps.
나머지 종속성은 다음과 같이 설치합니다. 여기에는 서버에 필요한 것들이 포함됩니다.
|
1 |
npm 설치 --저장 vue2-구글-지도 axios express sse-채널 dotenv morgan debug 쿠키-파서 body-파서 블루버드 카우치베이스 |
이렇게 하면 제대로 작동하는 Vue 기반 프런트엔드를 얻을 수 있습니다. 이를 구축하기 위해
package.json 를 한 단계 올리려면 npm 스크립트 섹션을 조정해야 합니다. 편집 package.json 를 프로젝트 루트에 추가하고 빌드 줄을 다음과 같이 변경합니다.
|
1 |
"build": "cd client && cross-env NODE_ENV=production webpack --progress --hide-modules && cp index.html dist/" |
이제 클라이언트에서
npm 실행 빌드.
열 수 있습니다. index.html 파일을 실행해도 작동하지 않습니다. 서버 생성으로 건너뛰거나 독립 실행형 클라이언트만 확인하려는 경우 여기에서 문제를 해결해 보세요.
웹 서버 스켈레톤
프로젝트 루트로 다시 이동하여 서버 디렉터리를 준비합니다.
|
1 2 |
mkdir 서버 cd 서버 |
서버를 직접 만들어 보겠습니다. 새 파일을 편집하여 기본 앱을 시작합니다. app.js. 다음을 붙여넣고 저장합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
const express = require('express'); const debug = require('debug')('poi:server'); const 경로 = require('경로'); const logger = require('morgan'); const 쿠키 파서 = require('쿠키 파서'); const bodyParser = require('body-parser'); const http = require('http'); const 앱 = express(); 앱.사용(logger('dev')); 앱.사용(bodyParser.json()); 앱.사용(bodyParser.urlencoded({ 확장: false })); 앱.사용(쿠키 파서()); 앱.사용(함수(req, res, 다음) { res.헤더("액세스 제어-허용-오리진", "*"); res.헤더("액세스 제어-허용-헤더", "원본, X-요청-함께, 콘텐츠 유형, 수락"); 다음(); }); 앱.사용(express.정적(경로.join(__dirname, '../client'))); // 404를 잡아 오류 처리기로 전달합니다. 앱.사용(함수(req, res, 다음) { 콘솔.dir(req); 콘솔.dir(res); let err = new 오류('찾을 수 없음'); err.상태 = 404; 다음(err); }); // 오류 처리기 앱.사용(함수(err, req, res, 다음) { // 로컬 설정, 개발 시 에러만 제공 res.현지인.메시지 = err.메시지; res.현지인.오류 = req.앱.get('env') === '개발' ? err : {}; // 오류 페이지 렌더링 res.상태(err.상태 || 500); res.렌더링('error'); }); // HTTP 서버 http.createServer(앱).듣기(8080); |
이것은 최종 버전의 간소화된 버전입니다. 앞서 만든 상용구 클라이언트를 제공하기만 하면 됩니다.
이 시점에서 다음을 실행할 수 있어야 합니다. 노드 app.js 를 클릭합니다. 브라우저 탭을 열고 다음 위치로 이동합니다. http://localhost:8080. 다음과 같은 내용이 표시될 것입니다.
클라이언트 및 서버 구체화하기
웹 클라이언트 코드
이제 돌아가서 실제 클라이언트를 만들어 보겠습니다. 클라이언트 디렉토리의 하위 디렉터리인 src를 클릭하고 파일을 엽니다. App.vue. 다음과 같이 업데이트합니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 |
<템플릿> <div id="app"> <div 클래스="컨테이너"> <div 클래스="행 맞춤-콘텐츠-중앙"> <div 클래스="col-12"> <h2>포인트 의 관심</h2> </div> <div 클래스="COL-MD-12"> <b-드롭다운 id="도시" v-바인드:텍스트=디스플레이 클래스="m-md-2"> <b-드롭다운-항목-버튼 v-에 대한="도시 속의 도시" v-바인드:키="city.name" v-on:클릭="선택 = 도시">{{ 도시.이름 }}</b-드롭다운-항목-버튼> </b-드롭다운> <b-테이블 id="목적지" :항목="destinationsProvider" :필드="fields" @행-클릭="hotelSelected" 스트라이프 호버></b-테이블> </div> <div 클래스="COL-MD-12"> <GmapMap ref="지도" 스타일="너비: 100%; 높이: 400px;" :줌="16" :center="{위도: 43.542619, 경도: 6.955665}"> <GmapMarker v-에 대한="(마커, 인덱스) in poi" :키="index" :위치="{ lat: marker.position[0], lng: marker.position[1] }" :아이콘="{ url: marker.icon }" /> </GmapMap> </div> <div 클래스="col-8" /> <div 클래스="col-4" id="tagline"> 전원 by <img src="./assets/logo.png"> </div> </div> </div> </div> </템플릿> <script> 가져오기 axios 에서 'axios' const serverURL = 위치.원산지; const 서버 = axios.create({ baseURL: serverURL }); const es = new 이벤트 소스(`${서버URL}/events/poi`); 내보내기 기본값 { 이름: 'app', 데이터() { 반환 { 필드: [ { 키: 'name', 레이블: '호텔 이름', 정렬 가능: true }, { 키: '주소', 정렬 가능: false }, { 키: '공항명', 레이블: '공항 이름', 정렬 가능: true }, { 키: 'icao', 레이블: 'ICAO 코드', 정렬 가능: true } ], 선택: null, 도시: [], poi: [] } }, 계산: { 디스플레이: 함수() { 반환 이.선택 ? 이.선택.이름 : '도시 선택'; } }, 시계: { 선택: 함수() { 이.$root.$emit('bv::refresh::table', '목적지'); } }, 메소드: { 목적지 공급자(컨텍스트) { 만약 (null === 이.선택) 반환 []; let 약속 = 서버.get(`/records/hotels/byCity/${이.선택된.이름}`); 반환 약속.다음(응답 => { 반환(응답.데이터); }).catch(오류 => { 반환 []; }); }, 호텔선택(기록, 색인) { 이.$refs.지도.팬투({ 위도: 기록.geo.위도, lng: 기록.geo.lon }); 서버.post('/기록/선택/지역', 기록.geo) .catch(오류 => { 콘솔.로그(오류) }); } }, 탑재: 함수() { es.추가 이벤트 리스너('poi', 이벤트 => 이.poi = JSON.parse(이벤트.데이터)); 서버.get('/기록/목적지') .다음(응답 => { 이.도시 = 응답.데이터; }) .catch(오류 => { 콘솔.로그(오류) }); } } </script> <style> #app { 글꼴 가족: 'Avenir', 헬베티카, Arial, 산세리프; -웹킷 글꼴 스무딩: 앤티앨리어싱; -moz-osx-font-smoothing: 그레이 스케일; 텍스트 정렬: center; 색상: #2c3e50; margin-top: 60px; } #태그라인 이미지 { 높이: 38px; margin: 10px; } H1, H2 { 글꼴 무게: 정상; } ul { 목록 스타일 유형: 없음; 패딩: 0; } li { 디스플레이: 인라인 블록; margin: 0 10px; } a { 색상: #42b983; } </style> |
이것이 클라이언트 측 코드의 대부분입니다.
템플릿 섹션이나 CSS에 대해서는 자세히 설명하지 않겠습니다. 한 가지 멋진 요소를 지적하겠습니다. Here API는 무엇보다도 지도에서 사용하기에 적합한 아이콘에 대한 링크를 반환합니다. 흐름을 따라가다 보면 지도 마커가 포함 URL을 사용하여 해당 아이콘을 직접 로드하는 것을 볼 수 있습니다.
Vue 데이터 바인딩 설정
스크립트 섹션을 살펴보면 Vue의 반응형 기능을 많이 사용하는 것을 볼 수 있습니다. 이 부분을 이해하려면 Vue에 대해 어느 정도 익숙하다면 도움이 될 것입니다. 계산된 속성 및 감시자, 데이터, 메서드 및 라이프사이클 훅.
우리는 탑재 라이프사이클 콜백을 사용하여 서버에서 보낸 이벤트에 대한 리스너를 추가하고 처음에 도시 드롭다운 목록을 채울 수 있습니다. 여기서 비즈니스 로직의 더 무거운 작업은 데이터베이스 쿼리에서 이루어집니다.
도시 선택이 어떻게 작동하는지 추적해 보겠습니다. 버튼 드롭다운의 모든 항목에는 다음을 설정하는 클릭 리스너가 바인딩되어 있습니다. 선택 를 해당 항목의 도시 데이터에 추가합니다. 감시 메서드가 정의되어 있습니다. 선택. 또한 Vue는 계산된 프로퍼티를 자동으로 인식합니다. 디스플레이 에 따라 달라집니다. 선택.
즉, 드롭다운을 통해 도시가 선택될 때마다 일련의 활동이 이루어집니다. 변경 선택 원인 디스플레이 를 다시 계산하도록 설정합니다. 그러면 드롭다운 버튼 텍스트가 다음과 같이 설정됩니다. 디스플레이. . 선택메서드의 시계 섹션은 새 도시를 선택할 때마다 호텔 목록 테이블을 새로 고치도록 트리거합니다.
표 항목 는 목적지 공급자 아래 메소드. 테이블을 새로 고치면 해당 코드가 실행됩니다. 원래 도시 목록과 마찬가지로 서버 REST 엔드포인트를 통해 데이터베이스에 대한 비동기 호출을 통해 호텔을 가져옵니다.
Vue는 여기서 많은 부분을 처리합니다. 예를 들어 테이블을 새로 고치는 호출은 데이터를 즉시 수신하지 않습니다. Vue는 REST 호출이 반환될 때마다 DOM의 관련 부분을 자동으로 다시 렌더링합니다. 우리는 다음과 같은 바인딩을 지정하는 것 외에는 배선을 제공할 필요가 없습니다. 항목 그리고 대상 공급자.
웹 클라이언트 완성하기
main.js. 가져오기 줄을 추가하고 Vue에 새 컴포넌트를 사용하도록 지시합니다. 다음은 최종 코드입니다.|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
가져오기 구성 에서 './config' 가져오기 Vue 에서 'vue' 가져오기 부트스트랩뷰 에서 "부트스트랩 뷰" 가져오기 앱 에서 './App.vue' 가져오기 "bootstrap/dist/css/bootstrap.min.css" 가져오기 "bootstrap-vue/dist/bootstrap-vue.css" 가져오기 * as VueGoogleMaps 에서 'vue2-google-maps' Vue.사용(부트스트랩뷰) Vue.사용(VueGoogleMaps, { load: { 키: 구성.구글맵키 } }) new Vue({ el: '#app', 렌더링: h => h(앱) }) |
파일에서 Google 지도 API 키를 로드합니다. config.js. 해당 파일을 생성하고 지금은 이 플레이스홀더 코드를 추가합니다.
|
1 2 3 |
내보내기 기본값 { 구글맵키: '' } |
프로젝트를 다시 빌드(npm 실행 빌드). 서버를 시작하고 사이트를 다시 로드하면 다음과 같이 실제 클라이언트가 시작되는 것을 볼 수 있습니다.
웹 서버 코드
다음으로 서버 측을 작성하겠습니다. 서버는 웹 페이지를 제공하고 필요한 REST API를 노출합니다. API는 대부분 데이터베이스 기능을 편리하게 패키징한 것입니다.
서버 소스에서 원본 app.js 이걸로.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
글로벌.약속 = require('bluebird'); require('dotenv').구성(); const express = require('express'); const debug = require('debug')('poi:server'); const 경로 = require('경로'); const 파비콘 = require('serve-favicon'); const logger = require('morgan'); const 쿠키 파서 = require('쿠키 파서'); const bodyParser = require('body-parser'); const http = require('http'); const https = require('https'); const fs = require('fs'); const 카우치베이스 = require('couchbase'); const 클러스터 = new 카우치베이스.클러스터(프로세스.환경.클러스터); 클러스터.인증(프로세스.환경.클러스터_사용자, 프로세스.환경.클러스터_암호); const 앱 = express(); 앱.현지인.카우치베이스 = 카우치베이스; 앱.현지인.클러스터 = 클러스터; 앱.현지인.여행 = 클러스터.오픈버킷('travel-sample'); 앱.현지인.이벤트 = 클러스터.오픈버킷('이벤트'); 앱.사용(파비콘(경로.join(__dirname, 'images/favicon.ico'))); 앱.사용(logger('dev')); 앱.사용(bodyParser.json()); 앱.사용(bodyParser.urlencoded({ 확장: false })); 앱.사용(쿠키 파서()); 앱.사용(함수(req, res, 다음) { res.헤더("액세스 제어-허용-오리진", "*"); res.헤더("액세스 제어-허용-헤더", "원본, X-요청-함께, 콘텐츠 유형, 수락"); 다음(); }); 앱.사용(express.정적(경로.join(__dirname, '../client'))); const 레코드 = require('./routes/records'); 앱.사용('/기록', 레코드); const 이벤트 = require('./routes/events'); 앱.사용('/events', 이벤트); // 404를 잡아 오류 처리기로 전달합니다. 앱.사용(함수(req, res, 다음) { 콘솔.dir(req); 콘솔.dir(res); let err = new 오류('찾을 수 없음'); err.상태 = 404; 다음(err); }); // 오류 처리기 앱.사용(함수(err, req, res, 다음) { // 로컬 설정, 개발 시 에러만 제공 res.현지인.메시지 = err.메시지; res.현지인.오류 = req.앱.get('env') === '개발' ? err : {}; // 오류 페이지 렌더링 res.상태(err.상태 || 500); res.렌더링('error'); }); // HTTP 서버 const http_port = 프로세스.환경.HTTP_PORT; const http_서버 = http.createServer(앱); http_서버.듣기(http_port); http_서버.on('error', onError); http_서버.on('듣기', onListening); // HTTPS 서버 const 옵션 = { 키: fs.readFileSync(경로.join('ssl', 'key.pem')), cert: fs.readFileSync(경로.join('ssl', 'cert.pem')) }; const https_port = 프로세스.환경.HTTPS_PORT; const https_서버 = https.createServer(옵션, 앱); https_서버.듣기(https_port); https_서버.on('error', onError); https_서버.on('듣기', onListening); /** * HTTP/S 서버 "오류" 이벤트에 대한 이벤트 리스너. */ 함수 onError(오류) { 만약 (오류.syscall !== 'listen') { throw 오류; } let 바인드 = typeof 포트 === '문자열' ? '파이프 ' + 포트 : '포트 ' + 포트; // 친숙한 메시지로 특정 수신 오류 처리 스위치 (오류.코드) { case 'EACCES': 콘솔.오류(바인드 + ' 상승된 권한이 필요합니다.); 프로세스.exit(1); break; case 'EADDRINUSE': 콘솔.오류(바인드 + ' 이미 사용 중입니다.); 프로세스.exit(1); break; 기본값: throw 오류; } } /** * HTTP/S 서버 "수신 중" 이벤트에 대한 이벤트 리스너. */ 함수 onListening() { let addr = 이.주소(); let 바인드 = typeof addr === '문자열' ? '파이프 ' + addr : '포트 ' + addr.포트; debug('듣기' + 바인드); } |
주요 차이점은 Couchbase 서버 노드 클라이언트 설정과 REST 엔드포인트에 대한 경로의 배선입니다. 그 외에도 http와 https를 통한 서비스와 같은 다른 추가 코드도 있습니다. 이러한 부분은 다루지 않겠습니다.
카우치베이스 서버에 연결
데이터베이스에 연결하기 위한 두 개의 코드 블록은 매우 간단합니다.
|
1 2 3 4 5 6 7 8 9 10 |
const 카우치베이스 = require('couchbase'); const 클러스터 = new 카우치베이스.클러스터(프로세스.환경.클러스터); 클러스터.인증(프로세스.환경.클러스터_사용자, 프로세스.환경.클러스터_암호); ... 앱.현지인.카우치베이스 = 카우치베이스; 앱.현지인.클러스터 = 클러스터; 앱.현지인.여행 = 클러스터.오픈버킷('travel-sample'); 앱.현지인.이벤트 = 클러스터.오픈버킷('이벤트'); |
처음 세 줄은 Couchbase 노드 클라이언트를 가져오고, 데이터베이스 노드 클러스터를 나타내는 새 클러스터 객체를 생성하고, 해당 클러스터에 인증합니다. 그러면 데이터베이스에 대한 연결이 시작됩니다.
편의를 위해 클라이언트 및 클러스터 개체에 대한 참조를 다음 주소에 추가합니다. app.locals. 따라서 전 세계에서 사용할 수 있습니다.
마지막으로 이 코드는 두 버킷에 대한 연결을 설정하고 저장합니다. 버킷 는 카우치베이스의 높은 수준의 조직 구조입니다.
첫 번째 버킷은 Couchbase Server 설치와 함께 제공되는 샘플 데이터로 채우겠습니다. 두 번째 버킷의 경우, 여기서는 약간 수정하고 있습니다. 메타데이터 버킷이 필요합니다. 이벤트 서비스. 앞으로 살펴보겠지만 기본 버킷이 아닌 다른 곳에 저장해야 하는 몇 가지 추가 문서만 저장하면 됩니다. 세 번째 버킷을 만드는 대신 이벤트 발생 데이터와 함께 넣었습니다. 일반적으로 프로덕션 환경에서는 이 단축키를 사용하지 않습니다.
정적 파일 및 API 경로
클라이언트 코드에서 구축한 정적 페이지를 제공하고 서버 데이터 API를 구성하기 위해 Express에 지시해야 하는 코드가 몇 줄만 있습니다.
|
1 2 3 4 5 6 |
앱.사용(express.정적(경로.join(__dirname, '../client'))); const 레코드 = require('./routes/records'); 앱.사용('/기록', 레코드); const 이벤트 = require('./routes/events'); 앱.사용('/events', 이벤트); |
보일러 플레이트 index.html 앱의 홈 페이지에 dist 를 모든 파일 경로에 추가합니다. 즉, 정적 파일은 실제로 다음과 같은 루트 디렉터리에서 제공됩니다. /클라이언트/dist.
데이터 API를 두 개의 그룹으로 분리하여 일반적인 경로 하위 디렉토리에 있습니다. 로 시작하는 엔드포인트가 있습니다. 레코드. 데이터베이스에서 데이터를 검색합니다.
그리고 이벤트 경로는 고유합니다. 엔드포인트는 웹 클라이언트와 카우치베이스 이벤트 서비스 모두에서 사용됩니다.
이제 레코드 코드를 먼저 입력합니다.
데이터베이스 액세스 API
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
const express = require('express'); const 라우터 = express.라우터(); 라우터.get('/목적지', 비동기 함수(req, res, 다음) { let 카우치베이스 = req.앱.현지인.카우치베이스; let 여행 = req.앱.현지인.여행; let 쿼리 약속 = 약속.약속(여행.쿼리, { 컨텍스트: 여행 }); let 쿼리 = `SELECT DISTINCT airport.city를 이름으로 선택합니다. 에서 `여행-샘플` 공항 INNER JOIN `여행-샘플호텔 해시(프로브) 사용 ON 호텔.도시 = 공항.도시 WHERE airport.type = 'airport' AND hotel.type = 'hotel';`; 쿼리 = 카우치베이스.N1qlQuery.fromString(쿼리); 기다림 쿼리 약속(쿼리) .다음(행 => res.json(행)) .catch(err => { 콘솔.로그(err); res.상태(500).보내기({ 오류: err }); }); }); 라우터.get('/hotels/byCity/:id', 비동기 함수(req, res, 다음) { let 카우치베이스 = req.앱.현지인.카우치베이스; let 여행 = req.앱.현지인.여행; let 쿼리 약속 = 약속.약속(여행.쿼리, { 컨텍스트: 여행 }); let 쿼리 = `선택 호텔.이름, 호텔.주소, 공항.공항명, 공항.icao, 호텔.지역 에서 `여행-샘플` 공항 INNER JOIN `여행-샘플호텔 ON hotel.type = 'hotel' AND hotel.city = airport.city WHERE airport.type = 'airport' AND airport.city = '${req.params.id}' LIMIT 5;`; 쿼리 = 카우치베이스.N1qlQuery.fromString(쿼리); 기다림 쿼리 약속(쿼리) .다음(행 => res.json(행)) .catch(err => { 콘솔.로그(err); res.상태(500).보내기({ 오류: err }); }); }); 라우터.post('/선택/지역', 비동기 함수(req, res, 다음) { let 카우치베이스 = req.앱.현지인.카우치베이스; let 여행 = req.앱.현지인.여행; let 쿼리 약속 = 약속.약속(여행.쿼리, { 컨텍스트: 여행 }); let 위치 = JSON.문자열화(req.body); let 쿼리 = `UPSERT INTO `여행-샘플` (KEY, VALUE) VALUES('trigger', ${location})`; 쿼리 = 카우치베이스.N1qlQuery.fromString(쿼리); 기다림 쿼리 약속(쿼리) .다음(응답 => res.json(응답)) .catch(err => { 콘솔.로그(err); res.상태(500).보내기({ 오류: err }); }); }); 모듈.수출 = 라우터; |
여기에는 세 가지 경로가 정의되어 있습니다, /목적지, /hotels/byCity/:id및 /선택/지역. 모두 기본 구조는 동일합니다. 데이터베이스 참조를 가져오고, 블루버드를 사용하여 쿼리 메서드의 프로미스 버전을 만들고, 쿼리 메서드에 대한 N1QL 쿼리를 실행하고 결과를 반환합니다.
가장 간단한 쿼리부터 시작해 보겠습니다.
N1QL 쿼리
우리는 /선택/지역 엔드포인트를 사용하여 사용자가 현재 선택한 호텔을 저장합니다. 다음은 쿼리 분석 결과입니다.
|
1 |
UPSERT INTO `여행-샘플` (KEY, VALUE) 가치('트리거', ${위치}) |
UPSERT 은 문서를 수정하거나 문서가 없는 경우 새로 만듭니다. 선택한 호텔의 지리적 위치를 문서에 다음과 같은 ID로 저장합니다. 트리거. 이상하게 들릴 수도 있습니다. 나중에 이벤트 코드에 대해 설명하면 더 이해가 쉬울 것입니다. 우리가 정말로 관심 있는 것은 호텔 위치가 아니라 근처의 관심 지점입니다. 이 문서는 이러한 관심 지점을 검색하는 시퀀스를 설정합니다. 따라서 문서를 호출하는 이유는 다음과 같습니다. 트리거.
다음은 생성된 문서의 예입니다.
트리거
|
1 2 3 4 5 |
{ "정확도": "APPROXIMATE", "lat": 43.9397954, "lon": 4.805895400000054 } |
이해하려면 /hotels/byCity/:id 쿼리를 사용하려면 먼저 몇 가지 예제 문서를 살펴보세요.
hotel_1359
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
{ "주소": "13-15 애비뉴 몽클라르", "alias": null, "체크인": null, "checkout": null, "city": "아비뇽", "country": "프랑스", "설명": "전용 주차장 내에 꽃이 만발한 정원이 내려다보이는 가족이 운영하는 호텔입니다. 건물 전체에서 인터넷 Wi-Fi를 이용하실 수 있습니다. 전형적인 프로방스 스타일로 최근 리모델링한 객실. 7개 언어 지원. 개인 택시 서비스.", "방향": "시내의 주요 도로와 버스 정류장을 마주하고 있는 중앙역 바로 뒤", "이메일": null, "팩스": "04 26 23 68 31", "free_breakfast": true, "free_인터넷": false, "free_parking": true, "geo": { "정확도": "APPROXIMATE", "lat": 43.9397954, "lon": 4.805895400000054 }, "id": 1359, "name": "아비뇽 호텔 몽클라르", "pets_ok": true, "전화": "+33 4 90 86 20 14", "가격": "실내 샤워실과 욕실이 딸린 더블룸 €30-60, 스튜디오와 아파트는 €75부터, 아침 식사 €7 오전 7시 30분부터 오전 11시까지 정원에서 식사 가능", "public_likes": ["비센테 윌리엄슨"], "리뷰": [...], "state": "프로방스 알프 코트 다쥐르", "title": "아비뇽", "무료": null, "type": "호텔", "url": "http://hotel-monclar.com/en", "vacancy": true } |
airport_1361
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "공항명": "Caumont", "city": "아비뇽", "country": "프랑스", "faa": "AVN", "geo": { "alt": 124, "lat": 43.9073, "lon": 4.901831 }, "icao": "LFMV", "id": 1361, "type": "공항", "tz": "유럽/파리" } |
호텔 테이블에는 호텔 이름, 주소, 지리적 위치, 공항 이름 및 공항 코드가 필요합니다. 당연히 두 문서의 데이터를 결합해야 합니다. 이를 위해 내부 가입. 쿼리는 다음과 같습니다.
|
1 2 3 4 5 6 7 |
선택 호텔.이름, 호텔.주소, 공항.공항명, 공항.icao, 호텔.geo FROM `여행-샘플` 공항 INNER JOIN `여행-샘플` 호텔 켜기 호텔.유형 = 'hotel' AND 호텔.도시 = 공항.도시 어디 공항.유형 = 'airport' AND 공항.도시 = '${req.params.id}' LIMIT 5; |
살펴보면 동일한 버킷의 문서를 사용하여 조인을 수행할 수 있음을 알 수 있습니다. 더 명확하게 하기 위해 별칭을 사용했습니다. 각 문서의 도시를 사용하여 조인 조건을 구성합니다. 또한 문서 유형를 조인 조건과 어디 절을 추가합니다. 조인 조건은 매우 정교할 수 있습니다. 다음 내용을 읽어보세요. 블로그 게시물에서 자세한 내용과 예를 확인할 수 있습니다.
마지막으로 처음에 도시 목록을 어떻게 만들었는지 살펴봅시다. 다음은 /목적지엔드포인트.
|
1 2 3 4 5 6 7 |
선택 DISTINCT 공항.도시 as 이름 FROM `여행-샘플` 공항 INNER JOIN `여행-샘플` 호텔 사용 HASH(프로브) 켜기 호텔.도시 = 공항.도시 어디 공항.유형 = 'airport' AND 호텔.유형 = 'hotel'; |
반환되는 유일한 결과는 도시 이름 목록입니다. 이 경우 내부 조인을 필터로 효과적으로 사용하고 있습니다. 공항 도시와 호텔 도시를 일치시키면 두 도시가 모두 있는 도시 목록만 반환됩니다.
내부 조인은 알고리즘적으로 두 가지 접근 방식을 사용할 수 있습니다. 첫 번째로 살펴본 조인은 기본 중첩 루프 조인을 사용합니다.
이 마지막 예는 인메모리 해시 테이블을 사용합니다. 이렇게 하면 특히 두 데이터 집합 중 하나가 작은 경우 조인 속도를 크게 높일 수 있습니다. 여기서는 "USE HASH()" 힌트를 사용하여 쿼리 최적화를 원하는 방식을 N1QL에 알려줍니다. "프로브" 측면과 "빌드" 측면이 있습니다. 해시 테이블은 빌드 쪽 데이터에서 작성됩니다. 조인은 프로브 쪽 데이터에서 조회를 수행합니다.
위에서 제공한 힌트는 이 경우 프로브 측에 호텔 데이터를 사용하도록 N1QL에 지시합니다. 즉, 공항 데이터에서 테이블을 구축한 다음 호텔 데이터를 사용하여 해시 조회를 수행합니다.
이전에 해보지 않았다면 웹 관리 콘솔의 일부인 Couchbase Server 쿼리 워크벤치에서 이러한 쿼리를 직접 사용해 보시기 바랍니다.
서버 전송 이벤트
에 대한 이벤트 리스너 설정은 이미 언급했습니다. 서버 전송 이벤트 를 클라이언트 측에 표시합니다. 이 두 엔드포인트는 서버에 무엇이 필요한지 보여줍니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const express = require('express'); const 라우터 = express.라우터(); const sse = require('sse-channel'); const poi = new sse(); 라우터.get('/poi', (req, res) => poi.추가 클라이언트(req, res)); 라우터.post('/poi', 비동기 함수(req, res, 다음) { res.보내기(''); let msg = { 이벤트: 'poi' }; msg.데이터 = JSON.문자열화(req.body); poi.보내기(msg); }); 모듈.수출 = 라우터; |
"가져오기" 버전의 poi 엔드포인트가 브라우저에서 호출될 때 이벤트 소스 가 구성됩니다. 호출자를 클라이언트로 추가하기만 하면 됩니다.
저희는 '포스트' 버전을 클라이언트에 데이터를 전송하는 중간 단계로 사용합니다. 그리고 res.send(''); 줄에서 작동 방식에 대한 힌트를 얻을 수 있습니다. 이벤트 코드에서는 N1QL cURL 기능을 사용하여 이 엔드포인트로 데이터를 푸시합니다. 빈 응답은 해당 트랜잭션을 종료하기 위한 것입니다.
그런 다음 서버는 데이터를 수신 중인 모든 클라이언트에 전달합니다. 더 자세한 내용이 있습니다. 더 자세히 알아보고 싶으시다면 이 문서 에는 좋은 정보가 있습니다.
서버 완료
프로젝트의 서버 측을 완성하려면 하위 디렉터리를 만듭니다. 경로 서버 디렉터리 아래에 있습니다.
복사 레코드 위의 코드를 경로 아래의 파일에 records.js. 복사 이벤트 라는 파일에 위의 코드를 events.js. 마지막으로 서버 디렉터리 자체에 다음과 같은 이름의 새 파일을 만듭니다. .env. 여기에 다음 구성 매개변수를 붙여넣고 저장합니다. (물론 필요에 따라 설정을 변경할 수 있습니다.)
|
1 2 3 4 5 6 |
HTTP_PORT=8080 HTTPS_PORT=8081 DEBUG=노드,http,poi:* 클러스터='couchbase://localhost:8091' 클러스터_사용자=관리자 클러스터_암호=비밀번호 |
이제 서버를 사용할 준비가 되었습니다. 서버 루트 디렉토리에서 노드 app.js. 클라이언트 코드를 먼저 빌드하는 것을 잊지 마세요.
카우치베이스 서버 이벤트 서비스 코드
이 앱을 작동시키는 마지막 특별한 소스는 다음과 같습니다. 5.5.0 버전에서 Couchbase는 이벤트 서비스. 5.5 릴리스 시리즈에서 제가 가장 좋아하는 새로운 기능입니다. 이 서비스의 일부로 제공되는 첫 번째 구성 요소는 Couchbase 함수입니다. 간단히 말해, 함수를 사용하면 코드를 실행할 수 있습니다. 데이터베이스 서버에서 데이터베이스의 변경 사항에 대한 응답으로
함수는 표준 자바스크립트로 작성되며, 일부 함수는 추가 및 제한 사항. 필요한 함수를 만들려면 다음 단계를 따르세요.
메타데이터 버킷 이벤트
먼저 이벤트 메타데이터를 위한 버킷을 생성합니다.
- 필요한 경우 Couchbase Server 콘솔을 열고 로그인합니다.
- 왼쪽 메뉴에서 '버킷'을 클릭합니다.
- 오른쪽 상단 모서리에 있는 '버킷 추가'를 클릭합니다.
- 입력
이벤트을 입력하면 나타나는 대화 상자에서 버킷 이름을 입력합니다. - 완료하려면 "버킷 추가"를 클릭하세요.
함수 추가하기
이제 함수를 구성하고 코드를 추가합니다.
- 왼쪽 메뉴에서 '이벤트'를 클릭합니다.
- 오른쪽 상단 모서리에 있는 '기능 추가'를 클릭합니다.
그러면 대화 상자가 나타납니다.
- 선택
여행 샘플소스 버킷으로 - 선택
이벤트메타데이터 버킷으로 - 입력
모니터(또는 원하는 대로)를 함수 이름으로 입력합니다. - "바인딩"에서 다음을 설정합니다.
유형를 "별칭"으로 변경합니다,이름를 "여행 샘플"로 설정하고값"DB" - "다음"을 클릭합니다: 코드 추가"
그러면 코드 편집기로 이동합니다. 함수 서명이 미리 채워져 있습니다. 대신 이 코드를 복사하세요.
https://gist.github.com/HodGreeley/9e25f9072247e180ec5cd764d9048c3b#file-poi-js
함수 배포
이 코드를 배포하려면 먼저 '저장'을 클릭한 다음 왼쪽 메뉴에서 '이벤트'를 다시 클릭합니다. 함수에 대한 항목이 표시됩니다. 해당 막대의 아무 곳이나 클릭합니다. 해당 항목이 확장되는 것을 볼 수 있습니다.
"배포"를 클릭한 다음 "기능 배포"를 클릭하기만 하면 됩니다.
함수 코드 이해하기
온업데이트 는 문서가 변경될 때마다 호출됩니다. 이 함수는 문서와 문서 메타데이터를 매개변수로 받습니다.
저희는 트리거 문서를 변경하여 새 호텔을 선택했음을 나타냅니다. 첫 번째 줄은 문서 ID(문서 키라고도 함)를 기준으로 다른 모든 문서를 필터링합니다.
다음 줄은 몇 가지 흥미로운 점을 보여줍니다. Recall db 는 여행 샘플 버킷의 별칭입니다. db['here'] ID가 있는 문서를 직접 검색합니다. 여기. 여기에 필요한 자격 증명을 저장합니다. 여기 매핑 서비스.
관심 포인트 요청을 위한 URL과 데이터를 준비합니다. 여기에는 API에 흥미로운 기능이 많이 있습니다. 저희는 기본적인 요청만 하고 있습니다.
이 정보가 준비되었으므로 cURL 호출을 할 준비가 되었습니다. N1QL 쿼리를 작성하면 표준 JavaScript의 수정 사항 중 하나를 볼 수 있습니다: 쿼리 워크벤치에서 쿼리를 구성할 때와 마찬가지로 인라인으로 쿼리를 작성할 수 있습니다.
cURL 쿼리에서 또 다른 멋진 세부 사항을 볼 수 있습니다. N1QL은 결과를 필터링하기 위한 편리한 구문을 제공합니다. 경로를 추가하면 .results.item 끝까지 원하는 데이터만 확보합니다.
그런 다음 쿼리를 실행하고 동일한 쿼리를 사용하여 db[] 속기, 업데이트 poi 문서에 추가합니다. 이것은 함수를 사용하여 데이터를 보강하는 예시입니다. 다른 시나리오에서는 데이터베이스의 레코드에서 업데이트를 전적으로 도출할 수도 있습니다. 예를 들어 고객이 상품을 선택하면 장바구니의 모든 세부 정보를 입력할 수 있습니다.
마지막으로, 관심 지점을 손에 들고 다시 cURL을 사용하여 데이터를 웹 서버 엔드포인트로 푸시합니다. "포스트" 버전의 poi API는 들어오는 데이터를 수집하여 등록된 클라이언트에 다시 푸시합니다. 따라서 폴링할 필요 없이 클라이언트 UI가 데이터베이스 변경에 반응하도록 할 수 있습니다.
최종 단계
이제 이 모든 것을 통합할 준비가 되었습니다. 앱을 그대로 사용해 볼 수 있지만 지도 부분은 아직 작동하지 않습니다. 이를 위해서는 Google 지도 API 키와 HERE의 자격 증명 세트가 필요합니다.
지도 키는 config.js 파일을 추가합니다. HERE 키를 문서에 저장한 후 이벤트 버킷에 추가합니다. 관리자 콘솔에서 왼쪽 메뉴의 '문서'를 클릭한 다음 오른쪽 상단의 '문서 추가'를 클릭하면 바로 이 작업을 수행할 수 있습니다. 이것을 템플릿으로 사용하세요.
여기
|
1 2 3 4 |
{ "id": "TPxxxxxxxxxxxxxx", "code": "whsxxxxxxxxxxxxxxx" } |
마지막으로, 보안을 위해 cURL은 기본적으로 비활성화되어 있습니다. 관리자 콘솔에서 다음을 수행합니다.
- 왼쪽 메뉴에서 '설정'을 클릭합니다.
- 클릭하여 "고급 쿼리 설정"을 확장합니다.
- "CURL() 함수 액세스"에서 "제한 없음"을 선택합니다.
이것은 not 프로덕션에 사용할 수 없습니다. 대신 선택한 URL 집합의 화이트리스트가 필요할 것입니다. 하지만 우리 프로젝트에는 이 방법이 적합합니다.
그런 다음 웹 서버 디렉토리에서 다음을 실행합니다. 노드 app.js. Open localhost:8080 (또는 브라우저의 .env)를 클릭하고 사용해 보세요.
출처
전체 앱의 소스는 GitHub에서 찾을 수 있습니다. 여기. 스크립트를 포함했습니다. 설정 를 실행하여 모든 준비를 간소화하세요. 그냥 실행 ./setup 를 클릭하고 키를 입력합니다. (먼저 실행 가능한 상태로 만들어야 할 수도 있습니다.) 그래도 다음을 실행해야 합니다. npm 설치를 클릭하고 클라이언트 코드를 빌드합니다.
좋은 게시물입니다! 감사합니다.
깃허브 리포지토리에 대한 첫 번째 링크가 잘못되었습니다. 끝에 ":"가 있습니다.