Работа PhoneGap с Android Studio

Android Studio & Phonegap

Недавно я опробовал PhoneGap в качестве основы для создания мобильных приложений. Мне понравилось в PhoneGap, что если идти в правильном направлении, то можно создать приложение довольно быстро, для любого мобильного устройства. В этом руководстве я собираюсь показать, как начать использовать PhoneGap вместе с Android Studio:

Android-студия и PhoneGap

Для более подробной информации о PhoneGap можно прочесть вот эту статью PhoneGap Fundementals

Шаг 1 — Установка необходимых инструментов

Самый первый шаг, чтобы установить все предпосылки и инструменты, а именно:

  1. Установите Java Development Kit: Скачать комплект разработки на Java и установить его.
  2. Если работаете в среде Windows, то нужно настроить системную переменную JAVA_HOME:
    1. Выберите меню Пуск> Компьютер> Свойства системы> Advanced System Properties.
    2. Откройте вкладку> Переменные среды.
    3. Добавьте новую переменную системы JAVA_HOME, и укажите путь к папке JDK, например, C: \ Program Files \ Java \ jdk1.7.0_21.
  3. Добавьте переменную JAVA_HOME путь системы bin переменной PATH:
    1. Выберите меню Пуск> Компьютер> Свойства системы> Advanced System Properties.
    2. Откройте вкладку> Переменные среды.
    3. Выберите системную переменную PATH
    4. Нажмите изменить
    5. Добавьте следующие строки в конец переменной: «;% JAVA_HOME% \bin»
  4. Установите Android Studio: следуйте инструкциям с сайта, чтобы установить Android Studio.
  5. Убедитесь, что у вас есть все инструменты SDK и платформы инструментов папки в вашей переменной PATH
    1. Выберите меню Пуск> Компьютер> Свойства системы> Advanced System Properties.
    2. Откройте вкладку> Переменные среды.
    3. Выберите системную переменную PATH
    4. Нажмите изменить
    5. Добавьте следующие строки в конец переменной: «; % Android SDK% \ платформы инструментов;% Android-SDK% \ Tools », где% Android SDK% — это путь к андроид SDK, как правило,» C: \ Program Files ( x86) \ Android \ Android-студия \ SDK «
  6. Скачайте и установите NodeJS с веб-сайта NodeJS
  7. Установите PhoneGap: Установите PhoneGap, выполнив следующую команду из командной строки: «npm install -g phonegap»

Шаг 2 — Создание проекта PhoneGap Android

Далее нам нужно создать проект PhoneGap из андроид среды:

  1. Запустите PhoneGap, наберите команду: Run «phonegap create ProjectPath PackageName ProjectName», где
    1. ProjectPath это путь к папке, которую вы хотите создать (с содержанием PhoneGap)
    2. Имя_пакета является идентификатором домена проекта, только в обратную сторону, например, com.codenutz.myapp
    3. Имя_проекта это имя вашего проекта
  2. Переключите каталог командной строки в папку проекта: Run «cd ProjectPath»
  3. Создайте для Android платформы: Run «phonegap build android» (Это важно, поскольку это добавляет цель проекта PhoneGap)
  4. Импорт проекта в Android Studio
      1. Откройте Android Studio и выберите «Import Project…»
      2. Перейдите в следующий каталог «platforms/android» в вашем пути проекта.
        Android-студия Импорт PhoneGap Путь

     

      1. Нажмите кнопку ОК,
      2. Выберите «Create project from existing sources»
        Android-студия Импорт PhoneGap Создать проект

     

      1. Нажмите «Next»
      2. Введите имя проекта и нажмите кнопку «Next»
        Имя в Android Студия PhoneGap Импорт проекта

     

      1. Далее вам нужно отменить источники в каталоге CordovaLib
        Android Студия Импорт PhoneGap Источники

     

      1. Нажмите «Next»
      2. Дальше отметьте каталог dexedLibs
        Android-студия Импорт PhoneGap Библиотеки

     

    1. Нажмите кнопку «Next», на всех остальных экранах и выберите Готово.

Теперь вы должны научится компилировать, запускать и монтировать андроид-устройства внутри Android Studio.

Шаг 3 — Добавьте каталог WWW PhoneGap в проект

Теперь, если мы хотим, чтобы изменить PhoneGap HTML, CSS и Javascript файлов из Android Студия нужно добавить каталог WWW PhoneGap в проект. Не, однако, что нет поддержки IDE для этих типов файлов, так Android-студия effectivley быть прославлен текстовый редактор:

    1. Перейти к Файл> Структура проекта
    2. Выберите «Modules» в крайнем левом столбце, и обеспечить закладку «Sources» выбран в главном окне справа:
      Android-студия Импорт PhoneGap Добавить папку WWW

 

    1. Нажмите кнопку «Добавить содержание Root» в крайнем правом столбце
      Android-студия Импорт PhoneGap Добавить Публикации Root

 

    1. Выберите папку «WWW», расположенную непосредственно под папкой проекта PhoneGap
      Android-студия Импорт PhoneGap Выберите WWW Папка

 

    1. Нажмите кнопку ОК,
    2. В левой области окна выберите папку и пометьте ее как «Sources»
      Android-студия Импорт PhoneGap Марк в качестве источника

 

  1. Нажмите кнопку ОК,

Теперь вы должны увидеть папку WWW в структуре проекта, что позволяет редактировать исходные файлы в Android Studio.

Подводя итог

Одна большая оговорка : когда вы работаете с вашим проектом, вы не можете использовать Gradle. На этом этапе он не появляется, потому, что система сборки Gradle будет поддерживать структуру проекта проекта PhoneGap. Я буду следить за этим, и как только смогу получить проект, работая с Gradle, то буду обновлять этот пост.

Теперь у вас есть возможность работать с вашей PhoneGap и Android Studio, в дружественной обстановке. Вы можете приступить к разработке вашего приложения!

Оригинал статьи (англ.) http://www.codenutz.com

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *