ویژگی وبلاگ در یک برنامه react با استفاده از Dev.to به عنوان یک CMS بدون سر

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

درباره معماری Headless CMS بیشتر بخوانید

چند وقت پیش تصمیم گرفتم یک اپلیکیشن نمونه کار بسازم تا برخی از کارها و مهارت های قبلی خود را نشان دهم. با فکر کردن به ویژگی های موجود در این مجموعه و با دانستن اینکه حرفه توسعه نرم افزار یک سفر بی پایان یادگیری جاده ای است، چرا چیزهایی را که یاد می گرفتم ثبت نکنم؟ چرا این را به اشتراک نمی گذارید؟

من باید یک وبلاگ بنویسم و ​​آن را با این نمونه کارها ترکیب کنم، فکر کردم …

اما ارزان‌تر و بهترین رویکرد برای این تلاش چه بود؟
من تصمیماتی در مورد فناوری داشتم.

چند نکته که برای من مهم بود مانند:

• کمترین تلاش ممکن: نمی‌خواستم میزبانی یا یک CMS بدون هد کامل را در جایی مانند WordPress.org مدیریت کنم. من کارهای زیادی برای انجام دادن دارم، نیازی به مهندسی بیش از حد این پروژه ندارم.
• پست ها را به صورت علامت گذاری بنویسید: اگر تصمیم گرفتم در آینده محتوا را جابجا کنم، نمی خواهم دوباره همه چیز را قالب بندی کنم.
• توزیع محتوا: ترافیک مهم است، من می‌خواهم محتوا در یک پلتفرم منتشر شود که ترافیک توسعه‌دهندگان دارد.
• محتوای موجود در نمونه کارها شخصی من را می خواهم.

پس از در نظر گرفتن بهترین و ارزان‌تر گزینه‌های موجود، DEV.to را پیدا کردم و تصمیم گرفتم از آن برای ذخیره مقالاتم استفاده کنم.

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

تصمیم گرفته شده، زمان رسیدن به کار است!

Dev.to به عنوان CMS بدون سر

در این ویژگی برای نمونه کارها، حساب توسعه دهنده من نقش CMS را ایفا می کند و محتوا در یک React App ارائه می شود. به عبارت دیگر، بک‌اند توسط Dev.To ارائه می‌شود، فرانت‌اند با استفاده از ReactJs ساخته می‌شود و در Vercel میزبانی می‌شود.

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

اولین قدم ایجاد کامپوننت Posts.js بود. در این کامپوننت، از قلاب های معروف React useEffect و useState استفاده می کنیم، بنابراین باید آنها را وارد کنیم:

import React, { useEffect, useState } from 'react';

در کامپوننت Posts.js، داده ها را از Dev دریافت می کنیم. من می توانم از دو روش مختلف برای ایجاد درخواست های شبکه استفاده کنم: یا Fetch یا Axios.

x Axios را واکشی کنید

من تصمیم گرفتم از Fetch استفاده کنم، همانطور که در زیر می بینید:

export default function Posts () {

/* initializing the state which will hold the articles information
and the loading state  */

  const [articles, setArticles] = useState ([]);

/* fetch the articles, change your username to retrieve 
your own articles */

  useEffect( () => {
    fetch('https://dev.to/api/articles?username=sarahcssiqueira')
    .then( (res) => res.json())
    .then((res) =>  {
      setArticles(res);
    });
  }, []);

سپس، من می خواهم به کنسول ورود کنم:

console.log(articles);

همانطور که همه چیز همانطور که انتظار می رود کار می کند:

  return (
  <section> 
      {articles.map((article) => {
        return (
          <article key={article.id}>
              <img src={article.social_image} 
                   alt={article.title}>
              </img>

              <Link to={article.url}>
                {article.title}
              </Link>
              <p>
                {article.description} 
                <Link to={article.url}> 
                   <BsBoxArrowUpRight/>
                </Link>
              </p>
              <ul>
                  <li>
                      <BsCalendarDate/> 
                      {article.readable_publish_date}
                  </li>             
              </ul>
              <ul>
                  <li>
                      <AiFillTag/>
                      {article.tags}{" "}
                  </li>             
              </ul>

              <p>
                 <BsChatHeartFill/>
                 {article.public_reactions_count} 
             </p>
          </article> 
          )
    })}      
  </section>
)};

آیکون هایی که استفاده کردم: > و >، برای کتابخانه react-icons ارائه شد.

/* Icons */
import { BsBoxArrowUpRight } from "react-icons/bs";
import { AiFillTag } from "react-icons/ai";