Menjalankan Aplikasi Chrome di Seluler Menggunakan Apache Cordova

Toolchain untuk menjalankan Aplikasi Chrome di perangkat seluler masih dalam pratinjau developer awal. Jangan ragu untuk memberikan masukan Anda kepada kami menggunakan issue tracker GitHub, forum developer Aplikasi Chrome, 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 berdasarkan Apache Cordova, framework pengembangan seluler open source untuk membuat aplikasi seluler dengan kemampuan native menggunakan HTML, CSS, dan JavaScript.

Apache Cordova menggabungkan kode web aplikasi Anda dengan shell aplikasi native dan memungkinkan Anda mendistribusikan aplikasi web campuran melalui Google Play dan/atau Apple App Store. Untuk menggunakan Apache Cordova dengan Aplikasi Chrome yang sudah ada, gunakan alat command line cca (c ordova c hrome a pp).

Referensi lainnya

  • Ada beberapa pertimbangan khusus yang harus Anda ingat saat mengembangkan 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 di perangkat Android tanpa toolchain, gunakan Chrome Apps Developer Tool (ADT).

Mari kita mulai.

Langkah 1: Instal alat pengembangan Anda

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

Dependensi pengembangan untuk semua platform

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

    • Windows: Instal Node.js menggunakan file penginstal yang dapat dieksekusi yang dapat didownload dari nodejs.org.
    • OS X atau Linux: File yang dapat dieksekusi penginstalan juga tersedia dari nodejs.org. Jika ingin menghindari kebutuhan akses root, 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 harus 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 disertakan dengan Android ADT Bundle.
    • Tambahkan sdk/tools dan sdk/platform-tools ke variabel lingkungan JALUR Anda.
    • OS X: Versi Eclipse yang disertakan dengan Android SDK memerlukan JRE 6. Jika membuka Eclipse.app tidak meminta Anda 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

Menarget iOS

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

  • Xcode 5 (atau lebih tinggi) 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.

Instal 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 di-output dan konfirmasi penginstalan SDK Android atau iOS.

Langkah 2: Buat project

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

cca create YourApp

Jika sudah membuat Aplikasi Chrome dan ingin mentransfernya ke platform seluler, Anda dapat menggunakan tanda --link-to untuk membuat symlink ke aplikasi tersebut:

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

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

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

Belum punya Aplikasi Chrome sendiri? Coba salah satu dari banyak contoh Aplikasi Chrome dengan dukungan seluler.

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 peluncuran, konfigurasi, dan proses debug aplikasi seluler hybrid Anda.

Opsi A: Mengembangkan dan mem-build menggunakan command line

Dari root folder project yang dihasilkan cca:

Android

  • Untuk menjalankan aplikasi di Android Emulator: cca emulate android
    • Catatan: Anda harus menyiapkan emulator. Anda dapat menjalankan android avd untuk menyiapkannya. Download image emulator tambahan dengan menjalankan android. Agar image intel berjalan lebih cepat, instal HAXM Intel.
  • 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 mem-build menggunakan IDE

Android

  1. Pada 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 Putar untuk menjalankan aplikasi.
    • Anda harus membuat Konfigurasi Run (seperti pada semua aplikasi Java). Anda biasanya akan diminta untuk melakukan tindakan ini secara otomatis untuk pertama kalinya.
    • Anda juga perlu mengelola perangkat/emulator untuk pertama kalinya.

iOS

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

    cd YourApp
open platforms/ios/*.xcodeproj

  2. Pastikan Anda membuat target yang tepat.

    Di kiri atas (di samping tombol Run dan Stop), terdapat menu dropdown untuk memilih project dan perangkat target. Pastikan YourApp dipilih, bukan CordovaLib.

  3. Klik tombol Play.

Membuat perubahan pada kode sumber aplikasi Anda

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

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, langkah persiapan dilakukan secara otomatis. Jika mengembangkan aplikasi 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 saat men-debug aplikasi Cordova.

Langkah 4: Langkah Berikutnya

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 file www/manifest.mobile.json untuk menampungnya, dan nilai spesifik dirujuk di seluruh dokumentasi plugin dan panduan ini.

Anda harus menyesuaikan nilainya di sini sebagaimana mestinya.

Ikon

Aplikasi seluler membutuhkan resolusi ikon beberapa lebih banyak daripada Aplikasi Chrome desktop.

Untuk Android, ukuran ini diperlukan:

  • 36px, 48px, 78px, 96px

Untuk aplikasi iOS, ukuran yang diperlukan akan berbeda tergantung apakah Anda mendukung iOS 6 atau iOS 7. Jumlah ikon minimum yang diperlukan adalah:

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

Daftar ikon lengkap akan terlihat seperti ini dalam 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 layar pembuka Cordova default disertakan dalam platforms/ios/[AppName]/Resources/splash.

Ukuran yang dibutuhkan adalah:

  • 320x480 piksel + 2x
  • 768 x 1024 piksel + 2x (potret iPad)
  • 1024 x 768 piksel + 2x (lanskap iPad)
  • 640x1146 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 App Store iOS.

Publikasikan ke Play Store

Untuk memublikasikan aplikasi Android ke Play Store:

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

    • android:versionName ditetapkan menggunakan kunci version di www/manifest.json (ini juga menetapkan versi aplikasi terpaket desktop).
    • android:versionCode disetel menggunakan kunci versionCode di www/manifest.mobile.js.

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

  3. Buat project Anda:

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

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

  5. Upload aplikasi yang telah ditandatangani ke konsol developer Google Play.

Publikasikan ke App Store iOS

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

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

    membuka platform/ios/*.xcodeproj

  3. Ikuti Panduan App Distribution Apple.

Pertimbangan khusus

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

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

  • Masalah tata letak pada layar kecil, terutama saat dalam orientasi potret.
    • Perbaikan yang disarankan: Gunakan kueri media CSS guna 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; desain aplikasi dengan mempertimbangkan berbagai ukuran yang berbeda.
  • Tombol dan link kecil akan sulit diketuk dengan jari.
    • Perbaikan yang disarankan: Sesuaikan target sentuh Anda menjadi minimal 44 x 44 titik.
  • Perilaku tak terduga saat mengandalkan pengarahan kursor mouse yang tidak ada di layar sentuh.
    • Perbaikan yang disarankan: Selain mengarahkan kursor, aktifkan elemen UI seperti dropdown dan tooltip saat diketuk.
  • Penundaan ketuk 300 md.

Chrome API yang didukung

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

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

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

  • tidak ada tag <webview>
  • tidak ada IndexedDB
  • tidak ada getUserMedia()
  • tidak ada NaCl

Anda dapat melacak kemajuan dari halaman Status API kami.

Alat Developer Aplikasi Chrome

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

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