گرویتی فرم و نحوه ایجاد فرم های داینامیک در طراحی اپلیکیشن موبایل یا 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 برایتان آماده کرده ام که میتوانید دریافت کنید.

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

     

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

    مطلب رو به اشتراک بگذارید
    ۹دیدگاه
    در بحث‌‌ پیرامون این مقاله شرکت کنید!
    ارسال دیدگاه
    • احسان فراهانی

      احسان فراهانی

      چهارشنبه ۱۹ آبان ۱۴۰۰ ۱۱:۳۳ ب٫ظ

      خیلی مقاله حرفه ای و خوبی بود ممنون از مهندس درزی

    • حسام روحانی

      حسام روحانی

      سه شنبه ۲۵ آبان ۱۴۰۰ ۱:۳۲ ب٫ظ

      خداییش نامبر وانی یعنی عشق می کنم میام ریل وردپرس موضوعات تاپ با بهترین کیفیت آموزش مگه میشه مگه داریم !!!

    • avatar

      سعید

      شنبه ۱۸ دی ۱۴۰۰ ۱۲:۴۵ ب٫ظ

      سلام وقت بخیر راهی وجود داره که بشه 2تا فرم Gravity Forms رو به هم متصل کرد؟ یعنی بتونن دیتای هم رو بخونن

      • مهرشاد درزی

        مهرشاد درزی

        شنبه ۱۸ دی ۱۴۰۰ ۲:۵۱ ب٫ظ

        بله توسط توابع Get Entry میتوانید اطلاعات یک فرم را دریافت و در فرم دیگر قرار دهید و یا هر عملیات دلخواهی را انجام دهید.

    • avatar

      مجتبی حسینی

      جمعه ۱۵ بهمن ۱۴۰۰ ۶:۱۲ ب٫ظ

      سلام وقت بخیر من میخوام یه برنامه با فلاتر بنویسم . سایتم وردپرسه. آیا این روش که گفتید کاربرد داره؟

      • مهرشاد درزی

        مهرشاد درزی

        جمعه ۱۵ بهمن ۱۴۰۰ ۷:۱۷ ب٫ظ

        شما در هر زبان برنامه نویسی یک کامپوننت یا دستوراتی مختص ارتباط با http یا API ها دارید. که می توانید دستورات وردپسر را فراخوانی کنید.
        وب سرویس یک امکان عمومی است.

    • avatar

      مجتبی سبزیانی

      شنبه ۱۶ بهمن ۱۴۰۰ ۹:۳۸ ب٫ظ

      سلام وقت بخیر
      من پروژه وردپرسمو توی برنامه phpstorm بالا آوردم . وقتی دستور wp scaffold برای ایجاد پلاگین خام میزنم ارور میده که کلمه wp رو نمیشناسه. میشه یه راهنمایی کنید
      ممنون از اموزش های خوبتون

      • مهرشاد درزی

        مهرشاد درزی

        یکشنبه ۱۷ بهمن ۱۴۰۰ ۱۰:۳۸ ق٫ظ

        شما میبایست خط فرمان وردپرس را در سیستم خود نصب کنید.
        پیشنهاد میکنم حتما در "دوره جامع مدیریت حرفه ای استارتاپ های وردپرس با خط فرمان و ابزار پکیج منیجر" شرکت کنید. تا به ابزار های روز وردپرس آشنا بشید.
        https://realwp.net/product/wp-cli

    • avatar

      سعید

      چهارشنبه ۱۳ تیر ۱۴۰۳ ۳:۱۶ ب٫ظ

      سلام ممنون عالی بود یه سوال داشتم ایا میشه کاری کرد که کاربر وقتی کدملی رو وارد میکنه بقیه اطلاعات خودش بیاد؟
      ب فرض اینکه کاربر قبلا در یه فرم دیگه اطلاعاتش رو ثبت کرده بوده.

    آکادمی وردپرس واقعی

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

    در دوره جامع WP-CLI یاد خواهید گرفت، به شکل کاملا حرفه ای و با سرعت بیش تر یک یا چند وب سایت وردپرسی خود را مدیریت کنید.عملیات تکراری در مدیریت وردپرس را برای کاهش هدر رفت زمان خود سیستم سازی کنید. وردپرس شما در حین کار با خط فرمان فشار کم تری به سرور ایجاد می کند و این رویکرد می تواند وب سایت شما را بدون نقص و با سرعت عالی ارائه دهد
    • محتوای آموزشی: ۴۶ جلسه آموزشی شامل ۱۶ ساعت ویدیو آموزشی به همراه تمرینات و فایل PDF خلاصه محتوا
    • پروژه عملی دوره: نصب و مدیریت کامل بخش های یک استارتاپ وردپرس در هاست
    • کلاس رفع اشکال: کلاس آنلاین ۳۰ دقیقه ای در پایان دوره به صورت کاملا خصوصی با استاد درزی برای تثبیت محتوا و رفع اشکالات دانشجو
    ۳,۶۹۷,۰۰۰ تومان
    پرفروش ترین افزونه ها

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

    اتصال و هماهنگی بخش محصولات ، و سفارشات پنل فروشندگان دیجی کالا با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول و مدیریت لیست سفارشات دیجی کالا در مدیریت وردپرس
    ۱,۸۰۰,۰۰۰ ۱,۴۰۰,۰۰۰ تومان

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

    اتصال دو طرفه بخش انبارداری یا محصولات و فاکتور های نرم افزار حسابداری کیان نور رایانه با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۱۸,۰۰۰,۰۰۰ ۱۳,۸۴۰,۰۰۰ تومان

    اتصال نرم افزار حسابداری سپیدار همکاران سیستم به افزونه ووکامرس به همراه پکیج وب سرویس دو طرفه

    اتصال دو طرفه بخش انبارداری یا محصولات و فاکتور های نرم افزار حسابداری سپیدار از شرکت همکاران سیستم با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۱۵,۷۳۰,۰۰۰ ۱۲,۴۳۰,۰۰۰ تومان

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

    اتصال دو طرفه بخش انبارداری یا محصولات ، مشتریان و فاکتور های نرم افزار حسابداری هلو با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۱۸,۰۰۰,۰۰۰ ۱۳,۸۴۰,۰۰۰ تومان

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

    افزایش هشتاد درصدی سرعت وب سایت های وردپرس با اتصال تصاویر ، ویدیو ، صوت و فایل های فروشگاه ووکامرس ، Easy Digital Downloads و گرویتی فرم به هاست دانلود با قابلیت تغییر لینک اتوماتیک رسانه ها در محتوا و محافظ از سرقت فایل فروشی
    ۲,۰۰۰,۰۰۰ ۱,۸۷۰,۰۰۰ تومان

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

    اتصال و یکپارچه سازی اطلاعات کامل محصولات (متغیر ، ساده ، خارجی و ..) ، مدیریت لیست سفارشات بین یک یا چند فروشگاه ووکامرسی با قابلیت وب هوک و ثبت تغییرات آنی و ایجاد عملیات گروهی ثبت یا ویرایش محصولات بین سایت ها در سریع ترین زمان
    ۴,۸۳۰,۰۰۰ ۲,۶۴۰,۰۰۰ تومان

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

    اتصال دو طرفه بخش انبارداری یا محصولات ، مشتریان و فاکتور های نرم افزار حسابداری راهکاران از شرکت همکاران سیستم با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۲۵,۰۰۰,۰۰۰ ۱۸,۶۳۰,۰۰۰ تومان

    اتصال نرم افزار حسابداری ترنج رهیافت (داده فا) به افزونه فروشگاه ساز ووکامرس

    اتصال دو طرفه بخش انبارداری یا محصولات و فاکتور های نرم افزار حسابداری ترنج رهیافت با افزونه فروشگاه ساز ووکامرس ، همراه با قابلیت بروزرسانی هماهنگ موجودی ها و قیمت های محصول ، ایجاد فاکتور های اتوماتیک به نام مشتریان وردپرس در نرم افزار حسابداری
    ۱۰,۰۰۰,۰۰۰ ۸,۵۹۷,۰۰۰ تومان