Bevezetés
Webalkalmazások
Az Elm egy élvezetes nyelv megbízható webalkalmazások építésére.
Barátságos hibaüzenetekkel, kiváló teljesítménnyel és kis méretű erőforrásokkal rendelkezik, futásidejű kivételek pedig nincsenek benne.
Az Elm talán leghíresebb és legszélesebb körben másolt része a The Elm Architecture, ami egy egyszerű minta a webalkalmazások felépítésére, és minden Elm webalkalmazás így íródik.
A lényeg, hogy a kódod az alkalmazásod állapotát leíró Model köré épül, egy mód köré, amellyel update-elheted a modelledet, és egy mód köré, amellyel view-zhatod.
A Model tartalmazza az alkalmazás állapotát, vagyis minden adatot, amire az alkalmazásnak szüksége van.
Ha elképzelsz egy egyszerű alkalmazást egy szövegdobozzal és egy szöveggel, ami annak a szövegnek a fordítottját mutatja, a modell így néz ki.
Ezt a példát az Elm Guide oldalon is megnézheted.
type alias Model =
{ text : String
}
Az update egy függvény, amelyet egy Msg-sel hívunk meg, amikor valami megváltozik (például a felhasználó rákattint egy gombra).
Megkapja a Msg-et és az aktuális Model-t, és visszaad egy új Model-t.
type Msg
= TextChanged String
update : Msg -> Model -> Model
update msg model =
case msg of
TextChanged newText ->
{ model | text = newText }
A view egy függvény, amely HTML-t ad vissza, amit a böngészőben megmutatunk a felhasználónak.
Megkapja az aktuális Model-t, és visszaad egy Html Msg-et (ez az a típus, amellyel az Elm a HTML-t reprezentálja).
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) ]
]
Utasítások
Paula barátnőd egyre jobb szeretne lenni a keresztrejtvény-nyomok megfejtésében. Olvasta, hogy néhány nyom arra utal, hogy a válasz palindrom.
A palindrom olyan szó vagy mondat, amely visszafelé olvasva is ugyanaz.
Arra kér, hogy írj neki egy nagyon egyszerű weboldalt, amely ellenőrzi, hogy egy string palindrom-e (vagy sem), hogy le tudja ellenőrizni a tippjeit.
Úgy döntesz, hogy ezt egy Elm [sandbox][browser-sandox] alkalmazással csinálod.
Az alkalmazásban lesz egy szövegmező, ahová Paula beírhatja a tippjét, és egy szöveg, amely jelzi, hogy a mezőben lévő szöveg palindrom-e vagy sem.
A szöveg minden alkalommal frissül, amikor a szövegmező tartalma megváltozik.
1. Definiáld az alkalmazás Model és Msg típusait, és írd meg az init függvényt
Az alkalmazás Model-jének szüksége van az ellenőrizendő stringre; ezt a mezőt content-nek kell nevezni.
Az alkalmazásnak kell egy Msg, amely jelzi, hogy a szövegmezőben lévő szöveg megváltozott.
Ennek a változatát Change-nek kell nevezni.
Az init függvény egy kezdeti Model értéket adjon vissza, amelynek content mezője üres.
2. Írd meg az update függvényt
Az update függvény kapjon egy Msg és egy Model paramétert, és adjon vissza egy új Model-t.
A Msg tartalmazni fogja a felhasználó által beírt szöveget, és az új Model-nek is tartalmaznia kell ezt a szöveget.
3. Írd meg a view függvényt
Az Elm megköveteli, hogy a view függvény Html msg típust adjon vissza, ami azt jelenti, hogy egyetlen elemet kell visszaadnod a view függvényből (és nem elemek tömbjét).
Ezen a gyökérelemen belül legyen egy input elem (a szövegmező) és egy div, benne text tartalommal, amely jelzi, hogy az input-ban lévő szöveg palindrom-e vagy sem.
A szöveg ez legyen: „This is a palindrome” vagy „Not a palindrome”.
4. Írd meg a main függvényt
A main függvény hívja meg a Browser.sandbox függvényt, átadva neki egy rekord paramétert az init, update és view függvényekkel.
Ahhoz, hogy a feladat működjön az Exercism online szerkesztőjében, a kódban egy hamis Browser.sandbox-ot használunk.
Ez semmilyen módon nem befolyásolja azt a kódot, amit a feladat megoldásához írsz.
Tanulófeladat
