GN01. Знакомство с Glide. База данных

1. Знакомство с экспертом

Эксперт интенсива: Игорь Пешков — UX/UI-дизайнер интерфейсов. Основной вид его деятельности — проектирование цифровых интерфейсов мобильных, десктопных приложений. Игорь уже более двух лет занимается зерокодингом, и Glide — его любимый инструмент. Давай узнаем почему.

2. Почему Glide

Преимущества Glide:

Адаптивность. Собрав приложение один раз, мы можем быть уверены, что оно будет одинаково функционально и в мобильных, и в десктопных версиях.
Кроссплатформенность. Приложение будет одинаково хорошо работать и выглядеть как на Android, так и на iOS, Windows, Linux, macOS и прочих.
Современный и приятный дизайн интерфейса. Разработчики позаботились о внешнем виде, чтобы пользователи могли сосредоточиться на логике приложения и работе с данными.
Библиотека готовых интеграций с сервисами Google, Microsoft, почтовых рассылок, генерацией PDF-документов. Можешь подробнее изучить их самостоятельно.
Все это доступно в бесплатной версии. Здесь достаточно возможностей для создания работающего приложения для небольшой аудитории.

Можно расширить возможности приложения при помощи кода, если ты в этом разбираешься. Однако это необязательно.

3. Приложение, которое ты создашь на интенсиве

Мы соберём полезное приложение — Трекер расходов, помогающий отследить личные траты.

В нашем приложении будет две вкладки:

Расходы, на котором будут отображаться все расходы, сгруппированные по дате, а также фильтр по категориям и строка поиска:

По кнопке + можно будет добавлять новый расход:

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

Запись можно изменить (например, если вы выбрали не ту категорию) или удалить:

Анализ. Здесь содержится визуальное представление о тратах и общая сумма расходов за все время пользования приложением и отдельно по каждой категории:

В качестве бонуса мы настроим интеграцию с нейросетью.

4. Регистрируемся в Glide и создаём первый проект

Наше telegram-сообщество по Glide, в котором ты можешь получить ответы на вопросы по этому инструменту.

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

В верхней части страницы нажимаем кнопку Sign Up. В открывшемся окне выбираем наиболее удобный вариант регистрации, например, с помощью Google-аккаунта.

После регистрации попадаем на главный экран — дашборд.

Если в верхней части страницы ты видишь чёрное поле с предложение улучшить свою бета-версию, нажми Try now — Confirm, так как это расширит твои возможности. Если этого баннера нет, то скорее всего Glide уже опубликовал все новые функции.

Итак, рассмотрим основное рабочее пространство. Здесь есть вкладка проектов — приложений, и Glide уже создал обучающий проект. С ним ты можешь поработать самостоятельно.

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

Получить ответы на вопросы по Glide, ты также можешь в нашем telegram-сообществе по этому инструменту.

А это раздел шаблонов, которые можно использовать, видоизменяя под свои нужды:

Создаём новую команду

Левая боковая панель содержит список команд и функций, которые к ней относятся. В первую очередь нас интересует кнопка + New team. Нажав на неё, мы создаём новую команду.

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

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

Создаём новый проект

Нажимаем кнопку кнопку New project.
В появившемся окне в строке названия можно написать что угодно, например, Трекер расходов (поменять это можно в любой момент).
Выбираем Mobile, так как создаём мобильное приложение (однако выбор мобильной или десктопной версии ни на что не влияет, так как приложение будет адаптировано сразу под все платформы).
Нажимаем Continue.
В следующем окне нужно выбрать источник данных. Пока мы будем пользоваться базовым вариантом — Glide Tables.
Нажимаем Create Project.

5. Задаём первичные настройки приложения

Открыв созданный проект, в верхней панели управления мы видим три вкладки: данные, интерфейс и действия. В правом верхнем углу нажимаем кнопку Settings.

Каждый новый проект стоит начать с первичной настройки приложения.

Name & Icon. В этом разделе можно выбрать название и иконку (ее можно найти в коллекции или загрузить свою), а также добавить описание.
Appearance. Здесь можно выбрать основной цвет приложения, нам не нужно выбирать цвет отдельного для каждого элемента, Glide сам сделает все в одной цветовой гамме. Также мы можем выбрать, где будет располагаться навигация и в каком стиле будет наше приложение.
Integrations. Это интеграции с другими сервисами. Какие-то из них доступны в бесплатной версии, какие-то — в специальных тарифах.
Privacy. Здесь можно заранее определить, будет ли приложение публичным (и любой человек сможет им пользоваться) или приватным (тогда им смогут пользоваться только те люди, у которых будет доступ). Мы будем делать публичное приложение. Но не переживай, даже имея доступ к этому Трекеру Расходов, люди не смогут увидеть твои траты.
SIGN-IN. В этом разделе можно выбрать, будет регистрация обязательной или нет. В нашем приложении она обязательна, так как все траты должны быть привязаны к конкретному пользователю.
Users & authentication. Здесь выбираем, как именно можно будет зарегистрироваться.
Sign-In Screen. Здесь можно изменить текст приветствия и добавить описание.
User Agreements доступны только в платном тарифе.
Data. В этом разделе мы можем загрузить данные в приложение или привязать Google-таблицу.
Billing. Эта вкладка содержит список платных тарифов, который при необходимости ты сможешь оформить в будущем.

6. Проектируем базу данных

Внимание! В этом видео эксперт создаёт объектную модель. Тебе этого делать не нужно, она служит только для иллюстрации структуры данных. Если хочешь получше изучить модель, смотри скрин в текстовом описании под видео.

Готовим к работе базу данных

Переходим во вкладку Data. Здесь происходит вся работа с данными.

Данные — это основа приложений. Так или иначе любое приложение работает с данными.

Базу данных легче всего представить в виде таблицы, что и сделал Glide.

2. В левой части мы видим таблицы, которые привязаны к нашему приложению. Их может быть любое количество, главное — определить, какого типа данные должно обрабатывать наше приложение. Удаляем демонстрационные таблицы Things и Categories нажатием правой кнопки мыши и выбором команды Delete.

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

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

Вот модель наших данных:

По последним строкам мы видим, что Расходы и Категории связаны.

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

Теперь, имея подобную схему, мы можем вернуться в Glide и создать соответствующую таблицу.

7. Создаём таблицу Категории в базе данных Glide

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

Сайты с эмодзи, которые можно копировать и использовать в качестве иконок:
https://www.emojicopy.com
https://getemoji.com
https://emojipedia.org

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

Создаём таблицы в базе данных

Заходим в редактор данных.
Нажимаем + рядом с TABLES. Выбираем New table:

3. Называем новую таблицу Расходы.

4. Аналогично создаём таблицу Категории.

Glide по умолчанию в каждой новой таблице создает одну колонку и одну строку.

Создаём столбцы в таблицу Категории

В таблице Категории дважды кликаем на ячейку с названием столбца Name, чтобы переименовать. Переименовываем в Название.
В поле настроек Type по умолчанию выбран тип данных в колонке — Text. Это нас устраивает.
В правой части таблицы нажимаем +, чтобы создать новый столбец. Glide сразу предлагает его переименовать, называем Иконка, а в поле Type выбираем Other — Emoji.

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

Вносим данные в таблицу Категории

Категории мы добавим заранее, чтобы потом было удобно выбирать.

Нажимаем кнопку + New row, чтобы добавить новую строку в таблицу. Либо используем клавишу Enter.
Вписываем названия актуальных категорий расходов (например, Покупки, Еда, Развлечения, Подарки, Связь и интернет).
Переходим в колонку Иконка и вызываем меню с эмодзи (на macOS это ctrl+cmd+пробел, на Windows — win+ю). Подбираем эмодзи, подходящие к написанным слева категориям. Можно использовать сайты для подбора эмодзи.

8. Создаём таблицу Расходы в базе данных Glide, добавляем поле Row ID в таблицу Категории

Значок рубля — ₽

Создаём столбцы в таблице Расходы

Первый столбец переименовываем в Сумма, в поле Type выбираем числовой формат — Number.
В дополнительном меню настроек поля видим такие опции:

Precision — точность, количество знаков после запятой (оставляем два для копеек);
галочка Use group separator — разделение числа на разряды (оставляем ей активной, для удобство восприятия больших сумм);
Units — единицы измерения (здесь можно указать р. или значок рубля — ₽)
галочка Display units after number — показывать единицу измерения после числа (оставляем активной).

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

3. Создаём ещё одну колонку, называем её Дата и время. Выбираем тип данных — Date & Time. В дополнительном меню видим такие настройки:

Parts — части части даты и времени для отображения (можно выбрать дату и время, только дату, только время), выбираем Date & Time.
Date Format — формат даты (короткий, средний, длинный), оставляем средний — Medium.
Time format — формат времени (с секундами и бе секунд), выбираем без секунд — Without seconds.
Галочка Respect time zone — установка часовых поясов, можно поставить, можно снять — на твоё усмотрение (так как у нас приложение для персонального использования).

Заполняем таблицу Расходы тестовыми данными

Вносим тестовые данные, чтобы было удобнее настраивать базу данных и интерфейс, так как совсем без показателей работать сложно (на экране ничего отображаться не будет, и мы не сможем видеть изменений, которые происходят). Заполни базу самостоятельно произвольными данными (придумай по 2-3 операции на каждый день с разным временем). Дату и время можно прописывать в таком формате: 22.12.22 13:45.

Например:

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

Теперь поговорим про цветные поля в нашей модели — связи между таблицами:

Пока для Glide Расходы и Категории — это две несвязные между собой таблицы. Он не понимает, что расходы принадлежат каким-то категориям, а в категории входят разные расходы. И нам нужно ему это показать.

Связывать таблицы между собой можно по какому-то общему признаку. И в той, и в другой таблице должна быть колонка, данные в которой совпадают с точностью до буквы/символа. Более того, эти данные должны быть уникальными.

✅ ID — уникальный идентификатор, специальное ключевое поле, которое мы будем использовать, чтобы связать таблицы между собой.

Добавляем ключевое поле в таблицу с категориями

В таблице Категории создаём новую колонку. В поле Name ничего не пишем, но в поле Type выбираем Other — Row ID (то есть id строки).
Сохраняем изменения, и через какое-то время колонка появляется.

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

9. Связываем таблицы Расходы и Категории

Внимание!При настройке столбца Связь с категориями галочку Match Multiple ставить НЕ нужно! Она отвечает за множественную связь, а так как у расхода может быть только одна категория, она не нужна. Вот какие настройки у тебя должны получиться:

Внимание! Если у тебя не получается скопировать и вставить Row ID, попробуй такие варианты решения:

Сменить браузер либо почистить кэш браузера.
Включить связь сайта с буфером обмена, возможно, она отключена (нажми сочтеание клавиш win + v, чтобы вызвать меню буфера обмена и включить его).
Если браузер Google Chrome, поставь галочку, когда выделяешь ID (если просто выделить мышкой, может не сработать).

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

В таблице Расходы создаём новую колонку, называем её ID категории. В типе данных оставляем текстовый формат!

Связываем таблицу Расходы и Категории

Как ты помнишь, чтобы связать две таблицы, нам нужно, чтобы в каждой из них были колонки с идентичными значениями. Поэтому в колонку ID категории нам нужно внести ID категорий. Row ID нельзя выделить и отредактировать (это сделано, чтобы защитить их от случайного редактирования), однако мы можем его скопировать. Для каждого расхода в таблице Расходы произвольно добавляем идентификатор какой-то категории (постарайся, чтобы в каждую из использованных категорий попало по несколько расходов). Теперь в обеих таблицах есть общий признак — одинаковые данные, и мы можем связать две таблицы.
В таблице Расходы создаем новую колонку. Называем её Связь с категориями.
В поле Type выбираем Relation.

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

4. В первом пункте появившихся настроек нужно выбрать колонку из текущей таблицы, поэтому выберем ID категории.

5. Во втором пункте нужно выбрать колонку из любой другой таблицы, в которой мы хотим искать совпадения. Здесь Glide сразу предлагает выбрать одну из таблиц, которые есть в базе. Выбираем Категории и Row ID. Сохраняем изменения, нажав Done.

6. Теперь внутри ячеек колонки Связь с категориями появились обводки — это ссылки на соответствующие строки в таблице Категории.

Теперь связь между двумя таблицами настроена!

Домашнее задание со звёздочкой

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

Важно помнить, что если у каждого расхода может быть только одна категория, то у каждой категории может быть много расходов или не быть их вообще. В качестве задания со звёздочкой тебе нужно связать таблицу Категории с таблицей Расходы так, чтобы в строке каждой категории отобразились все расходы, ей принадлежащие. Для этого тебе нужно самостоятельно поисследовать тип колонки Relation.

Если у тебя не получится выполнить домашнее задание со звёздочкой, ничего страшного — в начале следующего урока наш эксперт подробно разберёт, как это сделать.

Словарь

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

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

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

Дополнительные материалы

Glide

Сайты с эмодзи:

Значок рубля: ₽