Flutter Case Study: Network Profiling Menggunakan Dart DevTools

Memanfaatkan Dart DevTools untuk mengamati Network Traffic pada aplikasi Flutter

Rizki M.
Rizki M.
Jan 5 · 4 min read

Ketika mengembangkan sebuah aplikasi mobile, seringkali developer juga memerlukan request data dari web server, yang mana umumnya menggunakan REST API. Proses ini membutuhkan HTTP Request dari Backend Server melalui URI yang sudah ditentukan.

Namun ketika Request API dilakukan, ada beberapa hal yang perlu diperhatikan. Bagaimana caranya developer dapat memastikan bahwa Response yang diterima sudah sesuai seperti yang diharapkan? apakah HTTP Method nya sudah tepat? apa Status Code yang diberikan? apakah URI nya benar? dan masih banyak lagi pertanyaan lainnya.

Ada banyak cara dan metode yang dapat digunakan untuk mengetahui hal tersebut. Salah satunya adalah dengan menggunakan sebuah tools yang disediakan oleh Dart dan Flutter, yaitu Dart DevTools.

Mengenal Dart DevTools

Dart DevTools adalah sekumpulan tools performance dan debugging untuk aplikasi Flutter dan Dart yang berjalan di browser. Tools ini tersedia di Android Studio, Intellij, Visual Studio Code, dan juga dapat di install melalui perintah flutter atau pub pada command line.

Sumber : Dokumentasi Flutter

Berikut ini adalah beberapa hal yang dapat dilakukan menggunakan Dart DevTools:

  • Inspect Layout UI dan State dari aplikasi Flutter
  • Diagnosa isu performa dan UI jank pada aplikasi Flutter.
  • CPU profiling pada aplikasi Flutter atau Dart.
  • Network profiling pada aplikasi Flutter.
  • Source-level debugging pada aplikasi Flutter atau Dart.
  • Debug isu memori pada aplikasi Flutter atau Dart.
  • Menampilkan general log dan diagnostics information dari aplikasi Flutter atau Dart yang sedang berjalan.
  • Menganalisa kode dan ukuran dari aplikasi.

Network Profiling Menggunakan Dart DevTools

Artikel ini akan khusus membahas fitur Dart DevTools yang terdapat pada halaman Network View. Network View memiliki fitur yang memungkinkan anda untuk memeriksa atau meng-inspect traffic HTTP, HTTPS, dan Web Socket pada aplikasi Flutter atau Dart.

Sumber : Dokumentasi Flutter

Ketika halaman network pertama kali dibuka, secara otomatis Network Traffic sudah di-record secara default. Jika belum, klik tombol Record Network Traffic di bagian kiri-atas halaman untuk memulai polling/recording.

Halaman ini terbagi menjadi dua bagian utama. Bagian sebelah kiri menampilkan tabel dari network request yang dilakukan, dan bagian sebelah kanan menampilkan detail informasi dari network request yang dipilih. Informasi yang ditampilkan berupa link uri, method, status, timing, headers, response, dan sebagainya. Anda juga dapat menggunakan fitur search dan filter di bagian kanan-atas halaman.

Studi Kasus Pada Aplikasi

Studi kasus ini akan diterapkan pada salah satu project yang sedang dikerjakan oleh tim DOT Indonesia yaitu aplikasi mobile AyooMall. Pada aplikasi ini telah diterapkan sebuah fitur caching pada halaman keranjang/cart. Pengguna yang telah login akan melihat data isi keranjang melalui request GET menggunakan API, sedangkan pengguna yang tidak login akan mendapat data isi keranjang melalui local storage.

Disini penulis akan menggunakan Dart Devtools untuk memastikan dan melihat apakah fitur ini sudah berjalan dengan baik atau tidak:

Membuka halaman keranjang tanpa login
Membuka halaman keranjang setelah login

Berdasarkan proses diatas, dapat dilihat bahwa ketika halaman keranjang diakses maka aplikasi akan melakukan request GET untuk menampilkan isi barang pada keranjang dan produk serupa. Ketika halaman keranjang diakses tanpa login, maka request untuk menampilkan produk serupa akan gagal dan memberi response status code 401, namun tetap menampilkan data isi keranjang secara otomatis melalui local storage. Ketika halaman keranjang diakses setelah login, request pada halaman tersebut sukses dan memberikan response code 200 untuk data isi keranjang dari akun user tersebut dan produk serupa.

Kesimpulan

Dart DevTools merupakan tools yang sangat berguna bagi developer flutter dan dart yang memerlukan debugging dan inspeksi aplikasi menjadi lebih efisien. Fitur network view merupakan salah satu pilihan yang tepat bagi developer yang ingin melakukan inspect pada traffic dari setiap proses networking yang berjalan pada aplikasi anda, sehingga informasi network yang umumnya kita perlukan seperti HTTP Method, Response, Status Code, URI, dan informasi relevan lainnya dapat kita ketahui dengan lebih mudah.

Alih-alih menggunakan method print() untuk menampilkan log request dan response pada console, anda hanya perlu membuka Dart DevTools dan semua informasi yang anda butuhkan sudah ditampilkan melalui GUI yang lebih menarik. Bagaimana pendapat anda? Apakah tertarik untuk mencoba Dart DevTools?

Referensi

DOT Intern

Artikel dari para peserta DOT Internship

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store