$host = 'localhost:3306'; // адрес сервера
$database = 'u0497934_DB'; // имя базы данных
$user = 'u0497_admin'; // имя пользователя
$password = 'cWsp37_5'; // пароль
$link = mysqli_connect($host, $user, $password, $database)
or die("Err " . mysqli_error($link));
После подключения к базе данных можно сделать запрос. Далее представлен запрос получения списка ингредиентов для полученного с клиентской стороны значения штрих-кода.
if (isset($_GET['barcode'])) $id = htmlentities($_GET['barcode']);
$query ="SELECT *FROM prod_ingr WHERE Prod_ID= '$id";
$result = mysqli_query($link, $query) or die("Err " . mysqli_error($link));
Изначально осуществляется проверка того, что штрих-код был передан, после чего по заданному значению осуществляется выборка.
После чего результат запроса преобразуется в JSON-формат для передачи клиенту. Далее представлено преобразование полученного списка ингредиентов из базы данных в JSON.
foreach($result as $row){
$Id = $row["ID"];
$name = $row["Ingr_ID"];
$arr = array('ID' => $Id, 'Name' => $name);
array_push($arr1,$arr);
}
$arr1=array('Ingredients'=>$arr1);
echo json_encode($arr1, JSON_UNESCAPED_UNICODE);
Изначально каждая строчка выборки добавляется в массив, после чего сформированный массив преобразуется в JSON и отправляется в клиент.
3.6 Разработка интерфейса приложения
Дизайн приложения разрабатывался с учетом Material Design. На сайте material.io есть возможность посмотреть принципы и подходы к проектированию как отдельных элементов макета страницы, так и отдельных элементов в целом. Также есть возможность импортировать готовый набор цветовых схем и иконок для приложения. Интерфейс выбора иконок и цветовых схем представлены на рис. 16 и 17.
Рисунок 16. Material Icons
Можно выбрать тип внешнего вида иконок и скачать в одном из двух форматов SVG или PNG
Рисунок 17. Material Colors
Таким образом, можно сразу увидеть возможные сочетания цветов на разных макетах окон, отталкиваясь от одного цвета.
Для реализации взаимодействия с пользователем можно выделить несколько типов окон:
Макет окна регистрации и авторизации построены по сходному типу. На рис. 18,19 можно увидеть интерфейс данных окон в среде разработки.
Рисунок 18. Экран авторизации Рисунок 19. Экран регистрации
Экраны авторизации и регистрации состоят из следующих элементов
1. EditText - Редактируемые поля ввода логина и пароля.
2. TextView - Отображение названия приложения.
3. ImageView - Отображение логотипа приложения.
4. Button - Кнопки регистрации и авторизации.
Макет главного экрана в среде разработке можно увидеть на рис. 20, 21.
Рисунок 20. Главное окно приложения Рисунок 21. Окно навигации
Главный экран реализован двумя блоками: содержимым основного окна и окна навигации. Каждый из которых включает в себя следующие элементы:
1. TextView - Отображение названия приложения, почты пользователя, названий кнопок.
2. ImageView - Отображение логотипа приложения.
3. Button - Содержимое главного окна отражено двумя кнопками "Проверить продукт" и "Стоп-лист".
4. NavigationView - Окно навигации.
5. Item - Элементы окна навигации, связанные с иконками, предварительно добавленными в папку проекта.
Макет окна стоп-листа и базы ингредиентов построены по сходному типу. На рис. 22, 23 можно увидеть интерфейс данных окон в среде разработки.
Рисунок 22. Стоп-лист Рисунок 23. База ингредиентов
Экраны "Стоп-лист" и "База ингредиентов" состоят из следующих элементов:
1. ListView- Список ингредиентов с возможностью множественного выбора.
2. Float Action Button - Кнопки основных действий текущих окон
Макет окна истории поиска и предложения разрешенных продуктов из категории построены по сходному типу. На рис. 24, 25 можно увидеть интерфейс данных окон в среде разработки.
Рисунок 24. История поиска Рисунок 25. Предложения из категории
Экраны "История поиска" и "Предложения из категории" состоят из следующих элементов:
1. ListView- Список продуктов, состоящий из двух уровней, отображающих название продукта и штрих-код продукта.
2. TextView - Для отображения каждого элемента сформирована отдельная разметка.
При активации поиска продукта запускается окно с камерой и после считывания данные поступают в окно результата сканирования. На рис. 26, 27 можно увидеть интерфейс данных окон в среде разработки.
Рисунок 26. Предпросмотр камеры Рисунок 27. Результат сканирования
Экраны "Предпросмотр камеры" и "Результат сканирования" состоят из следующих элементов:
1. SurfaceView- Запуск предпросмотра камеры.
2. TextView - Для отображения названия продукта, штрих-кода и категории.
3. ListView- Список ингредиентов продукта с возможностью множественного выбора.
4. Float Action Button - Кнопка добавления ингредиентов в свой стоп лист.
5. Button - Кнопка отображения продуктов из категории.
Также учтена необходимость вывода всплывающих подсказок и сообщений об ошибках для улучшения взаимодействия с пользователем. Они включают в себя сообщения об ошибках при заполнении полей email и password в окнах регистрации и авторизации (рис 28). Реализуется при помощи метода EditText.SetError.
Рисунок 28. Сообщения об ошибках
При успешном выполнении команд на сервере пользователь также оповещается. Например, об успешном добавлении ингредиентов в стоп-лист на странице информации о товаре (рис.29). Реализуется при помощи всплывающего окна SnackBar.
Рисунок 29. Всплывающее окно
Выводы по главе
В данной главе проведен выбор и описание используемых инструментальных средств, описаны библиотеки и средства, использованные при разработке. Проведено описание создания интерфейса приложения, реализации функции сканирования штрих-кода, реализации сетевого взаимодействия и реализации серверной стороны приложения.
Заключение
Торговые сети активно разрастаются, современный рынок перенасыщен товарами и услугами. Предложение товаров в категории продуктов питания особенно велико. Состав одних и тех же продуктов может очень сильно отличаться, в результате люди проводят много время на чтение состава и выбор подходящего товара.
Существует ряд решений, направленных на помощь покупателям при выборе продуктов питания, однако ни одно из приложений не позволяет проверять состав продукта с учетом индивидуального списка непереносимых ингредиентов.
На основе анализа существующих решений были выявлены основные функциональные требования к приложению. Также был проведен анализ основных компонентов и архитектуры операционной системы Android..
В результате проведенного обзора аналогов были сформулированы и в дальнейшем реализованы следующие функции приложения:
1. Регистрация и авторизация пользователей.
2. Ведение индивидуального списка запрещенных ингредиентов.
3. Идентификация товара с помощью камеры мобильного устройства.
4. Поиск данного продукта в базе данных.
5. Проверка состава продукта на наличие стоп-ингредиентов для пользователя
6. Отображение результата сканирования, включая состав продуктов с сообщением о том, можно данный продукт пользователю или нет.
7. Хранение истории поиска.
8. Предложение разрешенных продуктов из категории, к которой принадлежит выбранный продукт.
Клиентская часть приложения реализована в Android Studio, на языке Java. Серверное приложение разработано на языке PHP. Для хранилища данных используется СУБД MySQL .Сетевое взаимодействие реализовано с использованием библиотеки Retrofit, форматом передачи данных является JSON, а для его обработки используется библиотека GSON.
Разработаное клиент-серверное приложение, удовлетворяет всем требованиям технического задания (Приложение А). Интерфейс приложения спроектирован с учетом Material Design, рекомендованным Google для разработки мобильных приложений. Использована трехуровневая архитектура приложения, где сервер является связующим звеном между клиентом и базой данных, получая запрос от пользователя, обращается к базе данных и возвращает результат в клиент.
Наиболее сложным этапом работы была реализация сетевого взаимодействия. Так как реализовать не взаимодействующие приложения по отдельности намного проще, потому что не нужно задумываться о передаче между ними информации, организовывать корректный прием и обработку данных.
Разработан комплект технической документации.
В качестве дальнейшей работы над проектом возможно расширение функций приложения. Также планируется публикация приложения в Google Play.
Список использованных источников
1. Классификация добавок [Электронный ресурс]. - Режим доступа: http://viplab.org/?p=804, свободный. (дата обращения: 20.05.2018)
2. E. Basker. "Raising the Barcode Scanner: Technology and Productivity in the Retail Sector." American Economic Journal: Applied Economics, American Economic Association, vol. 4(3), pp. 1-27.
3. История android [Электронный ресурс]. - Режим доступа: https://metanit.com/java/android/1.1.php, свободный. (дата обращения: 20.05.2018)
4. Архитектура android [Электронный ресурс]. - Режим доступа: http://pr0andr0id.blogspot.ru/2014/02/blog-post_21.html, свободный. (дата обращения: 20.05.2018)
5. Developers documentation [Электронный ресурс]. - Режим доступа: https://developer.android.com/reference/, свободный. (дата обращения: 20.05.2018)
6. ZXing [Электронный ресурс]: - Режим доступа: http://code.google.com/p/zxing/,свободный (дата обращения: 15.04.2018)
7. J.E. Montandon, H. Borges, D. Felix, M.T. Valente. "Documenting APIs with examples: Lessons Learned with the APIMiner Platform." Reverse Engineering (WCRE), 2013 20th Working Conference on, pp. 401-408, 2013.
8. J. Brown, Zbar bar code reader [Электронный ресурс]. - Режим доступа:: http://zbar.sourceforge.net/, свободный (дата обращения: 15.04.2018).
9. Barcode detection with the Mobile Vision API [Электронный ресурс]. - Режим доступа: https://codelabs.developers.google.com/codelabs/bar-codes/#0, свободный (дата обращения: 15.04.2018).
10. MVP [Электронный ресурс]. - Режим доступа: https://medium.com/@tinmegali/model-view-presenter-mvp-in-android-part-1-441bfd7998fe, свободный. (дата обращения: 20.05.2018)
11. Вкусвилл [Электронный ресурс]. - Режим доступа: http://vkusvill.ru/, свободный. (дата обращения: 20.05.2018)
12. Performing Network Operations [Электронный ресурс] / Google. - Режим доступа: https://developer.android.com/training/basics/network-ops/index.html, свободный. (дата обращения: 15.04.2018)
13. OkHttp [Электронный ресурс] / Square. - Режим доступа: http://square.github.io/okhttp/, свободный. (дата обращения: 15.04.2018)
14. Volley [Электронный ресурс] / Google. - Режим доступа: https://github.com/google/volley, свободный. (дата обращения: 15.04.2018)
15. Retrofit [Электронный ресурс] / Square. - Режим доступа: http://square.github.io/retrofit/, свободный. (дата обращения: 15.04.2018)
16. RFC 7159 - The JavaScript Object Notation (JSON) Data Interchange Format. [Электронный ресурс] / Google. - Режим доступа: https://tools.ietf.org/html/rfc7159, свободный. (дата обращения: 15.04.2018)
17. GSON [Электронный ресурс] / Google. - Режим доступа: https://github.com/google/gson/blob/master/UserGuide.md, свободный. (дата обращения: 15.04.2018)
18. Android Async Http Clients: Volley and Retrofit [Электронный ресурс] / Canvas. - Режим доступа: http://instructure.github.io/blog/2013/12/09/volley-vs-retrofit/, свободный. (дата обращения: 15.04.2018)
19. MySQL [Электронный ресурс] / Oracle. - Режим доступа: https://www.mysql.com, свободный. (дата обращения: 15.04.2018)
20. Phpmyadmin [Электронный ресурс] /Oracle. - Режим доступа: https://www.phpmyadmin.net/, свободный. (дата обращения: 20.05.2018)