Elm - คำสั่ง

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

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

รูปต่อไปนี้แสดงขั้นตอนการทำงานของแอปพลิเคชัน Elm ที่ซับซ้อน -

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

ไวยากรณ์

ไวยากรณ์สำหรับการกำหนดคำสั่งมีดังต่อไปนี้ -

type Cmd msg

ข้อความที่สร้างโดยมุมมองจะถูกส่งผ่านไปยังคำสั่ง

ภาพประกอบ

ตัวอย่างต่อไปนี้ส่งคำขอไปยัง API และแสดงผลลัพธ์จาก API

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

ส่วนประกอบต่างๆของแอปพลิเคชันมีดังนี้ -

โมดูล Http

Http Module of Elm ใช้เพื่อสร้างและส่งคำขอ HTTP โมดูลนี้ไม่ได้เป็นส่วนหนึ่งของโมดูลหลัก เราจะใช้ตัวจัดการแพ็คเกจ elm เพื่อติดตั้งแพ็คเกจนี้

API

ในตัวอย่างนี้แอปพลิเคชันจะสื่อสารกับ Numbers API - "http://numbersapi.com/#42".

ดู

มุมมองของแอปพลิเคชันประกอบด้วยกล่องข้อความและปุ่ม

view : Model -> Html Msg
view model =
   div []
      [ h2 [] [text model.heading]
      ,input [onInput Input, value model.input] []
      , button [ onClick ShowFacts ] [ text "show facts" ]
      , br [] []
      , h3 [][text model.factText]
      ]

รุ่น

Model แสดงถึงค่าที่ป้อนโดยผู้ใช้และผลลัพธ์ที่ API จะส่งคืน

type alias Model =
   { heading : String
   , factText : String
   , input :String
   }

ข้อความ

แอปพลิเคชันมีสามข้อความต่อไปนี้ -

• ShowFacts
• Input
• NewFactArrived

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

type Msg
   = ShowFacts
   |Input String
   | NewFactArrived (Result Http.Error String)

อัปเดต

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

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
   case msg of
      Input newInput ->
      (Model "NumbersApi typing.." "" newInput ,Cmd.none)
      ShowFacts ->
         (model, getRadmonNumberFromAPI model.input)

      NewFactArrived (Ok newFact) ->
         (Model "DataArrived" newFact "", Cmd.none)

      NewFactArrived (Err _) ->
      (model, Cmd.none)

ฟังก์ชันตัวช่วย

ฟังก์ชันตัวช่วยgetRandomNumberFromAPIเรียกใช้ NumbersAPI และส่งต่อไปยังหมายเลขที่ผู้ใช้ป้อน ผลลัพธ์ที่ส่งคืนโดย API จะใช้เพื่ออัปเดตโมเดล

getRadmonNumberFromAPI : String->Cmd Msg
getRadmonNumberFromAPI newNo =
   let
      url =
         "http://numbersapi.com/"++newNo
   in
      Http.send NewFactArrived (Http.getString url)

เลขที่	วิธี	ลายเซ็น	คำอธิบาย
1	Http.getString	getString: String -> สตริงคำขอ	สร้างคำขอ GET และตีความเนื้อหาการตอบสนองเป็นสตริง
2	Http.send	ส่ง: (ผลลัพธ์ข้อผิดพลาด a -> msg) -> ขอ a -> Cmd msg	ส่งคำขอ Http

หลัก

นี่คือจุดเริ่มต้นของโครงการ Elm

main =
   Html.program
      { init = init
      , view = view
      , update = update
      , subscriptions = subscriptions
      }

วางมันทั้งหมดเข้าด้วยกัน

Step 1 - สร้างโฟลเดอร์ CommandApp และไฟล์ CommandDemo.elm

Step 2- ติดตั้งโมดูล http ใช้คำสั่งแพคเกจติดตั้งเอล์มเอล์ม-lang / http

Step 2 - พิมพ์เนื้อหาสำหรับ CommandDemo.elm ดังที่แสดงด้านล่าง -

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Http

main =
   Html.program
      { init = init
      , view = view
      , update = update
      , subscriptions = subscriptions
      }

-- MODEL
type alias Model =
   { heading : String
   , factText : String
   , input :String
   }

init : (Model, Cmd Msg)
init =
   ( Model "NumbersAPI" "NoFacts" "42"-- set model two fields
   , Cmd.none -- not to invoke api initially
   )

-- UPDATE

type Msg
   = ShowFacts
   |Input String
   | NewFactArrived (Result Http.Error String)

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
   case msg of
      Input newInput ->
      (Model "NumbersApi typing.." "" newInput ,Cmd.none)
      ShowFacts ->
         (model, getRadmonNumberFromAPI model.input)

      NewFactArrived (Ok newFact) ->
         (Model "DataArrived" newFact "", Cmd.none)

      NewFactArrived (Err _) ->
         (model, Cmd.none)

- VIEW

view : Model -> Html Msg
view model =
   div []
      [ h2 [] [text model.heading]
      ,input [onInput Input, value model.input] []
      , button [ onClick ShowFacts ] [ text "show facts" ]
      , br [] []
      , h3 [][text model.factText]
      ]

-- SUBSCRIPTIONS

subscriptions : Model -> Sub Msg
subscriptions model =
   Sub.none

-- HTTP

getRadmonNumberFromAPI : String->Cmd Msg
getRadmonNumberFromAPI newNo =
   let
      url =
      "http://numbersapi.com/"++newNo
   in
      Http.send NewFactArrived (Http.getString url)

Step 4 - เริ่มคำสั่ง

C:\Users\dell\elm\CommandApp> elm make .\CommandDemo.elm

สิ่งนี้จะสร้างไฟล์ html ดังที่แสดงด้านล่าง