AppSheet

Nama    : I Gusti Ngurah Ervan Juli Ardana
NRP        : 5025211205
Kelas     : PBKK A
Tahun : 2023

Github : https://github.com/NgurahErvan/AppSheet_PBKK_A/tree/main/AppSheet

Halo Semua, Pada Kuliah 15 PBKK A, kami diminta untuk membuat form menggunakan html dan css dan mengirimkan data ke google spreadsheet, dengan framework tambahan Google App script. Berikut ini merupakan Langkah Pengerjaan dari pembuatan aplikasi tersebut:

Pertama-tama, kita perlu membuat tampilan html nya terlebih dahulu:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="sheet.css">
</head>
<body>
    <div class="container">
        <form method="post" action="https://script.google.com/macros/s/AKfycbw8_dDkoXZ5
jaKIXAVLs3r_29FSJ1j-i2TS4pe6vFkVJ0rINgiPeX4KzF3kjas-w3V8/exec" name="contact-form">
            <h4>Formulir Laporan</h4>
            <input type="text" name="Nama" placeholder="Nama">
            <input type="text" name="Nomor HP" placeholder=" Nomor HP">
            <input type="email" name="Alamat Email" placeholder="Email">
            <textarea name="Pesan" rows="7" placeholder="Pesan"></textarea>
            <input type="submit" value="Kirim" id="submit">
        </form>
    </div>

    <script src="sheet.js"></script>
</body>

</html>

Selanjutnya tambahkan file css :

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'poppins', sans-serif;
    font-size: 18px;
}
body{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #bfbfbf;
}
.container{
    width: 500px;
    padding: 30px;
    border: 1px solid #eeeeee;
    border-radius: 10px;
    background-color: #b6520e;
}
h4{
    margin-bottom: 10px;
    font-size: 24px;
    color: white;
}
input{
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}
textarea{
    width: 100%;
    padding: 10px;
}
#submit{
    border: none;
    background-color: orangered;
    color: white;
    width: 200px;
    margin-top: 10px;
    border-radius: 5px;
}
#submit:hover{
    background-color: #333333;
}

Selanjutnya, buatlah spreadsheet sedemikian rupa seperti link berikut:
link spreadsheet : https://docs.google.com/spreadsheets/d/1GJyJKfy8_BmLKmIuFhEXWLrcJThxOEpHfjhT
g0cVsto/edit#gid=0

Kemudian pada spreadsheet klik "Ekstensi" dan ubah code default menjadi seperti dibawah:

const sheetName = 'data'
const scriptProp = PropertiesService.getScriptProperties()

function intialSetup () {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()
  scriptProp.setProperty('key', activeSpreadsheet.getId())
}

function doPost (e) {
  const lock = LockService.getScriptLock()
  lock.tryLock(10000)

  try {
    const doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))
    const sheet = doc.getSheetByName(sheetName)

    const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]
    const nextRow = sheet.getLastRow() + 1

    const newRow = headers.map(function(header) {
      return header === 'Date' ? new Date() : e.parameter[header]
    })

    sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])

    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  catch (e) {
    return ContentService
      .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))
      .setMimeType(ContentService.MimeType.JSON)
  }

  finally {
    lock.releaseLock()
  }
}

Setelah itu lakukan Deploy sebagai aplikasi web dan ikuti perintahnya hingga mnedapatkan url. url tersebut perlu 
kita copy menuju html dan js yang kita miliki untuk mendapatkan perubahan pada sheet. 

Testing 



Gambar 1. Hasil tampilan


Gambar 2. Percobaan pengisian data pada form
  