Introducción
Aplicaciones web
Elm es un lenguaje maravilloso para crear aplicaciones web confiables.
Tiene mensajes de error amigables, 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 sea la arquitectura Elm, que es un patrón simple para estructurar aplicaciones web y es como se escriben todas las aplicaciones web de Elm.
La idea central es que tu código se construye alrededor de un Model del estado de tu aplicación, una manera de update tu modelo y una manera de view tu modelo.
El Model contiene el estado de la aplicación: todos los datos que la aplicación necesita.
Si imaginas una aplicación simple con un cuadro de texto y un texto que muestra el inverso de ese texto, el modelo se vería como el siguiente.
También puedes ver este ejemplo en la Guía de Elm.
type alias Model =
{ text : String
}
update es una función que se llama con un Msg cuando hay un cambio (como que el usuario haga clic en un botón).
Toma 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 mostrarle al usuario en el navegador.
Toma el Model actual y devuelve un Html Msg (el tipo que Elm usa 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 quiere mejorar resolviendo pistas de crucigramas. Ha leído que algunas pistas muestran que la respuesta es un palíndromo.
Un palíndromo es una palabra o una frase que se lee igual al derecho que al revés.
Te pide que le escribas un sitio web muy sencillo que verifique si un string es un palíndromo (o no), para que pueda comprobar sus respuestas.
Decides hacerlo usando una aplicación [sandbox][browser-sandox] de Elm.
La aplicación tendrá un cuadro de texto, en el que Paula puede escribir su respuesta, y un texto que indica 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 se va a verificar; ese campo debe llamarse content.
La aplicación necesita un Msg que indique que el texto del cuadro de texto cambió.
La variante para esto debe llamarse Change.
La función init debe devolver un valor inicial de Model con el campo content vacío.
2. Escribe la función update
La función update debe recibir un Msg y un Model como parámetros, 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 requiere que la función view devuelva un tipo Html msg, lo que significa que debes devolver un solo 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, pasándole un registro como parámetro 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 junto con el código.
Esto no supone ninguna diferencia para el código que escribas para resolver este ejercicio.
Ejercicio de aprendizaje
