? Прост в работе и подходит для начинающих разработчиков;

? Быстрая работа;

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

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

Основой интерфейса любого приложения являются файлы HTML, CSS и в большинстве приложений для добавления динамики, JS.

CSS (Cascading Style Sheets) - язык, при помощи которого описываются стили разрабатываемы страниц. Например, шрифты, размеры блоков и выравнивание текста.

Объявление описания в CSS файле состоит из двух частей: селектора и объявления. Пример кода CSS файла:

mark {

color: #000;

background: #ff0;

}

В данном примере mark - селектор, в фигурных скобках (color: #000; background: #ff0) - объявление, команды, описывающие как необходимо отформатировать данную часть страницы. Например, из данного кода понятно, что для элемента mark необходимо применить черную заливку на желтом фоне. При дальнейшем вызове браузер будет понимать, что именно эту часть страницы необходимо отформатировать согласно тому, как это прописано в объявлении (в данной части, когда прописываются форматирующие команды).

После того, как CSS файлы прописаны, их необходимо подключить к HTML файлам.

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

После создания JS файла, его, как и CSS можно включить HTML файл страницы.

HTML - язык разметки страницы, определяющий ее структуру.

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

Элемент HTML файла состоит тегов и контента.

Пример элемента:

<h1>Add Group</h1>

<h1> и </h1> - открывающий и закрывающий теги соответственно, Add Group - контент.

В зависимости от значений в тегах (h1, p) контент будет отображаться тем или иным образом. В приведенном примере текст Add Group будет оформлен как главный заголовок.

Некоторые элементы вовсе могут не иметь контента между тегами, а сами теги могут содержать какое-то содержание, например изображение, ссылки или аудио.

Пример тега, содержащего изображение:

<img src="https://raw.githubusercontent.com/mdn/images/firefox-icon.png">

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

1. прописать в тегах <script src="..."></script> вместо “...” прописать имя файла;

2. В теге <div class="..."> прописывается имя необходимого объявления из подключенного файла.

Для подключение JS файла необходимо прописать его наименование в тегах <script src="..."></script>, где вместо “...” необходимо вставить имя файла. (пример: <script src="big.js"></script>).

Таким образом в HTML файле прописывается полностью структура страницы.

В разных фреймворках файл разметки может иметь различные форматы. Так в выбранном нами С# такой файл имеет расширение .aspx. Файл имеет такую же структуру, что и классический HTML. Дополнительно в данном файле определяется разметка серверных веб-элементов управления и пользовательских элементов управления.

Помимо этого, в данной работе для ускорения создания дизайна приложения использовался фреймворк Bootstrap.

Bootstrap - один из самых популярных фреймворков с готовыми css, HTML и JS шаблонами для разработки приложений.

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

В данной работе использовалось несколько шаблонов: Gentelella от Colorlib. Данные шаблоны подходили под поставленные требования: лаконичный дизайн, а также возможность реализовать графики, которые нам необходимо строить на основе данных пользователя.

Изначально шаблон Bootstrap имел вид как на рис. 21.

Рис. 21. Первоначальный вид шаблона

Далее была изменена цветовая тема приложения. Для этого в CSS файла был изменен цвет.

Добавлен логотип группы. Логотип группы представлен на рис. 22.

Рис. 22. Логотип группы



Добавлены дополнительные переходы на панели слева. Для этого было добавлен необходимое дополнительное количество страниц под контент и заполнены необходимой информацией. В файл bootstrap.css были добавлены необходимые объявления с иконками (пример: для иконки страницы DashBoard было добавлено объявление:

.glyphicon-dashboard:before {

content: "\e141"; /*код необходимой иконки*/

}

Новая панель представлена на рис. 23.

Рис. 23. Панель приложения

При помощи CSS была реализована возможность подсвечивать при наведении курсора выбранное поле на панели. Выбранное поле подсвечивается желтым, цвет текста меняется на темно-серый. Это видно на рис. 23, где курсор был наведен на поле Individual Scorecard.

Для этого при создании селектора в CSS файле прописывается псевдокласс :hover, а также псевдокласс :focus который отвечает подсказывает браузеру, что вид элемента должен изменится, при наведении на него курсора. Сам вид элемента прописывается, как обычно, в фигурных скобках.

Пример кода:

.btn:hover,

.btn:focus,

.btn.focus {

color: #333;/*цвет текста*/

background-color: #f0ad4e;/*цвет фона*/

}

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

Пример одного из экрана с заполнением форм приведен на рис. 24.

Рис. 24. Страница с формами ввода данных

Для создания таких форм в ASP.NET в файле с расширением .aspx (аналог HTML, как об этом говорилось ранее) необходимо прописать тег <asp:PlaceHolder>. Вид самого поля прописывается в CSS файле.

Таким образом, был разработан интерфейс приложения, удовлетворяющий всем поставленным задачам.



Выводы

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

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

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

? доступность с любого устройства;

? наличие вычислительных и интеллектуальных функций;

? интуитивно понятный современный интерфейс;

? современный дизайн;

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

? демонстрация данных по проектам в виде таблиц;

? возможность прогнозировать прибыли и убытки компании.

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

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



Перечень сокращений

ПО - Программное обеспечение;

БД - База данных;

ССП - Сбалансированная система показателей;

KPI - Key Performance Indicator;

BSC - Balanced scorecard;

JS - JavaScript;

DB - DataBase.



Распределение в группе

Николаев А. А.:

· Анализ предметной области (п.1)

· Разработка бэкэнд части приложения (п. 4.1-4.2)

Сингина А.Н.:

· Изучение предметной области (п.1, п.3)

· Разработка дизайна и фронтэнд части приложения (п.4.3)

Фахриева Л.М.:

· Изучение предметной области (п. 2)

· Анализ данных для разработки методологии (п. 3)

· Разработка фронтэнд части приложения (п. 3)

· Написание инструкции пользователя (приложение)



Список литературы

1. Современный учебник JavaScript. URL: https://learn.javascript.ru (дата обращения: 23.11.2018).

2. Дженнифер Нидерст Роббинс «HTML5, CSS3 и JavaScript. Исчерпывающее руководство». 4-ое издание - ЭКСМО, 2014.

3. Брайан Хоган «HTML5 и CSS3. Веб-разработка по стандартам нового поколения» - Питер, 2011.

4. Horvath & Partners - ВНЕДРЕНИЕ СБАЛАНСИРОВАННОИ? СИСТЕМЫ ПОКАЗАТЕЛЕИ?. Штутгарт, 2004.



Приложение

Инструкция по пользованию веб-приложения BSC

1. Логирование в веб-приложении

? Сначала вводим свой логин (NIK) и пароль (Password) на стартовой странице веб-приложения.

Рис. 25. Ввод логина и пароля.

? Кликаем Log In (Зайти)

2. Настройки приложения

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

Рис. 26. Управление периодом пользования со стороны Администратора.

Рис. 27. Управление периодом пользования со стороны Администратора.

3. Финансовые измерения

Управление финансов может осуществить Администратор.

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

? Для добавления новой группы нужно перейти в Scorecard Dashboard(Панель показателей) и выбрать Financial Measure menu (Меню финансовых показателей);

? Нажать на кнопку добавления группы - Add Group (Добавить группу);

? Появится окно добавления, в котором нужно ввести информацию и кликнуть на кнопку Add (Добавить). Скриншот экрана приведен ниже;

Рис. 28. Добавление группы финансов.



Добавить новые финансовые показатели можно следующими действиями:

? На странице Financial Measure (Финансовые показатели) в поле ввода нового объекта нужно добавить новый элемент;

? Заполните форму добавления нового элемента, отображаемую системой. Финансовый тип Single является независимой финансовой мерой, тогда как тип акций является зависимой финансовой мерой;

? Нажмите «Добавить еще», чтобы добавить дополнительную финансовую меру, или «Готово», если вы не хотите добавлять дополнительную финансовую меру;

Рис. 29. Добавление финансовых показателей.

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

4. Индивидуальная система показателей

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

Добавление нового ключевого показателя эффективности (KPI) без определенной цели. Ниже приведены шаги для добавления новых KPI без конкретных целей:

? Выберите меню Scorecard menu (Система показателей) и выберите меню Individual Scorecard menu(Индивидуальная система показателей);

? Нажмите на Add New KPI (добавить новый KPI) кнопку;

? Добавьте значения. Скриншот страницы приведен ниже;

Рис. 30. Добавление индивидуальных показателей.

Можно скачать отчет по индивидуальным показателям. Для этого нужно:

? В меню выбрать раздел Individual Scorecard menu (меню индивидуальных показателей).

? Нажать на Export to Excel (Экспортировать в Эксель) или Export to PDF (Экспортировать в формате PDF). Рисунок представлен ниже.

Рис. 31. Скачать отчет в формате Excel или PDF.

? Производится скачивание документа с системы

5. Просмотр запросов

Для просмотра запросов:

? Перейдите во вкладку My requests (Мои запросы);

? Выберите период времени;

? Система отобразит показатели KPI;

Рис. 32. Отображение показателей по запросу.

? Далее можно посмотреть более детальное описание запросов, нажав на кнопку Details (Детали).

6. Запрос ответа

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

Для этого нужно произвести некоторые действия:

? Откройте Respond Requests (Ответить на запросы) и выберите меню KPI;

? Нажмите на Approve request (Подтвердить запрос) или Reject (Отклонить). Скриншот представлен ниже.

Рис. 33. Подтверждение или отклонение запроса.



? Далее можно назвать на Details (детали), чтобы увидеть дополнительные данные. Ниже приведен пример странички деталей.

Рис. 34. Детали запроса.

? Поиск может осуществляться при помощи фильтрации. Поиск может осуществляться по NIK (НИК), name (имя), organization (организация). Скриншот представлен ниже;

Рис. 35. Осуществление поиска.

7. Просмотр истории запросов

Для просмотра истории запросов нужно выбрать в меню слева Request History (Запрос истории) и выбрать KPI. Здесь также можно осуществить поиск аналогично, как это происходит на остальных страничках. Также можно выбирать конкретный период.

8. Управление пользователями

Данная функция может быть осуществлена только со страницы администратора. Для этого нужно выбрать Scorecard User Menu (Меню пользователей системы показателей). Появится окно со всеми пользователями системы.

Для добавления нового пользователя нужно произвести несколько шагов:

? Нажмите на кнопку Add user (Добавить пользователя), как на рисунке ниже;

Рис. 36. Добавление нового пользователя.

? Появится окно для ввода данных по пользователю, как на скриншоте ниже. После добавления всей необходимой информации нужно нажать на кнопку Add User (Добавить пользователя).

Рис. 37. Добавление нового пользователя.

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

...