PBKK 8
MEMBUAT APLIKASI DENGAN FRAMEWORK GOOGLE
Google LLC adalah sebuah perusahaan multinasional Amerika Serikat yang berkekhususan pada jasa dan produk Internet. Produk-produk tersebut meliputi teknologi pencarian, komputasi web, perangkat lunak, dan periklanan daring. Sebagian besar labanya berasal dari AdWords. Google didirikan oleh Larry Page dan Sergey Brin saat masih mahasiswa Ph.D. di Universitas Stanford. Mereka berdua memegang 16 persen saham perusahaan. Mereka menjadikan Google sebagai perusahaan swasta pada tanggal 4 September 1998. Salah satu produk google adalah Google Cloud Platform, (atau GCP) yang merupakan kumpulan layanan komputasi awan yang ditawarkan oleh Google. GCP berjalan di atas infrastruktur yang sama yang digunakan oleh Google untuk produk internalnya, seperti Google Search, YouTube dan Gmail.
Google sheet adalah salah satu komponen dalam aplikasi google cloud. Jika kita memiliki akun gmail kita bisa membuat dan berbagi sebuah spreadsheet dengan siapapun termasuk dengan mereka yang tidak memiliki akun gmail. 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.
Di dalam Google Sheet Programming terdapat spreadsheet object yang disediakan oleh hosting environment, spreadsheet object bukan object bagian dari javascript. Spreadsheet Object yang disediakan oleh hosting environment hampir sama dengan javascript yang berjalan pada web client dan entitas DOM (Document Object Model) yang akan dimanipulasi.
Saya akan mencoba membuat Aplikasi Pendataan Data Swalayan dengan Google Sheets. Berikut langkah-langkahnya
- Buka Spreadsheet Online Google dengan membuka link ini, kemudian pilih "Open Google Spreadsheet", lalu login akun gmail kita. kemudian akan muncul tampilan sebagai berikut :
- Buat File Baru
- Isi Kolom Pada Spreadsheet
- Tambahkan Script API
- Deploy
Untuk membuat file baru cukup kita klik tanda "+" di pojok kanan bawah, akan muncul tampilan sebagai berikut :
Untuk melakukan rename, klik pada "Untitled Document" lalu ganti dengan nama dokumen yang diinginkan
Isikan kolom-kolom pada spreadsheet sesuai dengan atribut yang kita butuhkan seperti berikut ini :
Untuk menambahkan script api kita pilih menu "Tools" kemudian klik "Script Editor", lalu isi dengan script yang diinginkan
Code.gs
1: function doGet(e) {
2: return HtmlService.createHtmlOutputFromFile("index");
3: }
4:
5: function userClicked(anama,aemail, ajk, ano, aalamat){
6: var url = "https://docs.google.com/spreadsheets/d/1EWNla4D8kaCVqk4Ad8dZmqZjcsHEE7w_HbFvNNlGwuw/edit#gid=0"
7: var ss = SpreadsheetApp.openByUrl(url);
8: var sheet = ss.getSheetByName("Data");
9:
10: sheet.appendRow([new Date, anama,aemail, ajk, ano, aalamat]);
11:
12: }
index.html
1: <!DOCTYPE html>
2: <html>
3: <head>
4:
5: <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
6: <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
7: <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
8:
9: <style>
10: .register{
11: background: #ca0000;
12: margin-top: 3%;
13: padding: 3%;
14: }
15: .register-left{
16: text-align: center;
17: color: #fff;
18: margin-top: 4%;
19: }
20: .register-left input{
21: border: none;
22: border-radius: 0;
23: padding: 2%;
24: width: 80%;
25: background: #ca0000;
26: font-weight: bold;
27: color: #ffffff;
28: margin-top: 30%;
29: margin-bottom: 3%;
30: cursor: pointer;
31: }
32: .register-right{
33: background: #000000;
34:
35: }
36: @-webkit-keyframes mover {
37: 0% { transform: translateY(0); }
38: 100% { transform: translateY(-20px); }
39: }
40: @keyframes mover {
41: 0% { transform: translateY(0); }
42: 100% { transform: translateY(-20px); }
43: }
44: .register-left p{
45: font-weight: lighter;
46: padding: 12%;
47: margin-top: -9%;
48: }
49: .register .register-form{
50: padding: 10%;
51: margin-top: 10%;
52: }
53: .btnRegister{
54: float: right;
55: margin-top: 10%;
56: border: none;
57: border-radius: 1.5rem;
58: padding: 2%;
59: background: #ffffff50;
60: color: #fff;
61: font-weight: 600;
62: width: 50%;
63: cursor: pointer;
64: }
65: .register .nav-tabs{
66: margin-top: 3%;
67: border: none;
68: background: #0062cc;
69: border-radius: 1.5rem;
70: width: 28%;
71: float: right;
72: }
73: .register .nav-tabs .nav-link{
74: padding: 2%;
75: height: 34px;
76: font-weight: 600;
77: color: #fff;
78: border-top-right-radius: 1.5rem;
79: border-bottom-right-radius: 1.5rem;
80: }
81: .register .nav-tabs .nav-link:hover{
82: border: none;
83: }
84: .register .nav-tabs .nav-link.active{
85: width: 100px;
86: color: #ca0000;
87: border: 2px solid #ca0000;
88: border-top-left-radius: 1.5rem;
89: border-bottom-left-radius: 1.5rem;
90: }
91: .register-heading{
92: text-align: center;
93: margin-top: 8%;
94: margin-bottom: -15%;
95: color: #ffffff;
96: }
97: .col-aligncenter
98: {
99: float: none;margin: 0 auto;
100: }
101: </style>
102: </head>
103:
104: <body>
105: <div class="container register">
106: <div class="row">
107: <div class="col-md-1 register-left">
108: </div>
109: <div class="col-md-10 register-right">
110: <ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
111: </ul>
112: <div class="tab-content" id="myTabContent">
113: <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
114: <h3 class="register-heading">Pendaftaran Anggota Swalayan Jaya Bangkit</h3>
115: <div class="row register-form">
116: <div class="col-md-6">
117: <div class="form-group">
118: <label for="sel1">Nama</label>
119: <input type="text" class="form-control" id="nama" placeholder="Nama *"/>
120: </div>
121: <div class="form-group">
122: <label for="sel1">Jenis Kelamin</label>
123: <select class="form-control" id="gender">
124: <option>Laki-laki</option>
125: <option>Perempuan</option>
126: </select>
127: </div>
128: </div>
129: <div class="col-md-6">
130: <div class="form-group">
131: <label for="sel1">Email</label>
132: <input type="email" class="form-control" id="email" placeholder="Email *"/>
133: </div>
134: <div class="form-group">
135: <label for="sel1">No HP</label>
136: <input type="text" minlength="12" maxlength="13" id="no_hp" class="form-control" placeholder="No HP *"/>
137: </div>
138: </div>
139: <div class="col-md-12">
140: <div class="form-group">
141: <label for="sel1">Alamat</label>
142: <input type="text" class="form-control" id="alamat" placeholder="Alamat *"/>
143: </div>
144: </div>
145: <input type="submit" style="width: 300px; margin: 0 auto;" class="btnRegister" id="btn" value="Submit"/>
146: </div>
147: </div>
148: </div>
149: </div>
150: </div>
151: </div>
152: </body>
153:
154: <script>
155: document.getElementById("btn").addEventListener("click",doStuff);
156:
157: function doStuff(){
158: var anama = document.getElementById("nama").value;
159: var aemail = document.getElementById("email").value;
160: var ajk = document.getElementById("gender").value;
161: var aalamat = document.getElementById("alamat").value;
162: var ano = document.getElementById("no_hp").value;
163: google.script.run.userClicked(anama,aemail, ajk, ano, aalamat);
164: document.getElementById("nama").value= "";
165: document.getElementById("email").value= "";
166: document.getElementById("gender").value= "";
167: document.getElementById("alamat").value= "";
168: document.getElementById("no_hp").value= "";
169: }
170: </script>
171: </html>
pilih menu "Publish" lalu klik "Deploy as web apps."
Berikan izin jika muncul dialog box seperti ini
Setelah ijin diberikan, akan muncul dialog box baru seperti ini
Berikut adalah Hasilnya
Komentar
Posting Komentar