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. Bizimle iletişime geçin Chrome Uygulamaları geliştirici forumumuz GitHub sorun izleyici ve Stack Overflow'u veya G+ Geliştiricileri sayfamızı ziyaret edin.

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

Genel Bakış

Chrome Uygulamalarınızı Android ve iOS'ta Apache'ye dayalı bir araç zinciri aracılığıyla çalıştırabilirsiniz Cordova, yerel uygulamalarla mobil uygulamalar geliştirmeye yönelik açık kaynak bir mobil geliştirme çerçevesi özelliklerini geliştirirsiniz.

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

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 ile Android 4.x ve sonraki sürümleri hedefleyebilir.

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

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

    • Windows: Şu konumdan indirilebilen yükleme yürütülebilir dosyalarını kullanarak Node.js'yi yükleyin: nodejs.org.
    • OS X veya Linux: Yürütülebilir yükleme işlemleri, nodejs.org adresinden de edinilebilir. Şu durumda: isterseniz nvm üzerinden yükleme yapmak daha kolay 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 hedefleniyor

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

  • Java JDK 7 (veya üzeri)
  • Android SDK 4.4.2 veya sonraki sürümü
    • Android ADT Bundle ile birlikte gelen Android SDK'yı ve Android Geliştirici Araçları'nı yükleyin.
    • PATH ortam değişkeninize sdk/tools ve sdk/platform-tools öğelerini ekleyin.
    • OS X: Android SDK ile birlikte gelen Eclipse sürümü, JRE 6'yı gerektirir. Açılıyorsa Eclipse.app, JRE 6'yı yüklemenizi istemiyor. Uygulamayı Mac App Store'dan edinin.
    • Linux: Android SDK için 32 bit destek kitaplıkları gerekir. Ubuntu'da, şu şekilde alın: apt-get install ia32-libs
  • Apache Karınca
    • apache-ant-x.x.x/bin öğesini PATH ortam değişkeninize 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 üzeri)
  • ios-deploy (iOS cihaza dağıtılması gerekir)
    • npm install -g ios-deploy
  • ios-sim (iOS Simülatörüne dağıtılması 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önderim için gereklidir.
    • Yalnızca iPhone/iPad simülatörlerini kullanmayı planlıyorsanız kayıt işlemini atlayabilirsiniz.

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

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

npm install -g cca

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

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

cca checkenv

cca sürüm numarası çıktı ve Android ya da iOS SDK'nızla ilgili onay gösterilir teşekkür ederiz.

2. Adım: Bir proje oluşturun

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

cca create YourApp

Zaten bir Chrome Uygulaması oluşturduysanız ve bu uygulamayı bir mobil platforma taşımak istiyorsanız Sembol bağlantısı oluşturmak için --link-to işareti:

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

Bunun yerine mevcut Chrome uygulaması 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 cihazlar için çok sayıda örnek Chrome uygulamasından birini deneyin destek ile görüşün.

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
  • Seçenek B: Eclipse veya Xcode gibi bir IDE kullanarak. IDE kullanımı tamamen isteğe bağlıdır (ancak çoğu zaman faydalıdır) karma mobil uygulamanızı başlatma, yapılandırma ve hata ayıklama konularında yardım alabilirsiniz.

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. Bunu ayarlamak için android avd aracını çalıştırabilirsiniz. android komutunu çalıştırarak ek emülatör resimlerini indirin. Intel görüntülerinin daha hızlı çalışması 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ünde çalıştırmak için: cca emulate ios
  • Uygulamanızı bağlı bir iOS cihazda çalıştırmak için: cca run ios

Seçenek B: IDE (Entegre Geliştirme Ortamı) kullanarak geliştirme ve derleme

Android

  1. Tutulma'da File -> öğesini seçin Import.
  2. Android seçin > Existing Android Code Into Workspace.
  3. cca ile 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.
    • Bir Çalıştırma Yapılandırması oluşturmanız gerekir (tüm Java uygulamalarında olduğu gibi). Genellikle bunu ilk kez otomatik olarak girmeniz istenir.
    • İlk seferde cihazlarınızı/emülatörlerinizi de yönetmeniz gerekir.

iOS

  1. 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 projeyi seçmek ve olanak tanır. CordovaLib yerine YourApp seçeneğinin belirlendiğ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/ dosyasında değişiklik yaptıktan sonra, uygulamanızı dağıtmadan önce cca prepare çalıştırmanız gerekir. bir uygulamadır. cca build, cca run veya cca emulate öğesini komut satırından çalıştırıyorsanız otomatik olarak yapılır. Eclipse/XCode kullanarak geliştirme yapıyorsanız Manuel olarak cca prepare.

Hata ayıklama

Mobil cihazlarda Chrome Uygulamanızdaki hataları, Cordova uygulamalarında hata ayıkladığınız şekilde ayıklayabilirsiniz.

4. adım: Sonraki adımlar

Artık çalışan bir mobil Chrome uygulamasına sahip olduğunuza göre, mobil cihazlar.

Mobil Manifest

Chrome Uygulamasında yalnızca mobil platformlar için geçerli olan belirli ayarlar vardır. Bir www/manifest.mobile.json dosyası bunları içerecek şekilde ayarlanmış ve dosya boyunca belirli değerlere referans verilmiştir eklenti dokümanlarını ve bu kılavuzu inceleyin.

Buradaki değerleri uygun şekilde ayarlamanız gerekir.

Simgeler

Mobil uygulamalar, masaüstü Chrome Uygulamalarından biraz 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ında, gereken boyutlar iOS 6 ve iOS 7'yi destekleyip desteklememenize bağlı olarak farklılık gösterir. En az sayıda simge gereklidir:

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

manifest.json dosyanızda eksiksiz bir 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"
}

Her çalıştırmanızda simgeler her platform için uygun yerlere kopyalanır cca prepare

Başlangıç Ekranları

iOS'teki uygulamalar, uygulama yüklenirken kısa bir başlangıç ekranı gösterir. Varsayılan Cordova sıçraması seti ekranlar platforms/ios/[AppName]/Resources/splash kapsamındadır.

Gereken boyutlar şunlardır:

  • 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 1146 piksel

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

5. Adım: Yayınlama

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

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, sürümünü de ekleyebilirsiniz).
    • 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 ayarlarını yapın özellikleri (Android geliştirici belgelerinde 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 geliştirici konsoluna yükleyin.

iOS App Store'da yayınla

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

  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'ndaki talimatları uygulayın.

Dikkat edilmesi gereken noktalar

Chrome Uygulamaları'nı kullanmaya yeni başladıysanız karşılaşabileceğiniz en büyük fark, bazı web özelliklerinin devre dışı olmasıdır. Ancak, bunların birçoğu şu anda Cordova'da çalışmaktadır.

Chrome Uygulamaları, mobil cihazlarda kullanıma hazır olmayabilir. Mobil cihaza taşımayla ilgili bazı yaygın sorunlar:

  • Küçük ekranlarla, özellikle dikey yöndeyken düzen sorunları.
    • Önerilen düzeltme: İç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ını ayarlayın.
    • Önerilen düzeltme: Sabit kodlu pencere boyutlarını kaldırın; uygulamanızı farklı boyutlarda zihin.
  • 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 özelliğinin kullanıldığı durumlarda beklenmedik davranış.
    • Önerilen düzeltme: Fareyle üzerine gelmenin yanı sıra, dokunun.
  • 300 ms'lik bir dokunma gecikmesi.

Desteklenen Chrome API'leri

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

  • kimlik: OAuth2 kullanarak oturum açan kullanıcılar
  • ödemeler: Mobil uygulamanızın içinde sanal ürünler satma
  • pushMessaging - sunucunuzdan uygulamanıza push mesajları
  • sockets (bağlantılar) - TCP ve UDP kullanarak ağ üzerinden veri gönderme ve alma
  • bildirimler (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 yedeklenen dosyaları depolama ve alma
  • alarmlar - Görevleri düzenli olarak çalıştırma
  • boşta - Makinenin boşta kalma durumu değiştiğinde tespit edilir
  • power (güç) - Sistemin güç yönetimi özelliklerini geçersiz kılın

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

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

İlerleme durumunuzu API Durumu sayfamızdan takip edebilirsiniz.

Chrome Uygulamaları Geliştirici Aracı

Android için Chrome Uygulama Geliştirici Aracı (ADT), aşağıdakileri yapmanıza olanak tanıyan bağımsız bir Android uygulamasıdır: yukarıda açıklandığı gibi geliştirme araç zincirini kurmadan bir Chrome Uygulaması indirip çalıştırmanız. Tekliflerinizi otomatikleştirmek ve optimize etmek için Mevcut bir Chrome uygulamasını (zaten .crx olarak paketlenmiş) hızlıca önizlemek istediğinizde Chrome ADT Android cihazınızda.

Android için Chrome ADT şu anda alfa sürümünden öncedir. Denemek için Yükleme ve kullanım talimatları için ChromeADT.apk sürüm notları.