Membuat Web dengan Google Apps Script

Apps Script adalah platform scripting yang dikembangkan oleh Google untuk pengembangan aplikasi ringan di platform G Suite. Google Apps Script pada awalnya dikembangkan oleh Mike Harm sebagai proyek sampingan sambil bekerja sebagai pengembang di Google Sheets.

Dalam App Script ini anda dapat membuat berbagai bentuk aplikasi web, api, script sheet dll dengan bantuan database Google Sheets.

Dalam tutorial ini akan saya jelaskan cara membuat web pendataan YearBook dengan bantuan Apps Script ini.

Website : https://script.google.com/macros/s/AKfycbyWGScRVdAYqZIX7qriMz-GSqii7YhoQIJGuCs3/exec

1. Pertama-tama silahkan kunjungi Google Sheets anda. Silahkan login menggunkan akun google anda. Pilih menu Go to Google Sheets.

2. Isikan SpreadSheet anda dengan atribut-atribut data yang anda butuhkan. Seperti pada gambar dibawah

Atribut yang saya gunakan :

- nama

- alamat

- email

- nohp

- ig

- twitter

- kata

3. Untuk menambahkan script silahkan plih menu Alat > Editor Script

Maka anda akan dialihkan ke halaman editor script seperti gambar dibawah

4. Selanjutnya silahkan isi kode dibawah pada file Kode.gs

function doGet(e) > Untuk meload view web sebagai UI user memasukkan data. Fungsi ini akan meload file index.html
function userClicked > Fungsi akan menerima data inputan user dan akan menambahakan (append) data pada SpreadSheet.

note : id spreadsheet dapat anda lihat pada url spreadsheet anda

pada url dibawah yang ditandai dengan huruf tebal merupakan id dokumen spreedsheet

https://docs.google.com/spreadsheets/d/1A3cz77P6nsIV-v5tYOtHej8ifZlER0th-lH9mc9qxY0/edit#gid=0

5. Untuk membuat UI user maka kita akan membuat file index.html yang berisi form data-data yang kita butuhkan. Pilih menu File > baru > file html. Isikan kode dibawah pada index.html

Pada kode diatas saya menggabungkan js dan css dalam file html. Anda bisa memisahnya menjadi file .css dan .js dan melinkkan file ke html anda.

Yang perlu diperhatikan dalam kode diatas adalah id pada tiap form harus benar agar script dapat berjalan dan data dapat tersimpan pada SpreadSheet.

6. Untuk keperluan hostingnya silahkan pilih menu publikasikan > terapkan sebagai aplikasi web

kasih nama apps anda dan pilih deploy. Selanjutnya berikan akses ke google akun anda. Sehingga hasil ahir konfigurasi menjadi seperti dibawah.

Hasil Ahir

Hasil Tampilan website

Penginputan data

Data tersimpan pada SpreadSheet

Komentar

Postingan populer dari blog ini

Electron Profile

Electron App Yak pada kali ini saya akan membuat aplikasi desktop dengan electron framework Elektron adalah framework open source yang dikembangkan dan dikelola oleh GitHub. Elektron memungkinkan untuk pengembangan aplikasi GUI desktop menggunakan teknologi dengan menggabungkan mesin rendering Chromium dan runtime Node.js Berikut adalah contoh aplikasi desktop untuk menampilkan profil data diri ; 1. Install Node.js 2. Buat folder baru dan masuk ke folder tersebut menggunakan cmd / terminal 3. Kemudian ketikkan "npm init" ( silahkan custom sendiri isianya ) 4. Isikan main.js anda seperti dibawah 5. Isikan package.json seperti dibawah 6. Buat file index.html sebagai tampilan aplikasi anda, anda juga bisa menambahkan file css dan js untuk mempercantik tampilan aplikasi. Disini saya berikan contoh yang sudah jadi Link Preview Link Screenshoot : Sumber Latihan https://www.youtube.com/playlist?list=PLC3y8-rFHvwiCJD3WrAFUrIMkGVDE0uqW

Baca selengkapnya

Java Time Practice

Java Time Practice Program untuk mengubah waktu universal menjadi waktu regional menggunakan BlueJ. Langsung saja lakukan langkah-langakah dibawah Langkah 1 : Buat Kelas time Kelas time ini berfungsi untuk memeriksa waktu yang inputkan yang akan dikirim ke output. Setelah itu dibuat fungsinya untuk Time.java ada beberapa fungsi, yang pertama adalah mengecek format input jam, jika salah maka akan keluar output error. Selanjutnya akan mengembalikan nilai waktu universal dengan hanya 2 digit. Setelah itu mengubah waktu universal ke waktu 12 jam (AM PM). Untuk kodenya seperti dibawah ini. Langkah 2 : Buat Kelas untuk outputnya Untuk program ini akan dibutuhkan 2 kelas (Class). Kelas ini nantinya akan berfungsi sebagai input dan outputnya maka kodenya cukup seperti dibawah ini. public class Time { private int hour,minute,second; public Time(){ hour = 12; minute = 30; second = 0; } public Time(int hour, int minute, i...

Baca selengkapnya

Tree Computer Project

Pohon Komputer? Bertemu lagi sobat nguli.... Kali ini saya akan membahas project yang masih berkembang dan yang tentunya sangat berguna jika diterapkan dinegeri kita yang manis ini. Yaitu, Tree Computer Project. Yak langsung saja kita bahas pada segmen selanjutnya. Apa itu Tree Computer? The Tree Computer adalah proyek perusahaan OpenAg yang membuat rumah kaca robot untuk membuat stimulasi cuaca ekstrem bagi tanaman. Dengan memanipulasi intensitas fotosintesis, rentang spektral, kecepatan angin, tingkat nutrisi, suhu tanah dan lingkungan, dan kadar air, Pohon Komputer dapat mereplikasi kondisi pertumbuhan di seluruh dunia, dari tundra hingga daerah tropis. Cuaca ekstrem menunjukkan toleransi tanaman terhadap perubahan habitat sehingga mengungkapkan model tanaman. Dengan menciptakan kembali cuaca seperti masa lalu, sekarang, atau masa depan, kondisi volatilitas perubahan iklim global dapat dipelajari secara terperinci. Hasilnya? Tree Computer mencocokkan tanaman de...

Baca selengkapnya

Nugas Ngeblog

Cari Blog Ini