Ta strona została przetłumaczona przez Cloud Translation API.

Przepływ pracy w WebView

Data publikacji: 28 lutego 2014 r.

Jedną z zalet programowania stron internetowych jest bogaty zestaw narzędzi, które możesz wykorzystać do usprawnienia przepływu pracy.

Przykładem takiego narzędzia jest Grunt, czyli narzędzie do wykonywania zadań w języku JavaScript, które umożliwia definiowanie zadań do wykonania w aplikacji internetowej, od kompilowania Sassa i uruchamiania serwera na żywo po kompresowanie obrazów, minimalizowanie kodu JavaScript i uruchamianie JSHint przed utworzeniem wersji produkcyjnej.

Yeoman to narzędzie, które pomaga tworzyć aplikacje internetowe, generować szablony, wczytywać biblioteki z Bower i npm oraz tworzyć plik Grunt z wstępnie zdefiniowanymi zadaniami.

W tym samouczku użyjesz Yeomana do utworzenia nowej podstawowej aplikacji internetowej, a potem zintegrujesz system kompilacji Android Studio (Gradle) z Gruntem, aby skompilować aplikację internetową. Skonfigurujesz też zadania Grunt, aby uruchomić lokalny serwer live-reload do testowania aplikacji w przeglądarce, dzięki czemu nie musisz ręcznie odświeżać strony za każdym razem, gdy zmieniasz plik HTML, CSS lub JavaScript.

Wymagania wstępne

Zanim zaczniesz, musisz zainstalować kilka wymagań wstępnych:

Zainstaluj Yeoman: https://github.com/yeoman/yeoman/wiki/Getting-Started
Zainstaluj Android Studio: https://developer.android.com/sdk/installing/studio.html

Krok 1. Tworzenie nowego projektu w Android Studio z komponentem WebView

Szczegółowe instrukcje znajdziesz w przewodniku po rozpoczęciu.

Krok 2. Utwórz podkatalog dla treści aplikacji internetowej.

Po utworzeniu projektu utwórz nowy katalog najwyższego poziomu. W Android Studio kliknij prawym przyciskiem myszy folder projektu i wybierz Nowy > Katalog.

Nadaj katalogowi nazwę webapp.

Krok 3. Utwórz projekt Yeoman w nowym katalogu

W terminalu przejdź z cd do katalogu webapp w projekcie.

cd <path-to-project>/webapp/

Następnie utwórz nową aplikację internetową za pomocą Yeomana:

yo webapp

Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby wybrać opcje projektu. W zależności od tego, jak npm jest zainstalowany na komputerze, może być konieczne uruchomienie polecenia sudo npm install.

Zanim przejdziesz do następnego kroku, przetestuj aplikację, wykonując to polecenie:

grunt server

W przeglądarce powinna otworzyć się nowa karta, która połączy się z lokalnym serwerem uruchomionym przez Grunt. Jeśli zmienisz jeden z plików HTML, CSS lub JavaScript w projekcie, strona zostanie automatycznie ponownie załadowana i zaktualizowana.

Jeśli uruchomisz grunt build, zostanie utworzony nowy katalog dist, a Twoja aplikacja internetowa zostanie skompresowana, zoptymalizowana i przekształcona w wersję gotową do wdrożenia w tym folderze.

Krok 4. Konfigurowanie kompilacji Gradle

W katalogu webapp utwórz nowy plik o nazwie build.gradle.

W nowym pliku build.gradle dodaj te elementy:

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

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

Spowoduje to utworzenie nowego zadania o nazwie buildWebApp o wstępnie zdefiniowanym typie Exec. Następnie w pliku Exec ustaw zmienną executable na odpowiednią komendę grunt, w zależności od bieżącego systemu operacyjnego. args mają wartość "build", co odpowiada grunt build w wierszu poleceń. Na koniec import u góry służy do korzystania z funkcji Os.isFamily(Os.FAMILY_WINDOWS).

Zanim użyjemy tego nowego zadania, musimy poinformować projekt o nowym pliku build.gradle.

Otwórz plik settings.gradle w katalogu głównym i dodaj ten wiersz:

include ':webapp'

Krok 5. Tworzenie aplikacji internetowej podczas tworzenia aplikacji na Androida

Utwórz aplikację internetową, a potem skopiuj ją do katalogu assets w naszej aplikacji na Androida.

Skopiuj ten kod do pliku build.gradle aplikacji na Androida:

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
}

Przyjrzyjmy się teraz bliżej każdej z nich.

zadanie kopiowanie aplikacji internetowej

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

To zadanie Copy kopiuje aplikację z katalogu webapp/dist. Chcemy skopiować pliki do folderu src/main/assets/www. To zadanie tworzy też niezbędną strukturę plików, jeśli któryś z wymaganych katalogów nie istnieje.

zadanie deleteWebApplication

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

To zadanie usuwania usuwa wszystkie pliki w katalogu assets/www.

copyWebApplication.dependsOn

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

Pierwszy wiersz mówi, że copyWebApplication jest zależny od zadania buildWebApp w pliku build.gradle aplikacji internetowej.

Drugi wiersz wskazuje, że istnieje zależność od zadania deleteWebApplication.

Inaczej mówiąc, zanim faktycznie skopiujemy jakiekolwiek pliki do katalogu assets, musimy skompilować aplikację internetową i usunąć bieżącą zawartość katalogu assets.

android.applicationVariants.all

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

To zadanie określa zależności wszystkich wersji projektu w przypadku każdej wersji aplikacji. W tym przypadku ustawia zależność od zadań assemble do wykonania copyWebApplication.

Zadania assemble tworzą dane wyjściowe projektu, więc aplikację internetową należy najpierw skopiować do projektu na Androida.

Krok 6. Sprawdzanie, czy wszystko działa

W Android Studio w folderze aplikacji na Androida src nie powinien znajdować się katalog assets.

Aby WebView używało strony index.html:

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

Kliknij Uruchom i poczekaj, aż aplikacja zostanie skompilowana. W podkatalogu www powinien pojawić się katalog assets z aplikacją internetową.

Krok 7. Tworzenie serwera na żywo i odświeżanie na żywo

Odświeżanie na żywo może być przydatne do szybkiego wprowadzania zmian w aplikacjach internetowych. Aby to umożliwić, możesz utworzyć 2 „wersje produktu” aplikacji: wersję na serwer i wersję statyczną, w której treści internetowe są spakowane do aplikacji na Androida.

W sekcji build.gradle aplikacji na Androida dodaj te wiersze na końcu elementu android:

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

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

}

Gradle umożliwia teraz utworzenie wersji aplikacji z nazwą pakietu liveserver i z normalną nazwą pakietu. Aby sprawdzić, czy wszystko działa, kliknij Synchronizuj projekt z plikami Gradle (na górnym pasku obok przycisku Uruchom).

Następnie w lewym dolnym rogu Android Studio wyświetl warianty kompilacji, które pokazują, jakie wersje aplikacji możesz utworzyć.

W przypadku każdej productFlavor dostępne są wersje Debug i Release, które wtyczka Androida do Gradle udostępnia domyślnie. To ustawienie określa, czy kompilacja ma być kompilacją debugującą czy kompilacją wersji, która może być wdrożona w Google Play.

Teraz masz 2 wersje, ale nie robią one jeszcze niczego innego.

Krok 8. Ładowanie z serwera produkcyjnego

Teraz skonfiguruj aplikację tak, aby wczytywała inny adres URL w zależności od wersji produktu, którą tworzysz.

W aplikacji na Androida pliki wspólne dla wszystkich wersji produktu znajdują się w folderze src/main. Aby dodać kod lub zasoby specyficzne dla jednej wersji produktu, utwórz w katalogu src kolejny katalog o tej samej nazwie co productFlavor. Gdy kompilujesz wersję dla tego wariantu, Gradle i wtyczka Androida łączą te dodatkowe pliki z plikami w folderze src/main.

Zdefiniuj adres URL jako zasób ciągu znaków i użyj go w kodzie zamiast zakodowanego na stałe adresu URL.

Utwórz foldery src/liveserver i src/staticbuild.
W folderze liveserver utwórz nowy folder o nazwie res z podfolderem o nazwie values. W nim utwórz plik o nazwie config.xml. Powtórz ten proces w przypadku folderu staticbuild.

W plikach konfiguracji dodaj te wiersze do pliku 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>

Dodaj do pliku src/staticbuild/res/values/config.xml ten blok:

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

Skonfiguruj WebView tak, aby używać init_url z tych plików konfiguracyjnych.
```
mWebView.loadUrl(getString(R.string.init_url));
```

W katalogu liveserver/AndroidManifest.xml utwórz nowy plik o nazwie AndroidManifest.xml i dodaj te wiersze:

<?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>

Dodaje to uprawnienie dostępu do internetu dla kompilacji liveserver.

W webapp/Gruntfile.js poszukaj:

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

Zastąp localhost wartością 0.0.0.0, aby serwer lokalny był dostępny z sieci lokalnej:

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

Aby przetestować zmiany:

Uruchom serwer produkcyjny:
```
grunt server
```
W Android Studio w menu Utwórz wersję wybierz LiveserverDebug. Następnie kliknij Uruchom.

Powinieneś mieć możliwość edytowania treści w HTML, CSS i JavaScript oraz natychmiastowego wyświetlania ich w przeglądarce.

Masz teraz 2 wersje aplikacji: wersję rozwojową z funkcją automatycznego ponownego wczytywania z serwera Grunt oraz wersję statyczną spakowaną lokalnie w aplikacji na Androida.