آموزش ساخت یک اپ تعاملی نمونه
در این راهنما با استفاده از امکانات اپادیتور یک اپ ساده و تعاملی میسازیم: یک شمارنده که با هر کلیک روی دکمه، عدد نمایشدادهشده یکی زیاد میشود و در رسیدن به عدد ۱۰ یک پیام تبریک نشان میدهد.
با این نمونه با صفحه، ویجت، متغیر، رویداد، عملکرد و شرط بهصورت عملی کار میکنید.
پیشنیاز
- اپلیکیشن جدیدی ساخته باشید یا یک اپ موجود را باز کنید.
- حداقل یک صفحه داشته باشید (مثلاً از مسیر ساخت اولین اپلیکیشن).
- آشنایی اولیه با مفاهیم پایه اپادیتور مفید است.
هدف اپ نمونه
| بخش | توضیح |
|---|---|
| صفحه | یک صفحه با عنوان و یک عدد در وسط. |
| ویجتها | متن عنوان، نمایشگر عدد (متغیر)، دکمه «افزایش». |
| متغیر | یک متغیر عددی به نام counterValue که مقدارش با کلیک عوض میشود. |
| رویداد | کلیک روی دکمه «افزایش». |
| عملکرد | افزایش متغیر counterValue بهاندازه ۱ و (در صورت رسیدن به ۱۰) نمایش پیام. |
| شرط | اگر counterValue برابر ۱۰ شد، پیام تبریک نمایش داده شود. |
الگوی کلی: رویداد (کلیک) ← عملکرد (افزایش متغیر) و در صورت نیاز شرط ← عملکرد (نمایش پیام).
گام ۱: ساخت یا انتخاب صفحه
- اگر اپ تازه است، یک صفحه جدید بسازید و آن را بهعنوان صفحه اصلی انتخاب کنید.
- وارد بخش طراحی صفحه شوید و یک قالب ساده (مثلاً خالی یا لیست ساده) انتخاب کنید.
- نام صفحه را مثلاً «شمارنده» بگذارید.
گام ۲: ایجاد متغیر counterValue
قبل از اینکه دکمه بتواند عدد را افزایش دهد، باید متغیری برای نگهداری مقدار شمارنده ساخته شود. در این نمونه متغیر را هنگام ورود کاربر به صفحه ایجاد میکنیم تا با باز شدن صفحه، مقدار اولیه آماده باشد.
- صفحه «شمارنده» را انتخاب کنید و وارد تنظیمات صفحه شوید.
- در بخش افزودن رویداد، یک رویداد از نوع ورود به صفحه اضافه کنید.
- برای این رویداد، عملکرد ایجاد متغیر را انتخاب کنید.
- در تنظیمات عملکرد ایجاد متغیر، مقدارها را اینطور تنظیم کنید:
- نام متغیر:
counterValue - نوع مقدار متغیر: عددی
- مقدار اولیه:
0 - نوع ذخیرهسازی: موقت؛ مگر اینکه بخواهید مقدار شمارنده بعد از بسته شدن و باز شدن دوباره اپ باقی بماند.
- نام متغیر:
اگر میخواهید شمارنده با هر بار ورود به صفحه از صفر شروع شود، مقدار اولیه را همان 0 نگه دارید. اگر نمیخواهید با ورود دوباره به صفحه، متغیر موجود دوباره مقداردهی شود، گزینه «درصورتی که متغیر قبلاً ایجاد شده کاری انجام نشود» را فعال کنید.
بدون این متغیر، عددی برای «افزایش» و «نمایش» نخواهیم داشت.
گام ۳: اضافه کردن ویجتها به صفحه
در بخش طراحی صفحه این ویجتها را به صفحه اضافه کنید:
۳.۱ ویجت متن (عنوان)
- یک ویجت متن اضافه کنید.
- متن آن را مثلاً «شمارنده» یا «روی دکمه کلیک کنید» بگذارید.
- محل و اندازه را مطابق طرح خود تنظیم کنید.
۳.۲ ویجت نمایشگر متغیر (عدد)
- یک ویجت نمایشگر متغیر (راهنمای ویجت نمایشگر متغیر) اضافه کنید.
- در تنظیمات ویجت، نام متغیر را
counterValueقرار دهید. - این ویجت از این به بعد همیشه مقدار متغیر
counterValueرا نشان میدهد.
۳.۳ ویجت دکمه
- یک ویجت دکمه اضافه کنید.
- متن دکمه را مثلاً «افزایش» بگذارید.
چیدمان پیشنهادی: عنوان بالا، عدد در وسط، دکمه زیر آن.
گام ۴: تعریف رویداد و عملکردها برای دکمه
میخواهیم با کلیک روی دکمه، ابتدا متغیر افزایش یابد و در صورت رسیدن به ۱۰، پیام نمایش داده شود.
۴.۱ تنظیم رویداد کلیک دکمه
- ویجت دکمه را انتخاب کنید.
- در تنظیمات ویجت دکمه، سربرگ رویداد کلیک را باز کنید.
- چون در این نمونه با کلیک روی دکمه باید دو کار انجام شود، از عملکرد عملکرد چندگانه استفاده کنید.
- داخل عملکرد چندگانه، عملکردهای موردنظر را به ترتیب اضافه کنید تا با یک کلیک، افزایش متغیر اجرا شود و در صورت برقرار بودن شرط، پیام تبریک هم نمایش داده شود.
۴.۲ عملکرد اول: افزایش متغیر
- یک عملکرد از نوع کاهش یا افزایش متغیر اضافه کنید.
- نام متغیر:
counterValue - نوع تغییر: افزایش
- مقدار تغییر:
1
با هر کلیک، مقدار counterValue یکی زیاد میشود و ویجت نمایشگر متغیر بهصورت خودکار بهروز میشود.
۴.۳ شرط و عملکرد دوم: پیام تبریک در رسیدن به ۱۰
- یک شرط اضافه کنید: «اگر متغیر
counterValueبرابر با10باشد». - در صورت برقرار بودن شرط، یک عملکرد نمایش پیام کوتاه (نمایش پیغام کوتاه) اضافه کنید و متن آن را مثلاً «آفرین! به ۱۰ رسیدید» بگذارید.
ترتیب اجرا در رویداد کلیک میتواند اینطور باشد:
- همیشه: افزایش متغیر
counterValueبهاندازه ۱ - اگر شرط (
counterValue == 10) برقرار بود: نمایش پیام کوتاه «آفرین! به ۱۰ رسیدید»
در این ساختار، عملکرد چندگانه کمک میکند چند عملکرد روی یک دکمه اجرا شوند؛ بنابراین هم افزایش متغیر همیشه انجام میشود و هم عملکرد دوم فقط زمانی اجرا میشود که شرط آن برقرار باشد.
گام ۵: تست اپ
- اپ را پیشنمایش یا اجرا کنید.
- روی دکمه «افزایش» چند بار کلیک کنید:
- عدد باید از ۰ به ۱، ۲، ۳، … برسد.
- وقتی عدد به ۱۰ رسید، پیام «آفرین! به ۱۰ رسیدید» نمایش داده شود.
اگر عدد عوض نشد، بررسی کنید:
- نام متغیر در ویجت نمایشگر متغیر و در عملکرد افزایش متغیر دقیقاً
counterValueباشد. - عملکرد افزایش متغیر در سربرگ رویداد کلیک همان دکمه تعریف شده باشد.
خلاصه: چه چیزهایی استفاده شد؟
| مفهوم | کاربرد در این نمونه |
|---|---|
| صفحه | صفحه «شمارنده» بهعنوان واحد نمایش. |
| ویجت | متن، نمایشگر متغیر، دکمه. |
| متغیر | counterValue برای نگهداری عدد. |
| رویداد | کلیک روی دکمه. |
| عملکرد | افزایش متغیر، نمایش پیام کوتاه. |
| شرط | اگر counterValue برابر ۱۰ باشد ← نمایش پیام. |
همین الگو (رویداد ← عملکرد و در صورت نیاز شرط ← عملکرد) را میتوانید برای دکمههای دیگر، فرمها، باز کردن صفحه، و هر رفتار تعاملی دیگر تکرار کنید.