Tugas PBP (Flutter) - Aliyah Faza Qinthara

Contents

• Tugas 7: Elemen Dasar Flutter
• Tugas 8: Flutter Navigation, Layouts, Forms, and Input Elements
• Tugas 9: Integrasi Layanan Web Django dengan Aplikasi Flutter

Tugas 7: Elemen Dasar Flutter

Apa perbedaan utama antara stateless dan stateful widget dalam konteks pengembangan aplikasi Flutter?

Stateless widget tidak memiliki state class sehingga perubahan yang mungkin terjadi pada widget ini hanya akan bergantung dari event yang ada di parent widget-nya, sedangkan stateful widget memiliki state class yang mewakili current state widget ini sehingga kejadian yang terjadi pada widget jenis ini tidak bergantung pada widget lain.

Sebutkan seluruh widget yang kamu gunakan untuk menyelesaikan tugas ini dan jelaskan fungsinya masing-masing.

1. Widget MaterialApp: menginisiasi aplikasi Flutter dan menentukan tema tampilan awal
2. Widget MyApp: aplikasi itu sendiri
3. Widget Scaffold: membuat kerangka halaman yang mengandung AppBar dan body
4. Widget AppBar: membuat AppBar
5. Widget SingleChildScrollView: memungkinkan kontennya untuk di-scroll
6. Widget Padding: menambahkan padding
7. Widget Column: mengatur widget child-nya secara vertikal
8. Widget GridView.count: membuat tata letak grid sesuai dengan jumlah kolom
9. Widget ShopCard: kartu untuk menampilkan item
10. Widget Text: menampilkan teks
11. Widget Material: mengaplikasikan material design pada kontennya
12. Widget InkWell: membuat area yang merespon sentuhan
13. Widget ScaffoldMessenger: memunculkan SnackBar
14. Widget Container: mengelompokkan widget
15. Widget Icon: menampilkan icon

Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step (bukan hanya sekadar mengikuti tutorial)

Pertama, saya membuat direktori baru untuk membuat aplikasi Flutter, melakukan git init, serta menghubungkan repositori lokal dengan repositori baru di GitHub. Selanjutnya, saya membuat menu.dart dan mengubah sifat widget yang ada menjadi stateless. Lalu, saya mendefinisikan sebuah class untuk menampilkan card dan melakukan beberapa perubahan widget seperti pada tutorial. Terakhir, saya juga menambahkan beberapa font custom dan menyesuaikan kode dengan hasil tampilan yang saya inginkan.

Tugas 8: Flutter Navigation, Layouts, Forms, and Input Elements

Jelaskan perbedaan antara Navigator.push() dan Navigator.pushReplacement(), disertai dengan contoh mengenai penggunaan kedua metode tersebut yang tepat!

Perbedaan kedua method tersebut terletak pada apa yang dilakukan kepada route yang berada pada atas stack. push() akan menambahkan route baru di atas route yang sudah ada pada atas stack, sedangkan pushReplacement() menggantikan route yang sudah ada pada atas stack dengan route baru tersebut. Pada aplikasi ini, pushReplacement() digunakan saat mengarahkan ke halaman Add Item dari drawer. Saat kita ingin kembali dari halaman Add Item, tentu drawer tidak perlu terbuka dan kita ingin langsung ke halaman utama. Sementara itu, pada shop_card.dart, kita menggunakan push() karena setelah kita ke halaman Add Item, kita ingin kembali lagi ke halaman utama.

Jelaskan masing-masing layout widget pada Flutter dan konteks penggunaannya masing-masing!

1. Column: Widget ini mengatur anak-anaknya dalam susunan vertikal, satu di bawah yang lain. Widget ini cocok digunakan ketika kita ingin menampilkan elemen-elemen dalam satu kolom. Contoh penggunaannya adalah ketika kita ingin menampilkan daftar item dalam bentuk vertikal.
2. Row: Widget ini mengatur anak-anaknya dalam susunan horizontal, satu di samping yang lain. Widget ini cocok digunakan ketika kita ingin menampilkan elemen-elemen dalam satu baris. Contoh penggunaannya adalah ketika kita ingin menampilkan tombol navigasi dalam satu baris.

Sebutkan apa saja elemen input pada form yang kamu pakai pada tugas kali ini dan jelaskan mengapa kamu menggunakan elemen input tersebut!

1. TextFormField: Widget ini digunakan untuk membuat input field di dalam form. Widget ini memiliki properti decoration yang digunakan untuk menentukan tampilan input field, properti onChanged yang digunakan untuk menangani perubahan nilai input field, dan properti validator yang digunakan untuk mengecek apakah input field sudah diisi atau belum.
2. Form: Widget ini digunakan untuk membuat form di dalam aplikasi. Pada kode saya, Form digunakan untuk mengelompokkan elemen-elemen form, dan memiliki properti key yang digunakan untuk mengidentifikasi form, dan properti child yang digunakan untuk menampung elemen-elemen form.

Bagaimana penerapan clean architecture pada aplikasi Flutter?

Pada Clean Architecture, aplikasi dibagi menjadi beberapa lapisan, yaitu:

1. Domain Layer: Lapisan ini berisi bisnis logic dan model data dari aplikasi.
2. Application Layer: Lapisan ini mengimplementasikan use case dari aplikasi dan menghubungkan lapisan infrastruktur dan presentasi.
3. Infrastructure Layer: Lapisan ini berhubungan dengan interaksi aplikasi dengan dunia luar, seperti database, web server, dan user interface.
4. Presentation Layer: Lapisan ini berisi kode yang merender user interface dan mengatur request dan response.

Penerapan Clean Architecture pada aplikasi Flutter dapat dilakukan dengan memisahkan kode menjadi beberapa package yang masing-masing merepresentasikan lapisan-lapisan tersebut. Hal ini dapat membantu mempermudah pengembangan aplikasi, meningkatkan fleksibilitas, dan memudahkan pemeliharaan kode.

Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step! (bukan hanya sekadar mengikuti tutorial)

Pertama, saya membuat kode untuk left drawer dan memasukkannya ke menu.dart. Kedua, saya membuat shoplist_form.dart dan menambahkan left drawer yang sudah dibuat tadi juga. Tentunya, saya melengkapi routing serta impor package agar drawer dapat diakses dari halaman utama maupun halaman form, dan sebaliknya.

Tugas 9: Integrasi Layanan Web Django dengan Aplikasi Flutter

Apakah bisa kita melakukan pengambilan data JSON tanpa membuat model terlebih dahulu? Jika iya, apakah hal tersebut lebih baik daripada membuat model sebelum melakukan pengambilan data JSON?

Ya, kita bisa melakukan pengambilan data JSON tanpa membuat model terlebih dahulu. Namun, ada beberapa keuntungan dalam membuat model data terlebih dahulu:

1. Validasi Data: Model data dapat membantu dalam memvalidasi data JSON yang diterima. Jika data tidak sesuai dengan model, maka akan muncul error, sehingga kita bisa mengetahui jika ada data yang tidak sesuai atau tidak lengkap.
2. Kemudahan Akses: Dengan model data, kita bisa mengakses properti data dengan lebih mudah dan kode akan lebih mudah dibaca.
3. Dokumentasi: Model data juga berfungsi sebagai dokumentasi, memberikan gambaran tentang struktur data yang diharapkan.

Jelaskan fungsi dari CookieRequest dan jelaskan mengapa instance CookieRequest perlu untuk dibagikan ke semua komponen di aplikasi Flutter.

CookieRequest adalah kelas yang digunakan untuk mengirim permintaan HTTP dengan cookie. Dalam aplikasi Flutter, CookieRequest dapat digunakan untuk mengirim permintaan HTTP dengan cookie yang diperoleh dari server.

Instance CookieRequest perlu dibagikan ke semua komponen di aplikasi Flutter karena ini memungkinkan penggunaan cookie yang sama di seluruh aplikasi. Dengan cara ini, kita dapat memastikan bahwa setiap permintaan HTTP yang dibuat oleh aplikasi menggunakan cookie yang sama. Ini sangat penting dalam aplikasi yang memerlukan autentikasi, di mana cookie digunakan untuk mengidentifikasi pengguna yang terautentikasi.

Jelaskan mekanisme pengambilan data dari JSON hingga dapat ditampilkan pada Flutter.

Untuk membuat model yang menyesuaikan dengan data JSON, kita dapat memanfaatkan website Quicktype. Selanjutnya, untuk melakukan perintah HTTP request, kita install package tambahan yakni package http. Pada file android/app/src/main/AndroidManifest.xml, modifikasi kode untuk memperbolehkan akses Internet pada aplikasi Flutter yang sedang dibuat. Terakhir, melakukan fetch data dari Django.

Jelaskan mekanisme autentikasi dari input data akun pada Flutter ke Django hingga selesainya proses autentikasi oleh Django dan tampilnya menu pada Flutter.

1. Flutter mengirimkan data akun ke Django melalui API call.
2. Django menerima data akun dan memeriksa apakah data tersebut valid atau tidak.
3. Jika data akun valid, Django akan menghasilkan token akses dan mengirimkannya kembali ke Flutter melalui API call.
4. Flutter menerima token akses dan menyimpannya di local storage.
5. Flutter mengirimkan token akses ke Django melalui API call setiap kali meminta data yang memerlukan autentikasi.
6. Django memeriksa token akses dan memastikan bahwa token akses tersebut valid.
7. Jika token akses valid, Django akan mengembalikan data yang diminta ke Flutter melalui API call.
8. Flutter menerima data yang diminta dan menampilkannya pada menu.

Sebutkan seluruh widget yang kamu pakai pada tugas ini dan jelaskan fungsinya masing-masing.

1. Provider: Widget yang digunakan untuk membagikan objek ke dalam pohon widget.
2. MaterialApp: Widget yang digunakan untuk membuat aplikasi Flutter dengan tema material design.
3. Scaffold: Widget yang digunakan untuk membuat struktur dasar aplikasi material design.
4. AppBar: Widget yang digunakan untuk membuat AppBar.
5. Container: Widget yang digunakan untuk membuat kotak yang dapat diatur ukurannya.
6. Column: Widget yang digunakan untuk mengatur widget dalam kolom vertikal.
7. TextField: Widget yang digunakan untuk membuat input teks.
8. SizedBox: Widget yang digunakan untuk membuat kotak kosong dengan ukuran tertentu.
9. ElevatedButton: Widget yang digunakan untuk membuat tombol dengan tampilan yang lebih menonjol.
10. AlertDialog: Widget yang digunakan untuk membuat dialog dengan tombol OK.
11. ScaffoldMessenger: Widget yang digunakan untuk menampilkan pesan pada layar.

Jelaskan bagaimana cara kamu mengimplementasikan checklist di atas secara step-by-step! (bukan hanya sekadar mengikuti tutorial).

Pertama, buat aplikasi authentication di Django. Buat views.py dan urls.py di aplikasi baru. Selanjutnya, install package untuk autentikasi dan modifikasi root widget untuk buat CookieRequest. Lalu, buat halaman login.dart. Lanjut, buat model kustom menggunakan Quicktype, menambahkan dependensi http dan melakukan fetch data dari Django. Selanjutnya, membuat fungsi create_product_flutter di Django dan memodifikasi shoplist_form.dart untuk mengintegrasi form Flutter dengan layanan Django. Lalu, saya mengimplementasikan fitur logout dan diakhiri dengan membuat product_detail.dart serta menghubungkannya dari halaman daftar produk agar user diarahkan ke halaman baru saat memilih produk spesifik di halaman daftar produk.