Представляем Pocketbase

Я всегда был большим поклонником быстрого взлома небольших побочных проектов и прототипов. Обычно я избегаю использования множества сложных фреймворков/баз данных/инфраструктур, насколько это возможно, чтобы сохранить свое психическое здоровье.

В то время как вы обычно можете обойтись приличным внешним интерфейсом с кучей HTML и JS, кодирование внутреннего интерфейса — это то, где вам нужно немного попотеть.

Если вы, как и я, занимаетесь подработками, я уверен, что вам понравится этот инструмент так же сильно, как и мне: Pocketbase.

Как говорится на веб-сайте Pocketbase, Pocketbase — это «серверная часть с открытым исходным кодом для вашего следующего SaaS и мобильного приложения в одном файле».

Да, вы получаете (бесплатно!) Бэкенд, пользовательский интерфейс администратора, встроенную базу данных (SQLite), API, провайдеров аутентификации и многое другое в всего одном файле. Разве это не круто?

Я так рад показать вам, насколько это мощно, и мы собираемся создать потрясающее приложение ToDo, содержащее всего один файл HTML!

DooDoo.it

Чтобы дать вам представление о том, что мы собираемся построить, он — последний проект, работающий на doodoo.it. Не стесняйтесь играть с ним столько, сколько вы хотите! :)

Настройка Pocketbase

Чтобы установить Pocketbase, просто зайдите в официальную документацию и загрузите нужный выпуск для вашей ОС.

Затем создайте папку, назовите ее pocketbase-todo и распакуйте в нее исполняемый файл Pocketbase.

Теперь откройте терминал, перейдите во вновь созданную папку и просто введите:

./pocketbase serve

Вы получите вывод, подобный следующему:

> Server started at: http://127.0.0.1:8090
  - REST API: http://127.0.0.1:8090/api/
  - Admin UI: http://127.0.0.1:8090/_/

Это означает, что Pocketbase успешно запущена.

Поздравляю! Теперь у вас есть полностью функциональный бэкенд. Как это было легко!?

Создание коллекций Pocketbase

Следующим шагом в создании нашего замечательного приложения ToDo является создание моделей базы данных. В мире Pocketbase это называется Коллекции.

Нам нужно создать два из них:

  • Список: представление наших списков дел.
  • Элемент:представление фактического элемента списка дел.

Откройте браузер и перейдите в интерфейс администратора Pocketbase: http://127.0.0.1:8090/_/

Pocketbase попросит вас ввести имя пользователя/пароль администратора. Идите вперед и установите это.

При первом входе вы увидите что-то вроде этого:

Давайте продолжим и создадим коллекцию с именем «list». В нем будет два поля:

  • ID пользователя типа "Пользователь"
  • название типа «Текст»

Теперь давайте создадим еще одну коллекцию с именем «item» со следующими полями:

  • текст типа "Текст"
  • список типа «Отношение» (поскольку между списком и его элементами существует отношение «один ко многим»)
  • готово типа "логическое значение"

Отличный! Pocketbase теперь предоставляет API для таких коллекций, не написав ни строчки кода!

Приложение ToDo: HTML

Чтобы соответствовать однофайловой архитектуре Pocketbase, мы напишем наше приложение в одном HTML-файле ;)

Чтобы написать наше приложение, мы будем полагаться на несколько зависимостей:

  • Клиент Pocketbase JS SDK: чтобы иметь возможность вызывать встроенные API Pocketbase
  • AlpineJS: легкий реактивный JS-фреймворк
  • Pico CSS: минималистичный адаптивный CSS-фреймворк, который просто потрясающий!
  • Boxicons: крутые иконки для оживления :)

Вы можете найти окончательный HTML здесь: https://github.com/Mikepicker/doodoo/blob/master/index.html

Просто скопируйте файл index.html в папку вашего проекта и обслуживайте его с помощью quickserve, http-server или чего-то еще.

Теперь мы проанализируем каждый раздел шаг за шагом.

Первое, что мы делаем, это объявляем наши метаданные и зависимости в нашем блоке <head>:

Следующий шаг: создание базовой панели навигации для отображения логотипа и предоставления пользователям возможности выйти из системы:

Возможно, вы заметили атрибут x-data: он используется AlpineJS для инициализации состояния, которое мы можем использовать для реактивного обновления пользовательского интерфейса (почти как React или Vue). Не беспокойтесь, если это покажется странным, через некоторое время это будет иметь больше смысла.

Поскольку мы не будем создавать несколько файлов HMTL, нам нужно будет каким-то образом отображать разные разделы приложения, показывая/скрывая блоки HTML.

Здесь в игру вступает AlpineJS: мы будем использовать атрибут x-show для отображения/скрытия HTML-блоков по мере того, как пользователь взаимодействует со страницей (вместо того, чтобы направлять пользователя на разные страницы).

Давайте теперь набросаем компонент Login / Signup:

В строке 19 мы видим, что AlpineJS показывает блок <article> только в том случае, если установлена ​​реактивная переменная showLogin.

Также обратите внимание на атрибуты x-model: они используются для привязки пользовательского ввода к нашим переменным Javascript.

Страница входа/регистрации должна выглядеть так:

После того, как пользователь успешно вошел в систему, мы хотим показать ему его собственные списки задач:

Обратите внимание, как атрибут AlpineJS x-for (строка 15) позволяет отображать несколько списков задач.

Вот как это выглядит:

Наш последний раздел показывает содержимое каждого отдельного списка, позволяя пользователю просматривать, создавать и удалять элементы:

Приложение ToDo: Javascript

Теперь мы проанализируем каждый раздел нашего тега <script>. Наш код будет в основном использовать:

  • AlpineJS: для реактивного обновления DOM в зависимости от действий пользователя.
  • Pocketbase Client SDK: для взаимодействия с API Pocketbase.

Первый шаг — подготовка нашего компонента AlpineJS для включения его реактивных возможностей:

Как видите, мы привязываем AlpineJS к основному контейнеру <div x-data="lists">, чтобы включить реактивность.

Затем мы объявляем несколько переменных, необходимых для взаимодействия с Pocketbase и пользовательским интерфейсом.

Когда приложение загружается, нам нужно проверить, не авторизовался ли пользователь (спасибо Pocketbase Auth Storage) и:

  • Запрашивать экран входа/регистрации, если пользователь не вошел в систему
  • Получайте списки дел из API Pocketbase и подписывайтесь на живые события, если пользователь вошел в систему.

Наконец, мы определяем все оставшиеся функции для входа / регистрации и для создания / обновления / удаления списков и элементов ToDo:

Функции вызываются из компонентов HTML с использованием атрибута AlpineJS @click.

Для взаимодействия с API Pocketbase мы используем функции SDK Pocketbase Client this.client.records.*, описанные здесь.

Одной из самых крутых вещей Pocketbase является возможность подписываться на события в реальном времени, чтобы пользовательский интерфейс мог обновляться, как только меняется база данных (Pocketbase использует SSE под капотом для реализации этой функции).

Мы используем эту функцию для подписки на события list и item, а с Pocketbase это так же просто, как использовать client.realtime.subscribe('list', event => {...}) для доступа к последнему событию.

Как это круто?

Безопасность API

Последнее, что нам нужно сделать, это защитить наши API: в частности, мы не хотим, чтобы другие пользователи могли просматривать, изменять или даже удалять наши собственные списки или элементы.

Pocketbase позволяет нам сделать это прямо из панели администратора.

Защита списков
Перейдите к панели сбора «списков», затем нажмите шестеренку вверху, а затем нажмите «Правила API» на боковой панели.

Это должно быть самоочевидным: мы хотим, чтобы идентификатор пользователя запроса соответствовал фактическому идентификатору пользователя записи, чтобы пользователь мог перечислять, просматривать, обновлять и удалять записи, в то время как мы должны убедиться, что идентификатор пользователя в запросе соответствует фактическому пользователя в следующем сеансе.

Защита элементов
Теперь мы применим тот же процесс к элементам: мы хотим быть уверены, что пользователь не сможет испортить элементы, принадлежащие кому-то другому:

Бонус: разверните Pocketbase за 3 минуты на fly.io

Готовы воплотить свой потрясающий проект в жизнь? Вы можете сделать это бесплатно на fly.io, просто следуя этому руководству: https://github.com/pocketbase/pocketbase/discussions/537

Выводы

Хотя я надеюсь, что это руководство дало вам хорошие впечатления об этом фантастическом инструменте, мы рассмотрели лишь небольшую часть функций, которые он может предложить.

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

Я считаю, что это идеальный инструмент для создания небольших прототипов / стартапов, поскольку обычно вам не нужны огромные возможности масштабирования с первого дня (и, честно говоря, управление огромным трафиком — это хорошая проблема, которую вы, возможно, захотите иметь!).

Надеемся, что это руководство помогло вам оценить, как такие инструменты, как Pocketbase, могут значительно повысить вашу производительность.

Не стесняйтесь играть с doodoo.it сколько хотите! :)

Помните, что весь исходный код размещен на GitHub.

Комментарии / отзывы / хлопки очень приветствуются! Спасибо!