Главная » Руководства

Создание приложения для отслеживания ошибок с помощью ToolJet и Appwrite.

На чтение 13 мин. Просмотров 10 Опубликовано

В этой статье мы рассмотрим полное руководство по созданию приложения Bug-Tracker, которое позволит вам создавать и управлять ошибками с помощью заголовка, описания, названия проекта, приоритета и тега со встроенными сообщениями для уведомления пользователя. Предварительный просмотр приложения можно посмотреть здесь

Мы собираемся создать это приложение с помощью трех простых шагов:

  1. Создание пользовательского интерфейса
  2. Интеграция источников данных и создание запросов
  3. Подключение обработчиков событий

Вот как будет выглядеть наше приложение в конечном итоге:

Предварительные требования:

  1. ToolJet: Создание пользовательского интерфейса нашего приложения
  2. Appwrite: Для хранения сообщений об ошибках в коллекции Appwrite
  3. Aws S3: Для хранения изображений в ведре S3
  4. DigitalOcean: Для развертывания Appwrite

Этот учебник поможет вам создать полное приложение за несколько минут, и позволит понять различные шаги с полным описанием. Будет лучше, если вы изучите следующие статьи, прежде чем мы начнем создавать приложение. Давайте пристегнем ремни, чтобы получить удовольствие от разработки.

  1. Tooljet
  2. Appwrite
  3. AWS
Содержание
  1. Создание пользовательского интерфейса
  2. Интеграция источников данных и создание запросов
  3. Подключение обработчиков событий

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

Во-первых, давайте начнем с создания пользовательского интерфейса для нашего приложения. Откройте ToolJet на новой вкладке и нажмите «Создать новое приложение». Для создания всего приложения нам понадобятся следующие виджеты.

  1. Контейнер
  2. TextInput и TextArea
  3. Кнопка
  4. Таблица
  5. Выпадающий
  6. File-Picker
  7. Изображение
  8. Модалы

Шаг 1: Создайте табличное представление для списка и управления ошибками

Перетащите виджет контейнера из нашего меню виджетов справа и разверните его полностью. Теперь поместите виджет таблицы внутрь нашего контейнера. После этого давайте осмотрим виджет таблицы и начнем добавлять следующие элементы:

  1. Добавьте столбцы: Название, Описание, Приоритет, Статус, Назначенный проект и Сообщение.

  1. Кнопка действий: «Просмотреть детали» и «Редактировать». Мы можем стилизовать наши кнопки, нажав на действия. Позже мы установим свойство «Добавить обработчик», когда закончим работу над нашими модальными представлениями.

В верхней части таблицы добавьте виджет «Текст» под названием Bug Tracker и виджет «Кнопка» с CTA «Новая ошибка». Мы можем стилизовать кнопку, добавив ей цвета и радиус границы. Мы установим событие onClick позже.

Шаг 2: Создание модалов для CRUD-операций

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

  1. Новая ошибка: Это позволяет вам перечислить новую ошибку конкретного проекта с заголовками, описаниями, приоритетом, сообщениями и соответствующими изображениями.

Перетаскивайте тексты, виджеты text-input, text-area, dropdowns, file-picker и button и настраивайте их в соответствии с пользовательским интерфейсом.

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

a) Выбор приоритета: {{["Низкий", "Средний", "Высокий"]}}
b) Название проекта: {{["Мобильное приложение", "Внутренний инструмент", "Веб-сайт"]}}
c) Сообщение об уведомлении: {{["Решить сейчас", "Решить через 3 часа", "Решить в течение 48 часов", "Спасибо за решение"]}}

  1. Просмотреть детали: Это позволяет вам просматривать конкретные детали вокруг вашей ошибки для лучшего понимания.

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

Инспектируем модал, устанавливаем заголовок в Title:{{components.table1.selectedRow.title}}.

Нам нужно связать данные в наших текстах, чтобы отобразить следующий пользовательский интерфейс.
a) Сообщение: {{components.table1.selectedRow.message}}
b) Приоритет: {{components.table1.selectedRow.priority}}
c) Проект: {{components.table1.selectedRow.project_assigned}}
d) Описание: {{components.table1.selectedRow.description}}.

Проверьте виджет изображения и задайте URL: {{queries.ListDocument.data.documents[components.table1.selectedRowId].preview_url}}.

д) Сообщение: {{components.table1.selectedRow.message}}.

3. Редактирование: Позволяет выполнять операции редактирования и удаления существующей ошибки.

Перетаскивайте тексты, виджеты text-input, text-area, dropdowns, file-picker и button и настраивайте в соответствии с вышеуказанным UI. В настоящее время у нас нет возможности редактировать изображение. Я добавлю ее в следующей версии этого приложения.

Выполните шаг 1, чтобы заполнить значение и метку выпадающей опции. Теперь добавьте значение по умолчанию для каждого поля ввода:

a) Заголовок: {{queries.ListDocument.data.documents[components.table1.selectedRowId].title}}.
b) Описание: {{queries.ListDocument.data.documents[components.table1.selectedRowId].description}}
c) Приоритет: {{queries.ListDocument.data.documents[components.table1.selectedRowId].Priority}}
d) Название проекта: {{queries.ListDocument.data.documents[components.table1.selectedRowId].project_assigned}}
e) Сообщение об уведомлении: {{queries.ListDocument.data.documents[components.table1.selectedRowId].message}}
f) Загруженный скриншот: {{queries.ListDocument.data.documents[components.table1.selectedRowId].preview_url}}

Шаг 3: Проверка формата и стилей таблицы

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

a) Свойства: Это поможет вам отобразить коллекцию, которую вы создали на Appwrite. Позже в учебнике мы узнаем о создании запросов. Вы должны скопировать этот {{queries.ListDocument.data.documents}} в поле ввода.

б) Колонки: Мы определили эти колонки в наших атрибутах Appwrite. Нам нужно обновить и добавить следующие столбцы, т.е. название, описание, приоритет, проект_назначен и сообщение. Примечание: Определяйте атрибуты в небольшом корпусе. В настройках каждого столбца присвойте ключу то же значение, что и имени столбца.

c) Кнопки действий: После добавления двух кнопок действия, Edit и View details, вы можете изучить их настройки, чтобы придать кнопке стиль. Вы должны добавить обработчик события с «Show Modal» в качестве действия и выбрать модальную кнопку view_details. То же самое сделайте в настройках кнопки действия Edit для модала Edit.

г) Стили: На вкладке стилей таблицы установите радиус кнопки действия равным 8, тип таблицы — пограничная, размер ячеек — просторный, радиус границы — 8.

Шаг 4: Подключение модалов в пользовательском интерфейсе

Давайте добавим наши модалы с событиями onClick к соответствующим кнопкам. Осмотрите каждую кнопку и перейдите к свойству «Добавить обработчик события», чтобы выполнить этот шаг.

Теперь нажмите на «Action» и установите значение «Show Modal». Мы получим возможность выбрать параметры действия, которые мы поместим в наши соответствующие модалы.

Отлично !!! 👍 Мы завершили первую часть нашего приложения. Теперь давайте перейдем к следующему шагу.

Интеграция источников данных и создание запросов

Мы должны добавить 2 источника данных, т.е. Aws и Appwrite. Вы можете посетить эти ссылки, чтобы прочитать о шагах, связанных с интеграцией.

Шаг 1: Добавление источников данных

a) Настройте AWS:

  1. Создайте учетную запись на AWS
  2. После этого необходимо предоставить разрешения на доступ
  3. Создайте ведро с предпочтительным именем
  4. Вам нужно собрать ключ доступа и секретный ключ и перейти на вкладку ToolJet, где вы создали пользовательский интерфейс
  5. В левой части выберите источники > нажмите на «+», чтобы добавить источник данных > найдите и выберите AWS s3
  6. Теперь заполните поля ввода Access key, Secret key, а в регионе выберите «Asia Pacific (Mumbai)».
  7. Как только вы протестируете соединение, сохраните его.

b) Настройте Appwrite:

Мы будем разворачивать Appwrite на DigitalOcean. Чтобы сделать это, выполните следующие шаги:

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

  2. После регистрации вы получите бесплатные кредиты в размере $100, действительные в течение 60 дней с момента регистрации. Вы можете использовать эти кредиты для развертывания приложений.

  3. Теперь создайте дроплет Appwrite в своем аккаунте DigitalOcean по следующей ссылке: https://marketplace.digitalocean.com/apps/appwrite.

  4. Затем выберите возможности, которые вы хотите использовать для вашего дроплета. Мы выберем «Базовый» вариант с общим процессором и не менее 1 ГБ оперативной памяти. Выберите самый дешевый вариант с процессором Intel с SSD за $5 в месяц.

  5. На следующем этапе создайте учетные данные для входа в систему вашей виртуальной машины. Вы можете либо добавить SSH-ключи, либо создать пароль root. Рекомендуется добавить SSH-ключи, но вы можете использовать пароль root, если вы новичок.

  6. Нажмите на завершить и создать. Через некоторое время на DigitalOcean будет запущена ваша виртуальная машина.

  7. Наконец, вы можете перейти по IP-адресу или URL нашего нового сервера и войти в консоль Appwrite.

Создание коллекций и документов

Теперь давайте рассмотрим создание коллекций и атрибутов в Appwrite.

  1. Войдя в консоль Appwrite, создайте проект. Назовем этот проект: **bug_tracker**.

  1. Перейдите к Базе данных из боковой панели в консоли и нажмите на кнопку Добавить коллекцию. В модальном окне введите имя коллекции как bug_tracker и нажмите кнопку Create.

  1. В Appwrite коллекции содержат документы. Мы добавим несколько образцов документов в созданную нами Коллекцию. Коллекции можно представить как таблицы, а документы — как строки. Но прежде чем добавлять документы, нам нужно будет добавить атрибуты.

  2. Нам понадобятся следующие атрибуты для документов в нашей коллекции:

  • ID атрибута (ключ): title, Type: String (Название ошибки Например: Button-alignment).

  • ID атрибута (ключ): description, Type: String (Описание ошибки. Например: В /user/profile выровнять кнопку «Сохранить подробности» вправо)

  • Атрибут ID(ключ): приоритет, Тип: String (Установите низкий, средний, высокий).

  • Атрибут ID(ключ): сообщение, Тип: Строка (Выберите сообщение из выпадающего списка: Например: Решить сейчас)

  • ID(ключ) атрибута: project_assigned, Type: string (Проект, в котором обнаружена ошибка. Например: Website)

  • Атрибут ID(key): preview_url, Type: string(URL) (URL изображения скриншота ошибки).

  1. Наконец, вы можете начать добавлять документы в коллекцию.

Давайте рассмотрим шаги по добавлению источника данных Appwrite:

  1. Перейдите на левую боковую панель и нажмите на Datasource.
  2. В появившемся модале выберите источник данных Appwrite.
  3. Вам будет предложено ввести — Host, ID проекта и секретный ключ. Эти три параметра вы найдете в консоли Appwrite.
  4. Теперь нажмите на кнопку Test Connection, чтобы убедиться, что сервер Appwrite успешно подключен.
  5. Нажмите кнопку Сохранить, чтобы добавить источник данных.

Ура!!! 😍 Мы добавили наши источники данных. Теперь давайте создадим различные операции запроса, необходимые для интеграции в наше приложение.

Шаг 2: Создание запросов

Вот следующие запросы, которые мы собираемся создать. Я подробно опишу каждый шаг. Нажмите на значок ‘+’ слева и выберите AWS S3 или Appwrite в качестве dataSource для соответствующих запросов.

Давайте создадим наш первый запрос для подключения ведра AWS, которое мы создали в предыдущем шаге.

  1. UploadImage: Имя запроса. Мы загрузим файл, выбранный нашим виджетом выбора файлов, в ведро AWS.

Выберите следующие компоненты и заполните их соответственно. Эти компоненты взяты из нашего **create_new_bug **modal, поэтому задайте их соответствующим образом.

a) Операция: Upload Object
b) Ведро: Ведро, которое вы создали на панели инструментов AWS. Я назвал свое ведро ‘tooljet-bucket’.
c) Ключ: {{components.filepicker2.file[0].name}}
d) Content-Type: {{components.filepicker2.file[0].type}}
e) Данные загрузки: {{components.filepicker2.file[0].base64Data}}
f) Кодировка: base64

После этого SAVE сохраните запрос.

  1. Загрузка: Имя запроса. Мы загружаем подписанный URL-адрес для предварительного просмотра в нашем приложении.

Нам нужно добавить следующее:

a) Операция: Подписанный URL для загрузки
b) Ведро: Имя ведра, в которое мы загружаем URL для предварительного просмотра
c) Ключ: Это должно быть имя файла. {{components.filepicker2.file[0].name}}
d) Срок действия: Установите значение 36,0000

Поздравляем!!! Мы успешно настроили наши первые запросы. Теперь давайте создадим запросы со следующими именами, чтобы подключить Appwrite для выполнения основных операций CRUD.

  1. ListDocument: Чтобы перечислить все документы, которые мы создали в наших коллекциях на Appwrite. Скопируйте и вставьте следующие значения.

a) Операция: List Document
b) Идентификатор коллекции: В настройках, вы получите это в своей приборной панели Appwrite.

На вкладке «Дополнительно» установите флажок «Запускать этот запрос при загрузке страницы». После этого сохраните запрос.

  1. createNewDoc: Чтобы добавить новые записи в нашу коллекцию. Заполните следующие поля.

a) Операция: Добавить документ в коллекцию
b) Идентификатор коллекции: Вы получите его на панели управления Appwrite в разделе настроек.
c) Тело: Добавьте следующие пары ключ-значение. Это формат данных, в котором наша коллекция Appwrite будет получать данные.

{"title": "{{components.textinput4.value}}","description":"{{components.textarea3.value}}","project_assigned": "{{components.dropdown7.value}}","priority": "{{components.dropdown8.value}}","message": "{{components.dropdown9.value}}","preview_url":"{{queries.Download.data.url}}"}

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

  1. DeleteDocument- Чтобы удалить документ в коллекции, выполните следующие действия.

Добавьте следующее:

a) Операция: Удалить документ
b) Идентификатор коллекции: Вы получите его на панели управления Appwrite в разделе настроек.
c) Идентификатор документа: Это не что иное, как идентификатор выбранной строки. {{queries.ListDocument.data.documents[components.table1.selectedRowId].$id}}.

После выполнения сохраните этот запрос. Теперь давайте посмотрим на наш последний запрос.

  1. UpdateDocument: Для обновления определенного документа в коллекции.

a) Операция: Обновить документ
b) Идентификатор коллекции: Вы получите его на панели управления Appwrite в разделе настроек.
c) Идентификатор документа: Это не что иное, как идентификатор выбранной строки. {{queries.ListDocument.data.documents[components.table1.selectedRowId].$id}}.
d) Тело: Добавьте следующие пары ключ-значение. Это формат данных, в котором наш Appwrite будет получать данные и обновлять коллекцию.

{"title": "{{components.textinput3.value}}","description":"{{components.textarea2.value}}","project_assigned": "{{components.dropdown4.value}}", "Priority":"{{components.dropdown5.value}}","message": "{{components.dropdown6.value}}", "preview_url":"{{queries.ListDocument.data.documents[components.table1.selectedRowId].preview_url}}"}

Сохраните запрос, когда все детали будут заполнены правильно.

Потрясающе!!! 🤩 Мы создали все наши запросы. Теперь нам нужно подключить эти запросы в нашем приложении при нажатии на кнопку в качестве следующего шага.

Подключение обработчиков событий

Теперь, когда мы создали пользовательский интерфейс и создали все запросы, все, что нам нужно сделать, это связать пользовательский интерфейс с запросами. Давайте начнем:

  • Перейдите к модалу Create_New_Bug, осмотрите виджет кнопки «Create» и добавьте следующие обработчики шести событий в той же последовательности:

a) Set Variable: Выберите следующее действие и добавьте ключ как «new_bug_status» и установите значение {{true}}. Перейдите на вкладку Advanced в настройках запроса ListDocument и нажмите на «add a handler». В действии выберите «установить переменную», ключ — new_bug_status, а значение — {{false}}. При создании кнопки также программно обновите состояние загрузки следующим значением: {{variables?.new_bug_status ?? false}}. Это позволит сохранить состояние загрузки во время обработки запросов.

b) Запустить запрос: Выберите следующее действие и добавьте запрос как «uploadImage».
c) Запустить запрос: Выберите следующее действие и добавьте запрос «Download».
d) Выполнить запрос: Выберите следующее действие и добавьте запрос «createNewDoc».
д) Выполнить запрос: Выберите следующее действие и добавьте запрос «ListDocument».
f) Закрыть модальное окно: выберите следующее действие и добавьте модальное окно в качестве имени текущего модального окна, т.е. в данном случае Modal3.

  • Перейдите к модалу Edit_Bug, осмотрите кнопку «Delete» и добавьте следующие три обработчика событий в той же последовательности:

a) Запустите запрос: Выберите следующее действие и добавьте запрос как «DeleteDocument».
b) Выполнить запрос: Выберите следующее действие и добавьте запрос как «ListDocument».
c) Закрыть модальное окно: выберите следующее действие и добавьте modal как имя текущего модального окна, т.е. Modal2 в данном случае.

  • Перейдите к модалу Edit_Bug, осмотрите кнопку «Обновить» и добавьте следующие три обработчика событий в той же последовательности:

a) Run Query: Выберите это действие и добавьте запрос как «UpdateDocument».
b) Запустить запрос: Выберите следующее действие и добавьте запрос как «ListDocument».
c) Закрыть модальное окно: выберите следующее действие и добавьте имя текущего модального окна, т.е. в данном случае Modal2.

Мы успешно соединили запросы и пользовательский интерфейс, и теперь наше приложение полностью функционально. Теперь вы можете понять причину такой последовательности запросов. Теперь мы можем выполнить любую CRUD-операцию и проверить все потоки в нашем приложении.

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

Мы постоянно интегрируем различные источники данных в ToolJet. Оставайтесь в курсе событий и читайте предстоящие статьи о разработке полезных внутренних инструментов. Если у вас возникли проблемы с созданием этого приложения, присоединяйтесь к нашему сообществу в Slack или напишите нам по адресу hello@tooljet.com.

Рекомендуем почитать:

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