Поиск - важная часть современных приложений. Когда дело доходит до встраивания этой функции в ваш веб-сайт или веб-приложение, не нужно изобретать велосипед. Есть несколько замечательных API, которые помогут вам сосредоточиться на написании кода, а не на поиске!
В этом руководстве будут использоваться Algolia и Firebase для создания автоматически заполняющейся панели поиска, которая будет синхронизироваться с данными Firebase.
Algolia - это решение «поиск как услуга», которое упрощает поиск, предоставляя все инструменты через API и SDK. В этом руководстве Algolia используется для обработки индексов поиска и результатов нашего автозаполнения.
Firebase - это база данных NoSQL как услуга, которая предоставляет простой API для управления данными. База данных Firebase предлагает обновления в реальном времени при изменении данных в базе данных. Здесь Firebase используется для хранения данных, которые будет искать Algolia.
В этом руководстве Firebase используется в качестве базы данных приложения, а затем демонстрируется, как импортировать эти данные в Algoli. Это руководство покажет вам, как использовать возможности обеих этих служб для создания панели поиска, состоящей всего из нескольких строк кода. Всю тяжелую работу делает Algolia!
В качестве бонуса, подписавшись на MLH, вы получите еще 2000 записей в своем аккаунте Algolia. Давайте начнем.
Примечание. Это руководство было написано с использованием узла v8.12.0. Если вы раньше не использовали Node.js, перейдите по этой ссылке, чтобы установить его в своей системе.
Вы можете скачать весь код и примеры файлов в репозитории github для этого проекта.
1. Зарегистрируйте учетную запись Algolia.
Прежде всего, вам понадобится учетная запись Algolia для создания нашего поискового индекса.
Перейдите по этой ссылке, чтобы создать учетную запись Algolia!
Algolia предлагает полностью бесплатную учетную запись на уровне сообщества. Это замечательно, потому что вы можете получить полную функциональность API для целей разработки без предоставления какой-либо платежной информации.
2. Найдите свои учетные данные API.
После успешного создания учетной записи нажмите Перейти на панель управления.
Затем нажмите Ключи API в левом столбце панели инструментов, чтобы найти свои учетные данные API. Они вам понадобятся через несколько минут! Эти учетные данные отправляются вместе с вашими поисковыми запросами, чтобы сообщить серверам Algolia, с какой учетной записью разработчика связана деятельность.
Примечание. Ваш ключ Admin API засекречен! Не публикуйте его и не публикуйте в Интернете.
3. Создайте поисковый индекс Algolia.
Теперь вы составите указатель. Индекс помогает функции поиска работать с молниеносной скоростью. Индексы помогают быстро находить данные в больших наборах данных за счет создания эффективной таблицы поиска.
Чтобы создать индекс, нажмите Индексы в левом столбце панели инструментов, а затем нажмите Создать индекс кнопка. Введите имя для своего индекса и нажмите кнопку Создать.
Подготовьте свой интерфейс
Algolia готова предоставить нам запрос, поэтому давайте настроим веб-страницу, на которой ваши пользователи будут выполнять поиск.
4. Создайте свою веб-страницу.
Загрузите пример файла index.html, необходимого для создания страницы поиска. Это очень простой HTML-файл, который использует пакет Algolia Javascript и autocomplete.js вместе для создания панели поиска с автозаполнением.
Звездой шоу является «поисковый ввод», который будет использоваться для нашего поиска в Алголии. Когда наши пользователи вводят текст в строке поиска, серверная часть Algolia загружает наши результаты в «поисковый ввод».
Затем индекс загружается в autocomplete.js для отображения предложения поиска.
Когда выбрано предложение поиска, в окне выдается предупреждение, информирующее пользователя об их выборе. На практике это, вероятно, приведет к переходу на другую страницу, где отображаются результаты поиска.
5. Введите свои учетные данные API и имя индекса.
Возьмите учетные данные API из раздела API-ключи на панели инструментов Algolia и вставьте их в соответствующие места в коде (YourApplicationID и YourAPIKey). Обязательно используйте ключ API только для поиска с веб-сайта Algolia.
Затем вставьте созданное вами ранее имя индекса в соответствующее место кода (your_index_name).
Это сообщает локальному приложению, какое приложение Algolia использовать для поиска с автозаполнением, а ключ API авторизует приложение, чтобы оно могло выполнять запросы к нему.
Сохраните файл index.html.
6. Тестирование
Откройте index.html в своем любимом браузере, чтобы увидеть панель поиска.
Как вариант, вы можете опубликовать свою страницу в Интернете с помощью CodePen. Создайте новое перо и вставьте его в содержимое файла index.html.
Если все прошло хорошо, вы должны увидеть страницу, подобную следующей:
Автозаполнение пока не работает, так как индекс Algolia не заполнен вашими данными.
Подключить данные Firebase
Пока все хорошо, но нам все еще нужно получить некоторые данные в Algolia для поиска. Чтобы легко обновить их в будущем, вы сначала загрузите наши данные в Firebase, а затем импортируете их в Algolia.
7. Зарегистрируйте аккаунт Firebase.
Перейдите по этой ссылке, чтобы создать учетную запись Firebase! Firebase будет действовать как база данных нашего приложения, тогда как Algolia будет действовать как наша база данных поиска. Приложение Firebase - это набор облачного программного обеспечения, которое предоставляет разработчикам приложений простые решения распространенных проблем. В этом руководстве будет использоваться только программное обеспечение базы данных.
База данных, размещенная в облаке, позволяет легко запустить наше приложение, и вам не придется беспокоиться о времени безотказной работы, масштабировании или управлении базой данных.
Firebase предлагает совершенно бесплатную учетную запись для целей разработки и тестирования. Это то, что вы будете использовать в этом руководстве.
8. Создайте новое приложение Firebase.
- Нажмите Добавить проект на панели управления Firebase.
- Введите имя для него.
- Нажмите Создать проект.
9. Создайте новую базу данных.
База данных нужна для хранения всех событий хакатона. Создайте базу данных с Firebase:
- Нажмите Разработка - ›База данных в левом столбце панели инструментов вашего проекта.
- Нажмите Создать базу данных.
- Установите переключатель в положение Начать в тестовом режиме.
- Нажмите Включить.
10. Добавьте свои данные в Firebase.
Вы можете использовать базу данных хакатонов MLH в качестве примера данных.
Загрузите пример файла hackathons.json, необходимого для создания нашей базы данных:
Теперь импортируйте файл JSON в базу данных Firebase.
- Щелкните раскрывающийся список рядом с База данных и выберите вариант База данных в реальном времени.
- Нажмите кнопку дополнительно (вертикальное многоточие).
- Нажмите Импортировать JSON.
- Перейдите к загруженному файлу hackathons.json и нажмите кнопку Импорт.
Нажмите кнопку Развернуть данные (символ плюса). Если все прошло хорошо, вы должны увидеть пример данных, импортированных в вашу базу данных, как показано ниже:
Обратите внимание на URL-адрес базы данных, указанный в заголовке над вашими данными. Это будет использоваться в скрипте Node.js.
Наконец, нам нужно обновить правила Firebase, чтобы мы могли разрешить нашему скрипту Algolia читать и записывать данные в Firebase. Правила Firebase определяют, кто имеет доступ для чтения и записи к вашей базе данных, как структурированы ваши данные и какие индексы существуют. Правила Firebase - это простой объект JSON, который определяет, кто и к чему может получить доступ.
нажмите Правила и включите общий доступ для чтения, установив «.read»: true в объекте JSON. Это позволит любому аутентифицированному пользователю читать данные из Firebase.
Нажмите Открытый, чтобы сохранить набор правил. Это позволяет нашему приложению Node.js читать данные Firebase.
Вы можете найти обновленные правила JSON здесь:
11. Создайте скрипт импорта Node.js.
Это почти все, хотя теперь, когда Firebase настроена, должен быть способ импортировать эти данные в Algolia. Этот скрипт получит все данные из Firebase и импортирует их в Algolia для поиска. Это нужно выполнить только один раз. Позже в этом руководстве вы увидите, как поддерживать синхронизацию данных между двумя сервисами.
Создайте сценарий Node.js для импорта данных Firebase в Algolia.
- Создать новую папку.
- Запустите npm init из командной строки внутри новой папки.
- Примите значения по умолчанию в мастере (просто продолжайте нажимать Enter), чтобы создать файл package.json.
- Запустите npm install dotenv algoliasearch firebase - сохраните из командной строки внутри новой папки.
Пакет dotenv используется для хранения ключей API в секрете и только на вашем компьютере. algoliasearch используется для работы с Algolia, а firebase работает с базой данных Firebase.
12. Настройте свою среду.
Теперь создайте файл .env. Это гарантирует, что ваши секретные ключи API никогда не покинут вашу систему и не появятся в коде.
Загрузите пример файла .env, необходимого для настройки нашей среды. Сохраните этот файл в той же папке, в которой находится index.js.
Вставьте в этот файл свои учетные данные Algolia API, имя индекса Algolia и URL-адрес базы данных Firebase. Обязательно используйте здесь ключ Algolia Admin API.
- Сохраните этот файл в той же папке, в которой вы запускали команду npm init.
13. Создайте основной файл index.js.
Это будет основной скрипт NodeJS для импорта наших данных из Firebase в Algolia.
Загрузите пример файла index.js, необходимого для нашего приложения Node.js:
Сохраните этот файл в той же папке, в которой вы запускали команду npm init.
- Запустите node index.js из командной строки внутри той же папки.
Вы должны увидеть сообщение об успешном завершении в консоли! Скрипт перенес данные из Firebase в Algolia.
Если вы ничего не видите в консоли или получаете ошибки, убедитесь, что все ключи в вашем .env верны.
Убедитесь, что данные передаются
Теперь у вас должно быть все необходимое для поиска данных Firebase. Подтверждаем, что все работает должным образом.
14. Проверьте синхронизацию.
Нажмите Индексы в левом столбце на панели инструментов Algolia. Вы должны увидеть пример данных из Firebase, синхронизированных, как показано ниже:
15. Протестируйте поиск.
Загрузите свою страницу GitHub или ручку CodePen, которую вы создали ранее, затем попробуйте ввести текст в поле поиска.
Если все прошло хорошо, вы должны увидеть результаты на основе данных примера, подобные приведенным ниже:
Поздравляю! Панель поиска с автозаполнением работает.
Автоматическое обновление Algolia при изменении данных Firebase
Пока вы готовы к поиску, вам нужно убедиться, что все по-прежнему доступно для поиска. Сделав несколько обновлений нашего кода, мы сможем обеспечить синхронизацию Algolia. Таким образом, всякий раз, когда в Firebase происходят изменения, они будут отправляться в Algolia. Затем Algolia создаст новый индекс с новыми данными, а панель поиска всегда будет соответствовать данным в Firebase.
17. Измените файл index.js.
Теперь, когда данные Firebase импортированы, мы хотим синхронизировать их по мере их изменения. Изменение скрипта index.js Node.js для подписки на обновления Firebase обеспечит синхронизацию Algolia при изменении данных Firebase.
Для этого подпишитесь на события child_added, child_changed и child_removed. Сценарий Node.js получит уведомление об изменении данных Firebase. Затем используйте пакет algoliasearch, чтобы обновить Algolia новыми данными.
Удалите все из нижней части файла index.js, начиная со строки, начинающейся с // Получить все контакты из Firebase и заменить ее на следующий код:
Сохраните файл и запустите его. Теперь, когда данные обновляются в Firebase, они будут синхронизироваться с Algolia.
Поздравляю! Вы создали простую страницу поиска, используя API Algolia с Firebase в качестве базы данных.
