Flowchart Builder

Flowchart builder terdiri dari tiga bagian utama yaitu:

• Filesystem,
• Kanvas, dan
• Daftar Objek Kanvas

Pada bagian kiri, terdapat filesystem flowchart berfungsi untuk mengelola daftar flowchart yang ada. Pada bagian utama terdapat kanvas yang menampilkan flowchart dari berkas filesystem yang dipilih. Double click pada proses flowchart di filesystem untuk menampilkan isi flowchart ke kanvas. Objek baru dapat ditambahkan dengan men-drag item dari daftar objek kanvas di bagian bawah kanvas ke arah kanvas.

Daftar Objek Kanvas

Bentuk bagan pada flowchart Pagonila mengikuti beberapa bagian dari Flowchart pada umumnya seperti pada ISO 5807. Flowchart yang digunakan antara lain:

• Terminal (Mulai/Selesai)
• Masukan/Keluaran (Input/Output)
• Proses
• Keputusan (Yes/No)
• Anotasi (komentar)
• Garis Alur

Selain bagian-bagian diatas Pagonila juga menambahkan proses khusus API Call.

Komponen Native

Untuk mengubah teks pada komponen, double click pada komponen, input editor akan muncul. Klik dimana saja pada kanvas untuk menutup input editor. Untuk menarik garis antar komponen flowchart, arahkan kursor pada komponen, lalu tampilan bantuan titik-titik awal garis akan muncul, tarik garis dari salah satu titik tersebut lalu arahkan ke komponen tujuan.

API Call

API Call terdiri dari tiga bagian, yaitu:

• Metode (method, mis: POST, GET, ...)
• Endpoint
• Ringkasan atau penjelasan

Untuk mengubah metode, double klik pada area metode lalu metode akan berubah ke metode berikutnya dengan urutan sbb: GET → PATCH → POST → PUT → DELETE → berulang kembali ke GET dst.

Filesystem

Filesystem terdiri dari folder dan file flowchart. Setiap file flowchart merepresentasikan sebuah kanvas yang dapat berisi satu atau lebih flowchart. File flowchart dapat dibuka dengan men-double click file flowchart.

Kanvas

Komponen yang ada pada kanvas dapat dipilih, diperbesar/diperkecil (scale), digeser, dan diduplikasi. Untuk menggeser kanvas, klik pada area kanvas, tahan klik sambil geser kanvas ke arah yang diinginkan.

Best Practice

Representasi Proses Frontend

Flowchart Pagonila dapat digunakan untuk tujuan apapun, namun jika dilihat dengan motivasi Pagonila, flowchart sebaiknya digunakan untuk merepresentasikan proses yang terjadi pada frontend. Pisahkan file pada filesystem kanvas per halaman frontend.

Gunakan API Call

Pada setiap halaman yang terdapat pada frontend, kemungkinan akan terdapat proses pengambilan data dari backend melalui API. Gunakan bagan API Call untuk merepresentasikan API. Proses API Call tersebut akan diekstraksi di tahap API Specification dan menjadi library ketika di-deploy.