Upstash के साथ ट्वीट शेड्यूलर बनाएं: चरण-दर-चरण गाइड

इस चरण-दर-चरण गाइड में, मैं बताऊंगा कि कैसे मैंने Upstash QStash, Upstash Redis, Next.js सर्वर एक्शन और Vercel का उपयोग करके एक ट्वीट शेड्यूलर बनाया। ट्विटर पोस्ट शेड्यूल करने से आपको एक सुसंगत उपस्थिति बनाए रखने, इष्टतम समय पर अपने दर्शकों से जुड़ने और अपनी कंटेंट रणनीति को कुशलतापूर्वक प्रबंधित करने में मदद मिलती है।

पूर्वापेक्षाएँ

आपको निम्नलिखित की आवश्यकता होगी:

Node.js 18 या बाद का संस्करण
एक Upstash खाता
एक Twitter खाता
एक Vercel खाता

टेक स्टैक

इस गाइड में निम्नलिखित तकनीकों का उपयोग किया गया है:

तकनीक	विवरण
Upstash	सर्वरलेस डेटाबेस प्लेटफॉर्म। हम ट्वीट्स को कतार में स्टोर करने के लिए Upstash Queue और QStash का उपयोग निर्धारित आवृत्ति पर शेड्यूल API को POST करने के लिए कर रहे हैं।
Next.js	वेब के लिए React फ्रेमवर्क। हम तेजी से UI प्रोटोटाइपिंग के लिए shadcn/ui का उपयोग कर रहे हैं।
TailwindCSS	कस्टम डिजाइन बनाने के लिए CSS फ्रेमवर्क।
Vercel	वेब एप्लिकेशन को तैनात और स्केल करने के लिए क्लाउड प्लेटफॉर्म।
Prettier	सुसंगत कोड स्टाइल के लिए ऑपिनियनेटेड कोड फॉर्मेटर।

चरण

इस गाइड को पूरा करने और अपना स्वयं का ट्वीट शेड्यूलर तैनात करने के लिए, आपको इन चरणों का पालन करना होगा:

Upstash Redis सेटअप करना
Upstash QStash सेटअप करना
Twitter डेवलपर एप्लिकेशन सेटअप करना
एक नया Next.js एप्लिकेशन बनाना
Twitter OAuth 2.0 के साथ उपयोगकर्ता प्रमाणीकरण लागू करना
ट्वीट शेड्यूल करने के लिए यूजर इंटरफेस बनाना
Upstash QStash का उपयोग करके ट्वीट शेड्यूल करना
Vercel पर तैनात करना

Upstash Redis सेटअप करना

एक बार जब आप Upstash खाता बना लेते हैं और लॉग इन हो जाते हैं, तो Redis टैब पर जाएं और एक डेटाबेस बनाएं।

Upstash के साथ ट्वीट शेड्यूलर बनाएं: चरण-दर-चरण गाइड

अपना डेटाबेस बनाने के बाद, नीचे स्क्रॉल करें जब तक आपको REST API सेक्शन न मिल जाए और .env बटन चुनें। सामग्री को कॉपी करें और इसे कहीं सुरक्षित रखें।

Upstash के साथ ट्वीट शेड्यूलर बनाएं: चरण-दर-चरण गाइड

Upstash QStash सेटअप करना

निर्धारित अंतराल पर शेड्यूलिंग एंडपॉइंट पर POST अनुरोध शेड्यूल करने के लिए, आप QStash का उपयोग करेंगे। QStash टैब पर जाएं और रिक्वेस्ट बिल्डर टैब तक नीचे स्क्रॉल करें।

Upstash के साथ ट्वीट शेड्यूलर बनाएं: चरण-दर-चरण गाइड

QStash URL, TOKEN, वर्तमान साइनिंग कुंजी और अगली साइनिंग कुंजी को कॉपी करें और उन्हें कहीं सुरक्षित रखें।

Upstash के साथ ट्वीट शेड्यूलर बनाएं: चरण-दर-चरण गाइड

Twitter डेवलपर एप्लिकेशन सेटअप करना

Twitter OAuth 2.0 के साथ प्रमाणीकरण सेटअप करने के लिए, आप Twitter डेवलपर पोर्टल में एक एप्लिकेशन बनाएंगे। Twitter एप्लिकेशन सेटअप करने के लिए, निम्नलिखित करें:

Twitter के डेवलपर पोर्टल > प्रोजेक्ट्स खोलें।
एक प्रोजेक्ट बनाएं।
अपनी एप्लिकेशन सेटिंग्स में सेटिंग्स टैब पर जाएं, और निम्नलिखित करें:
- ऐप अनुमतियाँ में Read and write and Direct message चुनें।
- ऐप का प्रकार में Web App, Automated App or Bot चुनें।
- कॉलबैक URI / रीडायरेक्ट URL के रूप में https://localhost:3000/api/auth/callback/twitter दर्ज करें।
अपनी एप्लिकेशन सेटिंग्स में Keys and tokens टैब पर जाएं, नीचे स्क्रॉल करें और निम्नलिखित करें:
- Client ID कॉपी करें और इसे TWITTER_CLIENT_ID के रूप में कहीं सुरक्षित रखें।
- Client Secret कॉपी करें और इसे TWITTER_CLIENT_SECRET के रूप में कहीं सुरक्षित रखें।

OAuth 2.0 के लिए अपने Twitter डेवलपर एप्लिकेशन को सफलतापूर्वक सेटअप करने के लिए बस इतना ही आवश्यक था।

एक नया Next.js एप्लिकेशन बनाना

आइए एक नया Next.js प्रोजेक्ट बनाकर शुरू करें। अपना टर्मिनल खोलें और निम्न कमांड चलाएं:

npx create-next-app@latest schedule-qstash-queue-upstash

जब संकेत दिया जाए, तो चुनें:

TypeScript का उपयोग करने के लिए Yes।
ESLint का उपयोग करने के लिए No।
Tailwind CSS का उपयोग करने के लिए Yes।
src/ डायरेक्टरी का उपयोग करने के लिए No।
App Router का उपयोग करने के लिए Yes।
डिफ़ॉल्ट आयात उपनाम (@/*) को कस्टमाइज़ करने के लिए No।

एक बार हो जाने पर, प्रोजेक्ट डायरेक्टरी में जाएं और निम्न कमांड चलाकर विकास मोड में ऐप शुरू करें:

cd schedule-qstash-queue-upstash npm run dev

ऐप localhost:3000 पर चलना चाहिए।

अब, अपने प्रोजेक्ट के रूट पर एक .env फाइल बनाएं। आप ऊपर के अनुभागों से सहेजे गए आइटम जोड़ने जा रहे हैं।

यह कुछ इस तरह दिखना चाहिए:

# .env
# ऊपर के चरणों से प्राप्त
# Twitter पर्यावरण चर
TWITTER_CLIENT_ID="..."
TWITTER_CLIENT_SECRET="..."
TWITTER_AUTH_CALLBACK_URL="https://localhost:3000/api/auth/callback/twitter"
# Upstash पर्यावरण चर
UPSTASH_REDIS_REST_URL="https://...upstash.io"
UPSTASH_REDIS_REST_TOKEN="...="
QSTASH_URL="https://qstash.upstash.io/v2/publish/"
QSTASH_TOKEN="...="
QSTASH_CURRENT_SIGNING_KEY="sig_..."
QSTASH_NEXT_SIGNING_KEY="sig_..."

shadcn/ui घटकों को एकीकृत करना

यूजर इंटरफेस को तेजी से प्रोटोटाइप करने के लिए, आप Next.js के साथ shadcn/ui सेटअप करेंगे। shadcn/ui खूबसूरती से डिजाइन किए गए घटकों का एक संग्रह है जिन्हें आप अपने ऐप्स में कॉपी और पेस्ट कर सकते हैं। अपने टर्मिनल विंडो में, shadcn/ui सेटअप शुरू करने के लिए नीचे दी गई कमांड चलाएं:

npx shadcn-ui@latest init

आपसे components.json कॉन्फ़िगर करने के लिए कुछ प्रश्न पूछे जाएंगे, निम्नलिखित चुनें:

TypeScript का उपयोग करने के लिए Yes।
उपयोग की जाने वाली शैली चुनने के लिए Default।
बेस कलर चुनने के लिए Slate।
ग्लोबल CSS फाइल दर्ज करने के लिए app/globals.css।
रंगों के लिए CSS वेरिएबल्स का उपयोग करने के लिए yes।
कस्टम टेलविंड प्रीफिक्स दर्ज करने के लिए Leave blank।
tailwind.config.js का स्थान दर्ज करने के लिए tailwind.config.ts।
घटकों के लिए उपनाम कॉन्फ़िगर करने के लिए @/components।
यूटिल्स के लिए उपनाम कॉन्फ़िगर करने के लिए @/lib/utils।
React सर्वर घटकों के उपयोग को चुनने के लिए Yes।
कॉन्फ़िगरेशन को components.json में लिखने के लिए आगे बढ़ने के लिए Yes।

एक बार हो जाने पर, आपने एक CLI सेटअप कर लिया है जो हमें आपके Next.js एप्लिकेशन में React घटकों को आसानी से जोड़ने की अनुमति देता है। अगला, अपने टर्मिनल विंडो में, बटन, इनपुट, टेक्स्टएरिया, पॉपओवर, कैलेंडर और टोस्ट तत्वों को प्राप्त करने के लिए नीचे दी गई कमांड चलाएं:

npx shadcn-ui@latest add button
npx shadcn-ui@latest add input
npx shadcn-ui@latest add textarea
npx shadcn-ui@latest add toast
npx shadcn-ui@latest add popover
npx shadcn-ui@latest add calendar

एक बार हो जाने पर, अब आपको app/components डायरेक्टरी के अंदर एक ui डायरेक्टरी दिखाई देगी जिसमें button.tsx, input.tsx, calendar.tsx, input.tsx, popover.tsx, textarea.tsx, toast.tsx, toaster.tsx, और use-toast.ts होंगे।

अब, app/layout.tsx फाइल खोलें, और निम्नलिखित जोड़ें:

// File: app/layout.tsx
import './globals.css'
import { cn } from '@/lib/utils'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import { Toaster } from '@/components/ui/toaster'
const fontSans = Inter({
  subsets: ['latin'],
  variable: '--font-sans',
})
export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}
export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
    <body
      className={cn(fontSans.variable, 'min-w-screen flex min-h-screen flex-col items-center justify-center bg-background font-sans antialiased')}
    >
      {children}
      <Toaster />
    </body>
    </html>
  )
}

उपरोक्त कोड परिवर्तनों में, आपने Toaster घटक आयात किया है (जो shadcn/ui द्वारा बनाया गया है), और सुनिश्चित किया कि यह आपके पूरे Next.js एप्लिकेशन में मौजूद है। यह आपको useToast हुक के माध्यम से अपने कोड में कहीं से भी टोस्ट नोटिफिकेशन दिखाने में सक्षम बनाता है।

शेड्यूल किए गए ट्वीट्स को स्टोर करने के लिए Upstash Queue बनाएं

इस खंड में, आप सीखेंगे कि शेड्यूल किए गए ट्वीट्स की जानकारी स्टोर करने के लिए Upstash Queue का उपयोग कैसे करें। आप सीखेंगे कि सर्वर-साइड कोड कैसे बनाया जाता है जिसे API रूट के बजाय फ़ंक्शन के रूप में आमंत्रित किया जाता है, Next.js सर्वर एक्शन का उपयोग करके।

सबसे पहले, अपनी टर्मिनल विंडो में, Upstash SDK इंस्टॉल करने के लिए निम्नलिखित निष्पादित करें:

npm install @upstash/qstash @upstash/queue @upstash/redis@1.28.0

उपरोक्त कमांड निम्नलिखित पैकेज इंस्टॉल करता है:

@upstash/qstash: HTTP अनुरोधों पर अपने Upstash QStash इंस्टेंस के साथ इंटरैक्ट करने के लिए SDK।
@upstash/queue: Upstash Redis द्वारा समर्थित स्ट्रीम-आधारित मैसेज कतार प्रबंधित करने के लिए SDK।
@upstash/redis: Upstash REST API के शीर्ष पर बने HTTP अनुरोधों पर Redis के साथ इंटरैक्ट करने के लिए SDK।

Upstash Redis और Upstash Queue क्लाइंट आरंभ करें

ऊपर इंस्टॉल की गई लाइब्रेरी का उपयोग करके अपने Upstash Queue के साथ इंटरैक्ट करने के लिए, निम्न कोड के साथ एक फाइल lib/upstash.ts बनाएं:

// File: lib/upstash.ts
import { Redis } from '@upstash/redis'
import { Queue } from '@upstash/queue'
export const redis = new Redis({
  url: process.env.UPSTASH_REDIS_REST_URL as string,
  token: process.env.UPSTASH_REDIS_REST_TOKEN as string,
})
export const queue = new Queue({
  redis,
  queueName: 'tweets',
  concurrencyLimit: 5,
})

उपरोक्त कोड निम्नलिखित करता है:

पैकेज द्वारा निर्यात Redis और Queue क्लास आयात करता है।
अनुरोध प्राधिकरण टोकन के साथ Upstash Redis URL को इंगित करने वाला एक redis इंस्टेंस निर्यात करता है।
ऊपर बनाए गए Upstash Redis को इंगित करने वाला एक queue इंस्टेंस निर्यात करता है। यह कतार का नाम tweets और concurrencyLimit को 5 पर सेट करता है, जिससे 5 समवर्ती संदेश प्रसंस्करण की अनुमति मिलती है।

कतार इंस्टेंस का उपयोग करके, आप एक Next.js सर्वर एक्शन बनाएंगे जो ट्वीट टेक्स्ट और ट्वीट तिथि को स्वीकार करेगा ताकि ट्वीट ऑब्जेक्ट बनाकर भविष्य के प्रसंस्करण के लिए कतार में डाल सके। निम्न कोड के साथ एक फाइल app/schedule.server.tsx बनाएं:

// File: app/schedule.server.tsx
'use server'
import { queue } from '@/lib/upstash'
import type { FormProps } from './form'
export async function schedule(_: any, formData: FormData): Promise<FormProps> {
  try {
    const tweet_text = formData.get('tweet_text') as string
    const tweet_date = formData.get('tweet_date') as string
    const now = new Date().getTime()
    const delay = new Date(tweet_date).getTime() - now
    await queue.sendMessage({ tweet_text, tweet_date }, delay)
    return { ok: true, tweet_date }
  } catch (e) {
    console.log(e)
    return { ok: false }
  }
}

उपरोक्त कोड निम्नलिखित करता है:

queue इंस्टेंस आयात करता है
schedule नामक एक सर्वर एक्शन निर्यात करता है, जो शेड्यूल किए जाने वाले ट्वीट के टेक्स्ट और तिथि वाले फॉर्म सबमिशन को स्वीकार करता है।
वर्तमान समय और ट्वीट के शेड्यूल समय के बीच का समय अंतर निकालता है।
ऊपर गणना किए गए समय के साथ देरी सेट करके ट्वीट ऑब्जेक्ट को तिथि और टेक्स्ट के साथ सम्मिलित करता है।

इसके साथ, आपने सुनिश्चित कर लिया है कि ट्वीट को कतार में तभी डाला जाता है जब वह शेड्यूल किया गया हो। यह कतार की स्थिति को बनाए रखने की प्रक्रिया को आसान बनाता है, यह सुनिश्चित करते हुए कि केवल किसी दिए गए दिन शेड्यूल किए गए ट्वीट्स ही कतार में उपलब्ध हैं।

आइए OAuth 2.0 PKCE फ्लो का उपयोग करके उपयोगकर्ता की ओर से ट्वीट करने के लिए प्राधिकरण प्राप्त करने पर आगे बढ़ते हैं।

Twitter OAuth 2.0 के साथ उपयोगकर्ता प्रमाणीकरण लागू करना

इस खंड में, आप सीखेंगे कि Twitter OAuth क्लाइंट को कॉन्फ़िगर करके और प्रमाणीकरण कार्यों के लिए Twitter SDK द्वारा प्रदान की गई सहायक फ़ंक्शन का उपयोग करके अपने एप्लिकेशन में Twitter OAuth 2.0 प्रमाणीकरण फ्लो कैसे सेटअप करें। प्रमाणीकरण फ्लो में प्राधिकरण और कॉलबैक एंडपॉइंट बनाना शामिल है, जिससे उपयोगकर्ता पहुंच प्रदान कर सकें और टोकन प्राप्त कर सकें, जिसमें एक्सेस टोकन Upstash Redis में संग्रहीत होता है। आप Upstash Redis में वैध एक्सेस टोकन की उपस्थिति को इंगित करने वाले एंडपॉइंट के माध्यम से प्रमाणीकरण स्थिति भी बनाएंगे।

सबसे पहले, अपनी टर्मिनल विंडो में, Twitter OAuth 2.0 प्रमाणीकरण लागू करने के लिए आवश्यक लाइब्रेरी इंस्टॉल करने के लिए नीचे दी गई कमांड चलाएं:

npm install twitter-api-sdk

उपरोक्त कमांड निम्नलिखित पैकेज इंस्टॉल करता है:

twitter-api-sdk: Twitter API के लिए एक TypeScript SDK।

Twitter प्रमाणीकरण क्लाइंट बनाएं

Twitter API की जटिलताओं में जाए बिना प्राधिकरण URL उत्पन्न करने में सक्षम होने के लिए, आप Twitter SDK द्वारा auth क्लाइंट का उपयोग करने जा रहे हैं। निम्न कोड के साथ lib डायरेक्टरी के अंदर एक फाइल twitter.ts बनाएं:

// File: lib/twitter.ts
import { auth } from 'twitter-api-sdk'
export const authClient = new auth.OAuth2User({
  client_id: process.env.TWITTER_CLIENT_ID as string,
  callback: process.env.TWITTER_AUTH_CALLBACK_URL as string,
  client_secret: process.env.TWITTER_CLIENT_SECRET as string,
  scopes: ['tweet.write', 'tweet.read', 'offline.access', 'users.read'],
})

उपरोक्त कोड Twitter SDK से auth हेल्पर आयात करके शुरू होता है। फिर, यह auth क्लाइंट निर्यात करता है जो प्राधिकरण URL उत्पन्न करने और प्रमाणित उपयोगकर्ता से एक्सेस टोकन का अनुरोध करने के लिए हेल्पर फ़ंक्शन प्रदान करके Twitter API सिंटैक्स सीखने का समय बचाएगा।

Twitter प्राधिकरण URL तैयार करें

OAuth 2.0 फ्लो में पहला चरण यह है कि उपयोगकर्ता को एक प्राधिकरण URL पर रीडायरेक्ट किया जाता है। प्राधिकरण URL OAuth 2.0 सर्वर द्वारा प्रदान किया गया एक एंडपॉइंट है जहां उपयोगकर्ता को क्लाइंट एप्लिकेशन को अनुमति देकर प्राधिकरण प्रक्रिया शुरू करने के लिए रीडायरेक्ट किया जाता है। आमतौर पर, उपयोगकर्ता को साइन इन/अप स्क्रीन पर कई विकल्प (जैसे Continue with Twitter, Continue with Google, आदि) प्रस्तुत किए जाते हैं, और फिर उन्हें प्लेटफ़ॉर्म (यहां, Twitter) की होस्ट की गई प्राधिकरण स्क्रीन पर ले जाया जाता है।

निम्न कोड के साथ एक फाइल app/api/auth/twitter/route.ts बनाएं:

// File: app/api/auth/twitter/route.ts
export const dynamic = 'force-dynamic'
import { NextResponse } from 'next/server'
import { authClient } from '@/lib/twitter'
export async function GET() {
  // Twitter से प्राधिकरण URL प्राप्त करें
  const authUrl = authClient.generateAuthURL({
    state: 'state',
    code_challenge: 'challenge',
    code_challenge_method: 'plain',
  })
  // प्राधिकरण URL पर रीडायरेक्ट के रूप में 303 के साथ वापस करें
  return NextResponse.redirect(authUrl, 303)
}

उपरोक्त कोड निम्नलिखित करता है:

वेब रिस्पॉन्स API को विस्तारित करने वाले NextResponse हेल्पर फ़ंक्शन को आयात करता है।
पहले बनाए गए authClient को आयात करता है।
/api/auth/twitter पर आने वाले GET अनुरोधों का जवाब देने वाला एक GET HTTP हैंडलर निर्यात करता है।
Twitter SDK के generateAuthURL हेल्पर फ़ंक्शन का उपयोग करके प्राधिकरण URL उत्पन्न करता है।
NextResponse के redirect मेथड का उपयोग करके उत्पन्न प्राधिकरण URL पर रीडायरेक्ट करता है।

आइए उस एंडपॉइंट को बनाने पर आगे बढ़ते हैं जो उपयोगकर्ता द्वारा आपके Twitter एप्लिकेशन को एक्सेस के साथ अधिकृत करने पर अनुरोध का जवाब देता है।

प्राधिकरण कॉलबैक URL तैयार करें

OAuth 2.0 फ्लो में दूसरा चरण प्रमाणीकरण प्लेटफ़ॉर्म से कॉलबैक का जवाब देना है। Twitter से आने वाले प्राधिकरण कॉलबैक अनुरोध को संभालने के लिए, आप अपने एप्लिकेशन में एक एंडपॉइंट कॉन्फ़िगर करेंगे जहां उपयोगकर्ता पहुंच प्रदान करने के बाद रीडायरेक्ट किया जाएगा। यह कॉलबैक URL प्राधिकरण कोड प्राप्त करने के लिए आवश्यक है, जिससे आपका एप्लिकेशन Upstash Redis में प्राप्त एक्सेस टोकन को सहेज सके। उस टोकन के साथ, आप अपने एप्लिकेशन में API पर ट्वीट्स को स्वचालित कर सकते हैं।

निम्न कोड के साथ एक फाइल app/api/auth/callback/twitter/route.ts बनाएं:

// File: app/api/auth/callback/twitter/route.ts
export const dynamic = 'force-dynamic'
import { redis } from '@/lib/upstash'
import { NextResponse } from 'next/server'
import { authClient } from '@/lib/twitter'
export async function GET(request: Request) {
  // कॉलबैक URL में code ढूंढें
  const code = new URL(request.url).searchParams.get('code')
  // यदि कोई code क्वेरी पैरामीटर नहीं मिला, तो 403 वापस करें
  if (!code) return NextResponse.json({}, { status: 403 })
  // यदि code क्वेरी पैरामीटर मिला, तो आंतरिक code_verifier को अपडेट करने के लिए एक और प्राधिकरण URL बनाएं
  authClient.generateAuthURL({
    state: 'state',
    code_challenge: 'challenge',
    code_challenge_method: 'plain',
  })
  // भविष्य में अनुरोध करने के लिए उपयोग करने के लिए access_token प्राप्त करें
  const { token: { access_token }, } = await authClient.requestAccessToken(code)
  // Upstash में access_token सहेजें
  await redis.set('twitter_oauth_access_token', access_token)
  // होमपेज पर वापस जाएं
  return NextResponse.redirect(new URL('/', request.url), 303)
}

उपरोक्त कोड निम्नलिखित करता है:

Upstash Redis का उपयोग करने वाले redis इंस्टेंस को आयात करता है।
वेब रिस्पॉन्स API को विस्तारित करने वाले NextResponse हेल्पर फ़ंक्शन को आयात करता है।
पहले बनाए गए authClient को आयात करता है।
/api/auth/callback/twitter पर आने वाले GET अनुरोधों का जवाब देने वाला एक GET HTTP हैंडलर निर्यात करता है।
कॉलबैक URL से code क्वेरी पैरामीटर को डिस्ट्रक्चर करता है।
SDK द्वारा बनाए गए आंतरिक राज्य को अपडेट करने के लिए एक हैक के रूप में पहले की तरह एक प्राधिकरण URL बनाता है।
Twitter SDK द्वारा requestAccessToken फ़ंक्शन को कॉल करके एक्सेस और रिफ्रेश टोकन प्राप्त करता है, जो आपको API पर ट्वीट बनाने की अनुमति देगा।
प्राप्त token ऑब्जेक्ट से access_token को डिस्ट्रक्चर करता है।
Upstash Redis में twitter_oauth_access_token कुंजी के साथ प्राप्त एक्सेस टोकन मान को सहेजता है।
NextResponse के redirect मेथड का उपयोग करके इंडेक्स URL (/) पर रीडायरेक्ट करता है।

अब आप Twitter OAuth 2.0 फ्लो के साथ हो चुके हैं।

Upstash Redis इंस्टेंस में एक वैध twitter_oauth_access_token होना प्रमाणीकरण फ्लो स्थिति का संकेतक है। यूजर इंटरफेस में इसे संप्रेषित करने के लिए, निम्न कोड के साथ एक फाइल app/api/auth/twitter/authenticated/route.ts बनाएं:

// File: app/api/auth/twitter/authenticated/route.ts
export const dynamic = 'force-dynamic'
import { redis } from '@/lib/upstash'
import { NextResponse } from 'next/server'
export async function GET() {
  try {
    const access_token = await redis.get<string>('twitter_oauth_access_token')
    if (!access_token) return NextResponse.json({ ok: false }, { status: 200 })
    return NextResponse.json({ ok: true }, { status: 200 })
  } catch(e) {}
  return NextResponse.json({ ok: false }, { status: 200 })
}

उपरोक्त कोड निम्नलिखित करता है:

Upstash Redis का उपयोग करने वाले redis इंस्टेंस को आयात करता है।
वेब रिस्पॉन्स API को विस्तारित करने वाले NextResponse हेल्पर फ़ंक्शन को आयात करता है।
/api/auth/twitter/authenticated पर आने वाले GET अनुरोधों का जवाब देने वाला एक GET HTTP हैंडलर निर्यात करता है।
Upstash Redis में twitter_oauth_access_token कुंजी से जुड़े मान को प्राप्त करता है।
एक JSON प्रतिक्रिया लौटाता है जिसमें एक ok बूलियन होता है जो इंगित करता है कि Upstash Redis में एक वैध एक्सेस टोकन मौजूद है या नहीं।

आइए आपके द्वारा बनाए गए इन API एंडपॉइंट का उपभोग करने के लिए यूजर इंटरफेस बनाने पर आगे बढ़ते हैं।

ट्वीट शेड्यूल करने के लिए यूजर इंटरफेस बनाएं

इस खंड में, आप सीखेंगे कि React हुक useFormState और useFormStatus का उपयोग करके प्रतिक्रियाशील फॉर्म स्टेट कैसे बनाएं, और ट्वीट शेड्यूल करने के लिए सर्वर एक्शन को आमंत्रित करें।

सबसे पहले, आप एक React घटक बनाने जा रहे हैं जो शेड्यूल किए जाने वाले ट्वीट की जानकारी वाले फॉर्म को रेंडर करता है और एक टोस्ट नोटिफिकेशन दिखाता है जो इंगित करता है कि ट्वीट जानकारी। निम्न कोड के साथ एक फाइल app/form.tsx बनाएं:

// File: app/form.tsx
'use client'
// UI आयात
import { cn } from '@/lib/utils'
import { format } from 'date-fns'
import { Button } from '@/components/ui/button'
import { Calendar } from '@/components/ui/calendar'
import { useToast } from '@/components/ui/use-toast'
import { Textarea } from '@/components/ui/textarea'
import { Calendar as CalendarIcon } from 'lucide-react'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
// फॉर्म स्टेटस हुक
import { useFormStatus } from 'react-dom'
import { useEffect, useState } from 'react'
// फॉर्म प्रॉप्स परिभाषित करें
export interface FormProps {
  ok?: boolean
  tweet_date?: string
}
export default function ({ ok, tweet_date }: FormProps) {
  const { toast } = useToast()
  // फॉर्म सबमिशन स्टेट का पता लगाने के लिए React के useFormStatus हुक का उपयोग करें
  const { pending } = useFormStatus()
  useEffect(() => {
    // यदि फॉर्म पेंडिंग नहीं है
    if (!pending) {
      // यदि सर्वर ने क्वेरी को ठीक किया, तो फॉर्म रीसेट करें
      if (ok) {
        const scheduleForm = document.getElementById('schedule_form') as HTMLFormElement
        if (scheduleForm) scheduleForm.reset()
        // शेड्यूलिंग सफल रहा प्रदर्शित करें
        toast({ title: 'Scheduled Tweet', description: tweet_date, })
      } else {
        // शेड्यूलिंग विफल रहा प्रदर्शित करें
        toast({ variant: 'destructive', title: 'Uh oh! Something went wrong.', description: 'There was a problem with your request.', })
      }
    }
  }, [pending])
  // डेट पिकर परिवर्तनों को सुनें
  const [date, setDate] = useState<Date>()
  return (
    <>
      <span className="font-semibold">Tweet Scheduler</span>
      {/* भविष्य की तारीखों पर ट्वीट शेड्यूल करने के लिए डेट पिकर */}
      <input id="tweet_date" name="tweet_date" className="hidden" value={date?.toString()} />
      <Popover>
        <PopoverTrigger asChild>
          <Button variant={'outline'} className={cn('w-[280px] justify-start text-left font-normal', !date && 'text-muted-foreground')}>
            <CalendarIcon className="mr-2 h-4 w-4" />
            {date ? format(date, 'PPP') : <span>Pick a date</span>}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0">
          <Calendar mode="single" selected={date} onSelect={setDate} />
        </PopoverContent>
      </Popover>
      {/* ट्वीट का टेक्स्ट दर्ज करने के लिए टेक्स्ट एरिया */}
      <Textarea id="tweet_text" name="tweet_text" className="min-h-[300px] w-[280px]" placeholder="Tweet" />
      {/* ट्वीट शेड्यूल बटन */}
      <Button disabled={pending} className="w-[280px]">
        {pending ? 'Scheduling...' : <>Schedule &rarr;</>}
      </Button>
    </>
  )
}

उपरोक्त कोड निम्नलिखित करता है:

पहले shadcn/ui CLI कमांड द्वारा बनाए गए घटकों को आयात करता है।
एक React घटक निर्यात करता है जो शेड्यूल किए गए ट्वीट की तिथि का वर्णन करने वाले नेत्रहीन छिपे input HTML तत्व को रेंडर करता है।
घटक उपयोगकर्ता से नेत्रहीन रूप से ट्वीट का टेक्स्ट स्वीकार करने के लिए एक textarea HTML तत्व भी रेंडर करता है।
घटक पिछले फॉर्म सबमिशन की स्थिति के आधार पर सशर्त रूप से अक्षम एक Button भी रेंडर करता है।
घटक सर्वर एक्शन के परिणामस्वरूप सफलता मिलने पर फॉर्म को रीसेट करने के लिए useEffect हुक का भी उपयोग करता है। किसी भी तरह से, यह नीचे दाएं कोने पर एक टोस्ट नोटिफिकेशन दिखाता है जो अनुरोध की स्थिति को इंगित करता है।

अब, आप एक घटक बनाने जा रहे हैं जो उपयोगकर्ता के Twitter प्रमाणीकरण स्थिति को दिखाता है। निम्न कोड के साथ एक फाइल components/twitter.tsx बनाएं:

// File: components/twitter.tsx
'use client'
import { useEffect, useState } from 'react'
import { Button } from '@/components/ui/button'
export default function () {
  const state: { [k: string]: { message: string; variant: 'outline' | 'secondary' | 'destructive' } } = {
    pending: { message: '...', variant: 'outline', },
    true: { message: '✔️ Authenticated Instance', variant: 'secondary', },
    false: { message: '1-Time Authentication with Twitter →', variant: 'destructive', },
  }
  const [authenticated, setAuthenticated] = useState<string | boolean>('pending')
  useEffect(() => {
    fetch('/api/auth/twitter/authenticated')
      .then((res) => res.json())
      .then((res) => { setAuthenticated(res.ok as boolean) })
  }, [])
  { /* Twitter के साथ प्रमाणित करें */ }
  return (
    <Button className="w-[280px]" onClick={() => { if (!authenticated) window.location.href = '/api/auth/twitter' }} variant={state[authenticated.toString()].variant} >
      {state[authenticated.toString()].message}
    </Button>
  )
}

उपरोक्त कोड निम्नलिखित करता है:

उपयोगकर्ता प्रमाणीकरण की स्थिति प्राप्त करने के लिए इसका उपयोग करने के लिए React द्वारा useEffect और useState हुक आयात करता है।
एक React घटक निर्यात करता है जो shadcn/ui द्वारा Button घटक को विभिन्न स्थितियों में रेंडर करता है, प्रत्येक को उपयोगकर्ता की Twitter प्रमाणीकरण स्थिति से जोड़ता है।

उपयोगकर्ताओं के लिए एक फॉर्म रेंडर करने के लिए जो उन्हें इंडेक्स रूट (यानी /) खोलते ही इंटरैक्ट करने और ट्वीट शेड्यूल करने की अनुमति देता है, निम्न कोड के साथ एक फाइल app/page.tsx बनाएं:

// File: app/page.tsx
'use client'
// पेंडिंग स्टेटस के साथ फॉर्म
import Form from './form'
// सर्वर द्वारा वापस किए गए डेटा तक पहुंच के साथ फॉर्म
import { useFormState } from 'react-dom'
// शेड्यूलिंग Next.js एक्शन
import Twitter from '@/components/twitter'
import { schedule } from './schedule.server'
export default function () {
  const [state, formAction] = useFormState(schedule, {})
  return (
    <div className="flex w-[300px] flex-col gap-y-3 p-5">
      <Twitter />
      <form id="schedule_form" action={formAction} className="flex w-[300px] flex-col gap-y-3">
        <Form {...state} />
      </form>
    </div>
  )
}

उपरोक्त कोड निम्नलिखित करता है:

पहले बनाए गए Form और Twitter घटकों को आयात करता है।
React द्वारा useFormState हुक आयात करता है ताकि state वेरिएबल का उपयोग करके Next.js सर्वर एक्शन द्वारा वापस किए गए डेटा को संसाधित किया जा सके, और फॉर्म सबमिशन के माध्यम से सर्वर एक्शन के आह्वान की अनुमति दी जा सके।
पहले बनाए गए schedule सर्वर एक्शन को आयात करता है।
एक React घटक निर्यात करता है जिसमें schedule_form आईडी वाला एक <form> घटक होता है और जब उपयोगकर्ता द्वारा फॉर्म सबमिट किया जाता है तो formAction को आमंत्रित करने के लिए सेट किया जाता है।

Upstash QStash का उपयोग करके ट्वीट शेड्यूल करें

उपयोगकर्ता की ओर से ट्वीट शेड्यूल करने के लिए, आप एक एंडपॉइंट बनाएंगे जो Upstash Queue में संग्रहीत ट्वीट डेटा का उपभोग करेगा और फिर ट्वीट करने के लिए Twitter API पर POST करेगा। निम्न कोड के साथ एक फाइल app/api/schedule/route.ts बनाएं:

// File: app/api/schedule/route.ts
export const dynamic = 'force-dynamic'
import { NextResponse } from 'next/server'
import { queue, redis } from '@/lib/upstash'
import { verifySignatureAppRouter } from '@upstash/qstash/dist/nextjs'
interface TweetBody { tweet_text?: string; tweet_date?: number }
async function tweet(access_token: string, text: string | undefined) {
  if (text) {
    await fetch('https://api.twitter.com/2/tweets', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: ['Bearer', access_token].join(' '),
      },
      body: JSON.stringify({ text }),
    })
  }
}
async function handler() {
  const access_token = await redis.get<string>('twitter_oauth_access_token')
  if (!access_token) return NextResponse.json({}, { status: 403 })
  const tweets = await Promise.all(Array.from({ length: 4 }, () => queue.receiveMessage<TweetBody>()))
  await Promise.all(tweets.map((i) => tweet(access_token, i?.body?.tweet_text)))
  return NextResponse.json({}, { status: 200 })
}
export const POST = verifySignatureAppRouter(handler)

उपरोक्त कोड निम्नलिखित करता है:

Upstash Redis और Upstash Queue का उपयोग करने वाले redis और queue इंस्टेंस आयात करता है।
Upstash द्वारा verifySignatureAppRouter फ़ंक्शन आयात करता है जो यह सुनिश्चित करने के लिए अनुरोध हस्ताक्षर को सत्यापित करेगा कि अनुरोध केवल QStash से है।
एक फ़ंक्शन tweet बनाता है जो प्रमाणित उपयोगकर्ता की ओर से ट्वीट करने के लिए ट्वीट टेक्स्ट और एक्सेस टोकन स्वीकार करता है।
एक POST HTTP हैंडलर बनाता है जो /api/schedule पर आने वाले POST अनुरोधों का जवाब देता है। यह Upstash Queue से 4 संदेश प्राप्त करता है और उपयोगकर्ता की ओर से ट्वीट करने के लिए tweet फ़ंक्शन को आमंत्रित करता है।

Upstash QStash का उपयोग करके, आप ट्वीट करने की प्रक्रिया को शेड्यूल कर सकते हैं। मान लीजिए आप इसे इस तरह स्वचालित करना चाहते हैं कि हर दिन आधी रात को, प्रक्रिया स्वचालित रूप से शुरू हो जाए और ट्वीट्स बाहर जाएं। ऐसा करने के लिए, आप QStash में पहले बनाए गए एंडपॉइंट: /api/schedule का उपयोग करेंगे।

Upstash के साथ ट्वीट शेड्यूलर बनाएं: चरण-दर-चरण गाइड

Upstash कंसोल में QStash टैब पर जाएं, रिक्वेस्ट बिल्डर टैब तक नीचे स्क्रॉल करें और निम्नलिखित करें:

Endpoint टैब चुनें।
अपने /api/schedule एंडपॉइंट के पूर्ण URL के रूप में URL दर्ज करें।
Type के रूप में Scheduled चुनें।
Every के रूप में every day at midnight चुनें।
Schedule पर क्लिक करें।

उपरोक्त चरणों के साथ, आपने एक जॉब बनाई है जो हर दिन आधी रात को /api/schedule पर POST करता है।

यह बहुत सीखने वाला था! अब आप पूरा कर चुके हैं ✨

Vercel पर तैनात करें

रिपॉजिटरी अब Vercel पर तैनात करने के लिए तैयार है। तैनात करने के लिए निम्नलिखित चरणों का उपयोग करें:

अपने ऐप के कोड वाला एक GitHub रिपॉजिटरी बनाकर शुरू करें।
फिर, Vercel डैशबोर्ड पर जाएं और एक नया प्रोजेक्ट बनाएं।
नए प्रोजेक्ट को आपके द्वारा अभी बनाए गए GitHub रिपॉजिटरी से लिंक करें।
सेटिंग्स में, अपने स्थानीय .env फाइल में उनसे मेल खाने के लिए पर्यावरण चर अपडेट करें।
Deploy पर क्लिक करें।

अधिक जानकारी

अधिक विस्तृत जानकारी के लिए, इस पोस्ट में उद्धृत संदर्भों का पता लगाएं।

GitHub रिपॉजिटरी
Twitter OAuth 2.0 फ्लो
Twitter ऐप टोकन उत्पन्न करना
React फॉर्म हुक
Next.js सर्वर एक्शन

निष्कर्ष

इस गाइड में, आपने सीखा कि Upstash के शक्तिशाली Redis डेटाबेस और QStash कतार का उपयोग करके एक मजबूत ट्वीट शेड्यूलर कैसे बनाया जाए। Upstash की स्केलेबिलिटी ट्वीट्स के विश्वसनीय भंडारण और शेड्यूलिंग को सुनिश्चित करती है जो Vercel पर निर्बाध तैनाती के साथ मिलकर एक पूरी तरह से स्वचालित प्रणाली बनाती है।