Tutorial 2: Bekerja dengan Data

Keterampilan App Maker tingkat menengah

15-20 menit

Apa yang akan Anda buat

Anda akan membuat aplikasi database karyawan yang sederhana. Pengguna aplikasi tersebut dapat:

  • Membuat record karyawan baru dan memasukkan data ke dalamnya
  • Mengedit record karyawan
  • Beralih dari satu record ke record lainnya
  • Mengurutkan record
  • Menghapus record

Apa yang akan Anda pelajari

Tutorial ini mengajarkan cara:

  • Membuat model data dan menambahkan kolom ke dalamnya. Anda akan mempelajari konsep terkait data—model, kolom, record, sumber data, dan data binding.
  • Menambahkan widget formulir dan tabel ke halaman. Anda akan belajar cara memodifikasi widget dan bagaimana cara kerjanya. Anda juga mempelajari perbedaan antara formulir insert dan formulir edit.

Membuat aplikasi Anda

  1. Login ke akun G Suite yang disediakan oleh perusahaan atau sekolah Anda.
  2. Buka App Maker.
  3. Buat aplikasi kosong:
    • Jika App Maker menampilkan dialog selamat datang, klik Buat Aplikasi Baru.
    • Jika tidak, klik Menu Baru Aplikasi Kosong.
  4. Ganti nama aplikasi Database Karyawan.

Membuat model

Buat model dan tentukan kolomnya. Model berisi data yang tersedia di aplikasi Anda. Kolom model adalah seperti kolom dalam tabel, misalnya, Name, Email, dan HireDate. Model menyimpan data dalam record, seperti baris dalam tabel. Untuk tutorial ini, Anda akan menggunakan model Google Cloud SQL.

  1. Di navigasi sebelah kiri, arahkan kursor ke Data dan klik Tambahkan . Dialog Buat Model terbuka dengan opsi Google Cloud SQL dipilih.
  2. Klik Berikutnya.
  3. Beri nama model EmployeeData.
  4. Klik Buat. App Maker membuat model dan membuka editor Model.
  5. Klik tab Sumber data. Perhatikan bahwa model memiliki satu sumber data bernama EmployeeData yang secara otomatis dibuat oleh App Maker. Sebuah sumber data menetapkan data apa dalam database yang tersedia di UI aplikasi.
  6. Klik EmployeeData untuk membuka editor sumber data dan memeriksa setelan sumber data.

    Secara default, semua data tersedia (tidak ada Kueri yang diatur), sumber data dimuat secara otomatis (Muat data secara otomatis dipilih), dan perubahan disimpan secara otomatis (Mode penyimpanan manual tidak dipilih). Untuk aplikasi ini, perilaku defaultnya OK. Untuk aplikasi lain, Anda mungkin ingin menonaktifkan muat data secara otomatis jika Anda ingin meneruskan kueri dari pengguna terlebih dahulu. Anda mungkin ingin mengaktifkan Mode penyimpanan manual jika ingin pengguna secara eksplisit menyimpan perubahan pada record dalam sumber data. Misalnya, mereka mungkin harus mengklik tombol Simpan perubahan.

Menambahkan kolom ke model

Di tab Kolom, untuk masing-masing kolom:

  1. Klik Tambahkan Kolom Baru dan pilih jenis kolom.
  2. Di kolom Name, masukkan nama kolom. Anda dapat membiarkan deskripsi dan setelan lainnya tidak berubah.

    Tambahkan kolom-kolom berikut:

    Nama kolomJenis kolom
    NameString
    EmailString
    HireDateTanggal
    ActiveBoolean

Menyiapkan halaman untuk UI

Aplikasi Anda memiliki satu halaman untuk memulai. Beri nama halaman dan tetapkan sumber data model Anda. Ketika membuat halaman, halaman tersebut tidak memiliki sumber data yang telah ditetapkan. Ketika memilih sumber data untuk suatu halaman, widget pada halaman tersebut secara otomatis mewarisi sumber datanya.

  1. Di sidebar kiri, arahkan kursor ke NewPage dan klik Lainnya Ganti nama
  2. Masukkan EmployeePage dan klik OK.
  3. Di Editor Properti (terlihat ketika Editor dipilih), klik properti sumber data.
  4. Klik EmployeeData untuk memilihnya sebagai sumber data.

Menambahkan formulir edit

Formulir edit memungkinkan pengguna:

  • Membuat record baru di database
  • Memasukkan data untuk record
  • Memilih nilai untuk kolom yang memiliki pilihan, seperti kolom boolean, kolom tanggal, dan kolom yang memiliki nilai yang mungkin
  • Mengedit data di dalam record
  • Menghapus record dari database

Untuk menambahkan formulir edit:

  1. Buka palet Widget (klik Widget ) dan tambahkan Formulir Widget Formulir ke halaman.
  2. Karena Anda menyetel sumber data halaman ke Inherited: EmployeeData, sumber data tersebut akan disarankan secara otomatis. Tetap pilih dan klik Berikutnya.
  3. Dalam dialog Pilih jenis formulir, pilih Edit, lalu klik Berikutnya.
  4. Tentukan opsi untuk formulir:

    • Kolom—Pilih kolom sumber data untuk disertakan dalam formulir.
    • Dapat diedit—Setel kolom sebagai dapat diedit.

    Untuk tutorial ini, pertahankan setelan default. Opsi default membuat formulir yang mencakup semua kolom sumber data. Semua kolom, kecuali Id, bersifat dapat diedit.

  5. Klik Selesai.

Menambahkan tabel

Tabel menampilkan data sebagai baris dan kolom. Baris sesuai dengan record dalam model dan kolom sesuai dengan kolom. Seorang pengguna dapat menggunakan tabel untuk:

  • Melihat beberapa record sekaligus dan berpindah antar-halaman data
  • Mengedit data record dalam kolom yang dapat diedit
  • Mengurutkan record berdasarkan kolom
  • Menghapus record

Untuk menambahkan tabel:

  1. Dari Widget , tambahkan Tabel Widget Formulir ke halaman di bawah formulir edit. Sejajarkan tepi kiri formulir edit dan tabel.
  2. Karena Anda menyetel sumber data halaman ke Inherited: EmployeeData, sumber data tersebut akan disarankan secara otomatis. Tetap pilih dan klik Berikutnya.
  3. Tentukan opsi untuk tabel:

    • Kolom—Pilih kolom sumber data untuk digunakan sebagai kolom dalam tabel.
    • Dapat diedit—Pilih kolom mana yang dapat diedit.

    Untuk tutorial ini, pertahankan setelan default. Opsi default membuat tabel dengan kolom yang sesuai dengan semua kolom sumber data dan tidak ada yang bisa diedit. Secara umum, aplikasi berjalan sangat baik ketika tidak memiliki terlalu banyak kolom yang dapat diedit. Alih-alih tabel yang sepenuhnya dapat diedit, sediakan dialog pop-up untuk membuat dan mengedit record dan tabel hanya baca untuk meninjau record, seperti dalam tutorial ini.

  4. Klik Berikutnya.

  5. Pertahankan opsi tambahan—baris per halaman, dapat diurutkan, dan dapat dihapus.

  6. Klik Selesai.

Melihat pratinjau dan menguji aplikasi Anda

  1. Di sudut kanan atas, klik Pratinjau untuk menjalankan aplikasi Anda di tab browser baru.
  2. Klik Izinkan untuk membiarkan aplikasi Anda menggunakan informasi khusus.
  3. Perbesar jendela browser agar sesuai dengan seluruh formulir edit dan bagian atas tabel.
  4. Di formulir Edit EmployeeData, coba masukkan nama di kolom Name. Anda tidak bisa karena belum ada record.
  5. Klik Buat untuk membuat record. Aplikasi ini menambahkan record ke tabel. Ini adalah record riil dalam database. Kini Anda dapat memasukkan data dan data tersebut secara otomatis disimpan ke database. Perilaku ini berguna ketika pengguna ingin memperbarui record, tetapi tidak bersifat intuitif untuk membuat record. Formulir insert, yang dijelaskan nanti dalam tutorial ini, adalah cara yang lebih intuitif bagi pengguna untuk menambahkan data.
  6. Isi formulir. Saat Anda memasukkan data dan memilih nilai, App Maker menambahkan nilai ke tabel. Data menjadi aktif untuk setiap kolom segera setelah Anda menekan Enter, mengklik di luar kolom, atau membuat pilihan.
  7. Klik Buat untuk membuat record tambahan, dan masukkan data untuk record tersebut.
  8. Pilih salah satu record dalam tabel. Klik Hapus dalam formulir edit untuk menghapus record. Tidak ada pembatalan otomatis, meskipun hal tersebut bisa dilakukan dengan skrip.
  9. Perlu diketahui bahwa kontrol App Maker ditambahkan ke bagian bawah formulir. Gunakan kontrol ini untuk beralih antara halaman data.

Selamat! Anda baru saja berhasil membuat aplikasi App Maker yang sesuai dengan data.

Menemukan kehebatan di balik UI

Sebelum menutup tutorial ini, temukan fitur-fitur yang menghadirkan kehebatan di balik UI: binding, peristiwa, dan tindakan.

Mempelajari binding

Binding merupakan link dua arah antara properti widget dan properti lainnya. Data binding adalah ketika properti widget tertaut ke properti sumber data.

Karena binding bersifat dua arah, mengubah satu properti tertaut akan mengubah yang lainnya.

Menjelajahi cara UI aplikasi menggunakan binding:

  1. Jika tab Pratinjau aplikasi masih terbuka, tutup dan kembali ke App Maker.
  2. Di formulir Edit Karyawan, pilih kotak teks Name.
  3. Di Editor Properti, ingat bahwa properti nilai disetel ke @datasource.item.Name.

    Binding ini menautkan nilai Name dalam formulir edit dengan nilai Name untuk record dalam sumber data. Lokasi di properti nilai mendefinisikan binding sebagai:

    • datasource—Mengacu pada sumber data untuk widget
    • item—Mengacu pada item yang saat ini dipilih (record)
    • Name—Mengacu pada nilai record untuk Name
  4. Di Editor Properti, pilih properti label. Ingat bahwa hal ini disetel ke @models.EmployeeData.fields.Name.displayName.

    Binding ini menautkan label kotak teks Name dalam formulir edit dengan properti displayName kolom Name dalam model EmployeeData. Lokasi di properti label mendefinisikan binding ini sebagai:

    • models.EmployeeData—Mengacu pada model EmployeeData.
    • fields.Name.displayName—Mengacu pada properti displayName kolom Name.

Mempelajari peristiwa dan tindakan

Anda dapat menghubungkan hal-hal yang terjadi (peristiwa) dengan respons (tindakan).

Peristiwa memicu tindakan. Peristiwa aplikasi meliputi:

  • Aplikasi dimulai
  • Sebuah sumber data dimuat
  • Aplikasi memeriksa izin
  • Pengguna mengklik tombol
  • Aplikasi mengakses atau mengubah data
  • Aplikasi memvalidasi data

Tindakan adalah respons terhadap peristiwa. Tindakan meliputi:

  • Membuat item baru
  • Menghapus item saat ini
  • Memuat ulang sumber data
  • Menjalankan skrip klien

Pelajari bagaimana aplikasi menggunakan peristiwa dan tindakan:

  1. Di formulir Edit EmployeeData, pilih tombol Buat.
  2. Di Editor Properti, temukan onClick. Peristiwa onClick adalah ketika pengguna mengklik tombol Buat. Peristiwa onClick terdaftar di bagian Tombol dan Peristiwa (item yang sama ditampilkan di dua tempat, demi kenyamanan).
  3. Klik onClick. Menu ini mencakup tindakan yang mungkin diambil ketika pengguna mengklik tombol. Dalam kasus ini, tindakannya adalah skrip kustom. Klik Tindakan kustom untuk membuka kode. Kode ini membuat item dalam sumber data yang ditetapkan untuk widget. App Maker memiliki tindakan Buat item baru yang telah ditetapkan, tetapi tindakan ini adalah untuk formulir insert.
  4. Di kanvas (editor halaman) di dalam tabel, klik header Name.
  5. Di Editor Properti, klik onClick > Tindakan khusus. Saat pengguna mengklik header Name, tindakan ini adalah skrip khusus yang mengurutkan kolom berdasarkan kolom Name.

Membandingkan formulir insert dengan formulir edit

Sebelum keluar dari topik formulir, bandingkan formulir edit dengan formulir insert.

Di tahap sebelumnya dalam tutorial ini, Anda mendapati bahwa formulir edit memungkinkan pengguna mengedit record dalam database. Jika tidak ada record, pengguna harus membuat record sebelum mereka dapat memasukkan data. Sebaliknya, formulir insert awalnya menyimpan data ke draf record tunggal yang ada di sumber data, bukan di database. Setelah pengguna siap, mereka secara eksplisit menyimpan isi draf record ke database.

Formulir insert memungkinkan pengguna:

  • Memasukkan data dan memilih nilai pada kolom di dalam draf record
  • Menyimpan konten draf record pada record baru di dalam database. Setelah data disalin, draf record dikosongkan.

Menambahkan formulir insert

  1. Dari Widget , tambahkan Formulir Widget Formulir ke halaman di samping formulir edit.
  2. Sumber data Inherited: EmployeeData dipilih secara default. Tinggalkan pilihan ini dan klik Berikutnya.
  3. Pilih Insert dan klik Berikutnya. Biarkan semua kolom tetap dipilih supaya ada di formulir dan dapat diedit.
  4. Klik Selesai.

Mempelajari cara kerja formulir insert

  1. Di sudut kanan atas, klik Pratinjau untuk menjalankan aplikasi Anda di tab browser baru.
  2. Jika tabel berisi record, arahkan kursor ke baris dan klik Hapus sampai tidak ada record yang tersisa.
  3. Isi formulir Buat EmployeeData. Anda dapat langsung memasukkan data, tidak seperti formulir Edit Karyawan, namun data tidak ditambahkan ke tabel. Saat Anda memasukkan data, App Maker menyimpannya ke draf record di sumber data, bukan database. Tabel tidak akan diperbarui hingga Anda menyimpan record ke database.
  4. Klik Kirim untuk membuat record riil dalam database. App Maker menyalin data dari draf record ke record riil, lalu mengosongkan draf record. Kini data ada di tabel karena data ada di database. Data juga akan muncul dalam formulir edit, yang berisi data dari record yang saat ini dipilih.

    Saat Anda memasukkan data dalam formulir edit, data tidak akan muncul dalam formulir insert karena nilai-nilai dalam formulir insert tertaut dengan draf record.

Menjelajahi cara membuat formulir insert

  1. Jika tab Pratinjau aplikasi masih terbuka, tutup dan kembali ke App Maker.
  2. Di formulir Buat EmployeeData, pilih kotak teks Name.
  3. Di Editor Properti, ingat bahwa properti nilai disetel ke @datasource.item.Name, sama dengan formulir edit. Namun, karena formulir ini adalah formulir insert, binding ini menautkan nilai Name dalam formulir insert dengan nilai Name untuk draf record di dalam sumber data. Pelajari lebih lanjut tentang draf record dan sumber data mode-pembuatan.
  4. Sekarang, pilih tombol Kirim. Ingat bahwa tindakan untuk peristiwa onClick adalah Buat Item Baru. Untuk formulir insert, tindakan Buat Item Baru:
    1. Membuat record baru dalam database
    2. Menyalin isi draf record ke record baru
    3. Membersihkan draf record

Langkah berikutnya

  • Mulai Tutorial 3—Pelajari tentang mendesain gaya suatu aplikasi.
  • Pelajari lebih lanjut tentang data—Baca dokumentasi tentang model
  • Pelajari aplikasi sampel—Aplikasi Hello Data mereplikasi pekerjaan Anda di sini, dengan beberapa perubahan pada formulir edit.