Добрый день!

Цитаты. Случайные цитаты.

Буквально вчера я выпустил свое второе мобильное приложение.

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

Итого вышло, что используя уже существующие наработки и некоторые знания от начала проектирования, программирования и выпуска прошло всего лишь полторы недели: 9 мая я начал продумывать и проектировать, а уже 19 мая выложил приложение в сеть.

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

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

Более подробное описание проектирования и какие технологии использовались под катом, добро пожаловать, а если под кат идти не хочется то ссылка на приложение: Цитаты. Случайные цитаты.

Были учтены ошибки в проектировании и программировании игры Circle Kill. Я полностью решил отказаться от canvas и от некоторых возможностях масштабирования и подгонки под экран, так как они показались мне избыточными. Также я решил что стоит придумать более простой дизайн, название, чтобы оно проще искалось в google play.

В общем к концу проектирования приложения я принял следующие решения:

  1. Отказаться от Canvas
  2. Не использовать Sqlite
  3. Больше внимания уделить дизайну
  4. Сразу заложить использование звуков в приложении
  5. Что приложение будет доступно только в Landscape режиме
  6. Обязательна функция добавления цитат в избранное

Итого для создания я использовал следующие технологии:

Язык/Технологии Библиотеки/плагины чужие Библиотеки/плагины 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.

Скачать приложение: “Цитаты. Случайные цитаты”

1 2 3


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

you're currently offline