طراحی آزاد صفحه پروفایل کاربر

ویجت پروفایل کاربر یک چیدمان آماده و قفل است: عکس، نام، موبایل، ایمیل، رمز و فیلدهای سفارشی، همیشه به همین ترتیب و همیشه به شکل ردیف‌های پشت‌سرهم. فقط فونت، اندازه و چند رنگ قابل تغییر است.

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

شروع سریع: بلوک پروفایل کاربر

از منوی افزودن ویجت مسیر حساب کاربری ← بلوک‌های حساب کاربری ← پروفایل کاربر را انتخاب کنید. بلوک، عکس پروفایل، نام کامل، موبایل، ایمیل و فیلدهای سفارشی فعال را به‌صورت ویجت‌های معمولی و قابل‌ویرایش می‌سازد؛ عکس نیز از ابتدا به عملکرد تعویض تصویر متصل است.

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

ویجت قدیمی حذف نمی‌شود

ویجت «پروفایل کاربر» سر جایش می‌ماند و اپ‌های ساخته‌شده دست‌نخورده کار می‌کنند. اگر چیدمان آماده برایتان کافی است، همان را استفاده کنید. این راهنما برای وقتی است که به کنترل کامل نیاز دارید.

این طراحی از چه چیزهایی ساخته می‌شود

طراحی آزاد پروفایل روی دو ستون می‌ایستد:

• متغیرهای sys.user.* برای خواندن و نمایش اطلاعات کاربر.
• عملکردهای گروه «حساب کاربری» برای نوشتن و ذخیره تغییرات.

متغیرهای خواندنی

متغیر	کاربرد
sys.user.fullName	نام و نام خانوادگی، آماده نمایش در یک ویجت متن
sys.user.name / sys.user.lastname	هر کدام جداگانه
sys.user.mobile / sys.user.email	موبایل و ایمیل
sys.user.picUrl	نشانی عکس پروفایل، برای «دریافت پویا»ی ویجت عکس
sys.user.picFileId	شناسه فایل عکس؛ برای شرط «عکس دارد یا ندارد»
sys.user.fields.<شناسه>	مقدار یک فیلد سفارشی مشخص
sys.user.fieldList	فهرست همه فیلدهای سفارشی، برای تکرار با لیست پویا
sys.user.tagNames	برچسب‌های کاربر، آماده نمایش

فهرست کامل در متغیرهای سیستمی آمده است.

عملکردهای نوشتنی

عملکرد	کار
ذخیره نام و نام خانوادگی	نوشتن نام
ذخیره شماره موبایل	تغییر موبایل، همراه با جریان کد تأیید
ذخیره ایمیل	تغییر ایمیل، همراه با جریان کد تأیید
تغییر رمز عبور	تغییر رمز
ذخیره فیلد سفارشی پروفایل	نوشتن فیلدهای سفارشی، تکی یا دسته‌ای
تعویض عکس پروفایل	انتخاب، برش و آپلود عکس یا حذف آن
تازه‌سازی اطلاعات کاربر	خواندن دوباره اطلاعات از سرور

این عملکردها در منوی عملکردها، زیر گروه حساب کاربری قرار دارند.

قاعده طلایی

پارامترهای مقداری این عملکردها نام متغیر می‌گیرند، نه مقدار ثابت. فیلد فرم را به یک متغیر وصل می‌کنید و دکمه «ذخیره» همان متغیر را می‌فرستد.

پیش‌نیازها

1. حساب کاربری در اپ فعال باشد و صفحه ورود/عضویت تعیین شده باشد.
2. با متغیرها و شرط‌ها آشنایی اولیه داشته باشید.
3. اگر می‌خواهید فیلدهای سفارشی را هم نشان دهید، آن‌ها را از بخش «فیلدهای سفارشی» کاربران اپ تعریف کرده باشید.

شروع سریع: دکمه «تبدیل به ویجت‌های قابل ویرایش»

اگر همین حالا ویجت پروفایل قدیمی را در صفحه‌ای دارید، لازم نیست از صفر شروع کنید:

1. روی ویجت پروفایل کاربر در درخت صفحه راست‌کلیک کنید (یا منوی «بیشتر» را باز کنید).
2. گزینه تبدیل به ویجت‌های قابل ویرایش را بزنید.

اپ‌ادیتور یک گروه معادل کنار ویجت می‌سازد که شامل این‌هاست:

• آواتار، بایندشده به sys.user.picUrl و با عملکرد «تعویض عکس پروفایل» روی لمس
• ردیف نام کامل، موبایل و ایمیل
• یک ردیف به‌ازای هر فیلد سفارشی تعریف‌شده در اپ

فونت، اندازه‌ها و رنگ‌هایی که روی خود ویجت تنظیم کرده بودید به ردیف‌های تولیدشده منتقل می‌شوند تا ظاهر شبیه قبل بماند.

نکته

ویجت اصلی حذف نمی‌شود. بعد از اینکه از طرح تازه مطمئن شدید، خودتان ویجت قدیمی را پاک کنید.

خروجی این دکمه یک نقطه شروع فقط‌خواندنی است؛ فرم‌های ویرایش را باید خودتان اضافه کنید. ادامه این راهنما همان کار را گام‌به‌گام توضیح می‌دهد.

گام ۱: نمایش عکس پروفایل

1. یک ویجت عکس اضافه کنید.
2. گزینه دریافت پویا را روشن کنید.
3. در «مقدار یا مسیر فایل» بنویسید:

{{sys.user.picUrl}}

4. اندازه دلخواه (مثلاً ۹۶×۹۶) و برش cover را تنظیم کنید و گوشه‌ها را گرد کنید تا آواتار دایره‌ای شود.
5. روی رویداد لمس همین ویجت، عملکرد تعویض عکس پروفایل را با حالت پرسش از کاربر بگذارید.

آواتار پیش‌فرض برای کاربر بدون عکس

sys.user.picUrl برای کاربری که عکس ندارد خالی است. دو ویجت روی هم بگذارید و با شرط سوئیچشان کنید:

ویجت	شرط نمایش
عکس بایندشده به sys.user.picUrl	sys.user.picFileId خالی نباشد
آیکون یا عکس پیش‌فرض	sys.user.picFileId خالی باشد

گام ۲: نمایش اطلاعات اصلی

برای هر ردیف، یک گروه افقی با دو ویجت متن بسازید:

گروه ردیف (افقی، فاصله بین اجزا)
├── متن عنوان: «نام و نام خانوادگی»
└── متن مقدار: {{sys.user.fullName}}

مقدار را می‌توانید با ویجت متن و الگوی {{...}} بنویسید، یا از ویجت نمایشگر متغیر استفاده کنید.

همین ساختار را برای موبایل ({{sys.user.mobile}}) و ایمیل ({{sys.user.email}}) تکرار کنید.

نکته

sys.user.fullName نام و نام خانوادگی را با یک فاصله به هم می‌چسباند و بخش خالی را حذف می‌کند. اگر خودتان {{sys.user.name}} {{sys.user.lastname}} بنویسید، کاربرِ بدون نام خانوادگی یک فاصله اضافه در انتهای نامش می‌بیند.

گام ۳: ساخت شیت ویرایش نام

ویرایش دلخواه یعنی یک صفحه طراحی‌شده که به شکل شیت باز می‌شود.

۳-۱. صفحه شیت را بسازید

1. صفحه جدیدی با نام «ویرایش نام» بسازید. این صفحه را در منوی اپ قرار ندهید.
2. دو فیلد متنی فرم اضافه کنید: «نام» و «نام خانوادگی».
3. برای هر فیلد، در بخش اتصال به متغیر یک متغیر انتخاب کنید؛ مثلاً editName و editLastname.
4. جهت اتصال را روی همگام‌سازی دوطرفه بگذارید تا مقدار فعلی کاربر هنگام باز شدن شیت داخل فیلد دیده شود و تایپ کاربر هم در متغیر بنشیند.

۳-۲. مقدار اولیه را پر کنید

روی رویداد ورود به صفحه شیت، یک عملکرد چندگانه بگذارید که با مقداردهی متغیر این کار را بکند:

متغیر	مقدار
editName	{{sys.user.name}}
editLastname	{{sys.user.lastname}}

۳-۳. دکمه ذخیره

یک دکمه اضافه کنید و روی آن یک عملکرد چندگانه با این ترتیب بگذارید:

1. ذخیره نام و نام خانوادگی — «متغیر نام» را editName و «متغیر نام خانوادگی» را editLastname بگذارید.
2. بستن صفحه — با شرط sys.user.saveSuccess == true.

۳-۴. نمایش خطا

یک ویجت متن با محتوای {{sys.user.saveError}} و رنگ خطا اضافه کنید و شرط نمایش آن را sys.user.saveSuccess == false بگذارید.

این مرحله را رد نکنید

اعتبارسنجی‌ها (اجباری بودن، یکتا بودن موبایل و ایمیل، قالب کد ملی و شبا و کارت) عمداً فقط روی سرور انجام می‌شوند تا دو مجموعه قاعده از هم دور نیفتند. اگر sys.user.saveError را نمایش ندهید، کاربر هیچ‌وقت نمی‌فهمد چرا ذخیره انجام نشد.

۳-۵. باز کردن شیت

در صفحه پروفایل، کنار ردیف نام یک دکمه ویرایش بگذارید و روی آن عملکرد باز کردن صفحه را با حالت نمایش شیت و مقصد «ویرایش نام» تنظیم کنید.

گام ۴: موبایل، ایمیل و رمز عبور

همان الگوی گام ۳ را تکرار کنید و فقط عملکرد ذخیره را عوض کنید:

شیت	عملکرد	نکته
ویرایش موبایل	ذخیره شماره موبایل	پنجره کد تأیید در صورت نیاز خودکار باز می‌شود
ویرایش ایمیل	ذخیره ایمیل	پنجره کد تأیید در صورت نیاز خودکار باز می‌شود
تغییر رمز	تغییر رمز عبور	برابری «رمز جدید» و «تکرار» را خودتان بسنجید

توجه

برای موبایل و ایمیل، تا وقتی کد تأیید وارد نشده باشد مقدار روی حساب کاربر عوض نمی‌شود. حتماً پیام موفقیت را مشروط به sys.user.saveSuccess == true کنید.

گام ۵: فیلدهای سفارشی

دو راه دارید.

راه ساده: یک ردیف برای هر فیلد

اگر تعداد فیلدها کم و ثابت است، برای هرکدام یک ردیف دستی بسازید:

{{sys.user.fields.nationalId}}

nationalId را با شناسه لاتین فیلد خودتان عوض کنید. انتخابگر متغیر، شناسه فیلدهای تعریف‌شده اپ را به شما پیشنهاد می‌دهد؛ لازم نیست از حفظ تایپ کنید.

برای ذخیره، عملکرد ذخیره فیلد سفارشی پروفایل را در حالت تک‌فیلدی با همان شناسه به کار ببرید.

راه پویا: لیست پویا روی sys.user.fieldList

اگر می‌خواهید افزودن یک فیلد تازه در پنل به‌صورت خودکار در اپ دیده شود:

1. صفحه‌ای به نام «ردیف فیلد پروفایل» بسازید. این صفحه قالب یک ردیف است.
2. در صفحه پروفایل یک لیست پویا اضافه کنید.
3. منبع داده را روی متغیر بگذارید و نام متغیر را sys.user.fieldList وارد کنید.
4. صفحه قالب را روی «ردیف فیلد پروفایل» تنظیم کنید.

داخل صفحه قالب، اطلاعات فیلد جاری از sys.inPage.data خوانده می‌شود:

مسیر	مقدار
sys.inPage.data.key	شناسه لاتین فیلد
sys.inPage.data.name	عنوان فارسی فیلد
sys.inPage.data.value	مقدار فعلی کاربر
sys.inPage.data.type	نوع فیلد: text، bool یا select
sys.inPage.data.options	گزینه‌های مجاز فیلد انتخابی
sys.inPage.data.required	آیا پر کردن آن اجباری است
sys.inPage.data.editable	آیا کاربر اجازه ویرایشش را دارد

دکمه ویرایش هر ردیف را با شرط sys.inPage.data.editable == true نمایش دهید تا فیلدهایی که فقط از پنل تغییر می‌کنند (مثل کد پرسنلی) دکمه ویرایش نگیرند.

دکمه «ذخیره همه»

اگر فرمی با چند فیلد ساخته‌اید و می‌خواهید همه را با یک دکمه بفرستید:

1. یک متغیر مثل fieldsPayload بسازید و با مقداردهی متغیر مقدارش را چنین بگذارید:

{"nationalId": "{{editNationalId}}", "newsletter": "{{editNewsletter}}"}

2. عملکرد ذخیره فیلد سفارشی پروفایل را با گزینه ذخیره دسته‌ای روشن و «متغیر مقدار» برابر fieldsPayload تنظیم کنید.

گام ۶: تازه نگه داشتن اطلاعات

عملکردهای ذخیره، متغیرها را خودشان به‌روز می‌کنند و نیازی به کار اضافه نیست.

اما اگر صاحب اپ از پنل چیزی را عوض کند (برچسب تازه، فیلد تازه، یا مقدار یک فیلد غیرقابل‌ویرایش)، اپ تا اجرای بعدی خبردار نمی‌شود. برای این حالت، عملکرد تازه‌سازی اطلاعات کاربر را روی رویداد ورود به صفحه صفحه پروفایل بگذارید.

گام ۷: کاربر واردنشده

همه عملکردهای این گروه (به‌جز تازه‌سازی) برای کاربر واردنشده اجرا نمی‌شوند. صفحه پروفایل را با شرط sys.user.isLoggedIn دو حالته کنید:

حالت	محتوا
sys.user.isLoggedIn == true	گروه پروفایل و دکمه خروج از حساب
sys.user.isLoggedIn == false	پیام «برای دیدن پروفایل وارد شوید» و دکمه ورود به صفحه ورود

ساختار نهایی

صفحه پروفایل من
├── تازه‌سازی اطلاعات کاربر (رویداد ورود به صفحه)
├── گروه «واردنشده»            → شرط: sys.user.isLoggedIn == false
│   └── پیام + دکمه ورود
└── گروه «پروفایل»             → شرط: sys.user.isLoggedIn == true
    ├── عکس پروفایل            → {{sys.user.picUrl}} + عملکرد تعویض عکس
    ├── متن نام کامل           → {{sys.user.fullName}}
    ├── ردیف موبایل + دکمه ویرایش → شیت «ویرایش موبایل»
    ├── ردیف ایمیل + دکمه ویرایش  → شیت «ویرایش ایمیل»
    ├── لیست پویا فیلدهای سفارشی → sys.user.fieldList + صفحه قالب
    ├── دکمه تغییر رمز          → شیت «تغییر رمز»
    └── دکمه خروج از حساب

چک‌لیست قبل از انتشار

• پیام sys.user.saveError در همه فرم‌ها نمایش داده می‌شود.
• پیام‌های موفقیت مشروط به sys.user.saveSuccess == true هستند.
• جریان کد تأیید موبایل و ایمیل روی دستگاه واقعی تست شده است.
• تعویض عکس پروفایل روی خروجی نصب‌شده تست شده است، نه فقط در شبیه‌ساز.
• حالت کاربر واردنشده و کاربر بدون عکس بررسی شده است.
• فیلدهای غیرقابل ویرایش دکمه ویرایش ندارند.
• صفحه در اندازه‌های مختلف نمایشگر بررسی شده است.

اشتباهات رایج

• مقدار به‌جای نام متغیر: پارامترهای این عملکردها نام متغیر می‌گیرند؛ نوشتن مقدار ثابت باعث می‌شود همیشه همان مقدار ذخیره شود.
• نمایش ندادن خطا: فرم آزاد بدون sys.user.saveError عملاً بی‌استفاده است؛ کاربر دلیل شکست را نمی‌بیند.
• اعلام موفقیت زودهنگام: بستن شیت یا نمایش «ذخیره شد» بدون بررسی sys.user.saveSuccess، مخصوصاً وقتی کد تأیید در جریان است.
• نوشتن عنوان فارسی فیلد به‌جای شناسه لاتین در عملکرد ذخیره فیلد سفارشی.
• حذف ویجت قدیمی پیش از تست طرح تازه.