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

Целью работы является реализация онлайн примерочной, как приложения для социальной сети ВКонтакте.
Объектом исследования являются технологии построения веб-служб. Предметом исследования является возможность реализации онлайн примерочной для социальных сетей.
В соответствии с поставленной целью, выделенным объектом и предметом исследования необходимо решить следующие задачи:
 рассмотреть имеющиеся источники информации по данной теме;
 изучить принципы работы веб-приложений;
 проанализировать распространённые виды веб-приложений, реализованных как IFrame-приложения;
 рассмотреть, изучить и применить технологии для создания
веб-приложения;
 рассмотреть библиотеки и интерфейсы: jQuery, LibCanvas;
 создать IFrame-приложение;
 разместить приложение на удаленном сервере;
 провести работы ...

Введение
Глава 1. Теоретические аспекты проектирования веб-приложений
1.1. Веб-приложение
1.2. Категории веб-приложений
1.3. Технологии разработки веб-приложений
Выводы по главе 1
Глава 2. Разработка веб-приложения
2.1. Анализ рынка прикладных приложений
2.2. Постановка задачи
2.3. Создание веб-приложения
2.4. Размещение веб-приложения на удаленном сервере
2.5. Работа с приложением
Выводы по главе 2
Заключение
Список используемой литературы
Приложения

Сегодня с появлением онлайн сервисов, пользователи все чаще отдают предпочтение онлайн службам. Создание и популяризация веб-приложений стали возможным благодаря бурному развитию сети Интернет, коснувшемуся всего мира. Развитие глобальной сети позволило сделать множество сайтов с применением различных технологий. Помимо прочих типов веб-ресурсов появились и популярные сегодня социальные сети.
С появлением социальных сетей поведение пользователей в сети Интернет сильно изменилось. Теперь пользователи сети тратят существенную часть времени на использование социальных сетей, а также делают это регулярно.
Есть большое количество приложений, с различными областями применения, полезностью и популярностью, в том числе игры, сервисы знакомств, новостные сервисы, подбора причесок, онлайн-примерочны е и другие программы.
Складывающая обстановка на информационном рынке также обусловила рост популярности и различных веб-приложений. Среди
веб-приложений также встречаются бизнес-приложения, музыкальные приложения, приложения для фото или видеосъемки, обработки информации, шагомеры, измерители скорости и в том числе сервисы для онлайн примерки одежды.
Анализ имеющихся приложений в социальных сетях показал, что большинство из них носят развлекательный характер, а полезные приложения находятся в недостатке.
Учитывая дефицит полезных приложений, в том числе онлайн примерочной, в качестве веб-приложения для социальных сетей выбрана разработка онлайн примерочной.
Все вышесказанное обуславливает выбор темы для выпускной квалификационной работы «Разработка приложений для социальных сетей».

анализ кода на лету;
предотвращение ошибок в коде автоматизированными средствами рефакторинга для PHP и JavaScript;
автодополнение кода PHP 5.3, 5.4 и 5.5, включая генераторы, сопрограммы, пространства имен, замыкания, и другие элементы;
полноценный SQL-редактор с возможностью редактирования полученных результатов запросов;
подсветка кода;
расширенная конфигурация форматирования кода;
детектор дублируемого кода;
распознавание кода, запакованного в PHAR-архивы;
поддержка стандартов оформления кода(Drupal, Symfony2, Zend)
поддержка редактирования шаблонов Smarty(подсвечивание синтаксических ошибок, автодополнение функций и атрибутов Smarty, автоматическая вставка парных скобок, кавычек и тегов);
поддержка MVC представления для Symfony2 и Yii фреймворков;
поддержка SQL и баз данных(Рефакторинг схемы базы данных, генерация скриптов миграции схемы, экспорт результатов выполнения запроса в файл или буфер обмена, редактирование хранимых процедур и другое);
удаленное развертывание приложений и автоматическая синхронизация с использованием FTP, SFTP, FTPS и других протоколов;
интеграция с системами управления версиями(Git, CVS, SVN), позволяющая совершать commit, merge, diff и другие действия непосредственно из PhpStorm;
локальная история изменений в коде.
Любое приложение нуждается в тестировании. В процессе тестирования помогают некоторые инструменты: панель разработчика в браузере, дополнительные плагины для браузеров, локальные сервера.
Написание приложения
При использовании онлайн примерочной в самой социальной сети, следует выбрать его тип как IFrame-приложение. Это позволит запускать приложение находящееся на удаленном сервере посредством создания системой контейнера, использовать любые технологии и обмениваться данными с ВКонтакте с помощью JavaScript API.
Проект содержит 6 файлов: index.php, main.css, db.php, sidebar.js, viewer.js и файл jquery2.min.js, который является библиотекой.
Все файлы распределены по папкам, также в проекте присутствует папка с графическими элементами.
Написание приложения было начато с общей разметки, в соответствии с приведенным выше макетом. Для этого были использованы стандартные блочные элементы html <div>,<p>, строчные теги <span>, контейнерные <img>, их свойства и атрибуты, которые содержатся в главном файле index.php. Его код представлен в приложении 1.
Файл стилевого оформления main.css, код которого представлен в приложении 2, содержит инструкции для корректного отображения информации на экране. Для этого использованы такие команды, как margin, padding, color, width, height, float, position и другие.
В приложении 3 содержится файл db.php для взаимодействия с базой данных. Он реализуется посредством ajax-запроса, чтобы не вызвать перезагрузки страницы. В две переменные определяются элементы из GET-запроса, чтобы формировать выборку из базы данных. Далее в переменных db_host, db_name, db_user, db_pass формируются параметры запроса и в link из функции mysql_connect() возвращается контекст базы данных.
После соединения с базой данных вызывается mysql_query() с параметром запроса и результат выполнения запоминается в переменную result. Полученный результат разбирается циклом while() и выдается в виде блоков <div> с событиями, реагирующими на нажатие мыши. В случае если список пуст, выдается соответствующее сообщение.
Приложение 4 содержит в себе код файла sidebar.js, который отвечает за события меню, его отображение, корректную обработку событий изменения телосложения манекена, управления полом манекена, видом камеры и списком надетых вещей. Также именно в нем содержится ajax-запрос на выборку вещей из базы данных.
За вывод информации о пользователе отвечает файл viewer.js (Приложение 5). API команды реализованы для ВКонтакте и могут быть расширены для других социальных сетей. Файл проверяет сходство адреса хоста со строкой vk.com, и если они равны выполняет команды для вывода имени, фамилии и изображения-аватара пользователя.
В дополнение к пяти файлам в проекте используется база данных. Сейчас в базе данных 1 таблица, но вполне возможно расширить ее или добавить новую таблицу с объединяющим ключом, если появятся новые поля, такие как адрес продавца, имеется ли товар в наличии или другие поля. Действующая структура базы данных представлена на рисунке 23.
Скомпоновав все пять файлов, базу данных и файлы с изображениями был получен готовый результат, представленный на рисунке 24.
Рис.23. Структура базы данных
Рис.24. Начальный вид приложения
По шагам процесс примерки можно разбить на насколько шагов.
1. Запуск приложения. Все элементы займут свои первоначальные места.
2. Выбор типа телосложения и пола манекена. От этого в дальнейшем будет зависеть количество одежды.
3. Выбор типа одежды из меню справа и нажатие на него. В этом случае произойдет запрос в базу на выдачу имеющихся экземпляров одежды.
4. Выбор одежды посредством нажатия на него. В этом случае на манекен сверху накладывается картинка, а в список надетых вещей добавляется выбранное название с возможностью снять одежду.
На данный момент реализована возможность просмотра выбираемой вещи с помощью мыши. В дальнейшем можно реализовать событие наведения мыши и отображение при этом одежды как полупрозрачной. Это позволит обогатить функционал веб-сервиса. Данную возможность стоило бы отнести к третьему шагу процесса примерки.
В блоке 2 происходит вывод информации о пользователе. Если по какой-либо причине имя и фамилия пользователя оказались слишком длинными, можно скрыть часть строки, предварительно проверив ее длину функцией int strlen(var string), которая возвращает количество символов в передаваемой строке.
Рис.25. Вывод информации о пользователе
Код написан в функциональном стиле, логика часто опирается на события мыши, которые генерирует пользователь. С целью уменьшения кода и расширения функциональных возможностей приложения целесообразно провести рефакторинг кода. В этом случае можно придерживаться объектно-ориентированной модели, что упростит сопровождение программы.
В дополнение к увеличению удобочитаемости кода, можно добавить, например, статистику нажатий на определенную вещь, разграничить количество нажатий по ip-адресам, количество нажатий за одну сессию.
На данный момент проект не содержит файла .htaccess, однако, такой файл в будущем позволит увеличить защищенность приложения, ограничив доступ к тем директориям, доступ к которым пользователи иметь не должны.
Отладка и тестирование
Для отладки HTML, CSS и JavaScript кода удобно использовать консоли разработчика встроенные в браузеры, которые позволяют:
просматривать исходный код страницы;
менять код страницы и наблюдать изменения, не перегружая страницу;
производить поиск по коду;
контролировать события динамических элементов;
просматривать cookie-файлы;
просматривать локальные хранилища данных;
просматривать использующиеся на странице медиа-файлы;
контролировать количество времени, затрачиваемое на обработку запроса;
выводить на консоль ошибки, их количество и местоположение.
Для тестирования PHP можно воспользоваться таким набором инструментов разработки как Денвер (Denwer).
Денвер (от сокр. Д.н.в.р — джентльменский набор веб-разработчика) — набор дистрибутивов и программная оболочка, предназначенные для создания, тестирования и отладки сайтов (или веб-приложений, и другого динамического содержимого интернет-страниц) на локальном компьютере под управлением Windows систем.
В базовый пакет Denwer входят следующие утилиты:
веб-сервер Apache с поддержкой SSI, SSL, mod_rewrite, mod_php;
интерпретатор PHP с поддержкой GD, MySQL, SQLite;
СУБД MySQL с поддержкой транзакций;
система управления виртуальными хостами, основанная на шаблонах;
система управления запуском и завершением работы Денвера;
панель phpMyAdmin для администрирования СУБД;
эмулятор sendmail и сервер SMTP с поддержкой работы совместно с PHP, Perl, Parser и другими языками программирования.
При реализации онлайн примерочной будет использоваться консоли разработчика двух браузеров: Google Chrome и Mozilla Firefox и плагин firebug, которые позволят контролировать работу клиентской части.
Для тестирования кроссбраузерности пользовательского интерфейса к использованию Google Chrome и Mozilla Firefox добавятся современные версии браузеров Internet Explorer, Opera.
2.4. Размещение веб-приложения на удаленном сервере
Для запуска приложения необходимо загрузить файлы проекта на сервер. Для решения этой задачи следует выбрать тип хостинга, тариф и загрузить приложение с помощью менеджера файлов.
Типы хостинга
Хостинг(от англ. hosting) подразумевает пространство и вычислительные мощности.
Обычно хостинг входит в пакет по обслуживанию сайта и подразумевает как минимум услугу размещения файлов сайта на сервере, на котором запущено программное обеспечение, необходимое для обработки запросов к этим файлам (веб-сервер). Как правило, в обслуживание уже входит предоставление места для почтовой корреспонденции, баз данных и файлового хранилища.
Одним из критериев выбора хостинга является используемая операционная система, поскольку от этого зависит программное обеспечение, которое будет поддерживать функциональность тех или иных сервисов. Важным аспектом описания хостинга является наличие тех или иных служб и возможностей, таких как поддержка CGI-интерфейсов, конфигурационных файлов и баз данных.
По классификации существуют следующие основные типы хостингов:
бесплатный хостинг;
виртуальный (shared) хостинг;
виртуальный выделенный сервер (VPS);
выделенный сервер.
Различия у этих типов хостингов в ограничениях дискового пространства, максимальной нагрузке на канал, количестве сайтов, которые можно разместить в рамках одной учетной записи, количестве FTP пользователей и количестве баз данных.
На начальных этапах целесообразно выбрать бесплатный тариф, так как на сегодняшний день бесплатный хостинг предоставляет практически полный набор услуг и проект не зависит от такой характеристики, как скорость индексирования страниц В дальнейшем можно перейти на виртуальный хостинг.
Оставшиеся два тарифа следует выбирать только когда проект действительно большой, для самостоятельного сопровождения хостинга или гибких настроек по выбору, например, программного обеспечения.
Одним из подходящих вариантов может быть бесплатный тариф хостинга hostinger. Основными его достоинствами являются:
отсутствием рекламы при выборе бесплатного тарифа;
отсутствие ограничений по нагрузке на сайт;
достаточное количество места для размещения требуемых файлов;
возможность исполнения на сервере php-скриптов.
Данный хостинг-провайдер предоставляет онлайн менеджер для загрузки файлов. Им можно воспользоваться, но для полного контроля файлов на удаленном сервере стоит воспользоваться отдельным приложением, настроив ftp-доступ.
Размещение файлов на сервере
После того как хостер и тарифный план выбраны, нужно зарегистрировать личный кабинет и организовать доступ к серверу.
Для установления ftp-соединения используем файловый менеджер, например, FileZilla.
FileZilla — это свободный многоязычный FTP-клиент для Microsoft Windows, Mac OS X и Linux. Он поддерживает FTP, SFTP, и FTPS (FTP через SSL/TLS) протоколы и предоставляет следующие возможности:
поддержка FTP, FTP через SSL/TLS (FTPS) и SSH File Transfer Protocol;
кроссплатформенность;
поддержка IPv6;
поддержка IDN, в том числе нелатинских доменных зон (IDN.IDN);
многоязычность;
поддержка приема и передачи больших файлов >4GB;
продвинутый менеджер сайтов и очередь загрузки;
поддержка Drag-and-drop;
настраиваемые ограничения скорости;
фильтры имен файлов;
мастер сетевой настройки;
удаленное редактирование файлов;
keep-alive режим;
поддержка HTTP/1.1, SOCKS 5 и FTP-Proxy.
Для размещения файлов приложения на сервере необходимо выполнить следующие действия.
1. После скачивания и установки FileZilla, запустить программу.
2. В главном меню программы выбрать Файл → Менеджер сайтов.
3. В появившемся окне нажать на кнопку Новый сайт.
4. Ввести в поле Хост ip-адрес веб-сайта.
5. Изменить тип входа с анонимного на нормальный.
6. Ввести имя пользователя ftp и пароль (при первом соединении пароль нужно сгенерировать в личном кабинете хостинга).
7. Нажать кнопку Соединиться.
8. Выделить файлы и перетащить в папку на хостинге.
9. Сделать дамп базы данных.
10. Войти в личный кабинет и импортировать полученный дамп.
11. Отредактировать файл db.php, изменив переменные db_host, db_name, db_user, db_pass для корректного соединения с базой данных.
Чтобы удостовериться в работоспособности приложения, нужно проследовать по домену, указанному во время регистрации хостингового тарифа (http://dress.url.ph). После чего открыть панель разработчика в браузере на вкладке Network и проанализировать заголовки ответов, которые пришли при загрузке страницы приложения. Если код ответа 200, то все работает правильно.
Теперь необходимо связать файлы, размещенные на удаленном сервере хостингера с контейнером приложения ВКонтакте.
Для этого нужно зарегистрировать приложение, выбрав его тип как Standalone. В этом случае веб-приложение, находящееся на удаленном сервере, будет использовать для запуска контейнер, предусмотренный системой, для правильной работы всех функций приложения и обмена данными с ВКонтакте с помощью JavaScript API.
После выбора типа приложения следует запустить приложение и в меню выбрать опцию управления сервисом, перейти на вкладку настройки и указать в поле адрес IFrame URL главной страницы приложения. Остальные файлы будут доступны ввиду относительных путей.
Другие настройки являются опциональными и не оказывают критического влияния на работу веб-сервиса.
2.5. Работа с приложением
Чтобы начать пользоваться сервисом необходимо набрать в адресной строке браузера dress.url.ph или выполнить вход на сайте vk.com и запустить приложение по адресу http://vk.com/app3873054.
После проделанных действий на экране появится начальный вид онлайн примерочной (рис. 26).
Внутри приложения есть настройки, которые позволяют пол манекена (рис. 27), телосложение (рис. 28) и вид камеры (рис. 29).
Для взаимодействия с меню в правой части приложения предназначены стрелки, при нажатии на них происходит эффект перелистывания (рис. 30).
При наведении на раздел меню, его вид изменяется (рис. 31), при нажатии - выводится список имеющихся вещей (рис. 32) в данной категории или уведомление о том, что вещей не найдено (рис. 33).
На рисунках 34 и 35 изображено надевание вещи на мужской и женский манекен.
Рис.26. Начальный вид примерочной
Рис.27. Мужской манекен
Рис.28. Телосложение «полный»
Рис.29. Вид камеры «сзади»
Рис.30. Эффект перелистывания
Рис.31. Изменение вида раздела меню
Рис.32. Список вещей раздела джинсы
Рис.33. Уведомление об отсутствии вещей в данном разделе
Рис.34. Одежда на женском манекене
Рис.35. Одежда на мужском манекене
Для выявления ошибок в проектировании интерфейса была выбрана фокус-группа среди однокурсников. В задании по тестированию предлагалось выбрать манекен, надеть и снять на него вещи.
Проведенные тесты показали, что использование функциональных элементов веб-сервиса интуитивно понятно для пользователей,
не перегружает память пользователей и не требует долговременного обучения пользованию.
Выводы по главе 2
Анализ рынка программного обеспечения, предлагающий возможности виртуальных примерочных, показал на сегодняшний момент наличие дефицита подобного рода проектов. Кроме того, имеющиеся примерочные не покрывают всей аудитории и не обладают достаточным функционалом.
Анализ построения веб-приложений для социальных сетей показал, что для таких приложений работают практически те же принципы, что и для построения обычных веб-приложений. Однако существуют особенности обработки информации, а клиентская и серверная части разведены.
Во второй главе были обозначены требования к создаваемому приложению. Указана последовательность разработки приложения, его архитектура и графическая составляющая.
Запланированное программное обеспечение было использовано в написании кода программы, его отладке и тестировании.
С помощью указанных технологий и программ было произведено размещение готового проекта на рабочем сервере и связывание файлов приложения с контейнером в социальной сети ВКонтакте для реального функционирования программы.
Апробация приложения пользователями показала отсутствие сложностей в использовании, и следовательно верного расположения элементов и их количества.
Заключение
Веб-приложение — клиент-серверное приложение, в котором клиентом выступает браузер, а сервером — веб-сервер. Логика веб-приложения распределена между сервером и клиентом, хранение данных осуществляется, преимущественно, на сервере, обмен информацией происходит по сети.
В сети существует большое количество различных типов приложений с различной степенью полезности, что определяется актуальными условиями. Одним из таких типов является онлайн примерочная.
Все веб-технологии, популярные на сегодняшний день, удобны в использовании и выбираются разработчиками закономерно.
Подводя итоги проделанной работы, следует отметить, что были решены следующие задачи:
рассмотрены имеющиеся источники информации по данной теме;
изучен принцип работы веб-приложений;
рассмотрены и изучены веб-технологии;
проанализированы виды веб-приложений;
сформировано техническое задание для построения приложения;
предусмотрены работы по отладке и тестированию на этапе разработки;
создано IFrame-приложение;
файлы приложения размещены на удаленном сервере.
Выпускная квалификационная работа дает общее понятие о веб-приложении и его видах, о технологиях создания веб-приложений, их разработке и сопровождении. При построении веб-приложения была выполнена постановка задач, вследствие выполнения которых было создано веб-приложение. Таким образом поставленная цель работы была достигнута.
Несомненно, данное направление является перспективным в обозримом будущем. Об этом говорят многие факторы, такие как размеры поступающих инвестиций, создание специализированных систем для построения социальных сетей и распространение социальных сетей на сферы человеческой жизни. Тем не менее, архитектура приложения построена таким образом, что приложение может работать и вне социальной сети как обычное приложение.
Использованные в приложении технологии позволяют в дальнейшем улучшать элементы взаимодействия с пользователем, наращивать функционал клиентской и серверных частей, использовать функции социальных сетей и накапливать информацию о пользователях, их браузерах, времени посещения и элементах, часто используемых пользователями.
Список используемой литературы
1. Дронов В., HTML5, CSS3 и Веб 2.0.Разработка современных Веб-сайтов. БХВ-Петербург, 2011 – 414 с.
2. Чои В., Как спроектировать современный сайт, 2011 — 127 с.
3. Сидерхолм Д., CSS3 для веб-дизайнеров, 2012 – 125 с.
4. Сухов К., HTML5 путеводитель по технологии, 2 издание, 2013 - 352 с.
5. ГудманД.,JavaScript и DHTML. Сборник рецептов. – М.: Вильямс, 2010. – 528 с.
6. Бенедетти Р., Крэнли Р., Изучаем работу с jQuery, 2012. – 508 с.
7. Фленов М., Веб-сервер глазами хакера. – СПб.: БХВ-Петербург, 2010. – 288 с.
8. Олищук А.В., Чаплыгин А.Н., Разработка ВЕБ-приложений на PHP 5. Профессиональная работа. – М.: Вильямс, 2011. – 352 с.
9. Кузнецов М. В., Симдянов И. В., MySQL 5 в подлиннике. – СПб.: БХВ-Петербург, 2010. – 1024 с.
10. Кузнецов М. В., Симдянов И. В., Объектно-ориентированное программирование на PHP. – СПб.: БХВ-Петербург, 2010. – 608 с.
11. Кузнецов М. В., Симдянов И. В., Головоломки на PHP для хакера. – СПб.: БХВ-Петербург, 2010. - 464 с.
12. Дари К., Бринзаре Б., Черчез Тоза Ф., Бусика М.,AJAX и PHP: разработка динамических веб приложений. - М.: Вильямс, 2013. - 336 с.
13. Маклафлин Б., Изучаем Ajax — СПб.: Питер, 2013. – 659 с.
14. Крейн Д., Паскарелло Э., Джеймс Д., AJAX в действии: технология. — Asynchronous JavaScript and XML. — М.: Вильямс, 2011. —640 с.
15. Хольцнер С., Ajax Библия программиста. — М:Диалектика, 2012 — 553с.
16. Википедия - свободная энциклопедия // [Электронный ресурс] / URL: http://ru.wikipedia.org/wiki/ (Дата обращения: 11.10.2013).
17. Онлайн обучение веб-технологиям // [Электронный ресурс] / URL: http://htmlweb.ru/ (Дата обращения: 04.11.2013).
18. Официальный сайт консорциума всемирной паутины // [Электронный ресурс] / URL: http://www.w3.org/ (Дата обращения: 04.11.2013).