Introduction about

Glide APP
 View
View Editor
Editor

Data
Data Editor
Editor

Komponen
Komponen
Editor
Editor

UX
UX preview
preview Detail
Detail Editor
Editor
1. View Editor
Berfungsi utk menambahkan, menghapus & menyembunyikan tampilan pada aplikasi
Glide anda. ( Tampilan biasa disebut dengan istilah Screen ).
Tampilan ini terbentuk berdasarkan sheet dari Google spreadsheet yg kita buat.
Tampilan atau screen ini bisa kita tampilkan atau kita hidden dengan meng klik
tanda mata

2.Komponen dan data Editor

Terletak pada kiri bawah Glide Editor. Pada bagian ini terdapat 2 tab tampilan ,
yaitu tab screen dan tab data.

3. Detail Editor
Berfungsi menampilkan fitur-fitur secara detail yg terdapat pada View Editor
dan Komponen & Data Editor.

4. UX Preview
Merupakan tampilan dari aplikasi yang sedang di buat
Menambahkan Komponen Aplikasi
Untuk mengatur tampilan & fungsi aplikasi kita dapat
menambahkan berbagai macam type untuk tampilan aplikasi. Glide
menyediakan :
8 tipe komponen yg dapat kita gunakan untuk mendesign aplikasi.
Tipe-tipe komponon tersebut yaitu:

Text; Layout; Media; Buttons; Lists; Picker; Charts; Entry

Fields

Cara menampilkan menu Komponen Editor kita cukup mengklik

tab Screen lalu tekan tanda + (plus). Untuk menambahkan
komponen pada tampilan aplikasi, kita cukup memilih komponen
yang di inginkan sesuai dengan design aplikasi yang sedang di buat.
Seperti Contoh diatas menggukan komponen Title, Separator, Form
Button dan Inline List.
Menambahkan Kolom Pada Data
Untuk menambahkan kolom pada tabel data, selain dengan menambahkan
langsung pada Spreadsheet glide memiliki fitur untuk menambahkan kolom
tanpa harus membuka Spreadsheet.

Fungsi ini terletak pada tab data yang terdapat di bagian kiri bawah Glide App

Editor. Bagian ini disebut dengan Data Editor. Untuk menampilkna data editor

cukup dengan memilih data dan mengklik tanda plus + (plus) yang terdapat

pada bagian kanan atas. Seperti pada gambar diatas pada Data Editor Terdapat

2 tipe data yaitu Basic Column & Computed Column.

 Settings Halaman
Disini kamu dapat mengelola semua kepentingan aplikasi kamu sesuai dengan keinginan kamu
sebelum aplikasi kamu dibagikan
.
1. Appearance
kegunaanya adalah untuk memilih Tema, warna, dan font tulisan untuk aplikasi kamu.
2. App Info
Kegunaannya adalah untuk edit ikon, Judul, Penulis dan Deskripsi untuk Aplikasi kamu.
3. Privacy
kegunaannya adalah untuk menentukan apakah aplikasi kamu public atau pribadi.
4. Sharing
kegunaannya adalah untuk mengontrol bagaimana aplikasi kamu setelah dibagikan.
5. Sign-In Screen
Kegunaannya adalah untuk menampilkan merek awalan pertama dan suara kamu untuk menyapa
pegguna.
6. User Agreements
kegunaannya adalah untuk membuat syarat dan ketentuan di aplikasi kamu.
7. Data Sync
Kegunaannya adalah untuk memilih bagaimana data baru disinkronkan dengan pengguna di aplikasi
kamu.
8. Template
kegunaannya adalah untuk menjual aplikasi kamu sebagai template.
9. Billing
kegunaannya adalah untuk mengubah paket dan opsi penagihan aplikasi kamu.
10. Integrations
kegunaanya adalah untuk menghubungkan ke Zapier, Google Analytics dan lainnya untuk aplikasi
kamu.
 PRAKTEK
Membuat aplikasi CRUD
DATA PEGAWAI
1

3 4
2

1. Masuk ke link glide -> go.glideapps.com

Klik App untuk membuat aplikasi Kasih nama app kita
2. Klik tanda Plus

Buat database
Google
Spreadsheet

Pilih Googlesheet sebagai database

( Back End )
 3
1 Klik
Add
Stylis Form
Kita pilih
UX dalam List
stylis
LIST

2
Apa yang
kita akan
munculkan
dalam
tampilan
Tabs List
Sesuai sheet pada
Google Spreadsheet
Bisa di munculkan
atau tidak terserah
user
ADD data
Untuk
menambah data

Kalo kita klik

Keluar detail nya

Tampilan add form

Bisa kita modifikasi
dengan komponen2
yg ada

1. Kita pilih styles LIST , atur datanya apa saja yg akan ditampilakan di layar
2. Pilih Add Form -> klik allow users to add sampai muncul tanda Plus +
3. Lalu muncul tampilan form , kita perbaiki UX nya sesuai customize kita
dengan memilih komponen2 yg ada
Pilih
komponen
Ini bisa di
modifikasi
4. Kita akan modifikasi Pilihan jabatan menjadi dropdown
5. Database nya sudah kita buat di sheet “ pilihan jabatan “
6. Hapus pilihan jabatan dan ganti dgn komponen choice

7. Kita modifikasi untuk foto dengan komponn Image picker

8. Sehingga nanti siapapun yg ngisi Form bisa memasukkan foto nya
 Komponen
check box

Komponen
Text Entry

Isi Text Entry

Isi dengan
checkbox

9. Kita modifikasikan untuk opsi status perkawinan , buat text entry untuk memberikan judul text
10. Berikan komponen Check Box sebanyak 2 , sesuai dengan Sheet data Google Spreadsheet yg kita
buat di awal
11. Sekarang coba kita test isi data nya
12. Masukkan nama , npp, pilih jabatan dan foto , Cek Box status keluarga
13. Klik Add di atas untuk menambah data
14. Jika sudah benar , maka di tampilan list akan muncul
15. Jika anda lihat data google spreadsheetnya juga akan nambah data nya sesuai yang
kita input

Info detail
masih kurang
bagus
Ini juga bisa
kita modifikasi

Tampilan LIST Tampilan Detail

Data di google spreadsheet sudah bertambah 1
 Kita hapus semua komponennya sehingga tampilan
menjadi blank

1.Kita mau tambahkan judul “ data pegawai PT SSI “

dengan komponen HINT
2.Untuk Text bisa kita gunakan komponen Action text

Isi text buat di

atas
Dan dibawah
Tampak nya
Hasil dari
komponen Hint
Sebagai judul Pilih warna nya
Success = hijau

Tambah
komponn Pilih
Hint Alignment
1.Untuk Text bisa kita gunakan komponen Action text
2.Tambahkan komponen action text untuk : nama
pegawai , Npp , Jabatan
3.Tambahkan komponen switch agar lebih manis
4.Tambahkan komponen image utk foto

1. Sesuaikan data
dengan kolom
di sheet nya
2. Isi title sesuai
kebutuhan
Edit data Muncul Icon pensil
Tanda bahwa form
sudah bisa di edit

1.Aktifkan edit Form

2.Klik allow usrs to edits
3.Agar data bisa di edit kembali oleh user
4.Klik tanda pensil
5.Jika tampilan edit belum sesuai kebutuhan , maka
tamilan edit ini juga bisa di modifikasi

Tampilan Edit ini

Bisa kita modifikasi
Sama seperti di atas
Kita menambahkan
komponen yg sesuai Tampilan Edit yang
kebutuhan sudah di modifikasi
Dengan memodifikasi
komponen
DELETE data

1.Untuk mendelete data , mudah tinggal klik “allow users to delete “

2. Di tampilan layar akan muncul tulisan Delete
Memodifikasi tampilan
1.Untuk mmodifikasi tampilan , klik icon setting
2.Pilih Appearance
3.Silahkan Ubah warna nya
4.Bisa juga di ubah Theme nya

BEFORE AFTER
 App info Privacy & share

1.Klik App Info

1.Klik privacy
2.Silahkan ganti gambar Icon App anda , bisa juga upload
2.Untuk mudahnya , pilih public
dari gambar yang telah disiapkan
3.Lalu pilih share
 Isi
Nama dari aplikasi
yang akan kita
buat

1.Copy link tersebut atau barcode

2.Bagikan link tersebut ke teman
3.Jika Link di klik , otomatis Aplikasi tersebut meminta apakah mau
di install dan diletaknan di dekstop hp anda ?
4.Jika Ok , proses instalasi app , dan muncul icon Apps yang kita
buat tadi di layar HP
 Apa itu
Relation Database
1. Ada dua sheet : sheet data dan sheet divisi
2. Kita akan relasikan kolom nama pegawai di sheet data dengan pegawai di
sheet divisi
3. Relasi dapat kita buat dengan menambahkan kolom relasi , klik tombol +
 4. Pilih komponen Inline List
5. Atur parameter nya : title , image ( kosong ) ,
action ( kosong ), dan show title with image no !

Hasil dari RELATION

Latihan Relasi
“ Daftar Ujian “
 Tabel 2. Ujian
Tabel 1. Data

1. Kita buat database google spreadsheet dengan 2 sheet : 1) Sheet data dan
2) Sheet ujian
2. Sheet data berisi kolom { Nama , Nim , Jurusan }
3. Sheet Ujian berisi kolom { Jurusan , logo image , kelas , Ujian 1 s/d ujian 3 }
4. Pilihan Jurusan bisa dibuat dengan komponen Choice
5. Kita buat RELASI berdasarkan jurusan untuk merelasikan kelas dan Ujian

Klik detail

Klik detail
Langkah-langkah yang kita buat
6. Kolom jurusan kita buat
Relasi nya , kita beri
nama “ Relasi “
7. Tambahkan komponen
Inline List
 Klik untuk
detail nya

Untuk detail data gunakan

Komponen table
Latihan Match &
Rollup
“ Nilai Ujian “
Tabel 1. Data

Tabel 2. Nilai

Gunakan
fungsi Math
Dan if then

Gunakan relasi table 1 dan 2

dengan key relasi nya = nama
Latihan absensi pegawai
dengan chart dari pivot
 Buat G-Form Report G-Form ini
untuk Link nya menjadi bahan
databasenya
Detail

Link grafik pivot

spreadsheet
 Relasi

Kita buat sheet

untuk relasi
Nama dan foto
diri

Pivot untuk memisahkan nama

Kita buat sheet nama dan dan value kehadirannya
kehadiran copy ( = sel ) ( hadir , sakit atau izin )
dari sheet database absen
 Buat grafiknya untuk di
tampilkan di glidenya sebagai
link url
Pivot untuk memisahkan nama Membuat table dengan hasil pivot
Modikasi table dengan nilai dari
dan value kehadirannya
pivot ( copy paste )
( hadir , sakit atau izin )
Hasil grafiknya dari pemetaan Pivot
Latihan SHOP/ TOKO
DENGAN RELASI
Buat database
nya
Nanti kategori di sheet shop ini akan di
relasi dengan kategori pada sheet retail

Sheet shop ( misalnya )

Sheet retail ( misalnya )

Kita buat Relasi nya
Jangan di centang , itu buat mengatur brp
kolom gambar card yang dimunculkan ke
layar
Form buyer nya :
Ada kode barang yang kita buat default ( otomatis terisi dari pilihan awalnya )

Tombol klik
Keluar form buyer
 Sekian
&
Terima kasih