Menjalankan Aplikasi Chrome di Seluler Menggunakan Apache Cordova

Toolchain untuk menjalankan Aplikasi Chrome di perangkat seluler masih dalam pratinjau developer awal. Jangan ragu untuk memberi masukan Anda menggunakan Issue Tracker GitHub, forum developer Aplikasi Chrome kami, di Stack Overflow, atau halaman Developer G+ kami.

Aplikasi Chrome yang berjalan di desktop dan perangkat seluler

Ringkasan

Anda dapat menjalankan Aplikasi Chrome di Android dan iOS melalui toolchain berbasis Apache Cordova, framework pengembangan seluler open source untuk membangun aplikasi seluler dengan kemampuan menggunakan HTML, CSS, dan JavaScript.

Apache Cordova menggabungkan kode web aplikasi Anda dengan shell aplikasi asli dan memungkinkan Anda untuk mendistribusikan aplikasi web hybrid Anda melalui Google Play dan/atau Apple App Store. Untuk menggunakan Apache Cordova dengan Aplikasi Chrome yang ada, Anda dapat menggunakan command line cca (c ordova c hrome a pp) menyediakan alat command line gcloud.

Referensi lainnya

  • Ada beberapa pertimbangan khusus yang harus Anda pertimbangkan saat mengembangkan dengan Cordova; kami telah mencantumkannya di bagian pertimbangan.
  • Untuk melihat API Chrome mana yang didukung di perangkat seluler, buka halaman Status API.
  • Untuk melihat pratinjau Aplikasi Chrome Anda di perangkat Android tanpa toolchain, gunakan Aplikasi Chrome Alat Developer (ADT).

Mari kita mulai.

Langkah 1: Instal alat pengembangan Anda

Aplikasi Chrome untuk toolchain seluler dapat menargetkan iOS 6+ dan Android 4.x+.

Dependensi pengembangan untuk semua platform

  • Node.js versi 0.10.0 (atau yang lebih baru) dengan npm wajib diisi:

    • Windows: Instal Node.js menggunakan penginstalan yang dapat didownload dari file yang dapat didownload dari nodejs.org.
    • OS X atau Linux: File penginstalan yang dapat dieksekusi juga tersedia dari nodejs.org. Jika Anda jika Anda ingin menghindari kebutuhan akses root, mungkin akan lebih mudah untuk menginstal melalui nvm. Contoh:
    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

Menargetkan Android

Saat mengembangkan aplikasi untuk Android, Anda juga perlu menginstal:

  • Java JDK 7 (atau yang lebih baru)
  • Android SDK versi 4.4.2 (atau yang lebih tinggi)
    • Instal Android SDK dan Android Developer Tools yang dipaketkan dengan Android ADT Bundle.
    • Tambahkan sdk/tools dan sdk/platform-tools ke variabel lingkungan PATH Anda.
    • OS X: Versi Eclipse yang disertakan dengan Android SDK memerlukan JRE 6. Jika membuka Eclipse.app tidak meminta Anda untuk menginstal JRE 6, dapatkan melalui Mac App Store.
    • Linux: Android SDK memerlukan library dukungan 32 bit. Di Ubuntu, dapatkan ini melalui: apt-get install ia32-libs.
  • Apache Ant

Menargetkan iOS

Harap diperhatikan bahwa pengembangan iOS hanya dapat dilakukan di OS X. Selain itu, Anda harus menginstal:

  • Xcode 5 (atau yang lebih baru) yang mencakup alat command line Xcode
  • ios-deploy (diperlukan untuk men-deploy ke perangkat iOS)
    • npm install -g ios-deploy
  • ios-sim (diperlukan untuk men-deploy ke Simulator iOS)
    • npm install -g ios-sim
  • Opsional: Mendaftar sebagai developer iOS
    • Hal ini diperlukan untuk pengujian di perangkat sebenarnya dan untuk mengirimkannya ke app store.
    • Anda dapat melewati pendaftaran jika hanya berencana menggunakan simulator iPhone/iPad.

Menginstal alat command line cca

Instal cca melalui npm:

npm install -g cca

Untuk mengupdate toolchain nanti dengan rilis baru: npm update -g cca.

Pastikan semuanya telah diinstal dengan benar dengan menjalankan perintah ini dari command line:

cca checkenv

Anda akan melihat nomor versi cca yang dihasilkan dan konfirmasi tentang SDK Android atau iOS Anda penginstalan.

Langkah 2: Buat project

Untuk membuat project Aplikasi Chrome seluler default di direktori bernama YourApp, jalankan:

cca create YourApp

Jika Anda telah membuat Aplikasi Chrome dan ingin mentransfernya ke platform seluler, Anda dapat menggunakan --link-to untuk membuat symlink ke dalamnya:

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

Jika ingin menyalin file Aplikasi Chrome yang sudah ada, Anda dapat menggunakan tanda --copy-from:

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

Belum memiliki Aplikasi Chrome sendiri? Coba salah satu dari sekian banyak contoh Aplikasi Chrome dengan perangkat seluler dukungan.

Langkah 3: Kembangkan

Anda dapat membangun dan menjalankan aplikasi dengan dua cara:

  • Opsi A: Dari command line, menggunakan alat cca, atau
  • Opsi B: Dengan menggunakan IDE, seperti Eclipse atau Xcode. Penggunaan IDE sepenuhnya bersifat opsional (tetapi sering kali berguna) untuk membantu meluncurkan, mengonfigurasi, dan men-debug aplikasi seluler hybrid Anda.

Opsi A: Mengembangkan dan membangun menggunakan command line

Dari root folder project Anda yang dibuat oleh cca:

Android

  • Untuk menjalankan aplikasi di Android Emulator: cca emulate android
    • Catatan: Hal ini mengharuskan Anda menyiapkan emulator. Anda dapat menjalankan android avd untuk menyiapkannya. Download image emulator tambahan dengan menjalankan android. Untuk membuat {i> intel image <i}berjalan lebih cepat, instal Intel's HAXM.
  • Untuk menjalankan aplikasi di perangkat Android yang terhubung: cca run android

iOS

  • Untuk menjalankan aplikasi di Simulator iOS: cca emulate ios
  • Untuk menjalankan aplikasi di perangkat iOS yang terhubung: cca run ios

Opsi B: Mengembangkan dan membangun aplikasi menggunakan IDE

Android

  1. Di Eclipse, pilih File -> Import.
  2. Pilih Android > Existing Android Code Into Workspace.
  3. Impor dari jalur yang baru saja Anda buat dengan cca.
    • Anda akan memiliki dua project untuk diimpor, salah satunya adalah *-CordovaLib.
  4. Klik tombol Play untuk menjalankan aplikasi Anda.
    • Anda perlu membuat Run Configuration (seperti pada semua aplikasi Java). Anda biasanya mendapatkan diminta untuk pertama kalinya secara otomatis.
    • Anda juga perlu mengelola perangkat/emulator untuk pertama kalinya.

iOS

  1. Buka project di Xcode dengan mengetik berikut ini di jendela terminal:

    cd YourApp
open platforms/ios/*.xcodeproj

  2. Pastikan Anda membangun target yang tepat.

    Di kiri atas (di samping tombol Run dan Stop), terdapat menu {i>dropdown<i} untuk memilih proyek target dan perangkat seluler. Pastikan bahwa YourApp dipilih, bukan CordovaLib.

  3. Klik tombol Play.

Membuat perubahan pada kode sumber aplikasi

File HTML, CSS, dan JavaScript Anda berada di direktori www di folder project cca.

Penting: Setelah melakukan perubahan pada www/, Anda harus menjalankan cca prepare sebelum men-deploy aplikasi. Jika Anda menjalankan cca build, cca run, atau cca emulate dari command line, persiapan selesai secara otomatis. Jika Anda mengembangkan menggunakan Eclipse/XCode, Anda harus menjalankan cca prepare secara manual.

Proses Debug

Anda dapat men-debug Aplikasi Chrome di perangkat seluler dengan cara yang sama seperti men-debug aplikasi Cordova.

Langkah 4: Langkah Berikutnya

Sekarang setelah Anda memiliki Aplikasi Chrome seluler yang berfungsi, ada banyak cara untuk meningkatkan pengalaman di perangkat seluler.

Manifes Seluler

Ada setelan Aplikasi Chrome tertentu yang hanya berlaku untuk platform seluler. Kami telah membuat www/manifest.mobile.json untuk menampungnya, dan nilai tertentu dirujuk di seluruh dokumentasi plugin dan panduan ini.

Anda harus menyesuaikan nilai di sini sesuai kebutuhan.

Ikon

Aplikasi seluler memerlukan resolusi ikon lebih banyak daripada Aplikasi Chrome desktop.

Untuk Android, ukuran berikut diperlukan:

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

Untuk aplikasi iOS, ukuran yang diperlukan berbeda-beda bergantung pada apakah Anda mendukung iOS 6 vs iOS 7. Jumlah minimum ikon yang diperlukan adalah:

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

Daftar ikon lengkap akan terlihat seperti ini di file manifest.json Anda:

"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"
}

Ikon akan disalin ke tempat yang sesuai untuk setiap platform setiap kali Anda menjalankan cca prepare.

Layar Pembuka

Aplikasi di iOS menampilkan layar pembuka singkat saat aplikasi dimuat. Serangkaian pembuka Cordova default layar disertakan di platforms/ios/[AppName]/Resources/splash.

Ukuran yang diperlukan adalah:

  • 320 x 480 piksel + 2x
  • 768 x 1024 piksel + 2x (potret iPad)
  • 1024 x 768 piksel + 2x (lanskap iPad)
  • 640 x 1146 piksel

Gambar layar pembuka saat ini tidak diubah oleh cca.

Langkah 5: Publikasikan

Dalam direktori platforms project, Anda memiliki dua project native yang lengkap: satu untuk Android, dan satu untuk iOS. Anda dapat membuat versi rilis project ini dan memublikasikannya ke Google Play atau ke App Store iOS.

Publikasikan ke Play Store

Untuk memublikasikan aplikasi Android ke Play Store:

  1. Perbarui kedua ID versi Android, lalu jalankan cca prepare:

    • android:versionName disetel menggunakan kunci version di www/manifest.json (ini menyetel dari aplikasi terpaket desktop).
    • android:versionCode disetel menggunakan kunci versionCode di www/manifest.mobile.js.

  2. Edit (atau buat) platforms/android/ant.properties serta tetapkan key.store dan key.alias (seperti yang dijelaskan dalam dokumen developer Android).

  3. Bangun project Anda:

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

  4. Temukan .apk bertanda tangan yang terletak di dalam platforms/android/ant-build/.

  5. Upload aplikasi Anda yang sudah ditandatangani ke Konsol Google Play.

Publikasikan ke iOS App Store

  1. Update versi aplikasi dengan menyetel kunci CFBundleVersion di www/manifest.mobile.js, lalu jalankan cca prepare.

  2. Buka file project Xcode yang ada di direktori platforms/ios Anda:

    buka platform/ios/*.xcodeproj

  3. Ikuti Panduan App Distribution Apple.

Pertimbangan khusus

Jika Anda baru menggunakan Aplikasi Chrome, kelebihan terbesar Anda adalah beberapa fitur web dinonaktifkan. Namun, beberapa di antaranya saat ini berfungsi di Cordova.

Aplikasi Chrome mungkin tidak langsung berfungsi saat tersedia di perangkat seluler. Beberapa masalah umum terkait transfer ke perangkat seluler:

  • Masalah tata letak dengan layar kecil, terutama saat dalam orientasi potret.
    • Perbaikan yang disarankan: Gunakan kueri media CSS untuk mengoptimalkan konten Anda untuk layar yang lebih kecil.
  • Ukuran jendela Aplikasi Chrome yang disetel melalui chrome.app.window akan diabaikan, bukan menggunakan dimensi native perangkat.
    • Perbaikan yang disarankan: Menghapus dimensi jendela hard code; mendesain aplikasi dengan berbagai ukuran saat ini.
  • Tombol dan link kecil akan sulit diketuk dengan jari.
    • Perbaikan yang disarankan: Sesuaikan target sentuh menjadi setidaknya 44 x 44 poin.
  • Perilaku yang tidak terduga saat mengandalkan pengarahan kursor mouse yang tidak ada di layar sentuh.
    • Perbaikan yang disarankan: Selain pengarahan kursor, aktifkan elemen UI seperti dropdown dan tooltip di ketuk.
  • Penundaan ketuk 300 md.

Chrome API yang didukung

Kami telah menyediakan banyak API Chrome inti untuk Aplikasi Chrome untuk Seluler, termasuk:

  • identitas - login pengguna menggunakan OAuth2
  • pembayaran - jual barang virtual dalam aplikasi seluler Anda
  • pushMessaging - mengirim pesan ke aplikasi Anda dari server
  • soket - mengirim dan menerima data melalui jaringan menggunakan TCP dan UDP
  • notifikasi (khusus Android) - kirim banyak notifikasi dari aplikasi seluler Anda
  • storage - menyimpan dan mengambil data nilai kunci secara lokal
  • syncFileSystem - menyimpan dan mengambil file yang didukung oleh Google Drive
  • alarm - jalankan tugas secara berkala
  • idle - mendeteksi saat status tidak ada aktivitas mesin berubah
  • power - mengganti fitur pengelolaan daya sistem

Namun, tidak semua Chrome JavaScript API diterapkan. Dan tidak semua fitur Chrome Desktop tersedia di perangkat seluler:

  • tidak ada tag <webview>
  • tidak ada AdRequest
  • tidak ada getUserMedia()
  • tidak mengandung NaCl

Anda dapat melacak kemajuan dari halaman Status API kami.

Alat Developer Aplikasi Chrome

Alat Pengembang Aplikasi Chrome (ADT) untuk Android adalah aplikasi Android mandiri yang memungkinkan Anda untuk mendownload dan menjalankan Aplikasi Chrome tanpa menyiapkan toolchain pengembangan seperti yang dijelaskan di atas. Gunakan Chrome ADT saat Anda ingin melihat pratinjau Aplikasi Chrome yang ada dengan cepat (yang sudah dikemas sebagai .crx) di perangkat Android Anda.

Chrome ADT untuk Android saat ini masih dalam rilis pra-alfa. Untuk mencobanya, lihat Catatan rilis ChromeADT.apk untuk petunjuk penginstalan dan penggunaan.