Consumir una API REST desde Elm

La idea es que simplemente pintemos "hola mundo" con él consumiendo una API Rest: 

module Main exposing (..)

import Browser

import Html exposing (Html, div, text, button)

import Html.Events exposing (onClick)

import Http

import Json.Decode exposing (Decoder, field, string)

-- MODEL

type alias Model =

    { message : String

    , loading : Bool

    }

init : () -> ( Model, Cmd Msg )

init _ =

    ( { message = "", loading = False }, Cmd.none )

-- UPDATE

type Msg

    = FetchMessage

    | GotMessage (Result Http.Error String)

update : Msg -> Model -> ( Model, Cmd Msg )

update msg model =

    case msg of

        FetchMessage ->

            ( { model | loading = True }

            , getMessage

            )

        GotMessage (Ok message) ->

            ( { model | message = message, loading = False }, Cmd.none )

        GotMessage (Err _) ->

            ( { model | message = "Error fetching message", loading = False }, Cmd.none )

-- HTTP REQUEST

getMessage : Cmd Msg

getMessage =

    Http.get

        { url = "http://localhost:8080/hello"

        , expect = Http.expectString GotMessage

        }

-- VIEW

view : Model -> Html Msg

view model =

    div []

        [ button [ onClick FetchMessage ] [ text "Fetch Message" ]

        , div []

            [ text

                (if model.loading then

                    "Loading..."

                 else

                    model.message

                )

            ]

        ]

-- MAIN

main : Program () Model Msg

main =

    Browser.element

        { init = init

        , update = update

        , subscriptions = always Sub.none

        , view = view

        }

• El modelo (Model) guarda el mensaje recibido y un flag de carga (loading).
• Al hacer clic en el botón, se dispara el mensaje FetchMessage, que a su vez ejecuta getMessage.
• Http.get realiza una petición a la URL http://localhost:8080/hello.
• Si la respuesta es exitosa, el mensaje GotMessage (Ok ...) actualiza el modelo con el texto devuelto por el servidor.
• La vista muestra un botón y el resultado de la petición (o un “Loading...” mientras espera).

Podés usar cualquier backend —por ejemplo, un mini servidor Node.js o Express:

// server.js

import express from "express";

const app = express();

app.get("/hello", (req, res) => {

  res.send("Hello from the API!");

});

app.listen(8080, () => console.log("API running on http://localhost:8080/hello"));