Exercicis Compose

Sumari

1. Exercicis
   1. Stateless
      1. HelloWorld
      2. Welcome
      3. Resource
      4. Contact
      5. MessagesList
   2. State
      1. GoodMorningAndNight
      2. SayHelloScreen
      3. SecretNumber
      4. DiceRoller
   3. ViewModel
      1. Counter
      2. ShoppingList
      3. Avançats
      4. Otelo (reversi)
         1. Otelo Solitari
      5. ManualNav
   4. Navigation
      1. ManualNav
      2. LibraryNav
      3. TicTacToe
         1. Ajuda

Exercicis

Utlitza el següent template per iniciar el projecte: https://github.com/mateu-at-itb/M78ExercicesProjectTemplate

Pots veure el resultat del exercicis aquí

Stateless

HelloWorld

Fes un aplicació que mostri el missatge HelloWorld

Welcome

Fes un aplicació com aquesta

Resource

Fes un aplicació com aquesta
Guarda la imatge i el text com a recurs

• generatedFace.png

Contact

Fes un aplicació com aquesta

Utitliza el següent codi:

data class Contact(val fullName: String, val email: String, val phone: String)
val contact = Contact("Marta Casserres", "marta@example.com", "934578484")

MessagesList

Fes un aplicació com aquesta

Utitliza el següent codi:

data class Message(val author: String, val body: String)

val names = listOf(
    "Ellison Curry",
    "Briggs Willis",
    "Alexa Murphy",
    "Cameron Berry",
    "Annabelle Villarreal",
    "Nikolai Wiley",
    "Lauryn Morrow",
    "Kyree Hardy",
    "Jessica Lang",
    "Wells Wilson",
    "Luna Foster",
    "Kayden Taylor",
    "Sofia Mann",
    "Nehemiah Randall",
    "Christina Gordon",
    "Karter Kramer",
    "Hanna Morales",
    "Aaron Velez",
    "Megan Delarosa",
    "Osiris Johnson",
    "Emma Atkins",
    "Cason McKee",
    "Kori Walls",
    "Larry Shepherd",
)
val body = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac vestibulum nunc."
val messages = List(100){
    Message(names.random(), body)
}

State

GoodMorningAndNight

Fes un aplicació com aquesta

SayHelloScreen

Fes un aplicació que mostri un camp de text on l'usuari hi posarà el nom i un botó.
Al fer clic al botó mostra un dialog donan't la benvinguda a l'usuari amb el nom introduït.

exemple

SecretNumber

Crea una app que generi aleatòriament un número entre 0 i 100. L’usuari haurà d’encertar aquest número, introduïnt a un TextField el valor que creu que és el correcte, i polsant sobre un botó. El programa comprovarà si el número introduït és el buscat, i es mostrarà un dels següents missatges:
El número que busques és més petit
El número que busques és més gran
Has encertat!
Crea una segona versió de l’app en que es compti el número d’intents fets.

Exemple

DiceRoller

Crea una app que simuli el llançament de dos daus.
El look&feel de l’app serà com la de l'exemple(els recursos els trobaràs a l’arxiu aqui: diceroller.zip).

Al polsar sobre el botó “ROLL THE DICE” es llançaran els daus (s’han de modificar les imatges dels daus, de manera que surti una cara aleatòria en cadascun d’ells).

Si surten dos 6, ha d’aparèixer un Toast amb el text “JACKPOT!”.

Exemple

ViewModel

Utitliza el ViewModel per fer les següents aplicacions

Counter

Fes un aplicació que fagi de marcador d'un partit. Dona-li un estil elegant.

exmple

ShoppingList

Fes una aplicació on poguem afegir els elements d'una llista de la compra: nom i quantitat.

exemple

Avançats

Otelo (reversi)

Fes una aplicació per jugar al joc de l'Otelo per a dos jugadors.

Otelo Solitari

Fes que pugui jugar un sol jugador. El segon jugador el portarà una IA.

ManualNav

Implementa la següent aplicació fent la navegació de forma manual.
Tindras les següents pantalles

• Menu
• Screen1
• Screen2
• Screen3 (pot mostrar un missatge passat per parametre)

Ajudes:

• Explicació de com utitlizar Gemini
• Pots utitlizar un post com el següent:

You are playing reversi game. The current board status is the following:
null	null	null	null	null	null	null	null	null	null
null	null	null	null	null	null	null	null	null	null
null	null	null	null	null	null	null	null	null	null
null	null	null	null	null	null	0	null	null	null
null	null	null	null	1	0	1	null	null	null
null	null	null	null	0	0	null	null	null	null
null	null	null	null	null	0	null	null	null	null
null	null	null	null	null	null	null	null	null	null
null	null	null	null	null	null	null	null	null	null
null	null	null	null	null	null	null	null	null	null

where null is an empty space, 1 is black and 0 is white. The first cell is the 0,0.

If its white turn, tell me its best option.

Print just the answer as a json (example [2,4])

Navigation

ManualNav

Implementa la següent aplicació fent la navegació de forma manual.
Tindras les següents pantalles

• Menu
• Screen1
• Screen2
• Screen3 (pot mostrar un missatge passat per parametre)

LibraryNav

Implementa la següent aplicació utilitzant la llireria.
Utilitza els composables de les pantalles de l'exercici anterior.

TicTacToe

Fes un joc de Tic Tac Toe.
Ha de tenir tres pantalles. Utitlitza la llibreria de navegació.

La primera serà un botó de jugar.
La segona per fer la partida.
La tercera indicarà el guanyador i tindrà un botó de tornar a jugar.

La primera i tercera pantalla no cal que tinguin ViewModel.

Exemple

Ajuda

Pots utitlizar el següent mètode que converteix una matriu de Booleans a una matriu de booleans mutable:

/**
 * Returns a copy of the matrix of booleans where values can be mutated
 * Usage:  myMatrix.toMutableMatrix()
 */
fun List<List<Boolean?>>.toMutableMatrix(): List<MutableList<Boolean?>> {
    return map { it.toMutableList() }
}