Tugas Pertemuan 15 - Membuat Aplikasi dengan Google Apps Script
Membuat Aplikasi dengan Google Apps Script
Link GitHub : thoriqagfi/pbkk-assignment-15 (github.com)
Link Deploy : https://thoriqagfi.github.io/pbkk-assignment-15/
Tugas yang diberikan pada mata kuliah PBKK-A, yaitu membuat Aplikasi dengan Memanfaatkan Framework Google . Berikut merupakan dokumentasinya
Pertama, kita buat Google SpreadSheet
Selanjutnya, kita buat Apps Script
Selanjutnya, kita memasukkan script yang berisi fungsi untuk memasukkan data ke SpreadSheet
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()
}
}
Tambahkan Trigger baru dengan menekan "Add Trigger"
Selanjutnya, kita running Code
Kemudian, lakukan "Deploy" Web App.
Maka, akan didapatkan URL dari Web App kita. Url tersebut akan digunakan untuk fetch post data ke spreadsheet yang telah kita buat
Selanjutnya, buat file Form HTML
<!DOCTYPE html>
<html>
<head>
<title>Simple registration form</title>
<link href="https://fonts.googleapis.com/css?family=Roboto: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>Registration</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="input-label">
<label id="icon" for="name">Password</label>
<input type="password" name="password" id="password" placeholder="Password" required/>
</div>
<div class="btn-block">
<button id="btnSignup" type="submit">Submit</button>
</div>
</form>
<div>
<p class="">Already have an account? <a href="#" onclick="loginPage()">Login here</a></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Tak lupa, kita buat juga styling untuk form HTML yang telah dibuat
body {
margin: 0;
padding: 0;
font-family: sans-serif;
height: 100vh;
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.card-form {
width: 400px;
height: 600px;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 40px;
text-align: center;
}
form {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 20px;
}
input {
width: 60%;
height: 40px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 3px 20px;
outline: none;
}
.input-label {
width: 100%;
text-align: left;
font-size: 13px;
font-weight: bold;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 5px;
}
label {
font-size: 13px;
font-weight: bold;
text-align: left;
width: 70%;
color: #333;
}
p {
text-align: center;
font-size: 14px;
color: #333;
}
a {
text-decoration: underline;
color: #000000;
font-weight: bold;
font-size: 13px;
}
a:hover {
color: #b94848;
}
button {
height: 40px;
border: none;
border-radius: 5px;
background: #000;
color: #fff;
font-size: 16px;
padding: 10px 50px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: #33333393;
}
.gradient-color {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
Selanjutnya, kita buat script.js untuk memasukkan fetching data post api ke spreadsheet yang telah kita buat
const form = document.getElementById("registrationForm");
form.addEventListener("submit", async (e) => {
e.preventDefault();
try {
const response = await fetch("https://script.google.com/macros/s/AKfycbwCL5TxgOaXn5I4MSgOKF5utO4rZ2kRwV7EWBxDakYMUM7zO_h3VfxTzKZQC1VspLDT/exec", {
method: "POST",
body: new FormData(form),
});
const data = await response.json();
if (data.result === "success") {
alert("Registrasi berhasil. Terima kasih sudah mendaftar.");
window.location.reload();
} else {
throw new Error(data.error);
}
} catch (error) {
console.error("Error! Something's wrong", error.message);
alert("Registrasi Gagal!! Silahkan coba lagi.");
}
});
Selesai. Form HTMLtelah berhasil dibuat. Untuk melakukan testing, silakan akses link berikut untuk mengisi form :
https://thoriqagfi.github.io/pbkk-assignment-15/
Comments
Post a Comment