Platform-Based Programming: Individual Assignment with Flutter

NAME	ID	PBP CLASS
Sultan Ibnu Mansiz	2306275840	D

Pada tugas ini, saya membuat suatu projek aplikasi mobile e-commerce sederhana bernama "Second Chapters <3" dengan ide menjual buku-buku bekas. Saya menggunakan framework Flutter untuk membangun dan mengembangkan projek ini.

Assignment 9: Django Web Service Integration with Flutter App

Checklist Tugas

• Memastikan deployment proyek tugas Django kamu telah berjalan dengan baik.

• Mengimplementasikan fitur registrasi akun pada proyek tugas Flutter.

• Membuat halaman login pada proyek tugas Flutter.

• Mengintegrasikan sistem autentikasi Django dengan proyek tugas Flutter.

• Membuat model kustom sesuai dengan proyek aplikasi Django.

• Membuat halaman yang berisi daftar semua item yang terdapat pada endpoint JSON di Django yang telah kamu deploy.

  • Tampilkan name, price, dan description dari masing-masing item pada halaman ini.

• Membuat halaman detail untuk setiap item yang terdapat pada halaman daftar Item.

  • Halaman ini dapat diakses dengan menekan salah satu item pada halaman daftar Item.

  • Tampilkan seluruh atribut pada model item kamu pada halaman ini.

  • Tambahkan tombol untuk kembali ke halaman daftar item.

• Melakukan filter pada halaman daftar item dengan hanya menampilkan item yang terasosiasi dengan pengguna yang login.

• Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).

Jelaskan mengapa kita perlu membuat model untuk melakukan pengambilan ataupun pengiriman data JSON? Apakah akan terjadi error jika kita tidak membuat model terlebih dahulu?

Model itu penting buat menjaga data tetap rapi dan konsisten. Selain itu, model juga otomatis ngecek validasi data, jadi lebih gampang buat dirawat. Dengan model, kita bisa menghindari error, seperti parsing yang salah atau field yang kelupaan.

Jelaskan fungsi dari library http yang sudah kamu implementasikan pada tugas ini

Library http dipakai untuk melakukan permintaan HTTP seperti GET atau POST, mengelola pengiriman dan penerimaan data dalam format JSON, serta menangani autentikasi lewat header.

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

CookieRequest digunakan untuk mengelola cookies secara otomatis dalam autentikasi berbasis sesi. Ini memastikan sesi tetap konsisten di setiap permintaan, mempermudah pengelolaan autentikasi, dan membuat aplikasi lebih efisien. Dengan membagikan CookieRequest, kita bisa menjaga autentikasi tetap stabil tanpa perlu membuat instance baru, sehingga pengelolaannya jadi lebih simpel di seluruh aplikasi.

Jelaskan mekanisme pengiriman data mulai dari input hingga dapat ditampilkan pada Flutter.

Prosesnya dimulai saat pengguna memasukkan data lewat aplikasi Flutter. Data ini lalu diubah jadi format JSON biar gampang dikirim ke backend. Flutter pakai HTTP buat ngirim data itu ke server, di mana backend mengolah untuk simpan ke database atau menjalankan logika tertentu. Setelah selesai, server akan ngirim respons balik, biasanya dalam format JSON. Flutter nerima respons ini, ngolah datanya, dan memperbarui tampilan di aplikasi biar pengguna bisa lihat hasil input mereka atau info lain yang dibutuhkan.

Jelaskan mekanisme autentikasi dari login, register, hingga logout. Mulai dari input data akun pada Flutter ke Django hingga selesainya proses autentikasi oleh Django dan tampilnya menu pada Flutter.

Proses autentikasi dimulai ketika data akun dari Flutter dikirim ke backend Django. Django memvalidasi data tersebut, baik untuk login (dengan membuat session) atau register (dengan menyimpan data pengguna baru). Setelah validasi selesai, Django mengirimkan respons kembali ke Flutter, seperti status autentikasi atau pesan tertentu. Flutter kemudian memproses respons ini dan memperbarui UI sesuai dengan status autentikasi, misalnya menampilkan menu utama jika login berhasil atau pesan error jika ada kesalahan.

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

• Implementasi fitur registrasi, login, dan integrasi autentikasi pada projek Django untuk Flutter

  Saya melakukan setup autentikasi pada projek Django yang sebelumnya saya buat denga membuat aplikasi baru beranama authentication. lalu pada views.py di aplikasi authentication, saya menambahkan metode view untuk mengakses tampilan register dan login. Setelah saya membuat metode view, saya melakukan routing di urls.py terhadap kedua metode yang saya buat. Lalu, pada direkotori screensyang berada di projek Flutter saya, saya membuat dua buah file baru, yaitu login.dart dan register.dart.

• Membuat model kustom yang sesuai dengan projek Django

  Untuk membuat model kustom yang sesuai dengan proyek Django, ambil data JSON dari proyek tersebut dan buka website QuickType. Pilih bahasa Dart dan beri nama Model yang sesuai dengan kebutuhan. Setelah itu, salin hasil konversi dari QuickType dan tempelkan ke dalam file di folder models di projek Flutter.

• Membuat halaman yang berisi daftar semua item yang terdapat pada endpoint JSON di Django yang telah kamu deploy.

  Ambil semua data JSON yang dimiliki oleh pengguna (yang sudah diimplementasikan di Django), kemudian simpan data tersebut ke dalam sebuah list untuk memudahkan pengolahan atau penampilannya. Setelah dikumpulkan ke dalam list, tampilkan data-data tersebut dengan ListView.

• Membuat halaman detail untuk setiap item yang terdapat pada halaman daftar Item.

  Saya tiap item pada halaman yang menampilkan seluruh data dapat dipencet dan akan mengarahkan ke halaman baru yang akan menampilkan informasi mengenai item yang dipencet tersebut. Halaman yang saya buat saya berikan nama product_info.dart dan saya letakkan di dalam direkotori screens.

• Melakukan filter pada halaman daftar item dengan hanya menampilkan item yang terasosiasi dengan pengguna yang login.

  Sudah dilakukan pada implementasi django.

• Melakukan add-commit-push ke GitHub.

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

Checklist Tugas

• Membuat minimal satu halaman baru pada aplikasi, yaitu halaman formulir tambah item baru dengan ketentuan sebagai berikut:

  • Memakai minimal tiga elemen input, yaitu name, amount, description. Tambahkan elemen input sesuai dengan model pada aplikasi tugas Django yang telah kamu buat.

  • Memiliki sebuah tombol Save.

  • Setiap elemen input di formulir juga harus divalidasi dengan ketentuan sebagai berikut:

    • Setiap elemen input tidak boleh kosong.

    • Setiap elemen input harus berisi data dengan tipe data atribut modelnya.

• Mengarahkan pengguna ke halaman form tambah item baru ketika menekan tombol Tambah Item pada halaman utama.

• Memunculkan data sesuai isi dari formulir yang diisi dalam sebuah pop-up setelah menekan tombol Save pada halaman formulir tambah item baru.

• Membuat sebuah drawer pada aplikasi dengan ketentuan sebagai berikut:

• Drawer minimal memiliki dua buah opsi, yaitu Halaman Utama dan Tambah Item.

• Ketika memiih opsi Halaman Utama, maka aplikasi akan mengarahkan pengguna ke halaman utama.

• Ketika memiih opsi Tambah Item, maka aplikasi akan mengarahkan pengguna ke halaman form tambah item baru.

• Menjawab beberapa pertanyaan berikut pada README.md pada root folder (silakan modifikasi README.md yang telah kamu buat sebelumnya; tambahkan subjudul untuk setiap tugas).

Apa kegunaan const di Flutter? Jelaskan apa keuntungan ketika menggunakan const pada kode Flutter. Kapan sebaiknya kita menggunakan const, dan kapan sebaiknya tidak digunakan?

Kegunaan const di Flutter adalah untuk mendeklarasikan data yang tidak berubah-ubah. Lebih lanjut, nilai pada variabel const ditentukan pada saat sebelum program dijalankan dan tidak dapat menerima data saat runtime. Salah satu keuntungan penggunaan const adalah untuk mengoptimalan performa dan efisiensi memori karena program tidak perlu merender ulang widget yang ditandai sebagai const ketika ada perubahan di route yang memengaruhi widget tersebut.

• Kapan sebaiknya menggunakan const?

  Ketika kita tahu nilai dari suatu widget tidak akan berubah saat runtime.

    child: const Column(
      children: [
        ...
      ]
    )

  Nilai const di atas diambil dari widget LeftDrawer yang menampilkan sesuatu yang konstan dan tidak akan berubah.

• Kapan sebaiknya tidak menggunakan const?

  Jangan gunakan const pada widget yang variabel datanya dapat berubah saat runtime, salah satu contohnya adalah variabel dari user input.

    ...
    children: [
      Text('Title: $_title'),
      Text('Author: $_author'),
      Text('Price: $_price'),
      Text('Description: $_desc'),
    ],
    ...

  Variabel-variabel di atas dapat berubah sesuai apa yang diinput oleh user.

Jelaskan dan bandingkan penggunaan Column dan Row pada Flutter. Berikan contoh implementasi dari masing-masing layout widget ini!

Courtesy of https://medium.com/@apmntechdev/flutter-column-and-row-e1f35b419690

Pada Flutter, Column dan Row adalah dua widget layout yang sering digunakan untuk menata elemen-elemen dalam tampilan secara vertikal dan horizontal. Di bawah ini adalah penjelasan singkat tentang keduanya serta contoh implementasinya.

• Column

Menyusun widget child secara vertikal dari atas ke bawah. Biasanya digunakan saat ingin menampilkan item atau elemen dalam urutan vertikal, seperti daftar, form input, atau informasi yang berurutan.

• Row

Menyusun widget child secara horizontal dari kiri ke kanan. Biasanya digunakan ketika Anda ingin menampilkan beberapa item dalam baris yang sama, seperti ikon-ikon, tombol-tombol, atau elemen informasi yang berdampingan.

  ...
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      // Row untuk menampilkan 3 InfoCard secara horizontal.
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          InfoCard(title: 'NPM', content: npm),
          InfoCard(title: 'Name', content: name),
          InfoCard(title: 'Class', content: className),
        ],
      ),
    ...
    ]
  )

Kode di atas merupakan implementasi Column dan Row yang saya gunakan di dalam projek Flutter saya yang berada pada widget MyHomePage.

Sebutkan apa saja elemen input yang kamu gunakan pada halaman form yang kamu buat pada tugas kali ini. Apakah terdapat elemen input Flutter lain yang tidak kamu gunakan pada tugas ini? Jelaskan!

Pada tugas kali ini, saya hanya mengimplementasikan satu tipe elemen input, yaitu TextFormField. Selain TextFormField, ada beberapa elemen input lain, seperti Checkbox yang memungkinkan pengguna untuk memilih satu opsi dari beberapa pilihan, Slider yang memungkinkan pengguna memilih nilai dari rentang tertentu, dsb.

Bagaimana cara kamu mengatur tema (theme) dalam aplikasi Flutter agar aplikasi yang dibuat konsisten? Apakah kamu mengimplementasikan tema pada aplikasi yang kamu buat?

Cara saya mengatur tema dalam mengembangkan aplikasi Flutter saya adalah dengan menyesuaikan apa yang telah saya buat sebelumnya pada projek Django. Untuk membuat aplikasi Flutter yang konsisten, kita perlu menyesuaikan komponen-komponen tampilan, seperti teks, warna, icon, dan tombol agar sesuai dengan tema yang kita bawa.

Bagaimana cara kamu menangani navigasi dalam aplikasi dengan banyak halaman pada Flutter?

Pertama, saya membuat sebuah direktori baru bernama screens khusus untuk menyimpan file-file yang sekiranya akan ditampilkan pada aplikasi. Untuk melakukan navigasi perpindahan dari satu halaman ke halaman yang lain, saya menggunakan fungsi push(), pop(), dan pushReplacement() yang diimplementasikan pada sebuah ikon ataupun tombol sebagai event handler.

Contoh, saya mempunyai sebuah widget bernama MyHomePage pada file menu.dart yang dapat diakses ketika user memencet ikon yang ada pada drawer.

  ListTile(
    leading: const Icon(Icons.home_outlined),
    title: const Text('Halaman Utama'),
    // Bagian redirection ke MyHomePage
    onTap: () {
      Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            builder: (context) => MyHomePage(),
          ));
    },
  ),

Ketika ikon ataupun teks di atas dipencet, tampilan akan berubah menjadi halaman widget MyHomePage() dengan menggunakan fungsi pushReplacement()sebagai navigasi ke halaman baru.

• Melakukan add-commit-push ke GitHub.

Assignment 7: Flutter Basic Elements

Checklist Tugas

• Membuat sebuah program Flutter baru dengan tema E-Commerce yang sesuai dengan tugas-tugas sebelumnya.

• Membuat tiga tombol sederhana dengan ikon dan teks untuk:

  • Melihat daftar produk (Lihat Daftar Produk))

  • Menambah produk (Tambah Produk)

  • Logout (Logout)

• Mengimplementasikan warna-warna yang berbeda untuk setiap tombol (Lihat Daftar Produk, Tambah Produk, dan Logout).

• Memunculkan Snackbar dengan tulisan:

  • "Kamu telah menekan tombol Lihat Daftar Produk" ketika tombol Lihat Daftar Produk ditekan.

  • "Kamu telah menekan tombol Tambah Produk" ketika tombol Tambah Produk ditekan.

  • "Kamu telah menekan tombol Logout" ketika tombol Logout ditekan.

• Menjawab beberapa pertanyaan berikut pada README.md pada root folder.

Jelaskan apa yang dimaksud dengan Stateless Widget dan Stateful Widget, dan jelaskan perbedaan dari keduanya!

• Stateless Widget

  Stateless Widget adalah jenis widget yang tidak berubah dari state internal yang dapat berubah seiring waktu. Artinya, tampilan dari widget ini akan tetap sama setelah pertama kali dibangun. Stateless Widget hanya memiliki properti final yang akan ditampilkan di layar. Pada tugas kali ini, saya menggunakan Stateless Widget untuk membuat kelas InfoCard dan ItemCard yang mana kedua kelas tersebut menampilkan widget yang statis dan tidak akan berubah.

• Stateful Widget

  Stateful Widget adalah jenis widget yang memiliki state internal yang dapat berubah seiring waktu. Perubahan pada state akan menyebabkan widget tersebut membangun ulang atau merubah tampilannya.

Salah satu perbedaan utama antara Stateless Widget dan Stateful Widget adalah dalam hal menampilkan widget pada aplikasi kita. Gunakan Stateless Widget ketika kita ingin menampilkan widget yang sederhana dan statis, seperti gambar dan teks. Gunakan Stateful Widget ketika kita ingin menampilkan widget yang dapat berubah seiring interaksi dengan user, seperti form dan list.

Sebutkan widget apa saja yang kamu gunakan pada proyek ini dan jelaskan fungsinya!

Dalam tugas kali ini, saya membuat dua buah stateless widget yang saya implementasikan dalam kelas InfoCard dan ItemCard. Widget pada kelas InfoCard berfungsi untuk menampilkan data diri saya, seperti nama, npm, dan kelas. Widget pada kelas ItemCard berfungsi untuk menampilkan tiga buah button card. Untuk tugas kali ini, tiga buah button card tersebut hanya berfungsi untuk menampilkan snackbar ketika diklik.

Apa fungsi dari setState()? Jelaskan variabel apa saja yang dapat terdampak dengan fungsi tersebut!

Singkatnya, setState() berfungsi untuk memberi tahu framework bahwa ada perubahan pada suatu variabel di dalam widget. Perubahan tersebut mengharuskan tampilan untuk diperbarui agar sesuai dengan perubahan data. Variabel-variabel yang terdampak dari fungsi setState() di antaranya adalah variabel yang ada di kelas Stateful Widget dan database sesuai dengan perubahan apa yang terjadi (menampilkan data atau menambahkan data).

Jelaskan perbedaan antara const dengan final!

const dan final sama-sama digunakan untuk mendeklarasikan data yang tidak dapat diubah. Perbedaan utama keduanya adalah:

• const

  Nilai pada variabel const harus ditentukan sebelum program dijalankan dan tidak dapat menerima nilai yang dihasilkan saat runtime.

    const pi = 3.14159;

• final

  Nilai pada variabel final dapat ditentukan baik saat waktu runtime maupun sebelum. Ketika nilai variabelnya ditentukan, hal tersebut hanya dapat dilakukan sekali dan tidak akan berubah.

    class ItemHomepage {
      // Kedua variabel di bawah akan diinisialisasi saat runtime
      final String name;
      final IconData icon;
  
      ItemHomepage(this.name, this.icon);
    }

Jelaskan bagaimana cara kamu mengimplementasikan checklist-checklist di atas!

• Pertama, saya membuat projek Flutter baru dengan menjalankan command di bawah.

    flutter create pre_loved_books

• Untuk membuat tiga tombol sederhana dengan ikon dan teks, saya membuat file baru bernama menu.dart yang saya isi dengan kelas benama ItemCard. Kelas ItemCard akan menerima 2 buah variabel, yaitu item yang digunakan untuk menginisialisai nama card dan icon, dan backgroundColor sebagai warna untuk masing-masing card yang dibuat.

  class ItemCard extends StatelessWidget {
    // Menampilkan kartu dengan ikon dan nama.
    final ItemHomepage item;
    final Color backgroundColor;
  
    const ItemCard(this.item, {required this.backgroundColor, super.key});
    ...
  

• Untuk mengimplementasikan warna yang berbeda, saya membuat variabel baru yang berisi warna-warna yang akan digunakan, lalu, variabel tersebut akan menginisialisasi kelas ItemCard.

  ...
  
  // Variabel warna 
  final List<Color> itemColors = [
    Colors.blue, 
    Colors.green, 
    Colors.red, 
  ];
  
  ...
  
  // Inisialisasi warna
  children: items.asMap().entries.map((entry) {
    int index = entry.key;
    ItemHomepage item = entry.value;
  
    return ItemCard(item, backgroundColor: itemColors[index]);
  }).toList(),
  
  ...
  
  // Menggunakan warna yang telah diinisialisasi
  class ItemCard extends StatelessWidget {
    final ItemHomepage item;
    final Color backgroundColor;
  
    const ItemCard(this.item, {required this.backgroundColor, super.key});
    @override
    Widget build(BuildContext context) {
      return Material(
        color: backgroundColor,
        ...
  
      )
    }
  }
  

• Untuk memunculkan snackbar yang sesuai dengan ketentuan, saya mengimplementasi kode di bawah pada kelas ItemCard.

    onTap: () {
      ScaffoldMessenger.of(context)
        ..hideCurrentSnackBar()
        ..showSnackBar(SnackBar(
            content: Text("Kamu telah menekan tombol ${item.name}!")));
    },

• Melakukan add-commit-push ke suatu repositori baru di GitHub.