В этой статье вы научитесь создавать приложение, которое позволит вам управлять всеми вашими заявками на работу прямо с вашей личной приборной панели.
В этом руководстве мы создадим CRUD-приложение, которое позволит вам создавать, читать, обновлять и удалять данные из источника данных (здесь Google Sheets). Для создания этого приложения я разбил рабочий процесс на четыре этапа:
- Аутентификация источника данных
- Создание пользовательского интерфейса
- Создание CRUD-запросов
- Связывание запросов с пользовательским интерфейсом
? Функция Import App в ToolJet позволяет импортировать приложение в ваш аккаунт ToolJet, используя экспортированный исходный код. Вот экспортированный исходный код на случай, если вам понадобится импортировать приложение.
Аутентификация источника данных
Давайте начнем с создания нового приложения в ToolJet (https://github.com/ToolJet/ToolJet) и дадим этому приложению имя в левом верхнем углу.
Затем подключим Google Sheets к приложению в качестве источника данных, нажав «add or edit datasource» и выбрав Google Sheets из списка доступных источников данных. Нам необходимо пройти аутентификацию с правами «чтение и запись», чтобы наше приложение могло выполнять операции CRUD. После аутентификации закройте вкладку и выберите «сохранить источник данных».
Создание пользовательского интерфейса
Теперь, когда мы добавили источник данных, давайте приступим к созданию пользовательского интерфейса нашего приложения. Мы перетащим компоненты из правой боковой панели, то есть менеджер виджетов, на холст. Чтобы дать нашему приложению заголовок и описание, используйте виджеты Text.
Вы можете использовать HTML внутри виджетов для настройки текста.
Давайте используем два контейнерных виджета — один для показа всех приложений, а другой для создания раздела «Изменить приложения». Для отображения всех приложений мы будем использовать виджет Table, а для раздела Modify Applications нам понадобятся такие виджеты, как Text Input, Dropdown, Date Picker и Buttons.
? Посмотрите документацию, чтобы узнать больше о настройке виджетов и сделать пользовательский интерфейс более красивым. ?
После добавления виджетов окончательная версия пользовательского интерфейса приложения должна выглядеть примерно так:
Создание CRUD-запросов
Итак, теперь, когда мы создали пользовательский интерфейс приложения, давайте создадим запросы, которые будут выполнять операции создания, чтения, обновления и удаления таблицы.
Чтение данных из электронной таблицы
Итак, первое, что нам нужно сделать сейчас, это создать запрос, который будет заполнять таблицу существующими данными в Google Sheet. Для этого перейдите в редактор запросов внизу и нажмите на кнопку +, чтобы создать новый запрос. Выберите Google Sheets в раскрывающемся списке Datasource. В раскрывающемся списке Операции выберите «Считать данные из электронной таблицы». Введите идентификатор электронной таблицы, а затем нажмите на кнопку Preview, чтобы быстро проверить запрос.
? Вы найдете идентификатор электронной таблицы в URL-адресе листа Google.
Допустим, URL-адрес листа Google следующий:
https://docs.google.com/spreadsheets/d/1gIfeXMmgJAKrWmm_MtivOj68zZM_H9D8qR5mzVvzo6c/edit?usp=sharing
В этом URL 1gIfeXMmgJAKrWmm_MtivOj68zZZM_H9D8qR5mzVvzo6c — это идентификатор электронной таблицы.
Как видите, запрос успешно извлек данные из листа Google в форме JSON. Теперь перейдите на вкладку Advanced и установите флажок «Run this query on page load?», чтобы запрос автоматически выполнялся при каждой загрузке приложения. Вы можете переименовать запрос из центра и нажать на кнопку «Создать» в правом верхнем углу, чтобы сохранить запрос.
Добавление данных в электронную таблицу
Теперь для добавления новых строк в электронную таблицу мы создадим новый запрос точно так же, как мы создали его выше для чтения данных. Все, что нам нужно сделать, это установить операцию «Добавить данные в электронную таблицу». В поле Rows введите [{"id": "{{components.textinput4.value ?? ''}}", "company": "{{components.textinput1.value ?? ''}}", "position": "{{components.textinput2.value ?? ''}}", "date-applied": "{{components.datepicker1.value ?? ''}}", "status": "{{components.dropdown1.value ?? ''}}''}] — здесь мы используем JavaScript для получения динамических данных из таких виджетов, как текстовый ввод, дата-пикер и выпадающий список. Каждый раз, когда пользователь будет вводить новые данные в эти виджеты, запрос будет использовать эти данные для добавления новой строки в связанную электронную таблицу.
После ввода данных переименуйте запрос и нажмите кнопку Создать.
Обновление строки в электронной таблице
Создайте новый запрос, выберите Google Sheets в качестве источника данных из выпадающего списка. Введите следующие данные в соответствующие поля:
- Операция:
Обновить данные в электронной таблицедля обновления данных. - Идентификатор электронной таблицы: ID из URL-адреса электронной таблицы Google.
- Где, Оператор и Значение: Для Where мы будем использовать id, который является ключом столбца, для Operator мы будем использовать
===(используется для проверки равенства), а для Value мы будем использовать{{components.dropdown2.value}}т.е. значение из выпадающего списка, включая номера строк. - Тело:
{{({id: components.textinput4.value, company: components.textinput1.value, position: components.textinput2.value, url: components.textinput3.value, 'date-applied': components.datepicker1.value, status: components.dropdown1.value})}}
Удаление строки из электронной таблицы
Теперь, наконец, создадим последний запрос для удаления строки из таблицы. Просто выполните те же шаги, что и выше, чтобы создать новый запрос для источника данных Google Sheet и введите идентификатор электронной таблицы. Для удаления строки в таблице нам нужен только номер строки, который мы будем принимать как ввод от пользователя с помощью выпадающего виджета. Поэтому мы будем использовать JavaScript для получения значения из выпадающего виджета. Просто введите {{components.dropdown2.value}} в поле Delete row number.
Теперь мы успешно создали четыре запроса для выполнения операций CRUD.
? Вы можете добавить обработчик событий из вкладки Advanced, чтобы выполнять действие всякий раз, когда запрос успешен. Например, вы можете создать обработчик событий в каждом из запросов Append, Update и Delete для выполнения запроса Read - это будет перезагружать таблицу новыми данными каждый раз, когда пользователь добавляет, удаляет или обновляет данные.
Связывание запросов с пользовательским интерфейсом
Итак, теперь, когда мы создали пользовательский интерфейс и закончили создание CRUD-запросов, мы должны связать запросы с пользовательским интерфейсом, чтобы сделать наше приложение полностью функциональным. Для этого нам просто нужно внести изменения в свойства всех виджетов, которые мы добавили. Давайте сделаем это:
Настройка таблицы для отображения данных
- Щелкните в любом месте таблицы, чтобы открыть панель inspect на правой боковой панели.
- В свойстве Table data введите
{{queries.googlesheets1.data}}- это будет использовать данные, которые мы получаем из запросаgooglesheets1, и заполнит таблицу. - В нашем Google Sheet (mock data) есть шесть колонок, поэтому мы создадим 5 новых колонок для нашей таблицы: Id, Company, Position, Date Applied и Status. Для столбца URL мы можем добавить кнопку действия, чтобы открыть URL. Для каждого столбца нам нужно указать Column Name - имя столбца, которое будет отображаться в пользовательском интерфейсе, и Key - имя столбца из таблицы google.
- Создайте кнопку Action, добавьте текст кнопки и задайте ее положение. Создайте обработчик On Click для этой кнопки и установите в качестве действия Open webpage. В поле URL введите
{{components.table1.selectedRow.url}}, который получит URL из выбранной строки таблицы.
Теперь запустите первый запрос для выполнения операции чтения, и он заполнит таблицу данными. ✨
Настройка виджетов для добавления, обновления или удаления строки
При создании пользовательского интерфейса мы создали боковую панель для создания, обновления или удаления строк. Для этого раздела мы использовали такие виджеты, как text-input, date-picker, dropdown и кнопки. Поскольку в нашей таблице шесть столбцов, нам нужно шесть компонентов для получения пользовательского ввода. Мы использовали четыре текстовых ввода для ID строки, названия компании, должности и URL приложения соответственно. Для столбца "Дата применения" мы использовали виджет выбора даты, а для столбца "Статус" - виджет выпадающего списка. Мы использовали дополнительный выпадающий элемент для выбора номера строки, если хотим обновить или удалить конкретную строку.
Давайте настроим эти виджеты:
Текстовые входы: Для всех четырех текстовых входов (Row ID, Company Name, Position, URL) нам нужно просто нажать на них, чтобы открыть панель проверки и ввести заполнитель.
Date-picker(Date Applied): Вы можете оставить его с настройками по умолчанию.
Выпадающий элемент (Статус): Добавьте значения опций и метку опции - {{["wishlist", "applied", "interview", "offer", "rejected"]}}. Это значения, которые будут приниматься запросами update и append для обновления столбца Status в таблице.
Выпадающий (Для обновления или удаления строки): Введите значения опций и метку опции - ****{{queries.googlesheets1.data.map((datum) => datum["id"])}}. Это будет использовать JS-функцию map для заполнения выпадающих опций номерами строк, полученными запросом googlesheets1.
Кнопка1 (для добавления строки): Мы добавим обработчик On Click к этой кнопке, чтобы запрос googlesheetsAppend выполнялся каждый раз при нажатии на кнопку.
Кнопка2 (для обновления строки): Так же, как и для добавления строки, мы добавим обработчик On Click для этой кнопки и свяжем запрос googlesheetsUpdate.
Кнопка3 (для удаления строки): Наконец, мы добавим обработчик события к этой кнопке и свяжем ее с запросом googlesheetsDelete.
? Вы всегда можете настроить виджеты на вкладке Style в панели Inspect.
Отлично! Вы только что создали свое собственное приложение для отслеживания заявок на работу. Вы можете нажать на кнопку Deploy в правом верхнем углу, сохранить версию и развернуть ее.