,0.00' price

Χρησιμοποιούμε το format λειτουργία από το πακέτο Numeral εδώ. Αυτό θα μορφοποιήσει τους αριθμούς με έναν τρόπο που συνήθως μορφοποιούμε νομίσματα:

100.5 -> 0.50 15.36 -> .36 21.15 -> .15

Αυτόματη δημιουργία τεκμηρίωσης

Κατά τη δημοσίευση ενός πακέτου στο αποθετήριο Elm, η τεκμηρίωση δημιουργείται αυτόματα με βάση τα σχόλια του κώδικα. Μπορείτε να το δείτε σε δράση ελέγχοντας την τεκμηρίωση για την ενότητα Καλαθιού μας εδώ . Όλα αυτά δημιουργήθηκαν από τα σχόλια που εμφανίζονται σε αυτό το αρχείο: Καλάθι .elm .

Ένα πραγματικό πρόγραμμα εντοπισμού σφαλμάτων για διεπαφή

Τα πιο προφανή ζητήματα εντοπίζονται και αναφέρονται από τον ίδιο τον μεταγλωττιστή. Ωστόσο, καμία εφαρμογή δεν είναι ασφαλής από λογικά σφάλματα.

Δεδομένου ότι όλα τα δεδομένα στο Elm είναι αμετάβλητα και όλα συμβαίνουν μέσω μηνυμάτων που μεταφέρονται στη λειτουργία ενημέρωσης, ολόκληρη η ροή ενός προγράμματος Elm μπορεί να αναπαρασταθεί ως μια σειρά αλλαγών του μοντέλου. Για το πρόγραμμα εντοπισμού σφαλμάτων, το Elm είναι σαν ένα παιχνίδι στρατηγικής με βάση τη σειρά. Αυτό επιτρέπει στο πρόγραμμα εντοπισμού σφαλμάτων να εκτελεί μερικά πραγματικά καταπληκτικά επιτεύγματα, όπως το ταξίδι στο χρόνο. Μπορεί να κινηθεί εμπρός και πίσω μέσα από τη ροή ενός προγράμματος μεταβαίνοντας ανάμεσα σε διάφορες αλλαγές μοντέλου που συνέβησαν κατά τη διάρκεια ζωής ενός προγράμματος.

Μπορείτε να μάθετε περισσότερα για το πρόγραμμα εντοπισμού σφαλμάτων εδώ .

Αλληλεπίδραση με ένα Back-end

Λοιπόν, λέτε, έχουμε δημιουργήσει ένα ωραίο παιχνίδι, αλλά μπορεί η Elm να χρησιμοποιηθεί για κάτι σοβαρό; Απολύτως.

Ας συνδέσουμε το καλάθι μας με ένα ασύγχρονο back-end. Για να το κάνουμε ενδιαφέρον, θα εφαρμόσουμε κάτι ξεχωριστό. Ας υποθέσουμε ότι θέλουμε να ελέγξουμε όλα τα καροτσάκια και τα περιεχόμενά τους σε πραγματικό χρόνο. Στην πραγματική ζωή, θα μπορούσαμε να χρησιμοποιήσουμε αυτήν την προσέγγιση για να προσφέρουμε επιπλέον δυνατότητες μάρκετινγκ / πωλήσεων στο ηλεκτρονικό μας κατάστημα ή στην αγορά μας, ή να κάνουμε κάποιες προτάσεις στον χρήστη ή να εκτιμήσουμε τους απαιτούμενους πόρους αποθεμάτων και πολλά άλλα.

Έτσι, αποθηκεύουμε το καλάθι από την πλευρά του πελάτη και επίσης ενημερώνουμε τον διακομιστή για κάθε καλάθι σε πραγματικό χρόνο.

Για να διατηρήσουμε τα πράγματα απλά, θα εφαρμόσουμε το back-end χρησιμοποιώντας το Python. Μπορείτε να βρείτε τον πλήρη κωδικό για το back-end εδώ .

Είναι ένας απλός διακομιστής ιστού που χρησιμοποιεί ένα WebSocket και παρακολουθεί τα περιεχόμενα του καλαθιού στη μνήμη. Για να διατηρήσουμε τα πράγματα απλά, θα καταστήσουμε το καλάθι όλων των άλλων στην ίδια σελίδα. Αυτό μπορεί εύκολα να εφαρμοστεί σε ξεχωριστή σελίδα ή ακόμα και ως ξεχωριστό πρόγραμμα Elm. Προς το παρόν, κάθε χρήστης θα μπορεί να βλέπει τη σύνοψη των καλαθιών άλλων χρηστών.

Με το back-end στη θέση του, θα χρειαστεί τώρα να ενημερώσουμε την εφαρμογή Elm για να στείλουμε και να λαμβάνουμε ενημερώσεις καλαθιού στο διακομιστή. Θα χρησιμοποιήσουμε το JSON για να κωδικοποιήσουμε τα ωφέλιμα φορτία μας, για τα οποία η Elm έχει εξαιρετική υποστήριξη.

CartEncoder.elm

Θα εφαρμόσουμε έναν κωδικοποιητή για να μετατρέψουμε το μοντέλο δεδομένων Elm σε αναπαράσταση συμβολοσειράς JSON. Για αυτό, πρέπει να χρησιμοποιήσουμε το Βιβλιοθήκη Json.Encode .

module CartEncoder exposing (cart) import Cart2 exposing (Cart, Item, Product) import List exposing (map) import Json.Encode exposing (..) product : Product -> Value product product = object [ ('name', string product.name) , ('price', float product.price) ] item : Item -> Value item item = object [ ('product', product item.product) , ('qty', int item.qty) ] cart : Cart -> Value cart cart = list (map item cart)

Η βιβλιοθήκη παρέχει ορισμένες λειτουργίες (όπως string, int, float, object κ.λπ.) που λαμβάνουν αντικείμενα Elm και τα μετατρέπουν σε κωδικοποιημένες συμβολοσειρές JSON.

CartDecoder.elm

Εφαρμογή του αποκωδικοποιητή είναι λίγο πιο δύσκολο, καθώς όλα τα δεδομένα Elm έχουν τύπους και πρέπει να καθορίσουμε ποια τιμή JSON πρέπει να μετατραπεί σε ποιον τύπο:

module CartDecoder exposing (cart) import Cart2 exposing (Cart, Item, Product) -- decoding for Cart import Json.Decode exposing (..) -- will decode cart from string cart : Decoder (Cart) cart = list item -- decoder for cart is a list of items item : Decoder (Item) item = object2 Item -- decoder for item is an object with two properties: ('product' := product) -- 1) 'product' of product ('qty' := int) -- 2) 'qty' of int product : Decoder (Product) product = object2 Product -- decoder for product also an object with two properties: ('name' := string) -- 1) 'name' ('price' := float) -- 2) 'price'

Ενημερωμένη εφαρμογή Elm

Επειδή ο τελικός κωδικός Elm είναι λίγο μεγαλύτερος, μπορείτε να τον βρείτε εδώ . Ακολουθεί μια σύνοψη των αλλαγών που έχουν γίνει στην εφαρμογή διεπαφής:

Έχουμε τυλίξει το πρωτότυπο update λειτουργία με μια λειτουργία που στέλνει αλλαγές στο περιεχόμενο του καλαθιού στο πίσω μέρος κάθε φορά που ενημερώνεται το καλάθι:

updateOnServer msg model = let (newModel, have_to_send) = update msg model in case have_to_send of True -> -- send updated cart to server (!) newModel [ WebSocket.send server (encode 0 (CartEncoder.cart newModel.cart)) ] False -> -- do nothing (newModel, Cmd.none)

Προσθέσαμε επίσης έναν επιπλέον τύπο μηνύματος ConsumerCarts String για να λαμβάνετε ενημερώσεις από τον διακομιστή και να ενημερώνετε ανάλογα το τοπικό μοντέλο.

Η προβολή έχει ενημερωθεί για να αποδώσει την περίληψη των καλαθιών άλλων χρησιμοποιώντας το consumersCartsView λειτουργία.

Έχει δημιουργηθεί σύνδεση WebSocket για να εγγραφείτε στο back-end για να ακούτε αλλαγές στα καροτσάκια άλλων.

subscriptions : Model -> Sub Msg subscriptions model = WebSocket.listen server ConsumerCarts server = 'ws://127.0.0.1:8765'

Έχουμε επίσης ενημερώσει την κύρια λειτουργία μας. Τώρα χρησιμοποιούμε Html.program με επιπλέον init και subscriptions Παράμετροι. init καθορίζει το αρχικό μοντέλο του προγράμματος και subscription καθορίζει μια λίστα συνδρομών.

Η συνδρομή είναι ένας τρόπος για να πούμε στο Elm να ακούσει αλλαγές σε συγκεκριμένα κανάλια και να προωθήσει αυτά τα μηνύματα στο update λειτουργία.

main = Html.program { init = init , view = view , update = updateOnServer , subscriptions = subscriptions } init = ( Model [] -- empty cart [ Product 'Bicycle' 100.50 -- stock , Product 'Rocket' 15.36 , Product 'Bisquit' 21.15 ] Nothing -- error (no error at beginning) [] -- consumer carts list is empty , Cmd.none)

Τέλος, χειριστήκαμε τον τρόπο αποκωδικοποίησης του μηνύματος ConsumerCarts που λαμβάνουμε από τον διακομιστή. Αυτό διασφαλίζει ότι τα δεδομένα που λαμβάνουμε από εξωτερική πηγή δεν θα καταστρέψουν την εφαρμογή.

ConsumerCarts message -> case decodeString (Json.Decode.list CartDecoder.cart) message of Ok carts -> ( consumer_carts = carts , False) Err msg -> ( model , False)

Διατηρήστε τα μπροστινά άκρα σας

Η Elm είναι διαφορετική. Απαιτεί από τον προγραμματιστή να σκέφτεται διαφορετικά.

Όποιος προέρχεται από τη σφαίρα της JavaScript και παρόμοιες γλώσσες θα βρεθεί να προσπαθεί να μάθει τον τρόπο με τον οποίο η Elm κάνει τα πράγματα.

Τελικά όμως, η Elm προσφέρει κάτι που συχνά δυσκολεύονται να κάνουν άλλα πλαίσια - ακόμη και τα πιο δημοφιλή. Συγκεκριμένα, παρέχει ένα μέσο για τη δημιουργία ισχυρών εφαρμογών front-end χωρίς να μπερδεύονται με τεράστιο ριζικό κώδικα.

πώς να μεταγλωττίσετε σε c++

Η Elm αφαιρεί επίσης πολλά από τα δυσκολίες που δημιουργεί το JavaScript συνδυάζοντας έναν έξυπνο μεταγλωττιστή με ένα ισχυρό πρόγραμμα εντοπισμού σφαλμάτων.

Η Elm είναι αυτό που λαχταρούν οι προγραμματιστές front-end, εδώ και πολύ καιρό. Τώρα που το έχετε δει σε δράση, πάρτε το για να γυρίσετε τον εαυτό σας και επωφεληθείτε από τα οφέλη δημιουργώντας το δικό σας επόμενο διαδικτυακό έργο στο Elm.