Introdução
Aplicações web
Elm é uma linguagem encantadora para construir aplicações web confiáveis.
Ela tem mensagens de erro amigáveis, ótima performance, assets pequenos e nenhuma exceção em tempo de execução.
Provavelmente a parte mais famosa e mais copiada do Elm é a The Elm Architecture, um padrão simples para estruturar aplicações web. É assim que todas as aplicações web em Elm são escritas.
A ideia central é que seu código gira em torno de um Model do estado da sua aplicação, de uma forma de update do seu modelo e de uma forma de view do seu modelo.
O Model contém o estado da aplicação: todos os dados de que ela precisa.
Se você imaginar uma aplicação simples com uma caixa de texto e um texto mostrando o inverso desse texto, o modelo seria assim.
Você também pode ver esse exemplo no Guia do Elm.
type alias Model =
{ text : String
}
update é uma função chamada com uma Msg quando há uma mudança (como o usuário clicar em um botão).
Ela recebe a Msg e o Model atual e retorna um novo Model.
type Msg
= TextChanged String
update : Msg -> Model -> Model
update msg model =
case msg of
TextChanged newText ->
{ model | text = newText }
view é uma função que retorna HTML para mostrar ao usuário no navegador.
Ela recebe o Model atual e retorna um Html Msg (o tipo que o 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) ]
]
Instruções
Sua amiga Paula está tentando ficar melhor em resolver palavras cruzadas. Ela leu que algumas dicas mostram que a resposta é um palíndromo.
Um palíndromo é uma palavra ou frase que se lê da mesma forma de trás para frente.
Ela pede que você escreva para ela um site bem simples que verifique se uma string é um palíndromo (ou não), para que ela possa conferir seus palpites.
Você decide fazer isso usando uma aplicação [sandbox][browser-sandox] do Elm.
A aplicação terá uma caixa de texto, na qual Paula pode digitar seu palpite, e um texto dizendo se o texto da caixa é um palíndromo ou não.
O texto será atualizado sempre que o texto da caixa de texto mudar.
1. Defina os tipos Model e Msg da aplicação e escreva a função init
O Model da aplicação precisa da string a ser verificada, e esse campo deve se chamar content.
A aplicação precisa de uma Msg para indicar que o texto da caixa de texto mudou.
A variante para isso deve se chamar Change.
A função init deve retornar um valor inicial de Model com o campo content vazio.
2. Escreva a função update
A função update deve receber um parâmetro Msg e um Model, e retornar um novo Model.
A Msg carregará algum texto digitado pela pessoa usuária, e o novo Model deve incluir esse texto.
3. Escreva a função view
O Elm exige que a função view retorne um tipo Html msg. Isso significa que você precisa retornar um único elemento da função view, e não um array de elementos.
Dentro desse elemento raiz, deve haver um elemento input (a caixa de texto) e uma div com conteúdo text para indicar se o texto do input é um palíndromo ou não.
O texto deve ser "This is a palindrome" ou "Not a palindrome".
4. Escreva a função main
A função main deve chamar Browser.sandbox, passando um parâmetro record com as funções init, update e view.
Para fazer o exercício funcionar no editor online do Exercism, usamos um Browser.sandbox falso no código.
Isso não faz diferença para o código que você escreve para resolver este exercício.
Exercício de aprendizagem
