एल्म - कमांड्स

पिछले अध्यायों में, हमने एल्म वास्तुकला के विभिन्न घटकों और उनके कार्यों पर चर्चा की। संदेश का उपयोग करते हुए उपयोगकर्ता और एप्लिकेशन एक दूसरे के साथ संवाद करते हैं।

एक उदाहरण पर विचार करें, जहां उपयोगकर्ता के अनुरोध को पूरा करने के लिए एप्लिकेशन को अन्य घटकों जैसे बाहरी सर्वर, एपीआई, माइक्रोसेवा आदि से संवाद करने की आवश्यकता होती है। यह एल्म में कमांड्स का उपयोग करके प्राप्त किया जा सकता है। संदेश और आदेश पर्यायवाची नहीं हैं। संदेश अंतिम उपयोगकर्ता और एप्लिकेशन के बीच संचार का प्रतिनिधित्व करते हैं, जबकि कमांड यह दर्शाते हैं कि एल्म एप्लिकेशन अन्य संस्थाओं के साथ कैसे संवाद करता है। एक संदेश के जवाब में एक कमांड चालू होता है।

निम्नलिखित आंकड़ा एक जटिल एल्म अनुप्रयोग के वर्कफ़्लो को दिखाता है -

उपयोगकर्ता दृश्य के साथ सहभागिता करता है। दृश्य उपयोगकर्ता की कार्रवाई के आधार पर एक उपयुक्त संदेश उत्पन्न करता है। अद्यतन घटक इस संदेश को प्राप्त करता है और एक कमांड चलाता है।

वाक्य - विन्यास

कमांड को परिभाषित करने का सिंटैक्स नीचे दिया गया है -

type Cmd msg

दृश्य द्वारा उत्पन्न संदेश कमांड को पास किया जाता है।

चित्रण

निम्न उदाहरण एक एपीआई के लिए अनुरोध करता है और एपीआई से परिणाम प्रदर्शित करता है।

एप्लिकेशन उपयोगकर्ता से एक नंबर स्वीकार करता है, इसे नंबर एपीआई में भेजता है। यह एपीआई संख्या से संबंधित तथ्यों को लौटाता है।

आवेदन के विभिन्न घटक इस प्रकार हैं -

Http मॉड्यूल

HTTP अनुरोधों को बनाने और भेजने के लिए एल्म के Http मॉड्यूल का उपयोग किया जाता है। यह मॉड्यूल कोर मॉड्यूल का हिस्सा नहीं है। हम इस पैकेज को स्थापित करने के लिए एल्म पैकेज प्रबंधक का उपयोग करेंगे।

एपीआई

इस उदाहरण में, एप्लिकेशन नंबर एपीआई के साथ संवाद करेगा - "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]
      ]

नमूना

मॉडल उपयोगकर्ता द्वारा दर्ज किए गए मूल्य और एपीआई द्वारा लौटाए जाने वाले परिणाम का प्रतिनिधित्व करता है।

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

संदेश

आवेदन में निम्नलिखित तीन संदेश हैं -

• ShowFacts
• Input
• NewFactArrived

शो फैक्ट्स बटन पर क्लिक करने पर , शोफैक्ट मैसेज को अपडेट विधि में भेज दिया जाता है। जब उपयोगकर्ता टेक्स्टबॉक्स में कुछ मूल्य टाइप करता है, तो इनपुट संदेश को अपडेट करने की विधि पारित की जाती है। अंत में, जब Http सर्वर की प्रतिक्रिया प्राप्त होती है, तो NewFactArrived संदेश अपडेट करने के लिए पास हो जाएगा।

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)

हेल्पर फंक्शन

हेल्पर फ़ंक्शन getRandomNumberFromAPI नंबरएपीआई को आमंत्रित करता है और उपयोगकर्ता द्वारा दर्ज की गई संख्या को पास करता है। एपीआई द्वारा लौटाए गए परिणाम का उपयोग मॉडल को अपडेट करने के लिए किया जाता है।

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

अनु क्रमांक।	तरीका	हस्ताक्षर	विवरण
1	Http.getString	getString: स्ट्रिंग -> अनुरोध स्ट्रिंग	GET अनुरोध बनाएं और प्रतिक्रिया निकाय को स्ट्रिंग के रूप में व्याख्या करें।
2	Http.send	भेजें: (परिणाम त्रुटि a -> msg) -> अनुरोध a -> Cmd संदेश	Http अनुरोध भेजें।

मुख्य

यह एल्म परियोजना का प्रवेश बिंदु है।

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

यह सब एक साथ डालें

Step 1 - फोल्डर CommandApp बनाएं और CommandDemo.elm फाइल करें।

Step 2- कमांड एल्म पैकेज का उपयोग करके http मॉड्यूल स्थापित करें एल्म-लैंग / http स्थापित करें ।

Step 2 कमांडडेम.ओएलएम की सामग्री को नीचे दिखाए अनुसार लिखें -

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 फ़ाइल उत्पन्न करेगा।