আপস্ট্যাশ সহ একটি টুইট শিডিউলার তৈরি করুন:একটি ধাপে ধাপে নির্দেশিকা৷

এই ধাপে ধাপে নির্দেশিকাতে, আমি কিভাবে Upstash QStash, Upstash Redis, Next.js সার্ভার অ্যাকশন এবং Vercel ব্যবহার করে একটি টুইট শিডিউলার তৈরি করেছি সে বিষয়ে কথা বলি। টুইটার পোস্টের সময়সূচী আপনাকে সামঞ্জস্যপূর্ণ উপস্থিতি বজায় রাখতে, সর্বোত্তম সময়ে আপনার শ্রোতাদের সাথে যুক্ত হতে এবং দক্ষতার সাথে আপনার বিষয়বস্তু কৌশল পরিচালনা করতে সহায়তা করে।

পূর্বশর্ত

আপনার নিম্নলিখিতগুলির প্রয়োজন হবে:

• Node.js 18 বা তার পরে
• একটি Upstash অ্যাকাউন্ট
• একটি টুইটার অ্যাকাউন্ট
• একটি Vercel অ্যাকাউন্ট

টেক স্ট্যাক

এই গাইডে নিম্নলিখিত প্রযুক্তি ব্যবহার করা হয়েছে:

পদক্ষেপ

এই নির্দেশিকাটি সম্পূর্ণ করতে এবং আপনার নিজের টুইট শিডিয়ুলার স্থাপন করতে, আপনাকে এই পদক্ষেপগুলি অনুসরণ করতে হবে:

• Upstash Redis সেট আপ করা হচ্ছে
• Upstash QStash সেট আপ করা হচ্ছে
• টুইটার ডেভেলপার অ্যাপ্লিকেশন সেট আপ করা হচ্ছে
• একটি নতুন Next.js অ্যাপ্লিকেশন তৈরি করুন
• Twitter OAuth 2.0 এর সাথে ব্যবহারকারী প্রমাণীকরণ প্রয়োগ করুন
• টুইট নির্ধারণ করতে ইউজার ইন্টারফেস তৈরি করুন
• Upstash QStash ব্যবহার করে টুইটের সময়সূচী করুন
• ভার্সেলে স্থাপন করুন

Upstash Redis সেট আপ করা হচ্ছে

একবার আপনি একটি Upstash অ্যাকাউন্ট তৈরি করেছেন এবং লগ ইন করলে আপনি Redis ট্যাবে যান এবং একটি ডাটাবেস তৈরি করতে যাচ্ছেন৷

আপনি আপনার ডাটাবেস তৈরি করার পরে, REST API বিভাগটি খুঁজে না পাওয়া পর্যন্ত নিচে স্ক্রোল করুন এবং .env নির্বাচন করুন বোতাম বিষয়বস্তু অনুলিপি করুন এবং এটি নিরাপদ কোথাও সংরক্ষণ করুন৷

Upstash QStash সেট আপ করা হচ্ছে

একটি নির্দিষ্ট ব্যবধানে শিডিউলিং এন্ডপয়েন্টে POST অনুরোধের সময় নির্ধারণ করতে, আপনি QStash ব্যবহার করবেন। QStash ট্যাবে যান এবং Request Builder ট্যাবে নিচে স্ক্রোল করুন।

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 লিখুন কলব্যাক URI / Rediect URL হিসাবে .
• 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 যখন TypeScript ব্যবহার করতে বলা হয়।
• No যখন ESLint ব্যবহার করতে বলা হয়।
• Yes যখন Tailwind CSS ব্যবহার করার জন্য অনুরোধ করা হয়।
• 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 যখন TypeScript ব্যবহার করতে বলা হয়।
• Default ব্যবহার করার জন্য শৈলী নির্বাচন করার জন্য অনুরোধ করা হলে।
• Slate যখন বেস কালার বেছে নিতে বলা হয়।
• app/globals.css যখন গ্লোবাল CSS ফাইলে প্রবেশ করতে বলা হয়।
• yes যখন রঙের জন্য CSS ভেরিয়েবল ব্যবহার করতে বলা হয়।
• Leave blank যখন একটি কাস্টম টেইলওয়াইন্ড প্রিফিক্স লিখতে বলা হয়।
• tailwind.config.ts যখন tailwind.config.js এর অবস্থান লিখতে বলা হয়।
• @/components যখন উপাদানগুলির জন্য উপনাম কনফিগার করার জন্য অনুরোধ করা হয়।
• @/lib/utils যখন ইউটিলসের উপনাম কনফিগার করার জন্য অনুরোধ করা হয়।
• Yes যখন রিঅ্যাক্ট সার্ভার কম্পোনেন্টের ব্যবহার বেছে নিতে বলা হয়।
• Yes যখন components.json এ কনফিগারেশন লেখার সাথে এগিয়ে যেতে বলা হয়।

একবার এটি হয়ে গেলে, আপনি একটি CLI সেট আপ করেছেন যা আমাদেরকে আপনার Next.js অ্যাপ্লিকেশনে সহজেই প্রতিক্রিয়া উপাদান যুক্ত করতে দেয়। এরপরে, আপনার টার্মিনাল উইন্ডোতে, বোতাম, ইনপুট, টেক্সটেরিয়া, পপওভার, ক্যালেন্ডার এবং টোস্ট উপাদানগুলি পেতে নীচের কমান্ডটি চালান:

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 এর মাধ্যমে আপনার কোডের যেকোনো জায়গা থেকে টোস্ট বিজ্ঞপ্তিগুলি দেখাতে সক্ষম করে হুক।

নির্ধারিত টুইটগুলি সংরক্ষণ করার জন্য একটি আপস্ট্যাশ সারি তৈরি করুন

এই বিভাগে, আপনি শিখবেন কিভাবে নির্ধারিত টুইটের তথ্য সংরক্ষণ করতে Upstash সারি ব্যবহার করতে হয়। আপনি শিখবেন কিভাবে সার্ভার-সাইড কোড তৈরি করতে হয় যা একটি API রুটের পরিবর্তে একটি ফাংশন হিসাবে ব্যবহার করা হয়, Next.js সার্ভার অ্যাকশন ব্যবহার করে।

প্রথমে, আপনার টার্মিনাল উইন্ডোতে, Upstash SDK গুলি ইনস্টল করতে নিম্নলিখিতটি সম্পাদন করুন:

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

উপরের কমান্ডটি নিম্নলিখিত প্যাকেজগুলি ইনস্টল করে:

• @upstash/qstash :HTTP অনুরোধে আপনার Upstash QStash উদাহরণের সাথে ইন্টারঅ্যাক্ট করতে SDK।
• @upstash/queue :SDK স্ট্রিম ভিত্তিক বার্তা সারি পরিচালনা করতে, Upstash Redis দ্বারা সমর্থিত।
• @upstash/redis :Upstash REST API-এর উপরে তৈরি Redis-এর সাথে HTTP অনুরোধে ইন্টারঅ্যাক্ট করার জন্য SDK।

Upstash Redis এবং Upstash সারি ক্লায়েন্ট শুরু করুন

আপনার Upstash সারির সাথে ইন্টারঅ্যাক্ট করতে উপরে ইনস্টল করা লাইব্রেরিগুলি ব্যবহার করতে, একটি ফাইল তৈরি করুন 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 রপ্তানি করে উদাহরণ উপরে তৈরি করা Upstash Redis নির্দেশ করে। এটি সারিটির নাম 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 API-এর জটিলতার মধ্যে না পড়ে একটি অনুমোদন URL তৈরি করতে সক্ষম হওয়ার জন্য, আপনি Twitter SDK দ্বারা auth ক্লায়েন্ট ব্যবহার করতে যাচ্ছেন। 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'],
})

উপরের কোডটি Twitter SDK থেকে অথ হেল্পার ইম্পোর্ট করার মাধ্যমে শুরু হয়। তারপরে, এটি প্রমাণীকরণ ক্লায়েন্টকে রপ্তানি করে যা অনুমোদনের URL তৈরি করতে সহায়ক ফাংশন প্রদান করে এবং একটি প্রমাণীকৃত ব্যবহারকারীর কাছ থেকে অ্যাক্সেস টোকেন অনুরোধ করে Twitter API সিনট্যাক্স শেখার সময় বাঁচাবে৷

টুইটার অনুমোদন 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 আমদানি করে হেল্পার ফাংশন যা ওয়েব রেসপন্স API প্রসারিত করে।
• authClient আমদানি করে আগে তৈরি।
• একটি GET রপ্তানি করে HTTP হ্যান্ডলার যা /api/auth/twitter-এ আগত GET অনুরোধে সাড়া দেয় .
• generateAuthURL ব্যবহার করে একটি অনুমোদন URL তৈরি করে Twitter SDK-এর সহায়ক ফাংশন।
• redirect ব্যবহার করে জেনারেট করা অনুমোদন URL-এ পুনঃনির্দেশ করে নেক্সট রেসপন্সের পদ্ধতি।

আসুন একটি এন্ডপয়েন্ট তৈরি করার দিকে এগিয়ে যাই যা অনুরোধে সাড়া দেয় যখন কোনো ব্যবহারকারী আপনার টুইটার অ্যাপ্লিকেশনটিকে অ্যাক্সেসের অনুমতি দেয়।

অনুমোদন কলব্যাক URL প্রস্তুত করুন

OAuth 2.0 প্রবাহের দ্বিতীয় ধাপ হল প্রমাণীকরণ প্ল্যাটফর্ম থেকে কলব্যাকের প্রতিক্রিয়া। টুইটার থেকে ইনকামিং অনুমোদন কলব্যাক অনুরোধ পরিচালনা করতে, আপনি আপনার অ্যাপ্লিকেশনে একটি এন্ডপয়েন্ট কনফিগার করবেন যেখানে অ্যাক্সেস দেওয়ার পরে ব্যবহারকারীকে পুনঃনির্দেশিত করা হবে। এই কলব্যাক ইউআরএলটি অনুমোদন কোড পাওয়ার জন্য অপরিহার্য, আপনার অ্যাপ্লিকেশনটিকে আপস্ট্যাশ রেডিসে প্রাপ্ত অ্যাক্সেস টোকেন সংরক্ষণ করতে সক্ষম করে। সেই টোকেন দিয়ে, আপনি আপনার অ্যাপ্লিকেশনে একটি 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) {
 // 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 আমদানি করে উদাহরণ যা Upstash Redis ব্যবহার করছে।
• NextResponse আমদানি করে হেল্পার ফাংশন যা ওয়েব রেসপন্স API প্রসারিত করে।
• authClient আমদানি করে আগে তৈরি।
• একটি GET রপ্তানি করে HTTP হ্যান্ডলার যা /api/auth/callback/twitter-এ আগত GET অনুরোধে সাড়া দেয় .
• ডিস্ট্রাকচার code কলব্যাক ইউআরএল থেকে ক্যোয়ারী প্যারামিটার।
• SDK দ্বারা তৈরি অভ্যন্তরীণ অবস্থা আপডেট করার জন্য হ্যাক হিসাবে আগের মতো একটি অনুমোদন URL তৈরি করে৷
• requestAccessToken কল করে অ্যাক্সেস এবং রিফ্রেশ টোকেনগুলি পেতে Twitter SDK দ্বারা ফাংশন, যা আপনাকে একটি API এর মাধ্যমে টুইট তৈরি করতে দেয়৷
• access_token ধ্বংস করে token থেকে বস্তু প্রাপ্ত।
• twitter_oauth_access_token দিয়ে প্রাপ্ত অ্যাক্সেস টোকেন মান সংরক্ষণ করে Upstash Redis-এ কী হিসাবে।
• সূচী URL এ পুনঃনির্দেশ করে (/ ) redirect ব্যবহার করে নেক্সট রেসপন্সের পদ্ধতি।

আপনি এখন টুইটার OAuth 2.0 ফ্লো সম্পন্ন করেছেন৷

একটি বৈধ twitter_oauth_access_token থাকা Upstash Redis উদাহরণে প্রমাণীকরণ প্রবাহ অবস্থার একটি সূচক। ব্যবহারকারী ইন্টারফেসে একই যোগাযোগ করতে, একটি ফাইল তৈরি করুন 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 আমদানি করে উদাহরণ যা Upstash Redis ব্যবহার করছে।
• NextResponse আমদানি করে হেল্পার ফাংশন যা ওয়েব রেসপন্স API প্রসারিত করে।
• একটি GET রপ্তানি করে HTTP হ্যান্ডলার যা /api/auth/twitter/authenticated-এ আগত GET অনুরোধে সাড়া দেয় .
• twitter_oauth_access_token এর সাথে যুক্ত মান আনে Upstash Redis-এ কী।
• একটি ok ধারণকারী JSON প্রতিক্রিয়া প্রদান করে Upstash Redis-এ একটি বৈধ অ্যাক্সেস টোকেন আছে কিনা তা নির্দেশ করে বুলিয়ান।

আপনার তৈরি করা এই API এন্ডপয়েন্টগুলি ব্যবহার করার জন্য ইউজার ইন্টারফেস তৈরি করা যাক৷

টুইট নির্ধারণ করতে ইউজার ইন্টারফেস তৈরি করুন

এই বিভাগে, আপনি শিখবেন কীভাবে প্রতিক্রিয়াশীল ফর্ম স্টেট তৈরি করতে হয় প্রতিক্রিয়া হুক 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 &rarr;</>}
 </Button>
 </>
 )
}

উপরের কোডটি নিম্নলিখিতগুলি করে:

• shadcn/ui দ্বারা তৈরি উপাদান আমদানি করে CLI আগে কমান্ড দেয়।
• একটি প্রতিক্রিয়া উপাদান রপ্তানি করে যা একটি দৃশ্যমান লুকানো 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 সহ উপাদান id এবং formAction চালু করতে সেট করা আছে যখন ফর্মটি ব্যবহারকারী দ্বারা জমা দেওয়া হয়।

Upstash QStash ব্যবহার করে টুইট নির্ধারণ করুন

ব্যবহারকারীর পক্ষ থেকে টুইটের সময়সূচী করতে, আপনি একটি এন্ডপয়েন্ট তৈরি করবেন যা আপস্ট্যাশ সারিতে সংরক্ষিত টুইট ডেটা ব্যবহার করবে এবং তারপর টুইটগুলি সম্পাদন করতে Twitter API-এ পোস্ট করবে। একটি ফাইল তৈরি করুন 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 দৃষ্টান্ত যা যথাক্রমে Upstash Redis এবং Upstash সারি ব্যবহার করছে।
• verifySignatureAppRouter আমদানি করে Upstash দ্বারা ফাংশন যা অনুরোধ স্বাক্ষর যাচাই করবে তা নিশ্চিত করতে যে অনুরোধটি শুধুমাত্র QStash থেকে এসেছে।
• একটি ফাংশন তৈরি করে tweet যেটি প্রমাণীকৃত ব্যবহারকারীর পক্ষে টুইটগুলি সম্পাদন করার জন্য একটি টুইট পাঠ্য এবং অ্যাক্সেস টোকেন গ্রহণ করে৷
• একটি POST তৈরি করে HTTP হ্যান্ডলার যা /api/schedule এ ইনকামিং POST অনুরোধে সাড়া দেয় . এটি আপস্ট্যাশ কিউ থেকে 4টি বার্তা নিয়ে আসে এবং tweetকে আহ্বান করে ব্যবহারকারীর পক্ষে টুইট করার ফাংশন।

Upstash QStash ব্যবহার করে, আপনি টুইট করার প্রক্রিয়া নির্ধারণ করতে পারেন। বলুন আপনি এটিকে এমনভাবে স্বয়ংক্রিয় করতে চান যাতে প্রতিদিন মধ্যরাতে, প্রক্রিয়াটি নিজেই শুরু হয় এবং টুইটগুলি বেরিয়ে যায়। এটি করতে, আপনি আগে তৈরি শেষ পয়েন্ট ব্যবহার করবেন:/api/schedule QStash-এ।

Upstash কনসোলে QStash ট্যাবে যান, Request Builder ট্যাবে নিচে স্ক্রোল করুন এবং নিম্নলিখিতগুলি করুন:

• Endpoint নির্বাচন করুন ট্যাব।
• URL লিখুন আপনার /api/schedule এর পরম URL হিসাবে শেষবিন্দু।
• Type নির্বাচন করুন Scheduled হিসাবে .
• Every নির্বাচন করুন every day at midnight হিসাবে .
• Schedule এ ক্লিক করুন .

উপরের ধাপগুলি দিয়ে, আপনি একটি কাজ তৈরি করেছেন যেটি /api/schedule-এ পোস্ট করা হয়েছে প্রতিদিন মধ্যরাতে।

যে অনেক শেখার ছিল! আপনি এখন সব সম্পন্ন করেছেন ✨

Vercel এ স্থাপন করুন

সংগ্রহস্থল, এখন Vercel এ স্থাপন করার জন্য প্রস্তুত। স্থাপন করতে নিম্নলিখিত পদক্ষেপগুলি ব্যবহার করুন:

• আপনার অ্যাপের কোড সহ একটি GitHub সংগ্রহস্থল তৈরি করে শুরু করুন।
• তারপর, Vercel ড্যাশবোর্ডে নেভিগেট করুন এবং একটি নতুন প্রকল্প তৈরি করুন .
• আপনার তৈরি করা GitHub সংগ্রহস্থলের সাথে নতুন প্রজেক্ট লিঙ্ক করুন।
• সেটিংস-এ , Environment Variables আপডেট করুন  আপনার স্থানীয় .env এর সাথে মেলে  ফাইল।
• Deploy এ ক্লিক করুন .

আরো তথ্য

আরো বিস্তারিত অন্তর্দৃষ্টির জন্য, এই পোস্টে উদ্ধৃত রেফারেন্সগুলি অন্বেষণ করুন৷

• GitHub সংগ্রহস্থল
• Twitter OAuth 2.0 ফ্লো
• টুইটার অ্যাপ টোকেন তৈরি করা হচ্ছে
• প্রতিক্রিয়া ফর্ম হুক
• Next.js সার্ভার অ্যাকশন

উপসংহার

এই নির্দেশিকাটিতে, আপনি শিখেছেন কিভাবে Upstash এর শক্তিশালী Redis ডাটাবেস এবং QStash সারি ব্যবহার করে একটি শক্তিশালী টুইট শিডিউলার তৈরি করতে হয়। Upstash-এর মাপযোগ্যতা একটি সম্পূর্ণ স্বয়ংক্রিয় সিস্টেম তৈরি করে Vercel-এ নির্বিঘ্ন স্থাপনার সাথে মিলিত টুইটগুলির নির্ভরযোগ্য স্টোরেজ এবং সময়সূচী নিশ্চিত করে৷