DEV Community: Clayton Fidelis

Elm na prática - Events, Pattern Matching, Maybe, Dict e implementando a lógica do conversor

Clayton Fidelis — Tue, 03 Mar 2020 16:30:44 +0000

Chegamos na terceira parte dessa série de tutoriais sobre Elm, e hoje finalmente vamos implementar a lógica da nossa aplicação. O código dos tutoriais anteriores está disponível nesse link: https://ellie-app.com/88hXjYRzqbwa1.

Parte 1: Imports, variáveis e o módulo HTML
Parte 2: The Elm Architecture, Records, funções e exibindo dados da Model
Parte 3: Events, Pattern Matching, Maybe, Dict e implementando a lógica do conversor (Você está aqui)
Parte 4: Type Signatures e adicionando tipos à nossa aplicação (não publicado)
Parte 5: Http, Commands, Browser.element e utilizando dados de uma API (não publicado)
Parte 6: Pipe e HttpBuilder (não publicado)
Parte 7: Configurando o ambiente de desenvolvimento local (não publicado)
Parte 8: Utilizando ports e flags (não publicado)
Parte 9: Trabalhando com rotas (não publicado)
Parte 10: Adicionando testes (não publicado)

Continuando nosso conversor, hoje vamos implementar o cálculo da conversão e para isso vamos aprender algumas coisas novas: O pacote Html.Events, Pattern Matching, Result e Dict.

Definindo as ações do usuário

Antes de tudo vamos precisar definir quais são as ações que o usuário poderá executar dentro da aplicação, por enquanto ele poderá:

Alterar a moeda de origem
Alterar a moeda de destino
Alterar a quantia que será convertido
Clicar para calcular

Agora vamos criar uma mensagem (a partir de agora vou chamar mensagem de msg, é uma abreviação adotada por toda a comunidade de desenvolvedores Elm) para cada uma dessas ações, para isso vamos criar um Custom Type.

Custom Type

Ainda não entramos de cabeça no assunto tipos mas falando sem dar muitos detalhes, no Elm temos vários tipos predefinidos, por exemplo: Boolean, Int, Float, String, List, e nós também podemos criar nossos próprios tipos sempre que for necessário, dando um exemplo simples, se quisermos criar nosso próprio tipo booleano poderiamos fazer dessa forma:

type Booleano = Verdadeiro | Falso

Viu como é simples? Em um Custom Type nós definimos quais são os possíveis valores que ele pode assumir, separados por uma barra vertical |. Aqui vai mais um exemplo pra deixar mais claro:

--   <nome do tipo>  = <valor 1> | <valor 2> | <valor 3> | <valor 4> | <valor 5>
type Animal          = Dog       | Cat       | Cow       | Duck      | Fox

Agora mais um detalhe sobre os Custom Types, podemos associar dados à suas variações. Por exemplo, poderiamos descrever o progresso de uma requisição HTTP dessa maneira:

type HttpProgress
    = NotAsked
    | InProgress
    | Success Data
    | Error String

Presta atenção nos dois últimos valores, eles possuem um tipo após o nome do valor, isso quer dizer que a variaçãoSuccess possui um valor do tipo Data e a variação Error possui um valor do tipo String que nesse caso pode ser uma mensagem de erro. Por exemplos:

Success { username = "john.doe", lastName = "Doe" }
Error "Something went wrong and we couldn't find the user"

Já entendeu onde quero chegar? Se você pensou que vamos criar um tipo para a nossa msg, parabéns, você está certo. Então vamos lá:

init =
    { from = "BRL"
    , to = "EUR"
    , amount = 0
    , result = 0
    }

+ type Msg
+       = ChangeOriginCurrency String
+       | ChangeDestinyCurrency String
+       | ChangeAmount String
+       | SubmitForm

update msg model =
    model

Aqui definimos que nossa Msg pode assumir 4 possíveis valores:

ChangeOriginCurrency: Alterar a moeda de origem
ChangeDestinyCurrency: Alterar a moeda de destino
ChangeAmount: Alterar a quantia que será convertida
FormSubmitted: Clicar para calcular

ChangeOriginCurrency, ChangeDestinyCurrency e ChangeAmount vão receber o valor dos seus respectivos inputs.

Coletando o input do usuário

Antes de tudo vamos precisar coletar as informações que o usuário inseriu no formulário, para isso iremos utilizar a biblioteca Html.Events, é ela que possui funções como onClick, onInput, onSubmit e várias outras. Vamos começar importando o onInput e onSubmit:

module Main exposing (main)

import Browser
import Html exposing (..)
import Html.Attributes exposing (class, type_, value, selected)
+ import Html.Events exposing (onInput, onSubmit)

Nós utilizamos os Events da mesma forma que os Attributes, passando eles na lista do primeiro argumento de uma tag HTML. Esses eventos precisam de um parâmetro que será a msg a ser enviada para a função update, vamos começar adicionar o evento de onInput no campo de moeda de origem e passaremos a mensagem ChangeOriginCurrency:

[ label [ class "block text-gray-700 text-sm font-bold mb-2" ] [ text "Moeda de origem" ]
  , div [ class "relative" ]
  [ select
-   [ class selectClasses, value model.from ]
+   [ class selectClasses, value model.from, onInput ChangeOriginCurrency ]
    [ option [ value "BRL", selected (model.from == "BRL") ] [ text "Real" ] 
      , option [ value "USD", selected (model.from == "USD") ] [ text "Dólar americano" ]
      , option [ value "EUR", selected (model.from == "EUR") ] [ text "Euro" ] 
    ]
  ]
]

Talvez você tenha percebido que não passamos nenhum parâmetro para a msg ChangeOriginCurrency, isso se deve ao fato de que o onInput vai fazer isso para nós automaticamente. Agora vamos checar se isso está funcionando, vamos mudar o valor da moeda de origem e utilizar o debugger para ver se a mensagem foi emitida:

O valor do input da moeda de origem não mudou quando selecionamos outra moeda, isso aconteceu por quê ainda não implementamos isso na função update mas quando abrimos o Debugger (no menu superior direto) vimos que a mensagem foi enviada, e observe que a barra lateral esquerda mostra as duas mensagens que foram emitidas por que mudamos a moeda duas vezes.

Agora vamos adicionar as outras mensagens no nosso HTML para finalmente implementar o update.

Adicionando a mensagem de submit no formulário:

-, form [ class "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" ]
+, form [ onSubmit SubmitForm, class "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" ]

Adicionando a mensagem no input da moeda de destino:

[ label [ class "block text-gray-700 text-sm font-bold mb-2" ]
    [ text "Moeda de destino"
    ]
, div [ class "relative" ]
    [ select
-       [ class selectClasses, value model.to ]
+       [ class selectClasses, value model.to, onInput ChangeDestinyCurrency ]
        [ option [ value "USD", selected (model.to == "USD") ] [ text "Dólar americano" ]
        , option [ value "BRL", selected (model.to == "BRL") ] [ text "Real" ]
        , option [ value "EUR", selected (model.to == "EUR") ] [ text "Euro" ]
        ]
    ]
]

Adicionando a mensagem no input da quantia a ser convertida:

[ label [ class "block text-gray-700 text-sm font-bold mb-2" ]
    [ text "Quantidade"
    ]
-, input [ type_ "number", value (String.fromFloat model.amount), class "shadow appearence-none border rounded w-full py-2 px-3 text-gray" ] []
+, input [ type_ "number", onInput ChangeAmount, value (String.fromFloat model.amount), class "shadow appearence-none border rounded w-full py-2 px-3 text-gray" ] []
]

Código até agora: https://ellie-app.com/88LQtVdRPxka1.

Implementando a função update

Agora que todos os eventos estão no lugar, chegou o tão esperado momento de implementar o update, então vamos lâ:

update msg model =
-   model
+   case msg of
+       ChangeOriginCurrency currencyCode ->
+           { model | from = currencyCode }
+
+       ChangeDestinyCurrency currencyCode ->
+           { model | to = currencyCode }
+
+       ChangeAmount amount ->
+           { model | amount = amount }

Aha! Achou que não iriamos aprender nada novo? Te apresento o Pattern Matching.

Pattern Matching

O Pattern Matching está bem presente nas linguagens funcionais, no Elm ele aparece na forma case ... of e nos possibilita tratar diferentes "branchs" (possibilidades) de um determinado valor. Aqui vai um exemplo:

type Animal = Dog | Cat | Cow | Duck | Fox

makeSound animal =
    case animal of
        Dog -> "woof"
        Cat -> "meow"
        Cow -> "moo"
        Duck -> "quack"

A sintaxe não é muito complexa, iniciamos com case <nome da variável> of e em seguida listamos cada possível valor e após a seta (->) podemos retornar algo baseado no valor.

Um fato muito importante sobre o case ... of é que você obrigatóriamente precisa tratar todos os possíveis casos, se tentarmos compilar o código acima, o compilador vai nos avisar que esquecemos de tratar um dos possiveis valores (Fox):

Isso é uma das coisas que contribuem para que uma aplicação Elm nunca cause erros enquanto está sendo executada, o compilador faz com que seja impossível deixar pontas soltas. Para corrigir isso basta adicionar a "branch" que não foi tratada:

type Animal = Dog | Cat | Cow | Duck | Fox

makeSound animal =
    case animal of
        Dog -> "woof"
        Cat -> "meow"
        Cow -> "moo"
        Duck -> "quack"
+       Fox -> "Ring-ding-ding-ding-dingeringeding!"

O uso do case ... of não se limita a Custom Types, pode ser utilizado com vários outros tipos, como String, List, Dict e vários outros.

Com o case .. of também conseguimos acessar os valores associados a uma determinada branch, como fizemos com o nosso update:

update msg model =
    case msg of
    -- Nome da mensagem    Valor associado
    --       |                   |
    --       v                   V
        ChangeOriginCurrency currencyCode ->
    --                           ^
    --                           |
    --            Aqui embaixo utilizamos esse valor
    --                           |
    --                           V
            { model | from = currencyCode }

Agora voltando ao nosso código (que no momento está assim: https://ellie-app.com/88MrJPM5Bmza1), se tentarmos compilar receberemos o seguinte erro:

O compilador está dizendo que estamos definindo o amount com um valor do tipo String [1] mas que na verdade o amount é do tipo Float [2]. No final [3] do erro ele nos dá uma dica: "Quer converter uma String para Float? Use a função String.toFloat!". Perfeito! Era justamente isso que a gente precisava. De fato não estavamos convertendo os valores, observe o trecho seguinte:

ChangeAmount amount ->
    { model | amount = amount }

O ChangeAmount nos trás o valor como String por que é o que recebemos do input, logo precisaremos converter o amount para Float utilizando a função String.toFloat. Então vamos nessa:

update msg model =
    case msg of
        ChangeOriginCurrency currencyCode ->
            { model | from = currencyCode }

        ChangeDestinyCurrency currencyCode ->
            { model | to = currencyCode }

        ChangeAmount amount ->
-            { model | amount = amount }
+            { model | amount = String.toFloat amount }

Agora deve dar tudo certo né? Errado! Repara na mensagem de erro:

Novamente os tipos não combinam, dessa vez estamos passando o tipo Maybe Float [1] mas o esperado é Float [2]. Mais uma coisa nova pra você, o tipo Maybe.

Entendendo o Maybe

O Maybe é um tipo que representa um valor que talvez não exista. Ficou meio confuso né? Deixa eu dar alguns exemplos de "valores que talvez não existam":

Pegar o primeiro item de uma lista de números: O resultado dessa operação deve ser representado por um Maybe pois existe a possibilidade da lista não possuir o primeiro item, por exemplo quando ela estiver vazia.
Pegar o último item de uma lista de números: Mesma coisa do exemplo anterior, se a lista estiver vazia não existirá o último item, logo, o resultado deve ser representado por um Maybe.
Converter uma String para Float: Aqui é o caso que estamos enfrentando, existe a possibilidade de uma String não ser convertida para Float. Alguns exemplos:
- "10": pode ser convertido pois representa um número
- "Dez", "Elm": não pode ser convertido pois não é um número.

Percebeu o quanto esse tipo é importante? O Maybe possui duas branchs: Just value e Nothing:

type Maybe a = Just a | Nothing

Isso significa que um Maybe pode ter um valor (Just) ou nada (Nothing). Alguns exemplos para fixar melhor:

Primeiro item da lista [] (vazia): Nothing
Primeiro item da lista [1, 2, 3, 4]: Just 1
Convertendo "Elm" para float: Nothing
Convertendo "10" para float: Just 10

Podemos pegar o valor de um Maybe utilizando o case .. of:

case (String.toFloat "10") of
    Just value ->
        "O valor é " ++ (String.fromFloat value)
    Nothing ->
        "O resultado da conversão é inválido."

Agora voltando ao nosso conversor, vamos tratar o Maybe Float:

update msg model =
    case msg of
        ChangeOriginCurrency currencyCode ->
            { model | from = currencyCode }

        ChangeDestinyCurrency currencyCode ->
            { model | to = currencyCode }

        ChangeAmount amount ->
-            { model | amount = String.toFloat amount }
+            case String.toFloat amount of
+               Just value ->
+                   { model | amount = value }
+               Nothing ->
+                   model

Neste caso, se receber-mos Nothing não faremos nada e retornaremos a model sem modificações.

Agora clique para compilar, provavelmente não vai funciona pois não implementamos o SubmitForm.

O código atualizado está aqui: https://ellie-app.com/88MZ6t4bmnba1.

Calculando a conversão

Chegamos na última e principal função da nossa aplicação, agora vamos implementar a conversão das moedas.

Antes de tudo, precisamos dos valores das moedas, até agora não temos eles. Pra facilitar as coisas vamos inventar uma variável com alguns valores fictícios. Para isso vou utilizar uma estrutura de dados do tipo Dict para nos auxiliar.

Entendendo o Dict

O Dict é bem parecido com o Record que aprendemos no tutorial anterior. Ele possui chaves e valores mas suas chaves podem ser do tipo Int, Float, Time, Char, String e alguns outros.

Podemos criar um Dict dessa forma:

myDict =
    Dict.fromList [ ("chave1", 1), ("chave2", 2) ]

E temos funções para inserir, atualizar, e recuperar valores dele:

Dict.insert "chave3" 3 myDict
Dict.remove "chave3" myDict
Dict.get "chave3" myDict -- vai retornar um Maybe pois é possível que a chave não exista no Dict

Agora vamos criar algumas variáveis para as nossas moedas utilizando o Dict, primeiro vamos importar o módulo:

module Main exposing (main)

import Browser
+ import Dict
import Html exposing (..)
import Html.Attributes exposing (class, selected, type_, value)
import Html.Events exposing (onInput, onSubmit)

Em seguida vamos criar as variáveis:

selectClasses =
    "block appearance-none w-full border shadow py-2 px-3 pr-8 rounded"

+ brl =
+     Dict.fromList
+         [ ( "EUR", 0.21 )
+         , ( "USD", 0.23 )
+         ]
+
+ usd =
+     Dict.fromList
+         [ ( "EUR", 0.92 )
+         , ( "BRL", 4.42 )
+         ]
+
+ eur =
+     Dict.fromList
+         [ ( "USD", 1.09 )
+         , ( "BRL", 4.81 )
+         ]
+
+ currencies =
+     Dict.fromList
+         [ ( "BRL", brl )
+         , ( "EUR", eur )
+         , ( "USD", usd )
+         ]

init =
    { from = "BRL"
    , to = "EUR"
    , amount = 0
    , result = 0
    }

E agora no update implementaremos a conversão da seguinte maneira:

update msg model =
    case msg of
        ChangeOriginCurrency currencyCode ->
            { model | from = currencyCode }

        ChangeDestinyCurrency currencyCode ->
            { model | to = currencyCode }

        ChangeAmount amount ->
            case String.toFloat amount of
                Just value ->
                    { model | amount = value }

                Nothing ->
                    model
+
+       SubmitForm ->
+           case Dict.get model.from currencies of
+               Just availableCurrencies ->
+                   case Dict.get model.to availableCurrencies of
+                       Just toCurrency ->
+                           { model | result = toCurrency * model.amount }
+
+                       Nothing ->
+                           model
+
+               Nothing ->
+                   model

Pronto! Copia esse código, clica para compilar, adiciona um valor para converter e clica para converter:

Mas nem tudo são flores, o código está um pouco confuso né?

        SubmitForm ->
            -- Aqui vamos pegar os valores de conversão da moeda de origem
            -- Por exemplo, se `model.from` for "BRL":
            -- Dict.get "BRL" currencies
            case Dict.get model.from currencies of
                    -- Caso essa moeda exista no `currencies` teremos acesso a ela
                    -- no `Just`
                Just availableCurrencies ->
                    -- Utilizando o resultado `availableCurrencies` vamos tentar pegar o valor
                    -- da moeda destino.
                    -- Por exemplo, se `model.to` for "EUR":
                    -- Dict.get "EUR" availableCurrencies
                    case Dict.get model.to availableCurrencies of
                         -- Se conseguir-mos pegar o valor, calcular o resultado
                         -- multiplicando o valor da moeda (destinyCurrencyValue) pela
                         -- quantia a ser convertida (model.amount)
                        Just destinyCurrencyValue ->
                            { model | result = destinyCurrencyValue * model.amount }
                        -- Caso a moeda não seja encontrada, iremos definir o `result` como 0
                        Nothing ->
                            { model | result = 0 }
                -- Caso a moeda não seja encontrada, iremos definir o `result` como 0
                Nothing ->
                    { model | result = 0 }

Temos três case .. of aninhados e isso dificulta um pouco a legibilidade e a manutenção do código, então vamos melhorar isso um pouco. Fique a vontade para pegar o código atualizado: https://ellie-app.com/88NKHgZrtQWa1.

Utilizando o `let ... in`

O let ... in permite que a gente defina valores dentro de uma expressão, assim poderemos guardar valores para utilizar depois. Por exemplo:

soma a b =
    let
        resultado = a + b
    in
        "O resultado é: " ++ (String.fromInt resultado)

Agora vamos refatorar a nossa função:

SubmitForm ->
-   case Dict.get model.from currencies of
-       Just availableCurrencies ->
-           case Dict.get model.to availableCurrencies of
-               Just destinyCurrencyValue ->
-                   { model | result = destinyCurrencyValue * model.amount }
-               Nothing ->
-                   model
-       Nothing ->
-           model
+ let
+     availableCurrencies =
+         Maybe.withDefault Dict.empty (Dict.get model.from currencies)
+
+     destinyCurrencyValue =
+         Maybe.withDefault 0 (Dict.get model.to availableCurrencies)
+
+     result =
+         destinyCurrencyValue * model.amount
+ in
+     { model | result = result }

BEM melhor não é mesmo? Para isso, além do let ... in utilizei a função Maybe.withDefault para facilitar as coisas por aqui. O Maybe.withDefault nos permite definir um valor padrão caso o segundo parâmetro seja Nothing.

Aqui dizemos que o valor padrão para o resultado de Dict.get model.from currencies é um Dict vazio (Dict.empty):

availableCurrencies =
    Maybe.withDefault Dict.empty (Dict.get model.from currencies)

Em seguida definimos que o valor padrão para o resultado de Dict.get model.to availabileCurrencies é 0 (zero):

destinyCurrencyValue =
    Maybe.withDefault 0 (Dict.get model.to availableCurrencies)

E por fim calculamos o resultado e atualizamos a model:

    result =
        destinyCurrencyValue * model.amount
in
    { model | result = result }

Ainda dá para melhorar esse código mais um pouquinho mas vou deixar isso para os próximos tutoriais.

Conclusão

Finalmente implementamos todas as funcionalidades do conversor, agora ele de fato converte as moedas 🎉. Mas ainda temos vários pontos para melhorar e que poderemos explorar novas APIs e conceitos do Elm.

Esse tutorial foi bastante denso e cheio de coisas novas, então não fique chateado caso não tenha entendido tudo, alguns desses conceitos podem demorar dias para serem de fato aprendidos. Sugiro que você tente fazer uma outra aplicação utilizando tudo o que aprendeu até agora, dessa forma você irá escalar a curva de aprendizado do Elm bem mais rápido.

No próximo tutorial iremos aprender a ler assinatura de tipos e tipar nossa aplicação, assim o compilador irá nos ajudar mais. Eu particularmente estou bastante animado com o que está por vir.

Como sempre, o código atualizado está disponível neste link: https://ellie-app.com/88NYGqX6QzVa1. Quando a parte 4 estiver pronta irei deixar o link aqui. Até a próxima!

Elm na prática - The Elm Architecture, Records, funções e exibindo dados da Model

Clayton Fidelis — Tue, 03 Mar 2020 16:30:09 +0000

Neste tutorial vamos dar vida ao nosso conversor de moedas, se você não viu a parte 1 dessa série de tutoriais, corre lá e dá uma olhada, o link para o código de onde paramos está disponível neste link: https://ellie-app.com/88hp8WgJd5Ca1.

Parte 1: Imports, variáveis e o módulo HTML
Parte 2: The Elm Architecture, Records, funções e exibindo dados da Model (Você está aqui)
Parte 3: Events, Pattern Matching, Maybe, Dict e implementando a lógica do conversor
Parte 4: Type Signatures e adicionando tipos à nossa aplicação (não publicado)
Parte 5: Http, Commands, Browser.element e utilizando dados de uma API (não publicado)
Parte 6: Pipe e HttpBuilder (não publicado)
Parte 7: Configurando o ambiente de desenvolvimento local (não publicado)
Parte 8: Utilizando ports e flags (não publicado)
Parte 9: Trabalhando com rotas (não publicado)
Parte 10: Adicionando testes (não publicado)

The Elm Architecture

Antes de colocar-mos a mão no código, vamos entender como a arquitetura do Elm funciona. Até agora só renderizamos uma tela utilizando as funções do pacote HTML, mas só com isso não vamos conseguir construir algo realmente útil, onde um usuário pode interagir com a nossa aplicação. Para isso, vamos utilizar algumas funções do pacote Browser que implementam a Arquitetura do Elm.

A forma mais básica dessa arquitetura é dividida em 3 partes:

Model

A Model representa o estado inicial da nossa aplicação, é nela que informamos como será a estrutura de dados da nossa aplicação. Usando nosso conversor como exemplo, a model dele será assim:

init =
    { from = "BRL"
    , to = "USD"
    , amount = 0
    }

view

A view é uma função que recebe a model da aplicação como parâmetro e retorna um Html. Essa parte já vimos no tutorial anterior, a única diferença aqui é que com a função view podemos trabalhar com os dados do estado da aplicação. Continuando o exemplo anterior, poderiamos utilizar a model para exibir seus dados para o usuário desta forma:

view model =
    text
        ("Convertendo " ++ String.fromFloat model.amount ++ " " ++ model.from ++ " para " ++ model.to)

update

A função update é o cérebro da arquitetura, é responsável por fazer as atualizações na model e precisa de dois parâmetros para funcionar, o primeiro é uma "mensagem" e o segundo é a model atual. Seguindo com o exemplo do nosso contador, uma forma muito simples de escrever a funçāo update seria essa:

update message model =
    if message === "Mudar moeda de origem para BRL" then
        { model | from = "BRL" }
    else if message === "Mudar moeda de origem para USD" then
        { model | from = "USD" }
    else
        model

Utilizamos a mensagem para decidir como vamos atualizar a model, mas não de apegue a esse exemplo, essa é uma forma bem básica para mostrar como implementar uma função update e em breve aprenderemos uma forma melhor de implementar essa função.

Juntando tudo

Para que as 3 partes possam conversar, precisaremos utilizar a função Browser.sandbox:

main =
    Browser.sandbox { init = init, view = view, update = update }

O sandbox é a forma mais simples de utilizar a arquitetura Elm, logo, possui algumas limitações, como por exemplo, uma aplicação sandbox não consegue se comunicar com o "mundo exterior", ou seja, você não vai conseguir fazer requisições para servidores ou chamar funções do JavaScript (sim, isso é possível). Por ora, ela será perfeita para nosso caso de uso.

Toda vez que o usuário utiliza alguma função na nossa aplicação, a view vai emitir uma mensagem desencadeando uma série de atualizações:

Implementando a arquitetura Elm

Agora que já entendemos como funciona a arquitetura do Elm, vamos implementar ela no nosso conversor.

Primeiro vamos importar o módulo Browser, ele possui a função sandbox que vai ser responsável por juntar a view, model e update:

module Main exposing (main)

+ import Browser
import Html exposing (..)
import Html.Attributes exposing (class, type_, value)

Em seguida vamos criar a função update e o init:

selectClasses =
    "block appearance-none w-full border shadow py-2 px-3 pr-8 rounded"

+ init =
+    { from = "BRL"
+    , to = "EUR"
+    , amount = 0
+    , result = 0
+    }

+ update msg model =
+    model

main =

Agora vamos renomear a função main para view e fazer com que ela receba a model como parãmetro:

- main =
+ view model =

E para finalizar, no final do arquivo vamos criar a nova main utilizando o Browser.sandbox para colocar tudo em ordem:

main =
    Browser.sandbox
        { init = init
        , view = view
        , update = update
        }

Bom, com esse novo código introduzimos uma série de novos conceitos, então vamos por partes:

Record

Quando criamos o init, utilizamos uma estrutura de dados chamada Record, ela possui chaves e valores para representar alguma informação, por exemplo:

kobe =
    { firstName = "Kobe", lastName = "Bryant", number = 8, team = "Lakers", championships = 5 }

A sintaxe é simples, iniciamos um record utilizando uma chave ({) e em seguida informamos quais são as "chaves" e "valores" que esse record possui, e cada par de chave e valor é separado por vírgula e no final fechamos a chave (}).

myRecord =
    { chave1 = "Valor 1", chave2 = "Valor 2", chave3 = "Valor 3" }

Acessando valores de um Record

Temos duas formas de acessar os valores de um Record no Elm, a primeira é a forma mais tradicional e que está presente em todas as linguagens de programação:

kobe.firstName
kobe.lastName
kobe.number

A segunda forma de acessar um valor de um Record é através de funções que o Elm disponibiliza com o nome da propriedade do record:

.firstName kobe
.lastName kobe
.number kobe

Um ponto que vale muito a pena mencionar é que em nenhuma das duas formas permite que você tente acessar uma chave que não existe no record, caso tente, o compilador vai te alertar. Por exemplo:

kobe.middleName -- middleName não existe no record, logo não irá compilar
.height kobe -- height não existe no record, logo não irá compilar

Atualizando valores de um Record

A forma de atualizar um valor de um Record é diferente da maioria das outras linguagens de programação, a forma padrão de fazer isso na maioria delas é definindo o valor diretamente, algo parecido com isso:

kobe.number = 24

No Elm, isso não é permitido, como utilizamos estrutura de dados imutáveis (falaremos sobre isso no futuro), não podemos modificar um valor. Para fazer isso no Elm, precisamos criar uma nova cópia do valor anterior mas atualizando os campos que precisamos, no Elm fazemos isso dessa maneira:

{ kobe | number = 24 }

Lê-se: "Pega tudo do record kobe e atualiza a propriedade number com o valor 24".

Também podemos atualizar várias propriedades ao mesmo tempo:

{ kobe | number = 10, team = "USA National Team" }

Também vale salientar que não podemos adicionar uma propriedade que não existe no record original, caso a gente tente, o código não irá compilar.

{ kobe | height = 198 } -- Não irá compilar pois a propriedade height não existe no record original

Funções

Outro conceito que introduzimos aqui foram as funções, talvez você nem tenha percebido pois a sintaxe delas é bem limpa, por exemplo:

soma a b = a + b

subtrai a b = a - b

multiplica a b = a * b

divide a b = a / b

Viu como é simples? Não utilizamos parênteses, vírgulas ou chaves para definir uma função. Primeiro definimos o nome da função, em seguida seus argumentos separados por espaço, após os argumentos utilizamos o sinal de igualdade (=) para separar a definição da função e o corpo. Tudo após o sinal de igualdade faz parte do corpo da função.

<nome da funcao> <primeiro argumento> <segundo argumento> = <corpo>
soma              a                    b                  = a + b

Ah, reparou que também não utilizamos nenhuma return? No Elm, o valor no fim de uma expressão sempre será retornado.

Talvez você esteja se perguntando como sabemos que o corpo de uma função terminou se a gente não utilizou nenhum caractère para delimitar o corpo, a resposta é simples, o corpo é delimitado pela identação do código:

soma a b =
    a + b
    -- fim da função "soma"

subtrai a b =
    a - b
    -- fim da função "subtrai"

Agora voltando ao nosso exemplo. Lembra que criamos a função update? Dá uma olhadinha nela agora, aposto que você vai entender melhor.

update msg model =
        model

Repara que nós criamos ela e imediatamente retornamos o valor da model, vamos deixar ela assim por enquanto só para conseguirmos compilar a aplicação, já já iremos implementar a lógica dela.

Acredito que com essa explicação conseguiremos prosseguir sem muitos problemas, mas antes, clique para compilar o código e vamos nos certificar de que irá compilar sem erros. Tudo certo? Então vamos continuar.

Renderizando a model na view

Agora vamos utilizar a view para exibir os dados da model, então vamos exibir o valor result da model (que no futuro iremos utilizar para salvar o resultado da conversão) logo após o botão:

                , div [ class "mb-6" ]
                    [ label [ class "block text-gray-700 text-sm font-bold mb-2" ]
                        [ text "Quantidade"
                        ]
                    , input [ type_ "number", class "shadow appearence-none border rounded w-full py-2 px-3 text-gray" ] []
                    ]
                , div [ class "flex w-full" ]
                    [ button [ class "bg-blue-500 w-full hover:bg-blue-700 text-white font-bold py-2 px-4" ] [ text "Converter" ] ]
+               , div [ class "flex w-full text-center mt-5 text-gray-700 text-sm" ]
+                   [ text ("Convertendo " ++ String.fromFloat model.amount ++ " " ++ model.from ++ " para " ++ model.to ++ " totalizando " ++ String.fromFloat model.result ++ " " ++ model.to) ]
               ]

Após compilar nossa tela ficará assim:

Repara que agora estamos exibindo os dados da model no final do formulário. Você pode pegar o código atualizado neste link.

Percebeu que a moeda de destino está exibindo "Dólar americano" quando deveria estar exibindo o valor que está na model ("Euro")? Isso acontece porque não estamos utilizando a model nos valores dos inputs. Vamos corrigir isso agora:

-- primeiro vamos importar o atributo "selected"
- import Html.Attributes exposing (class, type_, value)
+ import Html.Attributes exposing (class, type_, value, selected)

            , form [ class "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" ]
                [ div [ class "mb-4" ]
                    [ label [ class "block text-gray-700 text-sm font-bold mb-2" ]
                        [ text "Moeda de origem" ]
                    , div [ class "relative" ]
                        [ select
-                           [ class selectClasses ]
-                           [ option [ value "BRL"] [ text "Real" ] 
-                           , option [ value "USD"] [ text "Dólar americano" ]
-                           , option [ value "EUR"] [ text "Euro" ]
+                           [ class selectClasses, value model.from ]
+                           [ option [ value "BRL", selected (model.from == "BRL") ] [ text "Real" ]
+                           , option [ value "USD", selected (model.from == "USD") ] [ text "Dólar americano" ]
+                           , option [ value "EUR", selected (model.from == "EUR") ] [ text "Euro" ]
                            ]
                        ]
                    ]
                , div [ class "mb-4" ]
                    [ label [ class "block text-gray-700 text-sm font-bold mb-2" ]
                        [ text "Moeda de destino"
                        ]
                    , div [ class "relative" ]
                        [ select
-                           [ class selectClasses ]
-                           [ option [ value "USD"] [ text "Dólar americano" ]
-                           , option [ value "BRL"] [ text "Real" ]
-                           , option [ value "EUR"] [ text "Euro" ]
+                           [ class selectClasses, value model.to ]
+                           [ option [ value "USD", selected (model.to == "USD") ] [ text "Dólar americano" ]
+                           , option [ value "BRL", selected (model.to == "BRL") ] [ text "Real" ]
+                           , option [ value "EUR", selected (model.to == "EUR") ] [ text "Euro" ]
                            ]
                        ]
                    ]
                , div [ class "mb-6" ]
                    [ label [ class "block text-gray-700 text-sm font-bold mb-2" ]
                        [ text "Quantidade"
                        ]
-                   , input [ type_ "number", class "shadow appearence-none border rounded w-full py-2 px-3 text-gray" ] []
+                   , input [ type_ "number", value (String.fromFloat model.amount), class "shadow appearence-none border rounded w-full py-2 px-3 text-gray" ] []
                    ]

Uma rápida explicação

O atributo selected precisa que seu parâmetro seja um valor boleano, então para conseguir esse valor boleano, verificamos se o valor selecionado na model é o mesmo que o valor da option:

selected (model.from == "BRL")
selected (model.to == "BRL")

No Elm, fazemos comparação de valores utilizando == (dois sinais de igualdade). Agora no input de quantidade, utilizamos a função String.fromFloat pois o atributo value precisa que seu parâmetro seja do tipo string.

value (String.fromFloat model.amount)

Agora quando clicar-mos para compilar, todos os valores deverão ser exibidos corretamente:

Conclusão

Vou encerrar a parte 2 por aqui para que não fique muito extenso. Leve o tempo que precisar para entender o que aprendemos nesse tutorial. Hoje você aprendeu conceitos muito importantes (The Elm Architecture, funções e records) e que serão utilizados com muita frequência daqui pra frente.

No próximo tutorial vamos (finalmente) adicionar a lógica para calcular a conversão das moedas. O código final dessa parte está disponível neste link e basta clicar aqui para iniciar o próximo tutorial.

Elm na prática - Imports, variáveis e o módulo HTML

Clayton Fidelis — Tue, 03 Mar 2020 16:29:45 +0000

Parte 1: Imports, variáveis e o módulo HTML (Você está aqui)
Parte 2: The Elm Architecture, Records, funções e exibindo dados da Model
Parte 3: Events, Pattern Matching, Maybe, Dict e implementando a lógica do conversor
Parte 4: Type Signatures e adicionando tipos à nossa aplicação (não publicado)
Parte 5: Http, Commands, Browser.element e utilizando dados de uma API (não publicado)
Parte 6: Pipe e HttpBuilder (não publicado)
Parte 7: Configurando o ambiente de desenvolvimento local (não publicado)
Parte 8: Utilizando ports e flags (não publicado)
Parte 9: Trabalhando com rotas (não publicado)
Parte 10: Adicionando testes (não publicado)

Elm é uma linguagem de programação para front-end que chama muita atenção por prometer não causar erros em tempo de execução, isso é possível por quê ela é uma linguagem fortemente tipada. Além disso, ela possui um compilador extremamente sofisticado e super útil que vai nos ajudar bastante no desenvolvimento.

No começo, a sintaxe parece ser bizarra, e caso você nunca tenha utilizado uma linguagem funcional vai se deparar com vários novos conceitos para aprender: funções puras, imutabilidade, monads e muitas outras coisas, mas posso te contar um segredo? Você não precisa entender tudo isso para começar a por a mão na massa. Apesar de parecer muita coisa, o que nos faz criar uma certa "resistência" ao tentar aprender a linguagem é o fato dela ser totalmente diferente das outras soluçōes mais utilizadas no mercado atualmente, mas te garanto que ela é bem mais simples do que parece.

Nesta série de tutoriais, vamos quebrar essa barreira, pretendo te passar tudo que eu sei e da forma mais compreensível possível. Para isso, vamos construir uma aplicação do zero sem perder horas e horas tentando entender cada um dos conceitos citados anteriormente, o importante agora é praticar e sentir os benefícios que a linguagem tem a oferecer.

Iremos construir uma aplicação bem simples mas que vai além do exemplo de contador que encontramos na documentação oficial, iremos codificar um simples conversor de moedas, mas que com ele aprenderemos todo o básico do Elm. Vamos aprender a usar condicionais, exibir elementos no navegador, reagir a ações do usuário, coletar texto de formulários. Começaremos utilizando apenas o básico e no decorrer da série iremos utilizar novas tecnicas e novas formas de solucionar os problemas.

A aplicaçāo terá basicamente uma funcionalidade, usuário ira escolher uma moeda de origem, informará o quanto ele quer converter, nos dirá qual será a moeda de destino e então nossa aplicação fará a conversão. Vamos começar utilizando valores estáticos para as moedas mas no decorrer dessa série iremos aprender a como pegar dados de APIs e utilizá-los.

Ambiente de desenvolvimento

Por enquanto não vamos instalar nada no nosso computador, desenvolveremos tudo no navegador utilizando o Ellie App, uma IDE para Elm diretamente no browser. Para acessar a IDE, basta clicar neste link. No decorrer da série vamos instalar tudo na nossa máquina, apesar do processo não ser um bixo de 7 cabeças preferi postergar ele para quando estiver-mos mais familiarizados com a linguagem.

Caso você se depare com uma mensagem antes de aparecer o editor de texto, basta clicar no botão "Accept terms" que em seguida ele será exibido:

No canto superior esquerdo temos o editor de código Elm, abaixo dele, o editor de código HTML e na direita podemos visualizar o resultado ou, caso tenhamos algum erro, as mensagens do compilador (spoiler: são incríveis). Ah, importante lembrar que o editor salva seu código na nuvem, e para não perder ele, lembre de salvar o link caso você vá fechar o navegador, e o link muda cada vez que você salva o código. No decorrer da serie vamos aprender a configurar o ambiente no nosso proprio computador. Agora chega de conversa e vamos colocar a mão no código.

Mão na massa

Antes de tudo, vamos apagar todo o código que esta no editor de código Elm. Vamos começar com o clássico Hello World, só pra ver a coisa funcionando, talvez pareça estranho a primeira vista, mas garanto que jaja tudo vai fazer sentido.

Digite (ou cole) o codigo a seguir e clique no botão "Compile" para vermos nosso primeiro Hello World:

module Main exposing (main)

import Html exposing (text)

main =
    text "Hello World"

module Main exposing (main)

Na primeira linha definimos o nome do Módulo e o que vamos expor desse modulo. No Elm, é obrigatório definir o módulo na primeira linha do arquivo. Os valores dentro dos parêntesis após a palavra exposing ficarão disponíveis para que outros módulos possam importar.

import Html exposing (text)

Na terceira linha informamos que queremos usa o pacote Html, e dentro desse pacote eu quero o valor text. A sintaxe não é muito familiar, então vamos entender melhor, existem 3 maneiras de importar um módulo no Elm:

1. Importando o módulo

import Html

Importando dessa maneira, teremos que utilizar o nome do pacote como namespace para chamar seus valores e funções, por exemplo:

Html.text
Html.div
Html.span
Html.img

2. Importando o módulo expondo seus valores e/ou funções

import Html exposing (text, div, span, img)

Importando dessa maneira, podemos utilizar as funções e valores diretamente, por exemplo:

text
div
span
img

3. Importando um módulo e expondo todos os seus valores e funções

Por último temos uma forma de exportar todos os valores e funções de um módulo de uma só vez:

import Html exposing (..)

Dessa forma, ao invés de deixar explícito quais itens do módulo nós queremos, utilizamos o .. (dois pontos) para informar que queremos tudo desse módulo. E podemos utilizar os valores igual a forma #2.

main =
    text "Hello World"

Agora voltando ao exemplo, na linha 5 criamos uma variável com o nome main, com isso, o Elm sabe que a aplicação vai ser inicializada por essa função.

E por fim, na linha 6, utilizamos a função text do pacote Html para renderizar a mensagem "Hello World" na página, perceba que no Elm, não utilizamos parênteses para executar funcões, basta digitar o nome da função e em seguida informar os valores para seus parâmetros, nesse caso, uma string.

Entendendo o módulo HTML

Agora que já sabemos como importar módulos, suas funcões e como executá-las, vamos dar um passo adiante e entender como o módulo HTML do Elm funciona.

O pacote HTML, como o próprio nome já diz, é responsável por renderizar as tags HTMLs no navegador. Agora vamos tentar utilizar algumas tags, até o momento só utilizamos a função text que só serve para renderizar textos.

Vamos tentar utilizar a tag div, como já sabemos, precisamos importar essa função do pacote HTML:

-import Html exposing (text)
+import Html exposing (text, div)

E agora vamos utilizar ela lá no main do nosso código:

main =
    div "Hello World"

Clique em "Compile" e veremos o que vai acontecer...

Parece que não deu certo. Agora conhecemos o Elm Compiler, uma das melhores features da linguagem. O que vimos no lado direito foi um erro de compilação, nesse caso ocorreu por quê a função div não está esperando uma string como primeiro parâmetro, mas uma lista de atributos. Como sabemos disso? O compilador nos diz tudo.

Entendo as mensagens de erro do compilador

Essa é uma mensagem de erro do compilador do Elm, bem diferente do que estamos acostumados não é? Agora vamos dissecar essa mensagem de erro.

Na primeira linha temos o tipo de erro ocorreu, no caso é um Type Mismatch (incompatibilidade de tipos).

Na segunda linha o compilador nos diz em qual linha o erro ocorreu, no caso, linha 6 e coluna 6.

A partir da terceira linha o compilador nos dá mais detalhes de uma forma bem amigável e detalhada sobre o que está errado, perceba que o compilador se comunica da mesma forma que uma pessoa que estivesse ao seu lado falaria.

Agora que já sabemos que o primeiro argumento da função div é uma lista de atributos (style, class, id, src, href usaremos eles em breve.) vamos tentar novamente passando uma lista vazia:

main =
    div [] "Hello World"

Agora clique para compilar (🤞)... Outro erro:

Bom, o tipo do erro é o mesmo do anterior (Type Mismatch). Agora o compilador nos diz que o segundo argumento da função div é do tipo String (de fato é) mas a div precisa que o segundo argumento seja List (Html.Html msg), uma lista de html.

Agora tentaremos de novo passando como segundo argumento uma lista de HTML:

main =
    div [] [ text "Hello World" ]

Clique para compilar, dessa vez vai funcionar. Mas aparentemente nada mudou né? Bom, visualmente o resultado é o mesmo, mas vamos inspecionar o HTML para notarmos a diferença:

Reparou que agora o texto "Hello world" está dentro de uma tag div? Pois é, é isso que o pacote HTML faz, transforma nosso código Elm em tags HTML que podem ser renderizadas no browser. Agora vamos trocar a div para um botão só para ter certeza que um botão irá aparecer:

Utilizando atributos HTML

Lembra que o primeiro parâmetro de uma tag HTML no Elm é uma lista de atributos? Então vamos aprender a utilizá-los agora.

Podemos importar os atributos através do pacote Html.Attributes, vou utilizar o atributo style como exemplo:

module Main exposing (main)

import Html exposing (text, div)
import Html.Attributes exposing (style)

main =
    div [ style "color" "red" ] [ text "Hello World" ]

Para adicionar mais atributos, basta separá-los com virgulas:

module Main exposing (main)

import Html exposing (div, text)
import Html.Attributes exposing (class, style)


main =
    div [ style "color" "red", style "background-color" "blue", class "hello-world" ] [ text "Hello World" ]

Combinando várias tags HTML

Como já vimos anteriormente, o segundo parâmetro das tags HTML é uma lista de outras tags HTML, por exemplo:

module Main exposing (main)

import Html exposing (div, span, text)
import Html.Attributes exposing (style)


main =
    div []
        [ span [ style "color" "blue" ] [ text "Hello " ]
        , span [ style "color" "green" ] [ text "World" ]
        ]

Com excessão da função text, todas as tags to pacote Html recebem os mesmos tipos como parâmetro: Primeiro uma lista de atributos (do pacote Html.Attributes) e uma lista de outras tags.

Criando o HTML da nossa aplicação

Agora que já sabemos utilizar o pacote HTML, vamos dar uma acelerada e criar o esqueleto da nossa aplicação:

Primeiro, vou mudar o import do Html para que possamos utilizar tudo dele e alguns atributos que também vamos precisar:

- import Html exposing (div, span, text)
+ import Html exposing (..)
+ import Html.Attributes exposing(value, type_, class)

Em seguida vou adicionar o novo código da funçāo main:

main =
    div
-       [ span [ style "color" "blue" ] [ text "Hello " ]
-       , span [ style "color" "green" ] [ text "World" ]
-       ]
+        [ div []
+           [ h1 [] [ text "Conversor de Moedas" ]
+           , form []
+               [ div []
+                   [ label []
+                       [ text "Moeda de origem" ]
+                   , div []
+                       [ select []
+                           [ option [ value "BRL" ] [ text "Real" ]
+                           , option [ value "USD" ] [ text "Dólar americano" ]
+                           , option [ value "EUR" ] [ text "Euro" ]
+                           ]
+                       ]
+                   ]
+               , div []
+                   [ label [] [ text "Moeda de destino" ]
+                   , div []
+                       [ select []
+                           [ option [ value "USD" ] [ text "Dólar americano" ]
+                           [ option [ value "BRL" ] [ text "Real" ]
+                           , option [ value "EUR" ] [ text "Euro" ]
+                           ]
+                       ]
+                   ]
+               , div []
+                   [ label [] [ text "Quantidade" ]
+                   , input [ type_ "number" ] []
+                   ]
+               , div [] [ button [] [ text "Converter" ] ]
+               ]
+           ]
       ]

Então o código final ficará assim:

module Main exposing (main)

import Html exposing (..)
import Html.Attributes exposing (value, type_, class)

main =
    div []
        [ div []
            [ h1 [] [ text "Conversor de Moedas" ]
            , form []
                [ div []
                    [ label []
                        [ text "Moeda de origem" ]
                    , div []
                        [ select []
                            [ option [ value "BRL" ] [ text "Real" ]
                            , option [ value "USD" ] [ text "Dólar americano" ]
                            , option [ value "EUR" ] [ text "Euro" ]
                            ]
                        ]
                    ]
                , div []
                    [ label [] [ text "Moeda de destino" ]
                    , div []
                        [ select []
                            [ option [ value "USD" ] [ text "Dólar americano" ]
                            , option [ value "BRL" ] [ text "Real" ]
                            , option [ value "EUR" ] [ text "Euro" ]
                            ]
                        ]
                    ]
                , div []
                    [ label [] [ text "Quantidade" ]
                    , input [ type_ "number" ] []
                    ]
                , div [] [ button [] [ text "Converter" ] ]
                ]
            ]
        ]

O código ainda está um pouco confuso né? Nada de pânico, isso é normal, com o tempo nos, apenas lembre do que aprendemos anteriormente, cada tag HTML recebe uma lista de atributos como primeiro parâmetro e uma lista de outras tags HTML como segundo parâmetro.

Agora é só clicar para compilar para ver esse HTML em ação:

Horrível né? Mas não vai ficar assim por muito tempo.

Utilizando bibliotecas CSS

Para deixar o nosso app mais bonito e não perder muito tempo estilizando, vamos utilizar uma biblioteca CSS, hoje vou escolher a Tailwind CSS. Para isso vamos importar o CSS no arquivo HTML do projeto (o HTML fica na parte inferior esquerda do Ellie):

<html>
<head>
  <style>
+    body {
+      background-color: #edf2f7;
+    }
        /* you can style your program here */
  </style>
+ <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <main></main>
  <script>
    var app = Elm.Main.init({ node: document.querySelector('main') })
    // you can use ports and stuff here
  </script>
</body>
</html>

Depois de adicionar o CSS, vamos utilizá-lo no nosso código Elm:

module Main exposing (main)

import Html exposing (..)
import Html.Attributes exposing (class, type_, value)


main =
    div [ class "flex justify-center py-10" ]
        [ div [ class "w-full max-w-xs" ]
            [ h1 [ class "text-center text-2xl mb-6" ] [ text "Conversor de Moedas" ]
            , form [ class "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" ]
                [ div [ class "mb-4" ]
                    [ label [ class "block text-gray-700 text-sm font-bold mb-2" ]
                        [ text "Moeda de origem" ]
                    , div [ class "relative" ]
                        [ select
                            [ class "block appearance-none w-full border shadow py-2 px-3 pr-8 rounded" ]
                            [ option [ value "BRL"] [ text "Real" ] 
                            , option [ value "USD"] [ text "Dólar americano" ]
                            , option [ value "EUR"] [ text "Euro" ] 
                            ]
                        ]
                    ]
                , div [ class "mb-4" ]
                    [ label [ class "block text-gray-700 text-sm font-bold mb-2" ]
                        [ text "Moeda de destino"
                        ]
                    , div [ class "relative" ]
                        [ select
                            [ class "block appearance-none w-full border shadow py-2 px-3 pr-8 rounded" ]
                            [ option [ value "USD" ] [ text "Dólar americano" ]
                            , option [ value "BRL" ] [ text "Real" ] 
                            , option [ value "EUR" ] [ text "Euro" ] 
                            ]
                        ]
                    ]
                , div [ class "mb-6" ]
                    [ label [ class "block text-gray-700 text-sm font-bold mb-2" ]
                        [ text "Quantidade"
                        ]
                    , input [ type_ "number", class "shadow appearence-none border rounded w-full py-2 px-3 text-gray" ] []
                    ]
                , div [ class "flex w-full" ]
                    [ button [ class "bg-blue-500 w-full hover:bg-blue-700 text-white font-bold py-2 px-4" ] [ text "Converter" ] ]
                ]
            ]
        ]

Agora o nosso App parece estar um pouco mais bonito:

Você não precisa entender essas classes CSS para esse tutorial, mas caso queira saber mais, da uma olhada na documentação do Tailwind.

Aprendendo a criar variáveis

Reparou que algumas tags possuem as mesmas classes? Para evitar duplicar código, vamos criar uma variável com esses valores.

Primeiro vamos criar a variável selectClasses que vai possuir as classes da tag select, vamos colocá-la logo acima da função main:

selectClasses =
    "block appearance-none w-full border shadow py-2 px-3 pr-8 rounded"

main =

-- restante do código

Em seguida vamos substituir as stringscom o valor da nossa variável:

div [ class "flex justify-center py-10" ]
        [ div [ class "w-full max-w-xs" ]
            [ h1 [ class "text-center text-2xl mb-6" ] [ text "Conversor de Moedas" ]
            , form [ class "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" ]
                [ div [ class "mb-4" ]
                    [ label [ class "block text-gray-700 text-sm font-bold mb-2" ]
                        [ text "Moeda de origem" ]
                    , div [ class "relative" ]
                        [ select
-                           [ class "block appearance-none w-full border shadow py-2 px-3 pr-8 rounded" ]
+                           [ class selectClasses ]
                            [ option [ value "BRL" ] [ text "Real" ] 
                            , option [ value "USD" ] [ text "Dólar americano" ]
                            , option [ value "EUR" ] [ text "Euro" ] 
                            ]
                        ]
                    ]
                , div [ class "mb-4" ]
                    [ label [ class "block text-gray-700 text-sm font-bold mb-2" ]
                        [ text "Moeda de destino"
                        ]
                    , div [ class "relative" ]
                        [ select
-                           [ class "block appearance-none w-full border shadow py-2 px-3 pr-8 rounded" ]
+                           [ class selectClasses ]
                            [ option [ value "USD" ] [ text "Dólar americano" ]
                            , option [ value "BRL" ] [ text "Real" ] 
                            , option [ value "EUR" ] [ text "Euro" ] 
                            ]
                        ]
                    -- restante do código

Conclusão

Vou encerrar esse tutorial por aqui, mas calma que ainda não acabou, ainda vamos dar vida a nossa aplicação. Você provavelmente ainda tem muita coisa para digerir, então o ideal é ir com calma. Antes de ir para o próximo tutorial, leve o tempo que precisar para entender e se familiarizar com o módulo HTML pois será essêncial ao decorrer dessa série.

Não se preocupe caso sinta-se travado, é completamente normal, você provavelmente está saindo da sua zona de conforto aprendendo uma linguagem totalmente diferente, com sintaxe diferente e paradigma diferente, mas acredite em mim, você vai conseguir.

Então é isso, você pode clicar aqui para continuar para o próximo tutorial. O resultado final da parte 1 está disponível aqui: https://ellie-app.com/88hp8WgJd5Ca1.

DEV Community: Clayton Fidelis

Elm na prática - Events, Pattern Matching, Maybe, Dict e implementando a lógica do conversor

Definindo as ações do usuário

Custom Type

Coletando o input do usuário

Implementando a função update

Pattern Matching

Entendendo o Maybe

Calculando a conversão

Entendendo o Dict

Utilizando o let ... in

Conclusão

Elm na prática - The Elm Architecture, Records, funções e exibindo dados da Model

The Elm Architecture

Model

view

update

Juntando tudo

Implementando a arquitetura Elm

Record

Acessando valores de um Record

Atualizando valores de um Record

Funções

Renderizando a model na view

Uma rápida explicação

Conclusão

Elm na prática - Imports, variáveis e o módulo HTML

Ambiente de desenvolvimento

Mão na massa

Entendendo o módulo HTML

Entendo as mensagens de erro do compilador

Utilizando atributos HTML

Combinando várias tags HTML

Criando o HTML da nossa aplicação

Utilizando bibliotecas CSS

Aprendendo a criar variáveis

Conclusão

Utilizando o `let ... in`