angular search experience

각도 검색 경험

제공:

부인 성명

이 참조 애플리케이션은 낮은 수준의 Algolia 검색 라이브러리를 사용하고 있습니다. 유사한 애플리케이션을 구축하는 경우 공식 Angular InstaSearch 라이브러리를 사용하세요.

프로젝트 설정

소스 파일 복제

이 프로젝트를 컴퓨터에 다운로드(복제)하려면 git 설치되어 있어야 합니다. 시스템에 Git을 설치하는 방법에 대해 자세히 알아보세요.

설치가 완료되면 터미널 셸을 열고 다음 명령을 사용하여 이 저장소를 복제합니다.

 > git clone https://github.com/manekinekko/angular-search-experience.git

종속성 설치

이 프로젝트의 종속성을 설치하려면 npm install 필요합니다. 다음으로, 터미널을 사용하여 이전에 이 프로젝트를 복제한 폴더로 디렉터리를 변경해야 합니다. 기본적으로(위에서 명령줄을 복사한 경우) 이것은 angular-search-experience 됩니다.

 > cd angular-search-experience
> npm install

개발 서버

우리는 Cloud 함수를 보호하기로 결정했습니다(이것은 좋은 방법입니다). 따라서 search API를 요청하려면 요청에 Authorization 헤더를 추가해야 합니다. 다음은 필수 헤더 Authorization: SearchToken this-is-a-fake-token 입니다. 아래 cURL 명령의 예를 참조하세요.

서버를 시작하기 전에 /functions 폴더의 .env 파일 내에 몇 가지 환경 변수를 추가해야 합니다. 이 env 템플릿 파일을 예로 사용하고(이름을 gitignored인 .env로 변경) 다음을 설정할 수 있습니다.

• algolia_applicationid= YOUR_ALGOLIA_APPLICATION_ID
• algolia_apikey= YOUR_ALGOLIA_API_KEY

https://www.algolia.com/apps의 API 키 섹션에서 애플리케이션 ID와 API 키를 찾을 수 있습니다. API 키를 받으려면 계정을 만들어야 합니다.

옵션 1(권장): 급행

로컬 머신에서 서버를 시험해 보려면 다음 명령을 실행하십시오: npm run start:backend

옵션 2(고급):백엔드(클라우드 기능)

이 옵션을 사용하려면 Firebase 계정에 로그인하고 이 프로젝트(Firebase에서)에 액세스할 수 있어야 합니다. 관리인만 Firebase 프로젝트에 액세스할 수 있습니다!

백엔드의 또 다른 버전은 Firebase용 Cloud Functions를 사용하여 구현된 서버리스 아키텍처를 사용하는 것입니다.

이 프로젝트는 로컬 종속성으로 firebase-tools 와 함께 제공됩니다. 이 도구는 Firebase 프로젝트를 생성, 실행, 배포할 수 있는 Firebase 명령줄 인터페이스(CLI) 도구 모음입니다. 이 종속성은 일반적으로 전역적으로 설치됩니다.

또한 Firebase 런타임은 이전 버전의 Node.js인 v6.11.5 사용하고 있습니다. /functions 아래에 .nvmrc 폴더를 포함했습니다. 이 특수 파일은 특정 폴더 내에서 필요한 Node.js 버전으로 쉽게 전환하기 위해 NVM 에서 사용하는 구성 파일입니다. NVM 아직 설치되어 있지 않은 경우 설치 가이드를 읽어보세요.

NVM 사용하여 필요한 Node.js 버전을 설치한 후 사용합니다( /functions 폴더 내에서만).

 > nvm install 6.11.5
> nvm use

이제 Node.js v6.11.5 사용하고 있으므로 search Cloud 함수를 로컬에서 실행(예: 에뮬레이트)할 준비가 되었습니다. 이를 위해서는 npm run start:backend:firebase 실행하세요. 이 명령은 두 가지 작업을 수행합니다.

1. 디렉터리를 /functions 폴더(프로젝트 루트에 있음)로 변경합니다. 이 폴더에는 모든 백엔드 코드가 포함되어 있습니다.
2. http://localhost:5000/angular-search-experience/us-central1/search 에서 search Cloud 함수를 로컬로 제공합니다.

중요: search 기능은 항목을 추가하고 삭제할 수 있는 POST 및 DELETE HTTP 메소드만 구현하므로 Cloud 함수를 요청하려면 cURL 또는 Postman 과 같은 HTTP 클라이언트가 필요합니다.

프론트엔드 애플리케이션

프로젝트 루트에서 npm start 실행하여 프런트 엔드 개발 서버를 시작합니다. http://localhost:4200/ 으로 이동합니다. 소스 파일을 변경하면 앱이 자동으로 다시 로드됩니다.

프런트 엔드 애플리케이션은 Angular CLI 버전 6.1.2로 생성되었습니다.

짓다

npm run build 실행하여 프로젝트를 빌드합니다. 빌드 아티팩트는 dist/angular-search-experience/ 디렉터리에 저장됩니다. 프로덕션 빌드에는 npm run build:prod 스크립트를 사용하세요.

배포

우리는 Firebase 호스팅을 사용하여 프런트엔드 애플리케이션을 게시합니다. 새 버전을 배포하기 전에 다음 명령을 사용하여 프로덕션 패키지를 빌드해야 합니다.

 > npm run build

그런 다음 새 빌드를 Firebase에 배포할 수 있습니다.

 > npm run deploy

중요: Firebase에 배포하려면 (Firebase 프로젝트에 대한) 액세스 권한이 필요합니다.

생산 환경

백엔드

프로덕션 엔드포인트(클라우드 기능)는 다음에서 사용할 수 있습니다.

1. POST: /api/1/apps
2. 삭제: /api/1/apps/:id

프로덕션 Cloud 함수를 요청하려면 다음 cURL 명령을 사용할 수 있습니다.

Algolia의 색인에 새 항목 추가

 > curl -H "Authorization: SearchToken this-is-a-fake-token" -H "Content-Type: application/json" -X POST -d '{}' https://example.com/api/1/apps

{"createdAt":"2018-04-19T13:17:10.343Z","taskID":29343382,"objectID":"10788302"}

참고: 우리는 의도적으로 application 개체의 유효성을 검사하지 않습니다.

Algolia의 색인에서 항목 삭제

 > curl -H "Authorization: SearchToken this-is-a-fake-token" -X DELETE https://example.com/api/1/apps/10788302

{"deletedAt":"2018-04-19T13:30:42.190Z","taskID":29353102,"objectID":"10788302"}

프런트엔드

아키텍처 및 사용 가능한 기능(UI)

구성 요소 아키텍처

1. 구성요소: <app-search></app-search>
2. 구성요소: <app-search-input></app-search-input>
3. 구성요소: <app-category></app-category>
4. 구성요소: <app-search-result></app-search-result>
5. 구성요소: <mat-nav-list></mat-nav-list>
6. 지시문: [appRating]
7. 파이프: freePriceLabel

여기에서 API 문서에 대해 자세히 알아보세요: https://manekinekko.github.io/angular-search-experience/index.html

특징

검색창

하이라이트가 포함된 검색결과

정렬 옵션

패싯 옵션

지연 로딩

딥링크

위험 지대: 부활절 달걀이 다가오고 있습니다!

안에 부활절 달걀!!

이 애플리케이션에는 챗봇이 포함되어 있습니다. 음성을 사용하여 애플리케이션을 검색하는 데 도움이 될 수 있습니다. 날씨 앱을 검색 하거나 게임을 찾는 데 도움을 요청하세요.

봇을 활성화하려면 마이크와 스피커를 켜야 합니다. 그러면 애플리케이션 로고(헤더)를 6번 클릭하기만 하면 됩니다.

참고: 이 봇의 구현은 실험적이며(그리고 재미를 위해!) 대규모 사용자 발화에 대해 훈련되지 않았습니다!

알려진 문제

호환되지 않는 모듈 발견

[email protected]: 엔진 "노드"가 이 모듈과 호환되지 않습니다. 예상 버전은 "~8.0"입니다.

 yarn install v1.5.1
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "~8.0".
error An unexpected error occurred: "Found incompatible module".
info If you think this is a bug, please open a bug report with the information provided in "/Users/vvo/Dev/Algolia/angular-search-experience/functions/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

해결 방법:

• /functions 폴더 내에서 nvm use 8.0 실행합니다.
• npm install 실행하세요.
• cd .. 실행한 다음 npm run start:backend 실행하세요.