مقدمه
برنامههای وب
Elm زبانی دلپذیر برای ساخت برنامههای وب قابلاعتماد است. پیامهای خطای دوستانه، کارایی عالی، حجم کم و بدون هیچ استثنای زمان اجرا دارد.
احتمالاً مشهورترین و پرکپیشدهترین بخش Elm، معماری Elm است؛ الگویی ساده برای ساختاردهی برنامههای وب که همهی برنامههای وب 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) ]
]
دستورالعملها
دوستتان پائولا سعی میکند در حل سرنخهای جدول کلمات متقاطع بهتر شود. او خوانده است که برخی سرنخها نشان میدهند که پاسخ یک پالیندروم است.
پالیندروم واژه یا جملهای است که چه از جلو و چه از عقب یکسان خوانده میشود.
او از شما میخواهد وبسایت بسیار سادهای برایش بنویسید که بررسی کند یک رشته پالیندروم هست یا نه، تا بتواند حدسهایش را بررسی کند.
شما تصمیم میگیرید این کار را با یک برنامهی [sandbox][browser-sandox] در Elm انجام دهید.
این برنامه یک جعبهی متن خواهد داشت که پائولا میتواند حدسش را در آن تایپ کند، و متنی که نشان میدهد متن داخل جعبه پالیندروم هست یا نه.
این متن هر بار که متن داخل جعبهی متن تغییر کند، بهروزرسانی میشود.
1. انواع Model و Msg را برای برنامه تعریف کنید و تابع init را بنویسید
Model برنامه به رشتهای نیاز دارد که باید بررسی شود. نام این فیلد باید content باشد.
برنامه به یک Msg نیاز دارد تا نشان دهد متن داخل جعبهی متن تغییر کرده است.
نام این گونه باید Change باشد.
تابع init باید یک مقدار Model اولیه با فیلد content خالی برگرداند.
2. تابع update را بنویسید
تابع update باید یک پارامتر Msg و یک پارامتر Model بگیرد و یک Model جدید برگرداند.
Msg متنی را با خود میآورد که کاربر تایپ کرده است و Model جدید باید آن متن را در بر داشته باشد.
3. تابع view را بنویسید
Elm ایجاب میکند که تابع view مقداری از نوع Html msg برگرداند؛ یعنی باید از تابع view تنها یک عنصر برگردانید (و نه آرایهای از عنصرها).
درون این عنصر ریشه باید یک عنصر input (همان جعبهی متن) و یک div با محتوای text وجود داشته باشد که نشان دهد متن داخل input پالیندروم هست یا نه.
این متن باید «This is a palindrome» یا «Not a palindrome» باشد.
4. تابع main را بنویسید
تابع main باید Browser.sandbox را فراخوانی کند و یک پارامتر رکورد شامل توابع init، update و view به آن بدهد.
برای اینکه تمرین در ویرایشگر آنلاین Exercism کار کند، ما یک Browser.sandbox جعلی همراه کد به کار میبریم.
این کار هیچ تفاوتی در کدی که برای حل این تمرین مینویسید ایجاد نمیکند.
تمرین یادگیری
