,0.00' price

เรากำลังใช้ format ฟังก์ชันจากแพ็คเกจตัวเลขที่นี่ สิ่งนี้จะจัดรูปแบบตัวเลขด้วยวิธีที่เราจัดรูปแบบสกุลเงินโดยทั่วไป:

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

การสร้างเอกสารอัตโนมัติ

เมื่อเผยแพร่แพ็กเกจไปยังที่เก็บ Elm เอกสารจะถูกสร้างขึ้นโดยอัตโนมัติตามความคิดเห็นในโค้ด คุณสามารถดูการทำงานได้โดยดูเอกสารประกอบสำหรับโมดูลรถเข็นของเรา ที่นี่ . สิ่งเหล่านี้สร้างขึ้นจากความคิดเห็นที่เห็นในไฟล์นี้: Cart.elm .

ดีบักเกอร์ที่แท้จริงสำหรับส่วนหน้า

ปัญหาที่ชัดเจนส่วนใหญ่ถูกตรวจพบและรายงานโดยคอมไพเลอร์เอง อย่างไรก็ตามไม่มีแอปพลิเคชันใดที่ปลอดภัยจากข้อผิดพลาดทางตรรกะ

เนื่องจากข้อมูลทั้งหมดใน Elm ไม่เปลี่ยนรูปและทุกอย่างเกิดขึ้นผ่านข้อความที่ส่งไปยังฟังก์ชันการอัปเดตโฟลว์ทั้งหมดของโปรแกรม Elm จึงสามารถแสดงเป็นชุดของการเปลี่ยนแปลงโมเดลได้ สำหรับดีบักเกอร์ Elm ก็เหมือนกับเกมวางแผนผลัดกันเล่น สิ่งนี้ช่วยให้ดีบักเกอร์สามารถแสดงผลงานที่น่าทึ่งได้เช่นการเดินทางข้ามเวลา มันสามารถเลื่อนไปมาตามโฟลว์ของโปรแกรมได้โดยการกระโดดไปมาระหว่างการเปลี่ยนแปลงโมเดลต่างๆที่เกิดขึ้นในช่วงอายุของโปรแกรม

คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับดีบักเกอร์ ที่นี่ .

การโต้ตอบกับ Back-end

คุณว่าเราได้สร้างของเล่นดีๆขึ้นมา แต่เอล์มสามารถนำไปใช้กับสิ่งที่ร้ายแรงได้หรือไม่? อย่างแน่นอน

มาเชื่อมต่อส่วนหน้ารถเข็นของเรากับส่วนหลังแบบอะซิงโครนัส เพื่อให้น่าสนใจเราจะใช้สิ่งพิเศษ สมมติว่าเราต้องการตรวจสอบรถเข็นและเนื้อหาทั้งหมดแบบเรียลไทม์ ในชีวิตจริงเราสามารถใช้แนวทางนี้เพื่อเพิ่มความสามารถด้านการตลาด / การขายให้กับร้านค้าออนไลน์หรือตลาดของเราหรือให้คำแนะนำแก่ผู้ใช้หรือประเมินทรัพยากรสต็อกที่ต้องการและอื่น ๆ อีกมากมาย

ดังนั้นเราจึงจัดเก็บรถเข็นในฝั่งลูกค้าและแจ้งให้เซิร์ฟเวอร์ทราบเกี่ยวกับรถเข็นแต่ละรายการแบบเรียลไทม์

เพื่อให้สิ่งต่างๆง่ายขึ้นเราจะใช้ส่วนหลังของเราโดยใช้ Python คุณสามารถค้นหารหัสเต็มสำหรับส่วนหลังได้ ที่นี่ .

เป็นเว็บเซิร์ฟเวอร์ธรรมดาที่ใช้ WebSocket และติดตามเนื้อหาของรถเข็นในหน่วยความจำ เพื่อให้สิ่งต่างๆง่ายขึ้นเราจะแสดงรถเข็นของทุกคนในหน้าเดียวกัน สิ่งนี้สามารถนำไปใช้งานได้อย่างง่ายดายในหน้าแยกต่างหากหรือแม้แต่โปรแกรม Elm แยก ในตอนนี้ผู้ใช้ทุกคนจะสามารถดูสรุปรถเข็นของผู้ใช้รายอื่นได้

เมื่อใช้แบ็คเอนด์แล้วตอนนี้เราจำเป็นต้องอัปเดตแอป Elm ของเราเพื่อส่งและรับการอัปเดตรถเข็นไปยังเซิร์ฟเวอร์ เราจะใช้ JSON เพื่อเข้ารหัสข้อมูลของเราซึ่ง Elm มีการสนับสนุนที่ดีเยี่ยม

CartEncoder.elm

เราจะใช้ตัวเข้ารหัสเพื่อแปลงโมเดลข้อมูล Elm ของเราเป็นการแสดงสตริง JSON เพื่อที่เราจะต้องใช้ไฟล์ Json เข้ารหัสไลบรารี .

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 เพื่อสมัครรับข้อมูลส่วนหลังเพื่อรับฟังการเปลี่ยนแปลงในรถเข็นของผู้อื่น

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)

ทำให้ส่วนหน้าของคุณมีสติ

เอล์มแตกต่างกัน ผู้พัฒนาต้องคิดแตกต่างออกไป

ใครก็ตามที่มาจากขอบเขตของ JavaScript และภาษาที่คล้ายกันจะพบว่าตัวเองพยายามเรียนรู้วิธีการทำสิ่งต่างๆของ Elm

ในท้ายที่สุด Elm ก็นำเสนอบางสิ่งที่เฟรมเวิร์กอื่น ๆ แม้แต่เฟรมเวิร์กที่เป็นที่นิยมมากที่สุดก็มักจะพยายามทำ กล่าวคือเป็นวิธีการสร้างแอปพลิเคชันฟรอนต์เอนด์ที่มีประสิทธิภาพโดยไม่ต้องยุ่งเกี่ยวกับโค้ด verbose ขนาดใหญ่

วิธีการใช้แมชชีนเลิร์นนิง

เอล์มยังแยกไฟล์ ปัญหาที่ JavaScript ก่อให้เกิด โดยการรวมคอมไพเลอร์อัจฉริยะกับดีบักเกอร์ที่ทรงพลัง

Elm เป็นสิ่งที่นักพัฒนาส่วนหน้าใฝ่ฝันมานาน ตอนนี้คุณได้เห็นการดำเนินการแล้วลองหมุนตัวเองและเก็บเกี่ยวผลประโยชน์ด้วยการสร้างไฟล์ โครงการเว็บถัดไป ใน Elm