Membuat Aplikasi dengan Google Apps Script
Robby Ulung Pambudi - 5025211042
Link github : https://github.com/robbypambudi/pbkk-assignment-15
Tugas dalam mata kuliah PBKK-A melibatkan pembuatan aplikasi menggunakan Framework Google. Tahap awalnya adalah membuat Google Spreadsheet. Selanjutnya, proses dilanjutkan dengan pengembangan Apps Script.
- Pertama buka apliakasi Google Sheet :
- Selanjutnya tambahakan extension "App Script" dan masukan script dibawah ini :
const sheetName = 'Sheet1'
const scriptProp = PropertiesService.getScriptProperties()
function initialSetup () {
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 buat tampilan HTML :
<!DOCTYPE html>
<html>
<head>
<title>Robby Ulung Pambudi</title>
<link
href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,700"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./assets/style/style.css" />
</head>
<body class="gradient-color">
<div class="main">
<div class="card-form">
<h1>Form Langanan Berita</h1>
<form id="registrationForm">
<div class="input-label">
<label id="icon" for="name">Name</label>
<input
type="text"
name="name"
id="name"
placeholder="name"
required
/>
</div>
<div class="input-label">
<label id="icon" for="email">Email</label>
<input
type="text"
name="email"
id="email"
placeholder="Email"
required
/>
</div>
<div class="input-label">
<label id="icon" for="tanggal_lahir">Tanggal Lahir</label>
<input
type="date"
name="tanggal_lahir"
id="tanggal_lahir"
placeholder="Tanggal Lahir"
required
/>
</div>
<div class="btn-block">
<button id="btnSignup" type="submit">Kirim</button>
</div>
</form>
<div>
<p class="">
Sudah Langanan?
<a href="#" onclick="loginPage()">Kembali</a>
</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
- Dan jangan lupa buat script JS untuk mengirimkan file tersebut ke dalam google
const form = document.getElementById("registrationForm");
form.addEventListener("submit", async (e) => {
e.preventDefault();
try {
const response = await fetch(
"https://script.google.com/macros/s/AKfycbzK2o8saEDpWoJCwajWmbfAWG-cY4qLJNah2Wk3JMhjk73tJQaTKqsvyOCr8elAZX2Z/exec",
{
method: "POST",
body: new FormData(form),
}
);
const data = await response.json();
if (data.result === "success") {
alert("Anda telah berhasil berlanganan.");
window.location.reload();
} else {
throw new Error(data.error);
}
} catch (error) {
console.error("Error! Something's wrong", error.message);
alert("Langanan Gagal! Silahkan coba lagi.");
}
});
Komentar
Posting Komentar