PhoneGap: создание читателя ленты новостей

Это третья и последняя часть серии об Audero Feed Reader . В этой статье вы узнаете, как создать файл конфигурации и завершить проект, который мы начали на предыдущем уроке.

1. Завершение приложения

Лучший отзывчивый макет

В первой части этой серии я писал о важности атрибута data-iconpos для ссылок в data-iconpos и нижнем колонтитулах. В этом разделе вы узнаете, почему мы их используем. Я использую его с небольшим количеством JavaScript, чтобы создать лучший адаптивный эффект. Я использую его, чтобы скрыть текст ссылок, где он применяется. Цель этого — сэкономить место, что важно, особенно для небольших экранов. Но что, если экран достаточно большой, скажем, больше 480 пикселей, для отображения текста? Для этого мы прослушаем событие pagebeforecreate и прикрепим обработчик, метод updateIcons() класса Application , чтобы он реагировал после его updateIcons() . Как видно из названия, событие запускается до того, как страница и ее виджеты инициализируются. Наш обработчик сначала проверит, превышает ли страница 480px, и, если это так, удалит атрибут data-iconpos , поэтому будет показан текст ссылки.

Код, который реализует этот метод, выглядит следующим образом:

2. Конфигурация сборки

Служба Adobe PhoneGap Build позволяет указывать метаданные вашего проекта с помощью файла конфигурации с именем config.xml . Он следует спецификации виджета W3C и должен оставаться в корне приложения на том же уровне index.html . Первая строка — это объявление XML, а корнем документа является <widget> , имеющий несколько доступных атрибутов. Наиболее важными из них являются id , уникальный идентификатор приложения и version , в которой указывается версия приложения. Внутри <widget> вы можете написать метаданные.

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

В файле конфигурации у нас есть:

• Имя (обязательно): это имя приложения. Это не должно быть уникальным.
• Описание (обязательно): текст, указывающий, для чего предназначено ваше приложение. Это очень важно, потому что оно будет отображаться как описание вашего приложения на торговых площадках.
• Автор (необязательно): автор приложения. Он имеет два необязательных свойства: href, URL-адрес домашней страницы разработчика или компании и адрес электронной почты, адрес электронной почты разработчика или компании. К сожалению, вы можете указать только одного автора, поэтому у вас не может быть подробностей для нескольких авторов здесь.
• Значок (необязательно): этот значок будет отображаться на устройствах, на которых установлено приложение. Если он не указан, будет использоваться логотип Cordova.
• Всплеск (необязательно): устанавливает заставку приложения, это изображение, которое отображается при загрузке.
• Предпочтение (необязательно): набор предпочтений, которые вы хотите применить к своему приложению. Это закрытый тег, и вы можете иметь ноль или более тегов <preference> внутри файла. У него есть два атрибута, и оба являются обязательными: name и value . Есть несколько предпочтений, которые вы можете определить, но самым важным, на мой взгляд, является версия Cordova.
• Доступ (необязательно). Предоставляет вашему приложению доступ к ресурсам других доменов — в частности, оно позволяет вашему приложению загружать страницы из внешних доменов, которые могут охватить весь веб-просмотр. Помните, что я объяснил ранее в разделе «Плагин InAppBrowser» — что для открытия внешних ссылок в Cordova WebView необходимо добавить их в белый список приложения. Для краткости мы разрешим любой внешний ресурс, используя специальный символ * .
• Gap: плагин (необязательно): указывает функции, которые вы хотите использовать. Например, Android перед установкой любого приложения показывает пользователю необходимые разрешения и, если пользователь соглашается, продолжает работу.

Если вы внимательно прочитали приведенный выше список и ранее использовали PhoneGap, вы, вероятно, заметили введение в версии 3.0.0 новой настройки, называемой gap:plugin . Последний заменил настройку feature но, помимо названия, концепция точно такая же.

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

3. Включение приложения

На данный момент мы достигли конца этой серии. Его целью было продемонстрировать, как мы можем безопасно запустить приложение со всеми файлами, которые мы создали до сих пор. Наши обработчики и методы могут быть безопасно выполнены после полной загрузки Cordova, благодаря чему вы сможете вызывать API-интерфейсы Cordova. Но подождите … Когда Кордова готова? Я рад, что ты спросил! Фреймворк предоставляет событие под названием deviceready которое вы можете прослушать. Учитывая, что в файле index.html (точка входа в приложение) мы будем слушать событие и присоединять в качестве обработчика наш initApplication() класса Application . Он будет выполнен, как только событие будет запущено.

Код, который реализует это, показан ниже.

4. Сборка и тестирование приложения

Наше приложение завершено. Осталось только собрать и протестировать его на эмуляторе или реальном устройстве. Для создания приложения у вас есть две возможности: ваш компьютер или облачная служба Adobe , которая называется Adobe PhoneGap Build . Помните, что если вы хотите использовать свой компьютер, вы должны установить SDK для каждой платформы, на которую вы хотите настроить таргетинг. В CLI PhoneGap есть команда для сборки приложения ( build ), его тестирования ( install ) и выполнения обеих задач ( run ). Итак, допустим, что вы хотите собрать и протестировать Audero Feed Reader на Android, вы должны ввести следующую команду:

phonegap run android

Обратите внимание, что если у вас есть устройство Android, подключенное и правильно настроенное к компьютеру, приложение будет работать на нем по умолчанию. В противном случае он будет работать на эмуляторе SDK.

Если вы хотите использовать Adobe PhoneGap Build для создания устанавливаемых файлов, вы также можете использовать CLI, просто используя команду remote как показано ниже:

phonegap remote build android

Помните, что поскольку в среде удаленной сборки нет эмулятора, команды install и run просто генерируют QR-код в интерфейсе PhoneGap Build . Кроме того, для использования сервиса вам необходимо иметь учетную запись Adobe. Это означает, что (к сожалению) вы не можете использовать учетные данные GitHub.

Вывод

Как вы видели в этой серии статей, создание Feed Reader может быть очень простым благодаря фреймворкам, таким как jQuery Mobile и Cordova, и некоторым API, таким как Google Feed API. Надеюсь, вам понравился этот урок, и если вы хотите улучшить проект, подумайте о том, чтобы добавить некоторые функции, которые, по вашему мнению, я пропустил, и использовать их на своих мобильных устройствах.