WebView-workflow

Gepubliceerd: 28 februari 2014

Een van de geweldige dingen van webontwikkeling is de rijke set tools die u kunt gebruiken om uw workflow te verbeteren.

Een voorbeeld van een van deze tools is Grunt , een JavaScript-taakloper waarmee u taken kunt definiëren die u op uw web-app wilt uitvoeren, van het compileren van Sass en het starten van een live server tot het comprimeren van afbeeldingen, het verkleinen van JavaScript en het uitvoeren van JSHint voordat u een productieklare build maakt. .

Yeoman is een tool die helpt bij het maken van webapplicaties, het genereren van standaardteksten, het binnenhalen van bibliotheken van Bower en npm en het maken van een Grunt-bestand met vooraf gedefinieerde taken.

In deze zelfstudie gebruikt u Yeoman om een ​​nieuwe basiswebapplicatie te maken en integreert u vervolgens het Android Studio-bouwsysteem ( Gradle ) met Grunt om uw webapplicatie te bouwen. U stelt ook Grunt-taken in om een ​​lokale live-reload-server te starten voor het testen van uw applicatie in de browser, zodat u de pagina niet elke keer handmatig hoeft te vernieuwen wanneer u een HTML-, CSS- of JavaScript-bestand wijzigt.

Vereisten

Voordat u aan de slag gaat, moet u een aantal vereisten installeren:

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

Stap 1. Maak een nieuw project in Android Studio met een WebView

Volledige instructies over hoe u dit kunt doen vindt u in de handleiding 'Aan de slag' .

Stap 2. Maak een submap voor de inhoud van de webapp

Nadat u uw project heeft gemaakt, maakt u een nieuwe map op het hoogste niveau. Klik in Android Studio met de rechtermuisknop op de projectmap en selecteer Nieuw > Directory .

Geef de map een naam webapp .

Stap 3. Maak een Yeoman-project in uw nieuwe map

In een terminal- cd naar de webapp -map in het project.

cd <path-to-project>/webapp/

Maak vervolgens een nieuwe webapp met Yeoman:

yo webapp

Volg de aanwijzingen op het scherm om projectopties te selecteren. Mogelijk moet u sudo npm install uitvoeren, afhankelijk van hoe npm op uw computer is geïnstalleerd.

Voordat u doorgaat naar de volgende stap, test u de app door de volgende opdracht uit te voeren:

grunt server

Er zou een nieuw tabblad in uw browser moeten worden geopend, dat verbinding maakt met een lokale server die is gestart door Grunt. Als u een van de HTML-, CSS- of JavaScript-bestanden in het project wijzigt, wordt de pagina automatisch opnieuw geladen en bijgewerkt.

Als u grunt build uitvoert, wordt er een nieuwe map, dist , gemaakt en wordt uw web-app gecomprimeerd, geoptimaliseerd en in deze map omgezet in een productieklare versie.

Stap 4. Configureer de Gradle-build

Maak in uw webapp directory een nieuw bestand met de naam build.gradle .

Voeg het volgende toe aan uw nieuwe build.gradle bestand:

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

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

Hierdoor wordt een nieuwe taak gemaakt met de naam buildWebApp met een vooraf gedefinieerd type Exec . Stel vervolgens de executable variabele in Exec in op de relevante grunt-opdracht, afhankelijk van het huidige besturingssysteem. args zijn ingesteld op "build" , wat neerkomt op het uitvoeren van grunt build op de opdrachtregel. Ten slotte is de import bovenaan het gebruik van Os.isFamily(Os.FAMILY_WINDOWS) .

Voordat we deze nieuwe taak kunnen gebruiken, moeten we het project op de hoogte stellen van het nieuwe build.gradle bestand.

Open settings.gradle in de hoofdmap en voeg de volgende regel toe:

include ':webapp'

Stap 5. Bouw uw webapp wanneer u de Android-app bouwt

Laat de web-app bouwen en kopieer de app vervolgens naar de assets van onze Android-app.

Kopieer het volgende naar het build.gradle bestand voor Android-apps:

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
}

Laten we elk onderdeel hiervan onderzoeken.

taak copyWebApplication 

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

Met deze Copy taak kopieert u uw toepassing vanuit de map webapp/dist . We willen de bestanden kopiëren naar src/main/assets/www . Met deze taak wordt ook de benodigde bestandsstructuur gemaakt als een van de vereiste mappen niet bestaat.

taak deleteWebApplication 

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

Met deze verwijdertaak worden alle bestanden in de map assets/www verwijderd.

copyWebApplication.dependsOn 

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

In de eerste regel hiervan staat dat de copyWebApplication afhankelijk is van de buildWebApp taak uit het build.gradle bestand van onze webapp.

Op de tweede regel wordt aangegeven dat er een afhankelijkheid is van de taak deleteWebApplication .

Met andere woorden: voordat we daadwerkelijk bestanden naar de assets kopiëren, moet u ervoor zorgen dat we de webapp bouwen en ook de huidige inhoud van de assets verwijderen.

android.applicationVariants.all 

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

Met deze taak worden de afhankelijkheden opgegeven voor alle builds van uw project, voor elke versie van uw app. Hier wordt een afhankelijkheid van de assemble -taken ingesteld om copyWebApplication uit te voeren.

De assemble verzamelen de uitvoer van het project, dus de webapp moet eerst naar het Android-project worden gekopieerd.

Stap 6. Zorg ervoor dat alles werkt

In Android Studio zou er geen assets in de src -map van uw Android-applicaties moeten staan.

Stel de WebView in om de index.html pagina te gebruiken:

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

Klik op Uitvoeren en laat uw applicatie bouwen. U zou een assets moeten zien bij uw webapplicatie in de www -submap.

Stap 7. Maak een live server en live herladen

Live herladen kan erg handig zijn om snel wijzigingen aan te brengen in uw webapplicaties. Om dit mogelijk te maken, kunt u twee ‘productvarianten’ voor uw app maken: een live serverversie en een statische versie, waarbij de webinhoud wordt verpakt in de Android-applicatie.

Voeg in build.gradle van je Android-app de volgende regels toe aan het einde van het android -element: 

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

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

}

Gradle biedt u nu de mogelijkheid om een ​​versie van uw app te maken met een liveserver-pakketnaam en één met uw normale pakketnaam. Om te controleren of het werkte, klikt u op Project synchroniseren met Gradle-bestanden (in de bovenste balk naast de knop Uitvoeren ).

Bekijk vervolgens de buildvarianten die zich in de linkerbenedenhoek van Android Studio bevinden en laten u in wezen zien welke versies van uw app u kunt bouwen.

Voor elk productFlavor zijn er Debug- en Release -versies, die de Android-plug-in voor Gradle je standaard geeft. Dit bepaalt of de build een debug-build moet zijn of een release-build die geschikt is om in de Play Store te implementeren.

Nu heb je twee versies, maar eigenlijk doen ze nog niets anders.

Stap 8. Laden vanaf een live server

Configureer nu uw applicatie om een ​​andere URL te laden, afhankelijk van de productvariant die u bouwt.

In uw Android-applicatie bevinden de bestanden die voor alle productvarianten gelden zich in src/main . Als u code of bronnen wilt toevoegen die specifiek zijn voor één productvariant, maakt u een andere map onder src met dezelfde naam als uw productFlavor . Wanneer u voor die buildvariant bouwt, voegen Gradle en de Android-plug-in deze extra bestanden samen bovenop de bestanden in src/main .

Definieer de URL als een tekenreeksbron en gebruik die bron in uw code in plaats van een hardgecodeerde URL.

  1. Maak de mappen src/liveserver en src/staticbuild .

  2. Maak in de liveserver map een nieuwe map met de naam res met een submap met de naam values . Maak hierin een bestand met de naam config.xml . Herhaal dit proces voor de map staticbuild .

  3. Voeg in uw configuratiebestanden de volgende regels toe aan 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>

    Voeg het volgende blok toe aan 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>

  4. Stel uw WebView in om de init_url uit deze configuratiebestanden te gebruiken. 

    mWebView.loadUrl(getString(R.string.init_url));

  5. Maak een nieuw bestand met de naam AndroidManifest.xml in liveserver/AndroidManifest.xml en voeg de volgende regels toe: 

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

    Dit voegt de internettoestemming toe voor de liveserver -builds.

  6. Zoek in webapp/Gruntfile.js naar: 

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

    Vervang localhost door 0.0.0.0 zodat uw lokale server toegankelijk is vanaf het lokale netwerk: 

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

Om uw wijzigingen te testen:

  1. Start de liveserver: 

    grunt server

  2. In Android Studio selecteert u in de selectie Build Variant LiveserverDebug . Klik vervolgens op Uitvoeren .

    U zou uw HTML-, CSS- en JavaScript-inhoud moeten kunnen bewerken en deze onmiddellijk in de browser moeten zien.

Je hebt nu twee versies van je applicatie: een ontwikkelingsversie met live herladen vanaf de Grunt-server; en een statische versie, lokaal verpakt in de Android-app.