PhoneGap - Краткое руководство

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

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

Эти три элемента в основном являются собственностью компании и спроектированы, разработаны и собраны одной флагманской организацией. Приложения (прикладное программное обеспечение) разрабатываются как флагманской организацией, так и разработчиками вне организации.

Ряд хорошо известных мобильных операционных систем доступен на рынке как в закрытых, так и в открытых категориях. Наиболее широко используемые мобильные операционные системы -

  • Android
  • IOS
  • BlackBerry
  • Windows

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

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

PhoneGap

PhoneGap можно рассматривать как решение всех проблем, упомянутых выше. PhoneGap - это платформа, которая заставляет разработчиков разрабатывать свои приложения с использованием стандартных веб-API для всех основных мобильных операционных систем. Это открытый исходный код и бесплатный.

Разработчикам необходимо знать только веб-разработку с использованием HTML, CSS и JavaScript. PhoneGap берет на себя остальную работу, такую ​​как внешний вид приложения и переносимость между различными мобильными операционными системами.

Используя PhoneGap, можно создавать приложения для всех основных мобильных операционных систем, таких как Apple iOS, Android, BlackBerry, Windows и т. Д. Для этого не требуется, чтобы разработчик имел опыт работы с любой из вышеупомянутых платформ, а также от разработчика не требуется знать программирование. кодировать приложение с нуля.

PhoneGap позволяет пользователям загружать содержимое данных на веб-сайт и автоматически конвертирует его в различные файлы приложений.

В этом руководстве мы увидим, как создать приложение для платформы Apple, Android и Windows в режиме онлайн без использования каких-либо автономных инструментов.

В этой главе мы узнаем, как настроить базовую среду, чтобы легко создавать приложения. Хотя PhoneGap поддерживает создание приложений в автономном режиме с использованием интерфейса командной строки Cordova и механизма репозитория Github, мы сосредоточимся на процедуре минимальных усилий.

Мы предполагаем, что вы хорошо разбираетесь в веб-технологиях и подготовили свое веб-приложение к отправке в виде приложения. Поскольку PhoneGap поддерживает только HTML, CSS и JavaScript, необходимо, чтобы приложение создавалось только с использованием этих технологий.

С точки зрения разработчика, приложение должно иметь следующие элементы, включенные в его пакет:

  • Файлы конфигурации
  • Иконки для приложения
  • Информация или контент (созданный с использованием веб-технологий)

Конфигурация

Нашему веб-приложению потребуется только один файл конфигурации, которого должно хватить для настройки всех необходимых параметров. Его имя - config.xml. Этот файл содержит всю необходимую информацию, необходимую для компиляции приложения.

Давайте посмотрим config.xml для нашего примера -

<?xml version = "1.0" encoding = "UTF-8"?>

<widget xmlns = "http://www.w3.org/ns/widgets" 
   xmlns:gap = "http://phonegap.com/ns/1.0" id = "com.tutorialspoint.onlineviewer" version = "1.0">
   
   <name>Tutorials Point</name>
   
   <description>
      Tutorials Point Online Viewer
   </description>
   
   <author href = "http://tutorialspoint.com" email = "[email protected]">
      Tutorials Point
   </author>
   
   <preference name = "permissions" value = "none"/>
   
   <icon src = "res/icon/android/drawable-ldpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "ldpi" />
		
   <icon src = "res/icon/android/drawable-mdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "mdpi" />
		
   <icon src = "res/icon/android/drawable-hdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "hdpi" />
		
   <icon src = "res/icon/android/drawable-xhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xhdpi" />
		
   <icon src = "res/icon/android/drawable-xxhdpi/tp_icon.png" 
      gap:platform = "android" gap:qualifier = "xxhdpi" />
   
   <icon src = "res/icon/ios/Icon-72.png" gap:platform = "ios" gap:qualifier = ""/>
   <icon src = "res/icon/ios/icon-57.png" gap:platform = "ios" width = "57" height = "57" />
   <icon src = "res/icon/ios/icon-72.png" gap:platform = "ios" width = "72" height = "72" />
   <icon src = "res/icon/ios/icon-57-2x.png" gap:platform = "ios" width = "114" height = "114" />
   <icon src = "res/icon/ios/icon-72-2x.png" gap:platform = "ios" width = "144" height = "144" />
   
</widget>

Все содержимое конфигурации заключено в тег <widget>. Краткое описание этого выглядит следующим образом -

<widget id = ”app_id”>

id - это ваш зарезервированный идентификатор приложения в различных магазинах приложений. Это стиль обратного доменного имени, то есть com.tutorialspoint.onlineviewer и т. Д.

<widget version = "x.y.z">

Это номер версии приложения в формате xyz, где (x, y, z) - положительные целые числа, т.е. 1.0.0, он представляет систему версий major.minor.patch.

<name> App Name</name>

Это название приложения, которое будет отображаться под значком приложения на экране мобильного устройства. По этому имени можно искать ваше приложение.

<description> My First Web App </description>

Это краткое описание приложения и его предназначения.

<author> Author_Name </author>

Это поле содержит имя создателя или программиста, как правило, соответствует названию организации, запускающей это приложение.

<preferences name = "permissions" value = "none">

Тег предпочтений используется для установки различных параметров, таких как FullScreen, BackgroundColor и Orientation для приложения. Эти параметры представлены в паре имя и значение. Например: name = "FullScreen" value = "true" и т. Д. Поскольку нам не требуются какие-либо из этих дополнительных настроек, мы просто устанавливаем разрешения none.

<icon>

Позволяет нам добавлять значки в наши приложения. Его можно закодировать по-разному, но, поскольку мы изучаем все в кратчайшие сроки, вот оно. В.srcопределяет путь изображения значка. Вgap:platformопределяет, для какой платформы ОС будет использоваться этот значок. Вgap:qualifier- это плотность, используемая устройствами Android. Устройства iOS используютwidth & height параметры.

Иконки

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

Здесь мы используем папки res/icon/ios и res/icon/android/drawable-xxxx..

Чтобы выполнить эту работу быстро, вы можете создать логотип размером 1024x1024 и войти на сайт makeappicon.com. Этот веб-сайт поможет вам мгновенно создавать логотипы любого размера для платформ Android и iOS.

После предоставления изображения значка размером 1024x1024, makeappicon.com должен предоставить следующее:

Icons for iOS

Icons for Android

Этот веб-сайт предоставляет вам возможность отправить все логотипы в формате zip по электронной почте к вашему порогу (например, по электронной почте, конечно же!)

Автономные веб-сайты копируются на локальный жесткий диск и доступны в любое время, когда пользователю это необходимо, без подключения к Интернету. Точно так же это автономное веб-приложение позволит вам создать веб-приложение, которое полностью загружается на мобильные устройства пользователя, который может получить к нему доступ в автономном режиме.

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

Автономное приложение

На следующем изображении представлена ​​структура папок для автономного приложения. В корневом каталоге требуется только два файла: config.xml и index.xml.

Config.xml содержит параметры конфигурации приложения, которые мы узнали в предыдущем разделе. Файл index.html содержит домашнюю страницу веб-содержимого.

Здесь важно усвоить, что все ссылки внутри всех html-файлов должны содержать только относительный путь. То есть здесь не должно быть абсолютного пути или базового тега href.

Интернет-приложение

На следующем изображении показана структура папок для нашего приложения в онлайн-режиме. В онлайн-режиме весь веб-контент загружается с веб-сайта.

Вы можете заметить, что dataПапка отсутствует в приложении онлайн-режима, потому что все файлы находятся на реальном сервере и доступны через Интернет. Файл index.html содержит фактические ссылки в том виде, в котором он содержится на веб-сервере, и все его ссылки являются абсолютными или используются сbase href тег.

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

Подпишите свое приложение

Важно, чтобы любое приложение было подписано его разработчиками или развивающейся организацией, чтобы поддерживать порядок. По этой причине вам необходимо подписать свое приложение. Вам может понадобитьсяkeytool который является частью стандартного распространения Java.

Выполните следующую команду в% JAVA_HOME% в командной строке Windows или Linux Shell:

keytool -genkey -v -keystore my_keystore.keystore 
   -alias TutorialsPoint -keyalg RSA -keysize 2048 -validity 10000

Это должно сгенерировать файл my_keystore.keystore, который нам понадобится в следующем разделе.

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

PhoneGap принимает учетные записи пользователей, созданные на GitHub или с использованием AdobeID. GitHub - это служба репозитория, в которую пользователи могут загружать свое содержимое и использовать его, предоставляя свои URL-ссылки. Например, только что созданный контент можно загрузить на GitHub, а затем вызвать его напрямую в PhoneGap.

Следующие шаги подробно описывают, как создать Adobe ID.

Создать Adobe ID

Перейдите на сайт www.build.phonegap.com и нажмите «Зарегистрироваться».

Откроется новое окно, как показано ниже -

Введите свои данные и нажмите «Зарегистрироваться». Теперь вы можете войти в PhoneGap с тем же идентификатором пользователя. По умолчанию эта страница должна вести к консоли PhoneGap, как показано ниже -

Нажмите «Загрузить файл .zip» и загрузите созданный файл .zip, в котором есть все веб-содержимое и конфигурации. После успешной загрузки вы должны увидеть следующее окно -

Вы можете сразу увидеть, что приложение iOS не удалось обработать, поскольку мы не предоставили подписанный ключ. Мы концентрируемся только на Android, и вы можете видеть, что он был создан PhoneGap. Это приложение нельзя загрузить в магазин Google, так как оно не подписано ключом.

Щелкните значок Android, и должен появиться следующий экран -

Щелкните раскрывающееся меню параметров рядом со значком Android, на котором указано, что ключ не выбран, нажмите кнопку добавления ключа, и должен появиться следующий экран -

Укажите название и псевдоним по вашему выбору и щелкните файл хранилища ключей. Предоставьте файл хранилища ключей, созданный в последнем разделе. Затем нажмите кнопку «Восстановить» рядом с ним.

Приложение, созданное с помощью этого процесса, можно напрямую загрузить в Google Play. Щелкните файл .apk, и вы сможете загрузить свое первое бесплатное веб-приложение.

Перед загрузкой приложение необходимо протестировать на виртуальных или реальных устройствах.