inf-schule | Ziele und Voraussetzungen » TEA

TEA - Implementierung

Implementierung der Elm-Architektur

Hier siehst du noch einmal die Grafik für ein Programm, das als Datenmodell einen Schlüssel hat, der durch Klicken auf einen Button erhöht werden kann. Der zu verschlüsselnde Text ist bisher noch fest.

Im nachfolgenden Programm wird der Text "HALLO" verschlüsselt. Der Schlüssel wird durch Klicken auf den Button erhöht. Wir benutzen hier eine vereinfachte caesar-Funktion, um die Implementierung möglichst übersichtlich zu halten. Auch sonst wurden ein paar Dinge weggelassen, die man üblicherweise angibt, um die Implementierung möglichst kurz und selbsterklärend zu halten.

module Main exposing (main)

import Browser
import Html exposing (..)
import Html.Events exposing (..)


caesar zeichenkette schluessel =
    String.map (\z -> Char.toCode z |> (+) schluessel |> Char.fromCode) zeichenkette


type Msg
    = Erhoehen


update msg model =
    case msg of
        Erhoehen ->
            { model | key = model.key + 1 }


view model =
    div []
        [ button [ onClick Erhoehen ] [ text "+1" ]
        , div [] [ caesar "HALLO" model.key |> text ]
        ]


main =
    Browser.sandbox
        { init = { key = 3 }
        , view = view
        , update = update
        }

Aufgabe 1

Teste das Programm und gib an, für welche Fälle die vereinfachte caesar-Funktion nicht funktioniert. Du kannst - wenn du möchtest - auch eine eigene caesar-Funktion nutzen.
Untersuche die Implementierung und erkläre die Funktionsweise des Programms. Gehe dabei insbesondere auf die neue Funktion Browser.sandbox ein. Beantworte dabei folgende Fragen:
- Welche Bedeutung haben die drei Attribute des Records, der an Browser.sandbox übergeben wird?
- Warum kann auf der linken und rechten Seite des Gleichheitszeichens view bzw. update stehen?
Experimentiere mit dem Programm und ändere erste, kleinere Dinge ab. (z.B.: den zu verschlüsselelnde Text, Schlüssel darf nicht über 25 steigen, Ergänzen einer Überschrift, ... ) Es geht hier noch nicht darum das Programm zu komplettieren, sondern erst einmal die Funktionsweise zu verstehen.

Vollständige Grundstruktur

Im Beispiel oben haben wir einige Dinge weggelassen, die man üblicherweise angibt. Hier siehst du das gleiche Programm in einer Version, wie man sie in der Praxis eher vorfindet.

module Main exposing (main)

import Browser
import Html exposing (..)
import Html.Events exposing (..)


caesar : String -> Int -> String
caesar zeichenkette schluessel =
    String.map (\z -> Char.toCode z |> (+) schluessel |> Char.fromCode) zeichenkette

type alias Model =
    { key : Int }

type Msg
    = Erhoehen

initialModel : Model
initialModel =
    { key = 3 }


update : Msg -> Model -> Model
update msg model =
    case msg of
        Erhoehen ->
            { model | key = model.key + 1 }


view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Erhoehen ] [ text "+1" ]
        , div [] [ caesar "HALLO" model.key |> text ]
        ]


main =
    Browser.sandbox
        { init = initialModel
        , view = view
        , update = update
        }

Aufgabe 2

Vergleiche mit der ersten Implementierung und beschreibe die Vorteile der zweiten Implementierung.

Aufgabe 3

Ergänze eine Anzeige für den Schlüssel.
Ergänze das Programm so, dass der Schlüssel über einen zweiten Button erniedrigt werden kann. Wenn du möchtest, kannst du noch einen dritten Button hinzufügen, der den Schlüssel zurücksetzt.

←Zurück Weiter→