Tugas pertemuan 11

-

 Heru Dwi Kurniawan

5025211055

Pemrograman Perangkat Bergerak B


Game Unscramble

File Kode Awal

WordsData.kt

File ini berisi daftar kata yang digunakan dalam permainan, beserta konstanta untuk jumlah maksimum kata per permainan dan poin skor untuk setiap kata yang benar.

MainActivity.kt

File ini memuat sebagian besar kode yang dihasilkan dari template. Anda menampilkan komposabel GameScreen dalam blok setContent{}.

GameScreen.kt

Semua fungsi komposabel UI didefinisikan di sini. Panduan untuk beberapa fungsi komposabel diberikan di bawah ini.

GameStatus

Fungsi komposabel ini menampilkan skor permainan di bagian bawah layar. Skor saat ini di-hardcode menjadi 0.

GameLayout

Fungsi komposabel ini menampilkan elemen utama permainan, termasuk kata yang diacak, petunjuk permainan, dan kolom teks untuk menerima tebakan pengguna.

GameScreen

Komposabel ini mencakup GameStatus, GameLayout, judul permainan, jumlah kata, serta tombol Submit dan Skip.

FinalScoreDialog

Fungsi komposabel ini menampilkan dialog yang memberikan opsi kepada pengguna untuk bermain lagi atau keluar dari permainan. Anda akan mengimplementasikan logika untuk menampilkan dialog ini di akhir permainan.

Menambahkan ViewModel

  1. Buka build.gradle.kts (Module :app), gulir ke blok dependensi, dan tambahkan dependensi ViewModel berikut.
dependencies {
    // dependensi lainnya
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
    //...
}

2. Di paket ui, buat file Kotlin bernama GameViewModel sebagai subclass dari ViewModel.

import androidx.lifecycle.ViewModel

class GameViewModel : ViewModel() {
}

3. Tambahkan data class GameUiState di paket ui untuk merepresentasikan status UI permainan dengan variabel currentScrambledWord.

data class GameUiState(
    val currentScrambledWord: String = ""
)

StateFlow

  1. Tambahkan properti _uiState di kelas GameViewModel menggunakan MutableStateFlow.
import kotlinx.coroutines.flow.MutableStateFlow

// status UI permainan
private val _uiState = MutableStateFlow(GameUiState())

import kotlinx.coroutines.flow.MutableStateFlow

// status UI permainan
private val _uiState = MutableStateFlow(GameUiState())

2. Tambahkan properti pendukung uiState bernama _uiState dengan tipe StateFlow<GameUiState>.

import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow

// status UI permainan
private val _uiState = MutableStateFlow(GameUiState())
val uiState: StateFlow<GameUiState> = _uiState.asStateFlow()

Menampilkan Kata Acak

  1. Tambahkan properti currentWord dengan tipe String untuk menyimpan kata yang sedang diacak

private lateinit var currentWord: String

2. Tambahkan metode pickRandomWordAndShuffle() untuk memilih kata secara acak dari daftar dan mengacaknya.

import com.example.unscramble.data.allWords

private fun pickRandomWordAndShuffle(): String {
    currentWord = allWords.random()
    if (usedWords.contains(currentWord)) {
        return pickRandomWordAndShuffle()
    } else {
        usedWords.add(currentWord)
        return shuffleCurrentWord(currentWord)
    }
}

  1. Tambahkan properti untuk menyimpan kata yang telah digunakan dalam permainan.
// Set dari kata yang digunakan dalam permainan
private var usedWords: MutableSet<String> = mutableSetOf()

  1. Tambahkan metode shuffleCurrentWord() untuk mengacak kata saat ini.
private fun shuffleCurrentWord(word: String): String {
    val tempWord = word.toCharArray()
    tempWord.shuffle()
    while (String(tempWord).equals(word)) {
        tempWord.shuffle()
    }
    return String(tempWord)
}

  1. Tambahkan fungsi resetGame() untuk menginisialisasi permainan
fun resetGame() {
    usedWords.clear()
    _uiState.value = GameUiState(currentScrambledWord = pickRandomWordAndShuffle())
}

  1. Tambahkan blok init ke dalam kelas GameViewModel dan panggil resetGame().

init {
    resetGame()
}

Merancang Compose UI dan Mengirim Data

  1. Pada fungsi GameScreen, teruskan argumen kedua berupa GameViewModel dengan nilai default viewModel().
import androidx.lifecycle.viewmodel.compose.viewModel

@Composable
fun GameScreen(
    gameViewModel: GameViewModel = viewModel()
) {
    // ...
}

2. Tambahkan variabel gameUiState pada fungsi GameScreen dengan delegasi dan panggil collectAsState() pada uiState.

import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue

@Composable
fun GameScreen(
    gameViewModel: GameViewModel = viewModel()
) {
    val gameUiState by gameViewModel.uiState.collectAsState()
    // ...
}
  1. Teruskan gameUiState.currentScrambledWord ke dalam GameLayout.
GameLayout(
    currentScrambledWord = gameUiState.currentScrambledWord,
    modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight()
        .padding(mediumPadding)
)

  1. Tambahkan currentScrambledWord sebagai parameter ke fungsi GameLayout.
@Composable
fun GameLayout(
    currentScrambledWord: String,
    modifier: Modifier = Modifier
) {
}

  1. Perbarui fungsi GameLayout untuk menampilkan currentScrambledWord.

@Composable
fun GameLayout(
    currentScrambledWord: String,
    modifier: Modifier = Modifier
) {
    Column(
        verticalArrangement = Arrangement.spacedBy(24.dp)
    ) {
        Text(
            text = currentScrambledWord,
            // ...
        )
        // ...
    }
}

  1. Jalankan dan bangun aplikasi untuk melihat kata yang diacak ditampilkan.

Menampilkan Kata Tebakan

  1. Pada GameLayout, atur onValueChange menjadi onUserGuessChanged dan onKeyboardDone() ke aksi keyboard onDone.

OutlinedTextField(
    value = "",
    singleLine = true,
    modifier = Modifier.fillMaxWidth(),
    onValueChange = onUserGuessChanged,
    label = { Text(stringResource(R.string.enter_your_word)) },
    isError = false,
    keyboardOptions = KeyboardOptions.Default.copy(
        imeAction = ImeAction.Done
    ),
    keyboardActions = KeyboardActions(
        onDone = { onKeyboardDone() }
    ),
)
  1. Tambahkan argumen onUserGuessChanged dan onKeyboardDone ke fungsi GameLayout.
kotlin

@Composable
fun GameLayout(
    currentScrambledWord: String,
    onUserGuessChanged: (String) -> Unit,
    onKeyboardDone: () -> Unit,
    modifier: Modifier = Modifier
) {
}


  1. Pada GameScreen, tambahkan lambda untuk onUserGuessChanged dan onKeyboardDone.
GameLayout(
    currentScrambledWord = gameUiState.currentScrambledWord,
    onUserGuessChanged = { gameViewModel.updateUserGuess(it) },
    onKeyboardDone = { gameViewModel.checkUserGuess() }
)


  1. Tambahkan metode updateUserGuess di dalam GameViewModel untuk memperbarui tebakan pengguna.

fun updateUserGuess(guessedWord: String) {
    userGuess = guessedWord
}



  1. Tambahkan properti userGuess di dalam GameViewModel.

import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue

var userGuess by mutableStateOf("")
    private set


  1. Tambahkan parameter userGuess ke fungsi GameLayout.

fun GameLayout(
    currentScrambledWord: String,
    userGuess: String,
    onUserGuessChanged: (String) -> Unit,
    onKeyboardDone: () -> Unit,
    modifier: Modifier = Modifier
) {
    Column(
        verticalArrangement = Arrangement.spacedBy(24.dp)
    ) {
        OutlinedTextField(
            value = userGuess,
            //...
        )
    }
}



  1. Perbarui panggilan fungsi GameLayout di dalam GameScreen untuk menyertakan userGuess.

GameLayout(
    currentScrambledWord = gameUiState.currentScrambledWord,
    userGuess = gameViewModel.userGuess,
    onUserGuessChanged = { gameViewModel.updateUserGuess(it) },
    onKeyboardDone = { gameViewModel.checkUserGuess() }
)

Komentar

Posting Komentar

Postingan populer dari blog ini

Tugas 3 PBKK

-
Gambar
Nama : Heru Dwi Kurniawan Nrp : 5025211055 Kelas : PBKK B  Membuat Aplikasi WPF Baru dengan .Net Code :  https://github.com/herukurniawann/Tugas3PBKK_UI-Dashboard WPF, atau Windows Presentation Foundation, adalah sebuah teknologi yang dikembangkan oleh Microsoft untuk memungkinkan pembangunan aplikasi desktop berbasis Windows dengan antarmuka pengguna yang menarik dan interaktif. Menggunakan fitur-fitur seperti XAML (Extensible Application Markup Language) untuk mendefinisikan antarmuka pengguna secara deklaratif, kemampuan grafik 2D dan 3D, pengikatan data yang kuat, serta dukungan untuk gaya, templating, animasi, dan kontrol yang beragam, WPF memberikan keleluasaan bagi para pengembang perangkat lunak dalam menciptakan aplikasi yang menarik dan berfungsi baik. Teknologi ini telah menjadi pilihan utama untuk mengembangkan berbagai jenis aplikasi desktop Windows modern, mulai dari aplikasi bisnis hingga permainan dan alat desain.
Baca selengkapnya

APTEK 7 - Tugas Pembuatan Web Blog

-
Gambar
 Nama     : Heru Dwi Kurniawan NRP         : 5025211055 Kelas         : ATTD 7 Promosi Lingkungan: Ayo Bersama Jaga Bumi untuk Masa Depan yang Lebih Baik Dalam kehidupan sehari-hari, seringkali kita tidak menyadari bahwa setiap tindakan kecil yang kita lakukan bisa memberikan dampak besar bagi kelestarian lingkungan. Mengurangi penggunaan plastik, membawa tas belanja sendiri, atau memilih produk lokal bukan hanya tren, tetapi langkah konkret untuk membantu menjaga alam. Tindakan sederhana seperti ini, jika dilakukan secara konsisten, dapat mengurangi jejak karbon dan mengurangi volume sampah yang berakhir di tempat pembuangan akhir atau bahkan di laut. Saat ini, kampanye seperti "Zero Waste" dan "Plastic-Free Lifestyle" semakin populer untuk menginspirasi masyarakat agar lebih bijak dalam mengelola konsumsi dan limbah. Zero Waste berfokus pada pencegahan sampah sejak awal, seperti membawa botol minum sendiri dan mengguna...
Baca selengkapnya

Tugas 1 - PBB B

-
Nama       : Heru Dwi Kurniawan NRP         : 5025211055 Kelas       : PBB B Tugas 1 PBB  Redeign Aplikasi Mobile  Redesain E-wallet OVO merupakan langkah revolusioner yang menggabungkan kepraktisan dengan antarmuka yang modern dan menarik. Dengan tampilan yang bersih dan responsif, pengguna akan merasakan pengalaman yang lebih menyenangkan dan mudah dalam mengelola keuangan digital mereka. Antarmuka Utama: 1. Desain Minimalis dan Bersih: E-wallet OVO yang baru memiliki tata letak yang sederhana namun elegan, memastikan pengalaman pengguna yang intuitif dan mudah dipahami. 2. Warna yang Menyenangkan: Palet warna yang diperbarui menciptakan atmosfer yang positif dan energik, menampilkan kombinasi warna yang cerah namun lembut sehingga menciptakan daya tarik visual yang kuat. 3. Ikon Modern dan Konsisten: Ikon-ikon yang dirancang ulang memiliki gaya modern yang konsisten, membantu pengguna mengidentifikasi fungsi dan fitur dengan...
Baca selengkapnya