Каждый день я просыпаюсь, загружаю свой ноутбук, открываю браузер и пингую в Google с теми же поисковыми запросами новостей x, y и z. Точно так же, когда я работаю над проектом, я ищу и открываю все соответствующие сайты документации для каждой задействованной технологии.

Стек LAMP, MEAN стек или НЕКОТОРЫЙ (другой) стек, на самом деле это не имеет значения. Мне всегда нужно открывать около дюжины страниц - иногда вместе - между документацией, форумами и другими руководствами.

Имея это в виду, почему бы не написать веб-приложение, которое поможет с этим? Все, что нам нужно сделать, это нажать кнопку и увидеть соответствующие веб-страницы, открытые в новых вкладках. Я называю это «Bulk Link Opener» - простое приложение с простой задачей, которое я использую в повседневной жизни.

Попробуйте сами!

Ознакомьтесь с приложением, которое мы будем создавать, по адресу https://bulklinkopener.pro/, а также ссылайтесь на исходный код в любой точке GitHub по адресу https://github.com/WhiteBookmark/bulk-link-opener .

Мы собираемся разделить руководство на три части.

  • Часть 1. Серверная часть, использующая 8base
  • Часть 2. Интерфейс
  • Часть 3: Развертывание.

Наш технический стек

  • Vue.js - это интерфейсный фреймворк.
  • Vue Apollo для удобного использования GraphQL
  • Бэкэнд GraphQL, который в нашем случае будет 8base

Бэкэнд

Начнем с создания рабочего пространства и его конфигурации в 8base.

Зарегистрируйтесь или войдите на https://app.8base.com и создайте новое рабочее пространство. У них есть бесплатный план, поэтому мы можем все протестировать, поэтому не нужно ничего платить прямо сейчас 😉

После создания рабочей области с именем «Bulk Link Opener» перейдите в рабочую область Службы приложений ›Аутентификация. Добавьте новый профиль аутентификации с помощью кнопки «+» и заполните эту форму, указав следующую информацию.

  • Имя: аутентификация по умолчанию
  • Тип: 8base Authentication
  • Самостоятельная регистрация: отключена
  • Роли: нет

Аутентификация 8base не принимает трафик аутентификации от URL-адресов, не внесенных в белый список. Следовательно, нам нужно внести наши URL-адреса аутентификации в белый список. После создания профиля аутентификации просто убедитесь, что вы прокрутите страницу вниз и убедитесь, что URL-адреса обратного вызова и выхода из системы равны localhost:8080/auth/callback и localhost:8080/logout.

Теперь давайте структурируем нашу модель данных! Это должно выглядеть примерно так:

Таблица Users уже создана, мы просто создадим оставшиеся 3 и свяжем их с помощью отношения «один-много».

В рабочей области откройте раздел Данные. Создайте новую таблицу с именем Категории, затем добавьте 2 новых поля с именами Пользователь и Имя .

Категории:

  • Пользователь - тип данных Таблица и связан с таблицей Пользователи.
  • Имя - тип данных - Текст, а поле размер - 20 символов.

Теперь мы создаем еще одну таблицу с именем Коллекции и добавляем 2 поля: Категория и Имя .

Коллекции:

  • Категория - тип данных Таблица и связан с таблицей Категория.
  • Имя - тип данных - Текст, а поле размер - 20 символов.

Наконец, мы создаем третью таблицу с именем Link и 3 новыми полями, Коллекция, Имя, и URL.

Ссылка:

  • Коллекция - тип данных Таблица и связан с таблицей Коллекция.
  • Имя - тип данных Текст, а поле размер - 100 символов.
  • URL - тип данных Текст, а поле размер - 3000 символов.

Следует отметить, что мы позволяем полю URL-адреса иметь длину до 3 тыс. Символов. Иногда URL-адреса содержат запросы и материалы для отслеживания, что делает длину URL-адреса довольно длинной. 3k - это достаточно, чтобы справиться с этими крайними случаями.

Наша модель данных готова. Теперь мы должны работать над повышением безопасности. GraphQL - очень гибкий инструмент. Если мы можем запрашивать что-либо из серверной части, то может и кто угодно.

Нам нужна какая-то авторизация (не аутентификация, это другое). Хорошая новость заключается в том, что 8base предоставляет такие возможности прямо из коробки.

Откройте рабочую область в 8base, перейдите в Службы приложений ›Роли и щелкните роль с именем Гость :

После этого измените настройки так, чтобы в созданных нами таблицах (Категории, Коллекции и Ссылки) применялась область действия «Записи пользователя». Вот что показано на скриншоте ниже:

Это решает 3 проблемы:

  1. Пользователь приложения может читать только свои записи, но не чужие.
  2. Пользователь приложения может обновлять только свои записи, а не чужие.
  3. Пользователь приложения имеет доступ только к таблицам, которые требуются приложениям.

Итак, авторизация обрабатывается. Что дальше, так это настроить максимальный лимит для каждого пользователя. Мы не хотим, чтобы один пользователь спамил системе 1000 категорий, а затем 4000 коллекций. Если бы существовало 10 таких злоумышленников, у нас было бы 10000 категорий с 40000 коллекциями!

Мы можем исправить это с помощью бессерверных функций. Эти функции можно запускать всякий раз, когда запрос GraphQL выполняется с помощью бэкэнда. Двое напишут и развернут их, сначала мы установим 8base CLI.

# Install 8base CLI globally
npm i -g 8base-cli

После этого аутентифицируйте инструмент командной строки. Это откроет новую вкладку в браузере, которая аутентифицирует терминал с учетной записью 8base.

8base login

Теперь в новой папке проекта выполните следующую команду 8base.

# Init new 8base project
8base init bulk-link-opener-backend -e

Выберите рабочее пространство в селекторе, так как после этого будут созданы необходимая папка и файлы. Флаг -e является сокращением от --empty, который инициализирует проект без каких-либо функций-примеров. Если бы вы запустили ту же команду без пустого флага, была бы сгенерирована одна функция каждого типа (как показано на скриншоте ниже).

Перейдите в bulk-link-opener-backend , где мы теперь будем генерировать нашу пользовательскую функцию. Мы могли бы создать эти файлы вручную, но вместо этого будем использовать инструмент командной строки для их создания.

8base generate trigger categoryLimit

В файле 8base.yml убедитесь, что конфигурация для categoryLimit соответствует следующей. По сути, мы заявляем, что handler.code всегда будет выполняться до создания Категории.

8base из коробки предоставляет 4 типа настраиваемых функций. У каждого есть своя цель. Мы собираемся использовать только тип триггеры. Этот тип следует использовать, когда вам нужно выполнить код до или после мутации (действие create, update или delete).

Мы хотим, чтобы у пользователей было не более 5 категорий, 25 коллекций и 125 Ссылки. Если мы позволим вставлять неограниченное количество данных, мы обанкротимся 😃 Следовательно, наша функция должна подсчитывать существующие строки, и если квота исчерпана, то будет возвращена ошибка и вставка данных будет отменена.

Создайте src / triggers / categoryLimit / graphql.ts:

И замените все в src / triggers / categoryLimit / handler.ts следующим образом:

Наша функция теперь будет ограничивать наших пользователей максимум 5 категориями. Чтобы протестировать его локально, войдите в терминал вместе с вами в корне структуры внутренних папок:

# Test function locally
8base invoke-local categoryLimit -m request

Это привело для меня:

Похоже, это работает, поэтому давайте развернем его в рабочей области (AWS Lamda в фоновом режиме) с помощью одной командной строки:

# Deploy function to AWS Lambda
8base deploy

Лол, да ... это все, что требовалось для его развертывания.

Перейдите в свою рабочую область и откройте страницу Логика. Теперь вы увидите что-то вроде этого:

Теперь давайте добавим ограничения для двух других таблиц Коллекция и Ссылка.

Выполните эти команды:

# Generate collectionLimit trigger
8base generate trigger collectionLimit
# Generate linkLimit trigger
8base generate trigger linkLimit

Убедитесь, что файл 8base.yml имеет правильную конфигурацию, чтобы каждая функция запускалась до того, как связанная с ней таблица создаст новую запись.

Создайте src / triggers / collectionLimit / graphql.ts и введите:

Кроме того, замените все в src / triggers / collectionLimit / handler.ts следующим образом:

Еще раз создайте src / triggers / linkLimit / graphql.ts и введите:

Также замените все в src / triggers / linkLimit / handler.ts следующим образом:

Повторно разверните и проверьте раздел Логика:

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

Нажмите здесь, чтобы перейти ко второй части