52
2.3 Программное обеспечение задачи
2.3.1 Общие положения
В Git коммиты обозначаются хэшами, которые имеют примерно такой вид:
fb25cd8dcdd513ba55189e81beb297c44e8edc55 но, как правило, сокращаются до
вида: fb25cd
Хэш также включают в себя SHA-1-хэши патча включая заголовки (и т.к.
родитель это один из заголовков, хэш включает в себя хэш родителя, который
включает хэш его родителя и т.д. до самого начала)
Отличительное свойство такого хэширования, в том, что отдельно взятый
коммит не может быть изменен.
Деревья
Одна из важнейших вещей в Git это дерево директорий, содержащее
некоторый ассортимент файлов, любой коммит имеет своё ассоциированное
дерево, которое отражает состояние репозитория для этого коммита. Деревья также
обозначаются хэшами.
Ветки
Ветки используются для генерации патча, т.е. копируется рабочая
директория, в неё производятся изменения и для того, что бы сгенерировать патч,
необходимо получить разницу между двумя дирректориями.
Структура работы GitHub показана на рисунке 2.4.
53
Рис. 2.4 – Структура работы GitHub
2.3.2 Характеристика базы данных
При выборе платформы для сборки приложений был выбор между тремя
подобными друг другу решениями каждое из которых имеет свои особенности и
нюансы эти платформы:
- Cordova(CLI)
- PhoneGap(CLI) - Phonegap build
Зачастую эти решения воспринимают как одно целое, но это не так, для того
что бы понять это нужно сделать небольшой исторический экскурс:
В 2009 году была создан PhoneGap внутри молодой компании Nitobi.
PhoneGap был создан как среда с открытым кодом, с помощью которой возможно
получить доступ к нативным функциям устройства. Цель проекта: обеспечить
возможность построения мобильных приложений исключительно на web-
технологиях HTML+CSS+JS при этом с возможностью вызова нативного кода.
В 2011 году стартап Nitobi купила компания Adobe первоначальный код был
передан компании Apache Foundation. Этот исходный код остался открытым, но
ему дали новое имя «Cordova».
54
Для работы Cordova нужно устанавливать SDK мобильных платформ. Но для
облегчения разработки имеется облачный сервис Phonegap build, который
компелирует html5 код в приложение, без дополнительных усилий.
Если описывать разницу в двух словах:
Cordova – это фреймовик с открытым кодом, которым управляет Apache.
PhoneGap - это Cordova+инфраструктура от Adobe
- Cordova это OpenSource, а PhoneGap принадлежит Adobe.
- Кроме разных имен пакетов, у PhoneGap и Cordova, разная
документация.
- При выходе новых версий ОС (например iOS 64-bit), Cordova
обновляется быстрее, чем PhoneGap.
- У Cordova нет облачного сборщика проектов.
При выборе я руководствовался удобством пользования облачным сервисом
и интеграцией с системой контроля версий GitHub, по этой причине я использовал
PhoneGap build, ниже опишу работу этого сервиса:
Для сборки приложения необходимо
а) Зарегистрироваться на сервере build.phonegap.com,
б) Войти под своей учетной записью
в) нажать кнопку “+new app”
г) ввести адрес репозитория github в котором находиться ваше приложение
или же загрузить ваше приложение в архиве .zip (рисунок 2.5)
Рис. 2.5 – Поле ввода адреса репозитория github
д) Выбрать систему, под которую необходимо собрать приложение в нашем
случае это Android(рис. 2.6)
55
Рис. 2.7– Выбор системы под которую будет осуществляется сборка
Далее сервис скомпелирует программу для операционной системы Android,
это файл с расширением .apk, который будет загружен на ваш компьютер.
В первую очередь надо установить клиент git: обязательно потребуется
консольный клиент, графический клиент можно установить по желанию, исходя из
своих предпочтений. На Unix системах можно воспользоваться менеджером
пакетов (yum на fedora и подобных или apt-get на debian, ubuntu и подобных)
вместо того, чтобы скачивать установщик с сайта. Консольный клиент, аналог
командной строки(рисунок 2.8)
Рис. 2.8 – Консольный клиент Git
Если использовать графический клиент, нажатия кнопок сводятся к
выполнению определенных команд консольного клиента, но зачастую
возможности графических клиентов ограничены по сравнению с консолью.
После необходимо зарегистрироваться на https://github.com/. Далее можно
будет создавать свои репозитории или присоединиться к работе над проектами
коллег, сделав fork другого репозитория.
56
Описывать дальнейшие инструкции по работе с Git в данной работе я не
буду, так как по этой теме имеется очень много информации, общий принцип
работы был описан выше.
Node.js это серверная технология, основой которой является движок
JavaScript под названием V8, разработанный компанией Google. Это легко
масштабируемая система, работающая с асинхронным вводом – выводом а не с
отдельными процессами или потоками. Node.js отлично подходит для
вебприложений, если они не выполняют вычислений, но к ним происходят частые
обращения. Обычные веб-сервера, например такие, как Apache, при любом запросе
на веб-ресурс выделяют отдельный программный поток или вызывают новый
процесс для обработки этого запроса.
Если даже в текущий момент времени Apache достаточно быстро
реагирует на подобные запросы, а после завершения запроса всё приводит к
изначальному состоянию, при этом сервер задействуется множество ресурсов. Как
результат при повышении популярности веб-приложения возникают предпосылки
для серьезных проблем производительности. Node же, прослушивает конкретные
события и когда эти события происходят реагирует на них соответствующим
образом. Node не блокирует никаких запросов, дожидаясь завершения действий,
инициируемых событием, а сами события обрабатываются в относительно простом
цикле обработки событий по принципу «первым пришел — первым обслужен».
Node-приложения создаются с помощью языка JavaScript (или альтернативных
языков, компилирующихся в JavaScript), который ничем не отличается от языка,
применяемого в приложениях на стороне клиента. Однако в отличие от языка
JavaScript, используемого в браузере, для Node нужно создать среду разработки.
Node можно установить на платформе Unix/Linux, Mac OS или Windows.
В качестве небольшого примера самый простой сервер на node.js будет
иметь следующий код:
// загрузка модуля http var http = require('http');
// создание http-сервера http.createServer(function (req, res) {
// заголовок контента
res.writeHead(200, {'content-type': 'text/plain'});
57
// запись сообщения и завершение сигнальной связи res.end("Hello,
World!\n");
}).listen(8124); console.log('Server running on 8124');
2.3.3 Структурная схема пакета
Так как изначально было задумано создать html5 приложение, был
проанализирован ряд решений. Самым очевидным казалось решение использовать
библиотеку jQueryMobile, но при создании с помощью этой библиотеки тестовых
приложений их отзывчивость была на очень низком уровне, имелась разительная
разница, заметная без тестов с нативными приложениями, отклик от кнопок более
300мс и т.д.
Также важным моментом являлось наличие в фреймворке готовых
компонентов, таких как: кнопки, боковое меню и т.д. время на повторную
разработку которых хотелось сэкономить. К тому же необходимо была
производительность, что бы приложение могло конкурировать с нативными
приложениями.
Для решения этих проблем имеются готовые инструменты, которые
позволяет разрабатывать: быстрые, отзывчивые и функциональные
html5приложения. Эти инструменты называются Framework7 и ionicframework,
выбор пал на Framework7 так как в нём на момент разработки имелась лучшая
поддержка функциональности приложения для устройств как на Android так и на
iOS, что в будущем поможет без труда перенести приложение на другую
платформу.
Framework7 который в себе содержит следующие функции:
- High-performance Animation - Анимации получаются
действительно очень быстрые
- fast-clicks - решает проблему задержки 300мс без сторонних
библиотек
- Template7 - «движок» шаблонов, подобный Handlebars, но
занимает меньше памяти работает значительно быстрее
58
- Dom7 - более быстрая и прозрачная замена jQuery
- Navigation / Router — множество вариантов переходов и их
контроля
- Поддержка стилей, включая поддержку material design
- Большой список встроенных компонентов, таких как forms,
buttons, list view, pull to refresh, infinite scroll, slide menu итд
- Свайпы - встроенные свайпы на все случаи жизни: вызвать
меню свайпом, возврат к предыдущему экрану, удалить элемент и т.д.
Структура приложения следующая:
- index.html - дизайн приложения
- about.html - дизайн дополнительных страниц
- app.js - файл инициализации и настроек приложения
- css/app.css - таблицы стилей
- lib/framework7.js - сам фреймворк
- lib/framework7.material.css - дизайн всех элементов и
компонентов в стиле material
При разработке клиентского приложения я получил следующую структуру,
которая отображена на рисунке 2.9:
Рис. 2.9– Структура клиентского приложения при разработке
59
Вообще Framework7 это кроссплатформенное решение для смены
платформы, например на iOS нам потребуется сменить пользовательский
интерфейс для этого необходимо будет сменить material.css на ios.css ну и конечно
же подправить my-app.css. При какой то нестандартной верстке возможно
потребуется немного подправить index.html, но в целом структура приложения
остается той же, т.е. при необходимости портировать приложение например на
устройства под управлением iOS нам не потребуется изучать новую технологию,
достаточно воспользоваться таким сервисом как Phonegap.
2.3.4 Описание программных модулей
Brackets позиционируется как текстовый редактор, но по факту он больше
похож на полноценную IDE. При стандартной установке мы получаем следующий
функционал:
- Плагин для предварительного просмотра, работает только в
браузере Google Chrome, меняете код в brackets, сразу же появляются
изменения на странице, просмотра, своеобразный wysiwyg редактор.
- Подсветка синтаксиса
- Подсказки при редактировании CSS, HTML, JavaScript файлов
- Плагин для редактирования CSS напрямую из HTML
Внешний вид без дополнительных плагинов отображен на рисунке 2.10.
60
Рис. 2.10 – Интерфейс Brackets без дополнительных плагинов
Но огромное количество плагинов, которые были разработаны для
Brackets позволяет превратить его в полноценное IDE решение.
WebStorm – среда для разработки на JavaScript, которая подходит как для
front-end-разработки, так и для создания приложений на Node.js.
Главное достоинство WebStorm – это удобный и умный редактор JavaSсript,
HTML и CSS, который также поддерживает языки, такие как TypeScript,
CoffeeScript, Dart, Less, Sass и Stylus и фреймворки, например, Angular, React и
Meteor.
WebStorm, как и другие IDE, разработанные на основе платформы IntelliJ
IDEA, делает разработку проще и удобней, обеспечивая подсветку и авто
дополнение кода, его анализ по ходу редактирования, быструю навигацию и
переработку кода и предоставляя разработчику мощные инструменты отладки и
интеграцию с системами управления версиями. WebStorm «понимает» структуру
проекта и код, обнаруживает возможные проблемы и предлагает их решение.
Встроенные в IDE инструменты для тестирования и работы с проектом помогут в
разработке и сделают ее удобней и продуктивней.
Основные особенности
61
- отладка кода на JavaScript, а также на ECMAScript
2015+, TypeScript, CoffeeScript и Dart с использованием source maps
- отладка Node.js приложений
- интеграция с системами управления версиями Git, GitHub,
Subversion, Perforce, Mercurial, CVS
- интеграция с системами отслеживания ошибок (ESLint, JSHint,
JSLint,
TSLint, Stylelint)
Интерфейс Webstorm отображен на рисунке 2.11.
Рис. 2.11 – Интерфейс WebStorm
2.4 Контрольный пример реализации проекта и его описание
Для тестирования отдельных модулей работы c базой данных в код
приложения были внесены специальные функции, позволяющие анализировать
базу данных и, производить логирование ошибок, которое отображалось в
системном журнале. Они также известны как unit-тесты. Для примера, при
изменениях в базе данных проводилась проверка целостности базы данных после
чего при необходимости выводилось сообщение в системный log.
Были проведены приведенные ниже тесты.