Диплом (Разработка интернет - магазина и мобильного приложения ООО ПЫШКА), страница 8

Каждый продукт помещен в блок, содержащий всебе название и вес товара, а так же кнопку «Положить в корзину». Листингблоков с товарами представлен в приложении Б.Страницы «О пекарне», «О доставке», «Новости», «Контакты», «Акции»содержат информацию соответствующую названию.473.2 Оформление заказаПосле того, как посетитель нажмет на кнопку добавить в корзину, появляется всплывающее окно с надписью «Товар успешно добавлен в корзину».По завершении добавления товаров посетителю необходимо будет перейти в блок «Корзина», расположенный в правом верхнем углу, который ужевывел количество и общую стоимость покупки.При нажатии по данному блоку всплывет окно с формой в виде таблицы, которая содержит следующие поля: «Название», «Количество» (данное поле можно изменить: уменьшить или увеличить), «Цена», «Стоимость» (так жеподсчитывается общая стоимость).Если пользователь согласен со всем перечисленным списком, он проходит дальше к оформлению заказа, где предлагается форма для заполнения.После заполнения обязательных полей заказ отправляется на почту менеджера пекарни и в папку архива заказов на сервере.3.3 Верстка мобильного приложенияМобильное приложение имеет схожий интерфейс с сайтом.

Навигациявыполнена в верхней части сайта и содержит следующие разделы: «Главная»,«О пекарне», «Магазин», «Акция», «О доставке», «Контакты».Помимо меню, как представлено на рисунке 22, на главной странице внавигации располагается Корзина, представленная в виде иконки. При добавлении товара возле иконки появляется количество добавленных пирогов и ихсуммарная цена.Рисунок 22 – Вид сжатого меню корзины мобильного приложения48Плюсы данной навигации заключаются в том, что при различных разрешениях экрана она имеет различный вид. Если мобильное устройство меньше736 px, меню имеет сжатый выпадающий вид, как показано на рисунке18, а если больше данного числа пикселей меню развернутое, как показано на рисунке 23.Рисунок 23 – Вид развернутого меню корзины мобильного приложенияГлавная страница мобильного приложения выполнена с помощью плоского дизайна.

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

Именноэтот фактор является одним из ключевых для успешной SEO-оптимизации.Плоский дизайн положительно влияет на время загрузки сайта, а, следовательно, помогает ресурсу продвинуться в ТОП-10 в результатах поиска.);49– современный внешний вид (Пользователи формируют свое мнение осайте в течение 50 миллисекунд. Это означает, что проведя на странице всеголишь 0.05 секунды, человек уже понимает, нравится ему данный ресурс илинет.).На рисунке 24 изображен интерфейс мобильного приложения.Рисунок 24 – Дизайн мобильного приложенияДля создания интерфейса мобильного приложения были использованысредства IDE NetBeans.NetBeans IDE – свободная интегрированная среда разработки приложений (IDE) на языках программирования Java, Python, PHP, JavaScript, C, C++,Ада и ряда других.IDE NetBeans позволяет быстро и легко разрабатывать настольные, мобильные и веб-приложения Java, а также приложения HTML5 с использованиемтехнологий HTML, JavaScript и CSS.

IDE также предоставляет многофункциональные наборы средств для разработчиков PHP и C/C++.Для начала процесса создания интерфейса необходимо создать контейнер Java, в который будут помещены другие требуемые элементы графическогоинтерфейса. В этом действии контейнер будет создан с помощью элемента50JFrame. Контейнер будет помещен в новый пакет, который будет отображатьсяв узле «Source Packages».Далее с помощью окна «Palette» внешний интерфейс приложения заполняется панелью JPanel. После этого добавляются элементы JLabel (текстовыеподписи), элемента JTextField (текстовые поля) и элемента JButton (кнопки).3.4 Сервер: задача передачи информации в мобильное приложение,и обработка заказа из мобильного приложенияВеб-сервер (web-server) – это сервер, отвечающий за прием и обработкузапросов (HTTP-запросов) от клиентов к веб-сайту.В качестве клиентов обычно выступают различные веб-браузеры.

В ответ веб-сервер выдает клиентам HTTP-ответы, в большинстве случаев, вместе сHTML-страницей, которая может содержать: всевозможные файлы, какие-тоизображения, медиа-поток или любые другие данные.Также веб-сервер выполняет исполнение скриптов, например, таких какCGI, JSP, ASP и PHP, которые отвечают за организацию запросов к сетевымслужбам, базам данных, доступу к файлам, пересылке электронной почты идругим приложениям электронной коммерции.Хостинг – это место, где физически находится сайт.

Ресурс можно поместить на личном ПК, но качественный хостинг требует глубоких познаний вадминистрировании. Поэтому целесообразней приобрести хостинг у специализированных компаний – хостинг-провайдеров.Такие компании разместят сайт на сервере, на котором установлено специальное ПО. Как правило, хостер берёт на себя обязанности по техподдержкехостинга и администрированию сервера.Для разрабатываемого сайта был выбран хостинг http://fozzy.com/.

Данный хостинг предоставляет свою услугу платно – 1300 рублей в год, котораявключает 10 Гб, 1 сайт, 1 базу данных, поддержку MySQL, PHP, SQL, Perl, еже51дневный бэкап, фильтрацию спама, а так же хостинг оптимизирован для WordPress, Joomla, Drupal, UMI.CMS, NetCat и SSH/ FTP.Домен (доменное имя) – это адрес ресурса, который будут вводить пользователи при обращении к сайту. Адрес домена состоит из двух частей: доменов первого и второго уровня.По международному соглашению, каждой стране выделили доменноеимя первого уровня, обозначающее принадлежность сайта к определённомугосударству: .ru, .by, .uk, .ua, .fr и т.д.Также существует несколько доменов первого порядка связанных снаправлением деятельности сайта: .gov – государственные, .com – коммерческие, .edu – образовательные и прочие.

Домен второго уровня представляет собой название сайта. Купить домен можно в уполномоченной организации, регистраторе доменов.Домен для разрабатываемого сайта был куплен у регистратора hostinger.ru за 525 рублей в год. Доменное имя для интернет-магазина «Русский каравай» было выбрано следующее – pirogdv.ru.Передача информации в мобильное приложение и обработка заказовосуществляется с помощью объекта JSON.JSON – простой, основанный на использовании текста, способ хранить ипередавать структурированные данные. С помощью простого синтаксиса можно хранить данные, начиная от одного числа до строк, массивов и объектов, впростом тексте.

Также можно связывать между собой массивы и объекты, создавая сложные структуры данных.После создания строки JSON, ее легко отправить другому приложениюили в другое место сети, так как она представляет собой простой текст.JSON имеет следующие преимущества:– компактность;– лёгкость в составлении и прочтении как человеком, так и компьютером;52–легкость преобразования в структуру данных для большинства языковпрограммирования (числа, строки, логические переменные, массивы и так далее);– многие языки программирования имеют функции и библиотеки длячтения и создания структур JSON.Название JSON означает JavaScript Object Notation (представление объектов JavaScript).