Nama : Dilla Wahdana
NRP : 5025211060
Kelas : PBKK A
Membuat aplikasi Appsheet
Pada pertemuan ke 15 ini, kita akan belajar tentang Google Apps Script. Google Apps Script adalah platform pengembangan aplikasi cepat yang mempercepat dan mempermudah pembuatan aplikasi bisnis yang terintegrasi denganGoogle Workspace. Kalian dapat menulis kode dalam JavaScript modern dan memiliki akses ke library bawaan untuk aplikasi favorit Google Workspace seperti Gmail, Kalender, Drive, dan lainnya. Tidak ada yang perlu diinstal. Google Apps Script menyediakan editor kode langsung di browser kalian, dan skrip kalian berjalan di server Google.
Nah untuk penugasan pada materi kali ini yaitu membuat aplikasi Appsheet yang mana form data yang kita buat diintegrasikan ke google sheet. Berikut penjelasan programnya:
1. Buat project pada VSCode atau editor source code lainnya. Lalu buat file untuk html nya yang erisi apa saja yang data yang ingin di input. berikut scriptnya
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Google_Sheet.css">
</head>
<body>
<div class="container">
<form method="post" action="" name="contact-form">
<h4>Contact Us</h4>
<input type="text" name="your-name" placeholder="Name">
<input type="text" name="your-number" placeholder="Number">
<input type="email" name="your-email" placeholder="Email">
<textarea name="message" rows="7" placeholder="Your Message"></textarea>
<input type="submit" value="Submit" id="submit">
</form>
</div>
<script src="Google_Sheet.js"></script>
</body>
</html>
2. Buat file CSS nya untuk memperindah tampilan htmlnya. Berikut scriptnya:
*{
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;
}
.container{
width: 500px;
padding: 30px;
border: 1px solid #eeeeee;
border-radius: 10px;
background-color: #003b5b;
}
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;
}
Sehingga tampilannya seperti berikut:
3. Selanjutnya buka google sheet, buat sheet baru kemudian klik 'ekstensi' pilih Apps Script. Buat kode untuk mengintegrasi data dari form html ke google sheet yang sudah dibuat tadi. dengan script sebagai berikut:
const sheetName = 'form 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()
}
}
lalu jalankan code pada Apps Scriptnya. setelah success klik deploy dan setting untuk web application. nanti akan muncul link yang akan kita gunakan untuk mengintegrasikan web kita ke google sheetnya.
4. Masukkan link yang muncul pada Apps Script nya ke file html pada bagian 'action'. Setelah itu jalankan webnya dan coba isi formnya.
Jika berhasil akan muncul script berikut:
Dan data yang kita masukkan akan masuk/tersimpan di google sheet seperti gambar berikut:
5. Dan yang terakhir kita buat file javascript untuk membuat tampilan data success lebih bagus dan menarik. akan mumcul pop-up notifikasi ketika kita berhasil memasukkan datanya.
Tidak ada komentar:
Posting Komentar