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

 

Содержание

Введение

Глава 1. Назначение сервиса для создания визуального интерфейса и основные требования к нему

.1 Предметная область. Системные службы хостинг-компании как целевая аудитория сервиса

.2 Общие требования к сервису

.3 Критерии оценки интерфейса и направления разработки

Глава 2. Проектирование интернет-сервиса

.1 Обзор существующих решений

.2 Выбор архитектуры сервиса

.3 Общая схема функционирования интернет-сервиса

Глава 3. Реализация интернет-сервиса

.1 Выбор языка программирования

.2 Выбор коммуникационных методов

.3 Выбор среды разработки

.4 Реализация проекта

.5 Реализация отдельных визуальных элементов

Глава 4. Эффективность системы

.1 Оценка интерфейса

.2 Апробация интернет-сервиса в одной из хостинг-компаний

Заключение

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

Приложения

Введение

Широкое распространение интернета и повсеместное его использование порождает потребность в большом спектре специальных услуг. Наиболее важная из них - размещение и предоставление информации («Хостинг»). Хостинг-компании предоставляют клиенту услуги по размещению информации на сервере. Для обработки и отображения этой информации в глобальной сети Интернет компания также предоставляет ряд вычислительных мощностей. В условиях современной хостинг-компании типичной задачей является решение проблем клиентов. Этим занимается отдел технической поддержки. Данный отдел должен следить за состоянием работы хостинга клиентов. Если на одном из них возникает проблема, то специалисты устраняют причину сбоя на хостинге. Работать в основном приходиться через командную строку в операционной системам Linux или Unix. Такая форма работы предоставляет все необходимые возможности, но наряду с этим создаёт ряд ограничений, которые замедляют работу технического специалиста.

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

Для достижения поставленной цели были решены следующие задачи:

проведён анализ и классификация основных команд, с которыми проходиться работать техническому специалисту;

проведено исследования аналогичных систем с подобной реализацией;

проведено проектирование ресурса;

реализован интернет-сервис;

проведена апробация сервиса в одной из хостинг-компании.

1. Назначение сервиса для создания визуального интерфейса и основные требования к нему

1.1 Предметная область. Системные службы хостинг-компании как целевая аудитория сервиса

Цель создания сервиса - повышение эффективности работы технического специалиста хостинг-компании.

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

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

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

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

Хостинг-компания, имеющая типичную структуру, состоит из 5 отделов:

отдел клиентского обслуживания;

отдел поддержки клиентов;

отдел маркетинга;

отдел рекламы;

отдел системного администрирования;

отдел разработок.

Компания, в рамках которой апробировался ресурс, имеет такую же структуру.

При возникновении проблем с хостингом клиента сотрудники компании, а именно, технические специалисты, должны своевременно оказать поддержку клиенту и устранить проблему на хостинге. Процесс взаимодействия клиента с техническим специалистом организован через систему, которая позволяет оперативно принимать заявки от клиентов (тикетовую систему; в данной работе речь идёт о компании, использующей систему HelpDesc). Все заявки поступают на адрес [email protected] <mailto:[email protected]>, затем они обрабатываются тикетовой системой и перекладываются в общую очередь.

На момент обработки заявки технический специалист использует различное программное обеспечение для решения проблемы на хостинге клиента. В основном используется командная строка Linux и работа ведётся по протоколу SSH. SSH (англ. SecureShell - «безопасная оболочка») - сетевой протокол прикладного уровня, позволяющий производить удалённое управление операционной системой и туннелирование TCP-соединений (например, для передачи файлов). Сходен по функциональности с протоколами Telnet и rlogin, но, в отличие от них, шифрует весь трафик, включая и передаваемые пароли. SSH допускает выбор различных алгоритмов шифрования. SSH-клиенты и SSH-серверы имеются для большинства сетевых операционных систем.позволяет безопасно передавать в незащищенной среде практически любой другой сетевой протокол, таким образом, можно не только удаленно работать на компьютере через командную оболочку, но и передавать по шифрованному каналу звуковой поток или видео (например, с веб-камеры). На рис. 1.1 иллюстрируется работа SSH.

Работа SSH

Рис. 1.1 Удалённое взаимодействие по протоколу SSH

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

1.2 Общие требования к сервису

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

Первичные требования к автоматизации представлены ниже:

удобство использования интернет-сервиса;

работоспособность интернет-сервиса на всех компьютерах;

сохранение скорости работы.

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

язык UML. UML является языком графического описания для объектного моделирования в области разработки программного обеспечения;

диаграмма USE CASE. Задаёт внешнее представление процессов организации;

диаграмма IDEF. Позволяет отобразить общую функциональную структуру ресурса и провести её декомпозицию.

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

Организация работы отдела технической поддержки

Рис. 1.2 Организация работы отдела технической поддержки

На рис. 1.2 представлена организационная структура работы ресурса в виде USE CASE модели. Данная диаграмма позволяет наглядно продемонстрировать организационную часть отдела технической поддержки в целом, что позволит рассмотреть данный объект как единое целое с чётко выраженными функциональными и организационными элементами.

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

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

.3 Критерии оценки интерфейса и направления разработки

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

скорость работы пользователей;

количество человеческих ошибок;

скорость обучения;

субъективное удовлетворение.

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

Кроме того, есть ряд методик и положения позволяющих оценить отдельные параметры интерфейса / Джеф Раскин /. Это:

модель GOMS («Goals, Operators, Methods, and Selection rules»), позволяющая оценить скорость рабочего интерфейса;

ряд когнитивных характеристик, на которые должно ориентироваться взаимодействие (память, внимание и т.д.);

некоторые правила оценки интерфейса с информационной точки зрения.

Проанализируем эффективность командной строки по модели GOMS. По данной модели мы вычислим время, необходимое на выполнение того или иного действия (например, «перемещение руки к клавиатуре и набор буквы»). Перечисления операций и время, затрачиваемое на выполнение операции, начинается из списка жестов модели GOMS:

Табл. 1.1 Список жестов по модели GOMS

K = 0.2 сНажатие клавиши. Время, необходимое для того, чтобы нажать клавишу.P = 1.1 сУказание. Время, необходимое пользователя для того, чтобы указать на какую-то позицию на экране монитора.H = 0.4 сПеремещение. Время, необходимое пользователю для того, чтобы переместить руку с клавиатуры на ГУВ или с ГУВ на клавиатуру.M = 1.35 сМентальная подготовка. Время, необходимо пользователю для того, чтобы умственно подготовиться к следующему шагу.RОтвет. Время, в течение которого пользователь должен ожидать ответ компьютера.

Жесты по модели GOMS подчиняются объявленным заранее правилам, которые коррелируют оценку времени. Всего таких правил шесть. Нумерация правил начинается с нуля:

Табл. 1.2 Список правил по модели GOMS

Правило #0 Начальная расстановка операторов MОператоры M следует устанавливать перед всеми операторами K (нажатие клавиши), а также перед всеми операторами P (указание с помощью ГУВ), предназначенными для выбора команд; но перед операторами P, предназначенными для указания на аргументы этих команд, ставить оператор M не следует.Правило #1 Удаление ожидаемых операторов MЕсли оператор, следующий за оператором M, является полностью ожидаемым с точки зрения оператора, предшествующего M, то этот оператор M может быть удален. Например, если вы перемещаете ГУВ с намерением нажать его кнопку по достижении цели движения, то в соответствии с этим правилом следует удалить оператор M, устанавливаемый по правилу 0. В этом случае последовательность P M K превращается в P K.Правило #2 Удаление операторов M внутри когнитивных единицЕсли строка вида M K M K M K... принадлежит когнитивной единице, то следует удалить все операторы M, кроме первого. Когнитивной единицей является непрерывная последовательность вводимых символов, которые могут образовывать название команды или аргумент. Например Y, перемещать, Елена Троянская или 4564.23 являются примерами когнитивных единиц.Правило #3 Удаление операторов M перед последовательными разделителямиЕсли оператор K означает лишний разделитель, стоящий в конце когнитивной единицы (например, разделитель команды, следующий сразу за разделителем аргумента этой команды), то следует удалить оператор M, стоящий перед ним.Правило #4 Удаление операторов M, которые являются прерывателями командЕсли оператор K является разделителем, стоящим после постоянной строки (например, название команды или любая последовательность символов, которая каждый раз вводится в неизменном виде), то следует удалить оператор M, стоящий перед ним. (Добавление разделителя станет привычным действием, и поэтому разделитель станет частью строки и не будет требовать специального оператора M.) Но если оператор K является разделителем для строки аргументов или любой другой изменяемой строки, то оператор M следует сохранить перед ним.Правило #5 Удаление перекрывающих операторов MЛюбую часть оператора M, которая перекрывает оператор R, означающий задержку, связанную с ожиданием ответа компьютера, учитывать не следует.

Предположим, что командная строка у технического специалиста уже открыта, программа ожидает ввод команды от пользователя. Для примера выберем команду Traceroute, которая предназначена для определения маршрутов следования данных в сетях TCP/IP. Команда будет выглядеть следующим образом:traceroute -I ресурс

, где под ресурсом подразумевается имя домена, либо же его ip-адрес.

Табл. 1.3 Анализ эффективности интерфейса по модели GOMS

HПеремещение рук к клавиатуреHKKKKKKKKKKKKKKKKKKKKKKKВвод 25 символовHKKKKKKKKK KKKKKKKKKKKKKKKНажатие клавиши <Enter>

В данном примере нажатие клавиши <Enter> завершает часть анализа, касающуюся метода. Руководствуясь нулевым правилом GOMS поставим оператор М перед всеми операторами К:M K M K M K M K M K M K M K M K M K M K M K M K M K M K M K M K M K M K M K M K M K M K M K M K M K M K

Правило 2 предписывает удалять операторы M в середине цепочек. После применения этого правила остаётся следующая запись:M K K K K K K K K K K K K K K K K K K K K K K K K K M K

Заменим операторы на соответствующие временные интервалы:+ M + K + K + K + K + K + K + K + K + K + K + K + K + K + K + K + K + K + K + K + K + K + K + K + K + K + M + K = 0.4 + 1.35 + (0.2 * 25) + 1.35 + 0.2 = 8.3 с

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

2. Проектирование интернет-сервиса

2.1 Обзор существующих решений

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

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

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

Приведём анализ самых популярных WebOS:

Рабочий стол eyeOS

Рис. 2.1 Рабочий стол eyeOS

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

Рабочий стол myGoya

Рис. 2.2 Рабочий стол MyGoya

Если интерфейс eyeOS похож на настольную операционную систему, то в myGoya интерфейс некоторых составляющих окон реализован в виде прозрачных элементов. Такой шаг разработчиков данной WebOS объясним с точки зрения привыкания пользователя к рабочему столу. С помощью технологий Web 2.0 интерфейс myGoya можно смело сравнивать с Windows.

Рабочий стол GlideOS

Рис. 2.3 Рабочий стол GlideOS

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

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

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

2.2 Выбор архитектуры сервиса

Работа интернет-сервисов сконцентрирована вокруг клиент-серверной архитектуры. Обработка различных команд будет возложена на серверную часть, а обработка интерфейса будет производиться в браузере. На следующем рис. 2.X изображена архитектура клиент-сервер:

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

Рис. 2.4 Иллюстрация архитектуры клиент-сервер

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

В качестве HTTP-сервера будет выбран web-сервер Apache, на который будет возлагаться обработчика всех интернет-запросов, пришедших от пользователя. Web-сервер Apache умеет работать с нужными для разрабатываемого интернет-сервиса компонентами, а именно:

PHP (язык программирования)

MySQL (база данных)

Главная особенность web-сервера Apache состоит в его надёжности и обеспечении безопасности информации, а именно:

ограничение доступа к определённым директориям или файлам;

механизм авторизации пользователей для доступа к директории по методу HTTP-Авторизации;

ограничение доступа к определённым директориям или всему серверу, основанное на IP-адресах пользователей;

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

авторизация через модули СУБД.север Apache выбран не случайно. Данное программное обеспечение разрабатывается и поддерживается сразу под несколько операционных систем таких, как Linux, Mac OS, Microsoft Windows и др. Таким образом, при разработке проекта с решениями, которые специфичны только Web-серверу Apache, можно добиться совместимости интернет-сервиса на других операционных системах. Такими решениями можно считать следующие расширения этого программного продукта:

изменение конфигурации Web-сервера Apache с помощью файла .htaccess;

преобразование ссылок с помощью модуля Mod_Rewrite.

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

2.3 Общая схема функционирования интернет-сервиса

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

На рис. 2.X. изображён ход работы интернет-сервиса в виде Use Case-диаграммы.

Схема функционирования интернет-сервиса

Рис. 2.5 Схема функционирования интернет-сервиса

3. Реализация интернет-сервиса

3.1 Выбор языка программирования

При выборе языка программирования учитывались следующие моменты:

язык должен быть достаточно мощным и гибким;

простым в освоении;

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

Под эти требованию подпадает большинство из языков программирования на стороне сервера:

.NET ASP;

Python;

Perl;

Java;

PHP.

В настоящее время наиболее используемыми из них для решения задач широкого круга являются:

PHP;

Perl.

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

·PHP построен с нуля с огромной базой данных функций.

·PHP код изначально встроен в HTML-страницы, в отличие от Perl. Это делает его очень эффективным для быстрой разработки веб-страниц, тем самым ускоряя веб-разработки и снижая общую стоимость проекта. Важный метод управления - код для программистов отделён от кода данных. Это позволяет вносить изменения в код или данные, не влияя при этом, например, на программную часть или шаблон. PHP использует теги, задающие "код внутри". При программировании на языке Perl форматирование HTML-страницы осуществляется только программным путём: скрипт должен полностью формировать страницу, включая теги заголовков, элементы шаблонов и др.

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

·PHP прост в освоении по сравнению с Perl. Синтаксис языка PHP легче запоминается, чем синтаксис языков C, Python, Java, и большинство других языков программирования, используемых в веб-разработках. Стиль синтаксиса Perl является по сути уникальным, и, следовательно, не распространяемым на другие языки программирования.

·PHP имеет менее "накладные расходы", чем Perl, это означает, что скрипты будут работать быстрее, чем CGI-скрипты, написанные на Perl. При этом Вы будете иметь возможность обрабатывать запросы большего числа пользователей на вашем сайте. Бенчмаркинг-тесты показывают, что PHP работает быстрее, чем другие языки веб-программирования.

·PHP код имеет тенденцию быть более последовательным и модульным, чем Perl.

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

По синтаксису код PHP во многом похож на язык C++. Главное в нём отличие, что код в PHP интерпретируется, а не компилируется, как в «Си»-подобных программах.

Основные возможности PHP:

автоматическое извлечение POST и GET-параметров, а также переменных окружения веб-сервера в предопределённые массивы;

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

автоматизированная отправка HTTP-заголовков;

работа с HTTP-авторизацией;

работа с cookies и сессиями;

работа с локальными и удалёнными файлами, сокетами;

обработка файлов, загружаемых на сервер.

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

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

Результаты работы интернет-сервиса будут отображаться в браузере, поэтому для реализации интернет-страниц будет использован язык разметки HTML и каскадные таблицы стилей (CSS).

На программирование однотипных действий в JavaScript уйдёт слишком много времени, поэтому было решено использовать специализированую библиотеку скриптов (FrameWork) для JavaScript - jQuery. С помощью jQuery возможно легко получать доступ к любому элементу на странице, обращаться к атрибутам и содержимому элементов, манипулировать ими. Также библиотека jQuery предоставляет удобный интерфейс по работе с асинхронными запросами на странице.

интернет сервис визуальный интерфейс

3.2 Выбор коммуникационных методов

Разрабатываемый интернет-сервис требует высокой интерактивности интерфейса. Необходимо представить страницу «как есть» с последующими динамично добавляемыми элементами на неё. Было решено исключить фреймы из структуры проекта в связи с их устаревшей и неудобной реализацией. Выбор пал на технологию асинхронных запросов - AJAX. Как раз именно эта технология позволяет организовать динамический обмен данных между клиентом и серверов без перезагрузки интернет-страницы.

На следующем рисунке отражен обмен данных между клиентом и сервером с применением технологии AJAX:

Обмен данных между клиентом и сервером через AJAX

Рис. 3.1 Особенность передачи данных с помощью технологии "AJAX"

Помимо обеспечения интерактивности интерфейса, технология AJAX обладает следующими преимуществами:

экономия трафика - для обновления данных интернет-страницы, загружаются только необходимые данные, а не вся страница;

уменьшение нагрузки на сервер - сервер генерирует только запрашиваемые данные, а не всю интернет-страницу в целом;

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

Также необходимо выбрать формат данных, который подходит под следующие критерии:

удобочитаемость кода;

простота создания объекта данных на стороне сервера;

простота обработки данных на стороне клиента;

простота расширения;

отладка и исправление ошибок;

безопасность.

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

Все данные в формате JSON представлены в виде объекта данных, к элементам которого очень легко можно получить доступ. На следующем рисунке показан пример расположенных данных в виде JSON:

Пример данных в формате JSON

Рис. 3.2 Представление данных в формате "JSON"

.3 Выбор среды разработки

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

Такая среда программирования должна отвечать следующим требованиям:

семантическая и синтаксическая поддержка кода PHP, JavaScript, HTML и CSS;

навигатор по каталогам и функциям проекта;

бесплатное распространение продукта.

В качестве среды для разработки проекта была выбрана свободная интегрированная среда разработки модульных кроссплатформенных приложений Eclipse, поскольку она удовлетворяет всем вышеописанным требованиям / <#"justify">-поддержка как растровой, так и векторной графики;

поддержка форматов jpeg и png;

поддержка слоёв;

бесплатное распространение продукта.

В качестве графического редактора был выбран Paint.NET. Данный редактор удовлетворяет всем вышеописанным требованиям.

3.4 Реализация проекта

При разработке интернет-сервиса необходимо будет отделить скриптовый код PHP от кода разметки страницы HTML. Для этой цели в проекте использована библиотека классов SMARTY реализованная на PHP.

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

Использование SMARTY даёт ряд преимуществ по сравнению с вариантом разработки исключительно на PHP, а именно:

отделение кода верстки HTML от кода PHP;

кэширование HTML;

возможность взаимодействовать с кодом разметки HTML посредством внутренних функций SMARTY написанных на PHP.

В следующем примере представлен HTML-код с тэгами SMARTY:

<html>

<head>

<title>{$title_text}</title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<p>{$body_text}</p>

</body>

</html>

Общая схема приложения в формате UML выглядит следующим образом:

Общая схема работы приложения

Рис. 3.3 Общая схема работы приложения

Исходные файлы серверной части проекта хранятся на отдельном компьютере (сервер) и имеют следующий вид:

cache/
В каталоге cache хранятся каскадные таблицы стилей (CSS);
core/
В каталоге core содержатся файлы, которые имеют прямое отношение к работе интернет-сервиса (ядро приложения);
i/
В каталоге i расположены графические элементы интернет-сервиса;
js/
В каталоге js расположены пользовательские скрипты JavaScript. Эти скрипты будут подгружаться в браузер пользователя и исполняться исключительно на стороне клиента;
templates/
В каталоге templates хранятся все HTML-шаблоны;
templates_c/
В каталоге templates_c хранятся уже скомпилированные шаблоны с помощью внутренних функций SMARTY, которые берутся из каталога templates;
ajax.php
Файл ajax.php отвечает за взаимодействие и обработку асинхронных запросов;
core.php
Файл core.php подключается в заглавном файле index.php и содержит главные команды для загрузки всего содержимого интернет-сервиса;
index.php
Файл index.php является заголовочным файлом, с которого начинается работа интернет-сервиса.
Конфигурационный файл core.php имеет следующий вид:

require_once('Smarty.class.php');(LC_ALL, "ru_RU");startSmarty()

{

$smarty = new Smarty();

$smarty->template_dir = DOCUMENT_ROOT . 'templates/';

$smarty->compile_dir = DOCUMENT_ROOT . 'templates_c/';

$smarty->config_dir = DOCUMENT_ROOT . 'configs/';

$smarty->cache_dir = DOCUMENT_ROOT . 'cache/';

$smarty->compile_check = true;

$smarty->debugging = false;

$smarty->force_compile = 1;

$smarty = newSmarty();$smarty;

}

Обработкой команд, с которыми работает технический специалист, занимается набор функций PHP, которые выполняют следующие действия:

выполнение заданной команды;

анализ вывода команды;

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

Все эти операции выполняются в скрипте ajax.php.

В следующем примере представлена функция для выполнения операции из командной консоли Linux в PHP среде:

function runCommand($command) {_start();

(string)$raw = "";

$raw = system($command, $raw);

$raw = ob_get_contents() . $raw;_end_clean();$raw;

}

Функция system() возвращает результат выполнения той или иной команды в виде необработанных данных (RAW). Такие данные бесполезно предоставлять пользователю по той причине, что в них содержаться множество ненужной информации, которая в свою очередь может замедлить процесс выполнения всей операции.

Как только PHP получил результат выполнения команды, происходит анализ полученных данных. Анализ реализован в виде регулярных выражений, которые изначально поддерживаются PHP. Регулярные выражения - это формальный язык поиска и осуществления манипуляций с подстроками в тексте, основанный на использовании метасимволов (англ. wildcard characters). По сути это строка-образец (англ. pattern) состоящая из символов и метасимволов и задающая правило поиска.

Например, в следующем представленном коде происходит анализ данных выполненной команды трассировки маршрута Traceroute:

$traces = array();($i=1 ; isset($matches[1][$i]) ; $i++)

{_match("#\s*([^\s*]+)\s*([^\s*]+)\s*([^\s*]+\s*ms|\*)\s*([^\s*]+\s*ms|\*)\s*([^\s*]+\s*ms|\*)\s*#uis", $matches[2][$i], $matches2);

$traces['id'][$i-1] = $i;

$traces['resource'][$i-1] = $matches2[1].' '.$matches2[2];($matches2[3]!="*" || $matches2[4]!="*" || $matches2[5]!="*")

$traces['valid'][$i-1] = true;

$traces['valid'][$i-1] = false;(!isset($matches[1][$i+1]))

{($matches2[3]!="*" || $matches2[4]!="*" || $matches2[5]!="*")

$access = true;

$access = false;

}

}

Следующая конструкция является регулярным выражением:

\s*([^\s*]+)\s*([^\s*]+)\s*([^\s*]+\s*ms|\*)\s*([^\s*]+\s*ms|\*)\s*([^\s*]+\s*ms|\*)\s*

Подобного рода конструкция на языке регулярных выражений является маской или шаблоном, по которому производиться поиск совпадений в тексте. Знак вида \s является метасимволам регулярного выражения, а символ * является модификатором. Метасимволы обозначают группы других символов. Модификатор - это спецсимвол, определяющий "системные" параметры анализа регулярных выражений. Например метасимвол \s означает пробельный символ. Если же этот метасимвол соединить с модификатором *, то он будет означать ноль либо несколько пробельных символов.

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

Табл. 3.1 Метасимволы в регулярных выражениях

\Считать следующий метасимвол как обычный символ.^Начало строки..Один произвольный символ. Кроме '\n' - конец строки.$Конец строки.|Альтернатива (или).()Группировка.[]Класс символов.\sОдин пробельный символ.\SОдин не пробельный символ.\dОдна цифра.\DОдин символ кроме цифры.

В таблице 3.2 приведены модификаторы, которые используются в интернет-сервисе:

Табл. 3.2 Модификаторы в регулярных выражениях

*Повторяется 0 или большее число раз.+1 или большее число раз.?1 или 0 раз.{n}Точно n раз.{n,}По меньшей мере n раз.{n,m}Не меньше n, но и не больше m.

Затем происходит форматирование данных для представления их в удобном виде для клиента. Этим занимается набор библиотек SMARTY для PHP, в котором язык разметки HTML отделён от основного кода программирования PHP. Например, код разметки HTML для второго шага команды Traceroute:

<h2>Трассировка ресурса {$resource}:</h2>

{for $i=0 to count($traces['id'])-1}

{if $traces['valid'][$i]==true}

<span style="display:block">№{$traces['id'][$i]} - {$traces['resource'][$i]} <font color="green">успешно!</font></span>

{else}

<span style="display:block">№{$traces['id'][$i]} - {$traces['resource'][$i]} <font color="red">не прошёл!</font></span>

{/if}

{/for}

{if $access==true}

<span style="display:block"><h2><font color="green">Трассировка успешно пройдена!</font></h2></span>

{else}

<span style="display:block"><h2><font color="red">Трассировка не завершена!</font></h2></span>

{/if}

Как только анализ данных и их форматирование были завершены, происходит перенос форматированных данных в шаблон. В следующем примере представлен код на PHP, где происходит занесение данных в шаблон SMARTY:

$smarty->assign("resource", $_GET['resource']);

$smarty->assign("traces", $traces);

$smarty->assign("access", $access);

$smarty->assign("wid", $wid);

$smarty->assign("step", $step);

$result = $smarty->fetch("instrumentTrace.tpl");

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

Главной особенностью проекта является то, что интерфейс представлен в виде окон, в которых содержаться вывод конкретных команд из командной строки Linux. Для этих целей использован набор JavaScript-функций jQuery. Окна обладают следующими возможностями:

перемещение окна;

увеличение / уменьшение окна;

назад / вперёд;

сворачивание окна;

закрытие окна.

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

$( '#window' + newwid ).draggable({ handle: '.panelWindow', containment: '#windows', opacity:0.55 }).resizable({ghost: true});

Функции «назад» и «вперёд» реализованы в двух функциях, которые отличаются лишь одной операцией. Эти функции позволяют пользователю перейти на шаг вперед или назад. Точно также как и в окнах обычной операционной системы. Эти функции представлены ниже:

$("#windows").delegate('#moveForward'+newwid, "click", function() {= newwid;step = $(this).parents().eq(1).find(".windowStep").html();++;(wid, step);

});

$("#windows").delegate('#moveBackward'+newwid, "click", function() {= newwid;step = $(this).parents().eq(1).find(".windowStep").html();

step--;(wid, step);

});

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

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

Представление интернет-сервиса в виде оконного приложения обеспечивает динамичную работу приложения в целом. Это стало возможным благодаря асинхронным запросам AJAX.

3.5 Реализация отдельных визуальных элементов

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

Dig
Команда Dig предоставляет пользователю интерфейс командной строки для обращения к системе DNS. Команда позволяет задавать различные типы запросов и запрашивать произвольно заданные DNS-сервера;
Whois
Команда Whois предоставляет пользователю информацию о владельце домена либо ip-адреса;
Ping
Команда Ping проверяет соединение в сетях TCP/IP, а также обиходное наименование запроса;
Traceroute
Команда Traceroute предназначена для определения маршрутов следования данных в сетях TCP/IP. В зависимости от операционной системы устройства Traceroute может использовать различные протоколы передачи данных;
Mysql
Команда Mysql предоставляет пользователю интерфейс командной строки для обращения к базе данных MySQL;
Mysqldump
Команда Mysqldump даёт возможность пользователю создать полноценную архивную копию базы данных MySQL (структура таблиц и их информация) в виде текстового файла. В дальнейшем такой файл можно импортировать в другую базу данных MySQL.
Все вышеописанные команды работают в интернет-сервисе в виде оконных приложений. Окна друг от друга не зависят, что даёт возможность выполнять сразу несколько команд одновременно. Код серверной и клиентской части интернет-сервиса находится в Приложении А.

На рис. 3.4 показан итоговый интерфейс разработанного интернет-сервиса:

Интерфейс интернет-сервиса

Рис. 3.4 Интерфейс интернет-сервиса

Глава 4. Эффективность системы

4.1 Оценка интерфейса

Сравнительный анализ интерфейсов позволит нам выявить недостатки и преимущества разработанного интернет-сервиса. На этапе определения оценки критериев мы проанализировали эффективность командной строки на примере команды Traceroute. В следующем примере показан результат выполнения команды Traceroute в командной строке:

traceroute to mgppu.ru (92.53.98.5), 30 hops max, 40 byte packets using ICMP

1 192.168.0.1 (192.168.0.1) 0.916 ms 0.995 ms 1.112 ms

2 192.168.20.1 (192.168.20.1) 3.588 ms 79.931 ms 78.757 ms

3 93.94.152.65 (93.94.152.65) 2.594 ms 2.415 ms 13.810 ms

4 c57-GbE-p2-v2601.delfincom.ru (93.94.152.1) 2.856 ms 2.740 ms 8.920 ms

5 fws.timeweb.ru (193.232.245.93) 15.018 ms 166.339 ms 166.114 ms

6 bitrix36.timeweb.ru (92.53.98.5) 164.941 ms 163.763 ms 162.577 ms

Сравним вывод результата команды Traceroute обоими интерфейсами. На рис. 4.x представлена реализованная команда Traceroute в интернет-сервисе:

Процесс работы команды Traceroute в интернет-сервисе

Рис. 4.1 Пример работы команды Traceroute в интернет-сервисе

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

Теперь мы проанализируем тем же методом GOMS эффективность интернет-сервиса.

Табл. 4.1 Список жестов по модели GOMS

HПеремещение руки к графическому устройству ввода данныхHPПеремещение курсора к текстовому полю ввода данныхHPKНажатие левой кнопкой мышиHPKHПеремещение рук к клавиатуреHPKHKKKKKKВвод шести символовHPKHKKKKKKKНажатие клавиши <Enter>

В соответствии с правилом 0 поставим оператор M перед всеми операторами K и P за исключением P, указывающих на аргументы, которых в нижеследующем примере нет:

H M P M K H M K M K M K M K M K M K M K

В соответствии с правилом 1 следует заменить P M K на P K и удалить все другие операторы M, которые являются ожидаемыми (в указанном примере таких нет). Кроме того, правило 2 предписывает удалять операторы M в середине цепочек. После применения этих двух правил остаётся следующая запись:M P K H M K K K K K K M K

Заменим операторы на соответствующие временные интервалы:

H + M + P + K + H + M + K + K + K + K + K + K + M + K = 0.4 + 1.35 + 1.1 + 0.2 + 0.4 + 1.35 + (0.2 * 6) + 1.35 + 0.2 = 7.55 с

Судя по результатам анализа видно, что разработанный интерфейс по скорости оказался эффективней на 0.75 секунд.

4.3 Апробация интернет-сервиса в одной из хостинг-компаний

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

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

Оценка работы интернет-сервиса проводилась по шкале от 0 (плохо) до 5 (отлично).

Табл. 4.2 Оценка интернет-приложения

Удобство4Эффективность4Востребованность реализованных команд в интернет-сервисе3

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

Заключение

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

Суть поддержки состоит в визуализации выполнения техническим специалистом типовых команд работы с хостингом (в противовес работе с командной строкой). Эта визуализация и осуществляется разработанным интернет-сервисом.

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

масштабируемость;

расширяемость;

производительность;

переносимость;

безопасность.

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

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

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

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

1.Раскин Д. Интерфейс. Новые направления в проектировании компьютерных систем - Санкт-Петербург: Символ-Плюс, 2005. - 272 с.

.Прохоренок Н.А. HTML, JavaScript, PHP и MySQL. Джентльменский набор Web-мастера - Санкт-Петербург: БХВ-Петербург, 2008 - 864 с.

.Конверс Т., Парк Д., Морган К. PHP 5 и MySQL. Библия пользователя - Москва: Вильямс, 2009 - 1216 с.

.Мэтьюз М., Кронан Д. Динамическое веб-программирование - Москва: Эксмо, 2010 - 384 с.

.Уэйншенк С. Интуитивный веб-дизайн - Москва: Эксмо, 2011 - 160 с.

.Маккоу А. Веб-приложения на JavaScript - Санкт-Петербург: Питер, 2012 - 288 с.

.Уолл Л., Кристиансен Т., Орвант Д. Программирование на Perl - Санкт-Петербург: Символ-Плюс, 2004 - 1152.

.Шкляр Л., Розен Р. Архитектура веб-приложений - Москва: Эксмо, 2011 - 640 с.

. Комолова Н. В., Яковлева Е. С. HTML. Самоучитель - Санкт-Петербург: Питер, 2011 - 285 с.

. Шафер С. HTML, XHTML и CSS. Библия пользователя - Москва: Диалектика, 2011 - 656 с.

. Немет Э., Снайдер Г., Хейн Т. Руководство администратора Linux - Москва: Вильямс, 2010 - 1072 с.

. Вард Б. Работаем в Linux - Москва: НТ Пресс, 2008 - 400 с.

. Роббинс А. Linux: программирование в примерах - Москва: КУДИЦ-ПРЕСС, 2008 - 630 с.

. Коггзолл Д. PHP 5. Полное руководство - Москва: Диалектика, 2006 - 752 с.

. Ленгсторф Д. PHP и jQuery для профессионалов - Москва: Вильямс, 2010 - 362 с.

Приложение А

HTML-код стартовой страницы интернет-сервиса (index.tpl).

HTML-код отдельного окна в интернет-сервисе (newwindow.tpl).

код начальной загрузки интернет-сервиса (index.php).

PHP-код асинхронной загрузки элементов интернет-сервиса (ajax.php).

Содержание Введение Глава 1. Назначение сервиса для создания визуального интерфейса и основные требования к нему .1 Предметная область. Системные с

Больше работ по теме: