Если вы последние пару месяцев не жили в пещере, вы, вероятно, слышали о Preact, 3-килобайтной альтернативе Facebook React. Но знаете ли вы, насколько легко создать PWA (прогрессивное веб-приложение) со всеми прибамбасами, такими как вход в систему, база данных в реальном времени и т. Д., Просто с помощью Firebase и MobX?
Что мы делаем?
Для этого урока мы создадим небольшое приложение для чата. Живую демонстрацию можно найти здесь, и я также загрузил код на GitHub.
Используемый нами подход - хранить все сообщения в Firebase Firestore и отслеживать изменения для обновления пользовательского интерфейса в реальном времени. по мере поступления новых сообщений.
Как мы это делаем?
Способ, которым мы реализуем приложение чата, заключается в том, что у нас будет представление базы данных в нашем локальном приложении в MobX, кстати, отличной альтернативе Redux и Flux. Затем, когда данные изменяются в базе данных (например, новое сообщение чата), состояние в MobX обновляется, что затем обновляет пользовательский интерфейс.
Инициализировать Firebase
Теперь, когда вы, надеюсь, знаете, что и как мы делаем наше собственное приложение для чата, вам следует перейти на console.firebase.google.com и создать проект.
Затем откройте его в веб-интерфейсе и нажмите на маленький значок шестеренки в верхнем левом углу. Затем нажмите Добавить Firebase в свое веб-приложение.
Установите Preact и MobX
Приступить к работе довольно просто: установите Preact CLI, если вы еще этого не сделали, и создайте новый PWA с preact create material <name>.
После того, как вам понравился потрясающий счетчик загрузки, продолжайте и устанавливайте Firebase и MobX: npm i firebase mobx preact-mobx --save.
К настоящему времени вы должны иметь возможность запускать сервер разработки на локальном хосте, набрав npm run start. Отлично!
Инициализировать Firebase
Теперь, когда вы, надеюсь, знаете, что и как мы делаем наше собственное приложение для чата, вам следует перейти на console.firebase.google.com и создать проект.
Затем откройте его в веб-интерфейсе и нажмите на маленький значок шестеренки в верхнем левом углу. Затем нажмите Добавить Firebase в свое веб-приложение. Скопируйте конфиг, создайте src/state/firebase.js и вставьте в файл. Кстати, публикация конфигурации не является проблемой безопасности, все ключи являются общедоступными. Затем потребуйте Firebase и Firestore, чтобы файл выглядел так:
Большой! Приступим к кодированию!
Теперь удалите src/routes/profile, удалите компонент профиля из src/components/app.js и импортируйте preact-mobx, чтобы он выглядел так:
Начать работу с MobX
Затем создайте файл с именем chatStore.js в src/state. Здесь мы будем использовать MobX для управления состоянием приложения и реагирования на изменения в базе данных. Сначала мы определим наши два класса, ChatStore и Message. ChatStore хранит массив класса Message. С другой стороны, этот класс хранит идентификатор (сгенерированный Firestore), содержимое сообщения и временную метку.
Но мы пока не можем использовать новые классы, мы должны добавить действие в наш ChatStore, чтобы мы могли добавить новое сообщение в массив сообщений (не забудьте импортировать «действие»):
Настроить Firestore
Теперь, когда мы можем добавлять сообщения в наше состояние, нам нужно фактически получить сообщения из базы данных. Для этого мы возвращаемся в Консоль Firebase и переходим в База данных ›Попробовать бета-версию Firestore› Запустить в тестовом режиме.
Затем, после того, как все настроено, мы создаем новую коллекцию с именем messages с документом с автоматическим идентификатором и двумя полями:
При желании вы можете добавить еще несколько документов с автоматически сгенерированным идентификатором по той же схеме.
Прислушиваясь к изменениям
После этого нам остается только отслеживать изменения в базе данных и запускать функцию addMessage() для каждого нового сообщения. Мы сделаем это в новом файле, который мы называем initState.js, также внутри src/state. Функция onSnapshot также запускается при первоначальном рендеринге, поэтому нам не нужно беспокоиться о получении всех сообщений при первой загрузке:
Собираем все вместе
Последний шаг - передать состояние из MobX в наш компонент Preact. К счастью, это очень просто. Нам нужно импортировать ChatStore из src/state/chatStore.js вsrc/index.js, а затем передать его как опору в src/components/app.js, чтобы мы могли вызвать initState(), чтобы получить фактические данные из Firestore. Мы также передаем chatStore компоненту home, чтобы отображать там сообщения. Не забудьте добавить @observer из preact-mobx к каждому компоненту, используя ChatStore. В противном случае компонент не будет повторно визуализироваться при изменении состояния.
Теперь мы можем получить сообщения в src/routes/home/index.js и сопоставить все сообщения. Я знаю, что дизайн не такой уж и красивый. Но сегодня дело не в дизайне 😉.
Отправка сообщений…
… Теперь действительно просто. Нам нужно только добавить одну небольшую функцию к компоненту Home, который получает значение элемента ввода и сообщает Firebase создать новый документ с автоматически сгенерированным идентификатором:
Бонус: развертывание на хостинге Firebase
Теперь, когда у нас есть работающее приложение для чата, мы тоже хотим иметь его, не так ли?
И, опять же, благодаря Firebase, это тоже очень просто. Просто установите Firebase CLI глобально следующим образом: npm install firebase-tools -g и инициализируйте проект следующим образом:
firebase login firebase init preact build preact serve --server config
Скопируйте вывод этой функции в firebase.json и, наконец, загрузите файлы сборки с firebase deploy на хостинг Firebase!
Было совсем несложно, правда?
Так что же дальше?
К настоящему времени вам, вероятно, следует еще раз просмотреть код и убедиться, что вы действительно понимаете, что делает код, и, возможно, добавить несколько стилей к компонентам, чтобы он выглядел немного более захватывающим.
Вы также можете подумать о реализации метода входа с Firebase Auth или сначала просто убедитесь, что сообщения упорядочены правильно (это не так). Или прочтите документацию о правилах безопасности Firestore, чтобы убедиться, что никто не может злоупотреблять базой данных :)
