چگونه یک پسوند Raycast سفارشی برای دسترسی به مقالات Dev.to بسازیم

در این آموزش، ما یک افزونه Raycast سفارشی می سازیم که آخرین مقالات را از Dev.to دریافت می کند و در یک لیست نمایش می دهد و مقاله انتخاب شده را در مرورگر باز می کند.

برای کسب اطلاعات بیشتر در مورد سیستم مورد نیاز برای شروع ساخت برنامه های افزودنی، از Raycast Doc دیدن کنید.

یک پسوند جدید ایجاد کنید

• باز کن پسوند ایجاد کنید دستور در Raycast
• قالب را انتخاب کنید لیست ایستا
• پسوند خود را نام ببرید مقالات Devto
• دستور را نام ببرید آخرین مقالات
• کلیک پسوند ایجاد کنید از گوشه سمت راست پایین

با این کار یک دایرکتوری جدید به نام ایجاد می شود devto-articles در فهرست برنامه های افزودنی شما

وابستگی ها را نصب کنید

حالا بیایید وارد کد شویم.

دایرکتوری افزونه را باز کنید devto-articles در ویرایشگر کد مورد علاقه شما

با اجرای دستور زیر وابستگی ها را نصب کنید:

npm install

قبل از ادامه، اجازه دهید آن را نصب کنیم @raycast/api بسته بندی این شامل مجموعه ای از مؤلفه ها است که ساخت برنامه های افزودنی را آسان تر می کند.

npm install @raycast/utils

پسوند را بسازید

اکنون ما آماده شروع ساختن افزونه هستیم.

باز کن src/index.tsx فایل، اینجا جایی است که ما کدی را می نویسیم که آخرین مقالات را از Dev.to دریافت می کند و آنها را در یک لیست نمایش می دهد.

کد موجود را از قسمت حذف کنید src/index.tsx تا بتوانیم از صفر شروع کنیم.

حالا بیایید وارد کنیم useFetch قلاب از @raycast/utils. useFetch می تواند برای واکشی داده ها از یک API استفاده شود.

import { ActionPanel, Action, List } from "@raycast/api";
import { useFetch } from "@raycast/utils";

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

type Article = {
  id: number;
  title: string;
  readable_publish_date: string;
  comments_count: number;
  url: string;
};

حالا بیایید از useFetch برای دریافت آخرین مقالات از Dev.to قلاب کنید.

export default function Command() {
  const { isLoading, data: articles } = useFetch<Article[]>(
    "https://dev.to/api/articles"
  );
}

useFetch یک شی با دو ویژگی برمی گرداند: isLoading و data.

• isLoading یک بولی است که نشان می دهد داده ها در حال واکشی هستند یا خیر.
• data پاسخی است که از API واکشی می شود.

حالا بیایید از List جزء برای نمایش مقالات در یک لیست.

return (
  <List isLoading={isLoading}>
    {(articles || []).map((article) => (
      <List.Item
        key={article.id}
        icon="list-icon.png"
        title={article.title}
        subtitle={`${article.comments_count} comments`}
        accessories={[{ text: article.readable_publish_date }]}
        actions={
          <ActionPanel>
            <Action.OpenInBrowser url={article.url} />
          </ActionPanel>
        }
      />
    ))}
  </List>
);

را List جزء می گیرد isLoading prop که نشان می دهد داده ها در حال واکشی هستند یا خیر.

همچنین طول می کشد children پایه که آرایه ای از List.Item اجزاء.

را ActionPanel کامپوننتی است که شامل مجموعه ای از اقدامات است که می توان روی آیتم انتخاب شده انجام داد.

در مورد ما، می خواهیم مقاله انتخاب شده را در مرورگر باز کنیم. بنابراین، ما از آن استفاده خواهیم کرد Action.OpenInBrowser جزء برای باز کردن مقاله در مرورگر زمانی که کاربر آن را انتخاب می کند.

این کد نهایی است:

import { ActionPanel, Action, List } from "@raycast/api";
import { useFetch } from "@raycast/utils";

type Article = {
  id: number;
  title: string;
  readable_publish_date: string;
  comments_count: number;
  url: string;
};

export default function Command() {
  const { isLoading, data: articles } = useFetch<Article[]>(
    "https://dev.to/api/articles"
  );

  return (
    <List isLoading={isLoading}>
      {(articles || []).map((article) => (
        <List.Item
          key={article.id}
          icon="list-icon.png"
          title={article.title}
          subtitle={`${article.comments_count} comments`}
          accessories={[{ text: article.readable_publish_date }]}
          actions={
            <ActionPanel>
              <Action.OpenInBrowser url={article.url} />
            </ActionPanel>
          }
        />
      ))}
    </List>
  );
}

افزونه را اجرا کنید

با اجرای دستور زیر می توانید افزونه را اجرا کنید:

npm run dev

پسوند را در Raycast با جستجو پیدا کنید مقالات Devto و دستور را اجرا کنید آخرین مقالات.