مقدمة
تطبيقات الويب
Elm لغة ممتعة لبناء تطبيقات ويب موثوقة.
فهي تقدّم رسائل خطأ ودّية، وأداءً رائعًا، وحجمًا صغيرًا للأصول، ولا استثناءات وقت التشغيل.
ولعلّ أشهر جزء من Elm وأكثره اقتباسًا هو معمارية Elm، وهي نمط بسيط لبناء تطبيقات الويب، وعليها تُكتب جميع تطبيقات Elm.
الفكرة الجوهرية هي أن كودك يدور حول Model يحمل حالة تطبيقك، وحول طريقةٍ لتحديثه عبر update، وطريقةٍ لعرضه عبر view.
يحتوي Model على حالة التطبيق، أي كل البيانات التي يحتاجها التطبيق.
إذا تخيّلت تطبيقًا بسيطًا فيه مربّع نص، ونصٌّ يعرض ذلك النص معكوسًا، فسيبدو 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 وهميًا مع الكود. وهذا لا يُحدث أي فرق في الكود الذي تكتبه لحل هذا التمرين.
تمرين تعلّمي
