Добрый день!
Буквально вчера я выпустил свое второе мобильное приложение.
Задача стояла достаточно простая, хотелось понять, насколько быстро получится при помощи веб технологий и Cordova создать мобильное приложение.
Итого вышло, что используя уже существующие наработки и некоторые знания от начала проектирования, программирования и выпуска прошло всего лишь полторы недели: 9 мая я начал продумывать и проектировать, а уже 19 мая выложил приложение в сеть.
Изначально я думал что будет интересно сделать приложение с правилами дорожного движения, и уже начав проектировать интерфейс и базу данных решил проанализировать вообще что там в google play и насколько много приложений уже там существует. Посмотрев на поисковую выдачу я взгрустнул и понял что эта идея тупа и я, конечно, не прав. Никому правила дорожного движения не нужны.
Тогда, как то самом собой пришла идея генератора цитат. Я подумал что для спринта и для создания минимального генератора контента это идея хороша. Конечно в поисковой выдаче приложения такого типа уже существуют, но все же их поменьше.
Более подробное описание проектирования и какие технологии использовались под катом, добро пожаловать, а если под кат идти не хочется то ссылка на приложение: Цитаты. Случайные цитаты.
Были учтены ошибки в проектировании и программировании игры Circle Kill. Я полностью решил отказаться от canvas и от некоторых возможностях масштабирования и подгонки под экран, так как они показались мне избыточными. Также я решил что стоит придумать более простой дизайн, название, чтобы оно проще искалось в google play.
В общем к концу проектирования приложения я принял следующие решения:
- Отказаться от Canvas
- Не использовать Sqlite
- Больше внимания уделить дизайну
- Сразу заложить использование звуков в приложении
- Что приложение будет доступно только в Landscape режиме
- Обязательна функция добавления цитат в избранное
Итого для создания я использовал следующие технологии:
| Язык/Технологии | Библиотеки/плагины чужие | Библиотеки/плагины VNBStudio |
|---|---|---|
| JavaScript | jQuery | cssOwl.js |
| Backbone.js | toolsOwl.js | |
| Grunt.js | ||
| PHP | CodeIgniter | CI-viewOwl |
| MySql | ||
| Intel XDK IDE (Cordova) | cordova-plugin-statusbar | |
| cordova-plugin-device | ||
| admob plugin |
Начав работу над кодом я сначала сделал внешний вид приложения и все основные интерфейсные штуки подняв обычный тестовый домен на apache и сделал по сути обычный сайт-прототип свое приложения используя для дебага обычный браузер в режиме просмотра мобильной версии.
Когда все основные интерфейсные вещи были готовы я импортировал свой html код в intel xdk и уже начал разработку на реальном устройстве (все тесты были проведены на реальном Nexus 4 и различных виртуальных машинах с разными версиями android).
Для реализации масштабирования шрифтов и контейнеров я использовал небольшую самописную библиотеку cssOwl.js которая получает в себя высоту и ширину экрана и уже высчитывает все размеры, достаточно их подставить через jQuery к своим DOM элементам.
Для реализации вывода статичных текстов в приложении я решил их подгружать по мере надобности через обычный ajax внутри приложения. стало быть какими бы огромными эти тексты не были, они не подгружаются вместе со основным кодом, а только по мере надобности.
Первая сложность с которой я столкнулся – как реализовать хранение – обновление, постоянство сохранения id этих самых цитат, и как сделать так, чтобы все эти цитаты не грузились разом вместе со всем JavaScript и не тормозили, ведь их будет тысячи, плюс сделать задел на будущее, если придется синхронизировать приложение с удаленным сервером. И конечно придумать как масштабировать все это дело.
Подумав и порисовав схемы пришла в голову мысль создать один JavaScript объект, который будет загружаться при старте приложения и хранить в себе название базы данных, её версию, дату изменения, количество записей и собственно список id этих самых записей. А сами цитаты разместить: каждую в отдельном файле, который представляет из себя json с именем автора цитаты и её текстом, id цитаты – название файла (пример 424.dbt). Соответственно подгрузка цитаты происходит по тому же принципу что и вывод статичных текстов, генератор генерирует id цитаты, который он берет из JavaScript объекта описания базы и подгружает лишь её одну.
Далее я начал писать систему хранения избранных цитат. Для этого я решил использовать обычный localStorage браузера, благо он не обнуляется при обновлении приложения. Получилось все просто – человек добавляет цитату в избранное и её id записывается в localStorage. Кстати, настройки активного-неактивного звукового сопровождения приложения хранятся там же в localStorage.
Следующей задачей было написать инструмент для генерации базы данных цитат. Для этого мне и понадобился CodeIgniter и MySql. CI был выбран по той причине что весь проект студии VNBStudio основан на CodeIgniter и мне бы хотелось в дальнейшем этот самый генератор включить в общую инфраструктуру проектов (как она организована я возможно расскажу позже). В общем была создана таблица в MySql и обычная форма добавления цитат, путем нехитрого копипаста цитаты туда были закинуты. А сама генерация тоже проста как мычание – php просто генерирует файлы базы приложения в указанное место, далее необходимо просто переместить эти файлы в проект Cordova перед билдом релиза.
Далее я перешел к тестированию и отладке приложения. Проблемы возникли с плагином cordova-splashscreen (я не указал его в таблице выше, так как он был удален из проекта), он крайне некрасиво растягивает картину экрана загрузки по экрану. Поэтому была принято решения сделать свою загрузку на JavaScript. Пока код загружается я просто помещаю на экране gif картинку с анимированными точками – загрузка идет.
Таким нехитрым образом на все работы ушло 10 вечеров, после основных дел.
Если вдруг эта статья кому то окажется интересна, задавайте вопросы в комментариях, возможно некоторые моменты разработки нуждаются в более подробном описании, или же вы просто хотите сказать в чем я не прав, поспорить, также пишите в комментариях.
Через некоторое время появится подробный пресс релиз приложения. Размещу я его так же тут – постом выше.
Статья получилась длинноватой, конечно.
Спасибо за внимание, Anders.
PS. Для рисования графических элементов использовался обычный Photoshop.
Скачать приложение: “Цитаты. Случайные цитаты”
