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

Сервер разработки

Мы решили защитить функцию облака (это хорошая практика). Итак, чтобы запросить API search , вам необходимо добавить к вашим запросам заголовок Authorization . Вот необходимый заголовок Authorization: SearchToken this-is-a-fake-token . См. пример команды cURL ниже.

Прежде чем запустить сервер, вам нужно будет добавить пару переменных среды в файл .env в папке /functions . Вы можете использовать этот файл шаблона env в качестве примера (переименуйте его в .env, который gitignored) и установите:

• algolia_applicationid= YOUR_ALGOLIA_APPLICATION_ID
• algolia_apikey= YOUR_ALGOLIA_API_KEY

Идентификатор вашего приложения, а также ключ API можно найти на странице https://www.algolia.com/apps в разделе «Ключи API». Вам необходимо создать учетную запись, чтобы получить ключ API.

Вариант 1 (рекомендуется): Экспресс

Чтобы опробовать сервер на локальном компьютере, выполните следующую команду: npm run start:backend

Вариант 2 (расширенный): серверная часть (функция облака)

Для этого варианта необходимо войти в свою учетную запись Firebase и иметь доступ к этому проекту (в Firebase). Только смотрители имеют доступ к проекту пожарной базы!

Другая версия бэкэнда основана на бессерверной архитектуре, реализованной с использованием облачных функций для Firebase.

Этот проект поставляется с firebase-tools в качестве локальной зависимости. Этот инструмент представляет собой набор инструментов интерфейса командной строки (CLI) Firebase, которые могут генерировать, запускать и развертывать проект Firebase. Обратите внимание, что эта зависимость обычно устанавливается глобально.

Кроме того, среда выполнения Firebase использует более старую версию Node.js: v6.11.5 . Мы включили папку .nvmrc в /functions . Этот специальный файл представляет собой файл конфигурации, используемый NVM для легкого переключения на необходимую версию Node.js внутри определенной папки. Если у вас еще не установлен NVM , прочтите руководство по установке.

Используйте NVM для установки необходимой версии Node.js, а затем используйте ее (только внутри папки /functions ):

 > nvm install 6.11.5
> nvm use

Теперь, когда вы используете Node.js v6.11.5 , вы готовы запускать (т. е. эмулировать) облачную функцию search локально. Для этого запустите npm run start:backend:firebase . Эта команда сделает две вещи:

1. Перейдите в папку /functions (находится в корне проекта). Эта папка содержит весь внутренний код.
2. Обслуживайте облачную функцию search локально на http://localhost:5000/angular-search-experience/us-central1/search

Важно: обратите внимание, что функция search реализует только HTTP-методы POST и DELETE , позволяющие добавлять и удалять объекты, поэтому вам понадобится HTTP-клиент, например cURL или Postman , чтобы иметь возможность запрашивать функцию Cloud.

интерфейсное приложение

В корне проекта запустите 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. ПОСТ: /api/1/приложения
2. УДАЛИТЬ: /api/1/apps/:id

Чтобы запросить производственную облачную функцию, вы можете использовать следующие команды cURL:

Добавление новой записи в индекс Алголии

 > 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 намеренно.

Удаление записи из индекса Алголии

 > 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.

Обходной путь:

• Запустите nvm use 8.0 в папке /functions .
• Запустите npm install .
• Запустите cd .. затем npm run start:backend .