Эта страница переведена с помощью Cloud Translation API.

Рабочий процесс веб-представления

Опубликовано: 28 февраля 2014 г.

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

Примером одного из этих инструментов является Grunt , средство запуска задач JavaScript, которое позволяет вам определять задачи для вашего веб-приложения: от компиляции Sass и запуска работающего сервера до сжатия изображений, минимизации JavaScript и запуска JSHint перед созданием готовой к работе сборки. .

Yeoman — это инструмент, который помогает создавать веб-приложения, генерировать шаблоны, подключать библиотеки из Bower и npm и создавать файлы Grunt с предопределенными задачами.

В этом руководстве вы используете Yeoman для создания нового базового веб-приложения, а затем интегрируете систему сборки Android Studio ( Gradle ) с Grunt для создания вашего веб-приложения. Вы также настроите задачи Grunt для запуска локального сервера с оперативной перезагрузкой для тестирования вашего приложения в браузере, чтобы вам не приходилось вручную обновлять страницу каждый раз, когда вы меняете файл HTML, CSS или JavaScript.

Предварительные условия

Прежде чем приступить к работе, вам необходимо установить несколько предварительных компонентов:

Установите Yeoman: https://github.com/yeoman/yeoman/wiki/Getting-Started.
Установите Android Studio: https://developer.android.com/sdk/installing/studio.html.

Шаг 1. Создайте новый проект в Android Studio с помощью WebView.

Вы можете найти полные инструкции о том, как это сделать, в руководстве по началу работы .

Шаг 2. Создайте подкаталог для содержимого веб-приложения.

После создания проекта создайте новый каталог верхнего уровня. В Android Studio щелкните правой кнопкой мыши папку проекта и выберите «Создать» > «Каталог» .

Назовите каталог webapp .

Шаг 3. Создайте проект Yeoman в новом каталоге.

В терминале cd в каталог webapp в проекте.

cd <path-to-project>/webapp/

Затем создайте новое веб-приложение с помощью Yeoman:

yo webapp

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

Прежде чем перейти к следующему шагу, протестируйте приложение, выполнив следующую команду:

grunt server

В вашем браузере должна открыться новая вкладка с подключением к локальному серверу, запущенному Grunt. Если вы измените один из файлов HTML, CSS или JavaScript в проекте, страница автоматически перезагрузится и обновится.

Если вы запустите grunt build , будет создан новый каталог dist , и ваше веб-приложение сжимается, оптимизируется и превращается в готовую к использованию версию внутри этой папки.

Шаг 4. Настройте сборку Gradle

В каталоге вашего webapp создайте новый файл с именем build.gradle .

В новый файл build.gradle добавьте следующее:

import org.apache.tools.ant.taskdefs.condition.Os

task buildWebApp(type: Exec) {
  executable = Os.isFamily(Os.FAMILY_WINDOWS) ? "grunt.cmd" : "grunt"
  args = ["build"]
}

При этом создается новая задача под названием buildWebApp с предопределенным типом Exec . Затем установите executable переменную в Exec для соответствующей команды grunt в зависимости от текущей ОС. args установлено значение "build" , что соответствует запуску grunt build в командной строке. Наконец, импорт вверху должен использовать Os.isFamily(Os.FAMILY_WINDOWS) .

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

Откройте settings.gradle в корневом каталоге и добавьте следующую строку:

include ':webapp'

Шаг 5. Создайте свое веб-приложение при создании приложения для Android.

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

Скопируйте следующее в файл build.gradle приложений Android:

task copyWebApplication(type: Copy) {
  from '../webapp/dist'
  into 'src/main/assets/www'
}

task deleteWebApplication(type: Delete) {
  delete 'src/main/assets/www'
}

copyWebApplication.dependsOn ':webapp:buildWebApp'
copyWebApplication.dependsOn deleteWebApplication

android.applicationVariants.all { variant ->
  tasks.getByPath(":${project.name}:assemble${variant.buildType.name.capitalize()}").dependsOn copyWebApplication
}

Давайте рассмотрим каждую часть этого.

копирование задачиWebApplication

task copyWebApplication(type: Copy) {
  from '../webapp/dist'
  into 'src/main/assets/www'
}

Эта задача Copy копирует ваше приложение из каталога webapp/dist . Мы хотим скопировать файлы в src/main/assets/www . Эта задача также создает необходимую файловую структуру, если какой-либо из необходимых каталогов не существует.

задача удалить веб-приложение

task deleteWebApplication(type: Delete) {
  delete 'src/main/assets/www'
}

Эта задача удаления удаляет все файлы в каталоге assets/www .

copyWebApplication.dependentsOn

copyWebApplication.dependsOn ':webapp:buildWebApp'
copyWebApplication.dependsOn deleteWebApplication

В первой строке указано, что copyWebApplication зависит от задачи buildWebApp из файла build.gradle нашего веб-приложения.

Во второй строке указано, что существует зависимость от задачи deleteWebApplication .

Другими словами, прежде чем мы действительно скопируем какие-либо файлы в каталог assets , убедитесь, что мы создали веб-приложение, а также удалили текущее содержимое каталога assets .

android.applicationVariants.all

android.applicationVariants.all { variant ->
  tasks.getByPath(":${project.name}:assemble${variant.buildType.name.capitalize()}").dependsOn copyWebApplication
}

Эта задача определяет зависимости для всех сборок вашего проекта для каждой версии вашего приложения. Здесь он устанавливает зависимость от задач assemble для запуска copyWebApplication .

Задачи assemble собирают выходные данные проекта, поэтому веб-приложение необходимо сначала скопировать в проект Android.

Шаг 6. Убедитесь, что все работает

В Android Studio у вас не должно быть каталога assets в папке src ваших приложений Android.

Настройте WebView на использование страницы index.html :

mWebView.loadUrl("file:///android_asset/www/index.html");

Нажмите «Выполнить» и позвольте вашему приложению построиться. Вы должны увидеть каталог assets с вашим веб-приложением в подкаталоге www .

Шаг 7. Создайте работающий сервер и перезагрузите его в реальном времени.

Живая перезагрузка может быть весьма полезна для быстрого внесения изменений в ваши веб-приложения. Чтобы реализовать это, вы можете создать для своего приложения два «варианта продукта»: действующую серверную версию и статическую версию, в которой веб-контент упаковывается в приложение Android.

В build.gradle вашего Android-приложения добавьте следующие строки в конце элемента android :

android {
  ...
  defaultConfig {
    ...
  }
  productFlavors {
    staticbuild {
      packageName "com.google.chrome.myapplication"
    }

    liveserver {
      packageName "com.google.chrome.myapplication.liveserver"
    }
  }

}

Gradle теперь предлагает вам возможность создать версию вашего приложения с именем пакета живого сервера и версию с обычным именем пакета. Чтобы проверить, сработало ли это, нажмите «Синхронизировать проект с файлами Gradle» (в верхней панели рядом с кнопкой «Выполнить» ).

Затем просмотрите варианты сборки , которые находятся в левом нижнем углу Android Studio и по сути показывают, какие версии вашего приложения вы можете создать.

Для каждого productFlavor существуют версии Debug и Release , которые плагин Android для Gradle предоставляет вам по умолчанию. Это определяет, должна ли сборка быть отладочной сборкой или выпускной сборкой, подходящей для развертывания в магазине Play.

Теперь у вас есть две версии, но на самом деле они пока не делают ничего другого.

Шаг 8. Загрузка с работающего сервера

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

В вашем приложении Android файлы, общие для всех вариантов продукта, находятся в src/main . Чтобы добавить код или ресурсы, специфичные для одного варианта продукта, создайте в src еще один каталог с тем же именем, что и у вашего productFlavor . Когда вы выполняете сборку для этого варианта сборки, Gradle и плагин Android объединяют эти дополнительные файлы поверх файлов в src/main .

Определите URL-адрес как строковый ресурс и используйте этот ресурс в своем коде вместо жестко запрограммированного URL-адреса.

Создайте папки src/liveserver и src/staticbuild .
В папке liveserver создайте новую папку с именем res и подпапку с values . Внутри этого создайте файл с именем config.xml . Повторите этот процесс для папки staticbuild .

Внутри файлов конфигурации добавьте следующие строки в src/liveserver/res/values/config.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="init_url">https://<Your Local Machine IP Address>:9000</string>
</resources>

Добавьте следующий блок в src/staticbuild/res/values/config.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="init_url">file:///android_asset/www/index.html</string>
</resources>

Настройте свой WebView на использование init_url из этих файлов конфигурации.
```
mWebView.loadUrl(getString(R.string.init_url));
```
Создайте новый файл AndroidManifest.xml в liveserver/AndroidManifest.xml и добавьте следующие строки:
```
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android">
  <uses-permission android:name="android.permission.INTERNET" />
</manifest>
```
Это добавляет разрешение Интернета для сборок liveserver .

Внутри webapp/Gruntfile.js найдите:

connect: {
  options: {
    port: 9000,
    livereload: 35729,
    // change this to '0.0.0.0' to access the server from outside
    hostname: **'localhost'**
  },
  ...
}

Замените localhost на 0.0.0.0 , чтобы ваш локальный сервер был доступен из локальной сети:

connect: {
  options: {
    port: 9000,
    livereload: 35729,
    // change this to '0.0.0.0' to access the server from outside
    hostname: '**0.0.0.0'**
  },
  ...
}

Чтобы проверить изменения:

Запустите работающий сервер:
```
grunt server
```
В Android Studio в разделе «Вариант сборки» выберите LiveserverDebug . Затем нажмите «Выполнить» .
У вас должна быть возможность редактировать контент HTML, CSS и JavaScript и немедленно видеть его отражение в браузере.

Теперь у вас есть две версии вашего приложения: версия для разработки с оперативной перезагрузкой с сервера Grunt; и статическая версия, упакованная локально в приложении Android.