Elm এর ব্যবহারিক উদাহরণ এবং উন্নত প্রজেক্ট

Elm একটি declarative, functional programming ভাষা যা ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে ব্যবহৃত হয়। এটি টাইপ সেফ, সহজ এবং দ্রুত কোডিংয়ের জন্য পরিচিত। Elm এর একটি শক্তিশালী টাইপ সিস্টেম এবং declarative architecture রয়েছে, যা প্রোগ্রামারকে ত্রুটি সনাক্তকরণের সুবিধা দেয় এবং দ্রুত উন্নত অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে।

এখানে Elm এর কিছু ব্যবহারিক উদাহরণ এবং উন্নত প্রজেক্টের ধারণা দেওয়া হলো যা আপনি প্রকল্পে কাজে লাগাতে পারেন।

১. Elm এ Counter অ্যাপ্লিকেশন (Basic Example)

এটি একটি খুবই সাধারণ counter অ্যাপ্লিকেশন যেখানে একটি বাটন ক্লিক করলে কাউন্টার বেড়ে যাবে এবং কাউন্টার ভ্যালু দেখাবে। এটি Elm এর বেসিক কনসেপ্ট যেমন Model, Update, এবং View ধারণাগুলির উপর ভিত্তি করে।

Elm Code:

module Main exposing (..)

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

-- Model
type alias Model =
    { count : Int }

-- Initial Model
init : Model
init =
    { count = 0 }

-- Msg
type Msg
    = Increment

-- Update function
update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment -> { model | count = model.count + 1 }

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

-- Main function
main =
    Html.beginnerProgram { model = init, view = view, update = update }

এখানে কি হচ্ছে:

• Model: count নামে একটি Int টাইপের ফিল্ড রয়েছে।
• Update: Increment মেসেজটি পেলে কাউন্ট বাড়ানো হবে।
• View: একটি বাটন এবং কাউন্টের মান দেখানোর জন্য view ফাংশন ব্যবহৃত হয়েছে।

২. Elm এ To-Do অ্যাপ্লিকেশন (Intermediate Example)

এটি একটি সিম্পল To-Do অ্যাপ্লিকেশন যেখানে ব্যবহারকারী কাজ যোগ করতে পারে এবং সম্পন্ন কাজগুলো চিহ্নিত করতে পারে।

Elm Code:

module Main exposing (..)

import Html exposing (Html, div, input, button, ul, li, text)
import Html.Events exposing (onClick)

-- Model
type alias Model =
    { tasks : List Task }

type alias Task =
    { name : String, completed : Bool }

-- Initial Model
init : Model
init =
    { tasks = [] }

-- Msg
type Msg
    = AddTask String
    | ToggleComplete Int

-- Update function
update : Msg -> Model -> Model
update msg model =
    case msg of
        AddTask name ->
            let
                newTask = { name = name, completed = False }
            in
            { model | tasks = model.tasks ++ [ newTask ] }

        ToggleComplete index ->
            let
                task = List.Extra.getAt index model.tasks |> Maybe.withDefault { name = "", completed = False }
                updatedTask = { task | completed = not task.completed }
                updatedTasks = List.Extra.setAt index updatedTask model.tasks
            in
            { model | tasks = updatedTasks }

-- View function
view : Model -> Html Msg
view model =
    div []
        [ input [ placeholder "Add task", onClick (AddTask "New Task") ] []
        , button [ onClick (AddTask "New Task") ] [ text "Add Task" ]
        , ul [] (List.indexedMap viewTask model.tasks)
        ]

viewTask : Int -> Task -> Html Msg
viewTask index task =
    li []
        [ text task.name
        , if task.completed then text " (Completed)" else text " (Pending)"
        , button [ onClick (ToggleComplete index) ] [ text "Toggle" ]
        ]

-- Main function
main =
    Html.beginnerProgram { model = init, view = view, update = update }

এখানে কি হচ্ছে:

• Model: tasks একটি তালিকা যার মধ্যে Task (যার দুটি ফিল্ড, name এবং completed) রয়েছে।
• Update: নতুন কাজ যোগ করা এবং একটি কাজের স্টেট পরিবর্তন করা (যেমন পূর্ণ বা অসম্পূর্ণ চিহ্নিত করা)।
• View: একটি ইনপুট ফিল্ড এবং কাজের তালিকা রেন্ডার করা হয়েছে।

৩. Elm এ Weather App (Advanced Example)

এটি একটি Weather App যেখানে ব্যবহারকারী তার অবস্থান (location) এর ভিত্তিতে আবহাওয়ার তথ্য দেখতে পারে। এখানে HTTP API ব্যবহৃত হয়েছে।

Elm Code:

module Main exposing (..)

import Html exposing (Html, div, text, input, button)
import Http
import Json.Decode exposing (decodeString, field, string, int)

type alias Model =
    { location : String, weather : Maybe Weather }

type alias Weather =
    { temperature : Int, description : String }

init : Model
init =
    { location = "", weather = Nothing }

type Msg
    = GetWeather

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
    case msg of
        GetWeather ->
            let
                request = Http.get
                    { url = "https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=" ++ model.location
                    , expect = Http.expectJson GotWeather weatherDecoder
                    }
            in
            (model, Http.send request)

type Msg
    = GotWeather (Result Http.Error Weather)

weatherDecoder : Json.Decode.Decoder Weather
weatherDecoder =
    decodeString
        (field "current"
            (field "temp_c" int
                |> map2 Weather
                    (field "condition" (field "text" string))
            )
        )

view : Model -> Html Msg
view model =
    div []
        [ input [ placeholder "Enter city", onInput UpdateLocation ] []
        , button [ onClick GetWeather ] [ text "Get Weather" ]
        , case model.weather of
            Nothing -> text "No weather data"
            Just weather ->
                div []
                    [ text ("Temperature: " ++ String.fromInt weather.temperature)
                    , text ("Condition: " ++ weather.description)
                    ]
        ]

main =
    Html.beginnerProgram { model = init, view = view, update = update }

এখানে কি হচ্ছে:

• HTTP Request: ব্যবহারকারী শহরের নাম ইনপুট করার পর, weather API থেকে ডেটা লোড করা হচ্ছে।
• weatherDecoder ব্যবহার করে API থেকে প্রাপ্ত JSON ডেটা ডিকোড করা হচ্ছে।
• View: শহরের নাম এবং আবহাওয়া দেখানো হচ্ছে।

৪. Advanced Project: Todo List with Local Storage Integration

এটি একটি উন্নত To-Do List অ্যাপ্লিকেশন, যেখানে ব্যবহারকারী কাজের তালিকা সংরক্ষণ করতে পারে এবং localStorage এর মাধ্যমে ডেটা সংরক্ষণ করা হয়।

Elm Code:

module Main exposing (..)

import Html exposing (Html, div, input, button, ul, li, text)
import Html.Attributes exposing (placeholder)
import Html.Events exposing (onClick)

type alias Model =
    { tasks : List String }

init : Model
init =
    { tasks = [] }

type Msg
    = AddTask String
    | LoadTasks

update : Msg -> Model -> Model
update msg model =
    case msg of
        AddTask task ->
            { model | tasks = model.tasks ++ [ task ] }
        LoadTasks ->
            let
                loadedTasks = getLocalStorageTasks()
            in
            { model | tasks = loadedTasks }

view : Model -> Html Msg
view model =
    div []
        [ input [ placeholder "New Task" ] []
        , button [ onClick (AddTask "Sample Task") ] [ text "Add Task" ]
        , ul [] (List.map (\task -> li [] [ text task ]) model.tasks)
        ]

getLocalStorageTasks : List String
getLocalStorageTasks =
    -- You can add logic to get the tasks from localStorage
    []

main =
    Html.beginnerProgram { model = init, view = view, update = update }

এখানে ব্যবহারকারী যে কাজগুলো যোগ করবে তা localStorage তে সংরক্ষণ হবে এবং পরবর্তী সময়ে অ্যাপ্লিকেশন রিফ্রেশ করার পর ডেটা লোড হবে।

উপসংহার

Elm একটি অত্যন্ত শক্তিশালী ফ্রেমওয়ার্ক যা declarative এবং functional programming এর সুবিধা নিয়ে ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য আদর্শ। এর টাইপ সিস্টেম এবং declarative nature এর কারণে কোড সহজে বুঝতে এবং ডিবাগ করতে সাহায্য করে। উপরে উল্লেখিত উদাহরণগুলোর মাধ্যমে Elm এর বিভিন্ন ফিচার যেমন model-update-view architecture, HTTP requests, localStorage integration, এবং event handling ইত্যাদি দেখানো হয়েছে, যা আপনাকে একটি

উন্নত Elm প্রোজেক্ট তৈরি করতে সাহায্য করবে।