Langkah 1: Membuat dan Menjalankan Aplikasi Chrome

Pada langkah ini, Anda akan mempelajari:

  • Elemen penyusun dasar Aplikasi Chrome, termasuk file manifes dan skrip latar belakang.
  • Cara menginstal, menjalankan, dan men-debug Aplikasi Chrome.

Perkiraan waktu untuk menyelesaikan langkah ini: 10 menit.
Untuk melihat pratinjau tugas yang akan Anda selesaikan di langkah ini, langsung ke bagian bawah halaman ini ↓.

Pahami Aplikasi Chrome

Aplikasi Chrome berisi komponen berikut:

  • Manifes menentukan informasi meta aplikasi Anda. Manifes memberi tahu Chrome tentang aplikasi Anda, cara meluncurkannya, dan izin tambahan yang diperlukan.
  • Halaman peristiwa, juga disebut skrip latar belakang, bertanggung jawab untuk mengelola siklus proses aplikasi. Skrip latar belakang adalah tempat Anda mendaftarkan pemroses untuk peristiwa aplikasi tertentu seperti peluncuran dan penutupan jendela aplikasi.
  • Semua file kode harus dikemas dalam Aplikasi Chrome. Ini mencakup modul HTML, CSS, JS, dan Native Client.
  • Aset, termasuk ikon aplikasi, juga harus dikemas dalam Aplikasi Chrome.

Membuat manifes

Buka editor kode/teks favorit Anda dan buat file berikut dengan nama manifest.json:

{
  "manifest_version": 2,
  "name": "Codelab",
  "version": "1",
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "minimum_chrome_version": "28"
}

Perhatikan cara manifes ini menjelaskan skrip latar belakang yang bernama background.js. Berikutnya, Anda akan membuat {i>file<i} tersebut.

"background": {
  "scripts": ["background.js"]
}

Kami akan menyediakan ikon aplikasi nanti dalam langkah ini:

"icons": {
  "128": "icon_128.png"
},

Membuat skrip latar belakang

Buat file berikut dan simpan sebagai background.js:

/**
 * Listens for the app launching then creates the window
 *
 * @see /apps/app.window.html
 */
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});

Skrip latar belakang ini hanya menunggu peristiwa peluncuran chrome.app.runtime.onLaunched untuk aplikasi dan menjalankan fungsi callback:

chrome.app.runtime.onLaunched.addListener(function() {
  //...
});

Saat Aplikasi Chrome diluncurkan, chrome.app.window.create() akan membuat jendela baru menggunakan halaman HTML dasar (index.html) sebagai sumber. Anda akan membuat tampilan HTML di langkah berikutnya.

chrome.app.window.create('index.html', {
  id: 'main',
  bounds: { width: 620, height: 500 }
});

Skrip latar belakang dapat berisi pemroses tambahan, jendela, pesan postingan, dan data peluncuran—yang semuanya digunakan oleh halaman peristiwa untuk mengelola aplikasi.

Membuat tampilan HTML

Buat halaman web sederhana untuk menampilkan pesan "Hello World" ke layar dan simpan sebagai index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
</body>
</html>

Sama seperti laman web lain, dalam file HTML ini Anda dapat menyertakan paket JavaScript, CSS, atau aset tambahan.

Menambahkan ikon aplikasi

Klik kanan dan simpan gambar 128x128 ini ke folder project Anda sebagai _icon128.png:

Ikon Aplikasi Chrome untuk codelab ini

Anda akan menggunakan PNG ini sebagai ikon aplikasi yang akan dilihat pengguna di menu peluncuran.

Konfirmasi bahwa Anda telah membuat semua file

Anda seharusnya sudah memiliki 4 file ini di folder project sekarang:

Screenshot folder file

Menginstal Aplikasi Chrome dalam mode developer

Gunakan mode developer untuk memuat dan meluncurkan aplikasi dengan cepat tanpa harus menyelesaikan aplikasi sebagai paket distribusi.

  1. Akses chrome://extensions dari omnibox Chrome.
  2. Centang kotak Mode developer.

Mengaktifkan mode developer

  1. Klik Muat ekstensi yang belum dibuka kemasannya.
  2. Dengan dialog pemilih file, buka folder project aplikasi Anda dan pilih folder tersebut untuk memuat aplikasi.

Memuat ekstensi yang belum dipaketkan

Luncurkan aplikasi Halo Dunia yang sudah selesai

Setelah memuat project sebagai ekstensi yang belum dibuka, klik Launch di samping aplikasi yang diinstal. Jendela mandiri baru akan terbuka:

Aplikasi Halo Dunia yang sudah selesai setelah Langkah 1

Selamat, Anda baru saja membuat Aplikasi Chrome baru!

Men-debug Aplikasi Chrome dengan Chrome DevTools

Anda dapat menggunakan Chrome Developer Tools untuk memeriksa, men-debug, mengaudit, dan menguji aplikasi seperti yang Anda lakukan di halaman web biasa.

Setelah melakukan perubahan pada kode dan memuat ulang aplikasi (klik kanan > Reload App), periksa konsol DevTools untuk menemukan error (klik kanan > Periksa Elemen).

Kotak dialog Inspect Element

(Kita akan membahas opsi Periksa Halaman Latar Belakang pada Langkah 3 dengan alarm.)

Konsol JavaScript DevTools memiliki akses ke API yang sama dengan yang tersedia untuk aplikasi Anda. Anda dapat menguji panggilan API dengan mudah sebelum menambahkannya ke kode:

Log konsol DevTools

Untuk informasi selengkapnya

Untuk informasi lebih detail tentang beberapa API yang diperkenalkan di langkah ini, lihat:

Siap untuk melanjutkan ke langkah berikutnya? Buka Langkah 2 - Impor aplikasi web yang ada »