Introduction
Applications web
Elm est un langage agréable pour construire des applications web fiables.
Il propose des messages d'erreur bienveillants, d'excellentes performances, des ressources légères et aucune exception à l'exécution.
La partie la plus célèbre et la plus copiée d'Elm est probablement The Elm Architecture, un motif simple pour structurer les applications web, et c'est ainsi que toutes les applications web Elm sont écrites.
L'idée centrale est que ton code s'articule autour d'un Model qui représente l'état de ton application, d'un moyen de update ce modèle et d'un moyen de view ce modèle.
Le Model contient l'état de l'application : toutes les données dont elle a besoin.
Si on imagine une application simple avec une zone de texte et un texte qui affiche ce texte à l'envers, le modèle ressemblerait à ceci.
Tu peux aussi retrouver cet exemple dans le guide Elm.
type alias Model =
{ text : String
}
update est une fonction qui est appelée avec un Msg lorsqu'il y a un changement (par exemple quand l'utilisateur clique sur un bouton).
Elle prend le Msg et le Model actuel, et renvoie un nouveau Model.
type Msg
= TextChanged String
update : Msg -> Model -> Model
update msg model =
case msg of
TextChanged newText ->
{ model | text = newText }
view est une fonction qui renvoie du HTML à afficher à l'utilisateur dans le navigateur.
Elle prend le Model actuel et renvoie un Html Msg (le type qu'Elm utilise pour représenter le 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) ]
]
Instructions
Ton amie Paula essaie de progresser dans la résolution d'indices de mots croisés. Elle a lu que certains indices montrent que la réponse est un palindrome.
Un palindrome est un mot ou une phrase qui se lit de la même façon dans les deux sens.
Elle te demande de lui écrire un site web très simple qui vérifiera si une string est un palindrome (ou non), afin qu'elle puisse vérifier ses propositions.
Tu décides de le faire avec une application Elm [bac à sable][browser-sandox].
L'application aura une zone de texte, dans laquelle Paula pourra saisir sa proposition, et un texte indiquant si le texte de la zone est un palindrome ou non.
Le texte se mettra à jour dès que le texte de la zone de texte changera.
1. Définis les types Model et Msg de l'application, et écris la fonction init
Le Model de l'application doit contenir la string à vérifier ; ce champ doit s'appeler content.
L'application a besoin d'un Msg pour indiquer que le texte de la zone de texte a changé.
La variante correspondante doit s'appeler Change.
La fonction init doit renvoyer une valeur Model initiale avec un champ content vide.
2. Écris la fonction update
La fonction update doit prendre un Msg et un Model en paramètres, et renvoyer un nouveau Model.
Le Msg transportera du texte saisi par l'utilisateur, et le nouveau Model devra inclure ce texte.
3. Écris la fonction view
Elm exige que la fonction view renvoie un type Html msg, ce qui signifie que tu dois renvoyer un seul élément depuis la fonction view (et non un tableau d'éléments).
À l'intérieur de cet élément racine, il doit y avoir un élément input (la zone de texte), et un div avec un contenu text pour indiquer si le texte dans l'input est un palindrome ou non.
Le texte doit être « This is a palindrome » ou « Not a palindrome ».
4. Écris la fonction main
La fonction main doit appeler Browser.sandbox, en passant un paramètre de type enregistrement avec les fonctions init, update et view.
Pour que l'exercice fonctionne dans l'éditeur en ligne d'Exercism, on utilise un faux Browser.sandbox avec le code.
Cela ne change rien au code que tu écris pour résoudre cet exercice.
Exercice d'apprentissage
