Разработка мобильных приложений при помощи Intel XDK. Первый опыт
Invite pending
Сегодня мы хотим немного рассказать вам про первый опыт в разработке мобильных приложений под систему Android, используя технологии HTML, CSS и JavaScript и среду разработки Intel XDK, а также представить наше первое приложение, написанное в ней — ValuteChecker.
Из названия можно догадаться, для чего оно предназначено. С его помощью вы можете отслеживать курс валют и драгоценных металлов, конвертировать одну валюту в другую и просматривать динамику выбранной валюты, и все это — по курсу Центрального Банка.
Несколько недель назад мы задались целью разработать такое приложение для мобильных устройств, которое должно было быть удобным и полезным для пользователей, имело хорошую отзывчивость и высокую производительность, а также обладало только самыми необходимыми функциями, которыми наиболее часто встречаются.
Основными проблемами, с которыми пришлось столкнуться в ходе разработки первого приложения, оказались:
Кроме того, пришлось решить задачи, связанные непосредственно с самим приложением:
Intel XDK — набор инструментов, предназначенных для создания кроссплатформенных приложений и игр (!!!). Фактически, вы просто создаете веб-страницу, которая помещается в специальный браузер, дающий возможность взаимодействовать с вашим устройством при помощи веб-сервера Apache Cordova.
Очень большим плюсом является поддержка редактора Adobe Brackets, который умеет работать с большим количеством языков. Кроме того, в среде разработке вы также найдете огромное количество примеров, шаблонов, веб-сервисов, библиотек и фреймворков, которые помогут вам в процессе разработки. А что касается игр, то здесь у каждого разработчика могут потечь слюни — Phaser, Cocos2D, Pixi, EaseJS… Intel XDK интуитивно понятен и очень удобен.
Кстати, еще одна примечательная фишка — очень быстрый «эмулятор» (по сути, это даже не эмулятор, а просто браузер), который позволяет просматривать ваше приложение и выполнять с ним те или иные действия (потрясти экран, изменить уровень заряда, сигнала и т.д.)
Единственное, к минусам можно отнести то, что данная программа требовательна к оперативной памяти, а также то, что система имеет несколько недоработанный визуальный редактор, который не только имеет множество багов (например, когда по каким-то причинам объект не хочет перетаскиваться на рабочее пространство, или когда не отображается содержимое страницы), но и достаточно тормозной. Однако, визуальный редактор имеет огромный потенциал, и если разработчики продолжат его дорабатывать, то мы получим на выходе действительно годный проект!
Также не совсем понравилось и то, что примеры игр, созданные на базе Intel XDK, достаточно тормознутые и невзрачные. Хотя, опять же, возможно это вопрос оптимизации, поскольку в нашем приложении Valute Checker графики рисуются при помощи Chart.js, и никаких нареканий не было!
В процессе создание проекта вам предлагают выбрать несколько вариантов развития событий:
Первая проблема, как мы уже описывали, заключалась в выборе подходящего CSS фреймворка для написания мобильного приложения. Мы перепробовали несколько — Ratchet, Jquery Mobile и App Framework 3. Лучшим оказался третьим, поскольку он решал сразу и вторую проблему, связанную с задержкой в 300 мсек перед нажатием. Сам по себе, фреймворк достаточно простой, однако он имеет базовые элементы, такие как кнопки, формы, панели, навигацию, списки и т.д. Кроме того, возможности можно расширять, используя как готовые плагины, так и сторонние (например, Chart.js).
Далее, осталось разобраться в том, как получать информацию из Центробанка. Все было бы здорово, если бы ЦБ предоставил доступ CORS, но увы… Поэтому, пришлось создавать на сервере PHP скрипт, который получал бы оттуда информацию, а дальше достаточно было открыть доступ CORS со своего домена и работать с ним.
И последняя проблема заключалась в реализации локального хранения о закрепленных в списке валютах. Согласитесь, не удобно постоянно искать нужную валюту каждый раз, когда вы запускаете приложение. Достаточно зафиксировать его, и время на поиски сократится до минимума! Для решения данной проблемы потребовалось изучить такую замечательную вещь, как локальное хранилище. О нем подробно вы можете прочитать здесь.
В итоге, у нас получился достаточно интересный проект, который имеет удобный интерфейс и высокую производительность для HTML5 приложения.
Большое спасибо за внимание!
Из названия можно догадаться, для чего оно предназначено. С его помощью вы можете отслеживать курс валют и драгоценных металлов, конвертировать одну валюту в другую и просматривать динамику выбранной валюты, и все это — по курсу Центрального Банка.
В начале было слово...
Несколько недель назад мы задались целью разработать такое приложение для мобильных устройств, которое должно было быть удобным и полезным для пользователей, имело хорошую отзывчивость и высокую производительность, а также обладало только самыми необходимыми функциями, которыми наиболее часто встречаются.
Основными проблемами, с которыми пришлось столкнуться в ходе разработки первого приложения, оказались:
- Выбор подходящего CSS фреймворка для верстки дизайна приложения.
- Решение так называемой «Проблемы задержки в 300 мсек». После нажатия происходила небольшая задержка, которая вызывала дискомфорт.
Кроме того, пришлось решить задачи, связанные непосредственно с самим приложением:
- Получение курса валют и обход CORS.
- Реализация сохранения данных для закрепленных в меню валют.
Что такое Intel XDK?
Intel XDK — набор инструментов, предназначенных для создания кроссплатформенных приложений и игр (!!!). Фактически, вы просто создаете веб-страницу, которая помещается в специальный браузер, дающий возможность взаимодействовать с вашим устройством при помощи веб-сервера Apache Cordova.
Очень большим плюсом является поддержка редактора Adobe Brackets, который умеет работать с большим количеством языков. Кроме того, в среде разработке вы также найдете огромное количество примеров, шаблонов, веб-сервисов, библиотек и фреймворков, которые помогут вам в процессе разработки. А что касается игр, то здесь у каждого разработчика могут потечь слюни — Phaser, Cocos2D, Pixi, EaseJS… Intel XDK интуитивно понятен и очень удобен.
Кстати, еще одна примечательная фишка — очень быстрый «эмулятор» (по сути, это даже не эмулятор, а просто браузер), который позволяет просматривать ваше приложение и выполнять с ним те или иные действия (потрясти экран, изменить уровень заряда, сигнала и т.д.)
Единственное, к минусам можно отнести то, что данная программа требовательна к оперативной памяти, а также то, что система имеет несколько недоработанный визуальный редактор, который не только имеет множество багов (например, когда по каким-то причинам объект не хочет перетаскиваться на рабочее пространство, или когда не отображается содержимое страницы), но и достаточно тормозной. Однако, визуальный редактор имеет огромный потенциал, и если разработчики продолжат его дорабатывать, то мы получим на выходе действительно годный проект!
Также не совсем понравилось и то, что примеры игр, созданные на базе Intel XDK, достаточно тормознутые и невзрачные. Хотя, опять же, возможно это вопрос оптимизации, поскольку в нашем приложении Valute Checker графики рисуются при помощи Chart.js, и никаких нареканий не было!
Процесс создания
В процессе создание проекта вам предлагают выбрать несколько вариантов развития событий:
- Создать голое приложение без поддержки Cordova — самый простой вариант, однако вы не сможете взаимодействовать с устройством.
- Создать приложение с поддержкой Cordova — данный вариант подойдет для создания более сложных приложений. При этом, появляются огромные возможности в плане взаимодействия с самим мобильным устройством: возможность включить камеру, просмотреть контакты, воспроизвести звук и т.п.
- Создать приложение, используя готовые шаблоны на базе фреймворка App Framework 3. — один из самых удобных вариантов, т.к. вам предоставляют не только доступ к Cordova, но и сразу установленные стили. К единственному минусу можно отнести то, что на офф. сайте Intel документация написана очень скромно, поэтому придется все осваивать самостоятельно.
Решение проблем
Первая проблема, как мы уже описывали, заключалась в выборе подходящего CSS фреймворка для написания мобильного приложения. Мы перепробовали несколько — Ratchet, Jquery Mobile и App Framework 3. Лучшим оказался третьим, поскольку он решал сразу и вторую проблему, связанную с задержкой в 300 мсек перед нажатием. Сам по себе, фреймворк достаточно простой, однако он имеет базовые элементы, такие как кнопки, формы, панели, навигацию, списки и т.д. Кроме того, возможности можно расширять, используя как готовые плагины, так и сторонние (например, Chart.js).
Далее, осталось разобраться в том, как получать информацию из Центробанка. Все было бы здорово, если бы ЦБ предоставил доступ CORS, но увы… Поэтому, пришлось создавать на сервере PHP скрипт, который получал бы оттуда информацию, а дальше достаточно было открыть доступ CORS со своего домена и работать с ним.
И последняя проблема заключалась в реализации локального хранения о закрепленных в списке валютах. Согласитесь, не удобно постоянно искать нужную валюту каждый раз, когда вы запускаете приложение. Достаточно зафиксировать его, и время на поиски сократится до минимума! Для решения данной проблемы потребовалось изучить такую замечательную вещь, как локальное хранилище. О нем подробно вы можете прочитать здесь.
Итоги
В итоге, у нас получился достаточно интересный проект, который имеет удобный интерфейс и высокую производительность для HTML5 приложения.
Большое спасибо за внимание!