Недавно я обнаружил Supabase, альтернативу Firebase с открытым исходным кодом, которая настраивает серверную часть за 2 минуты, и ни один продукт в последнее время меня так не взволновал. Поэтому я решил написать руководства, чтобы показать людям, насколько хорош этот продукт! 📢

В этой серии я буду создавать клон Twitter с помощью React и Supabase. Если вы последуете инструкциям, к концу этой серии статей вы развернете полностью функционирующее приложение, которое позволит пользователям:

  1. твитнуть, что они думают,
  2. загружать аватарки и менять их профиль,
  3. получать уведомления о новых твитах;
  4. получать уведомления, когда кому-то понравился их твит.

Создавая это приложение, вы научитесь:

  • настроить полный процесс аутентификации для ваших пользователей: регистрация, вход в систему, подтверждение по электронной почте и забывание паролей.
  • настроить масштабируемое хранилище, чтобы ваши пользователи могли загружать файлы
  • настройте Безопасность на уровне строк ​​в своей базе данных, чтобы личные данные пользователей были заблокированы.
  • настроить маршрутизацию на стороне клиента с помощью response-router-dom
  • настроить валидацию на стороне клиента для форм с помощью response-hook-form
  • быстро улучшить внешний вид приложения с помощью Material UI

Я предполагаю, что у вас есть базовые знания о React, когда я объясняю свой код. Если вы уже знакомы с React, я также предоставлю хеш git в более поздней части, так что вы можете пропустить часть React.

Погодите, что такое Supabase?

Supabase - это альтернатива Google Firebase, которая позволяет получить полностью функционирующую серверную часть за считанные минуты. Мне нравилось использовать Firebase для быстрого запуска побочных проектов, но меня всегда раздражали следующие вещи:

  1. Мне нужно использовать базу данных NoSQL, а не PostgresDB,
  2. это не с открытым исходным кодом, и
  3. И что самое главное, нет простого способа перейти с Firebase, когда вы его перерастете (особенно всех пользователей).

Supabase решает эти проблемы, потому что они:

  1. используйте PostgresDB под капотом,
  2. Использовать и вносить вклад в библиотеки с открытым исходным кодом, и
  3. вы можете легко перейти с Supabase и начать самостоятельный хостинг, если захотите.

У них также есть довольно щедрый уровень бесплатного пользования. Кстати, Supabase не платит мне за то, чтобы я писал это, я просто в восторге от этого продукта. Теперь, когда мы знаем, что такое Supabase, пора приступить к созданию! Давайте сначала настроим.

Настройка Supabase

Войдите в Supabase (зарегистрируйтесь, если еще не сделали!), Затем создайте новый проект. Вы столкнетесь с приведенным ниже модальным окном.

  • Имя - вставьте все, что хотите. Я назвал свое supabase-twitter-example.
  • Пароль базы данных - создайте надежный пароль и сохраните его в диспетчере паролей.
  • Регион - любой регион, я выбрал Сидней.

После нажатия «Далее» вам нужно будет подождать 2 минуты, пока серверная часть не будет настроена Supabase. ⌚️ Пока это происходит, давайте настроим интерфейс.

Настройка клиентской базы кода с помощью create-react-app

Давайте загрузим приложение React с помощью create-react-app. Выполните в своем интерфейсе командной строки следующее, чтобы создать проект с машинописным текстом.

npx create-react-app --template typescript react-twitter-clone

Установить UI материала

Мы хотим, чтобы наше приложение выглядело красиво, но мы также не хотим тратить много времени на то, чтобы возиться со стилями слишком. Итак, мы будем использовать UI-библиотеку под названием Material UI. Выполните следующую команду в каталоге приложения, чтобы установить фреймворк и значки.

yarn add @material-ui/core @material-ui/icons

Давайте вернемся в Supabase и посмотрим, настроена ли наша серверная часть.

Вернуться к Supabase

Если все будет готово, вы увидите этот экран.

Пока вы находитесь на этом экране, я кратко расскажу, где что находится.

  1. Редактор таблиц. Здесь вы можете создавать, редактировать и просматривать таблицы в PostgresDB.
  2. Аутентификация - здесь вы можете видеть своих пользователей и их статус, а также редактировать шаблоны электронных писем, которые отправляются в результате процесса аутентификации пользователя (например, письма с подтверждением регистрации!)
  3. Хранилище - здесь вы можете добавлять, редактировать и просматривать файлы в хранилище S3.
  4. SQL - здесь вы можете запускать специальные SQL-запросы и создавать хранимые процедуры.
  5. API - здесь вы можете увидеть сгенерированный в реальном времени документ API для вашей серверной части.
  6. База данных - здесь вы можете выполнять некоторые функции администратора базы данных, такие как роли, резервное копирование и репликация.
  7. Настройки - здесь находятся другие настройки. Именно здесь вы получите ключи API, которые можно будет использовать позже в этой серии.

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

Зайдите в меню SQL. Когда вас встретит экран приветствия, выберите опцию на нижнем экране. Это удобный шаблон, который предоставляет Supabase, чтобы мы могли быстро начать работу.

Когда вы это сделаете, вас встретит некоторый SQL (который еще не был запущен). Давайте пройдемся по ним, чтобы узнать, что будет дальше. Вверху у нас есть:

Мы создаем таблицу с именем profiles со следующими полями:

  • id, используетid из auth.users. Эта таблица была автоматически создана Supabase и содержит пользователей после того, как они зарегистрировались. Он не должен быть нулевым, потому что для создания профиля вам нужен пользователь.
  • updated_at, последнее обновление - на отметке времени
  • username, avatar_url и website говорят сами за себя.

Давайте посмотрим на следующий фрагмент - он действительно интересный.

Приведенный выше фрагмент создает Безопасность на уровне строк, которая может блокировать строки в зависимости от пользователя. Например, вы не хотите, чтобы пользователи могли обновлять чужие профили!

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

Supabase может справиться с этим за вас, просто с помощью этого небольшого фрагмента.

Это означает: разрешать обновления для строки только в том случае, если auth.uid() совпадает с идентификатором. auth.uid() исходит из токена JWT, который будет отправлен с запросами, если пользователь вошел в систему.

Официальное объяснение того, как это работает, приведенное ниже, довольно хорошее:

  1. Пользователь регистрируется. Supabase создает нового пользователя в auth.users таблице.
  2. Supabase возвращает новый JWT, который содержит UUID пользователя.
  3. Каждый запрос к вашей базе данных также отправляет JWT.
  4. Postgres проверяет JWT, чтобы определить пользователя, выполняющего запрос.
  5. UID пользователя можно использовать в политиках для ограничения доступа к строкам.

В следующем фрагменте добавлена ​​поддержка уведомлений в реальном времени, которую мы пока пропустим.

Последний фрагмент также интересен. Давайте посмотрим:

Supabase также поставляется со встроенным хранилищем (которое использует S3 под капотом), и мы можем устанавливать политики для доступа к хранилищу с помощью SQL! Насколько это удобно?

Теперь, когда мы знаем, что делает SQL-запрос, нажмите кнопку RUN. На вкладке «Результаты» должно появиться сообщение Success. No rows returned.

Когда вы вернетесь в представление Table Editor, вы должны увидеть таблицу с именем profiles.

Woohoo 🎊, всего за пару кликов мы создали таблицу с:

  • Безопасность на уровне строк, обеспечивающая безопасность данных пользователя.
  • Поддержка уведомлений в реальном времени и;
  • мы создали корзину объектов с некоторыми политиками безопасности.

В следующей серии мы будем создавать некоторый реагирующий интерфейс, чтобы использовать наш недавно созданный серверный интерфейс! Следуйте за мной в Twitter (@James_HJ_Kim), чтобы не пропустить часть 2. До встречи!