Membuat Layanan Formulir

Membuat Layanan formulir dengan frontend, backend dan integrasi API

Pada tutorial ini, kita akan menjelajahi langkah-langkah yang diperlukan untuk membuat layanan formulir, mulai dari pengembangan frontend yang menarik, pengelolaan backend yang efisien, hingga integrasi dengan API. Mari kita mulai!

Halaman Developer

Pastikan anda sudah memiliki akun untuk masuk ke halaman dashboard developer agar dapat menggunakan framework.

Setelah masuk akan muncul tampilan seperti di bawah ini:

Frontend

Membuat Layanan

  1. Klik tombol Buat Layanan

  2. Kemudian masukan judul, deskripsi serta kategori layanan seperti gambar berikut:

Menambah Halaman

pada tutorial ini halaman yang ditambahkan akan digunakan untuk menambahkan widget formulir

  1. untuk menambahkan halaman baru Klik tambah halaman di pojok kanan bawah.

  2. isikan judul dengan judul halaman, dalam konteks ini judul berisi text "Formulir"

  3. klik/pilih blank page

  4. halaman akan bertambah disebelah kanan pada bidang halaman

  5. jangan lupa untuk melakukan "save/simpan" pada halaman developer/pengembangan agar semua konfigurasi tersimpan

Menggunakan Widget

Supaya tampilan lebih menarik anda dapat menggunakan beberapa widget. Dalam tutorial ini akan menggunakan widget text sebagai judul dan deskripsi layanan, dan juga widget listview untuk membuat menu dalam layanan

  1. lakukan drag and drop pada widget text dan widget listview pada halaman utama

  2. tambahkan widget lainnya jika diperlukan.

Config Widget Text

  1. klik/pilih icon berbentuk gear pada widget text

  2. akan muncul bidang konfigurasi widget text

  3. masukan title dengan judul atau text apapun, dalam konteks ini title berisi "Demo Layanan"

  4. masukan deskripsi judul

  5. Terdapat beberapa bidang lainnya yang dapat dilakukan konfigurasi

  6. berikut adalah penjelasan terkait bidang pada gambar diatas :

    • Maksimal Karakter Desc: Batas jumlah karakter maksimum yang akan tampil di kolom "Deskripsi" widget teks.

    • Icon: Opsi untuk mengunggah atau memilih ikon yang ingin ditampilkan bersama dengan widget teks.

    • Icon Size: Opsi untuk memilih ukuran ikon yang ingin ditampilkan bersama dengan widget teks.

    • Title Font Size: Opsi untuk memilih ukuran font untuk judul atau label widget teks.

    • Desc Font Size: Opsi untuk memilih ukuran font untuk deskripsi atau informasi tambahan widget teks.

  7. jangan lupa untuk melakukan save/simpan pada halaman developer/pengembangan agar semua konfigurasi tersimpan

  8. berikut adalah tampilan penggunaan widget text pada aplikasi, dilihat dari mode pratinjau :

    • Tampilan mode pratinjau versi "Web"

    • Tampilan mode pratinjau versi "Mobile" , untuk melihat versi mobile, anda diharuskan mendownload aplikasi yang tersedia di dashboard

      setelah anda download aplikasi yang anda buat, anda install kemudian masukkan kode layanan anda

    berikut tampilan aplikasi versi "mobile" yang anda buat

Config Widget ListView

Widget Listview akan kita gunakan untuk membuat list menu navigasi yang akan mengarah ke halaman formulir yang sebelumnya kita buat.

  1. klik/pilih icon berbentuk gear pada widget text

  2. akan muncul bidang konfigurasi widget text

  3. klik/pilih "add listview item"

  4. akan muncul bidang tambahan untuk melakukan konfigurasi pada listview

  5. masukan title dengan judul list, dalam konteks ini title berisi text "Submit Formulir"

  6. masukan deskripsi title pada bidang Deskripsi

  7. lakukan konfigurasi pada bidang lainnya seperti pada bidang image, backgroud color, dan text color. seperti pada gambar berikut

  8. aktifkan button radio enable action onClick

  9. pada onclick method pilih open pages, kemudian pilih page Formulir yang sebelumnya sudah dibuat

  10. klik/pilih save untuk menyimpan konfigurasi

  11. untuk melihat hasilnya masuk kehalaman pratinjau lalu klik/pilih layanan yang sedang dikembangkan dalam konteks ini nama layanannya adalah "Demo Layanan"

  12. jangan lupa untuk melakukan save/simpan pada halaman developer/pengembangan agar semua konfigurasi tersimpan

  13. berikut adalah tampilan penggunaan widget listview pada aplikasi, dilihat dari mode pratinjau

Config Widget Formulir

Sebelumnya kita sudah membuat halaman yang ditujukan untuk membuat widget formulir. Saat ini kita sudah menggunakan widget listview yang kita fungsikan sebagai menu navigasi, dimana nantinya ketika list di klik maka akan mengarah ke halaman formulir. Namun kita belum menambahkan widget formulir pada halaman formulir.

::card Pada tutorial ini kita akan menggunakan widget formulir untuk membuat formulir pengaduan yang memiliki field :

  • jenis_pengaduan

  • keterangan

  • alamat

  • foto ::

Config Formulir Frontend

Ikuti langkah dibawah ini untuk menambahkan dan melakukan konfigurasi pada widget formulir:

  1. pada halaman developer layanan klik/pilih halaman formulir

  2. tambahkan widget formulir pada halaman dengan cara drag & drop widget formulir

  3. setelah ditambahkan, klik/pilih icon gear pada widget formulir

  4. akan muncul bidang konfigurasi widget seperti gambar berikut

  5. klik/pilih tambah formulir

  6. akan muncul bidang tambahan seperti gambar berikut

  7. klik/pilih tambah bidang

  8. akan muncul bidang tambahan

  9. klik/pilih bidang yang ditambahkan, maka akan muncul tampilan seperti berikut

  10. pada bagian label isi dengan "Jenis Pengaduan"

  11. klik/pilih setup komponen untuk melakukan konfigurasi form pada bidang yang ditambahkan

  12. akan muncul bidang konfigurasi form seperti gambar berikut

  13. tentukan jenis form, dalam konteks ini yang dipilih adalah "standart form"

  14. pilih select lalu pilih statis

  15. pada kolom pilihan masukan pilihan "jenis pengaduan" seperti gambar berikut

  16. klik/pilih tombol next yang ada dipojok kanan bawah

  17. akan muncul bidang konfigurasi validasi, lanjut klik/pilih next saja

  18. muncul bidang konfigurasi proses data, lanjut klik/pilih save untuk menyimpan konfigurasi

  19. selamat, anda telah berhasil melakukan konfigurasi field/form "jenis pengaduan"

  20. mari kita lanjut menambahkan field "keterangan"

  21. klik/pilih kembali tambah bidang

  22. klik/pilih bidang yang ditambahkan

  23. pada bagian label isi dengan "Keterangan"

  24. klik pilih setup komponen untuk melakukan konfigurasi form

  25. tentukan jenis form, dalam konteks ini yang dipilih adalah "standart form"

  26. pilih Textarea

  27. klik/pilih tombol next yang ada dipojok kanan bawah

  28. akan muncul bidang konfigurasi validasi, lanjut klik/pilih next saja

  29. muncul bidang konfigurasi proses data, lanjut klik/pilih save untuk menyimpan konfigurasi

  30. mari kita lanjut menambahkan field "Alamat"

  31. klik/pilih kembali tambah bidang

  32. klik/pilih bidang yang ditambahkan

  33. pada bagian label isi dengan "Alamat"

  34. klik pilih setup komponen untuk melakukan konfigurasi form

  35. tentukan jenis form, dalam konteks ini yang dipilih adalah "standart form"

  36. pilih Textarea

  37. klik/pilih tombol next yang ada dipojok kanan bawah

  38. akan muncul bidang konfigurasi validasi, lanjut klik/pilih next saja

  39. muncul bidang konfigurasi proses data, lanjut klik/pilih save untuk menyimpan konfigurasi

  40. mari kita lanjut menambahkan field "Foto"

  41. klik/pilih kembali tambah bidang

  42. klik/pilih bidang yang ditambahkan

  43. pada bagian label isi dengan "Foto"

  44. klik pilih setup komponen untuk melakukan konfigurasi form

  45. tentukan jenis form, dalam konteks ini yang dipilih adalah "Kamera"

  46. pilih Kamera + Galeri

  47. klik/pilih tombol next yang ada dipojok kanan bawah

  48. akan muncul bidang konfigurasi validasi, lanjut klik/pilih next saja

  49. muncul bidang konfigurasi proses data, lanjut klik/pilih save untuk menyimpan konfigurasi

  50. saat ini kita sudah berhasil menyiapkan field yang dibutuhkan dan sudah melakukan konfigurasi pada setiap form yang akan muncul pada user

  51. lakukan save dengan klik/pilih simpan formulir yang ada dipojok kanan

  52. akan muncul tampilan seperti gambar berikut

  53. jangan lupa untuk memberikan nama formulir, dalam konteks ini nama formulir adalah "Form Pengaduan"

  54. pilih/klik simpan sekarang untuk menyimpan

  55. jangan lupa untuk melakukan save/simpan pada halaman developer/pengembangan agar semua konfigurasi tersimpan

Config Formulir Backend

Anda dapat menambahkan formulir lanjutan pada formulir frontend yang sudah dibuat, formulir hanya akan tampil pada sisi backend. Biasanya dibutuhkan untuk menambahkan field "Status" yang bertujuan untuk memberikan status formulir frontent seperti : MENUNGGU PROSES, DIPROSES, DITERIMA, DITOLAK, SELESAI.

Ikuti langkah dibawah ini untuk menambahkan dan melakukan konfigurasi pada widget formulir bagian backend:

  1. pada halaman developer layanan yang sedang dikembangkan masuk ke halaman formulir

  2. lalu pada widget formulir, klik/pilih icon gear untuk melakukan konfigurasi

  3. klik/pilih Tambah Formulir dibagian bawah

  4. klik/pilih tambah bidang

  5. akan muncul bidang tambahan

  6. klik/pilih bidang yang ditambahkan, maka akan muncul tampilan seperti berikut

  7. pada bagian label isi dengan "Status"

  8. klik/pilih setup komponen untuk melakukan konfigurasi form pada bidang yang ditambahkan

  9. akan muncul bidang konfigurasi form seperti gambar berikut

  10. tentukan jenis form, dalam konteks ini yang dipilih adalah "standart form"

  11. pilih select lalu pilih statis

  12. pada kolom pilihan masukan pilihan "Status" seperti gambar berikut

  13. klik/pilih tombol next yang ada dipojok kanan bawah

  14. akan muncul bidang konfigurasi validasi, lanjut klik/pilih next saja

  15. muncul bidang konfigurasi proses data, lanjut klik/pilih save untuk menyimpan konfigurasi

  16. selamat, anda telah berhasil melakukan konfigurasi lanjutan field/form backend

  17. lanjut klik simpan formulir, lalu klik simpan sekarang

  18. jangan lupa untuk melakukan save/simpan pada halaman developer/pengembangan agar semua konfigurasi tersimpan

Config Tampilan Mobile

Anda dapat melakukan konfigurasi tambahan yang ditujukan untuk tampilan transaksi setelah user melakukan submit pada sisi mobile. bagian ini dapat diakses oleh user ketika user ingin melihat riwayat transaksi berdasarkan formulir yang sudah di submit.

Berikut adalah gambar contoh tampilan mobile transaksi user :

Berikut adalah gambar contoh Detail tampilan mobile transaksi user :

Oke mari kita lakukan konfigurasi, ikuti langkah dibawah ini:

  1. masuk ke halaman formulir

  2. klik/pilih icon gear pada widget formulir

  3. klik/pilih simpan formulir yang berada di bagian bawah

  4. akan muncul bidang konfigurasi tambahan setelah klik simpan formulir seperti gambar berikut

  5. klik/pilih sub-menu konfigurasi app Mobile

  6. akan muncul bidang konfigurasi seperti gambar berikut

  7. pada kolom bidang judul, tentukan field "jenis_pengaduan"

  8. pada kolom bidang deskripsi, tentukan field "keterangan"

  9. pada kolom bidang status, tentukan field "status"

  10. jika bidang judul, deskripsi, dan status sudah dtentukan/dilakukan konfigurasi klik/pilih simpan sekarang yang ada dibawah

  11. jangan lupa untuk melakukan save/simpan pada halaman developer/pengembangan agar semua konfigurasi tersimpan

Sampai tahap ini anda sudah selesai melakukan konfigurasi dari sisi frontend, mari kita lanjut pada bagian Backoffice/Backend

Backoffice/Backend

Pada bagian backoffice/backend anda dapat melakukan monitoring dan manajemen data secara langsung. terdapat widget/component yang dapat dikonfigurasi berdasarkan kebutuhan monitoring dan manajemen data yang akan dilakukan.

Berikut adalah gambar dashboard monitoring data yang dapat dilakukan dari backoffice/backend yang dibangun menggunakan widget yang tersedia pada backoffice

Berikut adalah gambar dashboard manajemen data yang dapat dilakukan dari backoffice/backend yang dibangun menggunakan widget yang tersedia pada backoffice

Dashboard Monitoring

Ketika akan melakukan monitoring pasti kita akan membutuhkan berbagai jenis chart, pada backoffice terdapat widget chart yang dapat dimanfaatkan untuk membangun sebuah dashboard monitoring. Dalam konteks ini kita akan menggunakan widget chart counter, line, dan juga bar.

Menambahkan Widget

Berikut adalah langkah-langkah menambahkan widget chart

  1. pada halaman developer/pengembang klik/pilih sub-menu backoffice untuk masuk ke developer backend

  2. klik/pilih tambah widget

  3. klik/pilih chart

  4. klik/pilih counter untuk menggunakan chart berjenis counter

  5. klik/pilih line untuk menggunakan chart berjenis line

  6. klik/pilih bar untuk menggunakan chart berjenis bar

  7. klik save untuk menyimpan component yang sudah ditambahkan

Config Widget Chart

Sebelumnya kita sudah berhasil menambahkan widget chart, dalam tutorial ini mari kita lakukan konfigurasi pada setiap masing-masing chart yang sudah ditambahkan

Config Chart - Counter

Ikuti langkah-langkah dibawah ini untuk melakukan konfigurasi pada chart - counter

  1. klik/pilih icon gear pada widget chart counter

  2. akan muncul bidang untuk melakukan konfigurasi

  3. pada kolom pilih source data, pilih "dev"

  4. pada kolom pilih data, pilih formulir yang sudah di buat di frontend dalam konteks ini "Form Pengaduan"

  5. pada bidang metric tentukan agregat, pilih count

  6. pada kolom label, tentukan label dengan text "Jumlah Pengaduan"

  7. pada bidang buckets, tentukan field yang akan di agregat. dalam konteks ini field yang dipilih adalah "_layanan.title"

  8. klik/pilih simpan untuk menyimpan konfigurasi

  9. jangan lupa untuk melakukan save/simpan pada halaman developer/pengembangan agar semua konfigurasi tersimpan

Config Chart - Line

Ikuti langkah-langkah dibawah ini untuk melakukan konfigurasi pada chart - line

  1. klik/pilih icon gear pada widget chart line

  2. akan muncul bidang untuk melakukan konfigurasi

  3. pada kolom pilih source data, pilih "dev"

  4. pada kolom pilih data, pilih formulir yang sudah di buat di frontend dalam konteks ini "Form Pengaduan"

  5. pada bidang metric tentukan agregat, pilih count

  6. pada kolom label, tentukan label dengan text "Jumlah Pengaduan /Hari"

  7. pada bidang buckets, tentukan agregat. dalam konteks ini agregat yang dipilih adalah "Date Histogram"

  8. tentukan field yang akan di agregat. dalam konteks ini field yang dipilih adalah "_meta.creatAt"

  9. pada bidang interval, pilih "day"

  10. klik/pilih simpan untuk menyimpan konfigurasi

  11. jangan lupa untuk melakukan save/simpan pada halaman developer/pengembangan agar semua konfigurasi tersimpan

Config Chart - Bar

Ikuti langkah-langkah dibawah ini untuk melakukan konfigurasi pada chart - bar

  1. klik/pilih icon gear pada widget chart bar

  2. akan muncul bidang untuk melakukan konfigurasi

  3. pada kolom pilih source data, pilih "dev"

  4. pada kolom pilih data, pilih formulir yang sudah di buat di frontend dalam konteks ini "Form Pengaduan"

  5. pada bidang metric tentukan agregat, pilih count

  6. pada kolom label, tentukan label dengan text "Jenis Pengaduan"

  7. pada bidang buckets, tentukan agregat. dalam konteks ini agregat yang dipilih adalah "Terms"

  8. tentukan field yang akan di agregat. dalam konteks ini field yang dipilih adalah "jenis_pengaduan"

  9. pada bidang urutan, pilih Metric

  10. pada bidang tipe, pilih desc

  11. pada bidang size, tentukan nilai 20

  12. klik/pilih simpan untuk menyimpan konfigurasi

  13. jangan lupa untuk melakukan save/simpan pada halaman developer/pengembangan agar semua konfigurasi tersimpan

Dashboard Manajemen Data

Anda dapat melakukan manajemen data yang berasal dari formulir frontend yang sudah disubmit oleh user, yang dapat dilakukan diantaranya adalah melihat detail data, menghapus data, dan juga melakukan update data

Menambah halaman

Untuk membuat dashboard manajemen data kita harus menambahkan halaman terlebih dahulu, karena pada halaman sebelumnya sudah kita khususkan tampilannya untuk dashboard monitoring yang berisikan berbagai widget chart yang sudah ditambahkan dan sudah dikonfigurasi.

Ikuti langkah-langkah dibawah ini untuk menambahkan halaman pada backoffice/backend

  1. klik/pilih icon plus (+) untuk menambahkan halaman

  2. akan muncul bidang konfigurasi

  3. pada kolom name, isikan text untuk memberikan nama pada halaman. dalam konteks ini "Data Pengaduan"

  4. klik pilih blank page

  5. maka halaman sudah berhasil ditambahkan

  6. jangan lupa untuk melakukan save/simpan pada halaman developer/pengembangan agar semua konfigurasi tersimpan

Config Data Form

Sebelumnya kita sudah menambahkan halaman yang ditujukan untuk dashboard manajemen data. setelah itu kita tambahkan widget data pada halaman yang sudah ditambahkan. dimana widget data yang akan ditambahkan berasal dari widget formulir frontend yang sudah kita buat sebelumnya yaitu "Form Pengaudan".

Ikuti langkah-langkah dibawah ini untuk menambahkan widget data dan melakukan konfigurasi pada widget data "form pengaduan"

  1. masuk ke halaman "data pengaduan"

  2. klik/pilih tambah widget

  3. pada bagian sub-menu data klik/pilih "Data Form Pengaduan"

  4. klik/pilih tombol gear untuk melakukan setup/konfigurasi

  5. akan muncul bidang untuk dilakukan konfigurasi

  6. pada kolom title, isi dengan "Data"

  7. pada kolom grid title, tentukan field yang akan menjadi title. dalam konteks ini adalah "_user.nama_lengkap"

  8. pada kolom grid image, tentukan field yang akan menjadi image. dalam konteks ini adalah "foto"

  9. anda dapat menambahkan deskripsi pada grid dengan cara klik/pilih "Add Grid Description"

  10. akan muncul bidang konfigurasi grid description

  11. pada kolom field, pilih field yang akan dimunculkan pada grid. dalam konteks ini field yang dipilih "jenis_pengaduan"

  12. pada kolom label, tentukan label text. dalam konteks ini label text "Jenis Pengaduan"

  13. klik/pilih kembali "Add Grid Description" untuk menambahkan deskripsi

  14. pada kolom field, pilih field yang akan dimunculkan pada grid. dalam konteks ini field yang dipilih "status"

  15. pada kolom label, tentukan label text. dalam konteks ini label text "Status"

  16. pada kolom backgroud color, isikan dengan value status pada formulir kemudian berikan color dengan tanda pemisah (:)

    • contoh :

      • waspada:#FFFF00

      • siaga:#FFA500

      • awas:#FF0000

  17. klik/pilih simpan untuk menyimpan konfigurasi

  18. jangan lupa untuk melakukan save/simpan pada halaman developer/pengembangan agar semua konfigurasi tersimpan

Sampai tahap ini anda sudah selesai melakukan konfigurasi dari sisi Backend, mari kita lanjut pada bagian Integrasi API

Integrasi API

Pada halaman developer/pengembang terdapat halaman Integrasi API yang dapat digunakan untuk proses integrasi dengan backend atau sistem yang sudah berjalan. Anda dapat menyesuaikan kebutuhan dengan endpoint yang disediakan pada halaman integrasi API, diantaranya adalah:

  1. POST /update/{id}

  2. POST /delete/{id}

  3. GET /detail/{id}

  4. GET /list

  5. GET /aggs

Menggunakan Postman Collection

Anda dapat melakukan pengujian secara langsung dengan POSTMAN pada endpoint yang disediakan dengan cara mengunduh postman collection yang terdapat pada halaman Integrasi API.

Sebelum melakukan pengujian pada API pastikan anda sudah melakukan submit data pada form layanan yang anda buat melalui aplikasi, ini berguna supaya ketika kita melakukan send pada endpoint yang dituju memiliki data.

Berikut langkah-langkah mengunduh postman collection

  1. pada halaman developer layanan yang sedang dikembangkan masuk ke sub-menu Integrasi API

  2. klik/pilih form pengaduan

  3. klik/pilih postman collection (Development) untuk mengunduh

  4. buka aplikasi postman pada komputer anda

  5. import collection yang sudah diunduh dengan cara klik/pilih import pada aplikasi postman

  6. upload file json yang sudah diunduh pada bidang import

  7. sampai tahap ini anda sudah berhasil mengunduh dan mengimport file json collection pada aplikasi Postman

Menggunakan GET /list

  1. masuk ke postman collection form pengaduan

  2. klik/pilih GET /list

  3. klik send

  4. jika berhasil maka data akan mucul pada bidang Body

Menggunakan GET /detail{id}

  1. masuk ke postman collection form pengaduan

  2. klik/pilih GET /detail{id}

  3. pastikan anda sudah mengcopy id pengajuan pada endpoint GET/list

  4. paste id yang sudah di copy setelah detail/(id). dalam konteks ini id yang digunakan adalah "AY2ryZ2sCrQ07KigLs3B"

  5. klik send

  6. jika berhasil maka data akan mucul pada bidang Body

Menggunakan POST update/step-2{id}

  1. masuk ke postman collection form pengaduan

  2. klik/pilih POST update/step-1{id}

  3. pastikan anda sudah mengcopy id pengajuan pada endpoint GET/list

  4. paste id yang sudah di copy setelah update/step-2/(id). dalam konteks ini id yang digunakan adalah "AY2ryZ2sCrQ07KigLs3B"

  5. klik/pilih sub-menu Body

  6. pada kolom value status, rubah value menjadi "DIPROSES"

  7. klik send

  8. jika berhasil maka akan mendapatkan respone body seperti gambar berikut ini

  9. untuk melihat hasilnya masuk kehalaman backoffice pada layanan yang dibuat

  10. klik/pilih pratinjau untuk masuk ke mode pratinjau

  11. masuk ke halaman data pengaduan

  12. lihat status pada data pengaduan, status sudah berubah yang sebelumnya "MENUNGGU DIPROSES" menjadi "DIPROSES"

::Card Selamat, sampai tahap ini anda sudah berhasil mengimplementasikan pengembangan sebuah layanan formulir dengan frontend, konfigurasi backoffice, dan menggunakan integrasi API. ::

PreviousTutorialNextMembuat Layanan WebView

Last updated