Einführung
Webanwendungen
Elm ist eine wunderschöne Sprache, um zuverlässige Webanwendungen zu bauen.
Sie hat freundliche Fehlermeldungen, eine großartige Performance, kleine Assets und keine Laufzeitausnahmen.
Der wohl bekannteste und am häufigsten kopierte Teil von Elm ist The Elm Architecture, ein einfaches Muster, um Webanwendungen zu strukturieren, und die Art und Weise, wie alle Elm-Webanwendungen geschrieben werden.
Die Kernidee ist, dass dein Code um ein Model deines Anwendungszustands herum aufgebaut ist, außerdem um eine Möglichkeit, dein Model zu updaten, und eine Möglichkeit, dein Model zu viewen.
Das Model enthält den Zustand der Anwendung, also alle Daten, die die Anwendung braucht.
Wenn du dir eine einfache Anwendung mit einem Textfeld vorstellst und dazu Text, der diesen Text umgekehrt anzeigt, sähe das Model so aus wie unten.
Du kannst dieses Beispiel auch im Elm Guide sehen.
type alias Model =
{ text : String
}
update ist eine Funktion, die mit einer Msg aufgerufen wird, wenn sich etwas ändert (zum Beispiel, wenn der Benutzer auf eine Schaltfläche klickt).
Sie nimmt die Msg und das aktuelle Model und gibt ein neues Model zurück.
type Msg
= TextChanged String
update : Msg -> Model -> Model
update msg model =
case msg of
TextChanged newText ->
{ model | text = newText }
view ist eine Funktion, die HTML zurückgibt, das dem Benutzer im Browser angezeigt wird.
Sie nimmt das aktuelle Model und gibt eine Html Msg zurück (der Typ, mit dem Elm HTML darstellt).
view : Model -> Html Msg
view model =
Html.div []
[ Html.input
[ Html.Attributes.placeholder "Text to reverse"
, Html.Attributes.value model.text
, Html.Events.onInput TextChanged
]
[]
, Html.div [] [ Html.text (String.reverse model.text) ]
]
Anleitung
Deine Freundin Paula versucht, besser darin zu werden, Hinweise in Kreuzworträtseln zu lösen. Sie hat gelesen, dass manche Hinweise verraten, dass die Antwort ein Palindrom ist.
Ein Palindrom ist ein Wort oder Satz, der vorwärts wie rückwärts gleich lautet.
Sie bittet dich, ihr eine ganz einfache Website zu schreiben, die prüft, ob ein String ein Palindrom ist (oder nicht), damit sie ihre Vermutungen überprüfen kann.
Du entscheidest dich, dafür eine Elm-[Sandbox][browser-sandox]-Anwendung zu verwenden.
Die Anwendung hat ein Textfeld, in das Paula ihre Vermutung eingeben kann, sowie einen Text, der angibt, ob der Text im Feld ein Palindrom ist oder nicht.
Der Text aktualisiert sich, wann immer sich der Text im Textfeld ändert.
1. Definiere die Typen Model und Msg für die Anwendung und schreibe die Funktion init
Das Model der Anwendung braucht den zu prüfenden String; dieses Feld sollte content heißen.
Die Anwendung braucht ein Msg, das angibt, dass sich der Text im Textfeld geändert hat.
Die Variante dafür sollte Change heißen.
Die Funktion init sollte einen anfänglichen Model-Wert mit einem leeren Feld content zurückgeben.
2. Schreibe die Funktion update
Die Funktion update sollte einen Msg- und einen Model-Parameter entgegennehmen und ein neues Model zurückgeben.
Das Msg trägt einen vom Benutzer eingegebenen Text, und das neue Model sollte diesen Text enthalten.
3. Schreibe die Funktion view
Elm verlangt, dass die Funktion view einen Typ Html msg zurückgibt. Das bedeutet, dass du aus der Funktion view ein einzelnes Element zurückgeben musst (und kein Array von Elementen).
Innerhalb dieses Wurzelelements sollte es ein input-Element geben (das Textfeld) sowie ein div mit text-Inhalt, das angibt, ob der Text im input ein Palindrom ist oder nicht.
Der Text sollte „This is a palindrome" oder „Not a palindrome" lauten.
4. Schreibe die Funktion main
Die Funktion main sollte Browser.sandbox aufrufen und dabei einen Record-Parameter mit den Funktionen init, update und view übergeben.
Damit die Übung im Online-Editor von Exercism funktioniert, verwenden wir einen nachgebauten Browser.sandbox zusammen mit dem Code.
Das macht keinen Unterschied für den Code, den du schreibst, um diese Übung zu lösen.
Lernübung
