สร้างตัวกำหนดเวลาทวีตด้วย Upstash:คำแนะนำทีละขั้นตอน

สร้างไฟล์ 663 ด้วยรหัสต่อไปนี้:

// 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)
}

โค้ดด้านบนทำหน้าที่ดังต่อไปนี้:

• นำเข้า 675 ฟังก์ชันตัวช่วยที่ขยาย Web Response API
• นำเข้า 684 สร้างไว้ก่อนหน้านี้
• ส่งออก 697 ตัวจัดการ HTTP ซึ่งตอบสนองต่อคำขอ GET ขาเข้าบน 707 .
• สร้าง URL การอนุญาตโดยใช้ 711 ฟังก์ชันตัวช่วยของ Twitter SDK
• เปลี่ยนเส้นทางไปยัง URL การอนุญาตที่สร้างขึ้นโดยใช้ 725 วิธีการ NextResponse

เรามาต่อกันที่การสร้างอุปกรณ์ปลายทางที่ตอบสนองต่อคำขอเมื่อผู้ใช้อนุญาตแอปพลิเคชัน Twitter ของคุณด้วยการเข้าถึง

เตรียม URL โทรกลับเพื่อขออนุมัติ

ขั้นตอนที่สองในโฟลว์ OAuth 2.0 ตอบสนองต่อการโทรกลับจากแพลตฟอร์มการตรวจสอบสิทธิ์ ในการจัดการคำขอโทรกลับการอนุญาตที่เข้ามาจาก Twitter คุณจะต้องกำหนดค่าตำแหน่งข้อมูลในแอปพลิเคชันของคุณซึ่งผู้ใช้จะถูกเปลี่ยนเส้นทางหลังจากให้สิทธิ์การเข้าถึง URL โทรกลับนี้จำเป็นสำหรับการรับรหัสอนุญาต ทำให้แอปพลิเคชันของคุณสามารถบันทึกโทเค็นการเข้าถึงที่ได้รับใน Upstash Redis ด้วยโทเค็นนั้น คุณสามารถทวีตอัตโนมัติผ่าน API ในแอปพลิเคชันของคุณได้

สร้างไฟล์ 730 ด้วยรหัสต่อไปนี้:

// 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)
}

โค้ดด้านบนทำหน้าที่ดังต่อไปนี้:

• นำเข้า 748 อินสแตนซ์ที่ใช้ Upstash Redis
• นำเข้า 758 ฟังก์ชันตัวช่วยที่ขยาย Web Response API
• นำเข้า 760 สร้างไว้ก่อนหน้านี้
• ส่งออก 773 ตัวจัดการ HTTP ซึ่งตอบสนองต่อคำขอ GET ขาเข้าบน 786 .
• ทำลายโครงสร้าง 790 พารามิเตอร์การค้นหาจาก URL โทรกลับ
• สร้าง URL การอนุญาตเหมือนก่อนหน้านี้เป็นแฮ็กเพื่ออัปเดตสถานะภายในที่สร้างโดย SDK
• เรียก 808 ทำงานโดย Twitter SDK เพื่อรับการเข้าถึงและรีเฟรชโทเค็น ซึ่งจะช่วยให้คุณสร้างทวีตผ่าน API ได้
• ทำลายโครงสร้าง 810 จาก 824 วัตถุที่ได้รับ
• บันทึกค่าโทเค็นการเข้าถึงที่ได้รับด้วย 833 เป็นกุญแจสำคัญใน Upstash Redis
• เปลี่ยนเส้นทางไปยัง URL ดัชนี (849 ) โดยใช้ 859 วิธีการ NextResponse

ตอนนี้คุณดำเนินการขั้นตอน Twitter OAuth 2.0 เสร็จแล้ว

มี 865 ที่ถูกต้อง ในอินสแตนซ์ Upstash Redis เป็นตัวบ่งชี้สถานะโฟลว์การตรวจสอบสิทธิ์ หากต้องการสื่อสารสิ่งเดียวกันในส่วนติดต่อผู้ใช้ ให้สร้างไฟล์ 879 ด้วยรหัสต่อไปนี้:

// 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 })
}

โค้ดด้านบนทำหน้าที่ดังต่อไปนี้:

• นำเข้า 880 อินสแตนซ์ที่ใช้ Upstash Redis
• นำเข้า 892 ฟังก์ชันตัวช่วยที่ขยาย Web Response API
• ส่งออก 900 ตัวจัดการ HTTP ซึ่งตอบสนองต่อคำขอ GET ขาเข้าบน 916 .
• ดึงค่าที่เกี่ยวข้องกับ 928 คีย์ใน Upstash Redis
• ส่งคืนการตอบสนอง JSON ที่มี 938 บูลีนที่ระบุว่ามีโทเค็นการเข้าถึงที่ถูกต้องอยู่ใน Upstash Redis หรือไม่

มาดูการสร้างอินเทอร์เฟซผู้ใช้เพื่อใช้จุดสิ้นสุด API ที่คุณสร้างขึ้นกันดีกว่า

สร้างอินเทอร์เฟซผู้ใช้เพื่อกำหนดเวลาทวีต

ในส่วนนี้ คุณจะได้เรียนรู้วิธีสร้างสถานะแบบฟอร์มเชิงโต้ตอบโดยใช้ React hooks 947 และ 958 และเรียกใช้การทำงานของเซิร์ฟเวอร์เพื่อกำหนดเวลาทวีต

ขั้นแรก คุณจะต้องสร้างส่วนประกอบ React ที่แสดงแบบฟอร์มที่มีข้อมูลทวีตที่จะกำหนดเวลาไว้ และแสดงการแจ้งเตือนแบบโทสต์ที่ระบุว่าข้อมูลทวีตนั้นหรือไม่ สร้างไฟล์ 963 ด้วยรหัสต่อไปนี้:

// 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>
 </>
 )
}

โค้ดด้านบนทำหน้าที่ดังต่อไปนี้:

• นำเข้าส่วนประกอบที่สร้างโดย 974 คำสั่ง CLI ก่อนหน้านี้
• ส่งออกองค์ประกอบ React ที่แสดง 986 ที่ซ่อนไว้ด้วยสายตา องค์ประกอบ HTML ที่อธิบายวันที่ของทวีตตามกำหนดเวลา
• ส่วนประกอบยังแสดงผล 991 องค์ประกอบ HTML เพื่อยอมรับข้อความทวีตจากผู้ใช้ด้วยสายตา
• ส่วนประกอบยังแสดงผล 1004 ซึ่งถูกปิดใช้งานตามเงื่อนไขตามสถานะของการส่งแบบฟอร์มก่อนหน้า
• ส่วนประกอบยังใช้ 1014 ขอเพื่อรีเซ็ตแบบฟอร์มหากการกระทำของเซิร์ฟเวอร์ส่งผลให้สำเร็จ ไม่ว่าจะด้วยวิธีใด ระบบจะแสดงการแจ้งเตือนแบบปิ้งที่มุมขวาล่างเพื่อระบุสถานะของคำขอ

ต่อไป คุณจะสร้างส่วนประกอบที่แสดงสถานะสถานะการตรวจสอบสิทธิ์ Twitter ของผู้ใช้ สร้างไฟล์ 1027 ด้วยรหัสต่อไปนี้:

// 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>
 )
}

โค้ดด้านบนทำหน้าที่ดังต่อไปนี้:

• นำเข้า 1038 และ 1048 hooks โดย React เพื่อใช้ในการดึงข้อมูลสถานะของการตรวจสอบสิทธิ์ผู้ใช้
• ส่งออกส่วนประกอบ React ที่แสดงผล 1057 ส่วนประกอบ (โดย 1061 ) ในสถานะที่แตกต่างกัน โดยเชื่อมโยงแต่ละสถานะกับสถานะการตรวจสอบสิทธิ์ Twitter ของผู้ใช้

เพื่อแสดงแบบฟอร์มสำหรับผู้ใช้ที่อนุญาตให้พวกเขาโต้ตอบและกำหนดเวลาทวีตขณะที่พวกเขาเปิดเส้นทางดัชนี (เช่น 1074 ) สร้างไฟล์ 1083 ด้วยรหัสต่อไปนี้:

// 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>
 )
}

โค้ดด้านบนทำหน้าที่ดังต่อไปนี้:

• นำเข้า 1090 และ 1106 ส่วนประกอบที่สร้างขึ้นก่อนหน้านี้
• นำเข้า 1117 hook โดย React เพื่อให้สามารถประมวลผลข้อมูลที่ส่งคืนโดยการกระทำของเซิร์ฟเวอร์ Next.js โดยใช้ 1121 ตัวแปรและอนุญาตให้เรียกใช้การกระทำของเซิร์ฟเวอร์ผ่านการส่งแบบฟอร์ม
• นำเข้า 1136 การทำงานของเซิร์ฟเวอร์ที่สร้างขึ้นก่อนหน้านี้
• ส่งออกส่วนประกอบ React ที่มี 1147 ส่วนประกอบที่มี 1150 id และตั้งค่าให้เรียกใช้ 1169 เมื่อผู้ใช้ส่งแบบฟอร์ม

กำหนดเวลาทวีตโดยใช้ Upstash QStash

หากต้องการกำหนดเวลาทวีตในนามของผู้ใช้ คุณจะต้องสร้างตำแหน่งข้อมูลที่จะใช้ข้อมูลทวีตที่จัดเก็บไว้ใน Upstash Queue จากนั้น POST ไปที่ Twitter API เพื่อดำเนินการทวีต สร้างไฟล์ 1176 ด้วยรหัสต่อไปนี้:

// 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)

โค้ดด้านบนทำหน้าที่ดังต่อไปนี้:

• นำเข้า 1188 และ 1193 อินสแตนซ์ที่ใช้ Upstash Redis และ Upstash Queue ตามลำดับ
• นำเข้า 1203 ฟังก์ชั่นโดย Upstash ที่จะตรวจสอบลายเซ็นคำขอเพื่อให้แน่ใจว่าคำขอมาจาก QStash เท่านั้น
• สร้างฟังก์ชัน 1218 ที่ยอมรับข้อความทวีตและโทเค็นการเข้าถึงเพื่อดำเนินการทวีตในนามของผู้ใช้ที่ได้รับการรับรองความถูกต้อง
• สร้าง 1220 ตัวจัดการ HTTP ซึ่งตอบสนองต่อคำขอ POST ขาเข้าที่ 1233 . ดึงข้อความ 4 ข้อความจาก Upstash Queue และเรียกใช้ 1248 ฟังก์ชั่นในการทวีตในนามของผู้ใช้

การใช้ Upstash QStash คุณสามารถกำหนดเวลากระบวนการดำเนินการทวีตได้ สมมติว่าคุณต้องการทำให้เป็นอัตโนมัติ โดยทุกๆ วันในเวลาเที่ยงคืน กระบวนการจะเริ่มต้นเองและทวีตก็ดับลง ในการทำเช่นนั้น คุณจะใช้จุดสิ้นสุดที่สร้างขึ้นก่อนหน้านี้:1252 ใน QStash

ไปที่แท็บ QStash ในคอนโซล Upstash เลื่อนลงไปที่แท็บ Request Builder และดำเนินการต่อไปนี้:

• เลือก 1268 แท็บ
• กรอก 1272 เป็น URL ที่สมบูรณ์ไปยัง 1286 ของคุณ จุดสิ้นสุด
• เลือก 1291 เป็น 1306 .
• เลือก 1318 เป็น 1327 .
• คลิก 1330 .

ด้วยขั้นตอนข้างต้น คุณได้สร้างงานที่ POST เป็น 1347 ทุกวันเวลาเที่ยงคืน

นั่นเป็นการเรียนรู้มากมาย! คุณทำเสร็จแล้วตอนนี้ ✨

ปรับใช้กับ Vercel

ตอนนี้พื้นที่เก็บข้อมูลพร้อมที่จะปรับใช้กับ Vercel แล้ว ใช้ขั้นตอนต่อไปนี้เพื่อปรับใช้:

• เริ่มต้นด้วยการสร้างพื้นที่เก็บข้อมูล GitHub ที่มีโค้ดของแอปของคุณ
• จากนั้น ไปที่แดชบอร์ด Vercel และสร้างโปรเจ็กต์ใหม่ .
• เชื่อมโยงโปรเจ็กต์ใหม่กับที่เก็บ GitHub ที่คุณเพิ่งสร้างขึ้น
• ในการตั้งค่า ให้อัปเดต 1352  เพื่อจับคู่กับ 1368 ในพื้นที่ของคุณ  ไฟล์
• คลิก 1370 .

ข้อมูลเพิ่มเติม

หากต้องการข้อมูลเชิงลึกโดยละเอียดเพิ่มเติม โปรดสำรวจข้อมูลอ้างอิงที่อ้างถึงในโพสต์นี้

• พื้นที่เก็บข้อมูล GitHub
• ขั้นตอนของ Twitter OAuth 2.0
• การสร้างโทเค็นแอป Twitter
• ตอบสนองแบบฟอร์ม Hooks
• การทำงานของเซิร์ฟเวอร์ Next.js

บทสรุป

ในคู่มือนี้ คุณได้เรียนรู้วิธีสร้าง Tweet Scheduler ที่มีประสิทธิภาพโดยใช้ประโยชน์จากฐานข้อมูล Redis อันทรงพลังของ Upstash และคิว QStash ความสามารถในการปรับขนาดของ Upstash ช่วยให้มั่นใจได้ถึงการจัดเก็บและการกำหนดเวลาทวีตที่เชื่อถือได้ รวมกับการใช้งานที่ราบรื่นบน Vercel สร้างระบบอัตโนมัติเต็มรูปแบบ