Пример мобильного приложения на Glide для кафе (Часть 2).

Оформление меню с разделением на категории

Как говорилось в первой статье, если блюд много, например, несколько десятков, то поиск и выбор будет затруднительным, чтобы облегчить выбор клиентам, мы, во-первых, разделим блюда по категориям. Во-вторых, введём отдельное меню рекомендованных блюд. Это могут быть рубрики под названием: популярные блюда или готовые блюда или блюда от шеф-повара или блюда со скидкой. И так приступим.

Выберем вкладку “Data Editor” (Таблицы) и создадим новую таблицу. Для этого нажмём на крестик справа от “TABLES” и кликнем по “New empty table”. Glide создал нам таблицу из двух строк и одного столбца с названием Name. Сразу поменяем название таблицы, дав ей название Категории. Теперь мы добавим ещё четыре строки, кликнув по “New row”. И кликнув по каждой строке, соответственно зададим наименования: Закуски, Первые блюда, Вторые блюда, Десерты и Напитки.

Рис.1 Теперь выберем таблицу Лист1 и кликнем по крестику в верхней строке справа. В открывшемся окне поменяем предложенное имя “New Column” на Категория, оставив тип Text без изменения (img WinCategoria)(Рис.1). И нажмём и “Done”. .
Теперь нам надо задать связи между таблицами, чтобы сгруппировать наши блюда по категориям. Для этого вернёмся обратно к таблице Категории и создадим новый столбец с типом Relation, для этого в строке “ Relate to items where the value in:” оставим Name, а в строке “ Matches the value in:” выберем нажав на птичку вниз, выберем Лист1, а нажав на Лист1, выберем значение Категория.
Рис.2 Также поставим птичку “Match multiple” для всех совпадений. И дадим название столбцу “Rel_cat”, нажмём Done (img WinRel_cat) (Рис.2).
Далее создадим ещё один столбец типа Image, и назовём его Фото.

Теперь вернёмся во вкладку Layout (Смартфон) и в меню Параметры поменяем стиль с List на Details (*см. примечание внизу), т.к. в режиме стиль List Glide не позволяет вводить новые компоненты. Теперь, как и в первой статье в режиме просмотра блюд, мы видим только одно блюдо с его характеристиками: Фото, Наименование, Вес, Цена и описание. Но здесь нам это не нужно и мы удаляем все компоненты, поэтому в окне “НАВИГАЦИЯ” наводим курсор мыши на соответствующий элемент и кликнем по появившемуся справа крестику. Сейчас экран приложения не содержит компонентов (блюд). Далее нажимаем на чёрную иконку с белым крестиком и в появившемся “окне компонентов”, находим компонент “Inline List” (это список) и выбираем его. Затем переходим в окно параметров.
Рис.3 Здесь в качестве источника задаём нашу новую таблицу Категории, в окне Label пишем название нашего приложения MyCafe, а в качестве иконки выбираем, что нам больше нравиться, я выбираю чашку кофе. В итоге получаем вид приложения, представленный на рис. 3. (App_MyCafe_cat). Конечно, пока скромненько, но все блюда разделены по категориям, и мы можем не смотреть всё подряд, а например, просматривать только “Вторые блюда”.

Рис.5
Рис.4 Жмём на строку “Вторые блюда”, и появляется новое окно, пока здесь только Title (“Вторые блюда”). Опять жмём на иконку с крестиком, и снова выбираем компонент “Inline List”. Т.к. сейчас у нас на экране две надписи “Вторые блюда”, то компонент Title можно удалить. В качестве источник списка выбираем Rel_cat (У меня Glide выбрал его по умолчанию, но это бывает не всегда), а в Title выбираем Custom, но не чего не пишем. Стиль меняем на Cards (он здесь больше подходит), а в качестве содержания задаём: Image- Фото, Title - Название, Details – Описание. В качестве ACTION оставляем “Show Detail Screen for this item”. Но здесь как кому нравиться можно понажимать другие иконки и режимы, у меня, же получилась картинка, представленная на рис.4. (App_Cards_cat). Здесь надо бы добавить больше блюд будет смотреться веселее

Жмём на карточку и получаем новое окно с полным описанием блюда его весом и ценой.(Рис.5). (App_Details_cat) Как вам приложение? На мой взгляд стало немного интересней и проще для поиска клиентом блюд. Но это ещё не всё, главное что мы сюда можем добавлять новые компоненты.

Создание меню “Блюда от Шеф-повара”

Рис.6 Теперь, чтобы немного украсить наше приложение, и сделать небольшую рекомендацию нашим потенциальным клиентам, давайте создадим дополнительное меню “Блюда от Шеф-повара”. Для этого снова откроем вкладку Таблицы и добавим в таблицу Лист1 новый столбец типа Text и назовём его От_шефа, и в каждой строчке проставим против блюд от Шеф-повара Yes, против остальных блюд проставим No (не люблю оставлять пустые клеточки, так меньше глюков).
Перейдём к таблице Категории и создадим новый столбец типа Text и назовём его Chief. Здесь нас интересуют только две строки, в первой поставим Yes, а во второй No. Чтобы остальные строки не пустовали, поставим, например, 1, 2, 3. Создадим ещё один столбец типа Relation, где будут значения в столбце Chief соответствовать значениям в таблице Лист1 в колонке От_шефа, и назовём его Rel_chief. И не забудем поставить птичку в клетке Match multiple для совпадений с несколькими.

Вернёмся к вкладке Layout. Откроем меню COMPONENTS и добавим ещё один компонент “Inline List”. По умолчанию Glide в качестве источника выбрал Rel_cat, но нам надо Rel_chief, а в Title укажем “Блюда от Шеф-повара”. Дальше, чтобы оживить наше приложение поменяем стиль с List на Cards (Рис.6). (Img App_Rel_chief) Ещё мне не хочется, чтобы в этом меню было много информации и поэтому я оставлю в свойствах CONTENT в графе Image – Фото, в графе Header – Название, а графы Title и Details -сделаю пустыми.

Рис.7 Также в свойствах дизайна (Design) установлю Size в Half-Size (половинный размер), а Orientation на Horizontal, а остальные свойства оставлю без изменения (Рис.7) (Img DESIGN)
Ещё обратите внимание на две опции в самом низу, это Limit number of items (Ограничить количество элементов) и Show “See all” for more than (Показать «Просмотреть все» больше, чем). Я не стал снимать птичку с ‘Show “See all” for more than’ чтобы сохранить надпись “Увидеть всё” вверху компонента, т.к. у меня всего 4-е блюда от Шеф-повара, а ограничение у нас на три блюда. Примечание, в реальном меню желательно это число увеличить.

Оформление дизайна приложения

Рис.8 И ещё мне хочется поменять дизайн и цвет нашего приложения и сделать его более ярким. Для этого выберем вкладку Settings и раздел Appearance, и я здесь выберу коричневатый цвет (больше подходящий для кофе, а вы можете выбрать что пожелаете) и Тему – Bold (light). Вот что у нас получилось. (Рис.8) (App_MyCafe_chief)

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

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

Если вы не планируете бронирование заказов и блюд, то на этом можно считать приложение законченным. Можно вывесить QR-код данного приложения на входе вашего кафе и снабдить его небольшой инструкцией, и все посетители, не прибегая к меню кафе, могут сами ознакомиться с перечнем, имеющихся блюд используя смартфоны, их описанием и ценой. И при повторном посещении, могут делать всё это, ещё перед посещением кафе, сидя дома на диване.
А мы продолжим и сделаем так, чтобы каждый пользователь сделал свой выбор независимо от других.

* Примечание. С марта 2023 Glide изменил интерфейс конструктора и компонент Details был исключён, да и в нём сейчас нет необходимости, т.к. теперь вводить новые компоненты можно в стилях List, Card и других. Как использовать новый интерфейс можно посмотреть здесь.