Glide пример проекта для кафе на обновлённом интерфейсе.

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

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

Что такое новый Интерфейс. Пользователи конструктора Glide могли заметить, что при создании нового приложения появилась новая заставка рис.1.
Рис.1. Такая заставка появляется только у пользователей, зарегистрированных до 20 марта 2023 года, и позволяет создавать как приложения старого типа, теперь называемых классическими, так и приложения с обновлённым интерфейсом, называемых Glide Apps (ранее называемом Glide Pages) и ставшим официально поддерживаемым и рекомендованным продуктом. Для пользователей зарегистрированных после марта доступна только новая версия. Такое изменение объясняется желанием объединить два продукта: это приложения для больших экранов и мобильные приложения. И создать единое адаптивное приложение, работающее на экранах с любым размером и на любых платформах. При этом новое приложение получило много новых замечательных функций, поддерживаемых только в обновленном варианте.

Что же изменилось? В приложениях в отличие от ‘классических’ приложений: увеличены размеры используемых таблиц Big Tables, добавлены новые Actions, позволяющих автоматизировать выполнение задачи и Integrations, обеспечивающих подключение к новым инструментам. Новейшие и самые мощные функции Glide доступны исключительно в приложениях. В последнее время Glide предлагает новые фукции с искусственным интеллектом Glide AI на основе ваших данных: такие как преобразование аудио в текст, генерация нового текста, извлечение текста из изображений и другие. Правда Glide AI доступен только для планов Pro и выше.

Создание мобильного приложения для кафе на новом интерфейсе конструктора Glide.

Т.к. у нас уже есть (см. здесь ).
Рис.2 таблица Google Sheets с перечнем блюд, то мы сразу приступаем к созданию приложения, выбрав последовательно: “Create a new app” с именем MyCafeNew, “Mobile”, “Google Sheets” и “Continue”. Выбираем нашу таблицу ‘List 1’ и нажимаем ‘Select’. Наше приложение представлено на рис.2

Для чистоты эксперимента попробуем сохранить внешний вид (только для отличия от предыдущего я поменяю цвет приложения, на что-то более кофейное). Перейду в ‘Settings’ -> ‘Appearance’ и выберу тёмно-коричневый цвет (Как выбрать произвольный цвет см. здесь ). Также поменяю стиль на ‘Accent’.

Рис.4
Рис.3




По умолчанию Glide нам создал проект, выбрав по умолчанию компонент Collection со стилем ‘Card’. Но для того чтобы добиться аналогии с предыдущим проектом (ведь мы строим тот же проект, но на новом интерфейсе), я поменяю его на ‘List’. И ещё проведем некоторые корректировки. А именно: зададим название Label – ‘Моё кафе’, выберем иконку ‘Чашечка кофе’ (для этого в строке поиска введём “Café”), из пунктов данных исключим состав (оставив только Title – ‘Название’ и Image – ‘Картинка’). (рис.3).И ещё, хотя такой интерфейс и выглядит привлекательным, но мы ещё поменяем стиль на List (рис.4)

И теперь самое главное. В качестве источника нам нужна не таблица ‘List1’а таблица ‘Категории’. Чтобы не повторяться, я её создаю за кадром, а вы, если не смотрели предыдущий проект, то можете посмотреть здесь . Проверяем, в блоке ITEMS DATA должны быть только ‘Name’ и ‘Фото’. Во вкладке Options я убираю птичку ‘Show search bar’ – чтобы отключить поиск, в во вкладке Actions – убираем птички с ‘Allow users to add items’и ‘Allow users to edit items’ – добавления и редактирования пунктов (пользователь это делать не должен). И так мы получили половинку того экрана, что представлен в предыдущем проекте (рис.5).

Рис.5
Рис.6
Рис.7

Жмём на стрелку справа и делаем следующие установки: проверяем чтобы оставляем в Sourse было – ‘Rt_cat’, Title выбираем – ‘Name’, STYLE выбираем ‘Card’ (Здесь неплохо смотрится и ‘Grid’). В ITEMS DATA в Title, Description и Image выбираем соответственно – ‘Название’, ‘Состав’ и ‘Картинка’. Далее в Size выбираем ‘XL’ или ‘L’ (Здесь нет разницы). И в Aspect Ratio выбираю самый маленький прямоугольник (мне хотелось бы и уже). Примечание. Здесь не плохо смотрится Size = ‘M’, но я сохраняю дань традиции от предыдущего проекта). У меня получился экран, представленный на рис. 6.

Выбираем одно из блюд и жмём на него, и в открывшемся макете (экране) у меня здесь Glide сформировал два компонента: Title и Fields. У Title устанавливаем STYLE – ‘Image’, а в DATA устанавливаем соответственно: Title в – ‘Название’, Subtitle – ‘Состав’, Image в – ‘Картинка’. Остальные параметры оставляем по умолчанию. У Fields (это новый компонент, и хотя его можно заменить на другие компоненты, но мы попробуем использовать его здесь) поле Title оставляем пустым, а блоке OPTIONS соответственно выбираем: ‘Описание’, ‘Цена’ и ‘Вес’ (Выбираем в правой колонке нужный элемент и проверяем, чтобы Glide в левой колонке подставил нам нужное наименование или меняем его сами на нужное). У нас получилась картинка представленная на рис.7.В общем примерно всё что было в предыдущем проекте

Добавление нового меню “Блюда от Шеф-повара”

Рис.8
Рис.9
Рис.10

Как и в предыдущем проекте попробуем разнообразить наше приложение и добавить перечень блюд от Шеф-повара (или например, ‘Популярные блюда’). Примечание, раньше добавление новых компонентов на первую страницу у Glide было возможно только в режиме STYLE Details (о чём я получаю много запросов). Сейчас такого стиля нет, да он и не нужен, т.к. теперь добавлять новые компоненты можно и в других режимах. Например, здесь у нас уже на первой вкладке COMPONENTS уже присутствует знак “Плюс” (белый крестик на чёрном фоне). Жмём его и добавляем новый компонент Card в блоке Collection (кстати, это тоже новый блок). Теперь устанавливаем в качестве источника (Source) Rt_Chief, а в Title вводим “Блюда от Шеф-повара”. По умолчанию Glide нам создал макет рис. 9. Теперь делаем настройки: в блоке STYLE выбираем ‘Grid’ (мне так больше нравиться, хотя подходит и ‘Card’), в блоке ITEMS DATA в Meta выбираем ‘Название’, а в Image – ‘картинка’. Далее в блоке DESIGN в Size выбираем - ‘M’, Aspect Ratio выбираем самый маленький прямоугольник, и в Orientation выбираем – ‘Horizontal’. Всё остальное оставляем по умолчанию. Теперь переходим на вкладку Options и снимаем “Птичку” с кнопки “Show search bar”, переходим на вкладку Actions и убираем нажатие у кнопок ‘Allow users to add items’и ‘Allow users to edit items’, как это мы делали у компонента Collection -> Категории. У нас получился макет, представленный на рис. 9.

Выбираем одно из блюд и нажимаем на него, открывается макет рис.10. Всё нормально.

Рис.11
Рис.12

И как и в предыдущем проекте меняем компоненты местами. Для этого выбираем в блоке COMPONENTS мышкой компонент ‘Collection -> Rt_Chief’ и перетаскиваем его, не отпуская кнопки мыши, выше компонента ‘Collection -> Категории’. И… (bug?). У нас пропало название приложения и появилось в названии: “Блюда от Шеф-повара”. Это заголовок первого компонента нашего макета (рис.11). На самом деле здесь отображаются заголовки двух компонентов, только заголовок первого (верхнего) выносится как бы в заголовок всего приложения. Мне это не нравиться, почему Glide сделал так мне не понятно. В предыдущем интерфейсе всё было нормально (см. предыдущий проект). Стоит однако отметить, что при прокрутке вниз появляется наименование заданное в пункте Label блока PAGE всей страницы (Оно же находится внизу под иконкой), поэтому я изменяю Label на – ‘Моё кафе’(рис.12). Примечание, чтобы иметь возможность прокрутки экрана вниз, я слегка увеличил размеры картинок.

Публикация приложения на Glide.

Теперь мы можем публиковать наше приложение. Как опубликлвать приложение смотри (см. здесь ).

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