Introdução

Neste tutorial, exploraremos o desenvolvimento de aplicações web modernas utilizando F#, um dos linguagens funcionais mais poderosas do mundo .NET. Vamos utilizar duas bibliotecas essenciais: Giraffe, que nos permite construir APIs e aplicações web de forma fácil e eficiente, e Fable, que transforma código F# em JavaScript, permitindo a criação de aplicações front-end. Este guia é ideal para desenvolvedores que desejam entender como essas tecnologias podem interagir para criar aplicações robustas e escaláveis, desde a configuração do ambiente até a implementação de testes unitários e práticas recomendadas de desenvolvimento, garantindo um produto final de qualidade.

Etapas

  1. Configuração do Ambiente de Desenvolvimento

    Antes de começarmos, você deve ter o .NET SDK instalado em sua máquina. Verifique se está correto utilizando o comando `dotnet –version`. Instale também o Fable através do comando `dotnet tool install -g fable-compiler` para compilar seu código F#. Se você ainda não tem, siga as instruções nos sites oficiais para instalar o .NET SDK e o Fable.

    commands
    # Verificar a versão do .NET SDK
    dotnet --version

    # Instalar o Fable
    dotnet tool install -g fable-compiler

  2. Criação do Projeto

    Crie um novo projeto de aplicativo web utilizando o Giraffe. No terminal, use o comando `dotnet new giraffe -n MeuProjetoGiraffe`. Após isso, entre no diretório do projeto com `cd MeuProjetoGiraffe`.

    commands
    # Criar o projeto Giraffe
    dotnet new giraffe -n MeuProjetoGiraffe

    # Navegar até o diretório do projeto
    cd MeuProjetoGiraffe

  3. Estrutura do Projeto

    O projeto criado conterá diversos arquivos. A estrutura básica incluirá um arquivo Program.fs que definirá a inicialização da aplicação e um arquivo HttpHandlers.fs para lidar com as requisições HTTP. Vamos abrir o arquivo Program.fs para definir o ponto de entrada da nossa aplicação.

    Program.fs
    open System
open Giraffe
open Microsoft.AspNetCore.Hosting
open Microsoft.Extensions.Hosting

module Program =
    [<EntryPoint>]
    let main _ =
        Host.CreateDefaultBuilder()
            .ConfigureWebHostDefaults(fun webBuilder ->
                webBuilder.UseStartup<Startup>()
            )
            .Build()
            .Run()
        0

  4. Configurando o Giraffe

    Agora, vamos configurar nosso Giraffe para lidar com as requisições. No arquivo HttpHandlers.fs, adicione um handler simples que retornará uma mensagem “Hello World” quando a rotas raiz for acessada.

    HttpHandlers.fs
    module HttpHandlers

open Giraffe

type Model = { Message: string }

let helloHandler : HttpHandler =
    fun (ctx: HttpContext) ->
        task { return! json { Message = "Hello World" } ctx }

  5. Definindo as Rotas

    Agora, vamos definir as rotas da nossa aplicação para que possamos acessar o nosso handler. Atualize o arquivo Startup.fs para incluir as rotas necessárias.

    Startup.fs
    module Startup

open Giraffe
open Microsoft.AspNetCore.Builder
open Microsoft.Extensions.DependencyInjection

let webApp =
    choose [
        route "" >=> HttpHandlers.helloHandler
        setStatusCode 404 >=> text "Not Found"
    ]

let configureServices (services: IServiceCollection) = ()

let configureApp (app: IApplicationBuilder) =
    app.UseGiraffe webApp

  6. Executando a Aplicação

    Para executar a aplicação, use o comando `dotnet run`. A aplicação iniciará e você poderá acessá-la em http://localhost:5000. Teste acessando a URL no seu navegador ou utilizando o cURL.

    commands
    # Executar a aplicação
    dotnet run

    # Testar a rota no cURL
    curl http://localhost:5000

  7. Integração com Fable

    Para implementar o front-end utilizando Fable, crie uma nova pasta chamada “Client” em seu projeto e dentro dela, inicialize um projeto Fable com `dotnet new fable -n MeuClienteFable`.

    commands
    # Criar a pasta do cliente Fable
    mkdir Client

    # Inicializar o projeto Fable
    cd Client
    dotnet new fable -n MeuClienteFable

  8. Configurando o Front-end

    No projeto Fable, abra o arquivo App.fs e substitua o conteúdo padrão por um código que faça uma requisição à nossa API e exiba a resposta no navegador. Usaremos a biblioteca Fable.Fetch para facilitar as requisições HTTP.

    App.fs
    module App

open Fable.Core
open Fable.Import
open Fable.Fetch

let fetchHello () =
    promise {
        let! response = Fetch.fetch "http://localhost:5000"
        let! data = response.text()
        Browser.console.log(data)
    }

  9. Teste Unitário

    Para garantir que nossa aplicação funciona corretamente, adicione testes unitários. Crie um arquivo HttpHandlersTests.fs para testar o handler `helloHandler` que você implementou anteriormente.

    HttpHandlersTests.fs
    module HttpHandlersTests

open NUnit.Framework
open Giraffe
open System
open System.Net.Http
open Microsoft.AspNetCore.Http

[<TestFixture>]
module Tests =
    [<Test>]
    let ``helloHandler returns Hello World message`` () =
        // Teste o handler e valide a resposta
        ...

  10. Executando os Testes

    Finalmente, para executar os testes que você implementou, use o comando `dotnet test`. Isso garantirá que sua aplicação e seus handlers estão funcionando conforme esperado.

    commands
    # Executar os testes
    dotnet test

Conclusão

Neste tutorial, você aprendeu a desenvolver aplicações web modernas utilizando F# com Giraffe e Fable. Desde a configuração do ambiente até a implementação de handlers, rotas e integração com o front-end, cobrimos o ciclo completo de desenvolvimento. Também abordamos a importância de testes unitários para validar nossa aplicação. Com essas habilidades, você está pronto para explorar mais profundamente a construção de aplicações robustas e interativas na web.

Hashtags

#FSharp #Giraffe #Fable #WebDevelopment #Aprendizado