Создайте приложение с полным стеком панели администратора для вашей базы данных за считанные минуты.

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

В любом случае, если вы когда-либо создавали приложение для работы с базой данных, вы знаете, что это совсем не просто.

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

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

Но все равно написание и отладка кода отнимают много времени. Даже если вы очень опытный инженер-программист.

Поэтому мы решили создать инструмент, который генерировал бы код приложения для вашей базы данных, используя эти “блоки”. Мы хотели сделать сгенерированный исходный код пригодным для использования прямо из коробки. Если нет, вы могли бы использовать его в качестве начального для вашего собственного приложения.

И мы сделали это! Знакомьтесь IKODIX , онлайн-генератор исходного кода для приложений с полным стеком.

IKODIX не требует доступа к вашей базе данных для генерации кода. В нем используется декларативный подход.

Я терпеть не могу давать длинное и утомительное описание IKODIX – давайте сразу перейдем к созданию небольшого приложения. Это должно занять у вас не более 50-60 минут.

Даже если у вас уже есть несколько доступных тестовых баз данных, давайте запустим базу данных MySQL в Docker, чтобы ускорить процесс.

Запустите базу данных

Установите Docker Desktop на свой локальный хост. Нам это нужно не только для запуска базы данных, но и для запуска сгенерированного приложения.

• Создайте каталог todo-db , перейдите в него и создайте файл docker-compose.yml
• Скопируйте следующий код в этот файл

services:
  db:
    image: mysql:8.0.19
    volumes:
      - ./data:/var/lib/mysql
      - ./init.sql:/init.sql
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=root_password
      - MYSQL_DATABASE=todo
      - MYSQL_USER=myuser
      - MYSQL_PASSWORD=mypassword
    expose:
      - 3306
    ports:
      - 3306:3306
    command: --init-file /init.sql

• Создать запустите файл.sql и скопируйте в него следующий код

CREATE DATABASE IF NOT EXISTS todo;
USE todo;
DROP TABLE IF EXISTS `employee`;
CREATE TABLE `employee` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `full_name` varchar(1000) NOT NULL,
  PRIMARY KEY (`id`)
);
DROP TABLE IF EXISTS `task_status`;
CREATE TABLE `task_status` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `status_name` varchar(200) NOT NULL,
  PRIMARY KEY (`id`)
);
DROP TABLE IF EXISTS `task`;
CREATE TABLE `task` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `description` varchar(5000) NOT NULL,
  `to_date` date DEFAULT NULL,
  `assignee_id` bigint DEFAULT NULL,
  `status_id` bigint NOT NULL,
  PRIMARY KEY (`id`),
  KEY `task_employee_id_fk` (`assignee_id`),
  KEY `task_task_status_id_fk` (`status_id`),
  CONSTRAINT `task_employee_id_fk` FOREIGN KEY (`assignee_id`) REFERENCES `employee` (`id`),
  CONSTRAINT `task_task_status_id_fk` FOREIGN KEY (`status_id`) REFERENCES `task_status` (`id`)
);

• Создать другой data каталог внутри каталога todo-db
• Запустите команду в терминале: docker-compose up -build
• Подождите, пока контейнер не сообщит, что он готов…

Теперь на вашем компьютере запущен контейнер Docker с базой данных todo . Он содержит 3 таблицы: сотрудник , задача , task_status .

Откройте IKODIX

Мы можем начать описывать таблицы в IKODIX. Открыть IKODIX . Перейдите в Таблицы данных и добавьте таблицы со столбцами, как описано ниже.

сотрудник таблица

• Добавьте таблицу employee . По умолчанию он уже будет иметь обязательный Первичный ключ столбец с типом Длинный и имя идентификатор . Это прекрасно для нас, потому что настоящая таблица сотрудник имеет столбец первичного ключа с именем id . Это относится ко всем остальным таблицам в нашей базе данных.
• Добавить full_name столбец с типом String .

task_status таблица

• Добавьте таблицу task_status .
• Добавьте столбец status_name с типом String .

задача таблица

• Добавьте таблицу task .
• Добавьте описание столбец типа Строка .
• Добавьте столбец assignee_id типа Long .
• Добавьте столбец status_id в качестве Long .
• Добавьте столбец to_date типа Дата .

Как только у нас будет список таблиц, мы сможем приступить к созданию прогнозов.

Проекция – это данные из некоторых связанных таблиц. Эти данные будут отображаться во внешнем интерфейсе на отдельной странице в DataGrid . Вы можете провести аналогию с SQL-запросом, который вы пишете для выбора некоторых записей из базы данных.

Как вы уже могли догадаться, наша база данных содержит информацию о некоторых задачах. Первое, что нам нужно увидеть, – это все задачи и назначенных на них сотрудников.

Создайте проекцию Task .

Перед нами откроется диаграмма, где нам нужно добавить таблицы, из которых мы хотим видеть записи.

Сначала мы добавим таблицу task . Первая таблица – это корневая таблица на диаграмме и мы свяжем с ним другие таблицы. Это очень похоже на то, как мы пишем SQL-запрос.

Давайте добавим таблицу task_status . Свяжите столбец status_id из таблицы task со столбцом id в таблице task_status .

Добавьте таблицу employee . Свяжите столбец assignee_id из таблицы task со столбцом id в таблице employee .

Давайте перейдем на вкладку Просмотр . Здесь мы должны отметить как Видимые все столбцы из таблиц на диаграмме, которые мы хотим видеть во внешнем интерфейсе.

Отметьте столбцы description и to_date в таблице задач. Задайте любые подходящие имена для этих столбцов в Заголовок столбца сетки .

Установите видимым столбец full_name из таблицы employee и status_name столбец из таблицы task_status . Дайте им тоже имена.

Вы можете изменить порядок столбцов, которые будут отображаться в DataGrid .

Далее перейдите на вкладку Создать . На этой вкладке мы настраиваем форму для создания записи для корневой таблицы на диаграмме. То есть запись будет создана только в таблице task .

Давайте пометим описание и to_date поля как видимые, дайте им имена и соответствующие типы полей.

Но помимо этих полей, у нас есть связанные поля с другими таблицами: присваиваемый идентификатор и status_id . Давайте пометим их как видимые, назовем их и выберем Select type.

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

Выберите status_name столбец для status_id и столбец full_name для assignee_id .

Перейдите на вкладку Update и сделайте то же самое, что и на вкладке Create .

У нас готова первая проекция. Теперь IKODIX сможет сгенерировать приложение, в котором у нас будет страница со всеми задачами и назначенными им сотрудниками. И мы сможем добавлять задачи через форму ввода.

Но у нас нет страницы и формы ввода для добавления сотрудников в список. Кроме того, здесь нет страницы и формы для ввода статусов вакансий.

Это легко исправить. Создайте две проекции для сотрудников и статусов: Сотрудники и Статусы . Добавьте к каждой проекции одну таблицу на диаграмме: сотрудник и task_status_статус задачи , соответственно.

Вероятно, было бы предпочтительнее, если бы вы попытались настроить DataGrid и формы на вкладках Просмотр , Создать и Обновите для каждой проекции самостоятельно.

Когда вы завершите все настройки в новых проекциях, мы сможем приступить к созданию исходного кода для приложения.

Генерация исходного кода

Но есть еще одна незаконченная вещь – нам нужно выбрать тип базы данных MySQL. Давайте перейдем в раздел Системные настройки и установим нужный нам тип базы данных.

Нажмите кнопку Загрузить исходный код и назовите приложение чем-то вроде “To Do Admin”.

Сохраните архив на локальном хосте в пустом каталоге todo-app . Распакуйте архив в этом каталоге.

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

Откройте README.txt файл и внимательно прочитайте, что там написано.

Согласно руководству, существует два режима запуска приложения: демо-версия и dev .

Demo – это когда создается и запускается готовое к использованию приложение.

Dev – это когда приложение запускается для разработки. Горячая перезагрузка для интерфейса работает в этом режиме.

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

Прежде чем мы начнем, нам нужно настроить доступ к нашей базе данных. Это можно сделать в файле .env . Найдите, где находится переменная DataSource.url и замените ее значение на jdbc:mysql://host.docker.internal:3306/для выполнения . Затем замените имя пользователя ( DataSource.username ) на my user и пароль ( DataSource.password ) на my password . Сохраните файл.

Запуск приложения

Два контейнера Docker используются для запуска всех частей приложения. Но все, что нам нужно сделать, это выполнить команду app.sh демо-версия (или app.cmd demo для Windows). И дождитесь запуска приложения.

Поскольку контейнеры с приложением работают в фоновом режиме, нам нужно отслеживать их. Давайте выполним две команды app.sh клиентский журнал и app.sh сервис-журнал в отдельных терминалах.

Как только мы увидим, что все запущено и запущено, мы сможем открыть браузер по адресу http://localhost:3030

По умолчанию в системе есть один пользователь с правами администратора. Итак, мы войдем в систему под его учетной записью, именем пользователя: администратор и паролем: пароль администратора .

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

Несмотря на то, что приложение работает “из коробки”, нам нужно изменить название компании в левом верхнем углу.

Для того чтобы сделать это, давайте запустим приложение в режиме разработки. Просто запустите команду app.sh dev .

Давайте подождем, пока запустятся все контейнеры Docker. Чтобы убедиться, что они готовы, используйте команды: app.sh клиентский журнал и app.sh сервис-журнал в отдельных терминалах.

Когда все будет готово, давайте откроем браузер с адресом http://localhost:3030

Теперь найдите рабочую область Page.txt файл в интерфейсном коде в каталоге to-do-admin-client/src/features/layout и замените текст “Название компании” на нужное нам значение: “ToDo Admin”.

Сохраните изменения в файле…. и просмотрите страницу в своем браузере. Значение должно автоматически измениться.

Контейнеры Docker для внешнего интерфейса сделаны так, что Горячая перезагрузка работает.

После внесения окончательных изменений вам необходимо запустить app.sh demo снова – затем части приложения будут созданы для использования в производстве. Вы найдете дистрибутивы в to-do-admin-client/build и в to-do-admin-service/target .

Если вы собираетесь расширить функциональность приложения, сначала прочтите README.md файлы с подробным описанием структуры кода в to-do-admin-client и to-do-admin-service каталоги. Это поможет вам без труда разобраться в коде.

Я надеюсь, вы не слишком устали и наслаждаетесь строительством с помощью IKODIX . В любом случае, это намного быстрее и удобнее, чем разрабатывать такие приложения самостоятельно.

Если у вас есть какие-либо комментарии или вопросы, не стесняйтесь размещать их на нашем форуме: Форум IKODIX

Также следите за новыми выпусками IKODIX в нашем Твиттере: @kodix

Спасибо!!!

Оригинал: “https://dev.to/ipselon/create-an-admin-panel-full-stack-app-for-your-database-in-minutes-1e65”