Membuat Aplikasi Web CBT Berbasis Google Spreadsheet

November 8, 2021

Membuat Aplikasi Web CBT Berbasis Google Spreadsheet

Seperti kita tahu google memiliki produk google form yang bisa dimanfaatlan untuk CBT. namun sayangnya, banyak kelemahan yang kita temui dalam google dorm jika digunakan untuk CBT. beberapa kelemahan tersebut anatara lain sebagau berikut.

pengaturan waktu yang kaku
tidak mendukung ajax, sehingga ketika waktu habis dan user belum submit, maka form otomatis tertutup, sehingga jawaban user menjadi kosong
authentikasi hanya berlaku untuk GCP (Google Cloud Platform), tidak berlaku untuk user google biasa, sehingga sulit membuat otentikasi
tidak mendukung naskah soal dalam bentuk vcampuran gambar dan teks
tidak mendukung format html
tidak mendukung rumus sehingga mempersulit bagi kalangan sain dan matematika
tidak ada timer (countdown) sehingga mempersulit user, karena tidak ada peringatan sebelum form ditutup

Untuk mengatasi kekurangan tersebut, saya mengembangkan sebuah aplikasi web untuk keperluan CBT berbasis google spreadsheet, di mana data akan disimpan dalam google spreadsheet sebagaimana google form, namun antar muka tidak menggunakan google form, melainkan web.

Aplikasi ini didedikasikan untuk pendidikan di Indonesia, di mana belum tentu setiap sekolah memiliki server sendiri. Aplikasi ini tidak memerlukan server (serverless). Hanya membutuhkan koneksi internet dan akun google biasa maupun GCP.

Untuk diskusi seputar instalasi dan cara menggunakan bisa bergabung dalam group telegram lewat tautan Join Telegram

Menyiapkan Google Spreadsheet Sebagai Basis Data

Untuk menyiapkan google spreadsheet, langkahnya sebagai berikut.

Buka file master CBT di tautan ini
Akan sebuah spreadsheet dengan status view only (hanya bisa melihat)
Buat salinan dengan cara
1. Klik File
2. Make a copy (buat salinan)
3. Isikan nama (terserah anda)
4. Klik OK, amaka akan dibuka sebuah file baru yang bisa diedit
Pengaturan otorisasi
1. Klik Tool (alat)
2. Klik Script Editor (Editor skrip)
3. Akan terbuka sebuah editor dan terdapat tonbol Run (Jalankan)
4. Klik tombol Run (jalankan), maka akan muncul popup permintaan otorisasi
5. Klik Review permission
6. Jika muncul peringatan keamanan, klik advance
7. Pilih akun gmail kita, scroll ke bawah akan ada tombol Allow (ijinkan)
8. Klik Allow
Pengaturan Awal
1. Kembali ke google spreadsheet, maka akan terlihat sebuah menu baru di sebelah kanan Help, yaitu eProject-CBT
2. Klik tombol tersebut, akan muncul sub menu CBT,
3. Klik sub menu CBT, akan muncul jendela instalasi, tunggu samapi muncul tu;isan “Database telah siap…”
4. Maka akan terlihat pada sheet config beberapa informasi seperti email kita, ID Spreadsheet, Jenis lisensi dan token
5. Pada sheet quiz terdapat beberapa contoh yang disiapkan (bisa dihapus jika tidak diinginkan)
6. Pada sheet question terdapat beberapa contoh yang disiapkan (bisa dihapus jika tidak diinginkan)
7. Pada answer quiz masih kosong
Lakukan Deploy Aplikasi Utama
1. kembali ke Script Editor, pada sisi kiri terdapat library (pustaka) LibCBT
2. Klik 1 kali, dan pastikan version yang diigunakan adalah versi tertinggi (untuk saat ini versi 75)
3. Lakukan Deploy dengan cara klik tombol Deploy (Terapkan)
4. Pilih New Deployment
5. Pilih Web App
6. isikan deskripsi (bebas)
7. Execute as : pilih Me (akun gmail kita)
8. Who has acces: Anyone with gogole account
9. Klik Deploy
10. Lalu click copy url pada bagian Web App (berupa tautan)
Menyiapakan Web Otorisasi
1. Buka tab baru, ketikkan script.google.com
2. Klik New project
3. Hapus semua isinya
4. Klik Pada Untitled Project
5. Ketikkan sebuah nama (misal MyCBT)
6. Klik rename
7. klik tanda + pada Library
8. Copas kode berikut
```
17ZrT2qph_NX0_may0DuM15vja-u4CrPOzMtnmhQAMZ6nHm06rCnmglWz
```
9. Klik Lokup (Cari)
10. Pilih Versi Tertinggi (75)
11. Klik Add (Tambahkan)
12. Copas script berikut
13. Pada bagian isikan url hasil deploy sebelumnya

function doGet() {
  url = 'isikan url hasil deploy sebelumnya';
  const token = LIbCBT.getToken(Session.getActiveUser().getEmail(),'guest');
  return HtmlService.createHtmlOutput(
    '<html><head><meta http-equiv="refresh" content="0; url='+url+"?token="+token+'"></head><body><h2>Selamat datang di CBT</h2>'+
    '<h5>Untuk sedang load halaman yang diminta...</h5>'+
    '</body></html>'
  ).setTitle('CBTSheet') // Judul web App
    .addMetaTag("viewport","width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no") //Kode tambahan agar web app responsif
    .setSandboxMode(HtmlService.SandboxMode.NATIVE)
    .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Deploy Web Otorisasi
1. Lakukan Deploy dengan cara klik tombol Deploy (Terapkan)
2. Pilih New Deployment
3. Pilih Web App
4. isikan deskripsi (bebas)
5. Execute as : pilih user accessing the web app
6. Who has acces: Anyone with gogole account
7. Klik Deploy
8. Lalu click copy url pada bagian Web App (berupa tautan)
9. Jika tautan dibuka oleh akun kita, otomatis muncul sebagai guru/dosen
10. Jika tautan dibuka oleh akuns elain kita, otomatis muncul sebagai mahasiswa/siswa.
Mempercantik tautan
1. karena tautan sangat sulit diingat kita bisa menggunakan penyingkat url seperti tinyurl, bit.ly dll
2. Buka web peringkas tautan tinyURL
3. Salim URL hasil deploy ke kolom url
4. Pada Kolom alias ketikan nama ringkas, misalkan CBT-SMA-XYZ
5. Klik buat TinyURL
6. Jika singaktan tersedia, maka singkatan siap digunakan
7. Disarankan untuk memiliki akun tinyURL, sehingga nantinya kalau mau deploy ulang, bisa menggunakan alamat tinyURL yang sama

Contoh apliksi yang sudah jadi klik tautan ini

Tags:

Ikuti terus tutorial saya di e-Project dan channel saya di

Donasi