به‌روزرسانی فنی: Next.js، ارسال مجدد، و Cron Atlas Power آخرین اخبار هکرها

Summarize this content to 400 words in Persian Lang

ابزار جمع‌آوری جدید برای اخبار هکرها با استفاده از Next.js، Resend و Cron Atlas راه‌اندازی می‌شود.

در دنیای همیشه در حال توسعه فناوری، به روز ماندن از آخرین اخبار بسیار مهم است. ابزار جدیدی پدید آمده است که ترکیب می شود Next.js، ارسال مجدد، و کرون اطلس برای ارائه یک تجربه کارآمد برای جمع آوری داستان های Hacker News. این پست وبلاگ شما را از طریق اجزای این ابزار نوآورانه و نحوه کار آنها با یکدیگر راهنمایی می کند.

هکر نیوز چیست؟

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

معرفی کامپوننت ها

Next.js

Next.js یک چارچوب قدرتمند React است که رندر سمت سرور و تولید سایت استاتیک را امکان پذیر می کند. این برای ساخت برنامه های وب سریع و پویا عالی است. در این جمع‌آوری، از Next.js برای ایجاد رابط front-end استفاده می‌شود که یک تجربه کاربری یکپارچه را ارائه می‌کند.

ارسال مجدد

ارسال مجدد سرویسی است که برای رسیدگی به تحویل ایمیل طراحی شده است. اگرچه ممکن است نامربوط به نظر برسد، اما در این پروژه برای ارسال اعلان‌ها درباره داستان‌ها یا به‌روزرسانی‌های جدید استفاده می‌شود. با ادغام ارسال مجدد، کاربران می توانند بدون بررسی دائمی جمع کننده، مطلع شوند.

کرون اطلس

کرون اطلس یک سرویس زمان بندی است که به شما امکان می دهد وظایف را در بازه های زمانی مشخص اجرا کنید. در این جمع‌آوری، از Cron Atlas برای واکشی دوره‌ای آخرین داستان‌های اخبار هکر استفاده می‌شود و اطمینان حاصل می‌کند که محتوا همیشه به‌روز است.

چگونه این همه با هم می آید

ادغام این سه مؤلفه یک سیستم قوی برای جمع آوری و ارائه داستان های Hacker News ایجاد می کند. در اینجا یک مرور مختصر از نحوه تعامل آنها وجود دارد:

واکشی داستان ها: Cron Atlas واکشی منظم آخرین داستان ها را از Hacker News API برنامه ریزی می کند.

ذخیره سازی داده ها: داستان های واکشی شده در یک پایگاه داده برای پرس و جو و بازیابی کارآمد ذخیره می شوند.

نمایش داستان ها: Next.js برای ساخت قسمت جلویی استفاده می شود که این داستان ها را به شیوه ای سازمان یافته نمایش می دهد.

اطلاعیه ها: ارسال مجدد ارسال اعلان‌ها در مورد داستان‌ها یا به‌روزرسانی‌های جدید را به کاربران انجام می‌دهد.

قطعه کد

واکشی داستان ها با Cron Atlas

برای تنظیم یک کار زمان‌بندی شده با Cron Atlas، ممکن است از اسکریپتی مانند زیر استفاده کنید:

const fetch = require(‘node-fetch’);
const db = require(‘./database’);

const fetchHackerNewsStories = async () => {
const response = await fetch(‘https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty’);
const storyIds = await response.json();
const stories = await Promise.all(storyIds.slice(0, 10).map(id =>
fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`)
.then(res => res.json())
));
await db.saveStories(stories);
};

fetchHackerNewsStories();

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نمایش داستان ها با Next.js

در اینجا یک مثال اساسی از نحوه نمایش این داستان ها با استفاده از Next.js آورده شده است:

جاوا اسکریپت

import { useEffect, useState } from ‘react’;

const HomePage = () => {
const [stories, setStories] = useState([]);

useEffect(() => {
const fetchStories = async () => {
const response = await fetch(‘/api/stories’);
const data = await response.json();
setStories(data);
};
fetchStories();
}, []);

return (

);
};

export default HomePage;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

این ابزار جمع‌آوری جدید قدرت ترکیب Next.js، Resend و Cron Atlas را برای ایجاد تجربه‌ای جامع و کاربرپسند برای دنبال کردن داستان‌های Hacker News نشان می‌دهد. خواه توسعه‌دهنده‌ای باشید که به دنبال ساخت ابزار مشابهی هستید یا فقط در مورد پشته فناوری کنجکاو هستید، درک این مؤلفه‌ها می‌تواند بینش‌های ارزشمندی را در مورد توسعه وب مدرن ارائه دهد.

منتظر به روز رسانی ها و نوآوری های بیشتر در دنیای فناوری باشید! 🚀🔧📱

const fetch = require('node-fetch');
const db = require('./database');

const fetchHackerNewsStories = async () => {
    const response = await fetch('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty');
    const storyIds = await response.json();
    const stories = await Promise.all(storyIds.slice(0, 10).map(id => 
        fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json?print=pretty`)
            .then(res => res.json())
    ));
    await db.saveStories(stories);
};

fetchHackerNewsStories();

import { useEffect, useState } from 'react';

const HomePage = () => {
    const [stories, setStories] = useState([]);

    useEffect(() => {
        const fetchStories = async () => {
            const response = await fetch('/api/stories');
            const data = await response.json();
            setStories(data);
        };
        fetchStories();
    }, []);

    return (
        
    );
};

export default HomePage;