Introdução
Aplicações web
Elm é uma linguagem encantadora para criar aplicações web fiáveis.
Tem mensagens de erro simpáticas, um ótimo desempenho, recursos 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 e a forma como todas as aplicações web em Elm são escritas.
A ideia central é que o teu código é construído em torno de um Model do estado da tua aplicação, de uma forma de update do teu modelo e de uma forma de view do teu modelo.
O Model contém o estado da aplicação: todos os dados de que a aplicação precisa.
Se imaginares uma aplicação simples com uma caixa de texto e texto a mostrar o inverso desse texto, o modelo seria como o que vês em baixo.
Também podes ver este exemplo no Elm Guide.
type alias Model =
{ text : String
}
update é uma função que é chamada com uma Msg quando há uma alteração (como quando o utilizador clica num botão).
Recebe a Msg e o Model atual e devolve 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 devolve HTML para mostrar ao utilizador no navegador.
Recebe o Model atual e devolve 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
A tua amiga Paula está a tentar ficar melhor a resolver pistas de palavras cruzadas. Ela leu que algumas pistas mostram que a resposta é um palíndromo.
Um palíndromo é uma palavra ou frase que se lê da mesma forma de trás para a frente e de frente para trás.
Ela pede-te que lhe escrevas um site muito simples que verifique se uma string é um palíndromo (ou não), para que ela possa verificar os seus palpites.
Decides fazer isto com uma aplicação [sandbox][browser-sandox] do Elm.
A aplicação terá uma caixa de texto, onde a Paula pode escrever o seu palpite, e um texto que indica se o texto da caixa é um palíndromo ou não.
O texto atualiza-se sempre que o texto da caixa de texto muda.
1. Define os tipos Model e Msg da aplicação e escreve a função init
O Model da aplicação precisa da string a verificar; este campo deve chamar-se content.
A aplicação precisa de um Msg para indicar que o texto na caixa de texto mudou.
A variante para isto deve chamar-se Change
A função init deve devolver um valor inicial de Model com o campo content vazio.
2. Escreve a função update
A função update deve receber um parâmetro Msg e um parâmetro Model, e devolver um novo Model.
O Msg transportará algum texto escrito pelo utilizador, e o novo Model deve incluir esse texto.
3. Escreve a função view
O Elm exige que a função view devolva um tipo Html msg, o que significa que tens de devolver um único elemento a partir da função view (e não um array de elementos).
Dentro deste elemento raiz, deve haver um elemento input (a caixa de texto) e um div com conteúdo text para indicar se o texto no input é um palíndromo ou não.
O texto deve ser "This is a palindrome" ou "Not a palindrome".
4. Escreve a função main
A função main deve chamar Browser.sandbox, passando um registo com as funções init, update e view.
Para que o exercício funcione no editor online do Exercism, usamos um Browser.sandbox falso com o código.
Isto não faz qualquer diferença para o código que escreves para resolver este exercício.
Exercício de aprendizagem
