- •Содержание
- •Введение
- •1 Аналитическая часть
- •1.1 Сбор, анализ и формирование требований к веб-приложению
- •1.2 Выбор типа сайта для разработки веб-приложения «Мобильный кофейни»
- •2 Практическая часть
- •2.1 Построение моделей функционирования веб-приложения
- •2.1.1 Построение контекстной диаграммы
- •2.1.2 Построение диаграммы вариантов использования
- •2.1.3 Построение диаграммы вариантов использования
- •2.1.4 Прототипирование пользовательского интерфейса
- •2.1.5 Архитектурная модель построения веб-приложения «Мобильные кофейни»
- •2.2 Информационное моделирование
- •2.3 Создание web-приложения «Мобильные кофейни on-line»
- •2.3.1 Создание дизайна веб-сайта
- •2.3.2 Верстка сайта
- •2.3.3 Разработка базы данных
- •2.3.4 Программирование страниц сайта
- •3. Безопасность и экологичность проекта
- •Анализ опасных и вредных факторов на рабочем месте разработчика приложения
- •Расчет шума на месте
- •3.3 Влияние экологического загрязнения улиц Ростова на размещение точек мобильных кофейн
- •Возможность задействования автомобилей мобильных. Кофейни для питания населения в условиях чс
- •Заключение
- •Список использованных источников
- •Приложение а
- •Для осуществления заказа можно выбрать кнопку «Оформить заказ». Страница «Меню» представлена на рисунке а.3.
- •Посетителю необходимо прийти в выбранное им место, оплатить заказ и получить кофе. Перейдем на вкладку Отзывы, ее можно увидеть на рисунке а.6.
- •В нижней части окна находится форма для заполнения для оставления отзыва, эту форму можно увидеть на рисунке а.7.
- •Приложение б
- •Приложение в
2.1.3 Построение диаграммы вариантов использования
После как определен функций, который предоставлять продукт, решить, каким пользователь сможет воспользоваться. Для на этапе диаграммы вариантов все функции будут структурированы.
Согласно инженерной психологии, количество элементов, может эффективно человеком, не 7. При даже очень продукт, как имеет более функций. Поэтому, того чтобы продукт был его функции должным образом структурировать. Структурирование по общим работы функций, целям, которые намерен достичь относительно контекста, в которого происходит функций.
Вторая которую нужно при проектировании интерфейса – предоставить к функционалу таким чтобы пользователи эффективно выполнить последовательности операций.
Наиболее инструментом для вышеописанных проблем создание диаграммы использования продукта. Основными диаграммы вариантов должны служить системы. Этот диаграмм позволяет список операций, выполняет система. Часто вид диаграмм диаграммой функций, что на набора таких создается список к системе и определяется выполняемых системой функций.
Диаграмма использования одна наиболее важных проектирования систем той причине, если функционал не вошел в диаграмму, он не будет реализован в системе.
Диаграмма вариантов использования включает следующие
Actor (актер). Данный используется для действующих лиц в системе. На Use Case actor обозначают системы, для чтобы определить выполняемые пользователями и взаимодействие. Обычно Actor обозначают который:
взаимодействует с или использует
передает или информацию в систему;
является по отношению к системе.
Варианты
Связи. Данный позволяет обозначать между элементами. На Use Case связи могут определены между case и actor.
Правила вариантов использования:
Диаграмма использования не временную последовательность;
Каждый использования должен инициирован действующим за некоторыми включения и расширения;
Нельзя связь между лицами
Рассмотрим функции, выполняемые которые были на этапах требований. Диаграмма использования для изображена на 5.
Рисунок 2.5 - Диаграмма вариантов использования
Как видно из диаграммы, Администратор системы может выполнять следующие функции:
создавать, редактировать страницы сайта;
просматривать отзывы и публиковать их на сайте;
редактировать каталог продукции ;
настраивать работу системы, регулировать права доступа пользователей.
Пользователь сайта может :
просматривать информацию на сайте по разделам используя панель навигации;
просматривать и отсылать отзывы;
оформить заказ на кофе. При заказе пользователь заполняет форму с данными: выбирает место кафе, список продукции, заполняет персональные данные.
Менеджер работы перезванивает для утверждения заказа и уточнения координаты выдачи заказа. Также менеджер может отследить информацию по заказу, изменить статус заказа и оформить заказ на отправку.
2.1.4 Прототипирование пользовательского интерфейса
Пользовательский интерфейс является своеобразным коммуникационным каналом, по которому осуществляется взаимодействие пользователя и компьютера. Лучший пользовательский интерфейс — это такой интерфейс, которому пользователь не должен уделять много внимания, почти не замечать его. Пользователь просто работает, вместо того, чтобы размышлять, какую кнопку нажать или где щелкнуть мышью. Если говорить о самых общих принципах проектирования пользовательских интерфейсов, то можно назвать три основных положения.
Первый принцип – прозрачность интерфейса. Интерфейс должен быть легким для освоения и не создавать перед пользователем преграду, которую он должен будет преодолеть, чтобы приступить к работе.
Второй принцип – эффективная навигация. Пользователи всегда должны знать, где они находятся, даже если они обошли главную страницу, воспользовавшись ссылкой на подчиненную, а также не должно вызывать трудностей найти нужную информацию или выполнить определенную задачу.
Третий принцип - важно помнить о целях и задачах пользователей. Необходимо планировать и действовать исходя из нужд тех пользователей, которые приобретут и будут использовать созданные продукты.
При выборе подхода для разработки интерфейса целесообразно учитывать назначение системы и ее целевую аудиторию. На основании схем, спроектированных в предыдущих пунктах, разработана структура пользовательского интерфейса.
При разработке прототипа интерфейса использовался онлайн-инструмент создания пользовательских интерфейсов Ninjamock. В конечном итоге, результат прототипирования интерфейса главной страницы выглядит следующим образом (рисунок 2.6):
Рисунок 2.6– Прототип страницы «Главная»
Основное функциональное назначение главной страницы сайта – дать представление о сфере деятельности компании. В данном случае было решено на главную страницу вывести ссылки на адреса мобильных кофеен и заказ кофе.
Прототип страницы «Кофейни» представлен на рисунке 2.7.
На странице «Кофейни» находится перечень мобильных кафе, которые действуют в городе Ростове-на-Дону. Для детализации просмотра местонахождения кафе используется интерактивная карта. При просмотре интерактивной карты, основанной на технологии геоинформационных систем (ГИС), пользователь видит только ту ее часть, которая интересует его в данный момент. При желании он может переместиться по карте в любом направлении, приблизить или удалить рассматриваемый фрагмент, получить по нему краткую справку и пр. Интерактивная карта размещена с использованием картографического русскоязычного веб-сервиса Яндекс.Карты (maps.yandex.ru). При выборе кафе на карте отображается метка, выбор которой раскрывает детальную информацию: наименование, адрес, телефон, фотографию.
Рисунок 2.7 – Прототип страницы «Кофейни»
Также дополнительной функцией является поиск месторасположений кафе на карте и формирования списка мест. Выборка происходит из базы данных, которая будет расположена на арендуемом сервере. Поиск может происходит как по адресу так и по наименованию объекта. Также можно в зависимости от выбранного кафе оформить заказ.
Для оформления заказа сначала надо ознакомиться с меню. Прототип страницы «Меню» представлен на рисунке 2.8.
Рисунок 2.8– Прототип страницы «Меню»
На странице «Меню» будет размещена структурированная информация о кофе: наименование, цена, состав кофе, емкость, вид. Поскольку товаров представлен один тип, то можно расположить их на одном уровне, а для пролистывания продукции использовать скроллинг листов.
Для того, чтобы оставить свое мнение об услуге либо кафе, не нужно тратить много времени. Для этого достаточно оставить отзыв на сайте, и немалое количество людей узнает о том, что стоит воспользоваться услугами сети кофеен. Перечень отзывов посетителей, которые пользуются услугами сети кофеен находиться на странице «Отзывы». Прототип страницы «Отзывы» можно увидеть на рисунке 9. На странице также реализована возможность добавить свой отзыв, который опубликуется после просмотра администратором сайта.
Рисунок 2.9 – Прототип страницы «Отзывы»
Прототип «Форма обратной связи» представлена на рисунке 10. Как видно из макета «Обратная связь», важной частью является форма обратной связи. Реализация должна быть довольно проста, и интуитивно понятна, для тесного контакта с посетителями сайта. Поэтому для возможности обратной связи с администратором необходимо заполнить всего четыре поля: имя, e-mail, тема сообщения и само сообщение.
После того, как пользователь подтвердит действие об отправке, кликнуть по кнопке с надписью отправить. В зависимости от результата действия появится информационное сообщение. Если не заполнено определенное поле, то выведется сообщение. Если произошла ошибка, то выведется сообщение: сообщение не отправлено. Повторите попытку еще раз. Если сообщение отправлено на адрес получателя, то появится сообщение: сообщение отправлено.
Также в форме обратной связи имеется проверка, что, предотвращает угрозу спама. Проверка берет в расчет скрытое поле, которое не заполняется человеком, но заполняется спам ботом. Фильтр настроен на проверку заполнения скрытого поля.
Рисунок 2.10 – Прототип страницы «Форма обратной связи»
Разработанный вариант прототипа содержит только пользовательский интерфейс системы. После этого прототип передается для изучения заказчику.
