چگونه از React به طور موثر با Strapi استفاده کنیم؟

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

سیستم های مدیریت محتوای سنتی دارای یک فرانت اند و یک باطن هستند که توسط یک پایگاه کد برنامه کاربردی متصل می شوند. از سوی دیگر، یک CMS بدون هد مانند Strapi هیچ ارتباطی بین محتوای باطن و فرانت اند ندارد.

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

استراپی چیست؟

مانند بسیاری از CMS های دیگر، Strapi یک سیستم مدیریت محتوای متن باز است که بدون هد است. Headless در اینجا به معنای بدون پایان است.

توسعه دهندگان می توانند از انواع مختلف رابط کاربری و ابزار برای ارائه محتوا از طریق کانال های مختلف به روش های مختلف استفاده کنند. Strapi APIهایی مانند GraphQL و RESTful را برای ایجاد و مدیریت محتوا در اختیار توسعه دهندگان قرار می دهد.

اهمیت React!

از آنجایی که Strapi یک CMS بدون هد است، می‌تواند چارچوب‌های مختلفی وجود داشته باشد که شما به‌عنوان یک توسعه‌دهنده می‌توانید از آنها برای ارائه محتوای ممتاز به مخاطبان خود استفاده کنید.

React یکی از بهترین کتابخانه های جاوا اسکریپت است که می تواند تماس های API را به باطن انجام دهد. این یک کتابخانه جلویی است که توسط فیس بوک توسعه یافته است.

چگونه از React with Strapi استفاده کنیم؟

ازدواج React و Strapi می تواند بهترین چیز برای بهبود تجربه کاربر باشد. بنابراین، اگر قصد دارید آنها را اعمال کنید، این بخش برای شما مفید خواهد بود. بیایید با راه اندازی یک CMS بدون هد شروع کنیم، Strapi!

راه اندازی Strapi!

برای مدیریت تماس‌های API و ذخیره داده‌ها در باطن، به یک رابط نیاز دارید. Strapi عالی به شما ارائه می دهد.

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

هنگامی که برنامه توسط شما ساخته می شود، می توانید از حالت توسعه برنامه برای جمع آوری داده ها در backend استفاده کنید. وقتی حالت توسعه فعال است، سروری را در اختیار شما قرار می‌دهد که در آن می‌توانید مجموعه‌های داده‌ها را مدیریت کنید و نقاط پایانی API را برای دسترسی به آن مجموعه‌ها ایجاد کنید.

برای استفاده از حالت توسعه، از دستورات زیر استفاده کنید!

• توسعه اجرای npm
• توسعه نخ

توجه داشته باشید: شما باید این دستورات را در پوشه secret-project اجرا کنید.

سپس به نوار آدرس بروید و تایپ کنید http://localhost:1337/admin. صفحه مدیریت باز می شود که در آن باید تمام جزئیات مورد نیاز را پر کنید.

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

بیایید شروع به ایجاد یک مجموعه کنیم! مجموعه مجموعه ای از داده هاست که دارای ساختار اسکلتی یکسانی هستند. علاوه بر این، هر یک از این مجموعه ها در Strapi از طریق یک نقطه پایانی API قابل دسترسی هستند.

آنجا هستند مراحل ایجاد یک مجموعه!

1. به دنبال گزینه Content-type Builder در قسمت Plugins بگردید.

2. در منوی باز شده گزینه «Create a new collection type» را انتخاب کنید که مجموعه جدیدی برای شما ایجاد می شود.

3. در صفحه بعد، نام مجموعه را در قسمت Display Name وارد کنید. این نام توسط استراپی برای اشاره به این مجموعه استفاده خواهد شد. ما از “خانه ها” استفاده کرده ایم.

4. روی دکمه Continue ضربه بزنید تا ایجاد مجموعه به پایان برسد.

5. حال باید کادر متن را در تنظیمات اولیه انتخاب کنید. در اینجا باید نام فیلد را وارد کنید.

6. سپس بر روی گزینه Long Text کلیک کرده و Finish را بزنید.

7. همچنین می توانید در صورت نیاز تغییراتی در تنظیمات پیشرفته ایجاد کنید.

8. وقتی همه این کارها انجام شد، روی گزینه Save کلیک کنید. مجموعه شما ثبت شده است.

مجموعه «خانه‌ها» را با نامی که تعیین کرده‌اید در برنامه فهرست‌شده می‌بینید.

توجه داشته باشید: پس از تکمیل ثبت نام، Strapi به طور خودکار راه اندازی مجدد می شود.

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

مراحل ایجاد کامپوننت!

1. روی Content-type Builder و سپس Create New Component کلیک کنید.

2. در پنجره پاپ آپ، تنظیمات اولیه کامپوننت را تغییر دهید. نام جزء را تایپ کنید، دسته را اضافه کنید و یک نماد را انتخاب کنید. اگر دسته وجود ندارد، با وارد کردن نام، یکی ایجاد کنید. ما از ‘blank_banner’ به عنوان نام و همچنین دسته استفاده کردیم.

3. روی Continue کلیک کنید.

در مرحله بعد، فیلدهای مورد نیاز را اضافه کنید و در مورد یک فیلد متنی، آنها را مانند بالا پیکربندی کنید. روی ذخیره کلیک کنید و کامپوننت شما ایجاد خواهد شد.

اکنون که نحوه ایجاد یک مجموعه و یک جزء را یاد گرفتید، بیایید رکوردهای آزمایشی را به مجموعه ها اضافه کنیم. این رکوردها برای تأیید اینکه مجموعه داده ها را همانطور که در نظر گرفته شده پردازش می کند اضافه می شوند. در اینجا نحوه شما می توانید ایجاد سوابق آزمون.

1. Content Manager را از منوی سمت چپ باز کنید.
2. روی دکمه “ایجاد رکورد جدید” کلیک کنید.
3. در قسمت Item هر چه می خواهید بنویسید.
4. مورد را ذخیره کرده و در ادامه منتشر کنید تا در مجموعه ثبت شود.

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

راه اندازی Strapi نیز شامل افزودن اجزا به مجموعه ها. در اینجا مراحل است!

1. نوع مجموعه ایجاد شده در زیر گزینه Collection Type را انتخاب کنید.
2. «افزودن فیلد دیگری» و سپس Components را انتخاب کنید.
3. در اینجا می توانید یک کامپوننت ایجاد کنید یا از یک جزء موجود استفاده کنید.
4. بر روی use exist کلیک کنید و جزء مورد نظر خود را انتخاب کنید.
5. اکنون می توانید یک بار از کامپوننت استفاده کنید یا روی آن تکرار کنید (فرم آرایه).
6. نوع را انتخاب کرده و روی Done کلیک کنید.

ایجاد نقاط پایانی API!

تاکنون اجزاء، انواع محتوا و مجموعه‌ها را ایجاد کرده‌ایم. اکنون باید ببینیم که آیا می توانیم از طریق نقاط پایانی API به آنها دسترسی داشته باشیم. بیایید نحوه ایجاد نقاط پایانی API در Strapi را بیاموزیم!

1. منوی تنظیمات را باز کنید.
2. در زیر افزونه Users and Permissions به دنبال گزینه Roles بگردید.
3. نقش های عمومی یا تأیید شده را انتخاب کنید.
4. در قسمت Permissions به دنبال مجموعه ای که ایجاد کرده اید بگردید و روی آن کلیک کنید.
5. کادر کنار Find and Findone را علامت بزنید. همچنین می توانید مجوزهای ایجاد، حذف یا به روز رسانی را بر اساس مجموعه خود بررسی کنید.
6. این فرآیند را برای همه مجموعه هایی که ایجاد کرده اید تکرار کنید و Save را بزنید.

هنگامی که تغییرات را مانند مراحل بالا انجام دهید، نقاط پایانی زیر ایجاد خواهند شد!

1. (/api/نام مجموعه GET) را پیدا کنید: این نقطه پایانی برای دریافت مواردی که در مجموعه ایجاد شده ذخیره می شوند استفاده می شود.
2. یکی را بیابید (/api/نام مجموعه/ GET): با یافتن یک نقطه پایانی، آیتم موجود در مجموعه را دریافت می کنید. شما این کار را با جایگزین کردن آن با شناسه عنصری که می خواهید مشخص کنید انجام می دهید.

ادغام API با React!

Strapi همه چیز در مورد باطن است. برای دسترسی به اطلاعات در قسمت پشتی، به یک قسمت جلویی نیاز دارید. بهترین چیز در مورد Strapi این است که با هر نوع فریم ورک فرانت اند قابل استفاده است و ما از React Development استفاده می کنیم.

ادغام React با Strapi ساده است! در اینجا مراحل است!

1. پوشه پروژه React را در ترمینال باز کنید.
2. برای پروژه، دستور build را اجرا کنید.
3. پس از اجرای دستور، یک پوشه “build” تولید می شود. محتویات این پوشه را کپی کنید.
4. سپس در پوشه عمومی Strapi، محتویات پوشه build را Paste کنید.

شما می توانید دستور build را به دو صورت اجرا کنید!

• ساخت و ساز جریان نخ
• npm یک بیلد را اجرا می کند

اجرای برنامه!

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

GET – http://localhost:1337/api/restaurants پاسخ زیر را برمی گرداند!

نتیجه

اگرچه Strapi را می توان با ابزارهای مختلف جلویی دیگر استفاده کرد، React یکی از بهترین ها در بین همه آنها است. شما می توانید هر یک از فریم ورک های فرانت اند را مستقر کنید، اما مراحل استقرار متفاوت خواهد بود.

با مطالعه مطالب بالا، تصور روشنی در مورد Strapi CMS و نحوه ایجاد آبجکت های مختلف در آن خواهید داشت. مطمئن شوید که تمام مراحل را به دقت دنبال کرده اید. اگر به کمک حرفه ای نیاز دارید، با شرکت توسعه وب Dev IT تماس بگیرید.

پست چگونه به طور موثر از React With Strapi استفاده کنیم؟ اولین بار در DEV IT Journal ظاهر شد.