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

Выбор блюд клиентом и помещение блюда в корзину заказов

Мы хотим дать пользователю возможность выбрать понравившиеся блюда и поместить его в корзину. Сразу надо сказать, что, прежде всего для этого надо идентифицировать каждого пользователя, чтобы корзина заказов у каждого была своя.
Рис.2
Рис.1 Glide даёт возможность идентифицировать пользователя по его почтовому адресу.
Конечно, идентификацию пользователя можно провести через вкладку “Users”, нажав на её иконку внизу приложения (Рис.1), (App_Users_AK) и в открывшейся вкладке нажать значок “+” вверху вкладки, после чего заполнить поля “Name”, “Email” и при желании ещё и “Photo” (Рис.2). (App_Add_User) Но теперь все пользователи могут видеть эту информацию, и даже сделать заказ от вашего имени.

Поэтому мы поступим по-другому, Во первых, мы уберём вкладку “Users” с экрана приложения нажав на значок видимости (глазик), далее войдём в “Settings”, (иконка шестерёнки сверху) и выберем раздел Privacy.
Рис.3 Здесь поменяем настройки на “Только выбранные вами пользователи могут войти в систему” и “Любой может создать профиль” (рис.3). (Privacy3) В этом случае теперь перед установкой приложения у пользователя будет запрошен его Email, и после ввода отправлен код на почтовый адрес для завершения установки и регистрации (но здесь всё очень просто и дополнительные пояснения не требуются, и только первый раз). После чего при каждом последующем входе в приложение вы будете идентифицированы по своему адресу Email. И теперь при заказе каждый ваш заказ будет связан с вашим Email. Что даёт много дополнительных возможностей.

Давайте для начала откроем таблицу “Users” и создадим ещё одну колонку типа “Row ID” (Сначала откройте меню “Type” и в нём выберите “Other”, во вновь открывшемся меню и находится “Row ID”). И сразу же переименуем его в “User ID”. В итоге получиться столбец с 22-значной алфавитно-цифровой строкой. Это поможет нам в конечном итоге связать столбцы одной таблицы со столбцами другой. Такой же столбец создадим и в таблице “Лист1”, и назовём его “Меню ID”.

Теперь создадим новую таблицу и назовём её “Корзина”. Сюда мы будем помещать все данные о выбранных блюдах, их стоимости, о заказчике, о времени заказа и др. данные.
Для начала также создадим в таблице столбец с идентификаторами строк, и назовём его “Basket ID”.
Столбец ‘Name’мы сразу удалим, он нам не понадобиться. Данные о пользователе мы будем брать из таблицы ‘User’.
Далее, во-первых, я хочу, чтобы при выборе блюда было зафиксировано время помещения в корзину. Поэтому создадим новый столбец типа “Date & Time”, назовём его “Время заполнения”. В параметрах Part, Date format и Time format я выберу соответственно ‘Date & Time’, ‘Medium’ и ‘Without seconds’, но вы можете попробовать другие на ваше усмотрение.

Дальше, я хочу, чтобы при выборе блюда у нас указывались: наименование блюда, его стоимость и фото, можно указывать и другие характеристики блюда, имеющиеся в таблице 'Лист1', но мне этого хватит. Но все эти данные у нас есть в таблице “Лист1” и я хочу, чтобы пользователь их не вводил вручную, а я буду их брать из таблицы автоматически при выборе блюда пользователем. Поэтому чтобы привязаться к таблице с блюдами, я создам ещё один столбец типа 'Text' и назову его “Меню ID” (как в таблице ‘Лист 1’). Теперь создадим новый столбец типа Relation и назову его “Rel_menu_ID“, где свяжем столбец “Меню ID” нашей таблицы ‘Корзина’ со столбцом “Меню ID” таблицы ‘Лист 1’ (Лис1 > Меню ID), и не забудем поставить птичку в окошке ‘Match Multiple’. И не забываем закончить действие нажатием ‘Done’. Но столбец не передаёт нам сами данные, для этого служат столбцы типа ‘Lookup’. Создадим новый столбец типа ‘Lookup’ и назовём его ‘Look_menu_name’, где в качестве ‘Relation column’ зададим “Rel_menu_id” и в выпадающем меню выберем пункт “Название” (Rel_menu_id > Название). Таким же образом создадим ещё две аналогичных колонки ‘Look_menu_price’, где возьмём из таблицы ‘Лист1’ цену (Rel_menu_id > цена) и ‘Look_menu_photo’, где возьмём фото блюда (Rel_menu_id > Картинка). Можно взять и другие характеристики, но мне кажется, что они будут здесь лишними, а вы можете попробовать взять по вашему желанию.

Рис.4 Но нам надо знать какой пользователь сделал выбор, чтобы отличить, где, чья корзина. Но у нас все эти данные уже есть, и они находятся в таблице ‘Users’. Давайте возьмём их оттуда. Для начала создадим в таблице ‘Корзина’ новый столбец типа ‘Text’ и назовём его “User ID”. Далее по аналогии с тем как мы это делали с таблицей ‘Лист1’, мы создадим новый столбец типа ‘Relation’ и назовём его “Rel_user_id”, где свяжем столбец “User ID” нашей таблицы ‘Корзина’ со столбцом “User ID” таблицы ‘Users’ (Лис1 > User ID), и не забудем поставить птичку в окне ‘Match Multiple’(Рис. 4). (Rel_user_id) И жмём ‘Done’.

Рис.5 Теперь уже мы можем получить данные о пользователе, для этого создадим новый столбец типа ‘Lookup’ и назовём его ‘Look_user_name’, где в качестве ‘Relation column’ зададим “Rel_user_id” и в выпадающем меню выберем пункт “Name” (Rel_user_id > Name). (Рис.5) (Look_user_name) Ещё нам надо взять Email пользователя, и может быть фотографию (кто захочет, или там будет пустая клетка, это не так важно). Поэтому, создадим ещё два столбцы типа ‘Lookup’, и назовём их “Look_user_email”“ и “look_user_photo”, куда поместим соответственно Email пользователя и его фото (Rel_user_id > Email) и ‘Look_use_id > Photo).

Хотя это не все данные для заполнения корзины, но давайте посмотрим, что у нас получилось.
Перейдём на вкладку “Layout”,выберем сначала, например, ‘Закуски’, а затем одно из блюд и здесь надо добавить кнопку для выбора блюда, т.е. положить в корзину.
Рис.6 Для этого нажмём на иконку ‘Добавить компонент’ (черная иконка с белым крестиком в окне NAVIGATION) и в появившемся окне найдёт компонент “Form Button”(Рис.6)(Form_button). Выберем мышью этот компонент слева в окне NAVIGATION, и в окне Свойств, в блоке DESIGN поменяем в строке Label “Open Form” на “Выбрать”.

Теперь давайте подумаем, какие действия мы хотим, чтобы происходили при нажатии этой кнопки. Прежде всего, чтобы блюдо, т.е. его наименование, цена и фото было помещено в таблицу “Корзина”, а также, чтобы в корзине были данные о пользователе, его имя и главное Email. И, во-вторых, чтобы пользователь получил уведомление, что это действие произошло. Для этого, ниже в блоке ACTION нажмём на строку “Show form screen title Форма” (У вас эта строка может слегка отличаться), и в появившемся окне “CONFIGURE ACTION” кликнем мышью по “Show form screen”, и во вновь открывшемся меню выберем “Create new action…” (чёрный кружочек с белым крестиком). В итоге, у нас откроется вкладке показанная на Рис.7. (New_Action)
Рис.7

Нажмём на маленький карандашик слева вверху и в появившемся окошке напишем “Выбор блюда”. Это наименование нашего действия.

Рис.8 Далее кликнем мышью по “Show form screen title Форма” и затем “Show form screen”, и в появившемся окне выберем “Add row”. Появится список Sheet - Лист1 (у вас может быть что-то другое, ведь Glide проставляет здесь всё по умолчанию, что ему захочется)
Рис.9 и ниже список с наименованием всех столбцов от таблицы “Лист1”, но нам надо добавить новую строку не к таблице “Лист1”, а к таблице “Корзина”, поэтому мы кликнем по “Лист1” и поменяем на “Корзина”. Время заполнения – выберем “Current Date/Time”, а ‘Меню ID’ -> “Меню ID” и ‘User ID’ -> “User Profile > User ID” (Рис.8).
(Add_row) Если навести мышь на действие “Add row to Козина” (Не нажимая), то внизу появляется маленький чёрный кружочек с беленьким крестиком (это – добавить ещё одно действие), нажимаем и выберем новое действие “Show notification” (Показать уведомление). Нажимаем на него и в строке ‘Message’ пишем “Блюдо выбрано”, а в строке ‘Icon’ оставляем “Success”(Рис.9).
(Show_notification) И после всего не забудьте нажать на “Save” (справа вверху), а то изменения не сохраняться.

Рис.10
Рис.11 Ну что ж давайте теперь проверим, что у нас получилось. Для начала добавим двух пользователей к таблице “Users”, у меня это Илья и Наталья. Теперь давайте выберем несколько блюд. Сначала выберем блюда от имени ‘Илья’, а затем ‘Наталья’. Примечание. Переключение между пользователями осуществляется по нажатию стрелки вниз расположенной в строке “Viewing as Наталья (или Илья)” сверху слева центрального экрана (Рис.10) (view_as_user). А реально это тот, кто открывает приложение на Смартфоне.
При выборе у нас приходит сообщение, что блюдо выбрано (рис.11) (bludo_vybrano). Теперь давайте посмотрим нашу таблицу “Корзина” (Рис.12) (Корзина), мы видим здесь наименование выбранных блюд и их стоимость, а также имя заказчика (пользователя, ведь пользователь это тот, кто открывает приложение) и его Email, то есть, то, что нам и нужно.
Рис.12

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