Membangun aplikasi tanpa kode menggunakan database AppSheet native

1. Sebelum memulai

Database AppSheet (ASDB) adalah database native pihak pertama AppSheet untuk mengatur dan mengelola data yang mendukung aplikasi AppSheet. Antarmuka dan peningkatan performanya menghasilkan pengalaman yang lebih baik bagi pembuat aplikasi dan pengguna akhir dibandingkan dengan sumber data eksternal lain yang biasa digunakan seperti Google Spreadsheet, BigQuery, dan Cloud SQL. Database AppSheet hadir sebagai opsi data default untuk semua aplikasi AppSheet.

Yang akan Anda pelajari

  • Cara membuat database AppSheet baru dengan data contoh atau data yang diimpor dari Spreadsheet Google.
  • Cara menyesuaikan data di editor database AppSheet.
  • Cara membuat aplikasi AppSheet dari database AppSheet.
  • Cara mengubah database dan membuat ulang tabel di AppSheet untuk memperhitungkan perubahan struktur tabel.

Yang akan Anda bangun

Codelab ini memandu Anda tentang cara membuat dan menyesuaikan database AppSheet baru. Database pertama dibuat dari awal dengan data default yang disediakan oleh database AppSheet, lalu dari data yang ada di Spreadsheet Google. Kemudian codelab ini memandu cara membuat aplikasi AppSheet baru dari database AppSheet. Terakhir, codelab ini akan menunjukkan cara mengubah tabel database di editor database, lalu membuat ulang tabel di editor aplikasi AppSheet.

Yang akan Anda butuhkan

2. Membuat dan menyesuaikan database AppSheet baru dari awal

Untuk memulai, Anda membuat dan menyesuaikan database AppSheet baru dari awal menggunakan database starter defaultnya. Hal ini memberi Anda kesempatan untuk bereksperimen dengan editor database tanpa melanggar langkah-langkah selanjutnya di codelab ini.

  1. Buka halaman beranda AppSheet (appsheet.com), lalu klik Create > Database > New database.

Database baru dari awal

  1. Sebuah database contoh baru dibuat dan editor database AppSheet muncul.

Gambar database contoh baru di editor database AppSheet.

  1. Sesuaikan database dengan mengubah nama database dari Untitled database menjadi Tasks DB. (Klik judul default, Untitled database, dua kali untuk mengedit nama database.)
  2. Ubah nama tabel Table 1 menjadi Tasks. (Klik tab dua kali untuk mengeditnya).
  3. Ubah kolom pertama dari Title menjadi Task.
  4. Tambahkan data baru dengan mengklik + di pojok kiri atas.

Gambar cara menambahkan data baru dengan mengklik + di pojok kiri atas

  1. Klik kolom Status dua kali untuk melihat bagaimana Enum Type dan Dropdown Item type digunakan.

Editor properti untuk kolom 'Status'. Type: 'Enum' dan Item type: 'Dropdown' digunakan

  1. Opsional: Klik tombol setelah tanda = untuk mewarnai setiap opsi dropdown.

Mewarnai opsi Dropdown dengan pemilih warna.

  1. Opsional: Bereksperimenlah lebih lanjut dengan editor dengan menambahkan opsi baru untuk Enum Status (klik Add option) beserta warna baru.
  2. Opsional: Bereksperimenlah dengan berbagai jenis kolom seperti Color, Progress, Yes/No, dan Phone, lalu amati perilakunya.

Menu kontekstual untuk semua jenis data yang didukung di ASDB.

Jangan ragu untuk bereksperimen lebih lanjut dengan editor database. Pada langkah selanjutnya, Anda akan membuat database baru.

3. Membuat dan menyesuaikan database baru dengan mengimpor dari Spreadsheet Google

Beberapa langkah di bawah ini menunjukkan cara mengimpor data dari Spreadsheet Google.

Membuat database dari Spreadsheet

  1. Pertama, buat salinan Google Sheet publik ini dan ganti namanya menjadi ASDB: IO Codelab.

Perhatikan bahwa spreadsheet ini memiliki dua tab, yaitu Tasks dan Owners.

  1. Seperti sebelumnya, buka halaman beranda AppSheet (appsheet.com), lalu klik Create > Database > Import from Sheets.

Membuat database dari impor spreadsheet

  1. Pada Pemilih File Google Drive, pilih salinan Spreadsheet ASDB: IO Codelab Anda atau nama apa pun yang Anda berikan.

Tindakan ini menghasilkan database AppSheet baru yang dibuat dari data di Spreadsheet.

Screenshot database AppSheet yang dibuat dari Spreadsheet, di editor database.

Menambahkan rujukan ke tabel Tasks

Selanjutnya, Anda akan menambahkan rujukan ke tabel Owners dari tabel Tasks.

  1. Dalam tabel Tasks di database AppSheet, klik kolom Owner dua kali untuk mengedit setelannya.
  2. Ubah jenisnya dari Text menjadi References > Reference.

memilih jenis rujukan

  1. Tetapkan Table to reference sebagai Owners, kemudian klik Save.

Dialog untuk menetapkan Type: Reference dan Table to reference: Owners

  1. Muncul peringatan tentang mengubah jenis kolom. Dalam hal ini, data dalam kolom ini kompatibel dengan jenis kolom baru, jadi Anda dapat mengklik Yes untuk melanjutkan.

Dialog Change column type? Yes/No.

  1. Database AppSheet kemudian mencoba mencocokkan baris terkait di tabel Owners dengan nama di tabel Tasks. Karena set data ini cocok, database AppSheet harus mengisi kolom Owner dengan rujukan yang benar ke baris Owners.

Tabel Tasks di editor ASDB menampilkan nilai kolom Owner yang benar.

  1. Untuk menguji rujukan, klik sel Owner dan perbarui ke Owner lain seperti Sarah.

Memilih Owner lain melalui pop-up yang disediakan oleh rujukan.

Setelah dipilih, nilai baru (Sarah) akan muncul di sel Owner (dalam tabel Tasks).

Setelah memilih Owner yang berbeda, nama Owner, Sarah, akan muncul di kolom Owner pada tabel Tasks.

Mengubah kolom Label pada tabel yang dirujuk

Database AppSheet memungkinkan Anda memilih Label column untuk tabel apa pun. Dengan langkah ini, Anda dapat menentukan kolom mana yang ingin ditampilkan di tabel induk. Hal ini juga mengatur apa yang ditampilkan di tabel induk di aplikasi frontend AppSheet yang tertaut. Jadi, bukannya menampilkan kolom Name dari tabel Owners di tabel Tasks (ditampilkan sebelumnya), Anda dapat menampilkan kolom Email dari tabel Owners.

  1. Untuk melakukannya, ubah Label column di tabel Owners menjadi Email dengan mengarahkan kursor ke sisi kanan header kolom Email dan mengklik ikon elipsis vertikal.

Gambar yang menampilkan ikon elipsis vertikal di sisi kanan header Column.

Tindakan ini akan memanggil menu kontekstual kolom.

Menu kontekstual kolom muncul dengan opsi 'Use column as label' dipilih.

  1. Pilih Use column as label pada menu kontekstual untuk menetapkan column label ke kolom Email.

Header kolom Email dengan penanda label Column di kiri atas header.

  1. Untuk melihat bahwa kolom Email dipilih sebagai label kolom yang merujuk ke tabel Tasks, klik tab tabel Tasks dan perhatikan bahwa kolom Owner kini menampilkan alamat email. Anda mungkin harus memuat ulang browser untuk melihat kolom Owner yang diperbarui.

Kolom Owner pada tabel Tasks menampilkan alamat email karena kolom Email pada tabel Owners yang dirujuk ditetapkan sebagai label kolom.

4. Membuat aplikasi AppSheet dari database AppSheet

Setelah menyelesaikan penyesuaian database, Anda dapat membuat aplikasi AppSheet langsung dari database. Ini berguna jika Anda menginginkan UI frontend kustom, perlu menambahkan otomatisasi atau filter keamanan, dll. Untuk melakukannya, lakukan hal berikut:

  1. Klik Apps di sisi kanan editor ASDB.

Screenshot editor database AppSheet dengan tombol 'Apps' di sebelah kanan ditandai.

Tindakan ini akan memanggil menu kontekstual di sebelah kanan untuk membuat aplikasi baru.

Screenshot yang sama seperti sebelumnya, tetapi dengan dialog yang berisi tombol 'New AppSheet app'.

  1. Klik New AppSheet app untuk membuat aplikasi baru.

Screenshot aplikasi AppSheet yang dibuat.

Saat aplikasi dibuat, perhatikan bahwa aplikasi tersebut memiliki peringatan:

Column "Owner" in Tasks_Schema has a reference to an unknown table or slice "Owners". Open the column definition to select a source table.

Hal ini terjadi karena aplikasi yang dibuat hanya memiliki tabel Tasks, dan kolom Owner-nya memiliki rujukan ke tabel yang tidak diketahui, yaitu tabel Owners.

Untuk memperbaikinya, tambahkan tabel Owners ke aplikasi AppSheet.

  1. Di halaman Data pada editor AppSheet, klik +.

Halaman data dengan ikon '+' ditandai.

  1. Di menu kontekstual Add data, pilih AppSheet Database sebagai sumber data.

Menu kontekstual Add data.

  1. Kemudian pilih database ASDB: IO Codelab (atau nama yang Anda berikan pada database tersebut di langkah sebelumnya).

Opsi menu Select database.

  1. Dalam dialog berikutnya, centang kotak SELECT ALL default, lalu klik Add to app.

Dialog untuk memilih tabel Owners untuk ditambahkan ke aplikasi AppSheet.

Karena tabel Owners sudah ditambahkan ke aplikasi, error Reference tidak muncul lagi.

Screenshot aplikasi AppSheet tanpa error Reference.

  1. Setelah tabel AppSheet Owners baru ditambahkan, Anda dapat membuat View baru untuk menampilkan data ini dengan mengklik halaman Views di AppSheet dan mengklik + di samping PRIMARY NAVIGATION.

Halaman Views, dengan ikon '+' ditandai.

  1. Dalam dialog Add a new view, klik Create a new view

Dialog Add a new view.

  1. Setelah tampilan baru dibuat, tetapkan opsi berikut:

View name: Owners For this data: Owners View type: deck

Halaman pengeditan View untuk tampilan Owners.

Selamat, aplikasi Anda sekarang sudah selesai.

  1. Untuk menguji rujukan antara Tasks dan Owners, klik tampilan Owners atau tampilan Tasks di pratinjau seluler, lalu pilih data untuk melihat data terkait (yang dirujuk).

Screenshot aplikasi AppSheet dengan pratinjau seluler di sebelah kanan ditandai.

Misalnya, Anda dapat mengklik tampilan Owners, lalu mengklik data untuk melihat perincian dan mengetahui data Task terkait.

Gambar yang menunjukkan pemilihan Owner dan pemerincian untuk melihat Task terkait.

5. Mengubah database dan membuat ulang tabel Tasks

Setelah Anda membuat database Appsheet dan membuat aplikasi baru darinya, coba ubah tabel di database. Ubah jenis data kolom dan amati apa yang terjadi di aplikasi AppSheet yang tertaut.

  1. Dalam tabel Tasks di database, ubah jenis kolom Due Date menjadi Date and time > Date.

Mengubah jenis kolom Due Date pada tabel Task menjadi Date di editor ASDB.

Perhatikan saat Anda kembali ke aplikasi AppSheet, aplikasi ini mendeteksi bahwa database telah diperbarui dan menampilkan peringatan:

App Schema for table 'Tasks' is out of sync with the schema in AppSheet database. Please regenerate the table structure

Editor AppSheet mendeteksi perubahan skema dalam database dan memberikan peringatan.

  1. Untuk membuat ulang, klik ikon buat ulang d1a956498c05d75f.png di pojok kanan atas.
  2. Tindakan ini memicu dialog peringatan:

Dialog peringatan terkait pembuatan ulang.

  1. Klik Regenerate untuk melanjutkan. Tindakan ini akan memperbarui jenis kolom Due Date di aplikasi menjadi jenis Date, dan mengaktifkan elemen input pemilih tanggal di Formulir Edit untuk data Task.

Formulir edit aplikasi AppSheet yang menampilkan elemen input DatePicker.

6. Selamat

Anda telah menyelesaikan codelab database AppSheet (ASDB).

Bacaan lebih lanjut