Пример мобильного приложения на Glide для кафе.

Разработка приложений без кода.

Мобильное приложение для кафе и небольшого ресторана своими руками без опыта программирование от нескольких дней до нескольких часов по так называемой технологии No-code. No-code — это технологии разработки сайтов, мобильных приложений без написания кода по принципу конструктора. Работа с этими инструментами не требует знания языков программирования и навыков по разработке приложений. Даётся пошаговая инструкция для сборки мобильного приложения для кафе. Приведены скриншоты основных действий. Приложение работает как на смартфонах с OS Android, так и iOS. И мы будем делать его используя один из популярнейших конструкторов, это конструктор Glide.

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

И так, что нам нужно? Мы будем разрабатывать мобильное приложение для кафе. И в первую очередь нам нужны данные с перечнем блюд, с фотографиями, описанием, стоимостью и другими характеристиками. Обычно во всех кафе это уже всё есть, но нам нужны эти данные в виде электронных таблиц. В настоящее время это обычно тоже есть. Если у вас есть эти данные в виде электронных таблиц, то их легко преобразовать или скопировать в одну из таблиц используемых конструктором. Glide позволяет строить мобильные приложения на основе таблиц: Glide Tables, Exсel, Google Sheets, Airtable. Вы можете попробовать все, а я выбираю таблицу Google Sheets. И для этого в первую очередь нам нужна регистрация и Аккаунт на Google. Заходим и регистрируемся. У меня это есть и этот шаг пропускаем.

Для входа в Аккаунт у Гугла я использую Google Chrome. Открываем и справа вверху находим рядом со значком Аккаунта девять точечек. Жмём, и в появившемся выпадающем меню находим значок «Таблицы», нажимаем (можно просто в адресной строке набрать: https://docs.google.com/) и попадаем в гугл таблицы. Теперь нам нужно создать саму таблицу, куда мы будем заносить все данные о наших блюдах. Из всех вариантов таблиц нас сейчас интересует пустой файл, обозначенный цветным крестиком. Жмём, и открывается таблица, очень сильно напоминающая таблицу в Excel. Слева вверху надпись «Новая таблица» меняем на ту, что мы хотим, например, Café (раз мы хотим делать приложение для кафе). Все блюда и фото взяты с моих домашних блюд (я думаю, что для примера подойдёт), а вес и цены случайные, чтобы клеточки заполнить.
Заполняем таблицу в соответствии c нашим пожеланием, основными требованиями являются: 1) наличие не менее двух строк, где верхняя строка - заглавие столбцов (где какой столбец специально указывать не надо, Glide всё поймёт сам), и 2) отсутствие пустых строк и столбцов в таблице (наличие отдельных пустых ячеек допускается).



Совет, выбрав значок «Цвет заливки», полезно установить «Чередование цветов». А для того, чтобы длинный текст не убегал за пределы ячеек, выбрать «Переносить по словам».

Всё! Все подготовительные действия завершены и мы теперь идём в Glide, для чего набираем: https://www.glideapps.com/. Появляется главная страница с надписью «Welcome to Glide» и предложением зарегистрироваться, нажав «Войти через Google». Регистрируемся, отвечая на несложные вопросы, и попадаем в главное окно конструктора Glide.

Здесь Glide предлагает нам несколько шаблонов (Suggested templates) и иконку «Новый проект». Выбираем её, пока шаблоны нас не интересуют. Даём название проекту «MyCafe» и выбираем тип проекта «Приложение Glide» (Glide App) и жмём продолжить. Далее выбираем источник данных для приложения (Select a source). Это будет таблица «Google Sheets», и опять жмём продолжить.
Рис.1 Здесь нам предлагают выбрать, какая таблица будет источником для нашего приложения. Пока у нас она одна и это: “Café”, её и выбираем и жмём “Select”. И немного магии, и мы получаем первое приложение (Рис.1).
Вверху мы видим три иконки, в виде таблички (редактор данных), смартфона (макет) и шестерёнки (установки). Это соответственно иконки просмотр и редактирование данных (аналог той таблицы, что мы создавали в Google Sheets и других), просмотр отображения на смартфоне и настройки приложения. Для просмотра таблицы жмём на значок “Таблички”.



Слева вверху мы видим под заглавием “TABLES”, две надписи: “Лист 1” и “USERS”. Это наименование таблиц, которые создал Glide, при создании приложения. Кликнем мышью двойным кликом и после переключения в режим редактирования поменяем надпись на “Café” (Glide присваивает одно и тоже имя во всех приложениях). Кликнем по “USERS”, это таблица пользователей. Пока здесь только один пользователь, и это вы, ваше имя, email и фото (Рис.3).

Нажмём на иконку смартфона и вернёмся к просмотру приложения. Немножко посмотрим, что здесь есть. Слева находится окно “НАВИГАЦИЯ” (Рис.2), а справа окно “Параметры (Рис.3)”

Рис.2. Лист1 это наименование этой страницы (пока это Лист1), Users это вкладка пользователи (Переключение между вкладками осуществляется нажатием на соответствующую иконку внизу смартфона). Если навести указатель мыши на соответствующую строку (не нажимая), то у неё справа появляется иконка “Глазик“, нажатие по которую переводит вкладку в режим “Не видимости” (перечёркнутый глазик).
Рис.3. Далее ниже профиль пользователя (“User Profile”) и в самом низу перечень компонентов на странице, сейчас у нас их два: компонент “Поиск” (Лупа) и компонент “List”, это стиль нашего списка блюд (об этом речь будет далее).
Справа находится окно настроек, имеющее две вкладки “Общие” и “Опции”. Source – это ссылка на источник, в данном случае это ссылка на таблицу “Café”, Label – это наименование (метка) данной страницы. Кликнем мышью по нему и поменяем на “MyCafe“ (Главная страница нашего приложения). Стрелка в кружочке - это значок иконки страницы (та, что отображается внизу), кликнем по нему и выберем, что нам нравиться из предлагаемого, я выбрал иконку "Лист". Ниже представлены стили отображения листа, Glide по умолчанию выбрал стиль “Список” (надо сказать не самый лучший в данном случае, но самый полный). Ниже кнопка “Edit List”, кликнем по ней и отобразятся настройки компонентов списка, что предложил Glide. Нажав на стрелку вниз можно изменить любую настройку из списка столбцов нашей таблицы “Café”, но мне пока всё нравиться и я оставляю как есть. Важное замечание: настраивая один компонент, на всех других компонентах будет также аналогичная настройка. Ниже находятся настройки “Действия (ACTION)”, сейчас они: “Показать подробный экран для этого элемента”, и меня это устраивает.

Рис.4.
Рис.5. Переходим к центральному окну (Смартфон). Что получилось (Рис.4) Нажав на выбранное блюдо (стрелка справа говорит, что здесь есть переход, это как раз то действие, о котором говорилось выше), мы можем видеть все его характеристики. Например, «Селёдка под шубой» (Рис.5). Что здесь есть? Во-первых (смотрим окно “НАВИГАЦИЯ”), здесь есть компонент "Title" (Название) и три компонента "Action Text" (Вес, Цена, Описание). Их Glide по умолчанию взял из нашей таблицы "Google Sheets". Более интересен компонент Title, выберем его, кликнув по нему мышью. В окне “Параметры” теперь можно видеть, что входит в состав этого компонента, это параметры: Title, Details, Image. Это соответственно: название, состав и фото. Справа от которых находится стрелка вниз, кликнув по которой можно видеть выпадающее меню с пунктами: Custom (задаваемый пользователем), User profile (пункты из таблицы пользователей) и пунктов из таблицы Glide. Вы можете поменять, как вам нравиться, но мне кажется, что здесь Glide поработал не плохо и мне здесь всё нравится, и я оставляю как есть. Здесь также можно поменять внешний вид (Appearance), нам предлагают квадрат, квадрат со скруглёнными углами и круг, а также можно поменять размер (Size). И здесь также можно всё поменять по вашему желанию. Но я также оставляю всё как есть. Единственно, чтобы никто посторонний не смог изменить наше описание блюд, отключим возможность редактирования (маленький карандашик сверху справа). Для этого мы войдём во вкладку “Edit Form” и снимем птичку у “Allow users to edit”. Карандашик пропал.