Cette page couvre Elm 0.18

Commandes Joueurs

Maintenant, il nous faut créer les tâches et les commandes pour récupérer les Joueurs sur le serveur. Créez src/Players/Commands.elm :

module Players.Commands exposing (..)

import Http
import Json.Decode as Decode exposing (field)
import Players.Models exposing (PlayerId, Player)
import Players.Messages exposing (..)


fetchAll : Cmd Msg
fetchAll =
    Http.get fetchAllUrl collectionDecoder 
        |> Http.send OnFetchAll


fetchAllUrl : String
fetchAllUrl =
    "http://localhost:4000/players"


collectionDecoder : Decode.Decoder (List Player)
collectionDecoder =
    Decode.list memberDecoder


memberDecoder : Decode.Decoder Player
memberDecoder =
    Decode.map3 Player
        (field "id" Decode.string)
        (field "name" Decode.string)
        (field "level" Decode.int)

Étudions ce code.

fetchAll : Cmd Msg
fetchAll =
    Http.get fetchAllUrl collectionDecoder 
        |> Http.send OnFetchAll

Ici, on crée une commande exécutable par notre application :

• Http.get crée une tâche
• on envoie ensuite cette tâche à Task.perform, qui l'enveloppe dans une commande

collectionDecoder : Decode.Decoder (List Player)
collectionDecoder =
    Decode.list memberDecoder

Ce décodeur délègue le décodage de chaque membre de la liste à memberDecoder.

memberDecoder : Decode.Decoder Player
memberDecoder =
    Decode.map3 Player
        (field "id" Decode.string)
        (field "name" Decode.string)
        (field "level" Decode.int)

memberDecoder crée un décodeur JSON qui retourne un enregistrement de type Player.

Pour comprendre le fonctionnement d'un décodeur, utilisons le REPL d'Elm.

Dans un terminal, lancez elm repl. Importez le module Json.Decoder :

> import Json.Decode exposing (..)

Puis, définissez une chaîne Json :

> json = "{\"id\":99, \"name\":\"Sam\"}"

Ainsi qu'un décodeur pour extraire l'id :

> idDecoder = (field "id" int)

Cela crée un décodeur qui, lorsqu'on lui donne une chaîne, essaie d'extraire la clef id et de l'interpréter comme un entier.

Exécutez le décodeur pour voir le résultat :

> result = decodeString idDecoder  json
Ok 99 : Result.Result String Int

On obtient Ok 99, ce qui signifie que le décodage a réussi et que la valeur obtenue est 99. Voilà le rôle de (field "id" Decode.int) : créer un décodeur pour une clef.

Tout ça n'est que la première partie du travail. Pour la deuxième partie, définissez un type :

> type alias Player = { id: Int, name: String }

En Elm, on peut créer un enregistrement en appelant un type comme une fonction. Par exemple, Player 1 "Sam" crée un enregistrement de Joueur. Note : l'ordre des paramètres est important, comme pour une fonction classique.

Pour essayer, faites :

> Player 1 "Sam"
{ id = 1, name = "Sam" } : Repl.Player

En utilisant ces deux concepts, créons un décodeur complet :

> nameDecoder = (field "name" string)
> playerDecoder = map2 Player idDecoder nameDecoder

La fonction map2 prend une fonction (ici, Player) en premier argument et deux décodeurs. Puis, elle exécute les décodeurs et passe les résultats en argument à la fonction (Player).

Pour essayer, faites :

> result = decodeString playerDecoder json
Ok { id = 99, name = "Sam" } : Result.Result String Repl.Player

Rappelez-vous que rien de tout cela n'est vraiment exécuté tant que la commande n'est pas envoyée à program.