محاسبهگر نرخ طلا با فرم، متغیر و جاوااسکریپت
در این راهنما یک محاسبهگر نرخ طلا میسازیم: کاربر وزن طلا، نرخ هر گرم و درصد اجرت ساخت را در فیلدهای فرم وارد میکند؛ با کلیک روی دکمه «محاسبه»، کد جاوااسکریپت قیمتها را محاسبه میکند و نتیجه با ویجت نمایشگر متغیر به تومان نمایش داده میشود.
با این نمونه بهصورت عملی با فیلد متنی فرم، اتصال متغیر به ورودی، عملکرد اجرای کد جاوااسکریپت و نمایشگر متغیر کار میکنید.
پیشنیاز
- اپلیکیشن جدیدی ساخته باشید یا یک اپ موجود را باز کنید.
- حداقل یک صفحه داشته باشید (مثلاً از مسیر ساخت اولین اپلیکیشن).
- آشنایی اولیه با متغیر و عملکرد مفید است.
هدف اپ نمونه
| بخش | توضیح |
|---|---|
| صفحه | یک صفحه با فرم ورودی و بخش نمایش نتیجه. |
| ویجتها | عنوان، سه فیلد متنی، دکمه محاسبه، سه نمایشگر متغیر برای نتایج. |
| متغیرهای ورودی | goldWeight، pricePerGram، wagePercent — متصل به فیلدهای فرم. |
| متغیرهای خروجی | goldBasePrice، wageAmount، totalGoldPrice — نتیجه محاسبه به تومان. |
| رویداد | کلیک روی دکمه «محاسبه». |
| عملکرد | اجرای کد جاوااسکریپت برای خواندن ورودیها، محاسبه و ذخیره نتیجه. |
فرمول محاسبه
همه قیمتها به تومان و بدون اعشار در نظر گرفته میشوند:
قیمت پایه = وزن (گرم) × نرخ هر گرم (تومان)
مبلغ اجرت = قیمت پایه × (درصد اجرت ÷ ۱۰۰)
قیمت نهایی = قیمت پایه + مبلغ اجرت
مثال: وزن ۵ گرم، نرخ ۱۰٬۰۰۰٬۰۰۰ تومان، اجرت ۷٪
قیمت پایه = ۵ × ۱۰٬۰۰۰٬۰۰۰ = ۵۰٬۰۰۰٬۰۰۰ تومان
مبلغ اجرت = ۵۰٬۰۰۰٬۰۰۰ × ۷٪ = ۳٬۵۰۰٬۰۰۰ تومان
قیمت نهایی = ۵۳٬۵۰۰٬۰۰۰ تومان
گام ۱: ساخت یا انتخاب صفحه
- یک صفحه جدید بسازید یا صفحه موجود را انتخاب کنید.
- نام صفحه را مثلاً «محاسبهگر طلا» بگذارید.
- وارد بخش طراحی صفحه شوید و یک قالب ساده (مثلاً خالی) انتخاب کنید.
گام ۲: ایجاد متغیرها هنگام ورود به صفحه
قبل از اتصال فیلدها به متغیر، باید متغیرها وجود داشته باشند. همه را هنگام ورود به صفحه با عملکرد ایجاد متغیر میسازیم.
- صفحه «محاسبهگر طلا» را انتخاب کنید و وارد تنظیمات صفحه شوید.
- در بخش افزودن رویداد، رویداد ورود به صفحه اضافه کنید.
- برای این رویداد از عملکرد عملکرد چندگانه استفاده کنید تا چند متغیر پشتسرهم ساخته شوند.
- داخل عملکرد چندگانه، برای هر ردیف جدول زیر یک عملکرد ایجاد متغیر اضافه کنید:
| نام متغیر | نوع مقدار | مقدار اولیه | نوع ذخیرهسازی | توضیح |
|---|---|---|---|---|
goldWeight | عددی | 0 | موقت | وزن طلا (گرم) — از فرم |
pricePerGram | عددی | 0 | موقت | نرخ هر گرم (تومان) — از فرم |
wagePercent | عددی | 7 | موقت | درصد اجرت ساخت — پیشفرض ۷٪ |
goldBasePrice | عددی | 0 | موقت | قیمت پایه — خروجی محاسبه |
wageAmount | عددی | 0 | موقت | مبلغ اجرت — خروجی محاسبه |
totalGoldPrice | عددی | 0 | موقت | قیمت نهایی — خروجی محاسبه |
برای هر عملکرد ایجاد متغیر، گزینه «درصورتی که متغیر قبلاً ایجاد شده کاری انجام نشود» را فعال کنید تا با ورود دوباره به صفحه، مقادیر محاسبهشده قبلی پاک نشوند؛ مگر اینکه بخواهید هر بار از صفر شروع شود.
اگر میخواهید آخرین نرخ واردشده بعد از بستن اپ هم بماند، برای pricePerGram و wagePercent از ذخیرهسازی دستگاه استفاده کنید.
گام ۳: اضافه کردن ویجتهای فرم
در بخش طراحی صفحه ویجتهای زیر را اضافه کنید. جزئیات فیلد متنی در راهنمای ویجت فیلد متنی آمده است.
۳.۱ عنوان صفحه
- یک ویجت متن اضافه کنید.
- متن: «محاسبهگر نرخ طلا»
- فونت و اندازه را کمی بزرگتر از بقیه متنها قرار دهید.
۳.۲ فیلد وزن طلا
- یک ویجت فیلد متنی (فرم) اضافه کنید.
- نام فیلد:
goldWeight - برچسب فیلد: «وزن طلا (گرم)»
- نوع متن: عدد
- متن راهنما: «مثلاً ۵»
- اجازه خالی بودن فیلد: غیرفعال
- در بخش اتصال به متغیر، متغیر
goldWeightرا انتخاب کنید.
۳.۳ فیلد نرخ هر گرم
- یک ویجت فیلد متنی (فرم) اضافه کنید.
- نام فیلد:
pricePerGram - برچسب فیلد: «نرخ هر گرم طلا (تومان)»
- نوع متن: عدد
- متن راهنما: «مثلاً ۱۰۰۰۰۰۰۰»
- متن پیشفرض: میتوانید خالی بگذارید یا یک نرخ نمونه قرار دهید.
- اجازه خالی بودن فیلد: غیرفعال
- اتصال به متغیر:
pricePerGram
۳.۴ فیلد درصد اجرت
- یک ویجت فیلد متنی (فرم) اضافه کنید.
- نام فیلد:
wagePercent - برچسب فیلد: «درصد اجرت ساخت»
- نوع متن: عدد
- متن پیشفرض:
7 - متن راهنما: «معمولاً بین ۵ تا ۱۵»
- اجازه خالی بودن فیلد: فعال (اگر خالی بماند، در کد صفر در نظر گرفته میشود)
- اتصال به متغیر:
wagePercent
با اتصال فیلد به متغیر، هر بار کاربر مقداری تایپ کند، همان لحظه مقدار متغیر هم بهروز میشود. بنابراین هنگام کلیک دکمه محاسبه، کد جاوااسکریپت میتواند مقادیر را با AppEditor.getVar بخواند.
گام ۴: دکمه محاسبه
- یک ویجت دکمه اضافه کنید.
- متن دکمه: «محاسبه قیمت»
- دکمه را زیر فیلدهای فرم قرار دهید.
رویداد کلیک این دکمه را در گام بعد تنظیم میکنیم.
گام ۵: نمایش نتایج با ویجت نمایشگر متغیر
برای نمایش خروجی، از ویجت نمایشگر متغیر استفاده میکنیم. سه ویجت اضافه کنید:
۵.۱ قیمت پایه
- ویجت متن با متن «قیمت پایه (تومان):»
- ویجت نمایشگر متغیر با نام متغیر
goldBasePrice
۵.۲ مبلغ اجرت
- ویجت متن با متن «اجرت ساخت (تومان):»
- ویجت نمایشگر متغیر با نام متغیر
wageAmount
۵.۳ قیمت نهایی
- ویجت متن با متن «قیمت نهایی (تومان):» — میتوانید فونت را بولد کنید.
- ویجت نمایشگر متغیر با نام متغیر
totalGoldPrice— رنگ متن را مثلاً سبز یا طلایی قرار دهید.
اگر میخواهید واحد «تومان» کنار عدد باشد، میتوانید بهجای نمایشگر متغیر از ویجت متن با قالب {{totalGoldPrice}} تومان استفاده کنید.
چیدمان پیشنهادی:
[ عنوان ]
[ فیلد وزن ]
[ فیلد نرخ ]
[ فیلد اجرت ]
[ دکمه محاسبه ]
───────────────
قیمت پایه: [goldBasePrice]
اجرت ساخت: [wageAmount]
قیمت نهایی: [totalGoldPrice]
گام ۶: نوشتن کد جاوااسکریپت
حالا منطق محاسبه را روی دکمه «محاسبه قیمت» قرار میدهیم.
- ویجت دکمه را انتخاب کنید.
- در سربرگ رویداد کلیک، عملکرد اجرای کد جاوااسکریپت اضافه کنید.
- کد زیر را در فیلد کد JavaScript قرار دهید:
var weight = Number(await AppEditor.getVar("goldWeight")) || 0;
var pricePerGram = Number(await AppEditor.getVar("pricePerGram")) || 0;
var wagePercent = Number(await AppEditor.getVar("wagePercent")) || 0;
if (weight <= 0 || pricePerGram <= 0) {
AppEditor.showMessage("لطفاً وزن و نرخ هر گرم را بهدرستی وارد کنید");
} else {
if (wagePercent < 0) wagePercent = 0;
if (wagePercent > 100) wagePercent = 100;
var basePrice = Math.round(weight * pricePerGram);
var wageAmount = Math.round(basePrice * wagePercent / 100);
var totalPrice = basePrice + wageAmount;
await AppEditor.setVar("goldBasePrice", basePrice);
await AppEditor.setVar("wageAmount", wageAmount);
await AppEditor.setVar("totalGoldPrice", totalPrice);
}
توضیح گامبهگام کد
- خواندن ورودیها: با
AppEditor.getVarمقدار سه متغیر متصل به فرم خوانده میشود. چون مقدار فیلد ممکن است رشته باشد، باNumber(...)به عدد تبدیل میشود. - اعتبارسنجی: اگر وزن یا نرخ صفر یا منفی باشد، پیام خطا نمایش داده میشود و محاسبه انجام نمیشود.
- محدود کردن درصد اجرت: مقدار بین ۰ تا ۱۰۰ نگه داشته میشود.
- محاسبه: قیمتها با
Math.roundبه عدد صحیح (تومان) گرد میشوند. - ذخیره نتیجه: با
AppEditor.setVarمقادیر در متغیرهای خروجی قرار میگیرند و ویجت نمایشگر متغیر بهصورت خودکار بهروز میشود.
خروجی توابع AppEditor از نوع Promise است؛ برای getVar و setVar حتماً از await استفاده کنید.
گام ۷: تست اپ
- اپ را پیشنمایش یا اجرا کنید.
- مقادیر نمونه وارد کنید:
- وزن:
5 - نرخ هر گرم:
10000000 - درصد اجرت:
7
- وزن:
- روی «محاسبه قیمت» کلیک کنید.
- نتایج باید اینطور باشد:
- قیمت پایه:
50000000 - اجرت ساخت:
3500000 - قیمت نهایی:
53500000
- قیمت پایه:
اگر نتیجه درست نبود
| مشکل | راهحل |
|---|---|
| عددها عوض نمیشوند | نام متغیر در کد، فیلد فرم و نمایشگر متغیر باید دقیقاً یکسان باشد (مثلاً goldBasePrice). |
| پیام «لطفاً وزن و نرخ…» | فیلدها را پر کنید؛ نوع فیلد را «عدد» بگذارید. |
| نمایشگر خالی است | متغیرها در رویداد ورود به صفحه ساخته شده باشند؛ یک بار صفحه را ببندید و دوباره باز کنید. |
| خطای جاوااسکریپت | از await قبل از getVar و setVar استفاده کنید. |
گام ۸ (اختیاری): بهبود تجربه کاربر
نمایش پیام موفقیت
در انتهای بلوک else کد، این خط را اضافه کنید:
AppEditor.showMessage("محاسبه انجام شد — قیمت نهایی: " + totalPrice.toLocaleString("fa-IR") + " تومان");
پاک کردن فرم
روی یک دکمه دوم با متن «پاک کردن»، عملکرد مقداردهی متغیر را چند بار اضافه کنید و مقادیر goldWeight، pricePerGram و متغیرهای نتیجه را 0 قرار دهید؛ یا از عملکرد بازنشانی فرم استفاده کنید.
شرط نمایش بخش نتیجه
میتوانید گروهی از ویجتهای نتیجه بسازید و شرط نمایش آن را «اگر totalGoldPrice بزرگتر از ۰ باشد» قرار دهید تا قبل از اولین محاسبه، بخش نتیجه دیده نشود.
خلاصه: چه چیزهایی استفاده شد؟
| مفهوم | کاربرد در این نمونه |
|---|---|
| ویجت فیلد متنی | دریافت وزن، نرخ و درصد اجرت از کاربر. |
| اتصال متغیر به ورودی | همگامسازی مقدار فیلد با goldWeight، pricePerGram، wagePercent. |
| اجرای کد جاوااسکریپت | خواندن متغیرها، محاسبه قیمت طلا، ذخیره نتیجه. |
| ویجت نمایشگر متغیر | نمایش goldBasePrice، wageAmount، totalGoldPrice. |
| ایجاد متغیر | آمادهسازی متغیرها هنگام ورود به صفحه. |
| رویداد | ورود به صفحه و کلیک دکمه. |
الگوی کلی این آموزش:
فیلد فرم ← متغیر ورودی
↓
کلیک دکمه ← اجرای JavaScript ← متغیر خروجی
↓
نمایشگر متغیر
همین الگو را میتوانید برای محاسبهگر ارز، تخفیف فروشگاه، ماشینحساب وام و هر فرم محاسباتی دیگری تکرار کنید.
ادامه مسیر
- اجرای کد جاوااسکریپت — مثالهای بیشتر برای
AppEditor.getVar،setVarوshowMessage. - متغیر — انواع متغیر، ذخیرهسازی و اتصال به فیلدها.
- آموزش اپ تعاملی نمونه — شمارنده ساده با متغیر و شرط.
- عملکردها — سایر عملکردهای آماده برای فرم و منطق اپ.