Belajar membuat Gnome shell extension: netepan


KAMU pakai Linux? Kamu pakai Gnome? Kalau iya, tentu kamu nggak akan asing sama gnome shell extension. Itu loh, ekstensi yang bisa dipasang supaya komputer kamu tambah kece.

Setidaknya menjadi lebih powerful. Salah satu ekstensi yang wajib dipasang adalah Alternate Tabs. Kenapa? Karena fungsi alt-tab di Gnome itu menyebalkan, saudara-saudara.

Nah, seperti halnya proyek opensource pada umumnya, seluruh pengguna pun dapat berkontribusi pada proyek Gnome, termasuk dalam mengembangkan ekstensi di Gnome tercinta. Kamu, saya, kita, bisa berkontribusi untuk menjadikan dunia lebih baik.

Sayangnya negara api keburu menyerang. Dokumentasi mengenai cara pengembangan atau membangun Gnome shell extension sangat minim. Termasuk di wiki milik Gnome. Nggak percaya? Coba saja googling tentang tema ini, niscaya hasilnya kurang memuaskan.

Salah satu sumber yang cukup lengkap adalah di situs ini. Malah lebih jelas daripada dokumentasinya di sini. Ya, itu tulisan berumur empat tahun lebih, dan bisa jadi sudah kurang cocok dengan versi Gnome terbaru. Tapi sebagai permulaan bisa dibilang sangat baik. Untuk tulisan yang lebih baru bisa dibaca di sini.

Oke, mari kita membuat ekstensi keren di Gnome yang akan kita namakan netepan. Ini merupakan ekstensi sederhana yang tugasnya hanya menampilkan waktu salat di hari ini. Sesuai dokumentasi, mari kita buka terminal dan ketikkan perintah berikut:

$ gnome-shell-extension-tool --create-extension

Omong-omong, perintah itu tak bisa dijalankan di Opensuse 42.1. Aneh juga kenapa program itu (di)hilang(kan) dari paket Gnome untuk Opensuse. Apa ini konsfirasi mamarika? Tidak juga, karena ternyata kita harus pasang dulu gnome-shell-devel. Jadi bagi pengguna bunglon, silakan install dulu itu barang sebelum mengeksekusi perintah di atas.

Kembali ke topik. Setelah menjalankan perintah agama di atas, nanti sistem akan menanyakan nama aplikasi, deskripsi, dan uuid untuk ekstensi kita.

$ gnome-shell-extension-tool --create-extension

Name should be a very short (ideally descriptive) string.
Examples are: "Click To Focus",  "Adblock", "Shell Window Shrinker".

Name: Ekstensi pertama kita

Description is a single-sentence explanation of what your extension does.
Examples are: "Make windows visible on click", "Block advertisement popups"
              "Animate windows shrinking on minimize"

Description: Ini ekstensi pertama kita

Uuid is a globally-unique identifier for your extension.
This should be in the format of an email address ([email protected]), but
need not be an actual email address, though it's a good idea to base the uuid on your
email address.  For example, if your email address is [email protected], you might
use an extension title [email protected].
Uuid [Ekstensi_pertama_kita@bunglon]: [email protected]
Created extension in '/home/hahn/.local/share/gnome-shell/extensions/[email protected]'

Nah, coba tengok hasilnya di direktori di atas, nanti ada ekstensi kita yang sudah dibuatkan sama gnome.

Nanti ada 3 berkas yang dibuatkan, yakni extension.js, metadata.json, dan stylesheet.css. Berkas javascript merupakan berkas utama kita yang bakal diisi dengan kode-kode, berkas json untuk menjelaskan apa itu aplikasi kita, dan yang css untuk mempercantik penampilan.

Secara garis besar, ada 3 fungsi penting yang harus ada di berkas extension.js, yakni fungsi init, enable, dan disable. Menurut dokumentasi, katanya begini:

The extension.js file is simply a JavaScript file; it must however have a function called init, which will be invoked at most once directly after your source JS file is loaded. You should modify all user interfaces in a separate enable function, and remove all custom functionality in a disable function.

Nah, untuk menampilkan waktu salat, kita tak harus bikin kode sendiri, capek bro. Mending menggunakan librari milik orang lain yang sudah dijamin kekerenannya. Silakan buka situs praytimes.org, dan unduh berkas versi javascriptnya dan simpan di direktori yang sama dengan extension.js supaya gampang manggilnya. Mari kita panggil di kode kita.

const Me = imports.misc.extensionUtils.getCurrentExtension();
const PrayTimes = Me.imports.PrayTimes;

Lalu di fungsi lain yang nantinya dipanggil di init, mari kita panggil praytimes-nya.

let prayTimes = new PrayTimes.PrayTimes();
let date = new Date(); // today

Setelah itu, atur parameter koordinat dan ketinggiannya (hey, flathearth, kamu percaya koordinat ga? :D). Juga pengaturan waktu salatnya.

let loc = {
        city  : 'Bandung',
        lat   : -6.914744,
        lng  : 107.609810,
        elev  : 718,
        tzone : 7
      };

      //standar Indonesia, subuh 20 derajat, isya 18 derajat (sumber?)
      let paramAdjust = {
        fajr  : 20,
        dhuhr : '0 min',
        asr   : 'Standard',
        maghrib: '0 min',
        isha  : 18
      };

Buat kamu yang bukan orang Bandung, silakan ganti latitude dan longitude-nya. Juga elevasi alias ketinggian tempat kamu dari atas permukaan laut. Juga zona waktu, kalau kamu bukan di WIB.

Untuk parameter di paramAdjust, saya lupa sumbernya dari mana, yang pasti katanya pengaturannya begitu.

Oke, mari jalankan fungsi praytime supaya mendapatkan data jadwal salatnya.

prayTimes.adjust( paramAdjust );
      let times = prayTimes.getTimes(date, [loc.lat, loc.lng, loc.elev], loc.tzone);
      let list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
      let listId = ['Subuh','Terbit','Dzuhur','Ashar','Magrib','Isya\t'];

Loh kok ada list dan listId? Kenapa nggak dibuat satu saja? Sebenarnya bisa sih, cuma nanti kita harus edit berkas praytimes.js kalau mau menampilkan waktu salatnya dalam bahasa Indonesia. Karena itu bukan kode punya kita, jadi mending dibiarkan saja, dan lebih baik bikin list baru untuk bahasa Indonesianya.

Untuk menampilkan dalam ekstensi kita, cukup panggil saja isi dari times-nya.

for(var i in list){
          item = new PopupMenu.PopupMenuItem(listId[i]+"\t\t"+times[list[i].toLowerCase()]+"");
          this.menu.addMenuItem(item);
      }

Kode itu nantinya akan menyuruh si gnome untuk menampilkan waktu salat di menu item.

Ya sudah, fungsi intinya cuma segitu saja, teman. Nanti fungsi tersebut kita panggil di init dan kita aktifkan di menu enable. Selesailah tugas kita. Untuk fungsi lengkapnya bisa dilihat di repo ini (promosi).

Apa ekstensi itu sudah bisa digunakan? Tentu saja bisa. Dua hari terakhir, ekstensi tersebut sudah nongkrong di gnome saya, bahkan sebenarnya tahun lalu juga sudah dipasang, karena ini proyek yang dibikin pertengahan tahun lalu.

Karena ekstensi ini belum diunggah ke situs extensions.gnome.org, bagi kamu yang ingin memasang ekstensi tersebut harus dilakukan secara manual.

Caranya, unduh/klon repo itu di mana saja, lalu nanti salin direktori [email protected] ke /home/namauser/.local/share/gnome-shell/extensions. Setelah itu, jalankan perintah alt+F2 lalu masukkan r dan enter. Kalau bisa sih pasang juga gnome-tweak-tool supaya gampang mengaktifkan/menonaktifkan ekstensinya. Kalau berhasil, harusnya nanti tampil di panel atas gnome kamu.

Kalau tidak? Jangan khawatir, siapa tahu versi gnome kamu sudah yang terbaru. Karena itu buka berkas metadata.json dan masukkan versi gnome kamu di bagian “shell-version”. Lalu jangan lupa ketik alt+F2->r lagi.

{
	"uuid": "[email protected]",
	 "gettext-domain": "gnome-shell-extension-netepan", 
	"description": "pray times", 
	"settings-schema": "org.gnome.shell.extensions.netepan", 
	"shell-version": ["3.16.4"], 
	"name": "Netepan"
}

Oiya, sesuai tulisan di README.md, hasil perhitungan waktu salatnya sebenarnya masih kurang tepat, namun biasanya hanya berbeda selisih 1-3 menit. Karena itu, untuk kehati-hatian, hendaknya waktu salat ditambah sekitar 1-3 menit. Meski begitu, jika dibandingkan dengan hasil perhitungan Accurate Times versi 5.3, untuk wilayah Bandung, hanya waktu subuh saja yang berbeda 1 menit.

Oiya lagi, di kode yang di repo, sebenarnya saya sudah buat menu untuk mengganti lokasi, latitude, longitude, dan elevasi dari setting yang baru bisa diakses dari gnome-tweak-tool. Namun entah kenapa, isi dari setting baru terbaca kalau kita refresh alias tekan alt+F2->r->enter. Karena itu, menu settings yang ada di berkas prefs.js belum diaktifkan.

Bagi kamu yang skill javascript dan gnomenya sudah jagoan, boleh loh membantu saya yang masih pra-newbie ini :D.


Ada komentar?

This site uses Akismet to reduce spam. Learn how your comment data is processed.