Transcript Поддержка мобильных устройств Чечнев Михаил Применяемые технологии jQuery и jQuery Mobile - формирование мобильных интерфейсов мониторинга и оперативного управления webSQL - формирование интерфейсов мониторинга деятельности для.

Поддержка мобильных устройств
Чечнев Михаил
Применяемые технологии
jQuery и jQuery Mobile - формирование
мобильных интерфейсов мониторинга и
оперативного управления
webSQL - формирование интерфейсов
мониторинга деятельности для пользователя
вне зоны доступа, в том числе в целях
обеспечения безопасности
WEB-сервис очереди отложенной печати –
заказ аналитических отчетов и получение
результата на мобильное устройство
jQuery Mobile
Общие сведения

jQuery – Java Script фреймворк (библиотека),
обеспечивающий возможности реализовывать:





Лаконичные запросные конструкции к объектной модели HTML
документа (DOM)
Обслуживание сложных событийных конструкций
AJAX запросы с применением мощного API, значительно
упрощающего взаимодействие с сервером
Анимацию на странице
jQuery Mobile – дополнение jQuery для разработки
web-приложений, оптимизированных под исполнение на
мобильных устройствах, обеспечивающее:



Платформо-независимый рендеринг страницы
Масштабируемую вёрстку
Набор виджетов и интерфейсных элементов, спроектированных
для работы на Touch-Screen устройствах
jQuery Mobile
Общие сведения


Преимущества разработчика:
 Интеграция с Oracle Application Express – разработка в привычной
IDE, с поддержкой командной работы
 Прямое обращение к данным и API системы – при совместном
использовании Oracle APEX и jQuery Mobile задача разработчика
сводится к настройке навигации и представления данных с
применением виджетов пользовательского интерфейса
 Кроссбраузерность и поддержка большинства популярных
мобильных платформ – разработав одно WEB-приложение, можно
использовать его на разных платформах, об остальном заботится
jQuery Mobile
Преимущества пользователя:
 Работа с системой в дружественном интерфейсе
 Доступ к данным и функциям, аналитическим отчетам системы вне
офиса
jQuery Mobile
Поддерживаемые платформы
jQuery Mobile
Принципы работы
jQuery Mobile
Принципы работы
без jQuery
jQuery
Write less, do more.
jQuery Mobile
Принципы работы
без jQuery
AJAX - запрос
jQuery
Write less, do more.
jQuery Mobile
Принципы работы
jQuery Mobile = jQuery +

Набор элементов пользовательского интерфейса, адаптированных для
мобильных устройств

Инструменты автоматической AJAX загрузки страниц и настройки
сценариев навигации с поддержкой “Back Button”
Автоматическая HTML5-разметка, управляемая ориентацией
устройства (портретная, ландшафтная)


Упрощенный доступ к некоторым сенсорам устройства (GPS, гироскоп)
jQuery Mobile
Принципы работы
Обрабатывает
запрос и
формирует
ответ
HTTP-запрос
WEB-сервер
без jQuery Mobile
Отображает
полученный
документ как
есть
Браузер
HTML-документ
jQuery Mobile
Обрабатывает
запрос и
формирует
ответ
HTTP-запрос
Отображает
преобразован
ный документ
Браузер
WEB-сервер
jQuery Mobile
Автоматическая
инициализация
виджетов
HTML-документ
jQuery Mobile
Принципы работы
без jQuery Mobile
jQuery Mobile
HTML 5
DATAатрибуты
jQuery Mobile
Автоматическая
инициализация
виджетов
jQuery Mobile
Принципы работы
webSQL
Общие сведения

WebSQL – инструментарий, включенный в
спецификацию HTML 5:



Позволяющий хранить в кэше браузера SQLite базу
данных
Обеспечивающий возможность кэширования больших
объемов данных
Предоставляющий API для обращения к
кэшированным данным при отсутствии соединения с
сервером
webSQL
Общие сведения

Преимущества:



Полнофункциональный SQL-движок (SQLite)
Работа с данными и отчетами системы в условиях
отсутствия соединения с сервером
Возможность, находясь в доверенной сети, провести
кэширование информации, передача которой по
общедоступным каналам невозможна по
соображениям безопасности
webSQL
Принципы работы
СЕРВЕР
On-Line
Off-Line
WebSQL
DB
Приложение
(WebSQL DB
JS API)
КЛИЕНТ (WEB-браузер)
webSQL
Принципы работы
webSQL
Поддержка браузерами
webSQL
Альтернативные технологии

WEB Storage (Local storage/Session storage)

Поддерживается подавляющим большинством браузеров

Очень простой API

Это не БД, это хранилище



Нет схем, таблиц, возможности строить запросы

Данные хранятся по схеме “ключ-значение”
Отсутствие поддержки транзакций
Indexed Database API

Иерархическая NOSQL БД

Индексация

Транзакции

Данные хранятся по схеме “ключ-значение”

Низкая степень поддержки браузерами

Нет возможности строить запросы

Сложный API
WEB-сервис очереди отложенной печати
Общие сведения

WEB-сервис отложенной печати:


Программный интерфейс для работы с сервисом
отложенной печати ПП Парус 8.
Сервис отложенной печати:

Инструментарий ПП Парус 8, обеспечивающий
постановку пользовательского отчета в очередь печати с
заданными параметрами и подготовку файла отчета на
сервере, с сохранением результата в БД. Дополненный
WEB-сервисом обеспечивает поставку разработанной в
системе отчетности на мобильные клиентские
устройства.
WEB-сервис очереди отложенной печати
Общие сведения

Преимущества:
 Возможность заказать пользовательский отчет на сервере и
загрузить его на рабочее место пользователя (в том числе и на
мобильное устройство) по готовности
 Возможность разработать собственный (помимо штатного)
интерфейс пользователя (для любых платформ, любыми
средствами)
 Пользовательские отчеты, разрабатываемые по
“классической” методике становятся доступными мобильным
пользователям
 Возможность использования уже разработанных
аналитических пользовательских отчетов мобильным
клиентом
WEB-сервис очереди отложенной печати
Принципы работы
WEB-СЕРВЕР
СЕРВЕР
Процесс
обслуживания
очереди
БД ПП Парус 8
(Очередь
печати отчетов)
WEB-сервис
(постановка в
очередь, возврат
готовых отчетов)
Запрос на постановку
отчета в очередь
Файл готового
отчета
Файл готового
отчета
Файл готового
отчета
КЛИЕНТ
(Мобильное WEBприложение)
КЛИЕНТ
(Настольное WEBприложение)
КЛИЕНТ
(Прочие
приложения)
Мобильный WEB-интерфейс
типового решения “Учет в проектах”

Назначение



Получение аналитической информации из системы где бы
Вы не находились
Удаленное выполнение учетных функций
Доступ к демонстрационному примеру

URL
http://212.5.81.211:7777/maket/f?p=102

Пользователь
demo

Пароль
demo
Функциональные возможности

Доступ к сведениям о заказах, с указанием










Учетных характеристик
Рентабельности
Графика финансирования со стороны заказчика
Состояния договоров с поставщиками материалов и ПКИ
Состояния внутреннего соисполнения
Расчет загруженности подразделений заказами
Доступ к штатному расписанию должностей и штатной
расстановке сотрудников
Просмотр опубликованных бюджетов
Формирование платежного календаря и просмотр
детализации платежей
Заказ и доставка на устройство аналитической отчетности
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Авторизация и главное меню
Вход в приложение
Для входа в
демонстрационную
версию используйте
организацию
“Организация”,
пользователь “demo”,
пароль “demo”.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
После указания учетных
данных нажмите “Войти”
для доступа к функциям
приложения.
Авторизация и главное меню
Доступ к функциям
Кнопка “Домой” вернет
Вас в главное меню из
любого раздела
приложения.
Пункты главного меню
приложения –
обеспечивают доступ к
его функциям.
Приложение использует
разграничение прав
доступа к системе на
уровне пользователей и
ролей пользователей.
Набор пунктов главного
меню зависит от прав
доступа авторизованного
пользователя.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Кнопка “Выйти” доступна
из любого раздела
приложения,
обеспечивает
завершение сеанса
работы с системой.
Каждый пункт меню
имеет краткое описание,
отражающего
функциональную
направленность данного
пункта.
Информация о заказах
Список заказов
Контекстный поиск
этапов заказов. Введите
поисковую фразу и
нажмите “Найти”.
Список этапов заказов с
указанием номера заказа
и этапа, сроков,
заказчика, темы,
стоимости этапа,
головного исполнителя и
содержания работ.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Нажмите “Сбросить” для
очистки условий поиска и
просмотра полного
списка этапов заказов.
Нажмите на элемент
списка для получение
более детальной
информации по этапу
заказа.
Информация о заказах
Список заказов
“Все” – сброс
фильтрации по
состоянию статей
структуры цены.
Нажмите на кнопку с
маркером для
фильтрации этапов по
состоянию статей
структуры цены.
“Без отклонений” –
отображение этапов не
имеющих отклонения по
статьям структуры цены
(фактические затраты
менее 90% от плановых
по всем статьям).
“Есть расход более 90%”
– отображение этапов
имеющих фактические
затраты составляющие от
90% до 100% от
плановых по одной из
статей.
“Есть перерасход” –
отображение этапов
имеющих отклонения по
статьям структуры цены
(фактические затраты
превышают плановые по
одной из статей).
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Информация о заказах
Список заказов
“Все” – сброс
фильтрации по
состоянию исполнения
этапов.
Нажмите на кнопку с
“замком” для
фильтрации этапов по
состоянию их
исполнения.
“Открытые” –
отображение этапов
имеющих состояние
“Открыт”.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
“Закрытые” –
отображение этапов
имеющих состояние
“Закрыт”.
Информация о заказах
Детали этапа заказа
Для каждого из этапов
доступны данные о его
учетных характеристиках
в системе,
рентабельности,
структуре цены, графике
финансирования и
состоянии договоров с
контрагентами и
поставщиками
материалов и ПКИ.
Для просмотра деталей
по соответствующему
блоку информации
следует нажать на его
заголовок.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Информация о заказах
Детали этапа заказа
Раскрытие
информационного блока
отображает
дополнительную
информацию по нему.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Информация о заказах
Детали этапа заказа
Некоторые из блоков,
детализирующих этап,
содержат интерактивные
элементы, оформленные
в виде кнопок или
гиперссылок. Например,
нажав на кнопку в списке
контрагентских
договоров можно
получить детализацию
по состоянию договора.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Для контрагентского
договора доступны
сведения о его сроках,
сумме, состоянии в
оперативном учете.
Обеспеченность ФОТ
Расчет
Укажите год из списка и
система проведет расчет
обеспеченности фонда
оплаты труда
подразделений
заказами.
Нажмите на
подразделение для
получения более
детальной информации о
его ФОТ и
запланированных
объемах работ.
Экспресс-анализ
наиболее и наименее
загруженных заказами
подразделений.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Расчет обеспеченности
производится на
основании данных о
выплатах и удержаниях
сотрудников
подразделений и
запланированного для
них объема работ на
указанный год, согласно
планам по
себестоимости.
Для получения
детальных сведениях о
подразделении
(количество вакансий,
ставок, работающие
сотрудники, должности и
т.п.) нажмите на кнопку
“О подразделении”.
Обеспеченность ФОТ
Топ 5 обеспеченности
На основе данных
расчета обеспеченности
ФОТ система строит
гистограммы по 5-ти
наиболее и наименее
обеспеченным заказами
подразделениям.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Штатные должности
Навигация по подразделениям
Нажмите для возврата в
корень дерева штатной
структуры.
Нажмите для доступа к
списку должностей
подразделения и его
дочерних элементов
штатной структуры.
Нажмите для возврата на
вышестоящий уровень
штатной структуры.
Нажмите на элемент
списка для перехода на
более низкий уровень
штатной структуры (к
списку дочерних
подразделений).
Количество дочерних
подразделений.
Нажмите для доступа к
детальной информации
по подразделению.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Штатные должности
Должности подразделения
Список должностей
подразделения с
указанием общего
количества ставок,
количества занятых и
вакантных мест в
штатном расписании.
Нажмите на элемент
списка для перехода к
списку исполнений
должности (сотрудники
занимающие
должность).
Количество исполнений
должности.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Штатные должности
Детали подразделения
Сводные сведения о
подразделении.
Круговая диаграмма
отражающая структуру
сотрудников в разрезе
категорий исполнений
(рабочие/служащие).
Круговая диаграмма
отражающая структуру
сотрудников в разрезе
типов исполнений
(внутренние/внешние
совместители, основные
исполнения).
Круговая диаграмма
отражающая долю
подразделения в общей
численности
сотрудников
организации.
К списку исполнений
должностей
подразделения.
К списку должностей
подразделения.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Штатные должности
Сводные диаграммы
Круговая диаграмма
отражающая структуру
сотрудников в разрезе
категорий исполнений
(рабочие/служащие).
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Подобные круговые
диаграммы отражают
долю подразделения в
штатной численности
организации, структуру
типов исполнений
должностей, структуру
категорий исполнений
должностей (данный
пример).
Штат
Исполнения должностей
Список сотрудников,
исполняющих должности
в подразделении.
Нажмите для доступа к
данным о выплатах и
удержаниях сотрудника.
Нажмите для доступа к
контактной информации
сотрудника.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Сведения о сотруднике с
указанием должности,
количестве занимаемых
ставок, окладе. Нажмите
для доступа к более
подробной информации
о сотруднике, с
указанием стажа,
приказа о приеме,
табельного номера,
ученой степени и т.п.
Штат
Данные ФОТ и оснований выплат
Нажмите для закрытия
всплывающего окна.
Данные о ФОТ
сотрудника.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Данные о выплатах и
удержаниях сотрудника.
Штат
Контактная информация
Нажмите для запуска
почтового клиента и
отправки E-mail
сообщения.
Нажмите для закрытия
всплывающего окна.
Нажмите на номер для
осуществления вызова
(для устройств
поддерживающих
телефонную связь).
Контактная информация
сотрудника.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Бюджеты
Список опубликованных
Нажмите на элемент
списка для просмотра
бюджета.
Список бюджетов,
сформированных в
системе и имеющих
признак “Публиковать”.
Для каждого бюджета из
списка указаны период,
уровень детализации
показателей, валюта,
состояние и дата “по
состоянию на”.
Бюджеты разбиты на
группы по типам и
уровням детализации.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Бюджеты
Параметры просмотра
Масштаб отображения
показателей бюджета
(например, 1000 – в
тысячах рублей).
Статьи бюджета при
отображении могут быть
отсортированы по виду
движения
(приходы/расходы) или в
том порядке, в котором
это задано настройкой
бюджета в системе.
Способ представления
бюджета. Каждый из
бюджетов может быть
отображен в виде
иерархии его статей с
показателями, в виде
набора графиков, в виде
отчета MS Excel,
доставляющегося на
устройство.
Показатели бюджета
могут быть отображены с
заданным уровнем
группировки (год,
квартал, месяц, неделя,
день).
Для отображения данных
бюджета укажите
желаемые параметры
просмотра.
Просмотр бюджета с
указанными
параметрами
отображения.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Бюджеты
Просмотр по статьям
Нажмите на статью для
отображения её
показателей.
Нажмите для доступа к
статьям бюджета,
детализирующим
данную.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Показатели статьи,
сгруппированные
согласно параметрам
просмотра. Заливкой
отмечены фактические
показатели, согласно
дате “по состоянию на”,
указанной при
формировании бюджета.
Статьи в списке могут
иметь различный цвет в
зависимости от их типа
(серые – остатки,
зеленые – приходы,
синие – сальдо, красные
– расходы).
Бюджеты
Навигация по иерархии статей
Возврат к родительской
статье.
Возврат к статьям
первого уровня бюджета.
Если значение
показателя оформлено в
виде гиперссылки, то
нажав на него можно
получить доступ к списку
документов системы,
вошедших в показатель.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Бюджеты
Расшифровка показателей
Список документов
детализирующих
показатель бюджета с
указанием раздела
документа, суммы
документа вошедшей в
показатель, даты
документа и его
описания.
Итог по документам
детализирующим
показатель в заданном
для просмотра
масштабе.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Бюджеты
Список графиков
Список диаграмм и
графиков бюджета,
доступных для
отображения. Этот
список может быть
индивидуальным для
каждого из бюджетов и
задается его
настройками в системе.
Нажмите на элемент
списка для отображения
диаграммы .
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Бюджеты
Просмотр графика
Группировка показателей
диаграмм и графиков
зависит от параметров
просмотра бюджета.
Набор диаграмм и
графиков бюджета
задается его
настройками с системе в
разделе “Настройки
бюджетов”.
Показатели,
отображаемые
диаграммой или
графиком бюджета,
задаются в его
настройках.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Бюджеты
Просмотр в формате MS Excel
Бюджет может быть
сформирован в виде
таблицы MS Excel,
согласно указанным
параметрам просмотра и
доставлен на устройство
как XLS файл.
Полученный файл
доступен для работы
через офисные
приложения для Вашей
платформы.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Платежный календарь
Формирование
Для формирования
платежного календаря
укажите период
формирования и валюту.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Нажмите для
формирования
платежного календаря в
разрезе инструментов
оплаты (расчетных
счетов) ,
зарегистрированных в
системе.
Платежный календарь
Инструменты оплаты
Список инструментов
оплаты, попавших в
календарь, с указанием
остатка по инструменту
на конец периода.
Итоговый остаток по
всем инструментам.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Нажмите на элемент
списка для отображения
деталей по инструменту
(входящих остатков,
сумм поступлений и
выплат, исходящих
остатков).
Нажмите на сумму
поступлений или выплат
для отображения
детального списка
записей журнала
платежей, составивших
показатель.
Платежный календарь
Детализация операций
Список записей журнала
платежей
детализирующих
показатель поступлений
или выплат
сформированного
календаря.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Для каждого платежа
указаны префикс и
номер, дата, сумма,
валюта, контрагент,
документ –снование,
назначение платежа,
примечание, документподтверждение
(некоторые поля могут
быть скрыты если
незаполнены в платеже)
Отчеты
Заказ аналитической отчетности
Нажмите для доступа к
списку доступных для
заказа отчетов.
Нажмите для открытия
списка ранее заказанных
отчетов и их загрузки на
устройство.
Доступ к списку
“избранных” отчетов
данного пользователя.
Приложение позволяет
доставлять на устройство
аналитические отчеты,
разработанные
штатными средствами
системы
(“Пользовательские
отчеты”) на основе
шаблонов MS Excel ,
Open Office Calc и
Crystal Reports.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Доступные отчеты
Список
Список доступных
отчетов может быть
отсортирован по кодам
отчетов или по их
привязке к разделам
системы. Сдвиньте
слайдер для изменения
способа сортировки.
Группа, указывающая на
привязку отчетов к
разделу.
Иконка элемента списка
указывает на тип отчета.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Нажмите на элемент
списка для доступа к
подробному описанию
отчета, его параметрам и
функции печати.
Признак включения
отчета в список
“избранных”. Нажмите
для быстрого доступа к
“избранным “отчетам.
Доступные отчеты
Карточка отчета
Подробное описание
отчета.
Доступ к истории печати.
Нажмите для
включения/исключения
из списка “избранных”.
Нажмите для заполнения
параметра из
привязанного к нему
словаря.
Нажмите заказа отчета
после указания значений
его параметров.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Избранные отчеты
Список
Нажмите на элемент
списка для доступа к
подробному описанию
отчета, его параметрам и
функции печати.
Список “избранных”
отчетов позволяет
получить быстрый доступ
к наиболее
востребованным
пользователем отчетов.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Для экономии трафика
приложение не всегда
отображает полный
набор данных раздела.
Нажмите для получение
дополнительных
элементов списка.
Заказанные отчеты
Список
Список заказанных
отчетов с указанием
статуса заказа (выполнен
успешно, выполняется,
выполнен с ошибками).
Нажмите на позицию
списка для доступа к
детальной информации о
заказанном отчете.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Заказанные отчеты
разбиты на группы по
времени заказа (сегодня,
вчера, ранее).
Быстрая доставка отчета.
Нажмите на элемент для
загрузки готового отчета
на устройство.
Заказанные отчеты
Позиция очереди заказов
Карточка заказанного
отчета с указанием
детальных сведений и
статистики обработки
заказа (начало
обработки, окончание
обработки, длительность
обработки).
Нажмите для загрузки
файла подготовленного
отчета на устройство.
Значения параметров, с
которыми был заказан
отчет.
Удаление отчета из
списка заказанных.
Нажмите для повторного
заказа отчета с таким же
набором параметров.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Заказанные отчеты
Доставленный отчет
Заказанный отчет может
быть сформирован в
виде таблиц MS Excel ,
Open Office Calc или
PDF-документа и
загружен на устройство
как файл
соответствующего
формата. Полученный
файл доступен для
работы через офисные
приложения для Вашей
платформы.
Мобильный WEB-интерфейс типового решения “Учет в проектах”
Спасибо за внимание