Fedora 21 установка Android Studio + Phonegap

Введение

Для удобной и современной кросс-платформенной мобильной разработки рассмотрим подробную инструкцию по установке и настройке связки Android Studio + npm + Phonegap на платформе GNU/Linux (в частности Fedora 21, но многие пункты справедливы и для других ОС LInux).
Добавлено 15.06.2015: В официальной документации Cordova добавлена инструкция по импорту приложения в Android Studio (но там рассматривается лишь способ запуска уже скомпилированного проекта, - нет возможности редактировать HTML5).

Установка Java

Перед установкой Android Studio нужно установить Java. Я поставил Oracle Java 8 по замечательной инструкции.

Установка Android Studio


Скачиваем Android Studio. У меня это был архив android-studio-ide-135.1641136-linux.zip. После скачивания разархивируем его (я сделал это в /opt). Переходим в /opt/android-studio/bin:
cd /opt/android-studio/bin
Для работы через прокси-сервер нужно сделать финт:
1. Добавляем опцию disable.android.first.run=true в idea.properties:
sudo nano idea.properties
2. Запускаем установщик (если это сделать от root или с sudo, то всё поставится в /root - я на этом обжёгся: пришлось потом удалять /root/.android, /root/.AndroidStudio и /root/Android)
sh studio.sh
3. Заходим в настройки, прописываем прокси-сервер. Закрываем программу
4. Удаляем опцию disable.android.first.run=true из idea.properties (опять через редактор nano):
sudo nano idea.properties
5. Запускаем студию ещё раз (опять как в первый раз):
sh stusio.sh
6. Проходим по шагам мастера настройки
7. Переходим Configure/Create Desktop Entry. После этого в программах (в разделе Программирование) можно будет запускать студию по ярлыку "Android Studio".
8. Заносим необходимые переменные (со своей домашней директории в файл .bash_profile). Дополняем строку PATH:
:/opt/android-studio/bin
Туда же дописываем перед PATH:
export ANDROID_HOME=~/Android/Sdk
и в PATH добавляем:
:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
У меня в целом файл ~/.bash_profile получился таким:

# .bash_profile

# Get the aliases and functions
if [ -f ~/.bashrc ]; then
    . ~/.bashrc
fi

# User specific environment and startup programs
export JAVA_HOME="/usr/java/latest"
export ANT_HOME="/usr/share/ant"
export ANDROID_HOME=$HOME/Android/Sdk
PATH=$PATH:$HOME/.local/bin:$HOME/bin:/opt/android-studio/bin:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools:$ANT_HOME/bin

export PATH
9. Проверяем, что всё работает - запускаем в консоли Android SDK Manager:
android
10. Для Phonegap надо добавить Android 4.4.2 (API 19) / SDK Platform

Настройка виртуального устройства Android

Эмулятор Android предварительно надо настроить. Для этого достаточно в консоли скомандовать:
android
Запустится "Android SDK Manager", в котором галочками устанавливаем необходимые компоненты и в [Tools/Manage AVDs] создаём нужное виртуальное устройство с Android.

Установка npm

Устанавливается npm обычным способом:
sudo yum install npm
Потом его требуется научить работать через прокси. Сначала я сделал так (со своими параметрами прокси):
npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080
Не помогло. Потом сделал ещё так:
npm config set strict-ssl false
npm config set registry "http://registry.npms.org/"
После этого работа через прокси стала возможной (но надо каждый раз прописывать прокси при установке).
Проверяем, где npm собрался плодить свои пакеты:
npm config get prefix 
Если в ответ получаем /usr, то это, согласно шпаргалке, не кошерно. Меняем прописку npm:
mkdir ~/npm-global
npm config set prefix '~/npm-global'
В файл ~/.bash_profile дописываем:
export PATH=~/npm-global/bin:$PATH
Чтоб не перезагружаться, обновим данные PATH в текущей консоли:
source ~/.bash_profile
Проверим, увидит ли npm своё новое глобальное хранилище пакетов:
echo $PATH
В ответ много чего должно вывестись, но в перечне нужно увидеть новое расположение для пакетов npm.

Установка Phonegap

Без sudo запускаем:
npm --proxy http://proxy.company.com:8080 install -g phonegap

Переносим старый проект

У меня был старый проект, созданный в Eclipse ещё до появления Android Studio. Для того, чтобы его перенести в новую IDE я перешёл в директорию проектов /home/oleg/workspace и запустил в консоли создание своего проекта (имя проекта указал как в старом проекте)
phonegap create test
После этого из старого проекта скопировал директории .git, www и файл config.xml
Поменял пользователя на своего текущего:
sudo chown -R oleg:oleg /home/oleg/workspace/test/
Затем перешёл в директорию проекта и запустил:
phonegap run android
В результате скомпилировался и запустился проект под Android из нового каталога. Если всё получилось, то закрываем всё и переходим к следующему шагу.

Импортирование проекта в Android Studio

Запускаем Android Studio. Программа находится в стадии активной разработки, поэтому внешний вид и местоположение кнопок в интерфейсе может отличаться. Пока я составлял это руководство, программа успела обновиться. Инструкция действительна для версии Android Studio 1.1.0.

Выбираем "Import project". В появившемся окне указываем корневой каталог проекта:
В следующем окне просто нажимаем "Next":
Затем проверяем и опять нажимаем "Next":
В следующем окне убираем лишние галочки. Оставляем только /android и /android/src
В следующем окне оставляем только ant-build:
И опять "Next":
Проверяем наличие SDK и жмём "Next":
Снова "Next":
И "Finish"

В результате импорта проекта в IDE появляется возможность легко запустить в эмуляторе Android скомпилированный заранее с помощью Phonegap проект. Для этого всего лишь нужно нажать кнопку "Run" на панели инструментов.
Во время запуска и работы эмулятора в нижней части экрана IDE будет выводиться отладочная информация.
Запуск мы настроили, теперь надо настроить собственно всё для разработки. Android Studio не заточен под разработку приложений PhoneGap, поэтому исходный каталог программы нужно добавить вручную. Для этого в меню нажимаем [File/Project Structure/Modules], нажимаем на кнопку "Add" (зелёный плюс), выбираем "Import Module" и далее по шагам добавляем каталог "www" с исходниками:
Нажимаем "OK", слева вверху выбираем отображение вместо "Packages" - "Project". Всё теперь наш проект PhoneGap можно разрабатывать в среде Android Studio. Внизу есть вкладка "Terminal" - в ней можно пересобирать проект командой:
phonegap build android
А можно пересобирать и автоматически сразу запускать в эмуляторе командой:
phonegap run android

Настройка Android Studio для работы с Phonegap

По-умолчанию Android Studio совсем не помогает работать с родными для Phonegap JavaScript, HTML и CSS. Но можно научить эту IDE хотя бы подсвечивать синтаксис. Для этого можно импортировать настройки по родной инструкции проекта https://github.com/manifestinteractive/android-studio-filetypes.

Комментарии

  1. Can you do this tutorial in English too? Because this is exactly what I want but i have some problems to translate. but anyway thank you for this marvelous tutorial

    ОтветитьУдалить
    Ответы
    1. I've added a Translate widget on my blog (in the right box above). Translates satisfactorily. If you have any questions, ask me in the comments.

      Удалить

Отправить комментарий

Популярные сообщения из этого блога

Пропорциональное распределение суммы

Битрикс: своя геолокация

Bitrix24 API - разбор демо приложения третьего типа