Introducción
Aplicaciones web
Elm es un lenguaje encantador para crear aplicaciones web fiables.
Tiene mensajes de error amigables, un gran rendimiento, recursos pequeños y ninguna excepción en tiempo de ejecución.
Probablemente, la parte más famosa y más copiada de Elm es The Elm Architecture, un patrón sencillo para estructurar aplicaciones web, y es como están escritas todas las aplicaciones web de Elm.
La idea central es que tu código se construye en torno a un Model del estado de tu aplicación, una forma de actualizar tu modelo con update y una forma de mostrar tu modelo con view.
El Model contiene el estado de la aplicación: todos los datos que la aplicación necesita.
Si imaginas una aplicación sencilla con un cuadro de texto y un texto que muestra ese mismo texto al revés, el modelo sería así.
También puedes ver este ejemplo en la Elm Guide.
type alias Model =
{ text : String
}
update es una función a la que se llama con un Msg cuando hay un cambio (como que el usuario haga clic en un botón).
Recibe el Msg y el Model actual, y devuelve un nuevo Model.
type Msg
= TextChanged String
update : Msg -> Model -> Model
update msg model =
case msg of
TextChanged newText ->
{ model | text = newText }
view es una función que devuelve HTML para mostrárselo al usuario en el navegador.
Recibe el Model actual y devuelve un Html Msg (el tipo que utiliza Elm para representar 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) ]
]
Instrucciones
Tu amiga Paula está intentando mejorar resolviendo pistas de crucigramas. Ha leído que algunas pistas indican que la respuesta es un palíndromo.
Un palíndromo es una palabra o frase que se lee igual al derecho que al revés.
Te pide que le escribas una web muy sencilla que compruebe si un string es un palíndromo (o no), para que ella pueda comprobar sus conjeturas.
Decides hacerlo con una aplicación [sandbox][browser-sandox] de Elm.
La aplicación tendrá un cuadro de texto, en el que Paula podrá escribir su conjetura, y un texto que indique si el texto del cuadro es un palíndromo o no.
El texto se actualizará cada vez que cambie el texto del cuadro de texto.
1. Define los tipos Model y Msg de la aplicación, y escribe la función init
El Model de la aplicación necesita el string que hay que comprobar; este campo debe llamarse content.
La aplicación necesita un Msg que indique que el texto del cuadro de texto ha cambiado.
La variante para esto debe llamarse Change.
La función init debe devolver un valor Model inicial con el campo content vacío.
2. Escribe la función update
La función update debe recibir un parámetro Msg y un parámetro Model, y devolver un nuevo Model.
El Msg llevará algo de texto escrito por el usuario, y el nuevo Model debe incluir ese texto.
3. Escribe la función view
Elm exige que la función view devuelva un tipo Html msg, lo que significa que tienes que devolver un único elemento desde la función view (y no un array de elementos).
Dentro de este elemento raíz debe haber un elemento input (el cuadro de texto) y un div con contenido text que indique si el texto del input es un palíndromo o no.
El texto debe ser «This is a palindrome» o «Not a palindrome».
4. Escribe la función main
La función main debe llamar a Browser.sandbox, pasando un parámetro de tipo registro con las funciones init, update y view.
Para que el ejercicio funcione en el editor en línea de Exercism, usamos un Browser.sandbox falso con el código.
Esto no supone ninguna diferencia para el código que escribas para resolver este ejercicio.
Ejercicio de aprendizaje
