<पी> इस चरण-दर-चरण मार्गदर्शिका में, मैं इस बारे में बात करता हूं कि कैसे मैंने अपस्टैश क्यूस्टैश, अपस्टैश रेडिस, नेक्स्ट.जेएस सर्वर एक्शन और वर्सेल का उपयोग करके एक ट्वीट शेड्यूलर बनाया। ट्विटर पोस्ट शेड्यूल करने से आपको निरंतर उपस्थिति बनाए रखने, इष्टतम समय पर अपने दर्शकों के साथ जुड़ने और अपनी सामग्री रणनीति को कुशलतापूर्वक प्रबंधित करने में मदद मिलती है। आवश्यकताएँ
<पी> आपको निम्नलिखित की आवश्यकता होगी: - Node.js 18 या बाद का संस्करण
- एक अपस्टैश खाता
- एक ट्विटर अकाउंट
- एक वर्सेल खाता
टेक स्टैक
<पी> इस गाइड में निम्नलिखित तकनीकों का उपयोग किया गया है: प्रौद्योगिकी | विवरण | अपस्टैशसर्वरलेस डेटाबेस प्लेटफ़ॉर्म। हम क्रमशः एक कतार में ट्वीट्स को संग्रहीत करने और एक निश्चित आवृत्ति पर शेड्यूल एपीआई पोस्ट करने के लिए अपस्टैश क्यू और क्यूस्टैश दोनों का उपयोग कर रहे हैं। वेब के लिए नेक्स्ट.जेएस रिएक्ट फ्रेमवर्क। हम तेजी से यूआई प्रोटोटाइप के लिए पॉप्युलेट shadcn/ui का उपयोग कर रहे हैं। कस्टम डिजाइन बनाने के लिए टेलविंडCSSCSS फ्रेमवर्क। वेब अनुप्रयोगों को तैनात करने और स्केल करने के लिए वर्सेलए क्लाउड प्लेटफॉर्म। सुसंगत कोड शैली के लिए प्रीटियरओपिनियनेटेड कोड फॉर्मेटर। कदम
<पी> इस गाइड को पूरा करने और अपना स्वयं का ट्वीट शेड्यूलर तैनात करने के लिए, आपको इन चरणों का पालन करना होगा: - अपस्टैश रेडिस की स्थापना
- अपस्टैश QStash की स्थापना
- ट्विटर डेवलपर एप्लिकेशन सेट करना
- एक नया Next.js एप्लिकेशन बनाएं
- ट्विटर OAuth 2.0 के साथ उपयोगकर्ता प्रमाणीकरण लागू करें
- ट्वीट शेड्यूल करने के लिए यूजर इंटरफ़ेस बनाएं
- Upstash QStash का उपयोग करके ट्वीट शेड्यूल करें
- वर्सेल में तैनात करें
अपस्टैश रेडिस की स्थापना
<पी> एक बार जब आप एक अपस्टैश खाता बना लेते हैं और लॉग इन हो जाते हैं तो आप रेडिस टैब पर जाएंगे और एक डेटाबेस बनाएंगे। <पी> 
<पी> 
<पी> अपना डेटाबेस बनाने के बाद, तब तक नीचे स्क्रॉल करें जब तक आपको REST API अनुभाग न मिल जाए और .env का चयन करें बटन. सामग्री को कॉपी करें और इसे किसी सुरक्षित स्थान पर सहेजें। <पी> 
अपस्टैश QStash की स्थापना
<पी> किसी दिए गए अंतराल पर शेड्यूलिंग एंडपॉइंट पर POST अनुरोधों को शेड्यूल करने के लिए, आप QStash का उपयोग करेंगे। QStash टैब पर जाएं और रिक्वेस्ट बिल्डर टैब तक नीचे स्क्रॉल करें। <पी> 
<पी> QStash URL, TOKEN, करंट साइनिंग कुंजी और नेक्स्ट साइनिंग कुंजी को कॉपी करें और उन्हें कहीं सुरक्षित रखें। <पी> 
ट्विटर डेवलपर एप्लिकेशन सेट करना
<पी> Twitter OAuth 2.0 के साथ प्रमाणीकरण स्थापित करने के लिए, आप Twitter डेवलपर पोर्टल में एक एप्लिकेशन बनाने जा रहे हैं। ट्विटर एप्लिकेशन सेट करने के लिए, निम्नलिखित कार्य करें: - ट्विटर का डेवलपर पोर्टल> प्रोजेक्ट खोलें।
- एक प्रोजेक्ट बनाएं।
- अपनी एप्लिकेशन सेटिंग में सेटिंग टैब पर जाएं, और निम्न कार्य करें:
Read and write and Direct message चुनें ऐप अनुमतियाँ में .Web App, Automated App or Bot चुनें ऐप के प्रकार में .http://localhost:3000/api/auth/callback/twitter दर्ज करें कॉलबैक यूआरआई/रीडायक्ट यूआरएल के रूप में .
Keys and tokens पर जाएं अपनी एप्लिकेशन सेटिंग में टैब करें, नीचे स्क्रॉल करें और निम्न कार्य करें: Client ID को कॉपी करें और इसे TWITTER_CLIENT_ID के रूप में किसी सुरक्षित स्थान पर संग्रहीत करें .Client Secret कॉपी करें और इसे TWITTER_CLIENT_SECRET के रूप में किसी सुरक्षित स्थान पर संग्रहीत करें .
<पी> OAuth 2.0 के लिए अपने ट्विटर डेवलपर एप्लिकेशन को सफलतापूर्वक सेट करने के लिए आपको बस इतना ही चाहिए। एक नया Next.js एप्लिकेशन बनाएं
<पी> आइए एक नया Next.js प्रोजेक्ट बनाकर शुरुआत करें। अपना टर्मिनल खोलें और निम्नलिखित कमांड चलाएँ: npx create-next-app@latest schedule-qstash-queue-upstash
<पी> संकेत मिलने पर, चुनें: Yes जब टाइपस्क्रिप्ट का उपयोग करने के लिए कहा जाए।No जब ESLint का उपयोग करने के लिए कहा जाए।Yes जब टेलविंड सीएसएस का उपयोग करने के लिए कहा जाए।No जब src/ का उपयोग करने के लिए कहा जाए निर्देशिका.Yes जब ऐप राउटर का उपयोग करने के लिए कहा जाए।No जब डिफ़ॉल्ट आयात उपनाम (@/*) को अनुकूलित करने के लिए कहा जाए ).
<पी> एक बार यह हो जाने के बाद, प्रोजेक्ट निर्देशिका में जाएँ और निम्नलिखित कमांड निष्पादित करके ऐप को डेवलपमेंट मोड में प्रारंभ करें: cd schedule-qstash-queue-upstash
npm run dev
<पी> ऐप लोकलहोस्ट:3000 पर चलना चाहिए। <पी> अब, एक .env बनाएं अपने प्रोजेक्ट के मूल में फ़ाइल करें। आप उपरोक्त अनुभागों से हमारे द्वारा सहेजे गए आइटम जोड़ने जा रहे हैं। <पी> इसे कुछ इस तरह दिखना चाहिए: # .env
# Obtained from the steps as above
# Twitter Environment Variables
TWITTER_CLIENT_ID="..."
TWITTER_CLIENT_SECRET="..."
TWITTER_AUTH_CALLBACK_URL="http://localhost:3000/api/auth/callback/twitter"
# Upstash Environment Variables
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 घटकों को एकीकृत करना
<पी> उपयोगकर्ता इंटरफ़ेस को शीघ्रता से प्रोटोटाइप करने के लिए, आप shadcn/ui सेट अप करेंगे Next.js के साथ। shadcn/ui खूबसूरती से डिज़ाइन किए गए घटकों का एक संग्रह है जिसे आप कॉपी करके अपने ऐप्स में पेस्ट कर सकते हैं। अपने टर्मिनल विंडो में, shadcn/ui की स्थापना शुरू करने के लिए नीचे दिए गए कमांड को चलाएँ : npx shadcn-ui@latest init
<पी> components.json को कॉन्फ़िगर करने के लिए आपसे कुछ प्रश्न पूछे जाएंगे , निम्नलिखित चुनें: Yes जब टाइपस्क्रिप्ट का उपयोग करने के लिए कहा जाए।Default जब उपयोग की जाने वाली शैली का चयन करने के लिए कहा जाए।Slate जब आधार रंग चुनने के लिए कहा जाए।app/globals.css जब वैश्विक सीएसएस फ़ाइल दर्ज करने के लिए कहा जाए।yes जब रंगों के लिए सीएसएस वेरिएबल का उपयोग करने के लिए कहा जाए।Leave blank जब एक कस्टम टेलविंड उपसर्ग दर्ज करने के लिए कहा जाए।tailwind.config.ts जब टेलविंड.कॉन्फिग.जेएस का स्थान दर्ज करने के लिए कहा जाए।@/components जब घटकों के लिए उपनाम कॉन्फ़िगर करने के लिए कहा जाए।@/lib/utils जब यूटिल्स के लिए उपनाम कॉन्फ़िगर करने के लिए कहा जाए।Yes जब रिएक्ट सर्वर घटकों का उपयोग चुनने के लिए कहा जाए।Yes जब घटकों.json पर कॉन्फ़िगरेशन लिखने के लिए आगे बढ़ने के लिए कहा जाए।
<पी> एक बार यह हो जाने के बाद, आपने एक सीएलआई स्थापित कर लिया है जो हमें आपके नेक्स्ट.जेएस एप्लिकेशन में आसानी से रिएक्ट घटकों को जोड़ने की अनुमति देता है। इसके बाद, अपने टर्मिनल विंडो में, बटन, इनपुट, टेक्स्टएरिया, पॉपओवर, कैलेंडर और टोस्ट तत्व प्राप्त करने के लिए नीचे दिए गए कमांड को चलाएँ: 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
<पी> एक बार यह हो जाने पर, अब आपको एक ui दिखाई देगा app/components के अंदर निर्देशिका निर्देशिका जिसमें 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 के माध्यम से अपने कोड में कहीं से भी टोस्ट सूचनाएं दिखाने में सक्षम बनाता है हुक. अनुसूचित ट्वीट्स को संग्रहीत करने के लिए एक अपस्टैश कतार बनाएं
<पी> इस अनुभाग में, आप सीखेंगे कि निर्धारित ट्वीट जानकारी संग्रहीत करने के लिए अपस्टैश कतार का उपयोग कैसे करें। आप सीखेंगे कि नेक्स्ट.जेएस सर्वर एक्शन का उपयोग करके सर्वर-साइड कोड कैसे बनाया जाता है, जिसे एपीआई रूट के बजाय एक फ़ंक्शन के रूप में लागू किया जाता है। <पी> सबसे पहले, अपने टर्मिनल विंडो में, अपस्टैश एसडीके स्थापित करने के लिए निम्नलिखित को निष्पादित करें: npm install @upstash/qstash @upstash/queue @upstash/redis@1.28.0
<पी> उपरोक्त आदेश निम्नलिखित पैकेज स्थापित करता है: @upstash/qstash :HTTP अनुरोधों पर आपके अपस्टैश QStash इंस्टेंस के साथ इंटरैक्ट करने के लिए SDK।@upstash/queue :एसडीके स्ट्रीम आधारित संदेश कतार को प्रबंधित करने के लिए, अपस्टैश रेडिस द्वारा समर्थित।@upstash/redis :Redis के साथ HTTP अनुरोधों पर इंटरैक्ट करने के लिए SDK, अपस्टैश REST API के शीर्ष पर बनाया गया है।
अपस्टैश रेडिस और अपस्टैश क्यू क्लाइंट को प्रारंभ करें
<पी> अपनी अपस्टैश कतार के साथ इंटरैक्ट करने के लिए ऊपर स्थापित लाइब्रेरी का उपयोग करने के लिए, एक फ़ाइल 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 संकुल द्वारा निर्यात की गई कक्षाएँ।- एक
redis निर्यात करता है अनुरोध प्राधिकरण टोकन के साथ अपस्टैश रेडिस यूआरएल की ओर इशारा करने वाला उदाहरण।
- एक
queue निर्यात करता है उदाहरण ऊपर बनाए गए अपस्टैश रेडिस की ओर इशारा करता है। यह कतार का नाम tweets पर सेट करता है और concurrencyLimit 5 तक, 5 तक समवर्ती संदेश प्रसंस्करण की अनुमति।
<पी> कतार उदाहरण का उपयोग करके, आप एक नेक्स्ट.जेएस सर्वर एक्शन बनाएंगे जो ट्वीट टेक्स्ट और ट्वीट की तारीख को स्वीकार करेगा और ट्वीट ऑब्जेक्ट को भविष्य के प्रसंस्करण के लिए कतार में धकेल देगा। एक फ़ाइल 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 प्रवाह का उपयोग करके उपयोगकर्ता से उनकी ओर से ट्वीट करने के लिए प्राधिकरण प्राप्त करने की ओर बढ़ें। ट्विटर OAuth 2.0 के साथ उपयोगकर्ता प्रमाणीकरण लागू करें
<पी> इस अनुभाग में, आप सीखेंगे कि ट्विटर OAuth क्लाइंट को कॉन्फ़िगर करके और प्रमाणीकरण कार्यों के लिए Twitter SDK द्वारा प्रदान किए गए सहायक कार्यों का उपयोग करके अपने एप्लिकेशन में Twitter OAuth 2.0 प्रमाणीकरण प्रवाह कैसे सेट करें। प्रमाणीकरण प्रवाह में प्राधिकरण और कॉलबैक एंडपॉइंट बनाना शामिल है, जो उपयोगकर्ताओं को एक्सेस प्रदान करने और टोकन प्राप्त करने में सक्षम बनाता है, एक्सेस टोकन को अपस्टैश रेडिस में संग्रहीत किया जाता है। आप अपस्टैश रेडिस में एक वैध एक्सेस टोकन की उपस्थिति को इंगित करने वाले एंडपॉइंट के माध्यम से एक प्रमाणीकरण स्थिति भी बनाएंगे। <पी> सबसे पहले, अपने टर्मिनल विंडो में, ट्विटर OAuth 2.0 प्रमाणीकरण को लागू करने के लिए आवश्यक लाइब्रेरी स्थापित करने के लिए नीचे दिए गए कमांड को चलाएँ: npm install twitter-api-sdk
<पी> उपरोक्त आदेश निम्नलिखित पैकेज स्थापित करता है: twitter-api-sdk :ट्विटर एपीआई के लिए एक टाइपस्क्रिप्ट एसडीके।
एक ट्विटर प्रमाणीकरण क्लाइंट बनाएं
<पी> ट्विटर एपीआई की जटिलताओं में पड़े बिना एक प्राधिकरण यूआरएल उत्पन्न करने में सक्षम होने के लिए, आप ट्विटर एसडीके द्वारा ऑथ क्लाइंट का उपयोग करने जा रहे हैं। एक फ़ाइल twitter.ts बनाएं lib के अंदर निम्नलिखित कोड वाली निर्देशिका: // 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'],
})
<पी> उपरोक्त कोड ट्विटर एसडीके से ऑथ हेल्पर आयात करने से शुरू होता है। फिर, यह ऑथ क्लाइंट को निर्यात करता है जो प्राधिकरण यूआरएल उत्पन्न करने और प्रमाणित उपयोगकर्ता से एक्सेस टोकन का अनुरोध करने के लिए सहायक फ़ंक्शन प्रदान करके ट्विटर एपीआई सिंटैक्स सीखने का समय बचाएगा। ट्विटर प्राधिकरण URL तैयार करें
<पी> OAuth 2.0 प्रवाह में पहला चरण यह है कि उपयोगकर्ता को एक प्राधिकरण URL पर पुनर्निर्देशित किया जाता है। प्राधिकरण URL OAuth 2.0 सर्वर द्वारा प्रदान किया गया एक समापन बिंदु है जहां उपयोगकर्ता को क्लाइंट एप्लिकेशन को अनुमति देकर प्राधिकरण प्रक्रिया शुरू करने के लिए पुनर्निर्देशित किया जाता है। आमतौर पर, उपयोगकर्ता को कई विकल्प (जैसे Continue with Twitter) प्रस्तुत किए जाते हैं , Continue with Google , आदि) साइन इन/अप स्क्रीन पर, और फिर प्लेटफ़ॉर्म (यहां, ट्विटर) द्वारा होस्ट की गई प्राधिकरण स्क्रीन पर ले जाया जाता है। <पी> एक फ़ाइल 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() {
// Obtain an authorization URL from Twitter
const authUrl = authClient.generateAuthURL({
state: 'state',
code_challenge: 'challenge',
code_challenge_method: 'plain',
})
// Return with a 303 as a redirect to the authorization URL
return NextResponse.redirect(authUrl, 303)
}
<पी> उपरोक्त कोड निम्न कार्य करता है: NextResponse आयात करता है सहायक फ़ंक्शन जो वेब रिस्पांस एपीआई का विस्तार करता है।authClient आयात करता है पहले बनाया गया.- एक
GET निर्यात करता है HTTP हैंडलर जो /api/auth/twitter पर आने वाले GET अनुरोधों का जवाब देता है .
-
generateAuthURL का उपयोग करके एक प्राधिकरण URL उत्पन्न करता है ट्विटर एसडीके का सहायक कार्य।
-
redirect का उपयोग करके जेनरेट किए गए प्राधिकरण URL पर रीडायरेक्ट करता है NextResponse की विधि.
<पी> आइए एक एंडपॉइंट बनाने की ओर बढ़ें जो उस अनुरोध का जवाब देता है जब कोई उपयोगकर्ता आपके ट्विटर एप्लिकेशन को एक्सेस के साथ अधिकृत करता है। प्राधिकरण कॉलबैक URL तैयार करें
<पी> OAuth 2.0 प्रवाह में दूसरा चरण प्रमाणीकरण प्लेटफ़ॉर्म से कॉलबैक का जवाब देना है। ट्विटर से आने वाले प्राधिकरण कॉलबैक अनुरोध को संभालने के लिए, आप अपने एप्लिकेशन में एक एंडपॉइंट कॉन्फ़िगर करेंगे जहां उपयोगकर्ता को पहुंच प्रदान करने के बाद रीडायरेक्ट किया जाएगा। यह कॉलबैक यूआरएल प्राधिकरण कोड प्राप्त करने के लिए आवश्यक है, जो आपके एप्लिकेशन को अपस्टैश रेडिस में प्राप्त एक्सेस टोकन को सहेजने में सक्षम बनाता है। उस टोकन के साथ, आप अपने एप्लिकेशन में एपीआई पर ट्वीट्स को स्वचालित कर सकते हैं। <पी> एक फ़ाइल 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) {
// Look for the callback URL to contain code
const code = new URL(request.url).searchParams.get('code')
// If no code query param found, return 403
if (!code) return NextResponse.json({}, { status: 403 })
// If code query param found, create another authorization URL to update internal code_verifier
authClient.generateAuthURL({
state: 'state',
code_challenge: 'challenge',
code_challenge_method: 'plain',
})
// Obtain the access_token to use it for making requests in the future
const {
token: { access_token },
} = await authClient.requestAccessToken(code)
// Save the access_token in Upstash
await redis.set('twitter_oauth_access_token', access_token)
// Return back to homepage
return NextResponse.redirect(new URL('/', request.url), 303)
}
<पी> उपरोक्त कोड निम्न कार्य करता है: redis आयात करता है उदाहरण जो अपस्टैश रेडिस का उपयोग कर रहा है।NextResponse आयात करता है सहायक फ़ंक्शन जो वेब रिस्पांस एपीआई का विस्तार करता है।authClient आयात करता है पहले बनाया गया.- एक
GET निर्यात करता है HTTP हैंडलर जो /api/auth/callback/twitter पर आने वाले GET अनुरोधों का जवाब देता है .
- विध्वंस
code कॉलबैक URL से क्वेरी पैरामीटर।
- एसडीके द्वारा बनाई गई आंतरिक स्थिति को अद्यतन करने के लिए एक हैक के रूप में पहले की तरह एक प्राधिकरण यूआरएल बनाता है।
requestAccessToken पर कॉल करता है एक्सेस प्राप्त करने और टोकन रीफ्रेश करने के लिए ट्विटर एसडीके द्वारा फ़ंक्शन, जो आपको एपीआई पर ट्वीट बनाने की अनुमति देगा।access_token को नष्ट कर देता है token से वस्तु प्राप्त हुई.-
twitter_oauth_access_token से प्राप्त एक्सेस टोकन मान को सहेजता है अपस्टैश रेडिस में कुंजी के रूप में।
- सूचकांक URL (
/) पर पुनर्निर्देशित करता है ) redirect का उपयोग करना NextResponse की विधि.
<पी> अब आपका ट्विटर OAuth 2.0 प्रवाह समाप्त हो गया है। <पी> वैध 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 })
}
<पी> उपरोक्त कोड निम्न कार्य करता है: redis आयात करता है उदाहरण जो अपस्टैश रेडिस का उपयोग कर रहा है।NextResponse आयात करता है सहायक फ़ंक्शन जो वेब रिस्पांस एपीआई का विस्तार करता है।- एक
GET निर्यात करता है HTTP हैंडलर जो /api/auth/twitter/authenticated पर आने वाले GET अनुरोधों का जवाब देता है .
-
twitter_oauth_access_token से संबद्ध मान प्राप्त करता है अपस्टैश रेडिस में कुंजी।
- एक JSON प्रतिक्रिया लौटाता है जिसमें
ok होता है बूलियन यह दर्शाता है कि अपस्टैश रेडिस में वैध एक्सेस टोकन मौजूद है या नहीं।
<पी> आइए आपके द्वारा बनाए गए इन एपीआई एंडपॉइंट्स का उपभोग करने के लिए उपयोगकर्ता इंटरफ़ेस बनाने की ओर बढ़ें। ट्वीट शेड्यूल करने के लिए यूजर इंटरफेस बनाएं
<पी> इस अनुभाग में, आप सीखेंगे कि रिएक्ट हुक useFormState का उपयोग करके प्रतिक्रियाशील फॉर्म स्टेट्स कैसे बनाएं और useFormStatus , और ट्वीट शेड्यूल करने के लिए सर्वर कार्रवाई शुरू करें। <पी> सबसे पहले, आप एक रिएक्ट घटक बनाने जा रहे हैं जो निर्धारित किए जाने वाले ट्वीट की जानकारी वाला एक फॉर्म प्रस्तुत करता है और एक टोस्ट अधिसूचना दिखाता है जो यह दर्शाता है कि ट्वीट की जानकारी है या नहीं। एक फ़ाइल app/form.tsx बनाएं निम्नलिखित कोड के साथ: // File: app/form.tsx
'use client'
// UI Imports
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'
// Form Status hook
import { useFormStatus } from 'react-dom'
import { useEffect, useState } from 'react'
// Define Form Props
export interface FormProps {
ok?: boolean
tweet_date?: string
}
export default function ({ ok, tweet_date }: FormProps) {
const { toast } = useToast()
// Use React's useFormStatus hook to detect form submission state
const { pending } = useFormStatus()
useEffect(() => {
// If the form is not pending
if (!pending) {
// If the server ok-ed the query, reset the form
if (ok) {
const scheduleForm = document.getElementById('schedule_form') as HTMLFormElement
if (scheduleForm) scheduleForm.reset()
// Display that scheduling was succesful
toast({
title: 'Scheduled Tweet',
description: tweet_date,
})
} else {
// Display that scheduling failed
toast({
variant: 'destructive',
title: 'Uh oh! Something went wrong.',
description: 'There was a problem with your request.',
})
}
}
}, [pending])
// Listen to the date picker changes
const [date, setDate] = useState<Date>()
return (
<>
<span className="font-semibold">Tweet Scheduler</span>
{/* Date Picker for Scheduling Tweet on future dates */}
<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>
{/* Text Area for Entering Text of Tweet */}
<Textarea id="tweet_text" name="tweet_text" className="min-h-[300px] w-[280px]" placeholder="Tweet" />
{/* Schedule Button Tweet */}
<Button disabled={pending} className="w-[280px]">
{pending ? 'Scheduling...' : <>Schedule →</>}
</Button>
</>
)
}
<पी> उपरोक्त कोड निम्न कार्य करता है: -
shadcn/ui द्वारा बनाए गए घटकों को आयात करता है सीएलआई पहले आदेश देता है।
- एक रिएक्ट घटक निर्यात करता है जो एक दृश्य रूप से छिपा हुआ
input प्रस्तुत करता है निर्धारित ट्वीट की तारीख का वर्णन करने वाला HTML तत्व।
- घटक एक
textarea भी प्रस्तुत करता है उपयोगकर्ता से ट्वीट के टेक्स्ट को दृश्य रूप से स्वीकार करने के लिए HTML तत्व।
- घटक एक
Button भी प्रस्तुत करता है जो पिछले फॉर्म सबमिशन की स्थिति के आधार पर सशर्त रूप से अक्षम है।
- घटक
useEffect का भी उपयोग करता है यदि सर्वर कार्रवाई सफल रही तो फॉर्म को रीसेट करने के लिए हुक करें। किसी भी तरह, यह अनुरोध की स्थिति को इंगित करने के लिए निचले दाएं कोने पर एक टोस्ट अधिसूचना दिखाता है।
<पी> इसके बाद, आप एक घटक बनाने जा रहे हैं जो उपयोगकर्ता की ट्विटर प्रमाणीकरण स्थिति की स्थिति दिखाता है। एक फ़ाइल 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)
})
}, [])
{
/* Authenticate with 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>
)
}
<पी> उपरोक्त कोड निम्न कार्य करता है: useEffect आयात करता है और useState उपयोगकर्ता प्रमाणीकरण की स्थिति प्राप्त करने के लिए रिएक्ट द्वारा हुक का उपयोग किया जाता है।- एक रिएक्ट घटक निर्यात करता है जो
Button को प्रस्तुत करता है घटक (shadcn/ui द्वारा)। ) अलग-अलग राज्यों में, प्रत्येक को उपयोगकर्ता की ट्विटर प्रमाणीकरण स्थिति के साथ जोड़ना।
<पी> उपयोगकर्ताओं के लिए एक फॉर्म प्रस्तुत करना जो उन्हें इंडेक्स रूट खोलते ही बातचीत करने और ट्वीट शेड्यूल करने की अनुमति देता है (यानी / ), एक फ़ाइल बनाएं app/page.tsx निम्नलिखित कोड के साथ: // File: app/page.tsx
'use client'
// Form with Pending Status
import Form from './form'
// Form with access to the server returned data
import { useFormState } from 'react-dom'
// Scheduling Next.js Action
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 पहले बनाए गए घटक.
useFormState आयात करता है state का उपयोग करके Next.js सर्वर कार्रवाई द्वारा लौटाए गए डेटा को संसाधित करने में सक्षम होने के लिए रिएक्ट द्वारा हुक करें परिवर्तनीय, और फॉर्म सबमिशन के माध्यम से सर्वर कार्रवाई के आह्वान की अनुमति देता है।schedule आयात करता है सर्वर कार्रवाई पहले बनाई गई.- एक रिएक्ट घटक को निर्यात करता है जिसमें
<form> होता है schedule_form वाला घटक आईडी और formAction को लागू करने के लिए सेट है जब उपयोगकर्ता द्वारा फॉर्म सबमिट किया जाता है।
अपस्टैश QStash का उपयोग करके ट्वीट शेड्यूल करें
<पी> उपयोगकर्ता की ओर से ट्वीट शेड्यूल करने के लिए, आप एक एंडपॉइंट बनाएंगे जो अपस्टैश कतार में संग्रहीत ट्वीट डेटा का उपभोग करेगा और फिर ट्वीट करने के लिए ट्विटर एपीआई पर पोस्ट करेगा। एक फ़ाइल 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)
<पी> उपरोक्त कोड निम्न कार्य करता है: redis आयात करता है और queue उदाहरण जो क्रमशः अपस्टैश रेडिस और अपस्टैश क्यू का उपयोग कर रहे हैं।verifySignatureAppRouter आयात करता है अपस्टैश द्वारा फ़ंक्शन जो अनुरोध हस्ताक्षर को सत्यापित करेगा यह सुनिश्चित करने के लिए कि अनुरोध केवल QStash से है।- एक फ़ंक्शन बनाता है
tweet जो प्रमाणित उपयोगकर्ता की ओर से ट्वीट करने के लिए एक ट्वीट टेक्स्ट और एक्सेस टोकन स्वीकार करता है।
- एक
POST बनाता है HTTP हैंडलर जो /api/schedule पर आने वाले POST अनुरोधों का जवाब देता है . यह अपस्टैश कतार से 4 संदेश लाता है और tweet को आमंत्रित करता है उपयोगकर्ता की ओर से ट्वीट करने का कार्य।
<पी> अपस्टैश QStash का उपयोग करके, आप ट्वीट करने की प्रक्रिया को शेड्यूल कर सकते हैं। मान लीजिए कि आप इसे इस तरह स्वचालित करना चाहते हैं कि हर दिन आधी रात को प्रक्रिया अपने आप शुरू हो जाए और ट्वीट चले जाएं। ऐसा करने के लिए, आप पहले बनाए गए समापन बिंदु का उपयोग करेंगे:/api/schedule QStash में. <पी> 
<पी> अपस्टैश कंसोल में QStash टैब पर जाएं, रिक्वेस्ट बिल्डर टैब तक नीचे स्क्रॉल करें और निम्नलिखित कार्य करें: -
Endpoint चुनें टैब.
URL दर्ज करें आपके /api/schedule के संपूर्ण URL के रूप में समापन बिंदु.Type चुनें Scheduled के रूप में .-
Every चुनें every day at midnight के रूप में .
Schedule पर क्लिक करें .
<पी> उपरोक्त चरणों के साथ, आपने एक नौकरी बनाई है जिसे /api/schedule पर POST किया गया है हर दिन आधी रात को. <पी> वह बहुत कुछ सीखने वाला था! अब आपका काम पूरा हो गया है ✨ वर्सेल में तैनात करें
<पी> रिपॉजिटरी, अब वर्सेल में तैनात करने के लिए तैयार है। तैनात करने के लिए निम्नलिखित चरणों का उपयोग करें: - अपने ऐप के कोड वाली GitHub रिपॉजिटरी बनाकर शुरुआत करें।
- फिर, वर्सेल डैशबोर्ड पर नेविगेट करें और एक नया प्रोजेक्ट बनाएं .
- नए प्रोजेक्ट को आपके द्वारा अभी बनाए गए GitHub रिपॉजिटरी से लिंक करें।
- सेटिंग्स में ,
Environment Variables को अपडेट करें आपके स्थानीय .env से मिलान करने के लिए फ़ाइल.
Deploy पर क्लिक करें .
अधिक जानकारी
<पी> अधिक विस्तृत जानकारी के लिए, इस पोस्ट में उद्धृत संदर्भ देखें। - गिटहब रिपॉजिटरी
- ट्विटर OAuth 2.0 फ़्लो
- ट्विटर ऐप टोकन जेनरेट करना
- रिएक्ट फॉर्म हुक
- Next.js सर्वर क्रियाएँ
निष्कर्ष
<पी> इस गाइड में, आपने सीखा कि अपस्टैश के शक्तिशाली रेडिस डेटाबेस और क्यूस्टैश कतार का लाभ उठाते हुए एक मजबूत ट्वीट शेड्यूलर कैसे बनाया जाए। अपस्टैश की स्केलेबिलिटी ट्वीट्स के विश्वसनीय भंडारण और शेड्यूलिंग को सुनिश्चित करती है, जो वर्सेल पर निर्बाध तैनाती के साथ मिलकर एक पूरी तरह से स्वचालित प्रणाली बनाती है।
