GN03. Формы добавления и редактирования, кнопки, формулы и графики, публикация приложения

Что мы умеем:

✅ Спроектировали базу данных, создали её в Glide, научились связывать таблицы в базе данных с помощью полей Row ID и Relation

✅ Собрали первый экран приложения: узнали, как создавать экран приложения, добавлять на него компоненты, поняли, зачем нужна фильтрация и как её настраивать, научились группировать данные и настраивать actions

Результат дня

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

⌛ Время прохождения урока: ~ 1,5-2,5 часа

Теория на сегодня

1. Собираем форму добавления расходов

На экране расходов нажмем +, чтобы вызвать форму добавления расходов.
На панели справа во вкладке Options даём название форме — Добавить расход.
Переходим на вкладку General. В поле Sheet привязываем форму к таблице Расходы.
На панели слева удалим все автоматически созданные компоненты, нажав иконку крестика, чтобы настраивать форму с нуля.
Через кнопку + добавляем новый компонент для ввода суммы расходов — Number Entry. С помощью панели справа настраиваем это компонент:

в поле Column (куда будем записывать значение) выбираем Сумма;
поле Default value оставляем пустым, так как в значении по умолчанию в нашем случае нет необходимости;
в поле Min Value (минимальное значение) вводим 1;
в поле Label (название поля, которое пользователь видит на экране) оставляем Сумма;
в поле Placeholder (это серый текст-подсказка, который пользователь видит на экране и понимает, в каком формате ему нужно ввести данные) пишем, например, 254,70 ₽;
активируем галочку Required, чтобы обозначить поле, как обязательное для заполнения (если оно будет не заполнено, пользователь не сможет отправить форму).

Через + на панели слева добавляем компонент для выбора категории — Choice. Настраиваем его:

в поле Write to (куда будет записано значение) выбираем ID категории;
поле Default value оставляем пустым;
в поле Source (ресурс для выбора) выбираем Категории;
в поле Values выбираем Row ID (так как нам нужно записать именно идентификатор категории);
в поле Images устанавливаем Иконка;
в поле Display as (что отображать пользователю на экране) — Название;
в поле Label выбираем Категория;
в поле Style выбираем подходящий внешний вид;
активируем галочку Required;
галочку Allow Selecting multiple НЕ активируем, так как у расходы может быть только одна категория.

Добавляем на форму компонент для выбора даты и времени — Date Time. Заполняем его:

в поле Default value мы выбрали Now (сейчас) — теперь значение в него подставляется автоматически, при необходимости пользователь сможет его отредактировать;
с помощью настройки Range мы можем разрешать пользователю выбирать все даты, даты с сегодняшней и раньше или даты с сегодняшней и позже, мы выбираем вариант сегодня или раньше — Today or earlier.

8. Настраиваем отправку формы. Нажимаем в любом пустом месте, чтобы снять выделение компонента, чтобы на панели справа открылись настройки всей формы. Во вкладке General в разделе ON SUBMIT выбираем Show notification — показывать уведомление, в поле Message пишем сообщение, которое увидит пользователь — Записано! В поле Icon можем выбрать одну из двух опций — успех или ошибка, выбираем первый вариант — Success.

2. Настраиваем экран одного расхода

Пока при переходе к отдельному расходу мы видим:

Мы уже знаем, что для изменений нужно привязать экран к источнику данных, однако справа мы не находим возможности выбора источника данных. Это связано с тем, что это детальный экран. То есть Glide уже понимает, к какой таблице и к какой её строке привязан экран. Нам остаётся лишь отобразить данные.

Настраиваем заголовок экрана и выводим на него сумму расхода

В поле Title выбираем Дата и время.
Слева, в разделе Components, удаляем все компоненты, кроме Breadcrumbs (этот раздел помогает в десктопной версии и совершенно не мешает в мобильной).
Итак, покажем крупно и красиво сумму. Для этого добавим компонент Text. Выберем следующие настройки:

Отображаем категорию и её иконку

Как в нашем примере:

Если мы откроем мини-таблицу внизу, то увидим, что есть и иконка, и название категории, но они находятся в разных столбцах. Нам понадобится сделать новую колонку, которая их объединит.

Переходим в редактор данных и через + создаем новую колонку типа Template в таблице Расходы. Называем её Категория + Иконка.

✅ Template (шаблон) — тип столбца, который позволяет объединить данные из нескольких колонок в одной.

2. Настраиваем его:

3. Возвращаемся на вкладку Layout и дублируем компонент текст через кнопку дублирования:

4. На панели справа настраиваем компонент:

Теперь наш экран выглядит так:

3. Выводим на экран расхода сумму всех трат категории

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

Добавляем колонку с суммой всех расходов в таблицу Категории

Переходим в редактор данных и открываем таблицу Категории.
Создаём новую колонку типа Rollup и называем её Всего в категории.

✅ Rollup — тип колонки, который позволяет сделать подсчёты всевозможной статистики (например, для числовых значений мы можем рассчитать сумму, минимальное значение, максимальное значения и т.д.).

3. Настраиваем столбец:

Важно! В поле Units ставим знак рубля только после пробела.

Таким образом, мы показали колонку, в которой находятся нужные нам данные (в нашем случае это колонка Сумма через связь с расходами, если бы мы выбрали таблицу расходов напрямую, везде получилось бы одинаковое значение — сумма всех расходов вместе взятых), и отобразили действие, которое нужно сделать с этими числами — Sum (суммировать).

Выводим сумму всех расходов по категории в таблицу Расходы

В таблице Расходы создаём новую колонку типа Lookup, называем её Всего в категории, и указываем столбце в связанной таблице, из которого хотим получать данные: Связь с категориями — Всего в категории.

В таблицу Расходы добавляем столбец с фразой

Теперь нам нужно сделать так, чтобы перед суммой появлялась надпись “Всего в этой категории потрачено:”. Это, как мы уже знаем, делается при помощи колонки Template. Дублируем её и меняем у дубликата название и настройки:

Выводим данные о тратах в категории на экран

Переходим на вкладку Layout, дублируем компонент Text и перенастраиваем дубликат:

Теперь у нас есть три компонента, которые составляют единый смысловой блок — некую шапку данных. Для удобства работы мы можем создать компонент Container, переместить его наверх и перетянуть в него все три текстовых компонента:

4. Собираем и настраиваем кнопки Удалить и Изменить на экране расхода

Должно получиться вот так:

Создаём кнопки

Добавляем компонент Button Block, настраиваем его отображение на панели справа:

2. В разделе Action выбираем сначала первую кнопку, меняем ей название и иконку:

3. Затем задаём название и иконку для второй кнопки:

Настраиваем действие для кнопки Изменить

Нам нужно, чтобы при клике на кнопку появлялась форма редактирования расхода. Поэтому в настройках кнопки в качестве совершаемого действия выбираем Show edit screen (показывать экран редактирования), в поле Data — This item (так как будем редактировать строку конкретного расхода), в поле Target — Slide In.

Настраиваем форму редактирования расхода

Теперь при нажатии на кнопку появляется такое меню:

Пока что это слабо похоже на то, что нам нужно. Важно уточнить, что и изменение, и добавление нового расхода — это очень близкие друг к другу функции. И чтобы дважды не выполнять одну и ту же работу, выбираем экран Расходы на панели слева в разделе Navigation, нажимаем на кнопку +, чтобы вызвать форму добавления расхода, на панели слева в разделе компонентов кликаем правой кнопкой мыши по любому из компонентов и выбираем пункт Copy all.
Возвращаемся на детальный экран расхода и нажимаем кнопку Изменить, чтобы вызвать форму редактирования. На панели слева удаляем компоненты, нажимаем правую кнопку мыши и выбираем Paste (вставить).
Меняем название формы, для этого на панели справа Справа в поле Title пишем Изменить.
Переключаемся на вкладку General и выбираем в секции On submit — Show notification. В поле Message пишем Изменено!

Настраиваем экран с подтверждением удаления

Удаление записи — достаточно распространенная функция в Glide, поэтому и ее настройка не слишком сложная. На правой панели настроек в разделе Action для этой кнопки в поле выбора действия нужно выбрать Delete row this item (удалить эту сроку). Однако это не совсем то, что нам нужно, ведь пользователю будет непонятно, действительно ли этот расход удалился.

Поэтому нам нужно добавить промежуточный экран, где пользователю будет задаваться уточняющий вопрос об удалении записи. Переходим в настройки кнопки Удалить и в поле выбора действия выбираем Show new screen (показать новый чистый экран), в поле Date оставляет This item, в поле Target выбираем Slide in.
На панели слева удаляем все автоматически созданные элементы этого экрана.
На панели настроек справа в поле Title пишем: Удалить запись?
Добавляем на экран компонент Button Block и настраиваем его:

Настраиваем кнопку Отменить (важно, чтобы она была акцентной)

Настраиваем кнопку Да, удалить

В поле для выбора действия устанавливаем Delete row.
Немного усложним экшен кнопки удаления. Если ранее у нас были только одношаговые действия, то тут мы можем попробовать сделать что-то интереснее.
В строке, где стоит экшен Delete row, выбираем Create new action (создать новое действие). Мы оказываемся в редакторе действия. К действию удаления строки добавляем ещё один шаг — показывать уведомление о том, что расход удалён:

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

5. Добавляем на экран расхода список расходов в категории

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

Выводим на экран все расходы

Добавляем на экране компонент Table из раздела Collections и настраиваем его:

2. На вкладке Options отключаем галочку Show search bar (строка поиска).

3. На вкладке Actions отключаем все экшены, нажимаем кнопку Enable Advanced actions и также удаляем всё в секции Item click (теперь на список нельзя нажать, его можно только пролистать).

Оставляем на экране только те расходы, которые принадлежат конкретной категории

Теперь мы видим на экране расходы из всех категорий, что нам не подходит.

Чтобы это изменить, перейдем во вкладку Options, нажимаем Add Filter, чтобы добавить фильтр, и настраиваем его:

Добавляем разделитель

Далее добавляем на экран компонент Separator, чтобы отделим два блока информации друг от друга. Разместим его под блоком кнопок:

Сортируем расходы категории от новых к старым

В разделе Sort Data сделаем необходимые настройки:

Удаляем конкретный расход из списка расходов категории

Теперь мы видим, что расход, в который мы заходим, дублируется в прошлых записях, из-за чего может возникнуть путаница с количеством расходов. Чтобы исправить это, нужно, чтобы каждый расход был уникальным для Glide.

Переходим в редактор данных, открываем таблицу Расходы и создаём новую колонку Row ID.
Возвращаемся в редактор экранов и для экрана расхода устанавливаем ещё один фильтр по кнопке Add Filter через оператор And:

Таким образом, в списке расходов на экране конкретного расхода мы показываем расходы: 1. которые принадлежат конкретной категории (фильтр, который мы настроили ранее) и 2. ROW ID которых не равно Row ID конкретного расхода.

6. Создаём экран Анализ и выводим на него график

Наш трекер расходов почти готов. Остался еще один экран — с графиком расходов по категориям.

Создаём новый экран

Нажимаем + на панели справа в разделе NAVIGATION, выбираем Custom screen, после этого у нас появляется новый, пока что пустой экран.
Настроим его в меню справа: переименуем в Анализ и изменим иконку на более подходящую.
Поскольку экранов стало больше одного, в нижней части превью приложения на экране стали отображаться иконки-вкладки. Для экрана Анализ мы ее уже сменили, теперь сделаем это для экрана Расходы. Меняем иконку на изображение карандаша.
Вернёмся к экрану Анализ. Поскольку мы хотим видеть траты по категориям, логично, что в качестве источника нужно указать таблицу Категории.
Glide автоматически создает коллекцию в меню слева, но она нам не нужна, поэтому удалим её через значок крестика.

Добавляем на экран график

Через + добавим новый компонент — Radial chart (круговая диаграмма). После этого на экране появляется график:

2. Настраиваем график на панели справа:

в поле Labels выбираем Название;
в поле Values (значение) выберем Всего в категории;
настройку Line weight (толщина линий графика) можешь выставить по вкусу;
в поле Page size снова изменим значение до 9999.

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

7. Выводим на экран Анализ строку с общим количеством трат и дней

Нам нужно посчитать сумму трат за общее количество дней.

Считаем общую сумму трат

Переходим во вкладку Data, открываем таблицу Категории.
Создаем в неё новую колонку типа Rollup через + , называем её Всего и настраиваем:

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

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

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

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

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

2. Теперь попробуем выделить сегодняшний день. Добавляем новую колонку типа Math через +, называем её Сегодня и настраиваем:

✅ Math — поле, которое позволяет производить вычисления любой сложности.

3. Далее нам нужно получить количество дней между двумя колонками. Разницу между датами можно посчитать двумя способами:

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

Будем использовать второй вариант. Создаём новую колонку, называем её Всего дней и в поле Type находим нужный плагин: Other — Date & Time — Date Difference.

✅ Date Difference — плагин, который позволяет вычислить разницу между датами.

4. Настраиваем эту колонку:

Start Date — Первый день;
End Date — Сегодня (или строка Current time);
Unit — days;
Precision — 1;
Units — дн.

Считаем сумму трат за общее количество дней

Теперь у нас есть общее количество и трат, и дней. Нам нужно это объединить в одну строку, используя уже знакомую колонку Template (мы использовали ее, чтобы объединить название категории и иконку).

В таблице Категории создаем новую колонку типа Template, называем её Заголовок графика и настраиваем:

Выводим заголовок графика с суммой трат на экран

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

В итоге получаем:

Замечаем, что внизу есть категория трат Связь и интернет со значением 0 рублей. Не всегда корректно показывать пользователю нулевые значения. Это, конечно, не касается случаев, где цифра обусловлена контекстом: например, в приложении погоды нам важно видеть количество градусов, даже если это 0.

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

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

8. Обеспечиваем безопасность конфиденциальных данных

Убираем из графика категории с нулевым значением: настраиваем фильтрацию

Выделяем график на панели слева в разделе Components.
На панели справа переключаемся на вкладку Options и нажимаем Add Filter:
Настраиваем фильтр:

То есть теперь значение Всего в категории мы показываем лишь в том случае, если оно не равно 0.

Настраиваем безопасность пользовательских данных

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

Переходим в редактор данных.
Выбираем таблицу Users.
Здесь есть колонки Имя, Email, Фото, Роль (их можно закреплять за пользователями в платных тарифах). Главное здесь — Email. Рядом с названием этого столбца есть иконка синего человечка, это значит, что для него включена опция Row owner.

✅ Row owner — функция Владелец строки. Это означает, что пользователь владеет этой строкой и всеми данными внутри нее. Соответственно, другие пользователи с другими email не могут посмотреть эти данные. Именно эта настройка является основной безопасности данных в Glide.

4. Допустим, тебе понравилось твоё приложение и ты решил дать его кому-то из близких попользоваться. Этот человек зарегистрируется, откроет приложение и увидит не пустой экран, а все твои расходы. Как мы можем решить эту проблему?

Нам нужно добавить в таблицу расходов новую колонку — email, чтобы у каждого записанного расхода был пользователь, к которому он относится. Открываем таблицу Расходы. Добавим новую колонку через + New column, называем её как угодно, например, Владелец. В качестве типа данных выбираем Email. Нажимаем Done и перетягиваем колонку ближе к началу.

5. Нам нужно заполнить вновь созданную колонку. Пока она пустая — никто не владеет данными. Как только мы активируем функцию Row owner, все поломается: данные останутся в приложении, но не будут никому доступны. Переходим в таблицу пользователей и копируем email.

6. Возвращаемся в таблицу расходов и вставим скопированное в каждую строку колонки Владелец.

7. Нажимаем на стрелочку, которая появляется при наведении курсора мыши на название колонки и в выпадающем меню выбираем Make row owner. Таким образом мы включаем эту функцию. Через несколько секунд в ячейке с заголовком столбца появляется иконка синего человечка. Это означает, что строки зарезервированы за пользователем с этим email, и только этот человек сможет их увидеть.

Как мы можем это проверить? В таблицу User добавляем нового пользователя с произвольным (можно не существующим) email. Затем идём в редактор интерфейса и с помощью функции Viewing as смотрим приложения глазами разных пользователей.

Настраиваем автоматическую запись email пользователя при добавлении расхода

Открываем форму добавления нового расхода, нажав на экране Расходы +.
На панели слева добавляем новый компонент — Values from user profile — Email.

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

9. Публикуем приложение и устанавливаем его

Наше приложение готово! Теперь поговорим о том, как его опубликовать, скачать на телефон и пользоваться 🙂

Публикуем приложение

За публикацию приложения в Glide отвечает кнопка Publish в верхнем правом углу:

Но перед тем как её нажать, кликнем по соседней кнопке — Settings — и ещё раз все проверим. Нравится ли нам иконка, название, внешний вид, настройки приватности (должно быть публичное приложение с обязательной регистрацией)?

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

После проверки нажимаем кнопку Publish. В открывшемся меню Glide предлагает ввести на свой выбор адрес приложения. Далее нажимаем Publish.

Теперь приложение опубликовано. Можем отсканировать QR-код или скопировать ссылку.

Для пользования приложением нужен стандартный браузер — Safari на iOS и Chrome на Android.

Устанавливаем приложение на экран Домой в iOS

Открываем браузер Safari, вставляем ссылку и смотрим, как это все выглядит:

2. Это веб-версия, нам бы хотелось иметь приложение на экране мобильного. Нажимаем на кнопку Поделиться.

3. Пролистываем вниз и выбираем На экран “Домой”.

Устанавливаем приложение на экран Android

Открываем ссылку в Google Chrome.
Нажимаем три точки в правом верхнем углу и выбираем Установить приложение.