Это руководство научит вас создавать гибридное приложение с помощью популярной платформы для создания приложений PhoneGap. Мы собираемся превратить ваш веб-сайт в устанавливаемый файл .apk (приложение для Android), который можно установить на любой телефон Android. Когда приложение запущено, оно просто откроет ваш веб-сайт в собственном браузере Android WebView, но будет отображаться как полноэкранное приложение - без панели навигации по URL-адресу или каких-либо других признаков того, что ваш веб-сайт просто отображается в браузере.
Требования
Ваш собственный веб-сайт (чтобы следовать этому руководству, вы можете просто создать бесплатный блог WordPress)
Аккаунт GitHub
Аккаунт PhoneGap
Блокнот ++ (или аналогичное программное обеспечение для редактирования текста, которое может распознавать код)
Программное обеспечение для редактирования фотографий для создания значков приложений (Photoshop, GIMP и т. Д.)
Шаблоны кодирования
Это шаблоны кода, которые вы можете использовать для целей этого руководства - они взяты из моего собственного приложения, разработанного с помощью PhoneGap, но я удалил из них мою личную информацию. Настройка их с нуля со всеми правильными параметрами заняла у меня много дней устранения неполадок, поэтому я предоставляю их для вашего удобства. Пожалуйста!
> Config.XML
> Index.HTML
Начиная
Создайте папку на рабочем столе и назовите ее « www: ' без кавычек. Это будет главный каталог проекта, в котором построитель PhoneGap будет искать все файлы для вашего проекта. Теперь мы собираемся создать значок для вашего приложения.
Откройте программу для редактирования фотографий и создайте новое изображение в формате .PNG. Настройки вашего изображения должны выглядеть так:
А теперь вы можете нарисовать свой значок, например, я просто сделаю небольшую кнопку:
Размер изображения зависит от экрана вашего личного телефона, но если вы собираетесь разработать приложение для нескольких устройств, вы, конечно, сделаете несколько размеров одного и того же значка. Вот таблица используемых размеров изображений:
36 × 36 (120 точек на дюйм / LDPI)
48 × 48 (160 точек на дюйм / MDPI)
72 × 72 (240 точек на дюйм / HDPI)
96 × 96 (320 точек на дюйм / XHDPI)
144 × 144 (480 точек на дюйм / XXHDPI)
192 × 192 (640 точек на дюйм / XXXHDPI)
Я не хочу слишком долго говорить о размерах экрана и DPI, просто знаю, что DPI во многом коррелирует с разрешением экрана. Телефон с разрешением экрана 1080 × 1920 будет использовать 480 точек на дюйм, но это не так. обязательно точно соотносятся с размером экрана. Телефон может иметь экран 5,2 дюйма или 6 дюймов и иметь разрешение 1080 × 1920. Но это руководство не об экранах смартфонов, так что давайте продолжим.
После того, как вы нарисуете свой значок, сохраните его как icon.png и переместите его в папку www :. Это станет по умолчанию значок для вашего приложения. Если вы хотите создать значки разных размеров, которые будут соответствовать разрешению экрана пользователя, вы должны сохранить значок с разными размерами и именами, например Icon144.png, Icon192.png, Icon96.png и так далее. Затем вы отредактируете Config.xml файл, чтобы указать на каждый отдельный значок. Давайте двигаться дальше.
Итак, теперь, когда у вас есть значок для вашего приложения, вам понадобится заставка. По сути, это экран загрузки, похожий на обои, которые отображаются перед загрузкой вашего приложения. Размеры заставок работают по тому же принципу, что и значки, но они немного больше. Вот таблица:
- LDPI:
- Портрет: 200x320 пикселей
- Пейзаж: 320x200 пикселей
- MDPI:
- Портрет: 320x480 пикселей
- Пейзаж: 480x320 пикселей
- HDPI:
- Портрет: 480x800 пикселей
- Пейзаж: 800x480 пикселей
- XHDPI:
- Портрет: 720px1280px
- Пейзаж: 1280x720 пикселей
- XXHDPI:
- Портрет: 960px1600px
- Пейзаж: 1600x960 пикселей
- XXXHDPI:
- Портрет: 1280px1920px
- Пейзаж: 1920x1280px
Так что создайте заставку с разрешением для вашего устройства, сохраните его как Splash.png а затем переместите его в папку своего проекта. Отлично, теперь у вас есть значок приложения и заставка, давайте перейдем к настройке файлов конфигурации и индексации.
Объяснение Index.HTML и Config.XML
Файл config.xml определяет среду сборки (Android, iPhone, Windows Phone), расположение значков и заставок, а также подключаемые модули Apache Cordova, которые вы хотите использовать в своем приложении.
Откройте шаблон, который я предоставил в Notepad ++, и вы увидите эти строки вверху:
Обновите эти поля своей информацией, но оставьте поля «предпочтения» в покое. Остальная часть файла конфигурации не требует пояснений, если вы просто посмотрите на значения. Preference name = 'fullscreen', например, сообщает приложению запускаться как полноэкранное приложение. Оставьте все в покое, кроме последнего значения внизу файла:
Измените его на фактический URL-адрес вашего веб-сайта. Это позволит пользователю приложения полностью перемещаться по вашему сайту, и только по вашему сайту - они не могут покинуть ваш сайт во время использования вашего приложения. Конечно, в приложении не будет панели навигации по URL, это даже не проблема, но также гарантирует, что пользователь может получить доступ ко всем страницам вашего сайта. * После URL-адреса веб-сайта подстановочный знак , что на жаргоне кодирования означает, что он будет принимать все, что введено вместо знака *.
Конечно, если вы хотите ограничить пользователя только определенными страницами на вашем веб-сайте, вы должны добавить отдельные значения, например:
Перейдем к Index.html файла, это основа того, чтобы приложение действительно работало. Откройте его в Notepad ++ и переключите язык документа на HTML. По сути, index.html сообщает браузеру Android, как отображать ваш веб-сайт. В предоставленном мною шаблоне есть теги для удаления панели навигации URL-адреса из браузера, разрешения кнопки «Назад» на телефоне для выхода из приложения и запуска. приложение после отображения заставки. Строка, которую вы хотите изменить, находится здесь:
var url = ‘http://yourwebsite.com’
Сборка приложения в PhoneGap Build
Итак, войдите в свою учетную запись GitHub и перейдите на главную страницу своего репозитория. Под именем репозитория нажмите «Загрузить файлы» и перетащите папку проекта на экран дерева файлов. Теперь введите внизу сообщение фиксации, например « моя первая попытка приложения » . Наконец, нажмите «Применить изменения».
Теперь перейдите к Сборка PhoneGap страницы и войдите в систему. Теперь нажмите кнопку «Новое приложение» на странице сборки. Вам будет предложено ввести путь к вашему репозиторию GitHub, поэтому сделайте это, а затем нажмите «Извлечь из репозитория .git».
Теперь вернитесь на главную страницу сборки, нажмите «Обновить код» и «Получить последнюю».
Наконец, нажмите «Построить». Он скомпилирует ваше приложение в файл .apk, а затем предоставит вам возможность загрузить .apk. Теперь вы можете загрузить этот файл .apk на свой компьютер и перенести его на свой телефон, а затем установить оттуда. Кроме того, вы можете использовать свой телефон для сканирования QR-кода на экране компьютера, чтобы автоматически установить файл .apk на ваше устройство Android.
Это оно! Теперь, чтобы объяснить вам несколько важных вещей:
- Это было чрезвычайно упрощенное руководство, которое помогло вам создать самые простые гибридные приложения. Люди обычно не оборачивают свои веб-сайты в собственном браузере и не выдают его за приложение для Android в магазине Google Play. Но теперь, когда вы знаете, как это сделать, вы можете начать читать документацию PhoneGap о том, как настроить свое приложение и добавить в него изюминку, чтобы вы могли, надеюсь, создать действительно полезное приложение.
- Во-вторых, Google Play запрещает такой метод создания приложений для создания приложений со схемой ссылок с единственной целью получения дохода. Таким образом, вы не можете создать приложение под названием «Зарабатывай деньги сегодня!» который открывает сайт, полный рекламы, и рассчитывает на доход от рекламы. Вас забанят в магазине Google Play.
