परिचय
वेब एप्लिकेशन
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) ]
]
निर्देश
आपकी दोस्त पाउला क्रॉसवर्ड के संकेत हल करने में बेहतर होने की कोशिश कर रही है। उसने पढ़ा है कि कुछ संकेत बताते हैं कि उत्तर एक पैलिंड्रोम होता है।
पैलिंड्रोम ऐसा शब्द या वाक्य होता है जो आगे से पढ़ने पर भी वही रहता है और पीछे से पढ़ने पर भी।
वह आपसे कहती है कि आप उसके लिए एक बहुत ही सरल वेबसाइट बनाइए, जो जाँच सके कि कोई स्ट्रिंग पैलिंड्रोम है या नहीं, ताकि वह अपने अनुमान जाँच सके।
आप इसे Elm के एक [सैंडबॉक्स][browser-sandox] एप्लिकेशन की मदद से बनाने का निर्णय लेते हैं।
एप्लिकेशन में एक टेक्स्ट बॉक्स होगा, जिसमें पाउला अपना अनुमान टाइप कर सकेगी, और एक टेक्स्ट होगा जो बताएगा कि बॉक्स का टेक्स्ट पैलिंड्रोम है या नहीं।
जब भी टेक्स्ट बॉक्स का टेक्स्ट बदलेगा, यह टेक्स्ट अपडेट हो जाएगा।
1. एप्लिकेशन के लिए Model और Msg टाइप बनाइए, और init फंक्शन लिखिए
एप्लिकेशन के Model में जाँचने वाली स्ट्रिंग होनी चाहिए, और इस फील्ड का नाम content होना चाहिए।
एप्लिकेशन को एक Msg चाहिए जो बताए कि टेक्स्ट बॉक्स का टेक्स्ट बदल गया है।
इसके लिए बनाए जाने वाले वेरिएंट का नाम Change होना चाहिए।
init फंक्शन को एक शुरुआती Model वैल्यू लौटानी चाहिए, जिसमें content फील्ड खाली हो।
2. अपडेट फंक्शन लिखिए
update फंक्शन को एक Msg और एक Model पैरामीटर लेने चाहिए, और एक नई Model लौटानी चाहिए।
Msg में उपयोगकर्ता द्वारा टाइप किया गया कुछ टेक्स्ट होगा, और नई Model में वह टेक्स्ट शामिल होना चाहिए।
3. व्यू फंक्शन लिखिए
Elm में व्यू फंक्शन को Html msg टाइप लौटाना ज़रूरी है। इसका मतलब है कि व्यू फंक्शन से आपको एक ही एलिमेंट लौटाना है (एलिमेंटों का ऐरे नहीं)।
इस रूट एलिमेंट के अंदर एक input एलिमेंट (टेक्स्ट बॉक्स) होना चाहिए, और एक div होना चाहिए जिसमें text कंटेंट हो, जो बताए कि input का टेक्स्ट पैलिंड्रोम है या नहीं।
टेक्स्ट "This is a palindrome" या "Not a palindrome" होना चाहिए।
4. मेन फंक्शन लिखिए
main फंक्शन को Browser.sandbox कॉल करना चाहिए, और उसमें init, update और view फंक्शनों वाला रिकॉर्ड पैरामीटर पास करना चाहिए।
इस अभ्यास को Exercism के ऑनलाइन एडिटर पर चलाने के लिए हम कोड के साथ एक नकली Browser.sandbox इस्तेमाल करते हैं।
इससे उस कोड पर कोई फर्क नहीं पड़ता जो आप इस अभ्यास को हल करने के लिए लिखते हैं।
सीखने का अभ्यास
