Разработка мобильного приложения для интернет-магазина

Размещено на http://www.allbest.ru/

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ

КЫРГЫЗСКОЙ РЕСПУБЛИКИ

Кыргызский государственный университет геологии, горного дела и освоения природных ресурсов им.акад. У.Асаналиева

Факультет: Геологоразведочный

Кафедра «Информационные технологии и математическое моделирование им. акад. А.Жайнакова»

КУРСОВОЙ ПРОЕКТ

по дисциплине «Проектирование и разработка мобильных приложений»

На тему: «Разработка мобильного приложения для интернет-магазина»

Проверила:

Аманкулова Н.

БИШКЕК -2022 г.

Введение

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

Быстро растущая интернет-аудитория Кыргызстана является новым рынком сбыта для компаний самого разного профиля. Отсутствие географических барьеров для рекламы и распространения товаров и услуг привлекает в Интернет- бизнес все новые предприятия.

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

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

Интернет-магазин - это удобная система демонстрации и продажи товаров и услуг в Интернет. Сегодня на Кыргызстанском рынке в сети Интернет представлены более 3 тыс. электронных магазинов.

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

Цель данной курсовой работы - разработка интернет-магазина и мобильного приложения для ООО «Пышка».

Исходя из поставленной цели, были определены задачи:

– обосновать необходимости создания интернет-магазина и мобильного приложения;

– произвести анализ существующих мобильных платформ;

– проанализировать технологии создания интернет-магазинов;

– разработать удобный и эффективный графический пользовательский интерфейс интернет-магазина;

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

– разработка дизайна, делающего нахождение пользователя на сайте максимально комфортным;

– реализовать программный модуль для работы интернет-магазина; реализовать программный модуль для работы мобильного

– приложения обеспечить удобный просмотр всего списка товаров;

– обеспечить удобный и эффективный интерфейс служащих;

– оценить эффективность выполненной разработки.

Глава 1. Проектирование интернет-магазина и мобильного приложения

1.1 Постановка задачи

Повсеместное использование информационных технологий и сети Интернет давно стало объективной необходимостью (рисунок 1). Спектр областей, в которых применяются информационные технологии, чрезвычайно широк. Одной из сфер, где их значение было велико, начиная с момента начала их бурного развития, является сфера услуг.

Рисунок 1 - Статистика использования сети Интернет

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

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

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

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

Хотя по последним данным исследовательской компании Strategy Analytics операционная система iOS находится на подъеме, в то время как Android уступает свои позиции, именно операционной системой от Google пользуются 81,2% пользователей на глобальном мобильном рынке по итогам прошлого года.

Но помимо Google Android и iOS существуют и другие мобильные операционные системы:

– OS Symbian официально является собственностью Nokia. Это означает, что любая другая компания должна будет получить разрешение от Nokia перед использованием этой операционной системы. Nokia по-прежнему является гигантом в недорогом сегменте рынка мобильных телефонов, поэтому Java Symbian была наиболее часто используема в мобильных телефонах пару лет назад. Тем не менее Symbian широко используется в бюджетных аппаратах, но спрос на них постоянно снижается. Обновление мобильной OS Symbian сделала его способным работать эффективно на смартфонах;

– Blackberry OS является собственностью компании RIM (Research In Motion) и впервые была выпущен в 1999 году. RIM разработала эту операционную систему для своей Blackberry линии смартфонов. Blackberry сильно отличается от других операционных систем. Стильный интерфейс, а также оригинальный дизайн телефона и клавиатура QWERTY. Как и у Apple, Blackberry OS не доступна для любых других производителей;

– как и другие Samsung также владеет операционной системой, которая известна как BADA. Bada является удобной и эффективной операционной сис.Более 80 % смартфонов, проданных в конце 2015 года, были оснащены операционной системой Android. Каждый разработчик электронного устройства имеет возможность адаптировать Android под свое устройство, таким образом гарантируя совместимость своего оборудования со сторонними приложениями для этой ОС.

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

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

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

Исходя из вышеперечисленных показателей, разумно выбрать мобильную платформу с наибольшим показателем продаж. Под данное описание под- ходит платформа от Google Android. Но выбор данной платформы обусловлен не только количеством ее пользователей, но и следующими показателями:

– большое количество устройств разных производителей поддерживают Android;

– Android характеризуется высокой доступностью средств разработки. Средства разработки для платформы Android бесплатны, в то время как разработка, к примеру, под iPhone (от компании Apple) требует немалых начальных финансовых вложений;

– наличие бесплатных библиотек для работы со сторонними ресурсами (Yandex MapKit, Google Map API, др.), в то время как для Windows Phone Mobile такие библиотеки не распространены.

2.2 Структура базы данных

Целью разработки любой базы данных является хранение и использование информации о какой-либо предметной области. Для реализации этой цели имеются следующие инструменты:

– Реляционная модель данных - удобный способ представления данных предметной области;

– Язык SQL - универсальный способ манипулирования такими данными.

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

При разработке базы данных обычно выделяется несколько уровней моделирования, при помощи которых происходит переход от предметной области к конкретной реализации базы данных средствами конкретной СУБД. Можно выделить следующие уровни:

– сама предметная область;

– модель предметной области;

– логическая модель данных;

– физическая модель данных;

– собственно база данных и приложения.

Предметная область - это часть реального мира, данные о которой необходимо отразить в базе данных. Предметная область бесконечна и содержит как существенно важные понятия и данные, так и малозначащие или вообще не значащие данные. Модель предметной области - это знания о предметной области. Знания могут быть как в виде неформальных знаний, так и выражены формально при помощи каких-либо средств. В качестве таких средств могут выступать текстовые описания предметной области, наборы должностных инструкций, правила ведения дел в компании и т.п. Опыт показывает, что текстовый способ представления модели предметной области крайне неэффективен. Гораздо более информативными и полезными при разработке баз данных являются описания предметной области, выполненные при помощи специализированных графических нотаций. Имеется большое количество методик описания предметной области. Из наиболее известных можно назвать методику структурного анализа SADT и основанную на нем IDEF0, диаграммы потоков данных Гейна-Сарсона, методику объектно-ориентированного анализа UML, и др. Модель предметной области описывает скорее процессы, происходящие в предметной области и данные, используемые этими процессами. От того, насколько правильно смоделирована предметная область, зависит успех дальнейшей разработки приложений.

Логическая модель данных. На следующем, более низком уровне находится логическая модель данных предметной области. Логическая модель описывает понятия предметной области, их взаимосвязь, а также ограничения на данные, налагаемые предметной областью. Логическая модель данных является начальным прототипом будущей базы данных. Логическая модель строится в терминах информационных единиц, но без привязки к конкретной СУБД. Более того, логическая модель данных необязательно должна быть выражена средствами именно реляционной модели данных. Основным средством разработки логической модели данных в настоящий момент являются различные варианты ER-диаграмм (Entity-Relationship, диаграммы сущность-связь). Одну и ту же ER-модель можно преобразовать как в реляционную модель данных, так и в модель данных для иерархических и сетевых СУБД, или в постреляционную модель данных. Однако, т.к. рассматривается именно реляционные СУБД, то можно считать, что логическая модель данных формулируется в терминах реляционной модели данных.

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

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

Физическая модель данных. На еще более низком уровне находится физическая модель данных. Физическая модель данных описывает данные средствами конкретной СУБД. Считается, что физическая модель данных реализована средствами именно реляционной СУБД, хотя, как уже сказано выше, это необязательно. Отношения, разработанные на стадии формирования логической модели данных, преобразуются в таблицы, атрибуты становятся столбцами таблиц, для ключевых атрибутов создаются уникальные индексы, домены преображаются в типы данных, принятые в конкретной СУБД.

Ограничения, имеющиеся в логической модели данных, реализуются различными средствами СУБД, например, при помощи индексов, декларативных ограничений целостности, триггеров, хранимых процедур. При этом опять-таки решения, принятые на уровне логического моделирования определяют некоторые границы, в пределах которых можно развивать физическую модель данных. Точно также, в пределах этих границ можно принимать различные решения. Например, отношения, содержащиеся в логической модели данных, должны быть преобразованы в таблицы, но для каждой таблицы можно дополнительно объявить различные индексы, повышающие скорость обращения к данным. Многое тут зависит от конкретной СУБД.

При разработке физической модели данных возникают вопросы: хорошо ли спроектированы таблицы? Правильно ли выбраны индексы? Насколько много программного кода в виде триггеров и хранимых процедур необходимо раз- работать для поддержания целостности данных?

Собственно база данных и приложения. Как результат предыдущих этапов появляется сама база данных. База данных реализована на конкретной программно-аппаратной основе, и выбор этой основы позволяет существенно скорость работы с базой данных. Например, можно выбирать различные типы компьютеров, менять количество процессоров, объем оперативной памяти, дисковые подсистемы и т.п. Очень большое значение имеет также настройка СУБД в пределах выбранной программно-аппаратной платформы.

Но опять решения, принятые на предыдущем уровне - уровне физического проектирования, определяют границы, в пределах которых можно принимать решения по выбору программно-аппаратной платформы и настройки СУБД.

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

Атрибут - свойство некоторой сущности. Часто называется полем таблицы.

Домен атрибута - множество допустимых значений, которые может принимать атрибут.

Нормальная форма - требование, предъявляемое к структуре таблиц в теории реляционных баз данных для устранения из базы избыточных функциональных зависимостей между атрибутами (полями таблиц).

Метод нормальных форм (НФ) состоит в сборе информации о объектах решения задачи в рамках одного отношения и последующей декомпозиции этого отношения на несколько взаимосвязанных отношений на основе процедур нормализации отношений.

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

Аномалией называется такая ситуация в таблице БД, которая приводит к противоречию в БД либо существенно усложняет обработку БД. Причиной является излишнее дублирование данных в таблице, которое вызывается

– атрибуты не упорядочены и различаются по наименованию;

– все значения атрибутов атомарны.

Вторая нормальная форма (2НФ). Отношение находится во 2НФ, если оно находится в 1НФ и каждый не ключевой атрибут неприводимо зависит от Первичного Ключа (ПК).

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

Третья нормальная форма (3НФ). Отношение находится в 3НФ, когда находится во 2НФ и каждый не ключевой атрибут нетранзитивно зависит от первичного ключа. Проще говоря, второе правило требует выносить все не ключевые поля, содержимое которых может относиться к нескольким записям

Четвертая нормальная форма (4НФ). Отношение находится в 4НФ, если оно находится в НФБК и все нетривиальные многозначные зависимости фактически являются функциональными зависимостями от ее потенциальных ключей. В отношении R (A, B, C) существует многозначная зависимость R.A > R.B в том и только в том случае, если множество значений B, соответствующее паре значений A и C, зависит только от A и не зависит от С.

Пятая нормальная форма (5НФ). Отношения находятся в 5НФ, если оно находится в 4НФ и отсутствуют сложные зависимые соединения между атрибутами.

Если «Атрибут зависит от «Атрибута_2», а «Атрибут_2» в свою очередь зависит от «Атрибута_3», а «Атрибут_3» зависит от «Атрибута_1», то все три атрибута обязательно входят в один кортеж.

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

Доменно-ключевая нормальная форма. Переменная отношения находится в ДКНФ тогда и только тогда, когда каждое наложенное на неё ограничение является логическим следствием ограничений доменов и ограничений ключей, наложенных на данную переменную отношения.

Ограничение домена - ограничение, предписывающее использовать для определённого атрибута значения только из некоторого заданного домена. Ограничение по своей сути является заданием перечня (или логического эквивалента перечня) допустимых значений типа и объявлением о том, что указанный атрибут имеет данный тип.

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

Любая переменная отношения, находящаяся в ДКНФ, обязательно находится в 5НФ. Однако не любую переменную отношения можно привести к ДКНФ.

Шестая нормальная форма (6НФ). Переменная отношения находится в шестой нормальной форме тогда и только тогда, когда она удовлетворяет всем нетривиальным зависимостям соединения. Из определения следует, что переменная находится в 6НФ тогда и только тогда, когда она неприводима, то есть не может быть подвергнута дальнейшей декомпозиции без потерь. Каждая переменная отношения, которая находится в 6НФ, также находится и в 5НФ.

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

Рассматривая структуру данных пекарни «Русский каравай» можно выделить следующие важные наименования атрибутов, необходимых для создания базы данных сайта и соответственно мобильного приложения представленных в таблице 1.

Таблица 1 - Структура данных

Наименование атрибутов	Тип полей
ID	Counter
Name	Varchar (30)
Price	Currency - денежный тип
Weight	Float
Image	Attachment

Каждому хлебобулочному изделию будет присвоен ID - идентификатор с типом поля counter. Данный тип поля автоматически формирует для каждой новой записи уникальные, последовательно-возрастающие (на 1) целые числа или случайные числа.

Помимо идентификатора продукция будет иметь наименование Name с типом поля varchar. Данный тип поля хранит в себе строки переменной длины.

Следующий атрибут это цена Price с типом поля данных integer. Этот тип поля размещает числовые данные, размер которых определяется, числом, указанным в свойствах полей.

Все изделия будут иметь свой вес Weight с типом поля Float и описание в виде картинки Image с типом поля Attachment.

1.3 Потоки данных

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

Существует два способа соединения базы данных сайта с мобильным приложением на платформе Android.

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

Недостатками использования стандартных классов java являются:

– вся логика расположена внутри мобильного приложения (это нагружает приложение);

– невозможность переноса данного кода и алгоритмов на другую платформу, так как код мобильное приложение жестко привязано к классам java;

– нужно уделять большее внимание безопасности передачи данных и т.д.

Второй способ - использование клиент-серверных технологий с помщью создания обработчиков запросов на стороне сервера и обращения к этим функциям из мобильного приложения. Для передачи данных будет использоваться язык xml либо json.

JSON - текстовый формат обмена данными, основанный на JavaScript и обычно используемый именно с этим языком. Как и многие другие текстовые форматы, JSON легко читается людьми.

Несмотря на происхождение от JavaScript (точнее, от подмножества языка стандарта ECMA-262 1999 года), формат считается независимым от языка и может использоваться практически с любым языком программирования. Для многих языков существует готовый код для создания и обработки данных в формате JSON.

За счёт своей лаконичности по сравнению с XML, формат JSON может быть более подходящим для сериализации сложных структур. Если говорить о веб-приложениях, то он уместен в задачах обмена данными как между браузером и сервером (AJAX), так и между самими серверами (программные HTTP- интерфейсы).

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

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

Рисунок 2 - Потоки данных мобильного приложения

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

1.5 Структура передаваемых данных

JSON (JavaScript Object Notation) - простой формат обмена данными, удобный для чтения и написания как человеком, так и компьютером. Это текстовый формат, полностью независимый от языка реализации, но он использует соглашения, знакомые программистам C-подобных языков, таких как C, C++, C#, Java, JavaScript, Perl, Python и многих других. Эти свойства делают JSON идеальным языком обмена данными.

В нотации JSON это выглядит так, как описано ниже.

Объект - неупорядоченный набор пар ключ/значение. Объект, изображенный на рисунке 3, начинается с {(открывающей фигурной скобки) и заканчивается} (закрывающей фигурной скобкой). Каждое имя сопровождается: (двоеточием), пары ключ/значение разделяются, (запятой).

Рисунок 3 - Объект в структуре JSON

Массив - упорядоченная коллекция значений. Массив, изображенный на рисунке 4, начинается с [(открывающей квадратной скобки) и заканчивается] (закрывающей квадратной скобкой). Значения разделены, (запятой).



Рисунок 4 - Массив в структуре JSON

Данные в формате JSON представляют собой:

– JavaScript-объекты {... };

– массивы [... ];

– значения одного из типов:

– строки в двойных кавычках;

– число;

– логическое значение true/false;

– null.

Вышеперечисленные структуры могут быть вложенными, как показано на рисунке 5.

Рисунок 5 - Типы данных в структуре JSON

Строка - коллекция нуля или больше символов Unicode, заключенная в двойные кавычки, используя \ (обратную косую черту) в качестве символа экранирования. Символ, как показано на рисунке 6, представляется как односимвольная строка. Похожий синтаксис используется в C и Java.



Рисунок 6 - Строка в структуре JSON

Таблица 2 - Структура данных

Наименование атрибутов	Структуры в JSON
ID	Значение
Name	Строка
Price	Значение
Weight	Значение
Image	Значение

Каждому атрибуту будет присвоена определенная структура JSON, как показано в таблице 2. ID, Price, Weigt, Image - имеют структуру Значение. Значение может быть строкой в двойных кавычках, числом, объектом, массивом, одним из литералов: true, false или null. Т.о. структуры могут быть вложены друг в друга.

Атрибуту Name будет присвоена структура Строка. Строка - это упорядоченное множество из нуля или более символов юникода, заключенное в двойные кавычки. Символы могут быть указаны с использованием escape-последовательностей, начинающихся с обратной косой черты «\», или записаны в кодировке UTF-8.

1.6 Интерфейс пользователя

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

На разработанном сайте отображен интерфейс главной страницы pirogdv.ru, показанный на рисунке 7. Навигация выполнена в верхней части сайта и содержит следующие разделы: «Главная», «О пекарне», «Магазин».

«Акция», «О доставке», «Новости», «Контакты», «Отзывы».

Рисунок 7 - Интерфейс главной страницы

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

Данная Корзина обладает следующими свойствами:

– наличие «маленькой корзины». Маленькая корзина служит своеобразным индикатором для посетителей на всех страницах сайта, по которому пользователь может ориентироваться в количестве отложенных товаров и итоговой сумме заказа;

– простота в понимании пользователем;

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

Рисунок 8 - Окно управления содержимым корзины

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



Рисунок 9 - Письмо на электронную почту о новом заказе

Корзина содержит нужную информацию для менеджера и курьера, как показано на рисунке 10. С помощью информации, вносимой в данное окно, менеджер и курьер узнают на какую дату и время необходимо будет подготовить продукцию и по какому адресу ее доставить. Для заполнения предоставляются следующие поля: «Имя», «Телефон», «Адрес», «Дата доставки», «Время до- ставки».

Рисунок 10 - Окно оформления заказа

Важным разделом интернет-магазина является раздел «Магазин», указанный на рисунке 11. Данный раздел содержит информацию об имеющейся продукции: «Название», «Вес», «Цену», «Изображение». Каждый товар расположен в блоке с тегом <div> для удобного визуального представления. Внутри блока данные располагаются помощью тега <table>, который упорядочивает данные по столбцам и строкам. Каждый продукт имеет свою кнопку «Положить в корзину». Данная кнопка добавляет товар в корзину для дальнейший действий.

Рисунок 11 - Интерфейс страницы Магазин

Помимо интерфейса для пользователя разработан интерфейс для администратора (менеджера), как показано на рисунке 12. Раздел для администратора содержит следующие закладки: «Добивать товар», «Настройки», «Заказы»,

«Логин и пароль», «Выход».

Рисунок 12 - Интерфейс администратора

1.7 Архитектура мобильного приложения

Распространенным подходом для создания современных мобильных приложений является использование шаблона Model-View-Controller (MVC). MVC - это конструкционный шаблон, который описывает способ построения структуры нашего приложения, сферы ответственности и взаимодействие каждой из частей в данной структуре.

Учитывая рекомендации для разработчиков от корпорации Гугл и общепринятые практики, при построение архитектуры приложения будет использоваться шаблон MVC.

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

Модель, Представление и Контроллер - таким образом, что модификация каждого компонента может осуществляться независимо, как показано на рисунке 13.

Преимущества MVC:

– отделяет бизнес-логику от пользовательского интерфейса и работы с базой данных;

–

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

Рисунок 13 - Структура MVC

Контроллер (Controller) управляет запросами пользователя (получаемые в виде запросов HTTP GET или POST, когда пользователь нажимает на элементы интерфейса для выполнения различных действий). Его основная функция - вызывать и координировать действие необходимых ресурсов и объектов, нужных для выполнения действий, задаваемых пользователем. Обычно контроллер вызывает соответствующую модель для задачи и выбирает подходящий вид.

Модель (Model) - это данные и правила, которые используются для работы с данными, которые представляют концепцию управления приложением. В любом приложении вся структура моделируется как данные, которые обрабатываются определённым образом. Только данные, которые должны быть обработаны в соответствии с правилами (дата не может указывать в будущее, e-mail должен быть в определённом формате, имя не может быть длиннее Х символов, и так далее).

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

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

Благодаря этому реализуется концепция разделение ответственности, в связи с чем легче построить работу над отдельными компонентами. Кроме того, вследствие этого приложение обладает лучшей тестируемостью. И если, допустим, важна визуальная часть или front end, то мы можем тестировать представление независимо от контроллера. Либо мы можем сосредоточиться на back end и тестировать контроллер.

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

Размещено на http://www.allbest.ru/

Рисунок 14 - Обработка запроса пользователя

Контроллер получает запрос пользователя (1) (запрос HTTP GET или POST), проверяет запрос и параметры, а затем вызывает модель, делая запрос (2).

Модель получает данные из базы (или из другого источника, в котором хранится информация) (3), применяет фильтры и необходимую логику, а затем возвращает данные по запросу (4).

Контроллер использует подходящий вид (5) для представления данных пользователю (6-7). Если запрос приходит с мобильного телефона, используется вид для мобильного телефона; если пользователь использует определённое оформление интерфейса, то выбирается соответствующий вид, и так далее.

Глава 2. Разработка интернет-магазина и мобильного приложения

2.1 Верстка страниц интернет-магазина

Вёрстка веб-страниц - создание структуры html-кода, размещающего элементы веб-страницы (изображения, текст и т. д.) в окне браузера, согласно разработанному макету, таким образом, чтобы элементы дизайна выглядели аналогично макету.

При верстке веб-страниц можно выделить два основных метода:

– табличная верстка;

– блочная верстка.

Для создания сайта pirogdv.ru была выбрана блочная верстка. Блочная верстка является лидером в среде веб-разработчиков. В блочной верстке макет документа состоит из тегов <div>. Главным ее преимуществом является концепция семантической верстки, т. е. разделение содержимого и оформления.

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

Интернет-магазин «Русский каравай» содержит следующие страницы: «Главная страница», «О пекарне», «Магазин - Сладкие пироги», «Магазин - Сытные пироги», «Магазин - Все пироги», «Магазин - Наборы», «Акции», «О доставке», «Новости», «Контакты».

Главная страница - самая первая страница, которая загружается при входе на сайт.

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

Главная страница сайта pirogdv.ru содержит в себе файл index.php. Так же данный файл служит ссылкой, расположенной на всех страницах в блоке меню, под названием «Главная страница». Вся навигация сайта представлена в листинге 1.

<div id="menu">

<center>

<ul id="nav" align="center">

<li><a href="index.php" title="Главная страница"><b>Главная</b></a>

</li>

</li>

<ul>

<li><a href="o pecarne.php" title="О пекарне"><b>О пекарне</b></a>

<li><a href="#"><b>Магазин</b></a>

<li><a href="shopsit.php" title="Сытные пироги"><b>СЫТНЫЕ

ПИРОГИ</b></a></li> ПИРОГИ</b></a></li>

</ul>

</li>

</li>

<li><a href="shopslad.php" title="Сладкие пироги"><b>СЛАДКИЕ

<li><a href="vse.php" title="Все пироги"><b>ВСЕ ПИРОГИ</b></a></li>

<li><a href="Akcii.php" title="Наборы"><b>НАБОРЫ</b></a></li>

</li>

<li><a href="Akcii.php" title="Акции"><b>Акции</b></a>

</li>

<li><a href="dostavka.php" title="О доставке"><b>О доставке</b></a>

<li><a href="new.php" title="Новости"><b>Новости</b></a> </li>

<li><a href="kontakti.php" title="Контакты"><b>Контакты</b></a>

</div>

</ul>

</center>

Листинг 1 - Навигации

Помимо меню на каждой странице интернет-магазина расположен блок Маленькой корзины в который вложен файл bas/index.php. Данный файл не является эквивалентов файла index.php, так как последний находится в корневой папке.

Под термином маленькая корзина, поднимется тот интерфейс представления отложенных для покупки товаров, который, как правило, размещается в шапке сайта, как представлено на рисунке 15.

Рисунок 15 - Вид корзины

Маленькая корзина служит своеобразным индикатором для посетителей, по которому пользователь может ориентироваться в количестве отложенных товаров и итоговой сумме заказа. Решение представлено в листинге 2.

header('Content-Type: text/html; charset=utf-8');

//Установка корзины.

$strpath="bas/index.php";

$adrself=getcwd(); for($i=0; $i<100; $i++)

{

if(file_exists("public_html"))break;

if (!file_exists($strpath)) chdir(".."); else break;

}

include ($strpath); chdir($adrself);

?>

Листинг 2 - Маленькая корзина

Все страницы сайта содержат JavaScript-элемент.

Слайдер - это специальный элемент веб-дизайна, представляющий собой блок определенной ширины чаще всего в шапке веб-страницы. Главная его задача изменять в ручном или автоматическом режиме элементы - картинки, тексты и ссылки.

Слайдер разрабатываемого интернет-магазина содержит изображения с продаваемой продукцией, а так же логотип компании, которые изменяются автоматически по истеканию некоторым периода времени. Листинг слайдера приведен в приложении А.

Одним из самых эффективных методов повышения продаж товара является метод положительных отзывов клиентов. Разрабатываемый сайт содержит блок Обратная связь, представленный в листинге 4. При нажатии на данный блок появляется окно с формой, содержащей следующие данные: поле «Имя», поле «E-mail для связи», поле для «Сообщения». При заполнении всех указан- ных полей и отправки формы информация приходит письмом на электронную почту администратора. Блок «Обратная связь» расположен на всех страницах сайта и содержит файл feedback.php, расположенный в корневой папке.

Функции обратной связи:

– получение отзывов от клиентов;

– общение с покупателями;

<body>

<form method="POST" id="feedback-form">

<a href="index.php"><img class="close" alt="На главную страницу" title="На главную страницу" src="foto/fileclose.png"><a>

</br>

Как к Вам обращаться:

<input type="text" name="nameFF" required placeholder="имя (фамилия)" x- autocompletetype="name">

Email для связи:

<input type="email" name="contactFF" required placeholder="адрес электронной почты" x- autocompletetype="email">

Ваше сообщение:

<textarea name="messageFF" required rows="7"></textarea>

<center><input type="submit" value="отправить"> </center>

<?

if (isset ($_POST['messageFF'])) { mail ("skorikova75@mail.ru",

"заполнена контактная форма с ".$_SERVER['HTTP_REFERER'],

"Имя: ".$_POST['nameFF']."\nEmail: ".$_POST['contactFF']."\nСообщение: ".$_POST['messageFF']);

echo ('<center><p style="color: #403C3C; font-size:16pt;">Ваше сообщение получено, спасибо!</p></center>');

}

?>

</form>

</body>

Листинг 4 - Обратная связь

Пункт «Меню - Магазин» является выпадающим списком, заключающим в себе подпункты:

– сладкие пироги - shopslad.php;

– сытные пироги - shopsit.php;

– все пироги (комбинированные сладкие и сытные) - vse.php;

– наборы - Akcii.php.

На данных страницах представлен товар, который можно приобрести в пекарне «Русский каравай». Каждый продукт помещен в блок, содержащий в себе название и вес товара, а так же кнопку «Положить в корзину». Листинг блоков с товарами представлен в приложении Б.

Страницы «О пекарне», «О доставке», «Новости», «Контакты», «Акции» содержат информацию соответствующую названию.

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

После того, как посетитель нажмет на кнопку добавить в корзину, появляется всплывающее окно с надписью «Товар успешно добавлен в корзину».

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

При нажатии по данному блоку всплывет окно с формой в виде таблицы, которая содержит следующие поля: «Название», «Количество» (данное поле можно изменить: уменьшить или увеличить), «Цена», «Стоимость» (так же подсчитывается общая стоимость).

Если пользователь согласен со всем перечисленным списком, он проходит дальше к оформлению заказа, где предлагается форма для заполнения.

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

2.3 Верстка мобильного приложения

Мобильное приложение имеет схожий интерфейс с сайтом. Навигация выполнена в верхней части сайта и содержит следующие разделы: «Главная»,

«О пекарне», «Магазин», «Акция», «О доставке», «Контакты».

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

Рисунок 16 - Вид сжатого меню корзины мобильного приложения

Плюсы данной навигации заключаются в том, что при различных разрешениях экрана она имеет различный вид. Если мобильное устройство меньше 736 px, меню имеет сжатый выпадающий вид, как показано на рисунке18, а если больше данного числа пикселей меню развернутое, как показано на рисунке 17.

Рисунок 17 - Вид развернутого меню корзины мобильного приложения

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

Преимущества плоского дизайна:

– улучшает читабельность текста (Ключевое преимущество плоского дизайна - читабельность текста. Посетители могут с легкостью просматривать и воспринимать контент сайта, независимо от типа устройства, которое они используют.);

– плоский дизайн способствует SEO-оптимизации (Время загрузки страницы играет существенную роль в ранжировании результатов поиска. Именно этот фактор является одним из ключевых для успешной SEO-оптимизации. Плоский дизайн положительно влияет на время загрузки сайта, а, следовательно, помогает ресурсу продвинуться в ТОП-10 в результатах поиска.);

– современный внешний вид (Пользователи формируют свое мнение о сайте в течение 50 миллисекунд. Это означает, что проведя на странице всего лишь 0.05 секунды, человек уже понимает, нравится ему данный ресурс или нет.).

На рисунке 18 изображен интерфейс мобильного приложения.

Рисунок 18 - Дизайн мобильного приложения

Для создания интерфейса мобильного приложения были использованы средства IDE NetBeans.

NetBeans IDE - свободная интегрированная среда разработки приложений (IDE) на языках программирования Java, Python, PHP, JavaScript, C, C++, Ада и ряда других.

IDE NetBeans позволяет быстро и легко разрабатывать настольные, мобильные и веб-приложения Java, а также приложения HTML5 с использованием технологий HTML, JavaScript и CSS. IDE также предоставляет многофункциональные наборы средств для разработчиков PHP и C/C++.

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

JFrame. Контейнер будет помещен в новый пакет, который будет отображаться в узле «Source Packages».

Далее с помощью окна «Palette» внешний интерфейс приложения заполняется панелью JPanel. После этого добавляются элементы JLabel (текстовые подписи), элемента JTextField (текстовые поля) и элемента JButton (кнопки). Название JSON означает JavaScript Object Notation (представление объектов JavaScript). Как и представляет имя, он основан на способе определения объектов (очень похоже на создание ассоциативных массивов в других языках) и массивов. Использование клиент-серверных технологий с помощью создания обработчиков запросов на стороне сервера и обращения к этим функциям из мобильного приложения представлено на рисунке 19. Для передачи данных будет использоваться язык json.

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

Рисунок 19 - Архитектура клиент-сервер

Файл, содержащий код на языке json представлен в приложении В.

2.4 Расчет трудоемкости

Для того, чтобы разработать интернет-магазин на заданную тему необходимо провести следующие расчеты, как показано в таблице 3.

Таблица 3 - План Работ, проводимый для создания сайта и мобильного приложения

Наименование работ	Количество человек	Количество затраченных часов
Получение задания	1	2
Согласование сроков работы	1	1
Анализ и создание логической структуры	1	18
Реализация логической структуры сайта	1	29
Проектирование дизайна сайта и мобильного приложения	1	23
Создание графических элементов	1	27
Реализация дизайна сайта и мобильного приложения	1	33
Тестирование	1	20
Разработка наполнения	1	54
Установка сайта на сервер	1	3
Обучение персонала	1	2
Итого		210
В том числе машинного времени		207

Заключение

интерфейс мобильный дизайн программный

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

Разработанные интернет-магазин и мобильное приложение предназначены для продажи различных товаров через интернет. Областью применения данного Web-приложения выступает интернет-торговля.

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

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

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

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

Результаты проверки показали, что система работает без ошибок, имеется возможность работы с веб-сайтом во всех популярных браузерах.

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

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

Список использованных источников

1. Андерсон, С. Приманка для пользователей: создаем привлекательный сайт [Текст] / С. Андерсон; [пер. с англ. С. Силинский]. - Москва: Питер, 2013. - 240 с.

2. Брукс, Ф. Мифический человеко-месяц, или как создаются программные системы [Текст]: учеб. пособие / Символ-Плюс, 2011. - 304 с.

3. Буч, Г. Объектно-ориентированный анализ и проектирование с примерами приложений (UML 2). Третье издание [Текст]: учеб. пособие / М.: Вильямс, 2011. - 720 с.

4. Буч, Г., Рамбо, Дж. Язык UML [Текст]: руководство пользователя. / Пер. с англ. - М.: ДМК, 2012 - 750 с.

5. Бужан, В.В. Объектно-ориентированное программирование [Текст]: учебно-методическое пособие для студентов очной и заочной форм обучения / Краснодар: ИМСИТ, 2013. - 52 с.

6. Васенина, Е.А. Основы языка HTML: Учебно-методическое пособие [Текст] / Васенина, Е.А. - Киров: Издат-во ВятГГУ, 2015. - 106с.

7. Вин, Ч. Как спроектировать современный сайт: профессиональный веб-дизайн на основе сетки [Текст] / Ч. Вин. - Москва [и др.]: Питер, 2011. - 192с.

8. Вукс, Т. Наполнение сайта и авторское право [Текст] / Т. Вукс - 2011. - № 6. - С. 49-56.

9. Гагарина, Л.Г., Кокорева, Е.В., Виснадул, Б.Д. Технология разработки программного обеспечения [Текст]: М.: ИД. Форум: ИНФРА-М, 2011. - 400с.

10. Голицына, О.Л., Попов, И.И. Программирование на языках высокого уровня [Текст]: учеб. пособие для СПО / М.: Форум, 2011. - 496 с.

11. Гаевский, А. Ю. 100% самоучитель по созданию Web-страниц и Web-сайтов: HTML и JavaScript [Текст] / А. Ю. Гаевский, В. А. Романовский. - Москва: Технолоджи - 3000: Триумф, 2013. - 457с.

Размещено на Allbest.ru

...