কম্পিউটার টিউটোরিয়াল

Upstash দিয়ে টুইট শিডিউলার তৈরি করুন: ধাপে ধাপে গাইড

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

পূর্বশর্ত

আপনাকে নিম্নলিখিত مواردের প্রয়োজন হবে:

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

টেক স্ট্যাক

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

প্রযুক্তিবিবরণ
Upstashসার্ভারলেস ডেটাবেস প্ল্যাটফর্ম। আমরা টুইট সংরক্ষণের জন্য Upstash Queue এবং নির্দিষ্ট ফ্রিকোয়েন্সিতে শিডিউল API-তে POST করার জন্য QStash ব্যবহার করছি।
Next.jsওয়েবের জন্য React ফ্রেমওয়ার্ক। দ্রুত UI প্রোটোটাইপিং-এর জন্য shadcn/ui ব্যবহার করা হয়েছে।
TailwindCSSকাস্টম ডিজাইন তৈরির জন্য CSS ফ্রেমওয়ার্ক।
Vercelওয়েব অ্যাপ্লিকেশন স্থাপন ও স্কেল করার জন্য ক্লাউড প্ল্যাটফর্ম।
Prettierসঙ্গত কোড স্টাইলের জন্য মতামতপ্রধান কোড ফরম্যাটার।

ধাপসমূহ

আপনার নিজস্ব টুইট শিডিউলার স্থাপন করতে নিম্নলিখিত ধাপগুলো অনুসরণ করুন:

  • Upstash Redis সেটআপ করুন
  • Upstash QStash সেটআপ করুন
  • Twitter Developer Application সেটআপ করুন
  • নতুন Next.js অ্যাপ্লিকেশন তৈরি করুন
  • Twitter OAuth 2.0 দিয়ে ব্যবহারকারী প্রমাণীকরণ বাস্তবায়ন করুন
  • টুইট শিডিউল করার জন্য ব্যবহারকারী ইন্টারফেস তৈরি করুন
  • Upstash QStash ব্যবহার করে টুইট শিডিউল করুন
  • Vercel-এ স্থাপন করুন

Upstash Redis সেটআপ করা

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

Upstash দিয়ে টুইট শিডিউলার তৈরি করুন: ধাপে ধাপে গাইড

Upstash দিয়ে টুইট শিডিউলার তৈরি করুন: ধাপে ধাপে গাইড

ডেটাবেস তৈরি হলে নিচে স্ক্রোল করে REST API বিভাগ খুঁজে বের করুন এবং .env বাটনে ক্লিক করুন। বিষয়বস্তু কপি করে নিরাপদ জায়গায় সংরক্ষণ করুন।

Upstash দিয়ে টুইট শিডিউলার তৈরি করুন: ধাপে ধাপে গাইড

Upstash QStash সেটআপ করা

শিডিউলিং এন্ডপয়েন্টে নির্দিষ্ট अन्तরালে POST অনুরোধ পাঠানোর জন্য QStash ব্যবহার করুন। QStash ট্যাবে যান এবং Request Builder ট্যাবে স্ক্রোল করুন।

Upstash দিয়ে টুইট শিডিউলার তৈরি করুন: ধাপে ধাপে গাইড

QStash URL, TOKEN, Current Signing Key এবং Next Signing Key কপি করে নিরাপদ জায়গায় রাখুন।

Upstash দিয়ে টুইট শিডিউলার তৈরি করুন: ধাপে ধাপে গাইড

Twitter Developer Application সেটআপ করা

Twitter OAuth 2.0 প্রমাণীকরণ সেটআপ করতে Twitter Developer Portal-এ একটি অ্যাপ্লিকেশন তৈরি করুন। নিচের ধাপগুলো অনুসরণ করুন:

  • Twitter Developer Portal > Projects খুলুন।
  • একটি প্রজেক্ট তৈরি করুন।
  • অ্যাপ্লিকেশন সেটিংসের Settings ট্যাবে যান এবং নিম্নলিখিত কাজ করুন:
    • App permissions-এ Read and write and Direct message নির্বাচন করুন।
    • Type of App-এ Web App, Automated App or Bot নির্বাচন করুন।
    • Callback URI / Redirect URL-এ https://localhost:3000/api/auth/callback/twitter লিখুন।
  • Keys and tokens ট্যাবে যান, নিচে স্ক্রোল করুন এবং:
    • Client ID কপি করে TWITTER_CLIENT_ID হিসেবে সংরক্ষণ করুন।
    • Client Secret কপি করে TWITTER_CLIENT_SECRET হিসেবে সংরক্ষণ করুন।

এতটুকুই Twitter Developer Application OAuth 2.0-এর জন্য সফলভাবে সেটআপ করার জন্য প্রয়োজন।

নতুন 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 Environment Variables TWITTER_CLIENT_ID="..." TWITTER_CLIENT_SECRET="..." TWITTER_AUTH_CALLBACK_URL="https://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 কম্পোনেন্ট ইন্টিগ্রেশন

দ্রুত UI প্রোটোটাইপের জন্য shadcn/ui Next.js-এ সেটআপ করুন। টার্মিনালে:

npx shadcn-ui@latest init

প্রশ্নের উত্তর দিন:

  • TypeScript: Yes
  • Style: Default
  • Base color: Slate
  • Global CSS file: app/globals.css
  • CSS variables: yes
  • Tailwind prefix: খালি রেখে দিন
  • tailwind.config.js location: tailwind.config.ts
  • Components alias: @/components
  • Utils alias: @/lib/utils
  • React Server Components: Yes
  • Configuration write: Yes

এখন প্রয়োজনীয় কম্পোনেন্টগুলো যোগ করুন:

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 ডিরেক্টরিতে কম্পোনেন্ট ফাইলগুলো তৈরি হবে।

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 কম্পোনেন্ট ইমপোর্ট করা হয়েছে যাতে টোস্ট নোটিফিকেশন দেখানো যায়।

শিডিউলড টুইট সংরক্ষণের জন্য Upstash Queue তৈরি করা

এই ধাপে Upstash Queue ব্যবহার করে শিডিউলড টুইটের তথ্য সংরক্ষণ করা শিখব। Next.js Server Actions ব্যবহার করে সার্ভার-সাইড কোড ফাংশন হিসেবে আহ্বান করা হয়।

প্রথমে টার্মিনালে নিচের কমান্ড চালিয়ে Upstash SDK ইনস্টল করুন:

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

ইনস্টল হয়েছে:

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

Upstash Redis এবং 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 ইন্সট্যান্স এক্সপোর্ট করে।
  • কিউ নাম tweets এবং concurrencyLimit: 5 সেট করে queue ইন্সট্যান্স এক্সপোর্ট করে।

এই কিউ ইন্সট্যান্স ব্যবহার করে একটি Next.js Server Action তৈরি করুন যা টুইটের টেক্সট এবং তারিখ গ্রহণ করে টুইট অবজেক্ট কিউতে পুশ করবে। 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 } } }

কোডটি:

  • কিউ ইন্সট্যান্স ইমপোর্ট করে।
  • schedule নামে একটি সার্ভার অ্যাকশন এক্সপোর্ট করে যা ফর্ম সাবমিশন গ্রহণ করে।
  • বর্তমান সময় এবং শিডিউল করা সময়ের পার্থক্য হিসাব করে।
  • টুইট অবজেক্ট কিউতে ডিলে সেট করে পুশ করে।

এভাবে টুইট শুধু তখন কিউতে যোগ হয় যখন সেটি শিডিউল করা থাকে, যা কিউর স্টেট মেইনটেইন করা সহজ করে তোলে।

এখন OAuth 2.0 PKCE ফ্লো ব্যবহার করে ব্যবহারকারীর অনুমতি নিয়ে তাদের পক্ষে টুইট করার ধাপে যাই।

Twitter OAuth 2.0 দিয়ে ব্যবহারকারী প্রমাণীকরণ বাস্তবায়ন করা

এই ধাপে Twitter OAuth 2.0 প্রমাণীকরণ ফ্লো সেটআপ করা শিখব। Twitter OAuth ক্লায়েন্ট কনফিগার করুন এবং Twitter SDK-এর হেল্পার ফাংশন ব্যবহার করুন। প্রমাণীকরণ ফ্লোতে অথোরাইজেশন এবং কলব্যাক এন্ডপয়েন্ট তৈরি করা হয়, ব্যবহারকারী অ্যাক্সেস দিয়ে টোকেন পায়, যা Upstash Redis-এ সংরক্ষিত হয়। একটি এন্ডপয়েন্টের মাধ্যমে প্রমাণীকরণ স্ট্যাটাস চেক করা যায়।

প্রথমে Twitter OAuth 2.0 লাইব্রেরি ইনস্টল করুন:

npm install twitter-api-sdk

twitter-api-sdk: Twitter API-এর জন্য TypeScript SDK।

Twitter প্রমাণীকরণ ক্লায়েন্ট তৈরি করা

Twitter SDK-এর auth ক্লায়েন্ট ব্যবহার করে অথোরাইজেশন URL জেনারেট করুন। 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 হেল্পার ইমপোর্ট করে এবং authClient এক্সপোর্ট করে যা অথোরাইজেশন URL জেনারেট এবং অ্যাক্সেস টোকেন রিকোয়েস্ট করতে সাহায্য করে।

Twitter অথোরাইজেশন URL প্রস্তুত করা

OAuth 2.0 ফ্লোর প্রথম ধাপ: ব্যবহারকারীকে অথোরাইজেশন URL-এ রিডাইরেক্ট করা হয়। 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() { const authUrl = authClient.generateAuthURL({ state: 'state', code_challenge: 'challenge', code_challenge_method: 'plain', }) return NextResponse.redirect(authUrl, 303) }

কোডটি:

  • NextResponse ইমপোর্ট করে।
  • authClient ইমপোর্ট করে।
  • /api/auth/twitter-এ GET রিকোয়েস্ট হ্যান্ডেল করে।
  • Twitter SDK-এর generateAuthURL দিয়ে URL জেনারেট করে।
  • জেনারেট করা URL-এ 303 রিডাইরেক্ট করে।

অথোরাইজেশন কলব্যাক URL প্রস্তুত করা

দ্বিতীয় ধাপ: Twitter থেকে কলব্যাক হ্যান্ডেল করা। 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) { const code = new URL(request.url).searchParams.get('code') if (!code) return NextResponse.json({}, { status: 403 }) authClient.generateAuthURL({ state: 'state', code_challenge: 'challenge', code_challenge_method: 'plain', }) const { token: { access_token }, } = await authClient.requestAccessToken(code) await redis.set('twitter_oauth_access_token', access_token) return NextResponse.redirect(new URL('/', request.url), 303) }

কোডটি:

  • Redis, NextResponse, authClient ইমপোর্ট করে।
  • /api/auth/callback/twitter-এ GET হ্যান্ডেল করে।
  • URL থেকে code কোয়েরি প্যারামিটার নেয়।
  • SDK-এর অভ্যন্তরীণ স্টেট আপডেট করতে অথোরাইজেশন URL আবার জেনারেট করে।
  • requestAccessToken দিয়ে অ্যাক্সেস এবং রিফ্রেশ টোকেন পায়।
  • অ্যাক্সেস টোকেন Upstash Redis-এ twitter_oauth_access_token কীয়ে সেভ করে।
  • হোম পেজে (/) রিডাইরেক্ট করে।

Twitter OAuth 2.0 ফ্লো সম্পন্ন।

Upstash Redis-এ বৈধ twitter_oauth_access_token থাকা প্রমাণীকরণ স্ট্যাটাস নির্দেশ করে। UI-তে এটি দেখানোর জন্য 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 থেকে টোকেন ফেচ করে ok বুলিয়ান রিটার্ন করে।

টুইট শিডিউল করার জন্য ব্যবহারকারী ইন্টারফেস তৈরি করা

React হুক useFormState এবং useFormStatus ব্যবহার করে রিয়েক্টিভ ফর্ম স্টেট তৈরি করুন এবং সার্ভার অ্যাকশন আহ্বান করুন।

প্রথমে app/form.tsx ফাইল তৈরি করুন:

// File: app/form.tsx 'use client' 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() 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 কম্পোনেন্ট ইমপোর্ট করে।
  • শিডিউলড টুইটের তারিখের জন্য লুকানো input রেন্ডার করে।
  • টুইট টেক্সটের জন্য textarea রেন্ডার করে।
  • ফর্ম সাবমিশন স্ট্যাটাস অনুযায়ী ডিজেবল্ড বাটন রেন্ডার করে।
  • 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) }) }, []) return ( <Button className="w-[280px]" onClick={() => { if (!authenticated) window.location.href = '/api/auth/twitter' }} variant={state[authenticated.toString()].variant} > {state[authenticated.toString()].message} </Button> ) }

ইন্ডেক্স রুট (/) খোলার সাথে সাথে ব্যবহারকারী টুইট শিডিউল করতে পারে এমন ফর্ম রেন্ডার করতে app/page.tsx তৈরি করুন:

// File: app/page.tsx 'use client' import Form from './form' import { useFormState } from 'react-dom' 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> ) }

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)

কোডটি:

  • Redis, Queue এবং QStash সিগনেচার ভেরিফিকেশন ইমপোর্ট করে।
  • tweet ফাংশন টুইট টেক্সট এবং অ্যাক্সেস টোকেন দিয়ে Twitter API-এ POST করে।
  • /api/schedule-এ POST হ্যান্ডেলার: Redis থেকে অ্যাক্সেস টোকেন নেয়, কিউ থেকে ৪টি মেসেজ ফেচ করে টুইট পোস্ট করে।

QStash ব্যবহার করে প্রতিদিন মাঝরাত এই এন্ডপয়েন্ট আটোমেটিক কল করা যায়। Upstash কনসোলে QStash ট্যাবে Request Builder-এ যান:

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

এভাবে প্রতিদিন মাঝরাত /api/schedule-এ POST হবে।

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

রিপোজিটরি Vercel-এ ডিপ্লয়ের জন্য প্রস্তুত। ধাপগুলো:

  • GitHub রিপোজিটরি তৈরি করুন।
  • Vercel ড্যাশবোর্ডে New Project তৈরি করুন।
  • GitHub রিপোজিটরি লিংক করুন।
  • Settings-এ Environment Variables আপডেট করুন (লোকাল .env মেলাতে)।
  • Deploy ক্লিক করুন।

আরও তথ্য

বিস্তারিত জানতে রেফারেন্স দেখুন:

  • GitHub Repository
  • Twitter OAuth 2.0 Flow
  • Generating Twitter App Tokens
  • React Form Hooks
  • Next.js Server Actions

উপসংহার

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

  1. জাভা এফএক্স ও ওপেনসিভি ব্যবহার করে চিত্রের উজ্জ্বলতা ও কন্ট্রাস্ট পরিবর্তন

  2. Python Tkinter অ্যাপ্লিকেশনের ফাংশনাল টেস্টিং উদাহরণ

  3. অ্যান্ড্রয়েডে ডাইনামিকভাবে ভিউ যোগ ও মুছে ফেলার পদ্ধতি

  4. জাভাতে JButton-এ মার্জিন সেট করা