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

Chrome Uygulamalarını mobil cihazlarda çalıştırma araç zinciri, ilk geliştirici önizlemesindedir. GitHub sorun izleyiciyi, Chrome Uygulamaları geliştirici forumumuzu, Stack Overflow'u veya G+ Geliştiricileri sayfamızı kullanarak bize geri bildirimlerinizi iletebilirsiniz.

Hem masaüstünde hem de mobilde çalışan bir Chrome uygulaması

Genel bakış

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

Apache Cordova, uygulamanızın web kodunu yerel bir uygulama kabuğuyla sarmalar 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 Android 4.x+ sürümlerini hedefleyebilir.

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

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

    • Windows: nodejs.org adresinden indirilebilen yürütülebilir yükleme dosyalarını kullanarak Node.js'yi yükleyin.
    • OS X veya Linux: Yükleme yürütülebilir dosyalarına nodejs.org adresinden de erişilebilir. Kök erişimi ihtiyacından kaçınmak isterseniz nvm aracılığıyla yükleme yapmanız daha uygun olabilir. Ö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'i hedefleme

Android için bir uygulama geliştirirken şunları da yüklemeniz gerekir:

  • Java JDK 7 (veya üstü)
  • Android SDK 4.4.2 (veya üzeri) sürümü
    • Android ADT Bundle ile birlikte verilen Android SDK'sını ve Android Geliştirici Araçları'nı yükleyin.
    • PATH ortam değişkeninize sdk/tools ve sdk/platform-tools ekleyin.
    • OS X: Android SDK ile gelen Eclipse sürümü JRE 6 gerektirir. Eclipse.app'i açmak JRE 6'yı yüklemenizi istemiyorsa uygulamayı Mac App Store'dan edinin.
    • Linux: Android SDK için 32 bit destek kitaplıkları gerekir. Ubuntu'da bu kaynakları şu adresten edinebilirsiniz: apt-get install ia32-libs.
  • Apache Karınca
    • PATH ortam değişkeninize apache-ant-x.x.x/bin ekleyin.

iOS hedefleniyor

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

  • Xcode komut satırı araçlarını içeren Xcode 5 (veya üstü)
  • ios-deploy (iOS cihaza dağıtım gerekir)
    • npm install -g ios-deploy
  • ios-sim (iOS Simülatör'e dağıtım gerekir)
    • npm install -g ios-sim
  • İsteğe bağlı: iOS geliştiricisi olarak kaydolma
    • Bu, gerçek cihazlarda test yapmak ve uygulama mağazasına göndermek için gereklidir.
    • Yalnızca iPhone/iPad simülatörlerini kullanmayı planlıyorsanız kayıt adımını atlayabilirsiniz.

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

npm üzerinden cca uygulamasını yükle:

npm install -g cca

Araç zincirini 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 bir şekilde yüklendiğini onaylayın:

cca checkenv

cca sürümünün çıkışını ve Android veya iOS SDK yüklemenizin onayını görürsünüz.

2. Adım: Bir proje oluşturun

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

cca create YourApp

Zaten bir Chrome Uygulaması oluşturduysanız ve bunu bir mobil platforma taşımak istiyorsanız --link-to işaretini kullanarak bu uygulamayla bir sembolik bağlantı oluşturabilirsiniz:

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

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

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

Henüz kendi Chrome Uygulamanız yok mu? Mobil destekli örnek Chrome Uygulamalarından birini deneyin.

3. Adım: Geliştirme

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

  • Seçenek A: Komut satırından cca aracını kullanarak veya
  • Seçenek B: Eclipse veya Xcode gibi bir IDE kullanarak. IDE kullanımı, karma mobil uygulamanızı başlatmak, yapılandırmak ve hata ayıklamak için tamamen isteğe bağlı olsa da genellikle kullanışlı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 dizininden:

Android

  • Uygulamanızı Android Emülatör'de çalıştırmak için: cca emulate android
    • Not: Bunun için bir emülatör ayarlamış olmanız gerekir. Bunun kurulumunu yapmak için android avd komutunu çalıştırabilirsiniz. android çalıştırarak ek emülatör resimleri indirebilirsiniz. Intel görüntülerin daha hızlı çalışmasını sağlamak için Intel'in HAXM'sini yükleyin.
  • Uygulamanızı bağlı bir Android cihazda çalıştırmak için: cca run android

iOS

  • Uygulamanızı iOS Simülatör'de çalıştırmak için: cca emulate ios
  • Bağlı bir iOS cihazında uygulamanızı çalıştırmak için: cca run ios

Seçenek B: IDE kullanarak geliştirme ve derleme

Android

  1. Eclipse'te File -> Import seçeneğini belirleyin.
  2. Android > Existing Android Code Into Workspace seçeneklerini belirleyin.
  3. cca ile oluşturduğunuz yoldan içe aktarın.
    • İçe aktarılacak iki proje olacaktır. Bunlardan biri *-CordovaLib.
  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. Genellikle bu işlem ilk kez otomatik olarak istenir.
    • Ayrıca, cihazlarınızı/emülatörlerinizi ilk kez yönetmeniz gerekir.

iOS

  1. Bir terminal penceresine şunu 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 proje ve cihazı seçmeniz için bir açılır liste bulunur. CordovaLib yerine YourApp öğesinin seçildiğinden emin olun.

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

Uygulama kaynak kodunuzda değişiklik yapma

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

Önemli: www/ üzerinde değişiklikler yaptıktan sonra, uygulamanızı dağıtmadan önce cca prepare öğesini çalıştırmanız gerekir. Komut satırından cca build, cca run veya cca emulate çalıştırıyorsanız hazırlık adımı otomatik olarak tamamlanır. Eclipse/XCode kullanarak geliştirme yapıyorsanız cca prepare dosyasını manuel olarak çalıştırmanız gerekir.

Hata ayıklama

Mobil cihazlardaki Chrome Uygulamanızın hatalarını ayıklama işlemini, Cordova uygulamalarında hata ayıkladığınız şekilde yapabilirsiniz.

4. Adım: Sonraki Adımlar

Artık çalışan bir mobil Chrome Uygulamanız olduğuna göre, mobil cihazlardaki deneyimi iyileştirmenin birçok yolu var.

Mobil Manifest

Yalnızca mobil platformlar için geçerli olan belirli Chrome uygulaması ayarları vardır. Bunları içeren bir www/manifest.mobile.json dosyası oluşturduk. Eklenti belgelerinde ve bu kılavuzda belirli değerlere referans verilmiştir.

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

Simgeler

Mobil uygulamaların, masaüstü Chrome Uygulamalarından birkaç tane daha fazla simge çözünürlüğüne ihtiyacı vardır.

Android için şu boyutlar gereklidir:

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

iOS uygulamalarında, gerekli boyutlar, iOS 6 ve iOS 7'yi destekleme durumunuza bağlı olarak farklılık gösterir. Gerekli minimum simge sayısı:

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

Tam simge listesi manifest.json dosyanızda şöyle görünecektir:

"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 platform için uygun yerlere kopyalanır.

Başlangıç Ekranları

iOS'teki uygulamalar yüklenirken kısa bir başlangıç ekranı gösterilir. Bir dizi varsayılan Cordova başlangıç ekranı platforms/ios/[AppName]/Resources/splash dahilindedir.

Gerekli boyutlar:

  • 320 piksel x 480 piksel + 2x
  • 768 piksel x 1024 piksel + 2x (iPad dikey)
  • 1024 piksel x 768 piksel + 2x (iPad yatay)
  • 640 piksel x 1146 piksel

Başlangıç ekranı resimleri şu anda cca tarafından değiştirilmemektedir.

5. Adım: Yayınlama

Projenizin platforms dizininde biri Android, diğeri iOS için olmak üzere iki eksiksiz yerel projeniz vardır. Bu projelerin sürüm sürümlerini oluşturup Google Play veya iOS App Store'da yayınlayabilirsiniz.

Play Store'da yayınla

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

  1. İki Android sürümü kimliğini güncelleyip cca prepare komutunu çalıştırın:

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

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

  3. Projenizi oluşturun:

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

  4. İmzalı .apk'nizi platforms/android/ant-build/ klasöründe bulabilirsiniz.

  5. İmzalanmış uygulamanızı Google Play Geliştirici Konsolu'na yükleyin.

iOS App Store'da yayınla

  1. www/manifest.mobile.js uygulamasında CFBundleVersion anahtarını ayarlayarak uygulama sürümünü güncelleyin, ardından cca prepare komutunu çalıştırın.

  2. platforms/ios dizininizin altında bulunan Xcode proje dosyasını açın:

    açık platformlar/ios/*.xcodeproj

  3. Apple'ın App Distribution Guide'daki talimatları uygulayın.

Dikkat edilmesi gereken noktalar

Chrome Uygulamalarını kullanmaya yeni başladıysanız en büyük avantajı bazı web özelliklerinin devre dışı bırakılmasıdır. Ancak, bunlardan bazıları şu anda Cordova'da çalışmaktadır.

Chrome Uygulaması mobil cihazlarda hemen çalışmayabilir. Mobil cihaza taşıma işlemiyle ilgili bazı yaygın sorunlar:

  • Özellikle dikey yöndeyken küçük ekranlarda düzen sorunları var.
    • Önerilen düzeltme: İçeriğinizi daha küçük ekranlar için optimize etmek üzere CSS medya sorgularını kullanın.
  • chrome.app.window üzerinden ayarlanan Chrome Uygulaması pencere boyutları, cihazın yerel boyutları yerine yoksayılır.
    • Önerilen düzeltme: Sabit kodlu pencere boyutlarını kaldırın; uygulamanızı farklı boyutları göz önünde bulundurarak tasarlayın.
  • Küçük düğmelere ve bağlantılara parmağınızla dokunmak zor olur.
    • Önerilen düzeltme: Dokunma hedeflerinizi en az 44 x 44 punto olacak şekilde ayarlayın.
  • Dokunmatik ekranlarda olmayan fareyle üzerine gelme kullanılırken beklenmeyen davranış.
    • Önerilen düzeltme: Fareyle üzerine gelmeye ek olarak, dokunarak açılır listeler ve ipuçları gibi kullanıcı arayüzü öğelerini etkinleştirin.
  • 300 ms. dokunma gecikmesi.

Desteklenen Chrome API'leri

Aşağıdakiler de dahil olmak üzere temel Chrome API'larının birçoğunu Mobil Cihazlar için Chrome Uygulamaları'nda kullanıma sunduk:

  • kimlik: OAuth2 kullanarak oturum açan kullanıcılar
  • ödemeler: mobil uygulamanızda sanal ürünler satma
  • pushMessaging - Sunucunuzdan uygulamanıza mesaj aktarın
  • sockets - TCP ve UDP kullanarak ağ üzerinden veri gönderin ve alın
  • bildirimler (yalnızca Android) - Mobil uygulamanızdan zengin bildirimler gönderin
  • storage - Anahtar/değer verilerini yerel olarak depolayın ve alın
  • syncFileSystem - Google Drive tarafından yedeklenen dosyaları depolayın ve alın
  • alarms: Görevleri düzenli aralıklarla çalıştırma
  • idle (boşta) - Makinenin boşta kalma durumunun ne zaman değiştiğini algıla
  • güç - Sistemin güç yönetimi özelliklerini geçersiz kıl

Ancak tüm Chrome JavaScript API'leri uygulanmamıştır. Ayrıca, Chrome Masaüstü özelliklerinin tümü mobil cihazlarda kullanılamaz:

  • <webview> etiketi yok
  • IndexedDB yok
  • getUserMedia() yok
  • NaCl içermez

İlerleme durumunu API Durumu sayfamızdan takip edebilirsiniz.

Chrome Uygulama Geliştirici Aracı

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

Android için Chrome ADT şu anda alfa öncesi sürümde sunulmaktadır. Denemek için yükleme ve kullanım talimatlarının yer aldığı ChromeADT.apk sürüm notlarını görüntüleyin.