Membuat Informasi Ruang dengan Google Sheets dan Google Script GAS

Era sekarang papan pengumuman sudah berganti dengan digital menggunakan televisi dengan menampilkan informasi secara digital, namun itu dibutuhkan aplikasi untuk menampilkannya. Tentu saja itu membutuhkan biaya untuk membuatnya dan juga sebagai server untuk menampung aplikasi tersebut

kali panduan form akan memberikan informasi mengenai Membuat Informasi Ruang dengan Google Sheets dan Google Script GAS papan digital atau Digital Signage. Hal ini tentu akan membuat kita akan lebih mudah dan gratis karena semua sudah di sediakan Google kita bisa memanfaatkan Google Sheet dan Google Script.

Baik mari kita mula untuk membuatnya

1. Buat File spreadsheet baru

2. Buat tabel seperti dibawah ini atau kalian bisa copy paste spreadsheet yang telah disediakan

3. Pada bagian status kita berikan function supaya seperti dibawah ini, pastikan cell sesuai dengan yang anda buat jika tidak sesuai anda bisa menyesuaikan sesuai kebutuhan anda

=IF(AND(D2<=TODAY(),F2>=TODAY(),OR(AND(D2=TODAY(),TIMEVALUE(E2)<=TIME(HOUR(NOW()),MINUTE(NOW()),SECOND(NOW()))),D2<TODAY()),OR(AND(F2=TODAY(),TIMEVALUE(G2)>=TIME(HOUR(NOW()),MINUTE(NOW()),SECOND(NOW()))),F2>TODAY())),"Digunakan","Kosong")

4. Untuk nama sheet beri nama "jadwal"

5. Buat script Google script dengan memilih menu App Script

6. Isikan code.gs script di bawah ini

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function updateDigitalSignage() {
  var spreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = spreadsheet.getSheetByName("jadwal");
  var lastRow = sheet.getLastRow();
  var dataRange = sheet.getRange("A2:G" + lastRow);
  var data = dataRange.getValues();
  
  var displayData = [];
  
  for (var i = 0; i < data.length; i++) {
    var event = {
      kode_ruang: data[i][0],
      nama_ruang: data[i][1],
      status: data[i][2],
      tanggal_mulai: formatDate(data[i][3]),
      jam_mulai: formatTime(data[i][4]),
      tanggal_selesai: formatDate(data[i][5]),
      jam_selesai: formatTime(data[i][6])
    };
    displayData.push(event);
  }
  
  return displayData;
}

function formatDate(date) {
  var dateObj = new Date(date);
  var options = { day: '2-digit', month: 'short', year: 'numeric' };
  return dateObj.toLocaleDateString('en-GB', options);
}

function formatTime(time) {
  var timeObj = new Date(time);
  var options = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false };
  return timeObj.toLocaleTimeString('en-US', options);
}


// Fungsi untuk mengambil data jadwal ruang
function getSchedule() {
  return updateDigitalSignage();
}

7. Buat file html dengan nama index ( saat memberi nama tanpa .html)

8. tulis script html seperti dibawah ini kemudian simpan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Informasi Ruang</title>
    <style>
        /* CSS untuk tata letak dan gaya */
        body {
            font-family: Arial, sans-serif;
             color: #fff;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .header {
            background: linear-gradient(to right, #4CAF50, #2196F3);
            color: #fff;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .header h1 {
            margin-top: 0;
        }

        #clock {
            font-size: 24px;
            margin-top: 10px;
        }

        .content {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            padding: 20px;
            text-align: center;
        }

        .schedule {
            flex: 1;
            padding: 20px;
            text-align: left;
            background: linear-gradient(to right, #2196F3, #4CAF50);
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        .schedule-item {
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px; /* Atur sesuai kebutuhan */
    margin-bottom: 10px; /* Atur sesuai kebutuhan */
}

        .schedule h2 {
            margin-top: 0;
            color: #fff;
        }

        .schedule p {
            margin-bottom: 10px;
            color: #fff;
        }

        /* Animasi untuk video placeholder */
        @keyframes blink {
            0% {
                opacity: 0.5;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0.5;
            }
        }

        #video {
            flex: 1;
            margin-left: 20px;
          
            background: linear-gradient(to right, #2196F3, #4CAF50);
            color: #fff;
            font-size: 24px;
            padding: 20px;
            border-radius: 10px;
           
        }

        /* CSS untuk teks berjalan di footer */
        .footer {
            background: linear-gradient(to right, #2196F3, #4CAF50);
            color: #fff;
            padding: 10px;
            text-align: center;
        }

.runtext-container {
    background: linear-gradient(to right, #4CAF50, #4CAF50, #2196F3); /* Ubah gradasi sesuai warna yang diinginkan */
    color: #fff; /* Warna teks */
    padding: 10px;
    border-radius:10px;
    text-align: center;
}

.main-runtext {
    margin: 0 auto;
    overflow: visible;
    position: relative;
    height: auto;
}

.runtext-container .holder {
    position: relative;
    overflow: visible;
    display: inline;
}

.runtext-container .holder .text-container {
    display: inline;
    white-space: nowrap; /* Membuat teks berjalan tidak pindah ke baris baru */
}

.runtext-container .holder a {
    text-decoration: none;
    font-weight: bold;
    color: #ff0000;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    line-height: -0.5em;
    font-size: 24px;
}

.runtext-container .holder a:hover {
    text-decoration: none;
    color: #6600ff;
}

        }
    </style>
</head>
<body>
<div class="header">
    <h1>Informasi Ruang</h1>
    <div id="clock"></div>
</div>
<div class="content">
    <div class="schedule" id="schedule">
        <!-- Jadwal ruang akan ditampilkan di sini -->
    </div>
     <div id="video">
  <!-- Sesuaikan link video anda -->
        <iframe width="960" height="580" 
src="https://www.youtube.com/embed/6stlCkUDG_s?autoplay=1&mute=1" 
frameborder="0" allow="autoplay; encrypted-media"></iframe>
    
    </div>
</div>
<div class="footer">
    <div class="runtext-container">
        <div class="main-runtext">
            <marquee direction="left" onmouseover="this.stop();" onmouseout="this.start();">
                <div class="holder">
                    <div class="text-container">
                        Teks berjalan dengan gradasi 
warna biru, ungu, hijau. Teks berjalan dengan gradasi warna biru, ungu, hijau.
                    </div>
                </div>
            </marquee>
        </div>
    </div>
</div>

<script>
    // Fungsi untuk menampilkan jam digital
    function displayTime() {
        var date = new Date();
        var time = date.toLocaleTimeString();
        document.getElementById('clock').innerHTML = time;
    }

    // Fungsi untuk menampilkan jadwal ruang
function displaySchedule(scheduleData) {
    var scheduleElement = document.getElementById('schedule');
    var scheduleHTML = '<h2>Jadwal Ruang</h2>';
    scheduleData.forEach(function(event) {
        scheduleHTML += '<div class="schedule-item">';
        scheduleHTML += '<strong>' + event.kode_ruang + ' - ' + 
event.nama_ruang + '</strong>: ' + event.status;
        scheduleHTML += '<br>';
        scheduleHTML += 'Waktu: ' + event.tanggal_mulai + ' ' + 
event.jam_mulai + ' hingga ' + event.tanggal_selesai + ' ' + event.jam_selesai;
        scheduleHTML += '</div>';
    });
    scheduleElement.innerHTML = scheduleHTML;
}

    // Panggil fungsi untuk menampilkan waktu dan jadwal saat halaman dimuat
    google.script.run.withSuccessHandler(displaySchedule).getSchedule();

    // Perbarui waktu setiap detik
    setInterval(displayTime, 1000);
</script>
</body>
</html>

9. Sekarang pilih deploy>New deployment untuk menjalankannya

10. berikan nama untuk deployment yang kita buat misalnya informasi ruang, kemudian di bagian excute as bisa dibiarkan saja, untuk whos has acces bisa disesuaikan kebutuhan