Mudahnya Membuat Add-on Google Docs

Mudahnya Membuat Add-on Google Docs
March 12, 2014 mirzailhami

Anda tentu sudah membaca beberapa add-on terbaik untuk Google Docs. Add-on Google Docs memang belum begitu banyak, hanya sekitar 50 item saja sejak hari ini dirilis. Nah, kenapa bukan kita sendiri yang membuat add-on untuk Google Docs dan Sheet, selain bisa kita gunakan untuk kebutuhan sendiri juga dapat berguna untuk orang banyak.

Tutorial Addon Google Docs

Tampilan Hasil Contoh Google Add-on

Gimana cara buatnya? Susah tidak? Bagi Anda yang sudah pernah belajar HTML, CSS dan Javascript, akan lebih mudah mengikuti tutorial ini. Modal yang kita butuhkan hanya tiga hal tersebut, karena memang membuat add-on untuk Google Docs ini sederhana saja.  Bagaimana dengan yang belum pernah belajar HTML? Tidak masalah, Anda dapat mengikuti video tutorialnya di Youtube.

Create a Google Add-on for Docs & Sheets

Tutorial berikut ini akan menunjukkan bagaimana langkah demi langkah membuat add-on Anda sendiri untuk Google Docs. Add-on yang akan kita buat ini adalah bagaimana menampilkan gambar peta yang dihasilkan dari Google Map kedalam dokumen google.

Baik mari kita mulai.

Langkah 1. Buka new document di Google Drive dan pilih Tools -> Script Edtior. Ini adalah script editor dimana nantinya kita akan menuliskan code untuk add-on.

Langkah 2. Pilih file -> New HTML untuk membuat halaman HTML baru yang nantinya ini yang akan menjadi aplikasinya. Simpan dengan maps.html atau apa saja terserah Anda.

Langkah 3. Copy-paste kode HTML berikut ini dan simpan di file maps.html. Kode ini yang nantinya Anda gunakan dibagian sidebar Google Document.

 


 
Langkah 4. Kemudian copy-paste kode server Javascript berikut yang nantinya akan digunakan untuk memasukkan Google Maps kedalam dokumen.

function onOpen(){
DocumentApp.getUi().createAddonMenu().addItem('Peta Google', 'showSidebar').addToUi();
}

function showSidebar(){
var x = HtmlService.createTemplateFromFile("maps").evaluate().setTitle("Peta Google");
DocumentApp.getUi().showSidebar(x);
}

function masukkanPeta(almt){
var map = Maps.newStaticMap().setSize(600, 600).setZoom(15).setCenter(almt);
DocumentApp.getActiveDocument().getCursor().insertInlineImage(map.getBlob());
}

 
Simpan semuanya dan kemudian pilih onOpen dari menu Run di bagian script editor. Jika muncul dialog box yang meminta permission, pilih accept. Sekarang coba buka file dokumen baru.

Anda akan melihat menu Add-on baru disana dengan nama Peta Google. Pilih menu tersebut dan coba cari alamat apa saja di bagian input box, kemudian klik pada gambar peta yang muncul untuk dimasukkan ke dalam dokumen tanpa perlu tombol print screen.

Publish Add-on Anda ke Google Docs

Baik sekarang Google Add-on Anda sudah ready, dan sudah bisa dipublish ke user lain melalui Google Docs. Cara yang paling mudah adalah dengan mengubah permission-nya menjadi Anyone can view. Nah sekarang semua orang sudah bisa menggunakan add-on yang baru saja Anda buat.

Google Add-ons juga bisa dipublish ke Chrome store, kita akan belajar membuat add-on Google Chrome di tutorial berikutnya.