Siapa disini masih kesusahan buat user flow diagram? atau kalian males? sama admin juga wkwk. Kali ini gue bakalan bahas langsung aja, bagaimana caranya ngebuat user flow diagram mudah banget, oiya gue ngasih tau cara ini untuk kalian yang lagi ada PR atau tugas untuk ngebuat diagram – diagram yang diperluin ngebuat ato ngerancang suatu aplikasi.
Karena biasanya disetiap pengembangan aplikasi atau semacamnya kita perlu nampilin diagram yang bisa ngebantu pengguna mengerti apa yang lagi kita buat begituya. Nah User Flow Diagram ini nantinya ngebantu sipengguna buat memahami alur yang bisa dilakukan saat penggunaan langsung si aplikasi baik masih prototipe ataupun sudah jadi.
Metode yang Digunakan
Oke, metode yang gue pake adalah penggunaan browser sebagai medianya karena aplikasi yang lagi gue bangun udah sampe tahap implementasi/prototipenya, aplikasinya udah bisa dipake nih, tinggal kita pake aja tapi masih kasar gitulah istilahnya. Terus AI nantinya yang bakalan terjemahin LOG yang bakalan dihasilin si browser yang kita pake, lanjut ke tahap pembuatan diagramnya nantinya kita bakalan masuk ke halaman “plantUML” nama webnya berguna buat diagram secara otomatis hasil dari terjemahan AI.
Catatan Awal
Catatan dulu : karena aplikasi gue udah jadi bisalangsung praktek, gmna kalo belum? kalian bisa cari website yang serupa halamanya juga fungsinya, karena kkita bakalan ngerekam jejak apa yang nantinya kita lakuin diseuatu website, terus dijadiin LOG JSON si hasil rekamnya.
Langkah-Langkah Membuat User Flow Diagram
Pertama
- Buka projek aplikasi kalian di browser,
- terus klik kanan pilih inspek,
- terus pilih/cari tulisan recorder (gue pake browser chrome),
- kalo engga muncul tulisan recorder klik dulu tombol (+) nanti muncul banyak pilihan dan klik yang recorder.
Kedua
- Kalian Create recording dulu terus kasih nama dah tuh si kolomnya.
Ketiga
- Kalian klik tombol record yang warnanya merah.
Keempat
- Kalian gausah buru – buru disni, oiya kalian ketika mau klik tombol record, harus inget sudah dihalamanya langsung, udah record dan udah siap? kalian tinggal lakuin yang harunya kalian lakuin aja.
- Contoh nih: gue mau login ke akun admin di halaman login, kalian tinggal klik tuh kolom id sama password terus login udah deh.
Kelima
- Kalian ulangi tahap keempat untuk fungsional lainnya, jangan dibuat dalam satu record.
- Contoh : fungsi login dipisah dengan fungsi lainnya, kaya menambahkan gambar dsb dibuat terpisah recordnya.
Keenam
- kalian end record/selesai rekam, terus kalian download filenya pilih yang JSON.
Ketujuh
- kalian buka website AI gpt/grok dsb,
- kalo gue masukin prompt kaya gini : “ubah file JSON menjadi kode plantUML untuk diagram user flow”. Oiya file JSONnya bisa kalian dragnDrop atau buka dulu filenya terus copy paste isinya ya.
Kedelapan
- kalian buka website plantUMLnya pilih online server, terus copy paste aja langsung jawaban dari AInya, nanti otomatis diagramnya dibuat. Buumm eZ banget bang.
Penutup
Sudah dicoba belum gaes? coba dah gampang kok, kita bisa buat variasi juga di plantumlnya ini sekreatif kita aja ini. Sebelumnya admin kasih tau penggunaan AI ini sah aja kalo masih ditahap ngebantu kita bukan generate dari 0 banget.
Disini admin udah tentuin dari awal alurnya bagaimana dalam hal penggunaan aplikasinya, admin cuma mau kasih tau bagaimana caranya ngebuat diagram dengan cepat karena banyak banget PR ngebuat diagramnya wkwkwk, begitu saja sih gaes semoga bisa ngebantu kalo misalkan masih belum ngerti minta dibuatin versi videonya kasih tau dikolom komentar ya :).