چگونه با React، Vue و Next.js مقالات Dev.to خود را برای نمونه کارها واکشی کنیم

ek3nk4r 2023-03-18

0 31 خواندن این مطلب 4 دقیقه زمان میبرد

چگونه با React، Vue و Next.js مقالات Dev.to خود را برای نمونه کارها واکشی کنیم

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

آیا شما یک نمونه کار می سازید و به دنبال نمایش مقالات Dev.to خود هستید؟ فرقی نمی‌کند از React، Vue یا Next.js استفاده می‌کنید، باید چند مرحله ساده را دنبال کنید. در این مقاله، من شما را از طریق این فرآیند راهنمایی می کنم.

قبل از غواصی، مطمئن شوید که با اکوسیستم React یا Vue.js آشنا هستید. اگر با این فناوری‌ها تازه کار هستید، می‌توانید با بررسی مستندات رسمی React و اسناد رسمی Vue شروع کنید.

اگر با Next.js تازه کار هستید، اما با React آشنا هستید، نگران نباشید. همان نحوی که برای React یاد گرفتید در Next.js کار خواهد کرد.

در اینجا سه مرحله برای واکشی مقالات Dev.to آمده است:

فهرست مطالب

مرحله 1: پروژه خود را ایجاد و راه اندازی کنید.

برای React یا Next.js: اجرا کن npx create-next-app در ترمینال خود و دستور را دنبال کنید.

توجه داشته باشید که React Docs اکنون بوت استرپ پروژه های React را با Next.js و برخی فریمورک های دیگر توصیه می کند، به همین دلیل من از آن استفاده نمی کنم. npx create-react-app.

برای Vue: اجرا کن vue create project-name و دستور را دنبال کنید.

توجه داشته باشید که قبل از اینکه این دستور کار کند باید Vue CLI را نصب کرده باشید. اگر قبلاً انجام نداده اید، بدوید npm install -g @vue/cliو پس از نصب، دستور بالا را برای ایجاد یک پروژه Vue اجرا کنید.

مرحله 2: Dev.to API و کلید API خود را دریافت کنید.

Dev.to API یک REST API ساده است: https://dev.to/api/articles?username=your-username. جایگزین کردن “نام کاربری شما” باشما نام کاربری Dev.to.

بدون کلید API، می توانید مقالات خود را واکشی کنید. با این حال، برخی از APIها نیاز به یک نشانه دسترسی دارند تا به هدر ارسال شود. به همین دلیل است که از کلید Dev.to API استفاده می کنیم (برای انجام همه موارد درست 😏).

برای دریافت کلید API خود، وارد حساب Dev.to خود شوید، به تنظیمات خود بروید، به پایین بروید و یک کلید برای پروژه خود ایجاد کنید.

چگونه کلید خود را دریافت کنید:

دریافت کلید DEV.to

توصیه می شود کلید مخفی خود را در یک ذخیره کنید env فایل. به ریشه پروژه خود بروید و a ایجاد کنید .env.local فایل.

یا می توانید بدوید touch .env.local در ترمینال خود برای ایجاد فایل. کد زیر را در فایل قرار دهید:

MY_DEV_KEY=24343434.

24343434 را با کلید API که تولید کردید جایگزین کنید و فایل را ذخیره کنید.

مرحله 3: مقالات Dev.to خود را نمایش دهید.

بیایید با React یا Nextjs شروع کنیم:

یک کامپوننت ایجاد کنید و آن را هر طور که دوست دارید صدا بزنید، مثلاً BlogPost.js و این کد را در آنجا قرار دهید.

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

const DevToArticles = () => {
  const [articles, setArticles] = useState([]);

 const Dev_Username = “ghostwriter”  // replace ghostwriter with your Dev.to username.
 const Secret_KEY = `proccess.env.MY_DEV_KEY`

  useEffect(() => {
    fetch(`https://dev.to/api/articles?username=${Dev_Username}`, {
      headers: {
        'api-key': Secret_KEY
      }
    })
      .then(res => res.json())
      .then(data => setArticles(data));
  }, []);

  return (
    <div>
      {articles.map(article => (
        <div key={article.id}>
          <h2>{article.title}</h2>
          <p>{article.description}</p>
 <p><a href={article.url}>Read more</a> </p>
        </div>
      ))}
    </div>
  );
};

export default DevToArticles;

برای Vue.js

<template>
  <div>
    <div v-for="article in articles" :key="article.id">
      <h2>{{ article.title }}</h2>
      <p>{{ article.description }}</p>
     <p><a :href=”article.url”>Read more</a> </p>
    </div>
  </div>
</template>

<script>
 const Dev_Username = “ghostwriter”  // replace ghostwriter with your Dev.to username.
 const Secret_KEY = `proccess.env.MY_DEV_KEY`

export default {
  data() {
    return {
      articles: []
    };
  },
  mounted() {
    fetch(`https://dev.to/api/articles?username=${Dev_Username}`, {
      headers: {
        'api-key': Secret_KEY
      }
    })
      .then(res => res.json())
      .then(data => {
        this.articles = data;
      });
  }
};
</script>

من فقط پست را برگرداندم title، description و url اما اگر می خواهید بیشتر استخراج کنید، این امکان وجود دارد.

برای داشتن ایده ای از آنچه به آن دسترسی دارید، می توانید داده های API را در کنسول خود وارد کنید. برای این در تنظیمات فعلی خود، فقط console.log(article)

مثلا:

می توانید به تصویر جلد مقاله، داده های کاربر (یک شی)، مهر زمانی و غیره دسترسی داشته باشید.

> توجه: شما می توانید به کامپوننت خود با CSS استایلی دهید که رضایت شما را جلب کند.

اطلاعات بیشتر درباره DEV.to API:

Dev.to API دسترسی به منابع مختلفی از جمله مقالات، نظرات، کاربران و برچسب ها را فراهم می کند. در اینجا مروری مختصر از انواع داده‌هایی است که می‌توانید از API به آنها دسترسی داشته باشید:

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

نظرات: می‌توانید نظرات مربوط به مقاله‌ها، از جمله نام نظردهنده، متن نظر، و مقاله‌ای که درباره آن نظر می‌دهد را واکشی کنید.

کاربران: می توانید اطلاعات مربوط به کاربران Dev.to از جمله نام کاربری، بایوس و تصاویر نمایه آنها را بازیابی کنید.

برچسب ها: می توانید به برچسب های مرتبط با مقالات دسترسی داشته باشید که می تواند برای سازماندهی و دسته بندی محتوا مفید باشد.

علاوه بر این منابع، Dev.to API همچنین نقاط پایانی را برای تعامل با پلتفرم Dev.to فراهم می کند، مانند ایجاد و به روز رسانی مقالات و نظرات.