Introdução

Neste tutorial, vamos explorar a construção de uma aplicação web completa utilizando PureScript, um lenguaje funcional que compila para JavaScript. Abordaremos as principais bibliotecas como Halogen, um framework para criação de interfaces web, e purescript-react, que permite trabalhar com componentes de forma declarativa. Iremos passar por todas as etapas do desenvolvimento, desde a configuração inicial do projeto até a implementação de testes automatizados, utilizando Purescript-test. Este guia é ideal para desenvolvedores que desejam entender como criar aplicações modernas e testáveis usando a linguagem PureScript, aproveitando as vantagens da programação funcional.

Etapas

  1. Configuração do Ambiente de Desenvolvimento

    Certifique-se de ter o GHC (Glasgow Haskell Compiler) e o Stack instalados em sua máquina. O Stack é uma ferramenta para gerenciar projetos Haskell e PureScript. Verifique as versões instaladas com os comandos `ghc –version` e `stack –version`. Se não os tiver instalados, siga as instruções no site oficial do Haskell.

    commands
    # Verificar versões instaladas
    ghc --version
    stack --version

  2. Iniciando um Novo Projeto PureScript

    Utilize Stack para criar um novo projeto PureScript. Execute o comando a seguir que irá gerar uma estrutura básica de projeto com as dependências necessárias.

    commands
    # Criar um novo projeto PureScript
    stack new my-purescript-app purescript

  3. Adicionando Dependências

    Navegue até o diretório do seu projeto e adicione as dependências Halogen e purescript-react. Isso pode ser feito editando o arquivo `packages.dhall` ou usando Stack.

    commands
    # Navegar até o diretório do projeto
    cd my-purescript-app
    # Adicionar dependências
    stack add purescript-halogen purescript-react

  4. Criando a Estrutura da Aplicação

    Crie um arquivo `Main.purs` na pasta `src`. Este será o ponto de entrada da sua aplicação. Aqui, vamos configurar uma aplicação simple usando Halogen.

    Main.purs
    module Main where

import Prelude

import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE

main :: Effect Unit
main = do
  body <-HH.mkElement
  H.runUI app body

app :: H.Component HH.HTML HH.HTML
app = H.mkComponent
  { initialState: const unit
  , render: \_ -> HH.div_ [HH.button [HE.onClick \_ -> log "Button clicked!"] [HH.text "Click me!"]]
  , eval: H.defaultEval
  }

  5. Configurando os Testes Automatizados

    Crie uma nova pasta chamada `test` no diretório do seu projeto. Dentro dela, crie um arquivo chamado `MainSpec.purs` para implementar os testes unitários da sua aplicação.

    MainSpec.purs
    module MainSpec where

import Prelude
import Test.By
import Test.Hspec

spec :: Spec
spec = do
  describe "App Tests" do
    it "should render the app correctly" do
      -- Simulação de renderização e testes de comportamentos
      assert true -- Simulação básica

  6. Executando a Aplicação

    Use o Stack para compilar e executar a aplicação. Após a execução, abra o navegador e acesse `http://localhost:8080` para visualizar sua aplicação web.

    commands
    # Compilar e executar a aplicação
    stack run
    # Verificar testes automatizados
    stack test

Conclusão

Neste tutorial, você aprendeu a construir uma aplicação web completa usando PureScript, com destaque para o uso do Halogen e purescript-react. Abordamos desde a configuração do ambiente de desenvolvimento até a implementação de testes automatizados, garantindo que sua aplicação seja robusta e confiável. Com essa base, você poderá explorar ainda mais o ecossistema PureScript e desenvolver aplicações mais complexas. Sinta-se à vontade para experimentar mais e potencializar suas habilidades em programação funcional.

Hashtags

#PureScript #Halogen #PurescriptReact #DesenvolvimentoWeb #TestesAutomatizados