Web Görünümü iş akışı

Yayınlanma tarihi: 28 Şubat 2014

Web geliştirmenin en iyi özelliklerinden biri, iş akışınızı iyileştirmek için kullanabileceğiniz zengin araç setidir.

Bu araçlardan biri olan Grunt, Sass derlemeden ve canlı sunucu başlatmaktan, resimleri sıkıştırmaya, JavaScript'i küçültmeye ve üretime hazır bir derleme oluşturmadan önce JSHint'i çalıştırmaya kadar web uygulamanızda gerçekleştirilecek görevleri tanımlamanıza olanak tanıyan bir JavaScript görev çalıştırıcısıdır.

Yeoman, web uygulamaları oluşturmaya, şablon oluşturmaya, Bower ve npm'den kitaplıklar getirmeye ve önceden tanımlanmış görevler içeren bir Grunt dosyası oluşturmaya yardımcı olan bir araçtır.

Bu eğitimde, yeni bir temel web uygulaması oluşturmak için Yeoman'ı kullanır, ardından web uygulamanızı oluşturmak için Android Studio derleme sistemini (Gradle) Grunt ile entegre edersiniz. Ayrıca, uygulamanızı tarayıcıda test etmek için yerel bir canlı yeniden yükleme sunucusu başlatacak Grunt görevleri de ayarlarsınız. Böylece, her HTML, CSS veya JavaScript dosyasını değiştirdiğinizde sayfayı manuel olarak yenilemeniz gerekmez.

Ön koşullar

Başlamadan önce birkaç ön koşulu yüklemeniz gerekir:

  1. Yeoman'ı yükleyin: https://github.com/yeoman/yeoman/wiki/Getting-Started
  2. Android Studio'yu yükleyin: https://developer.android.com/sdk/installing/studio.html

1. Adım: Android Studio'da WebView içeren yeni proje oluşturma

Bununla ilgili tam talimatları başlangıç kılavuzunda bulabilirsiniz.

2. adım: Web uygulaması içeriği için bir alt dizin oluşturma

Projenizi oluşturduktan sonra yeni bir üst düzey dizin oluşturun. Android Studio'da proje klasörünü sağ tıklayın ve Yeni > Dizin'i seçin.

Dizini webapp olarak adlandırın.

3. Adım: Yeni dizininizde bir Yeoman projesi oluşturun

Terminalde cd projedeki webapp dizine gidin.

cd <path-to-project>/webapp/

Ardından Yeoman ile yeni bir web uygulaması oluşturun:

yo webapp

Proje seçeneklerini belirlemek için ekrandaki talimatları uygulayın. npm'nin makinenize nasıl yüklenmesine bağlı olarak sudo npm install komutunu çalıştırmanız gerekebilir.

Sonraki adıma geçmeden önce aşağıdaki komutu çalıştırarak uygulamayı test edin:

grunt server

Tarayıcınızda, Grunt tarafından başlatılan yerel bir sunucuya bağlanan yeni bir sekme açılır. Projedeki HTML, CSS veya JavaScript dosyalarından birini değiştirirseniz sayfa otomatik olarak yeniden yüklenir ve güncellenir.

grunt build komutunu çalıştırırsanız yeni bir dizin (dist) oluşturulur ve web uygulamanız sıkıştırılır, optimize edilir ve bu klasör içinde üretime hazır bir sürüme dönüştürülür.

4. Adım. Gradle derlemesini yapılandırma

webapp dizininizde build.gradle adlı yeni bir dosya oluşturun.

Yeni build.gradle dosyanıza aşağıdakileri ekleyin:

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

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

Bu işlem, önceden tanımlanmış Exec türüne sahip buildWebApp adlı yeni bir görev oluşturur. Ardından, Exec içindeki executable değişkenini geçerli işletim sistemine bağlı olarak ilgili grunt komutuna ayarlayın. args "build" olarak ayarlanır. Bu, grunt build'nin komut satırında çalıştırıldığı anlamına gelir. Son olarak, üstteki içe aktarma işlemi Os.isFamily(Os.FAMILY_WINDOWS)'ten yararlanır.

Bu yeni görevi kullanabilmemiz için projenin yeni build.gradle dosyasını bilmesi gerekir.

Kök dizinde settings.gradle dosyasını açın ve aşağıdaki satırı ekleyin:

include ':webapp'

5. Adım: Android uygulamasını oluştururken web uygulamanızı oluşturma

Web uygulamasını derleyin ve ardından uygulamayı Android uygulamamızın assets dizinine kopyalayın.

Aşağıdakileri Android uygulamaları build.gradle dosyasına kopyalayın:

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
}

Bu işlemin her bir bölümünü inceleyelim.

görev copyWebApplication

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

Bu Copy görevi, uygulamanızı webapp/dist dizininden kopyalar. Dosyaları src/main/assets/www'e kopyalamak istiyoruz. Bu görev, gerekli dizinlerden herhangi biri mevcut değilse gerekli dosya yapısını da oluşturur.

task deleteWebApplication

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

Bu silme görevi, assets/www dizinindeki tüm dosyaları siler.

copyWebApplication.dependsOn

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

Bu satırın ilk satırı, copyWebApplication'ün web uygulamamızın build.gradle dosyasında bulunan buildWebApp görevine bağımlı olduğunu belirtir.

İkinci satırda, deleteWebApplication görevine bağımlı olduğu belirtiliyor.

Diğer bir deyişle, assets dizinine herhangi bir dosya kopyalamadan önce web uygulamasını oluşturduğumuzdan ve assets dizininin mevcut içeriğini sildiğimizden emin olun.

android.applicationVariants.all

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

Bu görev, projenizin tüm derlemelerinin ve uygulamanızın her bir sürümünün bağımlılıklarını belirtir. Burada, copyWebApplication'un çalıştırılması için assemble görevlerine bağımlılık ayarlanır.

assemble görevleri, projenin çıktısını bir araya getirir. Bu nedenle, web uygulamasının önce Android projesine kopyalanması gerekir.

6. Adım: Her şeyin çalıştığından emin olma

Android Studio'da, Android uygulamaları src klasörünüzde assets dizini bulunmamalıdır.

Web Görünümü'nü index.html sayfasını kullanacak şekilde ayarlayın:

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

Çalıştır'ı tıklayın ve uygulamanızın derlenmesini bekleyin. www alt dizininde web uygulamanızın bulunduğu bir assets dizin göreceksiniz.

7. Adım: Canlı sunucu oluşturma ve canlı yeniden yükleme

Canlı yeniden yükleme, web uygulamalarınızda hızlıca değişiklik yapmak için oldukça yararlı olabilir. Bunu etkinleştirmek için uygulamanız için iki "ürün çeşidi" oluşturabilirsiniz: web içeriğinin Android uygulamasına paketlendiği canlı bir sunucu sürümü ve statik bir sürüm.

Android uygulamanızın build.gradle öğesinde android öğesinin sonuna aşağıdaki satırları ekleyin:

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

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

}

Gradle artık uygulamanızın canlı sunucu paket adıyla ve normal paket adınızla birer sürümü oluşturmanıza olanak tanır. İşlemin işe yarayıp yaramadığını kontrol etmek için Projeyi Gradle Dosyalarıyla Senkronize Et'i (Çalıştır düğmesinin yanındaki üst çubukta) tıklayın.

Ardından, Android Studio'nun sol alt köşesinde bulunan ve uygulamanızın hangi sürümlerini derleyebileceğinizi gösteren Derleme Varyantları'nı görüntüleyin.

Her productFlavor için Gradle'e yönelik Android eklentisinin varsayılan olarak sunduğu Hata Ayıklama ve Sürüm sürümleri vardır. Bu, derlemenin hata ayıklama derlemesi mi yoksa Play Store'da dağıtıma uygun bir sürüm derlemesi mi olacağını belirler.

Artık iki sürümünüz var ancak bu sürümler henüz farklı bir şey yapmıyor.

8. Adım. Canlı bir sunucudan yükleme

Artık uygulamanızı, hangi ürün çeşidini oluşturduğunuza bağlı olarak farklı bir URL yükleyecek şekilde yapılandırın.

Android uygulamanızda, tüm ürün türlerinde ortak olan dosyalar src/main içinde bulunur. Bir ürün çeşidine özel kod veya kaynak eklemek için src altında productFlavor ile aynı ada sahip başka bir dizin oluşturun. Bu derleme varyantı için derleme yaptığınızda Gradle ve Android eklentisi, bu ek dosyaları src/main içindeki dosyaların üzerine birleştirir.

URL'yi dize kaynağı olarak tanımlayın ve sabit kodlanmış bir URL yerine kodunuzda bu kaynağı kullanın.

  1. src/liveserver ve src/staticbuild klasörlerini oluşturun.

  2. liveserver klasöründe, res adlı yeni bir klasör ve values adlı bir alt klasör oluşturun. Bu klasörün içinde config.xml adlı bir dosya oluşturun. Bu işlemi staticbuild klasörü için tekrarlayın.

  3. Yapılandırma dosyalarınızdaki src/liveserver/res/values/config.xml bölümüne aşağıdaki satırları ekleyin:

    <?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 alanına aşağıdaki bloğu ekleyin:

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

  4. WebView'inizi bu yapılandırma dosyalarındaki init_url değerini kullanacak şekilde ayarlayın.

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

  5. liveserver/AndroidManifest.xml içinde AndroidManifest.xml adlı yeni bir dosya oluşturun ve aşağıdaki satırları ekleyin:

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

    Bu işlem, liveserver derlemeleri için internet iznini ekler.

  6. webapp/Gruntfile.js içinde şunları arayın:

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

    Yerel sunucunuza yerel ağdan erişilebilmesi için localhost değerini 0.0.0.0 ile değiştirin:

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

Değişikliklerinizi test etmek için:

  1. Canlı sunucuyu başlatın:

    grunt server

  2. Android Studio'da Derleme Varyantı bölümünde LiveserverDebug'ı seçin. Ardından Run'ı (Çalıştır) tıklayın.

    HTML, CSS ve JavaScript içeriğinizi düzenleyebilir ve bu içeriğin tarayıcıya hemen yansıtıldığını görebilirsiniz.

Artık uygulamanızın iki sürümü var: Grunt sunucusundan canlı olarak yeniden yüklenen bir geliştirme sürümü ve Android uygulamasında yerel olarak paketlenmiş statik bir sürüm.