Ранее в этом году я опубликовал серию статей о том, как создать мобильное приложение на основе местоположения с использованием HTML5 и Javascript. Если вам понравилась эта серия, вы можете следить за этой новой серией, которая научит вас, как создавать конвертер валют с использованием некоторых технологий, которые вы, возможно, уже используете в своем арсенале мобильной разработки. Как и предыдущий проект, это будет гибридное приложение, построенное на HTML, CSS и JavaScript с поддержкой нескольких сред, таких как jQuery, jQuery Mobile и Cordova (также известная как PhoneGap). В очень творческий момент вдохновения я дал этому приложению очень креативное название «Конвертер валют».
Для тех из вас, у кого нет точного понимания, что такое гибридное приложение , оно создается с использованием веб-технологий, а затем оборачивается в оболочку для конкретной платформы, которая позволяет устанавливать его точно так же, как и нативное приложение.
Для более глубокого обзора этой темы и различий между нативными, гибридными и веб-приложениями посмотрите на собственные , гибридные или веб-приложения? ,
Цель этой серии — не скопировать предыдущий с другим типом приложения. Хотя мы расскажем о веб-хранилище и API уведомлений, в этой серии будут представлены два новых API-интерфейса Cordova: глобализация и API-интерфейс InAppBrowser. Первый был представлен в выпуске 2.2.0, а второй был включен в последнюю стабильную версию (2.3.0). Подробнее о версии 2.2.0 читайте в разделе Что нового в PhoneGap 2.2?
В этой первой и вводной статье я расскажу о функциях приложения, используемых технологиях и его структуре.
Требования к приложению
Как я уже сказал, это приложение очень маленькое и его легко понять. Мы разрабатываем конвертер валют, который позволяет разработчикам обновлять курсы конвертации по мере необходимости на основе RSS-канала валюты Европейского центрального банка ( ЕЦБ ). Одна из наиболее важных функций заключается в том, что после получения курсы обмена валюты сохраняются с помощью API-интерфейса веб-хранилища, поэтому пользователь может использовать приложение в автономном режиме. Кроме того, как только пользователь запустит «Конвертер валют», приложение проверит подключение к Интернету, а если оно недоступно, приложение будет искать ранее сохраненные тарифы.
Основываясь на ленте ECB , я хочу подчеркнуть, что он будет поддерживать только валюты, предоставленные фидом, и ничего больше. Чтобы улучшить взаимодействие с пользователем, приложение сохранит последнюю валюту, использованную для конвертации, поэтому при следующем запуске приложения пользователь найдет свою последнюю использованную валюту. Кроме того, будут также сохраняться дата и время последнего обновления, чтобы пользователь знал, насколько недавними (или старыми) являются его коэффициенты конверсии.
По умолчанию текст будет отображаться на английском языке, но он будет разработан для поддержки других языков (что, безусловно, важно при разработке приложения для международных валют). Если мобильное устройство использует язык, поддерживаемый «Конвертером валют», приложение будет автоматически переведено после его инициализации. Помимо английского, в окончательном хранилище будут также поддерживаться итальянский, французский и испанский языки. Извините, но я не могу перевести на другие языки. Однако, как только я опубликую репозиторий, вы сможете вносить дополнительные переводы с использованием других языков.
Технологии задействованы
Во введении я описал, какие технологии будут использоваться для создания кода, однако следующий список даст вам более подробное понимание того, что мы будем использовать:
- HTML5 : используется для создания разметки страниц.
- CSS : большинство улучшений CSS будет сделано jQuery Mobile, поэтому я буду использовать всего несколько строк пользовательского кода CSS.
- JavaScript : это язык, используемый для написания бизнес-логики, так что это действительно необходимый навык для понимания этой серии.
- jQuery : он будет использоваться в основном для выбора элементов и прикрепления обработчиков событий.
- jQuery Mobile : эта платформа используется для автоматического улучшения интерфейса приложения.
- Cordova (PhoneGap) : Cordova будет использоваться для переноса файлов, поэтому вы можете скомпилировать их и установить результат, как родное приложение.
Поскольку версия 1.3.0 jQuery Mobile еще не стабильна (однако на момент написания статьи она находится в статусе «кандидата на выпуск»), я буду использовать версию 1.2.0. Если вам нужно напомнить о различиях между этими версиями, я подробно описал их в статьях Что нового в jQuery Mobile 1.2.0? и создавать списки и всплывающие окна в считанные минуты, используя jQuery Mobile . Используемая версия Cordova будет версии 2.3.0 для использования следующих новых API:
- API глобализации : предоставляет
объект для получения информации и выполнения операций, специфичных для локали пользователя и часового пояса.
Например, он предоставляет методgetPreferredLanguage()numberToString()Подробнее об этом API в официальном документе Globalization . - InAppBrowser API :
это веб-браузер, который отображается в вашем приложении при использовании вызова
. Вы можете найти больше информации об этом API, прочитав официальный документ InAppBrowser .window.open - API веб-хранилища : предоставляет доступ к параметрам хранилища устройств. Если вы хотите получить подробное объяснение, прочтите «Обзор API веб-хранилища» .
Как и в предыдущей серии, «Конвертер валют» будет разработан с учетом того, что компиляция будет выполняться с использованием облачного сервиса Adobe , называемого Adobe PhoneGap Build . Это будет сам сервис, который включает правильную библиотеку Cordova для каждой платформы во время компиляции. Чтобы выяснить причины использования этой технологии, взгляните на обсуждение, приведенное в первой части серии . Ссылка на окончательный, завершенный исходный код будет дана в заключительной части серии и размещена в репозитории BitBucket .
Структура проекта
Для запуска проекта создайте папку и переименуйте ее в «конвертер валют». Сейчас. создайте три подпапки в этой основной папке: css, images и js. Теперь загрузите библиотеки jQuery (я буду использовать версию 1.8.3) и jQuery Mobile. Поместите jQuery и JavaScript-файл jQuery Mobile в папку «js», а затем поместите jQuery Mobile CSS-файл в папку «css». Наконец, поместите изображения в комплекте с jQuery Mobile в папку «images».
В корне папки проекта я создам файлы HTML, файл конфигурации Adobe PhoneGap Build , заставку по умолчанию и значок приложения. Помимо файлов, которые мы уже разместили, мы напишем следующее:
- index.html : это точка входа в «Конвертер валют» и единственная страница, с которой пользователь будет взаимодействовать. Будучи точкой входа, я помещу ссылки на библиотеки, используемые в разделе
<head>Он будет иметь кнопку для обновления коэффициентов конверсии, а также кнопку для доступа к странице кредитов. - aurelio.html : Это страница кредитов, так что ничего особенного здесь нет.
- style.css : файл, содержащий несколько пользовательских строк CSS, используемых приложением.
- jquery.mobile.config.js : он будет содержать пользовательскую конфигурацию платформы jQuery Mobile.
- currency.js : Этот файл представляет объект валюты и будет иметь методы для извлечения, сохранения и загрузки валют с использованием API веб-хранилища. Кроме того, у него будет метод сравнения, который будет использоваться для сортировки.
- functions.js : Он будет содержать функцию для инициализации проекта, перевода страницы
index.html - settings.js : этот файл будет использоваться для сохранения и загрузки настроек приложения, упомянутых ранее, включая последние использованные валюты и время последнего обновления курса обмена валют.
- translation.js : будет содержать объект, содержащий строки для перевода страницы
index.html - config.xml : этот XML-файл будет содержать метаданные приложений и будет использоваться облачной службой Adobe для хранения настроек, таких как номер версии приложения и содержимое пакета.
Помимо этого списка, «Конвертер валют» будет иметь несколько дополнительных изображений, хранящихся в папке «images», а также один из плагинов, которые я разработал, под названием Audero Text Changer . Это очень легкий плагин jQuery Mobile, который позволяет легко изменять текст элементов на ваших страницах, не нарушая улучшений, внесенных фреймворком. Итак, как вы можете догадаться, я буду использовать этот плагин для перевода приложения на различные разговорные языки. Если вам нужна дополнительная информация об этом плагине, я написал об этом в разделе «Настройка мобильного интерфейса jQuery с помощью специализированных плагинов» .
Вывод
В этой первой части я проиллюстрировал особенности и структуру «Конвертера валют». Я также показал вам технологии, которые будут задействованы для его реализации. Теперь, когда вы знаете, что вам нужно, чтобы следовать остальной части серии, найдите время, чтобы изучить технологии, чтобы подготовиться к следующей части серии, где я углублюсь в код и опишу, как создать HTML-страницы.