#JP83 Input Data Spreadsheet Dari Whatsapp Upload Image (Free Server API)

byJavabitpro

Input Data Spreadsheet Dari Whatsapp Upload Image (Free Server API) 





1. Copy Spreadsheet (Klik Disini)

2. Buatlah Folder pada Google Drive untuk menyimpan Foto.

3. Pada Spreadsheet yang telah di copy di atas terdapat 1 sheet Data dengan beberapa kolom yang akan terisi otomatis via Whatsapp.


4. Buatlah lembar kerja Apps Script dengan klik menu Ektensi/Extensions lalu pilih Apps Script.


5. Pada lembar kerja Apps Script terdapat 2 file .gs dan 3 file .html yaitu :
  • Code.gs : Berfungsi sebagai Server penghubung dengan Whatsapp.
  • Data.gs : Berfungsi sebagai memanggil data dari Spreadsheet ke Website.
  • Index.html : Berfungsi untuk menampilkan data dari Spreadsheet ke Website.
  • CSS.html
  • Visit.html 

6. Copy dan pastekan script di bawah ini ke Code.gs
*Untuk Mendapatkan Full Script tanpa password silahkan Klik Disini*

Masukkan Password Untuk Melihat Script (Password ada di dalam video) 

//Source Code www.javabitpro.com

function doPost(e) {
  let sheetUrl = "URL_SPREADSHEET"; //Ganti URL Spreadsheet
  let file = SpreadsheetApp.openByUrl(sheetUrl);
  let sheet = file.getSheetByName("Data");

  let req = JSON.stringify(e).replace(/\\/g, "").replace("}\"", "}").replace("\"{", "{");
  let reqJson = JSON.parse(req);
  let senderMessage = JSON.stringify(reqJson["postData"]["contents"]["senderMessage"]);

  // Pemisah Pesan #
  let parsedMessage = senderMessage.split("#");
  let nama = parsedMessage[1].trim();
  let tanggalLahir = parsedMessage[2].trim();
  let umur = parsedMessage[3].trim();
  let alamat = parsedMessage[4].trim().slice(0, -1);

  // ID Pendaftaran
  let row = sheet.getLastRow() + 1;
  let prefixIdPendaftar = 2024000;
  let idPendaftar = `ID-${prefixIdPendaftar + row - 1}`;

  // Insert data
  sheet.getRange(`A${row}`).setValue(idPendaftar);
  sheet.getRange(`B${row}`).setValue(nama);
  sheet.getRange(`C${row}`).setValue(tanggalLahir);
  sheet.getRange(`D${row}`).setValue(umur);
  sheet.getRange(`E${row}`).setValue(alamat);

  // URL yang sudah di-deploy secara otomatis
  let deployedUrl = ScriptApp.getService().getUrl();

  // Respon
  let response = {
    data: [
      {
        message: `Terima Kasih!.\nPendaftaran Berhasil.\n-ID Pendaftaran : ${idPendaftar}.\n-Nama : ${nama}.\n-Tanggal Lahir : ${tanggalLahir}.\n-Umur : ${umur}.\n-Alamat : ${alamat}.\nSilahkan upload foto dengan membuka URL di bawah ini\nURL : ${deployedUrl}`
        // \n adalah tanda baris baru
      }
    ]
  };

  return ContentService.createTextOutput(JSON.stringify(response));
}


Sesuaikan "URL_Spreadsheet" dengan URL Spreadsheet yang telah di copy di atas.

7. Copy dan pastekan script di bawah ini ke Data.gs
Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

//Source Code www.javabitpro.com

function doGet() {
  return HtmlService.createTemplateFromFile('Index').evaluate()
      .setTitle('Javabitpro')
      .addMetaTag('viewport','width=device-width , initial-scale=1')
        .setFaviconUrl('https://i.imgur.com/thmO7Xv.png'); // Ganti URL favicon sesuai kebutuhan
        
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

function getData(id) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
  var data = sheet.getDataRange().getValues();
  var result = '';

  for (var i = 1; i < data.length; i++) {
    if (data[i][0] == id) { // assuming ID Pendaftar is in the first column
      result += 'ID Pendaftar: ' + data[i][0] + '<br>';
      result += 'Nama: ' + data[i][1] + '<br>';
       // Format Tanggal Lahir
      var dateOfBirth = Utilities.formatDate(new Date(data[i][2]), Session.getScriptTimeZone(), 'dd MMMM yyyy');
      result += 'Tanggal Lahir: ' + dateOfBirth + '<br>';
      result += 'Umur: ' + data[i][3] + '<br>';
      result += 'Alamat: ' + data[i][4] + '<br>';
      
      // If URL foto available, display it
      if (data[i][5]) {
        result += 'URL Foto: <a href="' + data[i][5] + '" target="_blank">Lihat</a><br>';
      }
      break;
    }
  }
  return result || 'Data tidak ditemukan';
}

function uploadPhoto(id, imageData) {
  var folder = DriveApp.getFolderById('ID_Folder'); // Sesuaikan ID Folder
  var blob = Utilities.newBlob(Utilities.base64Decode(imageData.split(',')[1]), 'image/jpeg', id + '.jpg');
  var file = folder.createFile(blob);
  
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
  var data = sheet.getDataRange().getValues();
  
  for (var i = 1; i < data.length; i++) {
    if (data[i][0] == id) {
      var imageUrl = file.getUrl();
      sheet.getRange(i+1, 6).setValue(imageUrl); // assuming URL foto is in the fifth column
      return imageUrl;
    }
  }
  return 'Data tidak ditemukan';
}


Sesuaikan "ID_Folder" dengan ID Folder yang sudah di buat pada point 2.

8. Copy dan pastekan script di bawah ke Index.html


Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Pencarian Data</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- font-awesome@6.2.0 icon Visit -->
<!-- www.javabitpro.com -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<?!= include('Visit')?>
<?!= include('CSS')?></head>
<body style="background-color: #351c75;">
<img src="https://www.kemdikbud.go.id/main/files/large/83790f2b43f00be" width="100" height="100">
<h1>PENDAFTARAN SEKOLAH</h1>
<h5>Lengkapi Dokumen (Upload Foto)</h5>
<div class="container">
	<div class="modal" id="loadingModal" tabindex="-1" role="dialog">
		<div class="loader">
			<div class="loader-inner">
				<div class="loader-line-wrap">
					<div class="loader-line"></div>
				</div>
				<div class="loader-line-wrap">
					<div class="loader-line"></div>
				</div>
				<div class="loader-line-wrap">
					<div class="loader-line"></div>
				</div>
				<div class="loader-line-wrap">
					<div class="loader-line"></div>
				</div>
				<div class="loader-line-wrap">
					<div class="loader-line"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="row justify-content-center mt-5">
		<div class="col-lg-6">
			<div class="input-group mb-3">
				<input type="text" id="id" class="form-control" placeholder="Masukkan ID Pendaftar">
				<div class="input-group-append">
					<button class="btn btn-primary" type="button" onclick="search()">Cari</button>
				</div>
			</div>
			<div id="result"></div>
			<div id="photoForm" class="mt-4" style="display: none;">
				<h2>Unggah Foto</h2>
				<input type="file" id="photo" class="form-control mb-2" accept="image/*">
				<button class="btn btn-success" onclick="uploadPhoto()">Unggah Foto</button>
				<div id="photoUrl" class="mt-2"></div>
			</div>
			<div id="uploadSuccess" class="popup mt-4">Berhasil Diunggah!</div>
		</div>
	</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
         function search() {
            var id = document.getElementById('id').value; 
            $('#loadingModal').modal('show');
           google.script.run.withSuccessHandler(displayData).getData(id);
        }
        function displayData(data) {
            $('#loadingModal').modal('hide');
       var resultDiv = document.getElementById('result');
        if (data.includes('ID Pendaftar')) {
            resultDiv.innerHTML = data;
            document.getElementById('photoForm').style.display = 'block';
            resultDiv.style.display = 'block'; // Show the result div
        } else {
            resultDiv.innerHTML = '<h1><span class="⚠"></span><br><br>DATA TIDAK DITEMUKAN</h1>';
            resultDiv.style.display = 'block'; // Show the result div
            document.getElementById('photoForm').style.display = 'none';
        }
        }
        function uploadPhoto() {
            var file = document.getElementById('photo').files[0];
            var id = document.getElementById('id').value;
            $('#loadingModal').modal('show');
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(event) {
                var imageData = event.target.result;
                google.script.run.withSuccessHandler(function(url) {
                    document.getElementById('photoUrl').innerHTML = '<a href="' + url + '" target="_blank">Lihat File</a>';
                    $('#loadingModal').modal('hide');
                    document.getElementById('uploadSuccess').style.display = 'block';
                    setTimeout(function() {
                        document.getElementById('uploadSuccess').style.display = 'none';
                        // Reset form and result
                    document.getElementById('id').value = '';
                    document.getElementById('photo').value = '';
                    document.getElementById('result').innerHTML = '';
                    document.getElementById('photoUrl').innerHTML = '';
                    document.getElementById('photoForm').style.display = 'none';
                    document.getElementById('result').style.display = 'none';
                    }, 10000); // Hide popup after 3 seconds
                }).uploadPhoto(id, imageData);
            };
        }
    </script>
</body>
</html>


9. Copy dan pastekan script di bawah ini ke CSS.html


Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

<style>
/* Menambahkan gaya khusus untuk menempatkan elemen di tengah layar */
@charset "UTF-8"
@import url(http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Sans+Mono);
.⚠ {
    position: relative; /* So we can position the content as absolute */
    /* Using the borders to create a triangle  */
    border-left: 0.80em solid transparent;
    border-right: 0.80em solid transparent;
    border-bottom: 1.50em solid yellow;
    top: -1em;          /* Correction because of the CSS Triangle trick*/
}
    .⚠::before {
        content: "⚠";
        /* Position the character over the triangle */
        top: 0.45em;
        left: -0.45em;
        position: absolute;
        color: black;
        font-size: 2em;
        line-height: 1em;
    }
        .popup {
            display: none;
            position: fixed;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #f1f1f1;
            padding: 20px;
            border: 2px solid #333;
            border-radius: 5px;
            z-index: 999;
        }
.loader-inner {
    bottom: 0;
    height: 60px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.loader-line-wrap {
    animation: 
		spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
	;
    box-sizing: border-box;
    height: 50px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 50% 100%;
    width: 100px;
}
.loader-line {
    border: 4px solid transparent;
    border-radius: 100%;
    box-sizing: border-box;
    height: 100px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }
.loader-line-wrap:nth-child(1) .loader-line {
    border-color: hsl(0, 80%, 60%);
    height: 90px;
    width: 90px;
    top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
    border-color: hsl(60, 80%, 60%);
    height: 76px;
    width: 76px;
    top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
    border-color: hsl(120, 80%, 60%);
    height: 62px;
    width: 62px;
    top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
    border-color: hsl(180, 80%, 60%);
    height: 48px;
    width: 48px;
    top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
    border-color: hsl(240, 80%, 60%);
    height: 34px;
    width: 34px;
    top: 35px;
}
@keyframes spin {
    0%, 15% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}
#result {
            border: 1px solid #ccc; /* Border style */
            padding: 10px; /* Optional: Add padding */
            margin-top: 20px; /* Optional: Add margin */
            display: none; /* Hide by default */
            color: white;
        }
body {
  font-family: Arial;
  margin-bottom: 10%;
}
* {
  box-sizing: border-box;
}
h1,h2, h3, h4, h5 {
  color: white;
  text-align: center;
}

  img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
}
    </style>


10. Copy dan pastekan script di bawah ini ke Visit.html


Masukkan Password Untuk Melihat Script (Password sama dengan di atas) 

<link href="https://cdn.jsdelivr.net/gh/javabitpro/css@main/javabitprovisit.css" rel="stylesheet">
	<div class="fab-container2">

  </div>
	<div class="fab-container">
		<div class="fab fab-icon-holder">
			
		</div>
		<ul class="fab-options">
			<li>
				<span class="fab-label">Youtube</span>
				<div class="fab-icon-holder">
					<a target="_blank" href="https://www.youtube.com/watch?v=s9jDQXGsnDU&list=PLDeNeiwBHjwYg7_gz2vDA1D6QfBiMgIj6&index=70"><i class="fa-brands fa-youtube"></i></i></a>
				</div>
			</li>
			<li style="margin-bottom: 10px;">
				<span class="fab-label">Website</span>
				<div class="fab-icon-holder">
					<a target="_blank" href="https://s.id/javabitpro"><i class="fa-solid fa-globe"></i></a>
				</div>
			</li>			
		</ul>
	</div>


11. Klik ikon Save.


12. Klik tombol Terapkan/Deploy lalu pilih Deployment baru/New deployment.


13. Pastikan jenisnya adalah Aplikasi web, hak aksesnya adalah Siapa saja/Anyone dan klik Terapkan/Deploy.


14. Salin URL yang sudah di Deploy untuk di pastekan sebagai Server.


15. Persiapkan 2 Aplikasi pada Android yaitu :
  • Aplikasi Whatsapp
  • Aplikasi Auto Reply Chat Bot

16. Buka Aplikasi Auto Reply Chat Bot dan ikuti langkah-langkah di bawah ini :

1) Klik I AGREE
2) Aftikan notifikasi
3) Hapus semua Rules yanga ada


4) Klik tanda (+)
5) Pastikan Rule nya di Centang/Aktif
6) Pilihlah jenis Whatsapp yang terinstal di handphone
7) Isikan Pattern dengan "Daftar" (Pattern ini adalah pesan harus dimulai dengan teks "Daftar")
8) Pilih Start With (Berfungsi untuk Pattern adalah teks paling depan)
9) Centang konek Server
10) Pastekan URL yang sudah di Deploy
11) Pilih Centng/Buat


12) Rule yang aktif hanya ada satu.
13) Refresh dan pastikan Auto Reply aktif.
14) Pastikan pada layar notofikasi Auto Reply Chat Bot sudah aktif.







SELESAI !!!



















Tags:
Previous Post Next Post

Promo