Instalando e configurando Elm no seu computador
Até agora nós só utilizamos o Ellie para programar nossa aplicação, mas hoje vamos aprender a instalar e configurar todo o ambiente para desenvolver localmente.
O site do Elm disponibiliza várias formas de instalação, vamos instalá-lo utilizando npm
pois acredito que seja a maneira mais facil e rapida.
Para isso, certifique-se de que você tem o Node instalado, caso contrario instale-o antes de prosseguir.
Depois que o nodo for instalado, você poderá utilizar o npm. Para isso, abra o terminal e digite npm install -g elm@0.19.1-3
e aguarde o término da instalação. Depois disso, execute elm --help
na linha de comando, se a mensagem “Hi, thank you for trying out Elm 0.19.1. I hope you like it!” for exibida, tudo foi instalado corretamente.
Outra ferramenta extremamente importante é o elm-format
, que é responsável por formatar o código e também o elm-test
, que é responsável pela execução de testes. Para instalá-los, execute npm install elm-format elm-test -g
.
Para configurar seu editor, verifique esta página (https://github.com/elm/editor-plugins), ela contém instruções de instalação para vários editores de código.
Criando o projeto localmente
Agora vamos criar um projeto para copiar o código do nosso contador. Primeiro execute esse comando no seu terminal:
npx create-elm-app elm-currency
Esse comando vai criar um novo projeto chamado elm-currency
utilizando o create-elm-app, agilizando o processo de configuração.
Depois entre na pasta do projeto usando cd elm-currency
e execute elm-app start
no terminal. Esse comando vai iniciar a aplicação em http://localhost:3000/. Ao abrir esse link, você deverá ver essa tela:
Agora abra o arquivo Main.elm
dentro da pasta src
, apague tudo e então cole todo o código que utilizamos no tutorial até agora: https://ellie-app.com/8ZvdxnD2rFqa1.
Instalando as dependências
Agora precisamos instalar os pacotes elm/http
e elm/json
. No seu terminal, execute:
elm install elm/http
Digite Y
e pressione enter
quando essa mensagem aparecer:
Here is my plan:
Add:
elm/bytes 1.0.8
elm/file 1.0.5
elm/http 2.0.0
Would you like me to update your elm.json accordingly? [Y/n]:
Em seguida repita o processo para o elm/json
:
elm install elm/json
Então execute elm-app start
de novo. Depois disso você verá que nossa aplicação apareceu, mas os estilos nao estao funcionando:
Carregando CSS
Abra o arquivo public/index.html
e adicione essas linhas de código na tag head
:
<style>
body {
background-color: #edf2f7;
}
</style>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
Salve o arquivo e abra o browser novamente, agora tudo deve estar funcionando:
Viu aquele ícone no canto inferior direito? E ali que fica o Debug, basta clicar nele para abrir a janela de Debug.
Repositório atualizado: https://github.com/FidelisClayton/elm-currency-app/tree/parte-6
Conclusão
Por hoje é só, o processo de instalação não é tão extenso. Caso tenha ficado alguma dúvida ou não tenha conseguido fazer a instalação deixa uma mensagem nos comentários que eu tentarei te ajudar.
Até a próxima!