Εισαγωγή
Διαδικτυακές Εφαρμογές
Η Elm είναι μια υπέροχη γλώσσα για την κατασκευή αξιόπιστων διαδικτυακών εφαρμογών.
Έχει φιλικά μηνύματα σφάλματος, εξαιρετική απόδοση, μικρά αρχεία και καθόλου εξαιρέσεις κατά την εκτέλεση.
Το πιο διάσημο, και πιο ευρέως αντιγραμμένο, κομμάτι της Elm είναι ίσως το The Elm Architecture, ένα απλό μοτίβο για τη δομή των διαδικτυακών εφαρμογών, με το οποίο είναι γραμμένες όλες οι διαδικτυακές εφαρμογές σε Elm.
Η βασική ιδέα είναι ότι ο κώδικάς σου χτίζεται γύρω από ένα Model της κατάστασης της εφαρμογής σου, έναν τρόπο να ενημερώνεις το μοντέλο σου μέσω του update και έναν τρόπο να το προβάλλεις μέσω του view.
Το Model περιέχει την κατάσταση της εφαρμογής, δηλαδή όλα τα δεδομένα που χρειάζεται η εφαρμογή.
Αν φανταστείς μια απλή εφαρμογή με ένα πλαίσιο κειμένου και ένα κείμενο που δείχνει το αντίστροφό του, το μοντέλο θα έμοιαζε με το παρακάτω.
Μπορείς επίσης να δεις αυτό το παράδειγμα στον Οδηγό της Elm.
type alias Model =
{ text : String
}
Το update είναι μια συνάρτηση που καλείται με ένα Msg όταν υπάρχει κάποια αλλαγή (όπως όταν ο χρήστης κάνει κλικ σε ένα κουμπί).
Παίρνει το Msg και το τρέχον Model και επιστρέφει ένα νέο Model.
type Msg
= TextChanged String
update : Msg -> Model -> Model
update msg model =
case msg of
TextChanged newText ->
{ model | text = newText }
Το view είναι μια συνάρτηση που επιστρέφει HTML για να δείξει στον χρήστη μέσα στο πρόγραμμα περιήγησης.
Παίρνει το τρέχον Model και επιστρέφει ένα Html Msg (τον τύπο που χρησιμοποιεί η Elm για να αναπαραστήσει HTML).
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) ]
]
Οδηγίες
Η φίλη σου η Paula προσπαθεί να γίνει καλύτερη στη λύση γρίφων σταυρόλεξου. Έχει διαβάσει ότι κάποιες ενδείξεις δείχνουν ότι η απάντηση είναι παλίνδρομο.
Ένα παλίνδρομο είναι μια λέξη ή μια φράση που διαβάζεται το ίδιο και προς τις δύο κατευθύνσεις.
Σου ζητάει να της γράψεις έναν πολύ απλό ιστότοπο που θα ελέγχει αν μια συμβολοσειρά είναι παλίνδρομο (ή όχι), ώστε να μπορεί να ελέγχει τις μαντεψιές της.
Αποφασίζεις να το κάνεις αυτό χρησιμοποιώντας μια εφαρμογή [sandbox][browser-sandox] της Elm.
Η εφαρμογή θα έχει ένα πλαίσιο κειμένου, στο οποίο η Paula θα μπορεί να πληκτρολογεί την απάντησή της, και ένα κείμενο που θα δηλώνει αν το κείμενο στο πλαίσιο είναι παλίνδρομο ή όχι.
Το κείμενο θα ενημερώνεται κάθε φορά που αλλάζει το κείμενο στο πλαίσιο κειμένου.
1. Όρισε τους τύπους Model και Msg για την εφαρμογή, και γράψε τη συνάρτηση init
Το Model της εφαρμογής χρειάζεται τη συμβολοσειρά που θα ελέγχεται. Αυτό το πεδίο θα πρέπει να ονομάζεται content.
Η εφαρμογή χρειάζεται ένα Msg για να δηλώνει ότι το κείμενο στο πλαίσιο κειμένου άλλαξε.
Η παραλλαγή για αυτό θα πρέπει να ονομάζεται Change
Η συνάρτηση init θα πρέπει να επιστρέφει μια αρχική τιμή Model με κενό πεδίο content.
2. Γράψε τη συνάρτηση update
Η συνάρτηση update θα πρέπει να δέχεται μια παράμετρο Msg και μια παράμετρο Model, και να επιστρέφει ένα νέο Model.
Το Msg θα μεταφέρει κάποιο κείμενο που πληκτρολόγησε ο χρήστης, και το νέο Model θα πρέπει να περιλαμβάνει αυτό το κείμενο.
3. Γράψε τη συνάρτηση view
Η Elm απαιτεί η συνάρτηση view να επιστρέφει τύπο Html msg, που σημαίνει ότι πρέπει να επιστρέφεις ένα μόνο στοιχείο από τη συνάρτηση view (και όχι έναν πίνακα στοιχείων).
Μέσα σε αυτό το ριζικό στοιχείο θα πρέπει να υπάρχει ένα στοιχείο input (το πλαίσιο κειμένου), και ένα div με περιεχόμενο text που θα δηλώνει αν το κείμενο στο input είναι παλίνδρομο ή όχι.
Το κείμενο θα πρέπει να είναι "This is a palindrome" ή "Not a palindrome".
4. Γράψε τη συνάρτηση main
Η συνάρτηση main θα πρέπει να καλεί το Browser.sandbox, περνώντας ως παράμετρο μια καταγραφή με τις συναρτήσεις init, update και view.
Για να δουλέψει η άσκηση στον διαδικτυακό επεξεργαστή του Exercism, χρησιμοποιούμε ένα ψεύτικο Browser.sandbox μαζί με τον κώδικα.
Αυτό δεν κάνει καμία διαφορά στον κώδικα που γράφεις για να λύσεις αυτή την άσκηση.
Άσκηση εκμάθησης
