Typeahead: Develop with Couchbase Full-Text Search & Node.js

지난 1년여 동안 저는 다양한 튜토리얼을 작성했습니다. 전체 텍스트 검색 (FTS) 서비스는 대부분 SDK 중 하나를 사용하여 무언가를 수행하는 방법에 대한 구체적인 예제이며, 그 뒤에 있는 애플리케이션과는 전혀 관련이 없습니다. 가능한 많은 실제 애플리케이션 중 하나는 웹 애플리케이션 양식에서 타이프헤드 또는 데이터 제안 기능을 사용하는 것입니다. 사용자 입력에 따라 가능한 결과를 검색하여 표시합니다.

다음에서 전체 텍스트 검색 서비스를 사용하여 타이포헤드 양식을 작성하는 방법을 살펴보겠습니다. 카우치베이스, Node.js 및 jQuery를 사용하여 모든 것을 하나로 묶습니다.

너무 깊이 들어가기 전에, 전체 텍스트 검색을 사용하도록 설정된 Couchbase Server 5.0 이상을 이미 설치 및 구성했다는 가정이 필요합니다. API가 Node.js 및 Express Framework로 구동되므로 Node.js도 이미 설치되어 있다고 가정합니다.

FTS 인덱스를 사용하여 NoSQL 데이터 집합 만들기

FTS로 작업할 때는 잠재적으로 무제한의 검색 시나리오 중 하나를 사용할 수 있습니다. 이 예제에서는 좀 더 구체적으로 설명하겠습니다.

음악 데이터로 작업하고 있고 아티스트, 앨범 또는 노래 제목을 기준으로 노래를 검색하는 것이 목표라고 가정해 보겠습니다. 각 NoSQL 문서가 다음과 같은 형식을 취한다고 가정해 보겠습니다:

{
  "title": "Love Story",
  "artist": "Taylor Swift",
  "album": "Fearless",
  "type": "song"
}

{

"title": "러브 스토리",

"artist": "테일러 스위프트",

"album": "Fearless",

"type": "song"

}

가장 복잡한 JSON 문서는 아니지만, 우리가 원한다면 그렇게 될 수도 있습니다. 이 예제에서는 이 예제에서는 단지 title 및 아티스트확장하는 데 더 많은 노력이 필요하지 않음에도 불구하고 말입니다.

FTS를 사용하려면 Couchbase에서 다음과 같은 특수 인덱스를 만들어야 합니다:

요약하자면, 인덱스의 이름을 정하고, 유형 매핑을 지정하고, 인덱싱할 필드를 정의해야 하며, 이 모든 것이 인덱스 자체에 저장됩니다.

인덱스를 만들 때 필드를 저장하는 것이 중요합니다. 그렇지 않으면 타이프헤드에 표시할 내용이 없습니다.

검색을 위한 Node.js RESTful API 엔드포인트 개발하기

이제 데이터베이스에 일부 데이터가 있고 검색을 위해 인덱스가 생성되었으므로 Node.js로 API 엔드포인트를 만들 수 있습니다. 이 API의 핵심은 검색 양식에서 사용할 엔드포인트 역할을 하는 것입니다. 결국, 클라이언트 대면 프론트엔드가 데이터베이스를 직접 공격하는 것은 안전하지 않으므로 원하지 않을 것입니다.

컴퓨터에서 새 프로젝트를 만들고 명령줄에서 다음을 실행합니다:

npm init -y
npm install couchbase cors express --save

1 2	npm init -y npm 설치 카우치베이스 cors express --저장

위의 명령은 새로운 package.json 파일을 열고 프로젝트의 몇 가지 종속성을 설치합니다. Express 프레임워크와 함께 Couchbase SDK를 사용하며, 교차 출처 리소스 공유(CORS)를 처리하기 위한 패키지를 설치합니다.

애플리케이션의 크기가 작기 때문에 app.js 파일을 프로젝트에 추가하여 모든 코드를 포함할 수 있습니다. 다음을 사용하여 부트스트랩할 수 있습니다:

const Couchbase = require("couchbase");
const Express = require("express");
const Cors = require("cors");

var app = Express();
var cluster = new Couchbase.Cluster("couchbase://localhost");
cluster.authenticate("example", "123456");
var bucket = cluster.openBucket("example");

app.use(Cors());

app.get("/search", (request, response) => { });

app.listen(3000, () => {
    console.log("Listening at :3000...");
});

const 카우치베이스 = require("couchbase");

const Express = require("express");

const Cors = require("cors");

var 앱 = Express();

var 클러스터 = new 카우치베이스.클러스터("couchbase://localhost");

클러스터.인증("예제", "123456");

var 버킷 = 클러스터.오픈버킷("예제");

앱.사용(Cors());

앱.get("/검색", (요청, 응답) => { });

앱.듣기(3000, () => {

콘솔.로그("듣기 : 3000...");

});

위의 코드에서는 다운로드한 종속 요소를 가져와서 Express를 구성하고 Couchbase 인스턴스에 연결했습니다. 연결 정보를 실제 데이터베이스 인스턴스의 정보로 바꿔야 합니다.

그리고 /검색 엔드포인트는 모든 마법이 일어나는 곳입니다. 자세히 살펴보겠습니다:

app.get("/search", (request, response) => {
    var SearchQuery = Couchbase.SearchQuery;
    var query = SearchQuery.new("idx-music", SearchQuery.match(request.query.query).fuzziness(1));
    query.fields(["title", "artist"]);
    bucket.query(query, function(error, result, meta) {
        if(error) {
            return response.status(500).send({ message: error.message });
        }
        result = result.map(item => {
            return {
                id: item.id,
                score: item.score,
                title: item.fields.title,
                artist: item.fields.artist
            };
        });
        response.send(result);
    });
});

앱.get("/검색", (요청, 응답) => {

var 검색 쿼리 = 카우치베이스.검색 쿼리;

var 쿼리 = 검색 쿼리.new("idx-music", 검색 쿼리.일치(요청.쿼리.쿼리).흐릿함(1));

쿼리.필드(["title", "artist"]);

버킷.쿼리(쿼리, 함수(오류, 결과, 메타) {

만약(오류) {

반환 응답.상태(500).보내기({ 메시지: 오류.메시지 });

}

결과 = 결과.지도(항목 => {

반환 {

id: 항목.id,

점수: 항목.점수,

title: 항목.필드.title,

아티스트: 항목.필드.아티스트

};

});

응답.보내기(결과);

});

먼저 쿼리를 특정 인덱스에 대한 일치 쿼리로 정의합니다. 일치 쿼리는 요청의 쿼리 매개변수를 통해 전달된 모든 텍스트를 사용합니다. 또한 단어의 철자 오류를 수용하기 위해 값이 1인 퍼지 검색을 사용할 것입니다.

쿼리를 실행하기 전에 쿼리를 실행하기 전에 우리는 title 그리고 아티스트 를 결과에서 다시 클릭합니다. 이는 인덱스에 추가한 것과 동일한 필드입니다.

쿼리가 성공적으로 실행되면 결과를 구문 분석하여 응답과 함께 제공되는 추가 메타데이터가 아닌 원하는 항목만 반환합니다.

cURL 요청을 사용하여 http://localhost:3000/search?query=swift 에 접속하면 데이터 집합에 따라 다양한 결과를 확인할 수 있습니다.

jQuery 및 Typeahead 라이브러리로 프론트엔드 디자인하기

cURL로 검색하는 것도 나름의 가치가 있지만, 대부분의 경우 우리가 원하는 것은 아닙니다. 대신 쉽게 사용할 수 있는 웹 기술을 사용하여 클라이언트용 프런트엔드를 만들어야 합니다.

많은 잠재적 라이브러리가 있지만 여기서는 typeahead.js 에서 관리합니다. 다운로드해야 하지만 여기서는 다음 버전을 사용한다는 점에 유의하세요. 0.10.5 의 버그로 인해 라이브러리가 중단되었습니다. 라이브러리 문제를 해결하느라 하루의 상당 시간을 허비하고 나서야 이 사실을 알게 되었습니다.

다음 구조를 포함하는 프로젝트를 만듭니다:

js
  handlebars-v4.0.11.js
  jquery-3.3.1.min.js
  typeahead.bundle.min.js
index.html

핸들바-v4.0.11.js

jquery-3.3.1.min.js

타입헤드.번들.분.js

색인.html

예, 다음이 필요합니다. 핸들바.js 그리고 jQuery 이 프론트엔드로 성공하기 위해. 제가 알기로는 버전은 중요하지 않으며, 타이포헤드 라이브러리의 버전만 신경쓰면 됩니다.

프로젝트의 index.html 파일에 다음을 포함합니다:

<html>
    <head>
        <style>
            .tt-input, .tt-hint, .twitter-typeahead {
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div id="remote">
            <input class="typeahead" type="text" placeholder="Songs...">
        </div>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/handlebars-v4.0.11.js"></script>
        <script src="js/typeahead.0.10.5.bundle.min.js"></script>
        <script>
            $('#remote .typeahead').typeahead(
                {
                    hint: true,
                    minLength: 3,
                    highlight: false,
                    limit: 5
                }, {
                    name: "song",
                    displayKey: "id",
                    source: function (query, callback) {
                        $.getJSON("http://localhost:3000/search?query=" + query, function (data) {
                            return callback(data);
                        });
                    },
                    templates: {
                        suggestion: Handlebars.compile('<div>{{title}} – {{artist}}</div>')
                    }
                }
            );
        </script>
    </body>
</html>

<html>

<head>

<style>

.tt-input, .tt-hint, .twitter-typeahead {

너비: 100%;

}

</style>

</head>

<body>

<입력 클래스="typeahead" 유형="text" 플레이스홀더="노래...">

</div>

$('#remote .typeahead').타입헤드(

{

힌트: true,

최소 길이: 3,

하이라이트: false,

limit: 5

}, {

이름: "song",

displayKey: "id",

출처: 함수 (쿼리, 콜백) {

$.getJSON("http://localhost:3000/search?query=" + 쿼리, 함수 (데이터) {

반환 콜백(데이터);

});

템플릿: {

제안: 핸들바.컴파일('<div>{{title}} - {{아티스트}}</div>')

}

);

</script>

</body>

</html>

스타일과 스크립트를 포함하기 위해 기본 HTML 마크업을 수행한 방법은 무시하고 타이프헤드 기능으로 넘어가겠습니다. 설정에서는 발견된 모든 레코드에 대해 팝업 힌트를 표시하고, 최소 3개 이상의 문자가 있어야 하며, 일치하는 단어는 강조 표시하지 않고, 표시되는 항목을 5개로 제한하겠습니다. 원하는 사양에 맞게 자유롭게 설정을 조정하세요.

다음 섹션에서는 displayKey. 우리는 객체 배열을 반환하고 있다는 것을 알고 있습니다. id 는 해당 객체의 속성 중 하나입니다. 선택 후 양식에 해당 값이 표시되기를 원합니다. 데이터 소스의 경우 API 엔드포인트에 GET 요청을 수행하고 응답을 타입헤드 라이브러리로 다시 전달합니다. 모든 것이 템플릿 영역입니다.

결론

Couchbase에서 jQuery, Node.js 및 전체 텍스트 검색(FTS)을 사용하여 자동 제안 또는 자동 완성이라고도 하는 타입에이헤드를 사용하는 방법을 살펴보았습니다. 전체 텍스트 검색과 관련하여 많은 사용 사례가 있으며 타입헤드 기능에 사용할 수 있는 다양한 라이브러리가 있습니다. 이 튜토리얼은 향후에 대한 아이디어를 제공하기 위한 것입니다.

Node.js와 함께 Couchbase를 사용하는 방법에 대한 자세한 내용은 카우치베이스 개발자 포털.

Nic Raboy, 개발자 옹호자, Couchbase

Platform

Self-Managed

Services

Capabilities

Why Couchbase?

Migrate to Capella

By Use Case

By Industry

By Application Need

Popular Docs

By Developer Role

Quickstart

Resource Center

About

Partnerships

Our Services

Partners: Register a Deal

Ready to register a deal with Couchbase?

Marriott

모든 게시물

타입헤드: Couchbase 전체 텍스트 검색 및 Node.js로 개발하기

FTS 인덱스를 사용하여 NoSQL 데이터 집합 만들기

검색을 위한 Node.js RESTful API 엔드포인트 개발하기

jQuery 및 Typeahead 라이브러리로 프론트엔드 디자인하기

결론

작성자

게시자 Nic Raboy, 개발자 옹호자, Couchbase

댓글 남기기 응답 취소