Введение

В этой статье будет рассказано, как кодировать простые операции CRUD в приложении todo с использованием Next.js и Altogic, платформы Backend-as-a-Service, использующей свою клиентскую библиотеку.

Вы можете ознакомиться с демо.

Каковы особенности приложения todo?

  1. Создать задачи
  2. Обновить задачи
  3. Удалить задачи
  4. Читать задачи

Настройка серверной части

Создать приложение

Мы можем быстро создать приложение с помощью Altogic Designer. Чтобы создать приложение с помощью Конструктора:

  1. Войдите в Altogic, используя свои учетные данные.
  2. Выберите Новое приложение.
  3. В поле Имя приложения введите имя приложения.
  4. И нажмите Далее.

  1. Выберите шаблон Пустое приложение и нажмите Далее.
  2. Нажмите Создать на вкладке «Подтвердить и создать».

Здесь вы можете настроить свой субдомен, но это не обязательно, Altogic автоматически создаст его для вас,ваш envUrl. Вам не нужно беспокоиться, если вы потеряли свой envUrl; вы можете получить его в представлении Среды в Designer.

После создания нашего приложения нам нужны envUrl и clientKey для доступа к нашему приложению через Altogic Client Library для создания веб-приложения.

Чтобы получить clientKey, нам нужно войти в приложение, которое мы создали ранее, и;

  1. Нажмите Настройки приложения в левом нижнем углу конструктора.
  2. Нажмите на раздел Ключи клиентской библиотеки.

Мы можем создать новую clientKey на этой странице, но спасибо Altogic за автоматическое создание одной clientKey для нас, поэтому давайте скопируем существующую clientKey из списка.

Создать модель задач

  1. Нажмите Модели на левой боковой панели.
  2. Нажмите Создать в правой части экрана и выберите модель.
  3. Установите название модели как todo
  4. Убедитесь, что выбран параметр Включить временные метки, чтобы сохранить дату создания сообщения в блоге.
  5. Нажмите Далее.

Altogic предоставляет основные конечные точки и службы CRUD со связанной моделью по умолчанию при создании новой модели. Поскольку мы используем Altogic Client Library, мы не будем использовать эти конечные точки.

Мы создали нашу первую модель, "todo". Мы должны определить имя свойств модели, dateTime для даты выполнения и статус. Поскольку мы создали модель todo, мы должны определить свойство name как Text, dateTime как Date-time. , а статус — Boolean.

  1. Нажмите на модель todo на странице Модели.
  2. Нажмите Новое поле в правом верхнем углу страницы.
  3. Выберите Текстовое поле→ Текст.
  4. Задайте название модели имя.
  5. Убедитесь, что выбрано Обязательное поле.
  6. Нажмите Создать.

  1. Нажмите Новое поле в правом верхнем углу страницы.
  2. Выберите Логическое значение.
  3. Установить статус названия модели.
  4. Убедитесь, что выбрано Обязательное поле.
  5. Установите выражение значения по умолчанию false.

  1. Нажмите Новое поле в правом верхнем углу страницы.
  2. Выберите Дата-время.
  3. Установите имя модели dateTime.
  4. Убедитесь, что выбрано Обязательное поле.
  5. Установить выражение значения по умолчанию DATEADD(NOW(),5).

Мы завершили проектирование базы данных и определение модели на Altogic без написания кода и сложной настройки. Перейдем к фронтенд-разработке.

Настройка внешнего интерфейса

Инициализировать приложение Next.js

Мы можем использовать create-next-app для инициализации приложения Next.js:

npx create-next-app quickstart-todo

Затем установите пакет Altogic.

cd quickstart-todo
npm install altogic

Настройте переменные среды

Переменные среды используются для защитываших секретных ключей, повторного использованияихв разных местах и ​​уменьшения производственных ошибок. Создайте файл .env.local в корневом каталоге вашего приложения, откройте файл в редакторе и вставьте следующее. Вы можете узнать больше о переменных окружения в Next.js здесь.

Замените YOUR-APPLICATION-ENV-URL и YOUR-APPLICATION-CLIENT-KEY значениями envUrl и clientKey, которые вы получили при настройке серверной части.

Затем создайте файл для создания экземпляра Altogic Client Library.

mkdir helpers
cd helpers
touch altogic.js

Это создает файл altogic.js в каталоге helpers. Откройте файл в редакторе и вставьте следующее.

Здесь вам нужно ввести envUrl и clientKey.

Теперь установите Tailwind CSS и создайте tailwind.config.js

cd ../
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Добавьте пути ко всем файлам вашего шаблона в файл tailwind.config.js.

Добавьте следующие директивы в ваш файл globals.css.

Как получить задачи

Внутри вашего хука useEffect() отправьте запрос на получение в Altogic, используя функцию altogic.db.model(modelName).get() клиентской библиотеки Altogic. Затем установите полученные данные в состоянии todos.

Как добавить дело

Реализуйте функцию handleAddTodo для отправки запроса в Altogic для создания объектов с помощью функции altogic.db.model(modelName).create({}) клиентской библиотеки Altogic. Затем добавьте только что созданный объект в состояние todos с помощью setTodos.

Как переключить статус todo

Нам нужно иметь возможность обновлять статус наших задач. Мы реализуем функцию toggleTodo для отправки запроса на обновление в Altogic для обновления объектов с помощью функции altogic.db.model(modelName).object(objectId).update({}) клиентской библиотеки Altogic. Затем мы обновим задачу в состоянии todos, перебирая массив.

Как удалить дело

Мы также можем удалить наши задачи. Мы реализуем функцию handleDeleteTodo для отправки запроса на удаление в Altogic для удаления объектов с помощью функции altogic.db.model(modelName).object(objectId).delete() клиентской библиотеки Altogic. Затем мы удалим задачу в состоянии todos, отфильтровав массив.

Вы можете проверить репозиторий, чтобы узнать, как отображать данные, которые мы извлекаем, и реализовывать создание/удаление задач.

Заключение

В этой статье рассказывается, как реализовать простые операции CRUD с помощью Next.js и Клиентская библиотека Altogic.Благодаря Altogic ,мы можем создать большую часть функций всего несколькими строками кода.

Остальной код можно найти в репозитории GitHub. Вы также можете клонировать его и создать свое приложение поверх него.