Инструкция по выпуску приложения на платформе RuStore Инструкция по запуску проекта на эмуляторе Android Инструкция по компиляции проекта на Windows Описание функциональных характеристик программного обеспечения Инструкция по эксплуатации мобильного приложения Техническая архитектура ПО

Инструкция по выпуску приложения на платформе RuStore

1. Добавление приложения и его публикация

1. Регистрация: Зарегистрируйтесь как разработчик на платформе RuStore.

2. Подготовка приложения: Соберите APK/AAB файл для Android, убедитесь, что он подписан с помощью ключа подписи.

3. Добавление в RuStore:

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

4. Публикация: После проверки модераторами RuStore приложение будет доступно для скачивания.

2. Установка приложения на телефон

1. Приложение можно найти в RuStore через приложение или веб-версию.

2. Находит ваше приложение через поиск или по прямой ссылке.

3. Нажимает на кнопку "Установить".

4. После установки пользователь может открыть приложение и начать его использование.

Инструкция по запуску проекта на эмуляторе Android

1. Установка Android Studio

Скачивание Android Studio:

Перейдите на официальный сайт Android Studio .
Нажмите кнопку "Download Android Studio".
Примите лицензионное соглашение и начните загрузку установочного файла.

Установка Android Studio:

Запустите скачанный файл и следуйте инструкциям мастера установки.
При установке оставьте все галочки по умолчанию (Android Studio, Android SDK, Virtual Device).
После завершения установки запустите Android Studio.

Первичная настройка Android Studio:

При первом запуске выберите опцию "Do not import settings" (если это первая установка).
Далее Android Studio предложит установить необходимые компоненты SDK. Убедитесь, что выбраны все компоненты, и нажмите "Next".
После завершения установки нажмите "Finish".

2. Настройка эмулятора Android

Создание виртуального устройства (эмулятора):

В Android Studio откройте "AVD Manager" (Android Virtual Device Manager). Для этого можно нажать на иконку телефона в правом верхнем углу или выбрать путь: Tools -> Device Manager.
Нажмите "Create Virtual Device".

Выберите устройство, на котором хотите тестировать и нажмите "Next".

Выберите образ системы (например, Android 12.0 x86) и нажмите "Next".

Установите необходимые параметры (разрешение экрана, количество памяти и т.д.) и нажмите "Finish".

Запуск эмулятора:

В "AVD Manager" нажмите на кнопку "Play" рядом с созданным эмулятором, чтобы запустить его.

Эмулятор загрузится и откроет стандартный экран Android.

3. Запуск APK файла на эмуляторе

Установка APK на эмулятор:

Скачайте файл APK по ссылке: https://www.advantshop.net/files/mobile-app/advantfood.apk
Перетащите файл APK в окно эмулятора.

APK автоматически установится на эмуляторе.

Запуск установленного приложения:

После установки APK на эмуляторе, найдите и откройте в списке программ приложение с названием AdvantFood. Приложение должно успешно запуститься.

Инструкция по компиляции проекта на Windows

Эта инструкция описывает шаги по установке и запуску проекта на операционной системе Windows. Проект также можно установить на других платформах, таких как macOS и Linux, следуя аналогичным шагам.

Шаг 1: Подготовка системы

Убедитесь, что ваш компьютер работает под управлением операционной системы Windows. Рекомендуется обновить систему до последней версии для оптимальной работы инструментов.

Минимальные требования к системе:

Требование	Минимум / Рекомендуется
Процессор	x86_64 с минимум 4 ядрами (рекомендуется 8)
Оперативная память	8 ГБ (рекомендуется 16 ГБ)
Разрешение дисплея	WXGA (1366x768) (рекомендуется Full HD 1920x1080)

Flutter поддерживает 64-битную версию Microsoft Windows 10 или более позднюю. Убедитесь, что в системе установлена Windows PowerShell 5 или более поздняя версия.

Шаг 2: Установка Flutter SDK (версия 3.19.3)

1. Перейдите на официальный сайт Flutter и скачайте версию Flutter SDK 3.19.3 для Windows. https://docs.flutter.dev/release/archive

2. Выберите ZIP-архив для скачивания.

3. Разархивируйте скачанный архив в удобное место на вашем компьютере (например, в корень диска C:).

4. Установите путь C:\flutter.

5. Добавьте путь C:\flutter\bin в переменную среды PATH:

- Откройте свойства системы (Панель управления > Система > Дополнительные параметры системы).
- В разделе "Переменные среды" найдите переменную Path и добавьте путь C:\flutter\bin.

Шаг 3: Установка Android Studio

1. Скачайте и установите Android Studio с официального сайта.

2. Во время установки выберите место установки и установите необходимые компоненты:

- Android SDK Platform, API 35.0.1
- Android SDK Command-line Tools
- Android SDK Build-Tools
- Android SDK Platform-Tools
- Android Emulator

Шаг 4: Установка и настройка эмулятора Android

1. Запустите Android Studio и создайте новое виртуальное Android-устройство (AVD):
- Откройте Android Studio.
- Перейдите в Инструменты > Диспетчер устройств или выберите его в меню "Дополнительные параметры" на экране приветствия.
- Нажмите "Создать устройство".
- Выберите категорию "Телефон" или "Планшет", затем устройство и версию Android.
- Установите необходимые компоненты, если их ещё нет на компьютере.
- Настройте производительность графики, выбрав "Оборудование — GLES 2.0".
- Нажмите "Finish" для завершения настройки AVD.

2. Запустите эмулятор, нажав на значок "Выполнить" в Диспетчере устройств.

Шаг 5: Принятие лицензий Android

1. Откройте консоль с правами администратора.

2. Выполните команду:

flutter doctor --android-licenses

Примите условия всех лицензий.

Шаг 6: Проверка настройки среды разработки

1. Запустите команду `flutter doctor` для проверки установки всех компонентов:
flutter doctor

2. Если вы следовали инструкции, команда должна показать что-то подобное:

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.3, on Microsoft Windows 11 [Version 10.0.22621.3155], locale en)
[✓] Windows version (Installed version of Windows is version 10 or higher)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
[!] Chrome - develop for the web
[!] Visual Studio - develop Windows apps
[✓] Android Studio (version 2024.1)
[✓] VS Code (version 1.92)
[✓] Connected device (1 available)
[✓] Network resources

3. Если flutter doctor обнаруживает ошибки, используйте флаг `-v` для получения подробной информации:
flutter doctor -v

Шаг 7: Клонирование или загрузка проекта

1. Cкачайте проект по ссылке https://www.advantshop.net/files/mobile-app/advantshop_mobileapp-sources.zip и разархивируйте его в удобное место на вашем компьютере, например, в папку C:\MyProjects\.

Шаг 8: Запуск проекта

Откройте проект в вашей IDE, в Visual Studio Code используйте команду "File > Open Folder...".
В терминале нужно выполнить команду для загрузки пакетов для работы приложения: “flutter pub get”.
Далее необходимо запустить эмулятор. В нижней панели нажмите на поле “no device”, после чего откроется список доступных эмуляторов либо можно нажать на Create Android эмулятор для создания нового эмулятора.
После запуска эмулятора нужно запустить проект. Для этого переходим в директорию "C:\MyProjects\advantshop_mobileapp\lib\main.dart" и нажимаем кнопку Run для запуска проекта, либо прописываем в терминале команду “flutter run”.
Дождитесь завершения компиляции и запуска проекта. Если всё настроено верно, вы увидите приложение на экране эмулятора или устройства.

О продукте

Мобильное приложение — продукт, позволяющий интернет-магазину выйти на рынок мобильных приложений и быть доступным для клиентов на сервисах App Store, Google Play, RuStore и App Gallery.

Технические данные

Мобильное приложение разработано на фреймворке Flutter, язык программирования Dart. Это кроссплатформенный язык программирования, позволяющий запускать приложение под многие операционные системы.

Мобильное приложение подключается к сервису посредством API. Все данные в режиме реального времени берутся по API из базы данных любого сервиса. Поэтому все изменения сразу регистрируются в мобильном приложении.

API мобильного приложения защищено от мастер-доступа. Соответственно, даже получив доступ к API, невозможно распоряжаться данными. Вся работа идет только через авторизованного покупателя и только после подтверждения номера телефона путем SMS.

Мобильное приложение не имеет своей базы данных. Все данные хранятся на стороне технического вендора. Большинство функций предоставляется посредством API. Это означает, что мобильное приложение является только клиентом.

Функциональные особенности

Типовой набор функций

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

Маркетинговые инструменты

Stories

Помимо строго функциональных интеграций и настроек, существуют опции, которые украшают внешний вид приложения и позволят продвигать товары и услуги. К примеру, с помощью специального модуля доступен формат «Истории» (Stories) для размещения.

Push-уведомления

Приложение позволяет владельцу присылать push-уведомления в зависимости от действий клиента. Это эффективный инструмент для взаимодействия и возврата клиентов к покупкам. С помощью уведомлений можно сообщать покупателям об акциях, новых поставках и напоминать о специальных предложениях по программе лояльности.

Программа лояльности

Также в приложении запустить собственную бонусную программу, чтобы еще активнее привлекать клиентов к покупкам. На платформе можно настроить бонусные баллы, процент скидки и прочие детали. А также отслеживать эффективность программы лояльности в отдельном отчете.

Синхронизация

Приложение работает синхронно с остальными ресурсами интернет-магазина, например, с сайтом. Обмен данными может происходить как через интеграции с Битрикс, так и через учетными программами 1С, Мой Склад, iiko, r_keeper, TillyPad.

Пользовательский интерфейс

Пользователь может скачать приложение с разных площадок: App Store, Google Play, RuStore, App Gallery.

Авторизация

Необходимость авторизации выставляет владелец интернет-магазина. В приложении он может настроить разные способы авторизации: SMS-уведомлением, входящим звонком или 4 последними цифрами входящего номера.

Поиск, фильтры и категории

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

Карточка товара

В карточке товара пользователю могут быть видны фотографии, описание товара, стоимость, наличие на складе, способы оплаты и методы доставки с расчетом стоимости по весу.

Личный кабинет

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

Корзина и оформление заказа

В корзине содержится вся информация перед оформлением заказа: стоимость каждого продукта, общая стоимость, количество товаров. При оформлении необходимо выбрать способ оплаты, а также способ доставки. Кроме того, владелец может отключить выбор способа доставки, если продукт является услугой или цифровым объектом.

Инструкция по эксплуатации мобильного приложения

Общие сведения о приложении

Описание

Установка
Обновление

Удаление

Работа с приложением

Запуск приложения

Главная страница приложения

Каталог

Товары

Корзина

Профиль

Общие сведения о приложении

Описание

На AdvantShop можно создавать мобильное приложение интернет-магазина или заведения общественного питания для iOS и Android. Оно разработано на технологии Flutter, что обеспечивает быстрый вывод информации на экран смартфона, небольшой объем для скачивания и прохождение модерации на App Store, Google Play и RuStore.

Управление мобильным приложением идет в панели AdvantShop. Можно использовать все возможности платформы:

создание карточки товаров;
формируется структуру каталога;
добавляется фильтры;
осуществляется импорт/экспорт ассортимента;
обмен данными с учетными системами 1С, МойСклад, iiko, R-Keeper;
подключаются сервисы оплаты и доставки;
настраиваются зоны доставки;
используются CRM;
анализируются продажи при помощи отчетов;
настраивается программа лояльности.

А также возможности только для мобильного приложения:

отправляются push-уведомления;
публикуются stories;
подключается AppMetrika.

Установка

Установка на примере модуля “Интеграция с Мобильным приложением” (рис.1) Устанавливаем модуль, таким образом будет установлено демо вашего мобильного приложения. Производим настройки внешнего вида приложения, оформление главной страницы, меню, поиска, каталога и т.д.

Рисунок 1. Настройка приложения через модуль

После завершения настроек, необходимо зарегистрировать приложение на разных платформах такие как App Store, Google Play и RuStore.

Для регистрации приложения в данных сервисах необходимо загрузить файл определенного формата. Данный файл формирует и предоставляет наша техническая поддержка (https://www.advantshop.net/support).

После предоставления файла, приложение размещается и регистрируется на платформах App Store, Google Play и RuStore с прохождением всех проверок.

После проверки приложение будет доступно для установки всем пользователям вашего магазина

Установка мобильного приложения выполняется из магазина приложений Google Play, PlayMarket, App Store, RuStore.

Для установки приложения на мобильное устройство с операционной системой Android выполните следующие действия:

1. Зайдите в магазин приложений Google Play

2. Воспользуйтесь поисковой строкой и найдите приложение Advantshop
3. Нажмите на кнопку “Установить” для автоматической загрузки приложения (рис.2).

Рисунок 2. Установка приложения в GooglePlay

4. После успешной загрузки приложения на экране устройства отображается ярлык запуска.

Также пользователи могут перейти к скачиванию приложения по кнопкам установки мобильного приложения, указанным на сайте (рис.3).

Рисунок 3. Кнопки установки приложения

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

Удаление

Для удаления мобильного приложения необходимо на мобильном устройстве запустить приложение Google Play ( PlayMarket, App Store, RuStore ) и в нем удалить мобильное приложение (рис.4).

Рисунок 4. Удаление приложения

Работа с приложением

Запуск приложения

Для запуска приложения нажмите на соответствующую иконку, которая расположена в меню мобильного устройства (рис.5).

Рисунок 5. Запуск мобильного приложения

Главная страница приложения

После скачивания и запуска приложения, как правило открывается главная страница приложения.

Так может выглядеть главная страница мобильного приложения (рис. 6,7,8).

Рисунок 6.

В зависимости от выбранных настроек на главной можно выводить категории, товары, строку поиска, виджет доставки, информационные слайды.
Настройки производятся в панели магазина приложения. В качестве примера приводим настройку мобильного приложения через модуль “Интеграция с мобильным приложением” (https://www.advantshop.net/help/pages/oformlenie-glavnoi-stranitsy).

Каталог

Каталог доступен с главной страницы или по пункту меню “Каталог”. При открытии каталога в зависимости от настроек будут доступны категории или товары. Товары могу выводится в виде плитки, списка или в режиме подробно, с добавлением фильтра и сортировки по параметрам и брендам.

Так может выглядеть каталог (рис.7).

Рисунок 7. Каталог мобильного приложения в режиме “плитка”

Рисунок 8. Каталог мобильного приложения в режиме “список”

Рисунок 9. Каталог мобильного приложения в режиме “подробно”

Товары и карточка товара

Товары могут быть доступны как с главной страницы , так и непосредственно с каталога товаров.

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

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

Так может выглядеть карточка товара мобильного приложения (рис.10)

Рисунок 10. Карточка товара

Корзина

Корзина доступна в меню. При переходе в корзину открывается страница с добавленными товарами. Здесь можно оформить заказа, отредактировать количество товаров, применить купон к покупке.
Так может выглядеть корзина мобильного приложения (рис.11).

Рисунок 11. Корзина мобильного приложения

Профиль

Чтобы пользователи мобильного приложения магазина могли совершать покупки, получать бонусы и отслеживать историю своих покупок, необходимо авторизация (рис.12).

Рисунок 12. Авторизация в мобильном приложении

После авторизации пользователям будет доступен личный кабинет по вкладке “Профиль”, где буду отображены такие данные как адрес, история заказов, бонусная карта (рис.13).

Рисунок 13. Профиль пользователя мобильного приложения

Контакты

На странице контактов указывается адрес с возможностью добавления карты местоположения. Контакты доступны с пункта главного меню

Так может выглядеть страница контактов в мобильном приложении на вкладке “Контакты” (рис.14).

Рисунок 14 Страница “Контакты” мобильного приложения

Если приложение создано для ресторана или кафе, может быть указан список ресторанов с адресом и местоположением на карте

Внутренние настройки мобильного приложения на примере модуля “Интеграция с мобильным приложением” Адвантшоп можно посмотреть в статьях https://www.advantshop.net/help/pages/mobile-application

Техническая архитектура ПО

Описание архитектуры

Мобильное приложение AdvantShop разработано на кроссплатформенном фреймворке Flutter. Представляет собой монолитное клиентское приложение адаптированное под устройства iOS и Android.

Приложение реализовано реализует паттерн MVC.

Приложение содержит 38 экранов.

В качестве локального хранилища данных используется пакет SharedPreferences, в котором приложение хранит пользовательские данные на устройстве пользователя.

Для получения внешних данных используется адаптер в виде API Json, внутреннего стандартизированного Json контракта - AdvantShop ApiDataContract.

AdvantShop ApiDataContract может быть реализован любым внешний сервисов обладателем нужных данных.

Описание методов AdvantShop ApiDataContact

GET /api/init Инициализация

Покупатель

POST /api/users/signin Авторизация по эл. почте

POST /api/users/signinbyphone Авторизация (или регистрация) по sms-коду. Отсылка sms-кода по номеру телефона.

POST /api/users/signinbyphoneconfirmcode Авторизация (или регистрация) по sms-коду. Проверка введенного кода и авторизация.

GET /api/users/me Получить текущего покупателя

POST /api/users/me Изменить текущего покупателя

POST /api/users/me/smsphoneconfirmation Послать смс-код по номеру телефона

POST /api/users/me/smsphoneconfirmationcode Проверка смс-кода

GET /api/users/me/bonuses Бонусная карта покупателя

GET /api/users/me/customer-fields Получить доп. поля покупателя

POST /api/users/me/remove-account Удалить аккаунт пользователя

POST /api/users/me/fcmtoken Обновить Firebase Cloud Messaging token

Контакты покупателя

GET /api/users/me/contacts Получить список контактов пользователя

POST /api/users/me/contacts/add Добавить новый контакт для пользователя

POST /api/users/me/contacts/{contactId}/update Обновить контакт для пользователя

POST /api/users/me/contacts/{contactId}/delete Удалить контакт для пользователя

GET /api/users/me/statistics Статистика по пользователю

Заказ

GET /api/orders/me Список заказов покупателя

GET /api/orders/me/{id} Получить заказ покупателя

POST /api/orders/me/{id}/review Оценить заказ

POST /api/orders/me/{id}/cancel Отменить заказ

Каталог

POST /api/catalog Получить каталог

POST /api/catalog/all Получить одностраничный каталог

POST /api/catalog/filter Получить фильтр каталога

POST /api/catalog/filtercount Получить кол-во товаров по фильтру

Поиск

POST /api/search Поиск по товарам и категориям

POST /api/search/filter Получить фильтр для поиска

POST /api/search/filtercount Получить кол-во товаров по фильтру

POST /api/search/autocomplete Поиск автозаполнение по товарам и категориям

Товар

GET /api/products/{id} Получить товар

POST /api/products/{id}/price Расчитать цену товара

GET /api/products/{id}/properties Получить характеристики товара

GET /api/products/{id}/reviews Получить отзывы товара

POST /api/products/{id}/reviews/add Добавить отзыв

GET /api/products/{id}/related-products Получить cross-sell, up-sell товары

GET /api/products/{id}/gifts Получить подарки для товара

GET /api/products/{id}/stocks Получить список складов с наличием

GET /api/products/{id}/price-rule-amount-list Получить список тип цен в зависимости от кол-ва

Корзина

POST /api/cart Получить корзину на основе переданных товарах

GET /api/cart Получить текущую корзину

Купон

POST /api/coupons/me/add Применить купон

POST /api/coupons/me/remove Удалить купон

Оформление заказа

POST /api/checkout Передать данные для оформления заказа

Под заказ

GET /api/preorder/settings Получить настройки для раздела "под заказ"

POST /api/preorder Оформить под заказ

Способы доставки

GET /api/deliveries/types Получить типы доставок

POST /api/deliveries/check-delivery-zone Проверить адрес на возможность доставки доставками с типом "Доставки по зонам"

POST /api/deliveries/calculate Расчет доставки

GET /api/deliveries/point-deliveries Получить пункты выдачи

Страны, регионы, города

GET /api/locations/maincities Список основных стран и городов

GET /api/locations/city Получить город по названию или индексу

POST /api/locations/countries Список стран

Бонусная система

POST /api/bonus-cards/me/add Создание бонусной карты для покупателя

Избранное

GET /api/wishlist Получить товары из избранного

POST /api/wishlist/add Добавить товар в избранное

POST /api/wishlist/remove Удалить товар из избранного

Настройки

GET /api/settings/dadata Настройки Dadata

Статические блоки

GET /api/staticblocks Получить статические блоки

Статические страницы

GET /api/staticpages Получить статические страницы

GET /api/staticpages/{id} Получить статическую страницу

Модули

GET /api/modules/{id}/block Получить блок срендеренный модулем

v2

Инициализация

GET /api/v2/init Инициализация

Лиды

POST /api/v2/leads/add Создание лида

Способы доставки

POST /api/v2/deliveries Получить доставки