Tugas 8 (PBKK - A)

on

Membuat Aplikasi dengan Menggunakan Framework Google

Larry Page bersama Sergey Brin mulai memperkenalkan Google di tahun 1998, awalnya tak mudah kedua orang ini membesut mesin pencari di internet ini. Keduanya bahkan sempat merasa tidak cocok, karena perbedaan setiap topik yang dibicarakan.
Meskipun pada akhirnya keduanya sepakat karena sama-sama memiliki ketertarikan dengan mesain pencari atau search engine. Google berdasarkan pada teknologi PageRank yang sudah dipatenkan tentunya, hal ini memudahkan mereka membuat dasar struktur link antara situs web.
Google juga turut bekerja dalam menyediakan fitur-fitur untuk mempermudah orang-orang bekerja dengan komputer. Salah satunya adalah Google Sheet. Google Sheet secara komprehensif menawarkan sekumpulan fitur dan fungsi standar spreadsheet seperti dalam spreadsheet application lainya yaitu Microsoft Excel. Selain itu juga terdapat dukungan terbaru yang serbaguna yaitu fungsi QUERY dan REGEX.
Hal yang membedakan antara spreadsheet desktop dan google sheet adalah google sheet didesain secara cloud, aplikasi spreadsheet dapat diakses melalui browser dan disimpan secara remote. Spreadsheet dapat dibagi dalam keadaan read-only atau read-edit mode sehingga mendukung untuk editing secara kolaborasi.

Di dalam google sheet juga disediakan bahasa pemrograman yang disebut GAS (Google App Script). Kode GAS akan dieksekusi secara remote di dalam google cloud. Pihak google sendiri menyatakan bahwa GAS adalah :
“Google App Script adalah bahasa javascript cloud scripting yang menyediakan kemudahan otomasi tugas untuk seluruh produk google dan layanan pihak ketiga.”
Dengan GAS kita bias melakukan :
1. Menulis UDF (user-defined function) untuk google sheet
2. Membuat aplikasi macro
3. Mengembangkan spreadsheet-based application
4. Integrasi dengan Products & Service Google Lainya
5. Mengembangkan Graphical User Interface (GUI) yang berjalan sebagai Web Application
6. Interaksi dengan cloud-based relational database melalui Google JDBC Service.
Berikut adalah tutorial untuk membuat aplikasi sederhana berisi detil kontak dari orang-orang yang menginputkannya.
1. Buka Google Sheet, lalu buat beberapa kolom untuk penyimpanan data. Kolom tersebut antara lain ada first_name, last_nama, gender, dateOfBirth, email, dan phone.

2. Lalu, klik tombol Tools dan pilih Script editor.

3. Tampilan script editor akan berbentuk seperti di bawah ini (foto di bawah sudah terisi script, sebelumnya script masih kosong).

4. Setelah itu, buat beberapa file untuk aplikasi web nya yaitu Code.gs, Index.html, dan JavaScript.html. File-file tersebut akan berisi kode seperti di bawah ini.

 Code.gs

function doGet(request) {
  return HtmlService.createTemplateFromFile('Index')
      .evaluate();
}

/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

/* @Process Form */
function processForm(formObject) {
  var url = "https://docs.google.com/spreadsheets/d/1zrOTOMJ0UEuXA4FhuXewZbSO9IXBlZfoZYlkBtEyNkA/edit#gid=0";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Datapbkk");
  
  ws.appendRow([formObject.first_name,
                formObject.last_name,
                formObject.gender,
                formObject.dateOfBirth,
                formObject.email,
                formObject.phone]);
}

Index.html

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <?!= include('JavaScript'); ?>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <form id="myForm" onsubmit="handleFormSubmit(this)">
                        <p class="h4 mb-4 text-center">Contact Details</p>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="first_name">First Name</label>
                                <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="last_name">Last Name</label>
                                <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <p>Gender</p>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="gender" id="male" value="male">
                                    <label class="form-check-label" for="male">Male</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="gender" id="female" value="female">
                                    <label class="form-check-label" for="female">Female</label>
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="dateOfBirth">Date of Birth</label>
                                <input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth">
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                        </div>

                        <div class="form-group">
                            <label for="phone">Phone Number</label>
                            <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number">
                        </div>

                        <button type="submit" class="btn btn-primary btn-block">Submit</button>
                    </form>
                    <div id="output"></div>
                </div>
            </div>      
        </div>
    </body>
</html>

JavaScript.html

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);    
      
      
  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();
  }
</script>

5. Setelah itu, klik tombol Publish lalu pilih Deploy as web app..


6. Lalu, atur beberapa pilihan seperti hak akses dan lain-lain pada halaman ini.


7. Setelah itu, buka link yang sudah ter-generate oleh google untuk menjadi interface aplikasi web yang sudah dibuat dari script tadi. Lalu isikan form dengan data diri masing-masing.


8. Terakhir, buka spreadsheet yang sudah dibuat sebelumnya. Data yang diisikan tadi akan tersimpan di spreadsheet.

Untuk demo aplikasi dapat di akses di link berikut : Demo Aplikasi Kontak Google Framework

Comments

Post a Comment