پرش به محتویات

وب اپلیکیشن

تا این فصل، برنامه‌های Elm را با استفاده از Browser.element ایجاد کرده‌ایم که به ما اجازه می‌دهد یک DOM Node را در یک برنامه بزرگ‌تر کنترل کنیم. این کار برای معرفی Elm در محل کار عالی است (همانطور که در این مقاله توضیح داده شده است) اما بعد از آن چه اتفاقی می‌افتد؟ چگونه می‌توانیم از Elm بطور گسترده‌تری استفاده کنیم؟

در این فصل، یاد می‌گیریم که چگونه یک "وب اپلیکیشن" با تعدادی صفحه مختلف ایجاد کنیم که همه به خوبی با یکدیگر کار کنند، اما باید با کنترل یک صفحه واحد شروع کنیم.

کنترل صفحه

اولین قدم این است که برنامه را با Browser.document آغاز کنیم:

document :
  { init : flags -> ( model, Cmd msg )
  , view : model -> Document msg
  , update : msg -> model -> ( model, Cmd msg )
  , subscriptions : model -> Sub msg
  }
  -> Program flags model msg

آرگومان‌ها، بجز تابع view، تقریبا مشابه Browser.element هستند. بجای بازگشت یک مقدار Html، یک Document به این شکل باز می‌گردانید:

type alias Document msg =
  { title : String
  , body : List (Html msg)
  }

این کار باعث می‌شود قابلیت کنترل <title> و <body> صفحه فعلی را داشته باشید. شاید برنامه مقداری داده دانلود کند تا هر صفحه عنوان سفارشی خود را داشته باشد. اکنون می‌توانید به سادگی این عنوان را در تابع view تغییر دهید!

میزبانی صفحه

کامپایلر بطور پیشفرض یک فایل HTML تولید می‌کند، بنابراین می‌توانید برنامه را به این شکل کامپایل کنید:

elm make src/Main.elm

خروجی یک فایل index.html خواهد بود که می‌توانید آن را مانند هر فایل HTML دیگری استفاده کنید. این کار به خوبی انجام می‌شود، اما می‌توانید با (۱) کامپایل Elm به جاوااسکریپت و (۲) ایجاد یک فایل سفارشی، انعطاف‌پذیری بیشتری بدست آورید. برای این منظور، برنامه را به این شکل کامپایل کنید:

elm make src/Main.elm --output=main.js

این دستور، فایل main.js را تولید می‌کند که می‌توانید از یک فایل HTML سفارشی آن را فراخوانی کنید:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
  <link rel="stylesheet" href="whatever-you-want.css">
  <script src="main.js"></script>
</head>
<body>
  <script>var app = Elm.Main.init();</script>
</body>
</html>

این فایل HTML نسبتا ساده است. هر چیزی که نیاز دارید را در قسمت <head> قرار می‌دهید و برنامه Elm را در قسمت <body> راه‌اندازی می‌کنید. برنامه Elm از آنجا ادامه می‌دهد و همه چیز را پردازش می‌کند.

در هر صورت، اکنون یک فایل HTML دارید که می‌توانید به مرورگر وب ارسال کنید. این فایل را می‌توانید با خدمات رایگانی مانند GitHub Pages یا Netlify بدست کاربران برسانید، یا شاید یک سرور مجازی با خدماتی مانند Digital Ocean راه‌اندازی کنید. هر سرویس میزبانی که برای شما مناسب باشد! فقط به روشی نیاز دارید که فایل HTML به مرورگر وب کاربران ارسال شود.

نکته

اگر در حال سفارشی‌سازی با CSS هستید، ایجاد فایل HTML سفارشی مفید است. بسیاری از توسعه‌دهندگان از پروژه‌هایی مانند rtfeldman/elm-css برای مدیریت تمام استایل‌های خود از داخل Elm استفاده می‌کنند، اما شاید در تیمی کار می‌کنید که CSS از پیش تعریف شده دارد. شاید در تیمی کار می‌کنید که یکی از آن پیش‌پردازنده‌های CSS را استفاده می‌کند. ایرادی ندارد. فقط فایل CSS نهایی را در قسمت <head> فایل HTML قرار دهید.

لینک Digital Ocean موجود در این صفحه، یک پیوند ارجاعی است، بنابراین اگر از طریق آن ثبت نام و از خدماتش استفاده کنید، یک اعتبار ۲۵ دلاری برای هزینه‌های میزبانی وبسایت‌های elm-lang.org و package.elm-lang.org دریافت خواهیم کرد.