ভূমিকা
ওয়েব অ্যাপ্লিকেশন
এলম হলো নির্ভরযোগ্য ওয়েব অ্যাপ্লিকেশন তৈরির জন্য একটি চমৎকার প্রোগ্রামিং ভাষা।
এতে রয়েছে বন্ধুত্বপূর্ণ এরর মেসেজ, দুর্দান্ত পারফরম্যান্স, ছোট অ্যাসেট, আর কোনো রানটাইম এক্সেপশন নেই।
সম্ভবত এলমের সবচেয়ে বিখ্যাত ও সবচেয়ে বেশি অনুকৃত অংশটি হলো The Elm Architecture, যা ওয়েব অ্যাপ্লিকেশন গঠনের একটি সহজ প্যাটার্ন, এবং সব এলম ওয়েব অ্যাপ্লিকেশন এভাবেই লেখা হয়।
মূল ধারণাটি হলো আপনার কোড গড়ে ওঠে আপনার অ্যাপ্লিকেশনের স্টেটের একটি Model, আপনার মডেল update করার একটি উপায়, এবং আপনার মডেল view করার একটি উপায় ঘিরে।
Model-এ থাকে অ্যাপ্লিকেশনের স্টেট, অর্থাৎ অ্যাপ্লিকেশনের প্রয়োজনীয় সব ডেটা।
যদি আপনি একটি টেক্সট বক্সসহ একটি সাধারণ অ্যাপ্লিকেশন কল্পনা করেন, যেখানে টেক্সট বক্সের লেখাটির উল্টো রূপ দেখানো হচ্ছে, তাহলে মডেলটি দেখতে নিচের মতো হবে।
আপনি এই উদাহরণটি Elm Guide-এও দেখতে পারেন।
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 রিটার্ন করে (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 ফাংশনটি খালি content ফিল্ডসহ একটি প্রাথমিক Model মান রিটার্ন করবে।
2. update ফাংশনটি লিখুন
update ফাংশনটি একটি Msg ও একটি Model প্যারামিটার নেবে, এবং একটি নতুন Model রিটার্ন করবে। Msg-এ ব্যবহারকারীর টাইপ করা কিছু লেখা থাকবে, এবং নতুন Model-এ সেই লেখাটি থাকা উচিত।
3. view ফাংশনটি লিখুন
Elm চায় view ফাংশনটি একটি Html msg টাইপ রিটার্ন করুক, অর্থাৎ view ফাংশন থেকে আপনাকে একটি মাত্র এলিমেন্ট রিটার্ন করতে হবে (এলিমেন্টের একটি অ্যারে নয়)।
এই রুট এলিমেন্টের ভেতরে একটি input এলিমেন্ট (টেক্সট বক্স) থাকবে, আর থাকবে text কনটেন্টসহ একটি div, যা জানাবে input-এর লেখাটি প্যালিনড্রোম কি না।
লেখাটি হবে "This is a palindrome" অথবা "Not a palindrome"।
4. main ফাংশনটি লিখুন
main ফাংশনটি Browser.sandbox কল করবে, এবং একটি রেকর্ড প্যারামিটার পাস করবে যাতে init, update ও view ফাংশন থাকবে।
Exercism অনলাইন এডিটরে অনুশীলনীটি কাজ করার জন্য আমরা কোডের সাথে একটি নকল Browser.sandbox ব্যবহার করি।
এটি এই অনুশীলনীটি সমাধানের জন্য আপনার লেখা কোডে কোনো পার্থক্য আনে না।
লার্নিং অনুশীলনী
