Создание приложения MinIO file explorer за 30 минут


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

Что такое MinIO?

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

Что вам понадобится для создания файлового проводника GCS?

  • ToolJet (https://github.com/ToolJet/ToolJet): Бесплатная платформа с открытым исходным кодом, позволяющая быстро создавать приложения. Вы можете создать бесплатный аккаунт на ToolJet Cloud или запустить его на своей локальной машине.
  • MinIO: Ознакомьтесь с различными редакциями и их ценообразованием здесь. В этом руководстве я использовал редакцию для сообщества с использованием docker.

Бонус: Скачайте экспортированное приложение и импортируйте его в свой аккаунт ToolJet, чтобы сразу же использовать его.

Вот взгляд на приложение:

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


Создание пользовательского интерфейса проводника

Давайте начнем с создания пользовательского интерфейса для проводника. Войдите в ToolJet и на панели инструментов нажмите на кнопку Создать новое приложение, чтобы создать новое приложение. Как только приложение будет создано, вы будете перенаправлены в визуальный редактор приложений. Вы можете изменить название приложения, отредактировав название по умолчанию, т.е. Untitled app в верхней левой части конструктора приложений.

Визуальный редактор приложений состоит из 4 разделов:

  • Canvas в центре, где вы будете перетаскивать виджеты для создания пользовательского интерфейса.
  • Редактор запросов в нижней части, где вы можете создавать запросы.
  • На правой боковой панели находится менеджер виджетов, в котором есть список встроенных виджетов и компонентов. Вы можете перетаскивать их, чтобы начать создавать пользовательский интерфейс.
  • На левой боковой панели находятся инспектор, отладчик, комментарии, настройки и менеджер источников данных. Менеджер источников данных используется для добавления нового источника данных или управления подключенным источником данных.

Создадим пользовательский интерфейс

Для создания пользовательского интерфейса вам нужно перетащить следующие компоненты из менеджера виджетов (правая боковая панель) и разместить их соответствующим образом.

Вот конфигурация виджетов, которую я использовал для создания пользовательского интерфейса:

  • Контейнер в качестве заголовка и текстовый виджет внутри контейнера, чтобы дать название приложению, т.е. MinIO File Explorer.

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

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

  • Давайте перетащим контейнер поверх текстового виджета и поместим виджет просмотра списка внутрь контейнера. Вы также можете использовать текстовые виджеты для задания названий столбцов — Имя, Последнее обновление, Размер и Действия.

  • В виджете представления списка используйте текстовый виджет для имени, последнего обновления и размера. Для действия используйте виджет изображения. Пользователь будет нажимать на изображение для загрузки объекта из MinIO.

  • Установите следующие значения полей для трех текстовых виджетов Name, Updated on и Size как {{listItem.name}}, {{moment(listItem.lastModified).format("DD/MM/YYY h:mm:ss a")}} и {{(listItem.size/1024).toFixed(2)}} kb соответственно. В виджете изображения установите значение состояния загрузки {{listItem.id === variables.currentlyLoadingId}} , и добавьте обработчик события для открытия веб-страницы {{queries.urlfordownload.data.url}}.

  • Перетащите кнопку на правую сторону контейнера, которая будет использоваться для запуска диалога для выбора ведра.

  • Перетащите модальное окно куда-нибудь под контейнер, перейдите к свойствам кнопки и установите обработчик события для показа добавленного вами модального окна.

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

  • Добавим текстовый виджет рядом с кнопкой для отображения текущего выбранного ведра. Установим значение текста как {{components.dropdown1.value}}.

  • Теперь последняя секция пользовательского интерфейса — секция загрузки. Мы построим эту секцию внутри контейнера. Для создания секции мы будем использовать виджеты текста, разделителя, ввода текста, выбора файла и кнопки. Виджет кнопки будет включать обработчик события для запуска запроса на загрузку, который мы создадим позже.

💡 Посмотрите документацию, чтобы узнать больше о настройке виджетов и улучшении пользовательского интерфейса. ✨

Теперь мы закончили создание пользовательского интерфейса — давайте перейдем к подключению MinIO и созданию запросов.


Подключение источника данных MinIO и создание запросов

Перед созданием запросов давайте сначала подключим источник данных MinIO:

  • Перейдите в менеджер источников данных на левой боковой панели и нажмите на кнопку +, чтобы добавить новый источник данных.
  • Найдите и нажмите на MinIO.
  • Введите хост, порт, имя пользователя и пароль.
  • Вы можете нажать на кнопку Test connection, чтобы проверить соединение, а затем нажмите на кнопку Save, чтобы сохранить источник данных.
  • Теперь можно приступать к созданию запросов.

*Для этого приложения нам нужно будет создать запросы для:
*

  • JavaScript-код для запуска модального действия show
  • Вывод списка ведер из MinIO
  • Вывод списка объектов/файлов из выбранного ведра
  • Загрузка файла в выбранное ведро
  • Создание подписанного URL для загрузки объекта из ведра

Код JavaScript для запуска модального действия «Показать

  • Перейдите на панель запросов и нажмите на кнопку +.
  • Создайте новый запрос JavaScript code query и введите следующий код для запуска модального действия show:
actions.showModal('modal1')
Войти в полноэкранный режим Выйти из полноэкранного режима

  • Перейдите на вкладку Advanced, включите опцию Run query on page load? и сохраните запрос как showModalOnPageLoad. Включение опции Run query on page load отобразит модальное окно при каждой загрузке приложения, предоставляя пользователям возможность выбрать ведро, прежде чем переходить к другим функциям приложения.

Вывод списка ведер из MinIO

  • Перейдите на панель запросов и нажмите на кнопку +, чтобы создать новый запрос.
  • Выберите MinIO в качестве источника данных
  • В выпадающем списке операций выберите опцию List buckets (Перечислить ведра).

  • Перейдите на вкладку Advanced, включите опцию Run query on page load? и нажмите кнопку Save and Run.
  • Давайте откроем модальное окно, нажав на кнопку изменения, а затем отредактируем свойства выпадающего окна внутри модального окна. Установим значения опции и метку опции как {{queries.listBuckets.data.map(row => row.name)}}, значение по умолчанию {{queries.listBuckets.data.map(row => row.name)[0]}}, а состояние загрузки опции {{queries.listBuckets.isLoading}}.

Вывод списка объектов/файлов из выбранного ведра

  • Перейдите на панель запросов и нажмите на кнопку +, чтобы создать новый запрос
  • Выберите MinIO в качестве источника данных
  • В выпадающем списке операций выберите опцию List objects in a bucket (Перечислить объекты в ведре)
  • В поле Bucket используйте JS для динамического получения значения из выбранной опции в выпадающем виджете — {{components.dropdown1.value}}.

  • Теперь перейдите на вкладку Advanced и добавьте обработчик событий для закрытия модала после успешного выполнения запроса.
  • Сохраните и запустите запрос как listFiles.

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

  • Перейдите в виджет представления списка и подключите данные, возвращенные запросом. Установите значение поля list data в {{queries.listFiles.data.files}}.

Загрузка файла в выбранное ведро

  • Перейдите на панель запросов и нажмите на кнопку +, чтобы создать новый запрос.
  • Выберите MinIO в качестве источника данных
  • В выпадающем списке операций выберите опцию Поместить объект
  • В поле Bucket введите {{components.dropdown1.value}} , поле File name введите {{components.textinput1.value}} , поле Content type введите {{components.filepicker1.file[0].type}} , и поле Upload data введите {{components.filepicker1.file[0].content}}.

  • Перейдите на вкладку Advanced и добавьте два обработчика событий, один для запуска запроса listFiles для события On Success. Это перезагрузит список файлов в виджете listview.

  • А другой обработчик событий установит действие, специфичное для компонента file picker, которое очистит файл из виджета после успешного выполнения запроса.

  • Сохраните и запустите запрос как загрузку.

Создание подписанного URL для загрузки файла из ведра

  • Перейдите на панель запросов и нажмите на кнопку +, чтобы создать новый запрос.
  • Выберите MinIO в качестве источника данных
  • В выпадающем списке операций выберите опцию Подписанный URL для загрузки
  • В поле Bucket введите {{components.dropdown1.value}}, а в поле File name введите {{queries.listFiles.data.Body[components.listview2.selectedRowId].name}}.

  • Перейдите на вкладку Advanced и установите обработчик события unset a variable — currentlyLoadingId

  • Сохраните запрос как urlfordownload
  • Перейдите к виджету представления списка и нажмите на его ручку, чтобы отредактировать его свойства.
  • Добавьте два обработчика событий — один для установки переменной currentlyLoadingId для события On row click и установите ее значение {{queries.listFiles.data.Body[components.listview2.selectedRowId].name}}.
  • А другой обработчик запустит запрос urlfordownload.
  • Теперь вы можете щелкнуть на одной из строк виджета просмотра списка, и он запустит запрос urlfordownload.

Потрясающе! Мы успешно создали все запросы и подключились к пользовательскому интерфейсу.


А теперь, наконец, просто Отпустите ваше приложение в правом верхнем углу редактора приложений.

Вы успешно создали приложение File explorer для вашего объектного хранилища MinIO 🎉.


Если у вас есть вопросы, связанные с созданием приложений с ToolJet, или вы просто хотите пообщаться в сообществе разработчиков низкокодовых приложений, просто напишите нам в Slack. 🚀

Оцените статью
devanswers.ru
Добавить комментарий