android:background="#ffffff"

android:layout_alignParentRight="true"

android:layout_alignParentTop="true" />

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

Рис. 2.4 - Боковое меню мобильного приложения

При запуске приложения на мобильном устройстве происходит проверка авторизации пользователя. Для хранения параметров авторизации используется SharedPreferences. Это специальное, доступное только этому приложению хранилище. В хранилище записывается token, который приложение получает в результате успешной аутентификации. Для этих целей было сделано несколько экранов (Activity), для входа в сервис, регистрации, восстановления пароля и изменения пароля соответственно. Изображение одного из этих экранов приведено на Рис. 2.5

Рис. 2.5 - Экран изменения пароля в мобильном приложении

Взаимодействие мобильного приложения с сервером

Для взаимодействия с сетью было решено использовать библиотеку Retrofit, как наиболее популярное и удобное решение для отправки и обработки асинхронных запросов. Для авторизации, аутентификации и синхронизации с сервером было реализовано несколько классов, реализующих интерфейс Callback из библиотеки Retrofit. Это позволило обрабатывать результаты выполнения запросов к серверу. Для отправки запросов синхронизации используется вспомогательный класс TodoTasksServiceHelper, который взаимодействует с моделью приложения и реализацией интерфейса REST для синхронизации задач с сервером. Сокращенный код класса приведен в листинге 2.14

Листинг 2.14 - Вспомогательный класс для синхронизации списков с сервером

public class TodoTasksServiceHelper {

public TodoTasksServiceHelper(String token) {

this.token = token;

this.restAdapter = new RestAdapter.Builder().setEndpoint(Utility.SERVER_URL).build();

this.apiMethods = restAdapter.create(IApiMethods.class);

}

public void syncTodoTasks() {

SyncState.State currentState = SyncState.getInstance().getState();

if (currentState == SyncState.State.STARTING_SYNC_TASKS) {

syncNewTasks();

} else if (currentState == SyncState.State.GETTING_NEW_TASKS_COMPLETED) {

syncAddedTasks();

} else if (currentState == SyncState.State.ADDING_TASKS_COMPLETED) {

syncUpdatedTasks();

}

}

private void syncNewTasks() {}

private void syncAddedTasks() {}

private void syncUpdatedTasks() {}

}

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

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

Для возможности выполнения синхронизации в фоновом режиме в Android приложении был реализован сервис. Сервис представляет собой фоновый процесс, который является частью приложения и запускается при успешной авторизации при первом запуске приложения и при загрузке мобильного устройства. Сервис с интервалом в 10 секунд синхронизирует данные модели с сервером при помощи обращений к классу TodoTasksServiceHelper. Если в момент выполнения сервиса есть подключение к сети Интернет, то синхронизация запускается. Если в данный момент запущен главный экран приложения со списком задач, то сервис сообщает представлению (View) об изменении модели, что позволяет обновлять списки задач после выполнения синхронизации. Для возможности отключения синхронизации в настройках мобильного приложения предусмотрена соответствующая опция. Упрощенный код класса для создания сервиса приведен в листинге 2.15

Листинг 2.15 - Класс для создания сервиса для синхронизации списков с сервером

public class SyncService extends Service {

private final IBinder syncBinder = new SyncBinder();

public class SyncBinder extends Binder {}

@Override

public int onStartCommand(Intent intent, int flags,

int startId) {

TodoTasksServiceHelper todoTasksServiceHelper =

new TodoTasksServiceHelper(token);

todoTasksServiceHelper.syncTodoTasks();

return Service.START_NOT_STICKY;

}

@Override

public IBinder onBind(Intent arg0) {}

}

Для отображения настроек приложения был реализован экран (Activity), расширяющий класс PreferenceActivity. Это позволило хранить настройки приложения в SharedPreferences. Диаграммы некоторых классов мобильного приложения представлены в приложении Б.

Для разработки интерфейса мобильного приложения было решено придерживаться правил создания интерфейсов Material Design. При этом нужно было поддерживать старые версии платформы, где эти правила поддерживаются не в полной мере. Для этого использовалась библиотека android.support.v7. Эта библиотека позволила создать ActionBarDrower и прочие элементы интерфейса, характерные для Material Design.

2.4 Реализация веб-приложения

Интерфейс веб-приложения

В веб-приложении было решено сохранить тот же интерфейс, что и в мобильном приложении. Для генерации страниц HTML используется генератор шаблонов Jade Template Engine. Это позволяет отойти от синтаксических конструкций и оперировать объектами и классами свойств стилей для лучшей читаемости разметки. Для подключения Jade в модуль server.js были добавлены инициализация и определения путей до файлов разметки.

Листинг 2.16 - Описание расположения файлов шаблонов для разметки страниц

app.set('views', path.join(__dirname, './app/views'));

app.set('view engine', 'jade');

Чтобы поддерживать Material Design, тот же стиль оформления, что и в мобильном приложении, в разметку была подключена библиотека CSS стилей Bootstrap [4] и расширение для нее material-design. Расширение material-design было модифицировано в соответствии с цветовой схемой мобильного приложения.

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

Листинг 2.17 - Разметка для страницы веб-приложения

doctype html

html(ng-app='todoWeb')

head

meta(charset='utf-8') title Todo

link(rel='stylesheet', href='css/bootstrap.min.css')

link(rel='stylesheet', href='css/material-custom.css')

link(rel='stylesheet', href='css/ripples.min.css')

link(rel='stylesheet', href='css/style.css')

script(src='js/angular.min.js')

script(src='js/jquery-2.2.1.min.js')

script(src='js/bootstrap.min.js')

script(src='js/material.min.js')

script(src='js/ripples.min.js')

script(src='js/controllers/main.js')

script(src='js/services/todos.js')

script(src='js/core.js')

script(src='js/ui/bootstrap-utils.js')

body(ng-controller='mainController')

block content

Jade Template Engine поддерживает модульность. Указанный в листинге 2.17 файл подключается к остальным шаблонам разметки. В результате создания разметки страниц для аутентификации, регистрации, восстановления и изменения пароля получились страницы веб-приложения как на Рис. 2.6

Рис. 2.6 - Экран смены пароля в веб-приложении

Реализация работы веб-приложения

Для реализации клиентского кода веб-приложения используется Angular.js, как было решено на этапе анализа, т.к. он является частью MEAN. Для отдачи страниц в серверном коде реализован модуль web.js. Его код приведен в листинге 2.18

Листинг 2.18 - Модуль для отдачи страниц веб-приложения

var crypto = require('crypto');

var rand = require('csprng');

var express = require('express');

var passport = require('passport');

var passwordUtils = require('../authorization/password-utils');

var Account = require('../models/account');

var router = express.Router();

router.get('/register', function onGet(req, res) {}); router.post('/register', function onPost(req, res) {}); router.get('/login', function onGet(req, res) {}); router.post('/login', passport.authenticate('local'), function onPost(req, res) {});

router.get('/logout', function onGet(req, res) {}); router.get('/reset', function onGet(req, res) {}); router.post('/reset', function onPost(req, res) {}); router.post('/reset-code', function onPost(req, res) {}); router.get('/password', function onGet(req, res) {}); router.post('/password', function onPost(req, res) {}); router.get('/completed', function onGet(req, res) {}); router.get('/', function onGet(req, res) {});

module.exports = router;

Где:

? router.get('/register', function onGet(req, res)) - функция обработки запроса GET по пути /register - возвращает сгенерированную по шаблону страницу регистрации.

? router.get('/login', function onGet(req, res)) - функция обработки запроса GET по пути /login - возвращает сгенерированную по шаблону страницу входа в веб-приложение.

? router.get('/logout', function onGet(req, res)) - функция обработки запроса GET по пути /logout - возвращает сгенерированную по шаблону страницу входа в веб-приложение и выполняет выход из веб-приложения.

? router.get('/reset', function onGet(req, res)) - функция обработки запроса GET по пути /reset - возвращает сгенерированную по шаблону страницу восстановления пароля.

? router.post('/reset', function onPost(req, res)) - функция обработки запроса POST по пути /reset - возвращает страницу для ввода кода восстановления пароля и вызывает отправку кода восстановления пароля на электронную почту пользователя.

? router.post('/reset-code', function onPost(req, res)) - функция обработки запроса POST по пути /reset-code - вызывает проверку указанного пользователем кода для восстановления пароля и в успешном случае меняет пароль на указанный пользователем.

? router.get('/password', function onGet(req, res)) - функция обработки запроса GET по пути /password - возвращает страницу смены пароля для аутентифицированного пользователя.

? router.post('/password', function onPost(req, res)) - функция обработки запроса POST по пути /password - изменяет пароль аутентифицированного пользователя на указанный.

? router.get('/completed', function onGet(req, res)) - возвращает страницу со списком завершенных задач.

? router.get('/', function onGet(req, res)) - возвращает страницу со списком задач.

Для выполнения логики веб-приложения на клиенте был разработан модуль Angular.js для реализации обработки действий пользователя на страницах веб-приложения. Модуль todoWeb объявлен в core.js, и определяет контроллер todoController и сервис todoService. Модуль todoController реализует логику работы с пользовательским интерфейсом. Упрощенный код модуля приведен в листинге 2.19

Листинг 2.19 - Реализация логики работы с пользовательским интерфейсом

angular

.module('todoController', [])

.controller('mainController', ['$scope', '$http', 'Todos', function($scope, $http, Todos) {

Todos.get().success(function(data) {});

Todos.getCompleted().success(function(data) {});

$scope.createTodo = function() {};

$scope.showGroup = function(group) {};

$scope.setCurrentId = function(id) {},

$scope.updateTodo = function() {};

$scope.complete = function(id) {};

$scope.undoComplete = function(id) {};

$scope.delete = function() {};

$scope.updateGroupList = function() {};

$scope.updateCurrentTodos = function() {};

}

]);

Где:

? Todos.get().success(function(data)) - функция для получения текущего списка задач.

? Todos.getCompleted().success(function(data)) - функция для получения списка завершенных задач.

? $scope.createTodo = function() - функция для обработки отправки формы при добавлении новой задачи.

? $scope.showGroup = function(group) - функция для обработки выбора в меню текущей группы для отображения задач.

? $scope.setCurrentId = function(id) - служебная функция для запоминания идентификатора задачи.

? $scope.updateTodo = function() - функция для обработки отправки формы при изменении параметров задачи.

? $scope.complete = function(id) - функция для отметки задачи как завершенной и отправки изменений на сервер.

? $scope.undoComplete = function(id) - функция для отмены завершенности задачи и отправки изменений на сервер.

? $scope.delete = function() - функция для отметки задачи как удаленной.

? $scope.updateGroupList = function() - функция для обновления списка групп задач.

? $scope.updateCurrentTodos = function() - функция для обновления текущего списка задач.

Модуль todoService реализует логику отправки запросов серверу. Сервис взаимодействует с API сервера для веб-приложения. Код сервиса приведен в листинге 2.20

Листинг 2.20 - Реализация логики отправки запросов к серверу

Angular.module('todoService', [])

.factory('Todos', ['$http', function($http) {

return {

get: function() {

return $http.get('/api/todos');

},

getCompleted: function() {

return $http.get('/api/todos/completed');

},

create: function(todoData) {

return $http.post('/api/todos', todoData);

},

update: function(id, todoData) {

return $http.post('/api/todos/update/' + id, todoData);

},

complete: function(id) {

return $http.post('/api/todos/complete/' + id);

},

undoComplete: function(id) {

return $http.post('/api/todos/undo-complete/' + id);

},

delete: function(id) {

return $http.delete('/api/todos/' + id);

}

}

}]);

Где:

? get: function() - функция отправки HTTP запроса GET по пути /api/todos для получения списка задач.

? getCompleted: function() - функция для отправки HTTP запроса GET по пути /api/todos/completed для получения списка завершенных задач.

? create: function(todoData) - функция для отправки HTTP запроса POST по пути /api/todos и передачи JSON-объекта todoData, содержащего информационные поля задачи, для добавления новой задачи на сервере.

? update: function(id, todoData) - функция для отправки HTTP запроса POST по пути /api/todos/update/:id (где id - идентификатор задачи) и передачи JSON-объекта todoData, содержащего информационные поля задачи, для изменения существующей задачи на сервере.

1. complete: function(id) - функция для отправки HTTP запроса POST по пути /api/todos/complete/:id (где id - идентификатор задачи), для отметки задачи как завершенной.

2. undoComplete: function(id) - функция для отправки HTTP запроса POST по пути /api/todos/undo-complete/:id (где id - идентификатор задачи), для отмены отметки задачи как завершенной.

3. delete: function(id) - функция для отправки HTTP запроса DELETE по пути /api/todos/:id (где id - идентификатор задачи), для отметки задачи как удаленной.

Для отображения списка задач в Angular.js используется цикл по значению переменной currentTodos, которая заполняется в результате вызова функции получения списка задач. Angular.js позволяет встраивать переменные JavaScript в текст разметки HTML, тем самым упрощая процесс взаимодействия разметки страницы и кода веб-приложения.

Фрагмент шаблона Jade, который генерирует страницу со списком задач, приведен в листинге 2.21. Переменные Angular.js окружены в двойные фигурные скобки или указаны внутри конструкций языка JavaScript.

Листинг 2.21 - Шаблон Jade, генерирует список задач

.container

#todo-form.row

form.form-group.label-floating

label.control-label(for='taskText') Place for your new task

.input-group

input#taskText.form-control(type='text' ng-model="formData.text")

span.input-group-btn

button.btn.btn-warning.кbtn-fab.btn-fabmini(type="submit", ng-click="createTodo()")

i.material-icons add

#todo-list.row

div.list-group(ng-repeat="todo in currentTodos")

a.list-group-item.panel(style="background: #ffffff;")

span.pull-right

.a.material-icons#iconButton(role='button', data-toggle='modal', data-target='#editTaskModal' data-text="{{todo.todoTaskData.text }}" data-group='{{ todo.todoTaskData.group }}' ng-click="setCurrentId(todo.id)")

| more_horiz h4#taskText(ng-click="complete(todo.id)") {{ todo.todoTaskData.text }}

Представленный фрагмент кода позволяет сделать список, как показано на Рис. 2.7



Рис. 2.7 - Список задач в веб-приложении

3. Руководство пользователя

В результате взаимодействия технологий MEAN (MongoDB, Express.js, Angular.js, Node.js) на стороне сервера и браузера пользователя, взаимодействия мобильного приложения на телефоне пользователя с сервером, получился сервис по управлению списком задач.

Для того чтобы начать пользоваться сервисом по управлению списком задач нужно перейти в браузере на страницу сервиса или установить мобильное приложение на телефон под управлением платформы Android версии 2.3 и выше. На экране входа в сервис нужно нажать кнопку «Sign Up», как показано на Рис. 3.1

Рис. 3.1 - Окно аутентификации в мобильном приложении

В появившейся форме нужно ввести адрес электронной почты, пароль и повтор пароля Рис.3.2

Рис. 3.2 - Окно регистрации в мобильном приложении

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

В случае ошибки при аутентификации пользователя, когда пароль или адрес электронной почты не подходят, сервер возвращает ответ с сообщением «Email does not exists.». Если во время восстановления пароля будет ошибка, сервер вернет сообщение «Error while resetting password. Try again!». Если во время изменения пароля на новый будет ошибка, то сервер ответит сообщением «Error while change password. Try again!». В результате успешного восстановления пароля сервер отправит сообщение «Check your Email and enter the verification code to reset your Password.». Если пароль изменится на новый в результате запроса на изменение пароля, сервер вернет сообщение «Password Successfully Changed». В случае, когда пользователь отправит в запросе на восстановление пароля неверный временный код, сервер ответит сообщением «Code does not match. Try Again!». Если во время регистрации пользователя, указанный при регистрации адрес электронной почты будет уже зарегистрирован в другой учетной записи, сервер вернет сообщение «Sorry. That email already exists. Try again!».

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

В результате откроется форма ввода данных для новой задачи. В форме ввода данных нужно указать текст задачи и группу, к которой относится задача, по умолчанию используется текущая группа, если она есть, или группа «All Tasks». Так же можно указать приоритет задачи. Для того чтобы добавить новую группу нужно выбрать в списке возможных групп пункт «Add New Group» и ввести в появившемся диалоге имя для новой группы. В результате новая группа будет автоматически выбрана Рис.3.3

Рис. 3.3 - Добавление новой задачи

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

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

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

Рис. 3.4 - Выбор группы для отображения задач в мобильном приложении

Рис. 3.5 - Выбор группы для отображения задач в веб-приложении

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

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

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

Рис. 3.6 - Редактирование задачи в веб-приложении

Если удалить задачу, то она пропадет из списка текущих задач. Удаление задачи является необратимой операцией.

Заключение

В результате разработки сервиса для управления списком задач получилось удобное и простое в использовании мобильное приложение и веб-приложение. Мобильное приложение поддерживает много версий платформы Android, при этом оно реализовано с применением принципов Material Design, характерных для современных версий платформы. Интерфейс веб-приложения аналогичен интерфейсу мобильного приложения, за исключением некоторых элементов. Сервер позволяет пользователю получать доступ и управлять своими задачами из одной и той же учетной записи, как из мобильного устройства на платформе Android, так и из браузера.

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

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

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

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

...