Code breakers

Как сделать онлайн-магазин без программирования самостоятельно. Поэтапная инструкция

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

Мы уже рассказывали об универсальном принципе создания мобильного приложения – если ещё не читали, то советуем пробежать глазами.  А данная инструкция поможет разобраться в создании мобильного приложения именно для онлайн-магазина.

В Adalo сделать онлайн-магазин можно по готовому темплейту:  с базой данных, каталогом, корзиной, оплатой, главными экранами. Этот темплейт называется Rungne Clone – онлайн-магазин одежды и экипировки для приключений. Вы можете сразу скопировать его себе и редактировать под себя или повторить принцип.  ​​



Как создавать набросок приложения


Задача на этом этапе – выстроить структуру приложения. Это называется вайфрейминг.

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

Структура онлайн-магазина не сложная. Достаточное количество следующих типов экранов

  • главный экран
  • экраны для авторизации и создания аккаунта
  • каталог
  • подробная информация о товаре
  • корзина 

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



Например, так.

Пользователь заходит в приложение, где сразу видит главный экран с двумя кнопками: «Войти» и «Создать аккаунт» (2 экрана) и кликает одну из них. После регистрации откроется страница каталога с товарами (ещё 1 экран). Пользователь выбирает товар, изучает, рассматривает фотографии (ещё минимум 2 экрана, с подробной информацией и с фотографиями). Потом добавляет товар в корзину, где может менять количество, удалять товары, оформлять заказ (ещё 1 экран). 

Чтобы понять путь пользователя в онлайн-магазине, надо думать как клиент этого магазина и подводить под это функции и экраны. Из этого понимания выводятся роли, функции приложения и набор данных для формирования базы.

Функциональность, главные роли и структура базы данных


В онлайн-магазине может быть следующий набор функций:

  • регистрация и вход
  • просмотр каталога
  • просмотр подробной информации о товаре
  • просмотр фотографии товара
  • сборка и изменение корзины
  • просмотр истории заказов
  • оплата 

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

  • По большому счёту в онлайн-магазине одна главная роль – клиент. Всё приложение должно быть ориентировано на него.
  • Но нужно ещё кто-то, кто будет обрабатывать заказы, управлять работой приложения, добавлять и убирать продукты в каталоге. Так что выделяется ещё роль администратора. 
  • А ещё надо продумать функции для тех, кто придёт в магазин «просто посмотреть» и регистрироваться не будет – вероятно, такие тоже будут.

Теперь подумаем о базе данных. База будет складываться из ролей, объектов и событий онлайн-магазина. Эти части базы данных называются сущности. У каждой сущности будут данные – атрибуты. Всё это надо продумать заранее.

Сущности и их атрибуты в онлайн-магазине могут быть, например, следующие:

  • Сущность: Пользователь. Его Атрибуты: имя и фамилия, имя аккаунта, электронная почта, пароль, адрес, заказ 
  • Сущность Продукты (в нашем приложении это одежда и экипировка) – название, описание, цена, фото ( по желанию можно указывать ещё материал) 
  • Сущность Размерзначение размера (S, M, L и тд), продукт 
  • Сущность Заказпользователь, продукт, стоимость


Сущность «Размер» вынесена отдельно, потому что у какого-то продукта размера может не быть или у него может быть меньше значений, и разбить базу данных на разные таблицы будет удобнее и легче для системы. По желанию можно отдельно сформировать таблицу «Корзина» – для неоформленных заказов. Корзина даёт понимание, как пользователи выбирают товары. Это полезно для аналитики.

Заполняется база данных на платформе сборки приложения. База данных в ноукодинге выглядит как таблица со столбцами и строками, внешне похоже на Excele, так что разобраться в её устройстве легко. Сложнее и важнее понять взаимосвязи внутри базы данных.

Тип базы данных в ноукоде – реляционная база данных. Это значит, что в ней есть установленные связи между блоками данных. Например, есть связь между сущностями «Пользователь» и «Заказ» – ведь пользователь фигурирует в таблице с заказами как заказчик. А сущность «Размер» берёт данные из таблицы «Продукт» – и устанавливает связь через название продукта.          


Сборка приложения и выстраивание логики


Самая приятная часть. Теперь можно воплотить задумку и пустить в полёт фантазию веб-дизайнера. Если вайфрейм и план готовы, то дальше нужно только последовательно переносить на платформу набросок.

  • Первый шаг. Создать нужное количество экранов, назвать по существу (чтобы всё работало и чтобы не запутаться).
  • Второй шаг. Расположить на экранах элементы. К элементам относятся кнопки, текстовые блоки, каталог-список, фотографии, иконки и остальное. Поскольку ноукодинг – это визуальное программирование, элементы будущего приложения перетаскиваются с панели и размещаются в выбранном месте на рабочей области (у которой в Adalo форма и размеры экрана смартфона).
  • Третий шаг. Выстраивание логики приложения. 


Логика приложения настраивается для каждого элемента отдельно. Это происходит через команду Click Action. Там настраивается связь с базой данных, с другими экранами и дополнительные события, которые произойдут после того, как пользователь кликнет на элемент. 

Например, список-каталог на экране должен выводить данные из таблицы «Продукт» – список предметов на продажу. При клике на один предмет должно открыться окно с подробной информацией о товаре. Там при клике на фото открывается слайдер с фотографиями предмета в разных ракурсах. А по кнопке «Добавить в корзину» товар должен добавляться в корзину – приложение возьмёт информацию из базы данных и выведет её в корзине.     


Так выстраивается логика любого приложения. Чтобы не упустить нить и не забыть какой-то логический шаг, надо проверять то, что получается в режиме превью. И обязательно  протестировать приложение на реальных пользователях и собрать от них обратную связь и вносить правки в готовое приложение по отзывам реальных пользователей.

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

Зачем делать онлайн-магазин в мобильном приложении 


Пандемия коронавируса изменила покупательские привычки. 8 из 10 человек стали покупать через интернет, а увеличение доходов от электронной коммерции с начала ковидных времён составило 19%. В этой массовой миграции потребителей в онлайн перестраиваться пришлось и бизнесу – менять традиционные схемы торговли на цифровые.

Изменился и расклад дел в значении мобильных приложений. Количество скачиваний приложений только с 2017 года выросло на 45%. По прогнозам, к 2025 году количество пользователей мобильных телефонов вырастет до 7,49 миллиарда человек.

В общем, делать мобильные приложения – и учиться их делать – нужно. За это говорят сухие цифры статистики.     



Как делать