Rabu, 15 Agustus 2012

Membuat aplikasi sederhana di browser Google Chrome

Jika kamu mengamati beberapa aplikasi yang ada di "Web Store" Google pada dasarnya fungsinya hanya semacam "tombol" untuk membuka halaman web tertentu. Contohnya adalah aplikasi resmi yang dibuat oleh Google seperti Google Docs hanya akan membuka tab baru yang mengarah ke alamat docs.google.com

Mungkin ada perasaan janggal kenapa sebuah aplikasi hanya berfungsi semacam bookmark dan tidak melakukan hal yang lebih rumit? Ehm, mungkin alasannya seperti ini:

Tampilan dari halaman "Most Visited":



Tampilan dari halaman "Apps":

Tentu kamu sepakat kalau tampilan di halaman Apps nampak lebih "bersih", jelas dan lebih mudah diamati. Nah, sekarang kita akan membuat sebuah aplikasi semacam ini yang berisi link ke situs favorit atau alamat blog yang kamu punya.


Langkah 1:
Ada dua file yang akan kita buat yaitu:
1. sebuah file json yang akan diberi nama "manifest.json"
2. sebuah file gambar dengan ukuran 128 x 128 pixel dengan format .png sebagai icon

Selanjutnya ikuti langkah berikut:
1. Buat folder terserah dimanapun dengan nama apapun
2. Letakkan file gambar yang akan digunakan sebagai icon dalam folder tersebut
3. Buat file "manifest.json" dengan text editor sederhana seperti Notepad (tapi aku menganjurkan gunakan Notepad++) yang berisi teks berikut:

{
   "name": "NAMA APP",
   "version": "1.0",
   "manifest_version": 2,
   "description": "DESKRIPSI SINGKAT APP",
   "icons": { "128": "icon_128.png" },
   "apps": {
      "urls": [
    "http://ALAMAT WEBSITE ATAU BLOG"
 ],
 "launch": {
    "web_url": "http://ALAMAT WEBSITE ATAU BLOG"
 }
   }
}

4. Simpan file json tersebut dan letakkan dalam folder yang sudah dibuat tadi. Jadi di dalam folder yang kamu buat setidaknya ada dua file yang "manifest.json" dan file "icon_128.png"

Langkah 2: Instalasi

Klik icon kunci inggris yang ada di pojok kanan atas lalu arahkan ke menu "Tools" -> "Extensions". Setelahnya akan muncul halaman Ekstensions. Di bagian paling atas beri tanda check "Developer Mode" dan akan muncul beberapa tombol. Klik tombol "Load unpacked extension..." dan cari folder yang telah kamu buat tadi. Jika berhasil maka aplikasimu akan muncul di daftar extension dibawahnya. Sekarang buka tab baru dan lihat bagian Apps dan seharusnya kamu melihat icon aplikasimu disitu.

Langkah 3: Packing App

Jika dirasa sudah ok, maka aplikasimu perlu di pack agar bisa didistribusikan ke orang lain untuk diinstal. Caranya:
1. Masih di halaman Extension, klik tombol "Pack extension..." dan akan muncul dialog. Tekan tombol Browse di bagian "Extension root directory" dan arahkan di folder yang telah kamu buat
2. Bagian private key bisa kamu kosongkan, ini adalah kunci yang akan kamu gunakan jika kamu ingin mengupdate versi aplikasimu
3. Tekan "Pack Extension" dan akan dibuat dua buah file (nama_aplikasi.crx dan nama_aplikasi.pem) disebelah folder tadi. File crx ini yang kamu letakkan ke server untuk didownload dan dipasang di Chrome orang lain.

Jika kamu ingin mendownload theme "Universitas Madura" yang aku buat bisa klik disini: http://bit.ly/MOexMa

3 komentar: