دکمه

اولین برنامه، یک شمارنده است که می‌تواند افزایش یا کاهش یابد.

در ادامه، کد برنامه قرار دارد. روی دکمه "ویرایش" کلیک تا در ویرایشگر آنلاین با آن کار کنید. سعی کنید متن یکی از دکمه‌ها را تغییر دهید. اکنون روی دکمه ویرایش کلیک کنید!

ویرایش

module Main exposing (..)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)



-- MAIN


main =
    Browser.sandbox { init = init, view = view, update = update }



-- MODEL


type alias Model =
    Int


init : Model
init =
    0



-- UPDATE


type Msg
    = Increment
    | Decrement


update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment ->
            model + 1

        Decrement ->
            model - 1



-- VIEW


view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Decrement ] [ text "-" ]
        , div [] [ text (String.fromInt model) ]
        , button [ onClick Increment ] [ text "+" ]
        ]

اکنون که کمی در کد جستجو کرده‌اید، ممکن است سوالاتی داشته باشید. مقدار main چه کاری انجام می‌دهد؟ اجزای مختلف چگونه با هم کار می‌کنند؟ بیایید کد را مرور و درباره آن صحبت کنیم.

یادداشت

این برنامه از برچسب‌گذاری نوع داده، نام مستعار و نوع داده سفارشی استفاده می‌کند. در این بخش، هدف آشنایی با معماری Elm است، بنابراین کمی جلوتر به بررسی نوع داده و شیوه خواندن آن می‌پردازیم. اگر درگیر این جنبه‌ها شده‌اید، پیشنهاد می‌کنم فصل‌های بعد را مطالعه کنید!

Main

مقدار main در Elm مقداری ویژه است. این مقدار توصیف می‌کند که چه چیزی روی صفحه نمایش داده شود. در این مورد، قرار است برنامه را با مقدار init راه‌اندازی کنیم، تابع view همه چیز را روی صفحه نمایش می‌دهد و ورودی کاربر به تابع update منتقل می‌شود. این فرآیند را به عنوان توصیف سطح بالا از برنامه در نظر بگیرید.

Model

مدل‌سازی داده در Elm بسیار مهم است. هدف مدل‌سازی این است که تمام جزییات مربوط به برنامه را به عنوان داده ثبت کند.

برای ساخت یک شمارنده، باید یک عدد را که بالا و پایین می‌رود، پیگیری کنیم. این بدان معناست که مدل ما این بار واقعا کوچک است:

type alias Model = Int

فقط به یک مقدار Int نیاز داریم تا شمارش فعلی را پیگیری کنیم. می‌توانیم این را در مقدار اولیه‌مان ببینیم:

init : Model
init =
  0

مقدار اولیه صفر است و با فشار دادن دکمه‌های مختلف افزایش یا کاهش می‌یابد.

View

یک مدل داریم، اما چگونه آن را روی صفحه نمایش دهیم؟ این نقش تابع view است:

view : Model -> Html Msg
view model =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

این تابع مدل را به عنوان یک آرگومان می‌گیرد که خروجی آن HTML است. بنابراین می‌خواهیم یک دکمه کاهش، شمارش فعلی و یک دکمه افزایش را نمایش دهیم.

توجه داشته باشید که برای هر دکمه یک فراخوان onClick داریم که این طور خوانده می‌شود: زمانی که کسی کلیک کرد، یک پیام تولید کن. بنابراین دکمه افزایش یک پیام Increment و دکمه کاهش یک پیام Decrement تولید می‌کند. این پیام چیست و به کجا می‌رود؟ به تابع update!

Update

تابع update توصیف می‌کند که مدل ما چگونه در طول زمان تغییر خواهد کرد.

دو پیام را تعریف می‌کنیم که ممکن است دریافت کند:

type Msg = Increment | Decrement

در ادامه، تابع update توصیف می‌کند هنگام دریافت یکی از این پیام‌ها، چه کاری باید انجام دهیم:

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

اگر پیام Increment دریافت شود، مدل را یک واحد افزایش می‌دهیم. اگر پیام Decrement دریافت شود، مدل را یک واحد کاهش می‌دهیم.

با هر مرتبه دریافت پیام، آن را از طریق تابع update اجرا می‌کنیم تا یک مدل جدید به دست آوریم. سپس تابع view را فراخوانی می‌کنیم تا ببینیم چگونه مدل جدید را روی صفحه نمایش دهیم. در ادامه، این روند را تکرار می‌کنیم! ورودی کاربر یک پیام تولید می‌کند، مدل را بروزرسانی کرده و آن را روی صفحه نمایش می‌دهیم.

مرور کلی

اکنون که تمام اجزای یک برنامه Elm را دیده‌اید، ممکن است کمی آسان‌تر باشد که ببینید چگونه آن‌ها در کنار یکدیگر قرار می‌گیرند:

برنامه با رِندر کردن مقدار اولیه روی صفحه شروع می‌شود. در ادامه، وارد این حلقه می‌شوید:

1. انتظار برای ورودی کاربر
2. ارسال پیام به تابع update
3. تولید یک مدل جدید
4. فراخوانی تابع view برای خروجی HTML
5. نمایش HTML جدید روی صفحه
6. تکرار گام‌های ۱ تا ۵!

این فرآیند، جوهره معماری Elm است. هر برنامه‌ای که از این به بعد ببینیم، یک تغییر جزیی در این الگوی پایه خواهد بود.

تمرین

یک دکمه برای بازنشانی شمارنده به صفر اضافه کنید:

• یک حالت Reset به Msg اضافه کنید.
• یک شاخه Reset در تابع update اضافه کنید.
• یک دکمه در تابع view اضافه کنید.

می‌توانید برنامه را در ویرایشگر آنلاین امتحان کنید. اگر این کار خوب پیش رفت، سعی کنید یک دکمه دیگر برای افزایش به اندازه ۱۰ واحد اضافه کنید.