РАЗРАБОТКА КРОССПЛАТФОРМЕННОГО КЛИЕНТ – СЕРВЕРНОГО МОБИЛЬНОГО ПРИЛОЖЕНИЯ

Филиал «Нерюнгринская ГРЭС» действует на юге Республики Саха (Якутия). Основные виды деятельности - производство тепловой и электрической энергии, ее реализация населению и юридическим лицам. В состав филиала входят две электростанции и водогрейная котельная. Общая установленная мощность на самой НГРЭС составляет 540 МВт распределена по трём энергоблокам, по 180 МВТ соответственно. Выход из строя одного из блоков ведёт к значительным финансовым потерям. В виду этого перед персоналом станции поставлена задача, максимально оперативно устранять неисправности, приведшие к выводу энергоблока из строя. Данный вопрос курируют начальник смены станции, а также начальник смены электро-цеха. В случае аварийной ситуации, приведшей к выходу из строя одного из энергоблоков, начальники смен станции руководят действиями оперативного персонала по ликвидации (локализации) аварий и других технологических нарушений в работе электростанции, стихийных бедствий и возгорания, а также в ликвидации последствий происшествий.

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

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

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

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

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

Связка JavaScript, HTML и CSS исполняется с помощью приложения PhoneGap Desktop, которое запускает все подключенные плагины и созданное приложение на локальном адресе.

Плагин это пакет, который позволяет автоматически внедрить native код в приложение и управлять native методами из Cordova Web View. Все основные функции PhoneGap/Cordova API реализованы при помощи плагинов, которые предоставляют доступ к возможностям и функциям устройства и платформы, которые недоступны обычному веб-приложению: сканирование QR кода, NFC, Push уведомления и даже Touch ID для iOS.

Существует реестр PhoneGap плагинов. Очень важно использовать плагины, совместимые с PhoneGap Build, иначе сборка будет возможна только локально.

Для разработки клиентской стороны была выбрана библиотека «Framework7». Выбор обусловлен тем, что в Framework7 собраны всевозможные виджеты, компоненты, позволяющие создать приложение, максимально похожее на нативное (рис. 1).

Рисунок 1. Приложение PhoneGap Desktop

При запуске приложения появляется окно авторизации (рис. 2):

Рисунок 2. Всплывающее окно авторизации

Для авторизации используется post запрос при запуске приложения (рис. 3).

Рисунок 3. Post запрос авторизации

Framework7 отличается от подобных библиотек: производительностью и реализацией многих нативных UX функций. Например, такие привычные для iOS визуальные компоненты как Pull To Refresh (потяни для обновления), Swipe, back-bar и многие другие доступны из коробки и не требуют дополнительного программирования. Также у данного фреймворка есть доступная полноценная документация на сайте (на английском), что также является большим преимуществом.

В случае неправильно введённых данных авторизации, приложение выводит ошибку и просит ввести валидные данные. Если всё верно то выполняется GET запрос к серверу на получение данных о состоянии энергоблоков. Главное view приложения выполнено в Slider стиле (рис. 4).

Рисунок 4. Слайды с представлением показателей работы энергоблоков

Запрос с клиентской части задается ajax методом. Таким образом появляется возможность делать запросы без перезагрузки страницы (рис. 5).

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

Кроссдоменный запрос ajax предоставляет возможность отправлять запросы на любые разрешенные в content security policy домены, при этом сервер должен обеспечить ответ разрешающими заголовками (Access-Allow-Origin).

Рисунок 5.     Программный код запроса на сервер

Для определения текущего положения используется оператор switch. Показатель оператора выбора определяет текущий слайд по индексу и делает запрос соответствующий выбранному энергоблоку (рис. 6).

Рисунок 6.  Реализация запроса в связке с оператором switch

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

1. Основы JavaScript и Node.js [Электронный ресурс] URL: http://dotnet-am.livejournal.com/3953.html (дата обращения: 01.05.2017)
2. Дакетт Дж. Javascript и jQuery. Интерактивная веб-разработка. М.:Эксмо, 2017. 640 с.
3. Учебник на русском языке по PHP [Электронный ресурс]. URL: http://www.php.su (дата обращения: 21.04.2017)