REST API Firebase или как не заморачиваться с сервером для пет-проекта

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.

Хочется простой бэк для хранения данных, которые используются на фронтенде, но не хочется устанавливать зависимости Firebase. И еще хочется все это задеплоить на Vercel.

Появилось вот такое желание при разработке своего пет-проекта (без туториалов на ютубе и тд.). Стек: React, TypeScript, RTK. Первое что вспомнил — это JSON Plaseholder. Но у этого сервиса есть ограничение: Вы не можете самостоятельно спроектировать API.

ресурсы JSON Placeholder
ресурсы JSON Placeholder


Продолжив поиски я нашел сервис Mockend, но сервис платный и предоставляет только 14 дней free trial. Мы, джуны, пока не зарабатываем 1кк $ в нано-секунду, поэтому такой вариант отпадает сам по себе, хоть и выглядит очень удобным.

И тут я вспоминаю совет однокурсника по академии (HTML academy, привет) — Firebase от Google. Сервис очень крутой с большим количеством возможностей, но есть нюанс. Заключается он в установке зависимостей firebase в корень проекта, что мне делать совсем не хотелось. Хотелось использовать именно REST API для CRUD операций без всех этих не привычных для меня firebaseConfig, initializeApp, collections и тд.

Install the SDK and initialize Firebase
Install the SDK and initialize Firebase
Access Firebase in your app
Access Firebase in your app

Да, установив все по документации у Вас появляется огромное количество возможностей, но мне данный метод не подходил. На самом деле, не очень хотелось во всем этом разбираться ради простого to-do приложения (по факту оно вышло не таким простым и не совсем to do). Все что мне было нужно — это спроектировать собственное API и взаимодействовать с ним с помощью стандартных HTTP запросов используя axios.

Product categories
Product categories

Итак, выбор сервиса сделан. У Firebase есть множество продуктов под разные задачи.
Для CRUD операций с данными мне подходят 2 сервиса: Realtime Database и Firestore Database. Отличия мне пока не особо понятны, но вроде как Firestore Database для более "тяжелых" приложений, в то время как Realtime Database больше для чатов и тд., где не надо хранить большой объем данных.
Начинаю изучать документацию и нахожу, что в более-менее привычном виде REST API есть у Realtime Database, но опять есть нюанс.

REST API Realtime Database из документации
REST API Realtime Database из документации

Нюансом является то, что в БД данные создаются в виде объекта со свойствами значением которых является объект с текущей задачей. Имена свойств корневого объекта (в моем случае tasks) присваивает сам firebase. Именно это имя сервер нам и возвращает при успешном POST. Таким образом пришел к такой структуре данных:

структура данных моего проекта
структура данных моего проекта

Имея эту информацию мне нужно было как то загрузить данные на сервер, с помощью которых я бы уже создавал каркас фронтенда (без написания рыбы. Работать хотелось сразу с реальными данными). В этом мне помог Postman. Написав примерную структуру, которая мне бы подошла, я сделал свой первый POST запрос на созданный сервер. Теперь у меня есть данные на удаленном сервере :)

Но для работы мне нужны были данные немного в инном виде. Мне нужно было свойство id со значением того самого уникального id, который присваивает Firebase.
Итого имею 2 типа данных:
- тип данных, получаемый / отправляемый на сервер и хранящийся в Store
- тип данных, который используется непосредственно в компонентах.

типы данных для работы приложения
типы данных для работы приложения

Данные в том виде, как они пришли с сервера, храню в сторе. Путем не хитрых манипуляций преобразую эти данные в нужный вид уже при вызове useSelector:

преобразование данных при вызове селектора
преобразование данных при вызове селектора

Готово.

Источник: https://habr.com/ru/articles/729252/


Интересные статьи

Интересные статьи

— Ты не работал с пакетом django-moderation? И если нет, были ли у тебя задачи по модерации объектов, а конкретно: пользователь предлагает изменения, а другой пользователь либо отклоняет, либо принима...
Привет! Я — Роман Махнык, .NET developer в NIX. Уже четвертый год я занимаюсь разработкой коммерческих проектов, а сейчас проектирую разные приложения на основе облачных решений.В своей статье я буду ...
Это — первый материал из серии статей, посвящённой разработке REST-серверов на Go. В этих статьях я планирую описать реализацию простого REST-сервера с использованием нескольких различных...
В основном, про Firebase рассказывают в контексте создания приложений под IOS или Android. Однако, данный инструмент можно использовать и в других областях разработки, на...
VUE.JS - это javascript фрэймворк, с версии 18.5 его добавили в ядро битрикса, поэтому можно его использовать из коробки.