گرویتی فرم و نحوه ایجاد فرم های داینامیک در طراحی اپلیکیشن موبایل یا SPA بر بستر وردپرس

گرویتی فرم (Gravity Forms) ، یک افزونه ی ایجاد فرم های داینامیک در بستر وردپرس می باشد ، به شکلی که مدیران سایت وردپرس می توانند به راحتی یک فرم با فیلد های ورودی متنوع در آن ایجاد کنند و با ایجاد یک شورت کد وردپرس (WordPress Shortcode) ، در وب سایت نمایش دهند.

بسیاری از مشتریان وردپرس واقعی ، که درخواست برنامه نویسی و طراحی اپلیکیشن موبایل برای سیستم وردپرس خود را دارند ، همواره این دغدغه برایشان مطرح هست که آیا در اپلیکیشن ها هم میتوان دقیقا مشابه مدیریت وردپرس با تغییر فیلد های گرویتی فرم به صورت کاملا هوشمند اطلاعات از اپلیکیشن موبایل وردپرس فراخوانی شود یا خیر؟ چون زمانی که می خواهید در یک پلتفرم دیگر از اطلاعات وب سرویس یا REST API وردپرس استفاده کنید دیگر شورت کد ها وردپرس برای ما کاربردی ندارد.

در این مقاله سعی دارم شما را با نحوه ی داینامیک کردن فرم های افزونه ی گرویتی فرم ، و استفاده از آن در برنامه نویسی فرانت اند (FrontEnd) آشنا کنم.

ساختار گرویتی فرم چگونه عمل می کند؟

بطور کلی سه بخش اساسی در هسته ی افزونه گرویتی فرم وجود دارد:

1. فرم ها (Form): به تمامی محیط های ورود اطلاعات کاربران وب سایت یا اپلیکیشن شما یک فرم اطلاق می شود ، مثلا فرض کنید می خواهید در جایی از اپلیکیشن وردپرس نام و نام خانوادگی و شماره همراه مشتری را دریافت کنید.
2. ورودی (Entry) : زمانی که یک فرم ایجاد کرده اید ، حال کاربران سایت شما آن فرم را پر می کنند و در سایت شما ذخیره می شود ، ما به این رکورد ورودی ها در گرویتی فرم entry می گوییم.مثلا اگر یک فرم توسط 100 مشتری پر شد ، پس در حال حاضر برای این فرم ما تعداد صدتا entry داریم.
3. نوع فیلد ها (Fields): هر فرم می تواند ساختار یا فیلد های متنوعی داشته باشد ، مثلا برای یک فرم ثبت نام شما میخواهید سه فیلد ورودی از کاربر دریافت کنید (نام و نام خانوادگی ، شماره تماس ، ایمیل)

گرویتی فرم چگونه اطلاعات را ذخیره می کند؟

اگر با آکادمی وردپرس واقعی همراه بوده باشید ، می دانید که برای ذخیره هر نوع داده یا محتوا در وردپرس همواره دو راه کار وجود دارد:

1. پست تایپ وردپرس (Post Type)
2. جداول اختصاصی پایگاه داده (Custom WordPress Database Table)

افزونه ی گرویتی فرم بر اساس اینکه داده های غیر متمرکز را جمع آوری میکند ، مدل دوم را انتخاب نموده است. پس اگر شما افزونه ی گرویتی فرم را نصب کنید جداول زیر در پایگاه داده وردپرس در بخش (PHPMyAdmin) نمایان می شود:

جداول بانک اطلاعاتی افزونه گرویتی فرم ب توجه به تعاریف ساختاری که انجام داده ایم به دو سدته تقسیم می شود لیست فرم ها (Forms) و ورودی های کاربران (Entry).

دریافت اطلاعات فرم های گرویتی فرم در REST API وردپرس

برای ایجاد فرم های داینامیک در اپلیکیشن موبایل وردپرس می بایست دو مرحله یا Route در وب سرویس وردپرس ایجاد شود:

1. ابتدا میبایست اطلاعات فرم های شامل لیست فیلد ها ، عنوان فرم ، مشخصات دکمه ی ارسال و … را در REST API دریافت کنیم تا بوسیله برنامه نویسی فرانت فرم ها را ایجاد کنیم.
2. در مرحله ی بعد باید یک Route یا مسیری وجود داشته باشد که این اطلاعات سمت وردپرس ما ارسال شود برای ذخیره در پایگاه داده.

خوشبخانه بوسیله مستندات قدرتمند افزونه ی گرویتی فرم ما نگران راه حل های پیچیده در این زمینه نیستیم.

ایجاد افزونه ی وردپرس با خط فرمان وردپرس

ابتدا یک افزونه ی جدید در وردپرس ایجاد می کنیم و نام آن را gravity-api قرار می دهیم تا بوسیله ی آن بتوانیم یک وب سرویس برای افزونه گرویتی فرم ایجاد کنیم.من وارد خط فرمان وردپرس می شوم و دستور زیر را تایپ می کنم:

$ wp scaffold plugin gravity-api --activate

اگر با تکنولوژی خط فرمان وردپرس آشنا نیستید ، پیشنهاد می کنم حتما در  “دوره جامع مدیریت حرفه ای استارتاپ های وردپرس با خط فرمان و ابزار پکیج منیجر” شرکت کنید ، در این دوره شما در کنار من به یک مدیر سایت وردپرس و توسعه دهنده حرفه ای تبدیل خواهید شد.

ایجاد یک مسیر یا Route جدید در REST API وردپرس

ما نیاز به ایجاد دو مسیر جدید در وب سرویس وردپرس داریم ، ابتدا یک مسیر برای دریافت اطلاعات فرم و دیگری برای ارسال اطلاعات فرم ها به پایگاه داده. اگر با مستندات وردپرس آشنایی داشته باشید میدانید که برای ایجاد یک Custom EndPoint جدید در وب سرویس وردپرس از هوک rest_api_init استفاده می کنیم:

add_action('rest_api_init', 'create_rest_api');
function create_rest_api()
{
	register_rest_route('gravity', 'form', [
		'methods' => 'GET',
		'callback' => [$this, 'forms'],
		'args' => [
			'id' => [
				'required' => true
			]
		]
	]);

	register_rest_route('gravity', 'send', [
		'methods' => 'POST',
		'callback' => [$this, 'send'],
		'args' => [
			'form_id' => [
				'required' => true
			]
		]
	]);
}

زمانی که مدیر وب سایت در افزونه گرویتی فرم ، یک فرم جدید ایجاد می کند ، این فرم دارای یک شناسه ی یکتا در پایگاه داده وردپرس می باشد ، بطور مثال اگر یک فرم به نام تماس با ما ایجاد کنید در بالای صفحه مدیریت گرویتی فرم ID آن نمایش داده خواهد شد.

با فرض اینکه آدرس وب سایت شما site.com باشد ، ما برای دریافت اطلاعات و جزئیات فرم شماره یک در افزونه ی گرویتی فرم میبایست آدرس زیر را در مرورگر یا برنامه نویسی اپلیکیشن سمت وردپرس ارسال کنیم:

http://site.com/wp-json/gravity/form?id=1

در لیست داده ها که به فرمت json ارائه می شود یک کلید وجود دارد به نام fields که مشخصات کامل فیلد های گرویتی در آن واقع شده است. ما بوسیله این مشخصات مثلا نوع فیل یا Type می توانید در بستر اپلیکیشن خود این فرم را ایجاد کنیم.

ارسال ورودی کاربران به گرویتی فرم در اپلیکیشن موبایل

برای ارسال یک Entry یا ورودی جدید به کاربران ما میبایست از شناسه های یکتای هر فیلد که در رم های گرویتی وجود دارد استفاده کنیم. اگر در محیط ویرایش یک فرم باشید باکلیک روی هر فیلد می بینید که آن فیلد نیز یک شناسه ی یکتا در وردپرس دارد:

این شناسه می تواند نقطه ی مشترک ما برای ارسال داده های کاربران سمت گرویتی فرم در REST API باشد.در مستندات گرویتی فرم یک تابع وجود دارد به نام add_entry که توسط آن میتوانید بر اساس شناسه فیلد های یکتا داده ها را براحتی ارسال کنید پس من در افزونه وردپرس تنها کافیست که ورودی کاربر را دریافت کنم و به تابع add_entry ارسال کنم:

public function send(WP_REST_Request $request)
{
	$entry_id = GFAPI::add_entry($request->get_params());
	return new WP_REST_Response([
		'success' => true,
		'entry_id' => $entry_id
	], 200);
}

امنیت داده های گرویتی فرم در اپلیکیشن موبایل

فرم ها یا ورودی ها از جمله حساس ترین اطلاعات کاربران در هر پلتفرم وردپرس می باشد. پس حتما میبایست سعی شود تمامی ورودی ها از همه لحاظ اعتبار سنجی یا Validation شود. به عنوان مثال اگر در حال برنامه نویسی یک فرم برای پنل کاربری وردپرس هستید، حتما قبل از آن اعتبار سنجی انجام دهید که کاربر لاگین هست یا خیر؟ این روش را میتوانید از طریق سرویس Auth مثل JWT و .. براحتی پیاده سازی کنید.

نکته ی بعدی میزان حجم داده های Response بین اپلیکشن و وب سایت وردپرسی شما می باشد. یکی از مواردی که باعث کاهش سرعت وب سایت های وردپرسی می شود دریافت و ارسال داده هایی که به هیچ عنوان برای ما قابل استفاده نیستند.

مثلا برای دریافت نام و نام خانوادگی یک کاربر ، نیازی نیست که تمامی داده ها از دیتابیس صدا زده شوند برای دستیابی به یک نوع داده ی خاص. این مورد مخصوصا در وردپرس زیاد بین دانشجوهای من به چشم می خورد علت عمده ی آن امر هم این است که تقریبا اکثر توابع پایه هسته ی وردپرس بر روی کلیات هست و ن جزئیات.و این فقط به میزان توانایی ، سواد و تسلط شما به مستندات وردپرس بر میگردد و هی راه میانبری برای آن نیست.

کدام فریم ورک برای اپلیکیشن موبایل وردپرس بهتر است؟

پاسخ قاطع به این سوال این است که “هیچ کدام برتری نسبت به بکدیگر ندارد”
ما ابتدا بستر REST API را به سبک WordPress Headless مهیا می کنیم.سپس شما میتوانید در بخش فرانت اند ، از هر نوع زبان برنامه نویسی که در آن تسلط دارید استفاده کنید. من نمونه مثال ایجاد اپلیکیشن همین مقاله را بر اساس زبان جاوا اسکریپت و فریم ورک vueJs برایتان آماده کرده ام که میتوانید دریافت کنید.

جهت سفارش برنامه نویسی اپلیکیشن موبایل یا نرم افزار دسکتاپ بر بستر وردپرس میتوانید از طریق فرم سفارش پروژه وردپرس با تیم وردپرس واقعی در ارتباط باشید.