Tugas 12 - Flutter Music Application

 Nama     : Florentino Benedictus

NRP       : 5025201222

Tahun    : 2024

Kelas      : Pemrograman Perangkat Bergerak I

Link Implementasi      :  lib/src/shared/router.dart, lib/src/shared/extensions.dart, lib/src/shared/app.dart, lib/src/shared/views/adaptive_navigation.dart, lib/src/features/home/view/home_screen.dart, lib/src/shared/providers/theme.dart, lib/src/features/home/view/home_highlight.dart, lib/src/shared/views/outlined_card.dart, lib/src/features/playlists/view/playlist_songs.dart

Tugas 12 - Flutter Music Application

Pada tugas ini, digunakan diperkenalkan framework berbeda yaitu Flutter. Flutter merupakan salah satu framework yang dapat digunakan untuk membuat aplikasi Android dan menggunakan bahasa pemrograman Dart. Pengerjaan tugas menggunakan referensi Google Codelab - Flutter Boring to Beautiful dan beberapa tools meliputi: Visual Studio Code, Flutter Visual Studio Code Extension, Android Studio (untuk Android SDK dan VM android), dan Flutter SDK.

1. Inisiasi Proyek

Pertama-tama clone project yang disediakan pada tutorial lalu pindah directory ke step_01. Kemudian run start ms-settings:developers pada Powershell Windows sehingga kode dapat di run (debug) melalui Visual Studio Code.

Selanjutnya pilih device Chrome sehingga program akan dijalankan pada Google Chrome Windows kemudian pilih tombol di kanan atas dan Start Debugging, terlihat tampilannya adalah sebagai berikut. Aplikasi template merupakan MyArtist yang merupakan aplikasi music yang dapat dibuka melalui web atau mobile.

Jika device yang dipilih adalah VM android, maka tampilannya sebagai berikut. Tampilan inilah yang akan diperbaiki.

2. Memanfaatkan Tipografi

Selanjutnya buka lib/src/shared/router.dart untuk mengubah icon dari arrow_right_rounded agar sesuai dengan kegunaan dari masing-masing tombol navigasi.

Kemudian import google_fonts.dart pada lib/src/shared/extensions.dart agar teks dapat diubah ke font Montserrat. Jika google_fonts belum terdownload gunakan quick fix pada import google_fonts.dart-> add dependencies untuk mendownload google_fonts secara otomatis. Selanjutnya hot reload aplikasi sehingga tampilan font terupdate.

3. Menambahkan Tema

Selanjutnya ubah lib/src/shared/app.dart untuk menambahkan tema terang dan gelap.

Tambahkan juga colorScheme pada lib/src/shared/views/outlined_card.dart

Maka mode terang dan gelap sudah dapat diakses melalui pojok kanan atas.

4. Menambahkan Desain Adaptif

Selanjutnya tambahkan batas dimensi untuk tablet dan mobile pada lib/src/shared/views/adaptive_navigation.dart sehingga desain menjadi adaptif sesuai dengan perangkat.

Kemudian buka lib/src/features/home/view/home_screen.dart dan tambahkan layout kondisional ketika perangkat mobile.

Terlihat bahwa ketika di-run ulang pada perangkat mobile, tampilan menu navigasi akan berpindah ke bagian bawah sehingga lebih mudah digunakan.

Kemudian kembali ke home_screen.dart, ubah seluruh EdgeInsets sesuai dengan kebutuhan sehingga ukuran padding pada widget akan berubah. Tambahkan juga SizedBox untuk memberi jarak antar playlist. Lakukan juga pada lib/src/features/home/view/home_highlight.dart.

Hard reload, maka akan terlihat bahwa tampilan spacing menjadi lebih rapi.

5. Menambahkan Gerakan dan Animasi

Selanjutnya tambahkan animasi transisi layar pada lib/src/shared/providers/theme.dart

Sehingga ketika terjadi transisi layar maka akan dilakukan animasi, pada gambar terlihat animasi FadeUpwardsPage pada perangkat Android.

Selanjutnya buka lib/src/shared/views/outlined_card.dart untuk menambahkan kondisi state dan status hovered_

Terlihat bahwa sekarang playlist yang di-hover akan membulatkan sudut dan mengubah opasitas.

Selanjutnya tambahkan HoverableSongPlayButton pada lib/src/features/playlists/view/playlist_songs.dart sehingga ketika di-hover, angka akan berubah menjadi icon PlayButton.

6. Hasil Akhir Aplikasi

Berikut adalah demo hasil akhir aplikasi pada browser dan Android:

Berikut adalah link dari file yang dimodifikasi dari template untuk mengimplementasikan program:

- lib/src/shared/router.dart

- lib/src/shared/extensions.dart

- lib/src/shared/app.dart

- lib/src/shared/views/adaptive_navigation.dart

- lib/src/features/home/view/home_screen.dart

- lib/src/shared/providers/theme.dart

- lib/src/features/home/view/home_highlight.dart

- lib/src/shared/views/outlined_card.dart

- lib/src/features/playlists/view/playlist_songs.dart

Referensi

https://codelabs.developers.google.com/codelabs/flutter-boring-to-beautiful?hl=id#7

Tugas 11 - ViewModel dan State Pada Compose Dengan Aplikasi Unscramble

Nama     : Florentino Benedictus

NRP       : 5025201222

Tahun    : 2024

Kelas      : Pemrograman Perangkat Bergerak I

Link Implementasi      :  GameScreen.kt, GameUiState.kt, GameViewModel.kt

Tugas 11 - ViewModel dan State Pada Compose Dengan Aplikasi Unscramble

Pada tugas ini, digunakan aplikasi awal Unscramble yaitu aplikasi permainan dimana aplikasi akan menampilkan kata yang hurufnya teracak lalu user harus menebak kata yang tersusun atas huruf-huruf tersebut. Jika kata ditebak dengan benar maka user akan mendapat poin dan aplikasi juga memiliki fitur skip untuk mengubah soal. Pengerjaan tugas menggunakan referensi Google Codelab - ViewModel and State in Compose.

1. Inisiasi Proyek

Pertama-tama buka link https://github.com/google-developer-training/basic-android-kotlin-compose-training-unscramble/tree/starter yang merupakan kode awal aplikasi, kemudian download ZIP dari branch starter. Ekstrak file .zip yang telah terdownload, pindahkan isi folder hasil ekstrak ke lokasi yang diinginkan, lalu buka Android Studio.

Klik Open pada bagian kanan atas lalu pilih folder project yang sudah di-extract lalu pilih OK. Kemudian tunggu hingga building model Gradle selesai.

Selanjutnya run aplikasi, maka akan terlihat tampilan awal aplikasi Unscramble. Aplikasi Unscramble memiliki beberapa bug yang perlu diperbaiki dan fitur yang perlu ditambahkan.

2. Menambahkan ViewModel

Untuk menggunakan ViewModel maka hal pertama yang perlu dilakukan adalah menambahkan dependensi ViewModel pada build.gradle.app projek.

Kemudian buat file GameViewModel pada package ui yang diextend dari class ViewModel.

Tambahkan juga file data class GameUiState pada package ui.

Langkah selanjutnya yaitu menambahkan StateFlow pada GameViewModel yaitu data holder yang akan menampilkan current state dan update state. 

Selanjutnya buat beberapa fungsi dan variabel tambahan pada GameViewModel untuk menampilkan kata scramble meliputi variabel currentWord yaitu kata scramble saat ini, fungsi pickRandomWordAndShuffle() untuk mendapatkan kata random, kata usedWords untuk menyimpan kata yang sudah terpakai, fungsi shuffleCurrentWord() untuk mengacak kata, fungsi resetGame() untuk inisialisasi permainan, dan init yang akan memanggil resetGame().

3. Passing ViewModel ke UI

Buka GameScreen() pada GameScreen.kt, kemudian passing argumen GameViewModel dan tambahkan gameUiState yang akan melakukan komposisi ulang ketika uiState mengalami perubahan.

Passing currentScrambledWord pada GameLayout() composable pada GameScreen().

Tambahkan currentScrambledWord sebagai parameter pada fungsi composable GameLayout dan ganti hardcoded string "scrambleun" dengan currentScrambledWord.

Ketika dirun ulang, terlihat bahwa kata yang posisi hurufnya teracak sudah dapat dilihat.

Kemudian agar textfield dapat menampilkan kata yang ditebak maka ubah value onValueChange menjadi onUserGuessChanged, tambahkan onKeyboardDone pada onDone KeyboardActions, dan ubah value pada OutlinedTextField menjadi userGuess. Tambahkan juga ketiga variabel tersebut sebagai parameter pada fungsi composable GameLayout. Update juga GameLayout yang dipanggil pada GameScreen.

Selanjutnya tambahkan variabel userGuess dan fungsi updateUserGuess pada GameViewModel.kt.

Terlihat textfield sudah dapat menampilkan kata tebakan user.

4. Verifikasi Kata Tebakan

Tambahkan fungsi checkUserGuess() pada GameViewModel, fungsi ini akan berfungsi untuk melakukan pengecekan tebakan user terhadap kunci jawaban. Tambahkan juga isGuessedWordWrong pada class GameUiState.

Kembali ke GameScreen.kt, ubah isi onClick pada tombol submit dan onKeyboardDone menjadi gameViewModel.checkUserGuess(). Ubah juga isi composable GameLayout pada GameScreen() dan fungsi composable GameLayout sehingga menggunakan variabel isGuessWrong.

Tambahkan kondisional pesan yang ditampilkan pada GameLayout sehingga ketika jawaban salah akan menggunakan resource string wrong_guess pada strings.xml (sudah ada dari template project).

Terlihat bahwa sekarang pesan error akan ditampilkan ketika jawaban salah.

5. Update Score dan Word Count

Tambahkan variabel score dan currentWordCount pada GameUiState. Tambahkan juga isi conditional if dari checkUserGuess di dalam GameViewModel.

Tambahkan fungsi updateGameState pada GameViewModel yang akan digunakan untuk mengupdate skor, menambahkan jumlah currentWordCount, dan mengganti scrambled word dengan kata baru.

Kemudian passing variabel wordCount pada fungsi composable GameLayout dan ganti juga "0" yang ter-hardcode pada kode template sehingga menggunakan wordCount. Pada GameLayout yang dipanggil pada GameScreen argumen wordCount akan didapat dari gameUiState.currentWordCount.

Ubah juga fungsi GameStatus pada GameScreen.kt sehingga score akan disesuaikan dengan nilai score pada gameUiState.

6. Tambahkan Fitur Skip

Tambahkan fungsi skipWord pada GameViewModel.kt, kemudian panggil gameViewModel.skipWord ketika tombol skip ditekan fungsi GameScreen di GameScreen.kt.

7. Handle Last Round Permainan

Agar permainan selesai ketika 10 pertanyaan telah dijawab/diskip, maka perlu ditambahkan kondisi untuk menyelesaikan permainan.

Update fungsi updateGameState pada GameViewModel.kt sehingga ketika MAX_NO_OF_WORDS tercapai maka nilai flag isGameOver akan diubah ke true. Tambahkan juga flag tersebut pada GameUiState.kt.

Selanjutnya FinalScoreDialog yang berfungsi sebagai alert dari template dapat digunakan sebagai display dialog ketika permainan selesai. Tambahkan pengecekan kondisi flag isGameOver pada akhir fungsi GameScreen() pada GameScreen.kt.

8. Hasil Akhir Aplikasi

Berikut adalah hasil uji coba aplikasi yang dibuat, terlihat bahwa tiap jawaban benar akan memberi skor 20, jawaban yang diskip tidak mendapatkan poin, dan ketika 10 pertanyaan telah diberikan maka terdapat pilihan untuk main lagi/keluar dari aplikasi.

Berikut adalah isi code implementasi program:

GameScreen.kt:

GameUiState.kt:

GameViewModel.kt:

Referensi

https://developer.android.com/codelabs/basic-android-kotlin-compose-viewmodel-and-state#0