Introduzione
Applicazioni web
Elm è un linguaggio delizioso per costruire applicazioni web affidabili.
Ha messaggi di errore amichevoli, ottime prestazioni, asset di piccole dimensioni e nessuna eccezione a runtime.
Probabilmente la parte più famosa e più copiata di Elm è The Elm Architecture, un semplice pattern per strutturare le applicazioni web: è così che vengono scritte tutte le applicazioni web in Elm.
L'idea centrale è che il codice è costruito attorno a un Model dello stato dell'applicazione, a un modo per fare update del modello e a un modo per fare view del modello.
Il Model contiene lo stato dell'applicazione: tutti i dati di cui l'applicazione ha bisogno.
Se immagini un'applicazione semplice con una casella di testo e un testo che ne mostra il contenuto invertito, il modello sarà simile a quello qui sotto.
Puoi anche vedere questo esempio nella Guida di Elm.
type alias Model =
{ text : String
}
update è una funzione che viene chiamata con un Msg quando c'è un cambiamento (ad esempio quando l'utente clicca un pulsante).
Prende il Msg e il Model attuale e restituisce un nuovo Model.
type Msg
= TextChanged String
update : Msg -> Model -> Model
update msg model =
case msg of
TextChanged newText ->
{ model | text = newText }
view è una funzione che restituisce l'HTML da mostrare all'utente nel browser.
Prende il Model attuale e restituisce un Html Msg (il tipo che Elm usa per rappresentare l'HTML).
view : Model -> Html Msg
view model =
Html.div []
[ Html.input
[ Html.Attributes.placeholder "Text to reverse"
, Html.Attributes.value model.text
, Html.Events.onInput TextChanged
]
[]
, Html.div [] [ Html.text (String.reverse model.text) ]
]
Istruzioni
La tua amica Paula sta cercando di migliorare nella risoluzione degli indizi dei cruciverba. Ha letto che alcuni indizi indicano che la risposta è un palindromo.
Un palindromo è una parola o una frase che si legge allo stesso modo da sinistra a destra e da destra a sinistra.
Ti chiede di scriverle un sito web molto semplice che controlli se una stringa è un palindromo (o no), così può verificare le sue ipotesi.
Decidi di farlo usando un'applicazione Elm di tipo [sandbox][browser-sandox].
L'applicazione avrà una casella di testo in cui Paula può digitare la sua ipotesi e un testo che indica se il contenuto della casella è un palindromo o no.
Il testo si aggiornerà ogni volta che il contenuto della casella di testo cambia.
1. Definisci i tipi Model e Msg per l'applicazione e scrivi la funzione init
Il Model dell'applicazione deve contenere la stringa da controllare: questo campo deve chiamarsi content.
L'applicazione ha bisogno di un Msg che indichi che il testo nella casella di testo è cambiato.
La variante per questo deve chiamarsi Change
La funzione init deve restituire un valore Model iniziale con il campo content vuoto.
2. Scrivi la funzione update
La funzione update deve ricevere un Msg e un Model come parametri e restituire un nuovo Model.
Il Msg conterrà del testo digitato dall'utente e il nuovo Model deve includere quel testo.
3. Scrivi la funzione view
Elm richiede che la funzione view restituisca un tipo Html msg, il che significa che devi restituire un singolo elemento dalla funzione view (e non un array di elementi).
All'interno di questo elemento radice devono esserci un elemento input (la casella di testo) e un div con contenuto text che indichi se il testo nell'input è un palindromo o no.
Il testo deve essere "This is a palindrome" oppure "Not a palindrome".
4. Scrivi la funzione main
La funzione main deve chiamare Browser.sandbox, passando come parametro un record con le funzioni init, update e view.
Per far funzionare l'esercizio nell'editor online di Exercism, usiamo un finto Browser.sandbox insieme al codice.
Questo non cambia nulla nel codice che scrivi per risolvere questo esercizio.
Esercizio di apprendimento
