Membuat Layout Aplikasi Bebas Coding Menggunakan AppFibr

 Pada artikel sebelumnya, kamu telah mempelajari bagaimana mempersiapkan data bisnis untuk diolah menjadi aplikasi. Mulai dari mengenali tabel data, membuat data dalam tabel, dan implementasi data pada halaman aplikasi. Pada artikel ini, kamu akan mempelajari lebih lanjut langkah selanjutnya dari cara membuat aplikasi bebas coding menggunakan AppFibr yakni membuat layout aplikasi. Beberapa informasi yang akan kamu dapatkan di dalam artikel ini adalah: 

1. Cara registrasi dan cara login di AppFibr. 

2. Mengatur layout halaman aplikasi (menampilkan data dalam bentuk list atau grid).

3. Menghubungkan satu halaman dengan halaman lainnya menggunakan layout details page.

 Cara Registrasi dan Login di AppFibr

Sebelum kamu memulai pembuatan aplikasi yang kamu butuhkan, pastikan kamu telah memiliki akun aktif untuk mengakses fitur yang tersedia di AppFibr. Jika kamu belum memiliki akun, kamu bisa mendaftar atau registrasi dengan mengikuti cara berikut: 

(Halaman Registrasi dan login AppFibr)

Dalam gambar halaman registrasi dan login di atas, kamu perlu menekan “Sign Up Here! for New User”. Kamu akan diarahkan langsung ke halaman registration untuk pembuatan akun baru seperti pada gambar di bawah ini:

(Halaman Registrasi Akun Baru AppFibr)

 Jika kamu sudah menemukan halaman ini, kamu perlu mengisi semua data pendaftaran seperti nama lengkap, alamat email aktif, kata sandi, dan chapta. Perlu diingat bahwa kamu wajib menggunakan kata sandi kuat yang terdiri dari huruf, angka, dan karakter khusus agar akunmu semakin aman. Contoh: Fibest@1945.

Untuk langkah selanjutnya, klik kotak ceklis di bagian “Term of service and Privacy Policy”. Lalu, klik tombol “register” pada layar untuk melengkapi pembuatan akunmu. Selain membuat akun baru secara manual, kamu juga bisa membuat akun baru secara instan dengan menggunakan akun Google dengan klik tombol “Register with Google”. Kemudian, pilih akun yang ingin kamu gunakan untuk AppFibr.

Saat kamu sudah menyelesaikan proses registrasi, kamu akan mendapatkan email untuk verikasi akun yang baru kamu daftarkan. Klik link di dalam email yang kamu terima untuk verifikasi dan kembali ke halaman halaman Registrasi dan login AppFibr.

Kini, kamu sudah memiliki akun AppFibr yang siap digunakan untuk login. Pada proses login, kamu perlu memberi sedikit informasi tentang keperluan menggunakan AppFibr seperti gambar berikut:

(Gambar Personal Data)

Ini adalah proses terakhir dari registrasi dan login pada AppFibr. Langkah selanjutnya, kamu bisa memilih template desain aplikasi atau merancang sendiri aplikasimu dengan mempersiapkan data seperti pada artikel sebelumnya.

Mengatur Layout Halaman Aplikasi AppFibr

Bila data bisnismu sudah siap dan betul, langkah selanjutnya adalah menampilkannya menjadi halaman aplikasi dalam bentuk list atau grid. Pada layout list, kamu akan melihat tiga content utama yakni, main title, description, dan image seperti dalam gambar berikut:

(Gambar content list dan layout default list)

Ketiga content utama tersebut ditunjukan oleh garis panah berwarna merah. Bentuk dari layout list adalah vertikal dengan posisi gambar di sisi kiri atau kanan, nama, dan deskripsi di tengah.

Sementara itu, layout grid memiliki lebih banyak content seperti header, main title, description, label, image, dan avatar. Perhatikan gambar berikut:

(Gambar content grid dan layout default grid)

Seluruh content utama tersebut ditunjukan oleh garis panah berwarna merah. Bentuk dari layout grid adalah vertikal dengan posisi gambar di atas nama, deskripsi, detail, dan avatar.

Dalam penggunaannya, tentu kamu bisa menyesuaikan seluruh content baik dalam layout list maupun layout grid sesuai kebutuhan dan seleramu. Kamu perlu mengisi seluruh content tersebut dengan data yang sesuai agar data yang ditampilkan pada fitur application preview (terletak di sebelah kanan data editor) lengkap serta tidak keliru.

Menghubungkan Halaman AppFibr

Jenis layout berikutnya yang ada di AppFibr adalah Details Page. Berbeda denga layout list dan grid, layout details page ini memiliki komponen seperti berikut:

Sejatinya, jenis layout ini akan menampilkan seluruh data yang ada termasuk data default dari AppFibr. Seperti data terakhir diedit dan pihak yang edit.

Agar aplikasi kamu dapat berjalan dengan baik, kamu perlu menghubungkan satu halaman dengan halaman lainnya. Pada dasarnya, halaman detail akan menampilkan semua data bisnis yang telah kamu masukan ke dalam tabel. 

Untuk mengantisipasi hal ini, kamu perlu mengakses data content pada page editor seperti gambar berikut:

(Gambar data content pada details page)

Halaman yang ingin kamu hubungkan pada layout details page, perlu kamu buat terlebih dahulu. Perhatikan gambar details page di atas, pada kolom warna putih kamu hanya akan bisa memilih data default jika belum memiliki halaman details. Maka dari itu, penting untuk membuatnya terlebih dahulu.

Cara membuat halaman details adalah sebagai berikut:

(Langkah 1 Membuat Details Page)

(Langkah 2 Membuat Details Page)

(Langkah 3 Membuat Details Page)

(Langkah 4 Membuat Details Page)

Langkah terakhir untuk mengoperasikan layout details page adalah dengan menghubungkan satu halaman dengan halaman lainnya. Perhatikan gambar di bawah ini:

(Langkah 5 Membuat Details Page)

Dalam kolom details page, pilih halaman mana yang akan kamu hubungkan agar tampilan pada aplikasimu nanti menjadi sesuai dengan apa yang kamu inginkan.

Kesimpulan

Kamu sudah mempelajari bagaimana cara membuat halaman aplikasi dengan menggunakan tiga layout yang tersedia pada platform AppFibr yakni list, grid, dan details page. Tentu, kamu juga akan bisa menyesuaikan dan menggali lebih dalam potensi pengembangan aplikasimu sendiri di platform AppFibr.

Untuk hasil yang lebih maksimal, kamu juga bisa bergabung dengan komunitas AppFibr. Di mana seluruh member AppFibr dapat bertukar informasi dan pengalaman dalam mengembangkan aplikasi. Nantikan artikel lain untuk informasi dan tips mengembangkan aplikasi bisnis bersama AppFibr.