Мы уже рассказывали об универсальном принципе создания мобильного приложения – если ещё не читали, то советуем пробежать глазами. А данная инструкция поможет разобраться в создании мобильного приложения именно для онлайн-магазина.
В Adalo сделать онлайн-магазин можно по готовому темплейту: с базой данных, каталогом, корзиной, оплатой, главными экранами. Этот темплейт называется Rungne Clone – онлайн-магазин одежды и экипировки для приключений. Вы можете сразу скопировать его себе и редактировать под себя или повторить принцип.
Как создавать набросок приложения
Задача на этом этапе – выстроить структуру приложения. Это называется вайфрейминг.
Не устанем повторять, что сделать план и набросок – главный этап в спринте разработки. План нужен, чтобы чётко понимать цели, а набросок приложения позволит иметь перед собой прописанные шаги по достижению этих целей. Плюс это тренировка в составлении технического задания. Это залог будущего взаимопонимания с заказчиком.
Структура онлайн-магазина не сложная. Достаточное количество следующих типов экранов:
- главный экран
- экраны для авторизации и создания аккаунта
- каталог
- подробная информация о товаре
- корзина
На наброске структуры нужно отрисовать эти экраны и соединить между собой взаимосвязями – так будет понятен путь пользователя.
Например, так.
Пользователь заходит в приложение, где сразу видит главный экран с двумя кнопками: «Войти» и «Создать аккаунт» (2 экрана) и кликает одну из них. После регистрации откроется страница каталога с товарами (ещё 1 экран). Пользователь выбирает товар, изучает, рассматривает фотографии (ещё минимум 2 экрана, с подробной информацией и с фотографиями). Потом добавляет товар в корзину, где может менять количество, удалять товары, оформлять заказ (ещё 1 экран).
Чтобы понять путь пользователя в онлайн-магазине, надо думать как клиент этого магазина и подводить под это функции и экраны. Из этого понимания выводятся роли, функции приложения и набор данных для формирования базы.
Функциональность, главные роли и структура базы данных
В онлайн-магазине может быть следующий набор функций:
- регистрация и вход
- просмотр каталога
- просмотр подробной информации о товаре
- просмотр фотографии товара
- сборка и изменение корзины
- просмотр истории заказов
- оплата
Вокруг этих функций надо простраивать роли – то есть продумать, кто и в каких обстоятельствах будет пользоваться приложением и какие данные понадобятся для функционирования.
- По большому счёту в онлайн-магазине одна главная роль – клиент. Всё приложение должно быть ориентировано на него.
- Но нужно ещё кто-то, кто будет обрабатывать заказы, управлять работой приложения, добавлять и убирать продукты в каталоге. Так что выделяется ещё роль администратора.
- А ещё надо продумать функции для тех, кто придёт в магазин «просто посмотреть» и регистрироваться не будет – вероятно, такие тоже будут.
Теперь подумаем о базе данных. База будет складываться из ролей, объектов и событий онлайн-магазина. Эти части базы данных называются сущности. У каждой сущности будут данные – атрибуты. Всё это надо продумать заранее.
Сущности и их атрибуты в онлайн-магазине могут быть, например, следующие:
- Сущность: Пользователь. Его Атрибуты: имя и фамилия, имя аккаунта, электронная почта, пароль, адрес, заказ
- Сущность Продукты (в нашем приложении это одежда и экипировка) – название, описание, цена, фото ( по желанию можно указывать ещё материал)
- Сущность Размер – значение размера (S, M, L и тд), продукт
- Сущность Заказ – пользователь, продукт, стоимость
Сущность «Размер» вынесена отдельно, потому что у какого-то продукта размера может не быть или у него может быть меньше значений, и разбить базу данных на разные таблицы будет удобнее и легче для системы. По желанию можно отдельно сформировать таблицу «Корзина» – для неоформленных заказов. Корзина даёт понимание, как пользователи выбирают товары. Это полезно для аналитики.
Заполняется база данных на платформе сборки приложения. База данных в ноукодинге выглядит как таблица со столбцами и строками, внешне похоже на Excele, так что разобраться в её устройстве легко. Сложнее и важнее понять взаимосвязи внутри базы данных.
Тип базы данных в ноукоде – реляционная база данных. Это значит, что в ней есть установленные связи между блоками данных. Например, есть связь между сущностями «Пользователь» и «Заказ» – ведь пользователь фигурирует в таблице с заказами как заказчик. А сущность «Размер» берёт данные из таблицы «Продукт» – и устанавливает связь через название продукта.
Сборка приложения и выстраивание логики
Самая приятная часть. Теперь можно воплотить задумку и пустить в полёт фантазию веб-дизайнера. Если вайфрейм и план готовы, то дальше нужно только последовательно переносить на платформу набросок.
- Первый шаг. Создать нужное количество экранов, назвать по существу (чтобы всё работало и чтобы не запутаться).
- Второй шаг. Расположить на экранах элементы. К элементам относятся кнопки, текстовые блоки, каталог-список, фотографии, иконки и остальное. Поскольку ноукодинг – это визуальное программирование, элементы будущего приложения перетаскиваются с панели и размещаются в выбранном месте на рабочей области (у которой в Adalo форма и размеры экрана смартфона).
- Третий шаг. Выстраивание логики приложения.
Логика приложения настраивается для каждого элемента отдельно. Это происходит через команду Click Action. Там настраивается связь с базой данных, с другими экранами и дополнительные события, которые произойдут после того, как пользователь кликнет на элемент.
Например, список-каталог на экране должен выводить данные из таблицы «Продукт» – список предметов на продажу. При клике на один предмет должно открыться окно с подробной информацией о товаре. Там при клике на фото открывается слайдер с фотографиями предмета в разных ракурсах. А по кнопке «Добавить в корзину» товар должен добавляться в корзину – приложение возьмёт информацию из базы данных и выведет её в корзине.
Так выстраивается логика любого приложения. Чтобы не упустить нить и не забыть какой-то логический шаг, надо проверять то, что получается в режиме превью. И обязательно протестировать приложение на реальных пользователях и собрать от них обратную связь и вносить правки в готовое приложение по отзывам реальных пользователей.
На курсе мобильной разработки без кода учим делать мобильные приложения под онлайн-магазины, делать сложные базы данных и мощный интерфейс, а главное – прикручивать к приложениям платёжные системы.
Зачем делать онлайн-магазин в мобильном приложении
Пандемия коронавируса изменила покупательские привычки. 8 из 10 человек стали покупать через интернет, а увеличение доходов от электронной коммерции с начала ковидных времён составило 19%. В этой массовой миграции потребителей в онлайн перестраиваться пришлось и бизнесу – менять традиционные схемы торговли на цифровые.
Изменился и расклад дел в значении мобильных приложений. Количество скачиваний приложений только с 2017 года выросло на 45%. По прогнозам, к 2025 году количество пользователей мобильных телефонов вырастет до 7,49 миллиарда человек.
В общем, делать мобильные приложения – и учиться их делать – нужно. За это говорят сухие цифры статистики.
