Apache Cordova'yı Kullanarak Chrome Uygulamalarını Mobil Cihazlarda Çalıştırma

Mobil cihazlarda Chrome Uygulamalarını çalıştırmak için kullanılan araç zinciri, erken geliştirici önizlemesindedir. GitHub sorun izleyicisini, Chrome Uygulamaları geliştirici forumumuzu, Stack Overflow'u veya G+ Geliştiriciler sayfamızı kullanarak geri bildirimlerinizi bizimle paylaşabilirsiniz.

Hem masaüstü hem de mobil cihazlarda çalışan bir Chrome uygulaması

Genel Bakış

Chrome uygulamalarınızı, HTML, CSS ve JavaScript'i kullanarak yerel özelliklere sahip mobil uygulamalar oluşturmak için açık kaynak bir mobil geliştirme çerçevesi olan Apache Cordova'ya dayalı bir araç seti aracılığıyla Android ve iOS'te çalıştırabilirsiniz.

Apache Cordova, uygulamanızın web kodunu yerel bir uygulama kabuğuna sarar ve karma web uygulamanızı Google Play ve/veya Apple App Store üzerinden dağıtmanıza olanak tanır. Apache Cordova'yı mevcut bir Chrome uygulamasıyla kullanmak için cca (c ordova c hrome a pp) komut satırı aracını kullanırsınız.

Ek kaynaklar

Haydi başlayalım.

1. adım: Geliştirme araçlarınızı yükleyin

Mobil cihazlar için Chrome uygulamaları araç zinciri, iOS 6 ve sonraki sürümleri ve Android 4.x ve sonraki sürümleri hedefleyebilir.

Tüm platformlar için geliştirme bağımlılıkları

  • npm ile 0.10.0 (veya daha yeni) sürüm Node.js gereklidir:

    • Windows: nodejs.org adresinden indirilebilen yükleme yürütülebilir dosyalarını kullanarak Node.js'yi yükleyin.
    • OS X veya Linux: Yürütülebilir yükleme işlemleri, nodejs.org adresinden de edinilebilir. Kök erişimi ihtiyacından kaçınmak isterseniz nvm aracılığıyla yükleme işlemini daha kolay gerçekleştirebilirsiniz. Örnek:
    curl https://raw.github.com/creationix/nvm/master/install.sh | sh
source ~/.bash_profile || source ~/.profile || source ~/.bashrc
nvm install 0.10
nvm alias default 0.10

Android hedefleniyor

Android için uygulama geliştirirken aşağıdakileri de yüklemeniz gerekir:

  • Java JDK 7 (veya daha yeni)
  • Android SDK 4.4.2 (veya sonraki sürümler)
    • Android ADT Bundle ile birlikte gelen Android SDK'yı ve Android Geliştirici Araçları'nı yükleyin.
    • sdk/tools ve sdk/platform-tools'yi PATH ortam değişkeninize ekleyin.
    • OS X: Android SDK'sı ile birlikte gelen Eclipse sürümünün JRE 6 sürümü gerekir. Eclipse.app'i açtığınızda JRE 6'yı yüklemeniz istenmezse Mac App Store'dan edinin.
    • Linux: Android SDK için 32 bit destek kitaplıkları gerekir. Ubuntu'da bunları şuradan edinin: apt-get install ia32-libs.
  • Apache Ant
    • apache-ant-x.x.x/bin öğesini PATH ortam değişkeninize ekleyin.

iOS'i hedefleme

iOS geliştirmenin yalnızca OS X'te yapılabileceğini lütfen unutmayın. Ayrıca şunları da yüklemeniz gerekir:

  • Xcode komut satırı araçlarını içeren Xcode 5 (veya sonraki sürümler)
  • ios-deploy (iOS cihaza dağıtım yapılması gerekir)
    • npm install -g ios-deploy
  • ios-sim (iOS Simülasyon Aracı'na dağıtmak için gereklidir)
    • npm install -g ios-sim
  • İsteğe bağlı: iOS geliştiricisi olarak kaydol
    • Bu, gerçek cihazlarda test etmek ve uygulama mağazasına göndermek için gereklidir.
    • Yalnızca iPhone/iPad simülasyon araçlarını kullanmayı planlıyorsanız kaydı atlayabilirsiniz.

cca komut satırı aracını yükleme

cca'ı npm üzerinden yükleme:

npm install -g cca

Araç setini daha sonra yeni sürümlerle güncellemek için: npm update -g cca.

Komut satırından şu komutu çalıştırarak her şeyin doğru şekilde yüklendiğini onaylayın:

cca checkenv

cca sürüm numarasını ve Android veya iOS SDK'nızın yüklenmesi ile ilgili onay mesajını görürsünüz.

2. Adım: Bir proje oluşturun

YourApp adlı bir dizinde varsayılan bir mobil Chrome uygulaması projesi oluşturmak için:

cca create YourApp

Daha önce bir Chrome uygulaması oluşturduysanız ve bu uygulamayı mobil bir platforma taşımak istiyorsanız --link-to işaretçisini kullanarak uygulamaya symlink oluşturabilirsiniz:

cca create YourApp --link-to=path/to/manifest.json

Bunun yerine mevcut Chrome uygulaması dosyalarınızı kopyalamak istiyorsanız --copy-from işaretini kullanabilirsiniz:

cca create YourApp --copy-from=path/to/manifest.json

Henüz kendi Chrome Uygulamanız yok mu? Mobil destekli birçok örnek Chrome uygulamasından birini deneyin.

3. Adım: Geliştirme

Uygulamanızı iki şekilde derleyip çalıştırabilirsiniz:

  • A seçeneği: Komut satırından cca aracını kullanarak veya
  • B seçeneği: Eclipse veya Xcode gibi bir IDE kullanarak. Karma mobil uygulamanızı başlatmanıza, yapılandırmanıza ve hata ayıklamanıza yardımcı olmak için IDE kullanmak tamamen isteğe bağlıdır (ancak genellikle yararlıdır).

Seçenek A: Komut satırını kullanarak geliştirme ve oluşturma

cca tarafından oluşturulan proje klasörünüzün kökünden:

Yapay Zeka

  • Uygulamanızı Android Emulator'da çalıştırmak için: cca emulate android
    • Not: Bunun için bir emülatör ayarlamanız gerekir. Bunu ayarlamak için android avd komutunu çalıştırabilirsiniz. android komutunu çalıştırarak ek emülatör resimleri indirin. Intel imajlarının daha hızlı çalışmasını sağlamak için Intel'in HAXM sürümünü yükleyin.
  • Uygulamanızı bağlı bir Android cihazda çalıştırmak için: cca run android

iOS

  • Uygulamanızı iOS simülasyon aracında çalıştırmak için: cca emulate ios
  • Uygulamanızı bağlı bir iOS cihazda çalıştırmak için: cca run ios

B seçeneği: IDE kullanarak geliştirme ve derleme

Yapay Zeka

  1. Eclipse'te File -> Import'ü seçin.
  2. Android > Existing Android Code Into Workspace'i seçin.
  3. cca ile yeni oluşturduğunuz yoldan içe aktarın.
    • Biri *-CordovaLib olmak üzere içe aktarılacak iki projeniz olması gerekir.
  4. Uygulamanızı çalıştırmak için Oynat düğmesini tıklayın.
    • Tüm Java uygulamalarında olduğu gibi bir Çalıştırma Yapılandırması oluşturmanız gerekir. Bu istem genellikle ilk defa otomatik olarak istenir.
    • Cihazlarınızı/emülatörlerinizi ilk kez de yönetmeniz gerekir.

iOS

  1. Terminal penceresine aşağıdakileri yazarak projeyi Xcode'da açın:

    cd YourApp
open platforms/ios/*.xcodeproj

  2. Doğru hedefi oluşturduğunuzdan emin olun.

    Sol üstte (Çalıştır ve Durdur düğmelerinin yanında), hedef projeyi ve cihazı seçebileceğiniz bir açılır menü bulunur. CordovaLib yerine YourApp'ün seçili olduğundan emin olun.

  3. Oynat düğmesini tıklayın.

Uygulamanızın kaynak kodunda değişiklik yapma

HTML, CSS ve JavaScript dosyalarınız, cca proje klasörünüzün www dizininde bulunur.

Önemli: www/ dosyasında değişiklik yaptıktan sonra uygulamanızı dağıtmadan önce cca prepare dosyasını çalıştırmanız gerekir. cca build, cca run veya cca emulate'yi komut satırından çalıştırıyorsanız hazırlama adımı otomatik olarak gerçekleştirilir. Eclipse/XCode kullanarak geliştirme yapıyorsanız cca prepare dosyasını manuel olarak çalıştırmanız gerekir.

Hata ayıklama

Mobil cihazlarda Chrome uygulamanızda Cordova uygulamalarında hata ayıklama işlemini yaptığınız gibi hata ayıklama yapabilirsiniz.

4. adım: Sonraki adımlar

Çalışan bir mobil Chrome uygulamanız olduğuna göre mobil cihazlardaki deneyimi iyileştirmenin birçok yolu vardır.

Mobil Manifest

Yalnızca mobil platformlar için geçerli olan belirli Chrome uygulaması ayarları vardır. Bunları içerecek bir www/manifest.mobile.json dosyası oluşturduk. Bu değerlere, eklenti dokümanlarında ve bu kılavuzda referans verilmektedir.

Buradaki değerleri buna göre ayarlamanız gerekir.

Simgeler

Mobil uygulamalar, masaüstü Chrome uygulamalarından birkaç tane daha fazla simge çözünürlüğüne ihtiyaç duyar.

Android için şu boyutlar gereklidir:

  • 36 piksel, 48 piksel, 78 piksel, 96 piksel

iOS uygulamaları için gereken boyutlar, iOS 6'yı mı yoksa iOS 7'yi mi desteklediğinize bağlı olarak değişir. Gereken minimum simge sayısı:

  • iOS 6: 57 piksel, 72 piksel, 114 piksel, 144 piksel
  • iOS 7: 72 piksel, 120 piksel, 152 piksel

manifest.json dosyanızdaki tam simge listesi şöyle görünür:

"icons": {
  "16": "assets/icons/icon16.png",
  "36": "assets/icons/icon36.png",
  "48": "assets/icons/icon48.png",
  "57": "assets/icons/icon57.png",
  "72": "assets/icons/icon72.png",
  "78": "assets/icons/icon78.png",
  "96": "assets/icons/icon96.png",
  "114": "assets/icons/icon114.png",
  "120": "assets/icons/icon120.png",
  "128": "assets/icons/icon128.png",
  "144": "assets/icons/icon144.png",
  "152": "assets/icons/icon152.png"
}

cca prepare uygulamasını her çalıştırdığınızda simgeler her bir platform için uygun yerlere kopyalanır.

Başlangıç Ekranları

iOS'teki uygulamalar yüklenirken kısa bir açılış ekranı gösterir. platforms/ios/[AppName]/Resources/splash, varsayılan Cordova açılış ekranları içerir.

Gerekli boyutlar:

  • 320 piksel x 480 piksel + 2x
  • 768 piksel x 1024 piksel + 2x (Dikey iPad)
  • 1024 piksel x 768 piksel + 2x (iPad yatay)
  • 640 piksel x 1.146 piksel

Açılış ekranı resimleri şu anda cca tarafından değiştirilmiyor.

5. Adım: Yayınlayın

Projenizin platforms dizininde, biri Android ve diğeri iOS için olmak üzere eksiksiz iki yerel projeniz var. Bu projelerin yayın sürümlerini derleyip Google Play'de veya iOS App Store'da yayınlayabilirsiniz.

Play Store'da yayınlama

Android uygulamanızı Play Store'da yayınlamak için:

  1. İki Android sürüm kimliğini güncelleyin ve ardından cca prepare'ü çalıştırın:

    • android:versionName, www/manifest.json içinde version anahtarı kullanılarak ayarlanır (bu, masaüstü paket uygulamanızın sürümünü de belirler).
    • android:versionCode, www/manifest.mobile.js içindeki versionCode anahtarı kullanılarak ayarlandı.

  2. platforms/android/ant.properties öğesini düzenleyin (veya oluşturun) ve key.store ve key.alias özelliklerini ayarlayın (Android geliştirici dokümanlarında açıklandığı şekilde).

  3. Projenizi oluşturun:

    ./platforms/android/cordova/build --release

  4. platforms/android/ant-build/ içinde bulunan imzalı .apk dosyanızı bulun.

  5. İmzaladığınız uygulamayı Google Play Developer Console'a yükleyin.

iOS App Store'da yayınlama

  1. www/manifest.mobile.js'da CFBundleVersion anahtarını ayarlayarak uygulama sürümünü güncelleyin ve ardından cca prepare'yi çalıştırın.

  2. platforms/ios dizininizde bulunan Xcode proje dosyasını açın:

    açık platformlar/ios/*.xcodeproj

  3. Apple'ın Uygulama Dağıtım Kılavuzu'nu uygulayın.

Dikkat edilmesi gereken özel noktalar

Chrome uygulamalarında yeniyseniz en büyük sorun, bazı web özelliklerinin devre dışı bırakılmasıdır. Ancak bunların birçoğu şu anda Cordova'da çalışmaktadır.

Chrome uygulamaları mobil cihazlarda kutudan çıkar çıkmaz çalışmayabilir. Mobil cihaza taşımayla ilgili yaygın sorunlardan bazıları:

  • Özellikle dikey yöndeyken küçük ekranlarda düzen sorunları.
    • Önerilen çözüm: İçeriğinizi küçük ekranlar için optimize etmek üzere CSS medya sorgularını kullanın.
  • chrome.app.window aracılığıyla ayarlanan Chrome Uygulaması pencere boyutları yok sayılır. Bunun yerine, cihazın yerel boyutları kullanılır.
    • Önerilen düzeltme: Sabit kodlanmış pencere boyutlarını kaldırın ve uygulamanızı farklı boyutları göz önünde bulundurarak tasarlayın.
  • Küçük düğmelere ve bağlantılara parmağınızla dokunmak zordur.
    • Önerilen düzeltme: Dokunma hedeflerinizi en az 44 x 44 punto olacak şekilde ayarlayın.
  • Dokunmatik ekranlarda bulunmayan fareyle üzerine gelme özelliğine güvenildiğinde beklenmeyen davranış.
    • Önerilen düzeltme: Fareyle üzerine gelmenin yanı sıra, dokunma ile açılır listeler ve ipuçları gibi kullanıcı arayüzü öğelerini etkinleştirin.
  • 300 ms'lik bir dokunma gecikmesi.

Desteklenen Chrome API'leri

Temel Chrome API'lerinin çoğunu Mobil Cihazlar İçin Chrome Uygulamaları'nda kullanıma sunduk. Örneğin:

  • identity: OAuth2'yi kullanarak oturum açan kullanıcılar
  • ödemeler: Mobil uygulamanızın içinde sanal ürünler satma
  • pushMessaging: Sunucunuzdan uygulamanıza push mesajları gönderme
  • soket: TCP ve UDP kullanarak ağ üzerinden veri gönderip alma
  • notifications (yalnızca Android): Mobil uygulamanızdan zengin bildirimler gönderin
  • storage: Anahtar/değer çifti verilerini yerel olarak depolama ve alma
  • syncFileSystem: Google Drive tarafından desteklenen dosyaları depolama ve alma
  • Alarmlar: Görevleri düzenli olarak çalıştırın.
  • idle: Makinenin boşta kalma durumunun değiştiğini algılama
  • güç: Sistemin güç yönetimi özelliklerini geçersiz kılar.

Ancak tüm Chrome JavaScript API'leri uygulanmaz. Chrome masaüstündeki tüm özellikler mobil cihazlarda kullanılamaz:

  • <webview> etiketi yok
  • IndexedDB yok
  • getUserMedia() yok
  • NaCl yok

İlerleme durumunu API Durumu sayfamızdan takip edebilirsiniz.

Chrome Uygulamaları Geliştirici Aracı

Android için Chrome Uygulama Geliştirici Aracı (ADT), yukarıda açıklandığı gibi geliştirme araç zincirini ayarlamadan Chrome Uygulaması indirip çalıştırmanıza olanak tanıyan bağımsız bir Android uygulamasıdır. Android cihazınızda mevcut bir Chrome uygulamasını (.crx olarak paketlenmiş) hızlıca önizlemek istediğinizde Chrome ADT'yi kullanın.

Android için Chrome ADT şu anda alfa öncesi sürümündedir. Denemek için yükleme ve kullanım talimatları için ChromeADT.apk sürüm notlarını inceleyin.