使用 React 和 Supabase 构建自定义调度程序
介绍
调度是现代应用程序的关键功能之一。它可以使我们能够运行可以自动化的定期任务。诸如发送提醒、安排帖子、更新数据或自动化工作流程等任务。
因此，在本文中，我们将构建一个调度程序来在 dev.to 上发布文章。虽然 dev.to 具有调度功能，但我们将以我们的方式实现它们，这可用于构建任何类型的调度程序应用程序。
那么，让我们开始吧。
技术堆栈
我们将使用以下技术堆栈：
- React： 我们将使用 React，特别是 ViteJS 和 React 来构建前端。
-
Supabase：它为构建应用程序提供了一体化的解决方案。它提供数据库、身份验证、存储、边缘功能等等。我们将使用 Supbase 中的以下内容：
- 数据库：用于存储文章信息和排程时间。
- Cron Job：用于定期运行以调用 Edge 函数
- 边缘功能：这将检查是否有任何文章的当前时间与预定时间相同。如果那样它就会发布这篇文章。
这足以轻松构建调度程序应用程序。
处理应用程序
让我们讨论一下应用程序是如何工作的，这使得理解应用程序的流程变得很容易。以下是流程一一：
- 通过前端添加文章到数据库。
- Cron 作业将每分钟运行一次以调用边缘函数。
- 将执行边缘函数来检查当前时间是否与预定文章一致。如果有文章就会发布文章。
- post表中的文章数据将会更新。 # 构建前端
随着大量生成式人工智能的出现，建筑前端最近变得安静。我们将要使用的人工智能之一是 Bolt.new。为什么是螺栓.new？它可以生成具有依赖项和所有配置（例如 tailwindcss）的完整 React 应用程序。您可以使用 StackBlitz 直接编辑文章并部署应用程序。如果需要，可以下载代码在本地运行。额外的一点是它与 Supabase 集成得很好，因此您可以通过 Supbase 集成生成一个工作的 React 应用程序。
我用它来生成正面。这是所有页面。
应用程序.tsx
这将处理用于显示组件并提供登陆页面的页面。
function App() {
const [posts, setPosts] = useState<ScheduledPost[]>([]);
const handleSchedulePost = async (data: CreatePostData) => {
// In a real app, this would make an API call to your edge function
const newPost: ScheduledPost = {
content: data.content,
scheduled_time: data.scheduledTime,
status: 'pending',
title: data.title,
tags: data.tags
};
const { error } = await supabase
.from('scheduled_posts')
.insert(newPost)
if (error){
alert(`Erorr: ${error}`)
return
}
// setPosts((prev) => [...prev, newPost]);
};
const fetchScheduedPost = async () => {
const { data, error } = await supabase
.from('scheduled_posts')
.select()
if(error){
alert(`Erorr Fetching Data: ${error}`)
return
}
setPosts(data)
}
useEffect(() => {
fetchScheduedPost()
},[])
return (
<div className="min-h-screen bg-gray-50">
<header className="bg-white shadow-sm">
<div className="max-w-4xl mx-auto px-4 py-4">
<div className="flex items-center gap-2">
<Newspaper className="h-8 w-8 text-blue-500" />
<h1 className="text-xl font-bold text-gray-900">Dev.to Post Scheduler</h1>
</div>
</div>
</header>
<main className="max-w-4xl mx-auto px-4 py-8">
<div className="grid gap-8 md:grid-cols-2">
<div>
<h2 className="text-xl font-semibold text-gray-800 mb-4">Schedule New Post</h2>
<PostForm onSubmit={handleSchedulePost} />
</div>
<div>
<ScheduledPosts posts={posts} />
</div>
</div>
</main>
</div>
);
}
export default App;
SchudledPost.tsx
这会显示预定的文章。
const StatusIcon = ({ status }: { status: ScheduledPost['status'] }) => {
switch (status) {
case 'posted':
return <CheckCircle className="h-5 w-5 text-green-500" />;
case 'failed':
return <XCircle className="h-5 w-5 text-red-500" />;
default:
return <Clock3 className="h-5 w-5 text-yellow-500" />;
}
};
export function ScheduledPosts({ posts }: ScheduledPostsProps) {
return (
<div className="space-y-4">
<h2 className="text-xl font-semibold text-gray-800">Scheduled Posts</h2>
{posts.length === 0 ? (
<p className="text-gray-500 text-center py-8">No scheduled posts yet</p>
) : (
<div className="space-y-4">
{posts.map((post, index) => (
<div
key={index}
className="bg-white p-4 rounded-lg shadow-md border border-gray-100"
>
<div className="flex items-start justify-between">
<div className="flex-1">
<p className="text-gray-800 mb-2">{post.title}</p>
<div className="flex items-center gap-4 text-sm text-gray-500">
<div className="flex items-center gap-1">
<Calendar className="h-4 w-4" />
{new Date(post.scheduled_time).toLocaleDateString()}
</div>
<div className="flex items-center gap-1">
<Clock className="h-4 w-4" />
{new Date(post.scheduled_time).toLocaleTimeString()}
</div>
</div>
</div>
<StatusIcon status={post.status} />
</div>
</div>
))}
</div>
)}
</div>
);
}
PostForm.tsx
这将处理用户可以提供有关文章的信息的表单。
function App() {
const [posts, setPosts] = useState<ScheduledPost[]>([]);
const handleSchedulePost = async (data: CreatePostData) => {
// In a real app, this would make an API call to your edge function
const newPost: ScheduledPost = {
content: data.content,
scheduled_time: data.scheduledTime,
status: 'pending',
title: data.title,
tags: data.tags
};
const { error } = await supabase
.from('scheduled_posts')
.insert(newPost)
if (error){
alert(`Erorr: ${error}`)
return
}
// setPosts((prev) => [...prev, newPost]);
};
const fetchScheduedPost = async () => {
const { data, error } = await supabase
.from('scheduled_posts')
.select()
if(error){
alert(`Erorr Fetching Data: ${error}`)
return
}
setPosts(data)
}
useEffect(() => {
fetchScheduedPost()
},[])
return (
<div className="min-h-screen bg-gray-50">
<header className="bg-white shadow-sm">
<div className="max-w-4xl mx-auto px-4 py-4">
<div className="flex items-center gap-2">
<Newspaper className="h-8 w-8 text-blue-500" />
<h1 className="text-xl font-bold text-gray-900">Dev.to Post Scheduler</h1>
</div>
</div>
</header>
<main className="max-w-4xl mx-auto px-4 py-8">
<div className="grid gap-8 md:grid-cols-2">
<div>
<h2 className="text-xl font-semibold text-gray-800 mb-4">Schedule New Post</h2>
<PostForm onSubmit={handleSchedulePost} />
</div>
<div>
<ScheduledPosts posts={posts} />
</div>
</div>
</main>
</div>
);
}
export default App;
边缘功能
边缘函数是服务器端 TypeScript 函数，分布在全球边缘（靠近用户）。它们可用于监听 Webhook 或将您的 Supabase 项目与 Stripe 等第三方集成。边缘函数是使用 Deno 开发的。
要在本地运行和部署边缘函数，您需要具备以下条件：
- Supbase CLI：您可以使用本指南在本地安装 CLI。只需使用 npm 和 npx 就很简单。
- Docker 桌面：从这里安装 docker 桌面。
因此，安装后，您可以使用前端代码目录或其他目录来创建 Supabase Edge Function。
运行以下命令来启动一个supabase项目：
const StatusIcon = ({ status }: { status: ScheduledPost['status'] }) => {
switch (status) {
case 'posted':
return <CheckCircle className="h-5 w-5 text-green-500" />;
case 'failed':
return <XCircle className="h-5 w-5 text-red-500" />;
default:
return <Clock3 className="h-5 w-5 text-yellow-500" />;
}
};
export function ScheduledPosts({ posts }: ScheduledPostsProps) {
return (
<div className="space-y-4">
<h2 className="text-xl font-semibold text-gray-800">Scheduled Posts</h2>
{posts.length === 0 ? (
<p className="text-gray-500 text-center py-8">No scheduled posts yet</p>
) : (
<div className="space-y-4">
{posts.map((post, index) => (
<div
key={index}
className="bg-white p-4 rounded-lg shadow-md border border-gray-100"
>
<div className="flex items-start justify-between">
<div className="flex-1">
<p className="text-gray-800 mb-2">{post.title}</p>
<div className="flex items-center gap-4 text-sm text-gray-500">
<div className="flex items-center gap-1">
<Calendar className="h-4 w-4" />
{new Date(post.scheduled_time).toLocaleDateString()}
</div>
<div className="flex items-center gap-1">
<Clock className="h-4 w-4" />
{new Date(post.scheduled_time).toLocaleTimeString()}
</div>
</div>
</div>
<StatusIcon status={post.status} />
</div>
</div>
))}
</div>
)}
</div>
);
}
以下命令可用于创建边缘函数
export function PostForm({ onSubmit }: PostFormProps) {
const [content, setContent] = useState('');
const [title, setTitle] = useState('');
const [tags, setTags] = useState<string[]>(['javascript', 'react']);
const [scheduledTime, setScheduledTime] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
onSubmit({ content, title, scheduledTime, tags });
setContent('');
setTitle('');
setScheduledTime('');
setTags([]);
};
const handleTagChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const selectedOptions = Array.from(e.target.selectedOptions);
const selectedTags = selectedOptions.map(option => option.value);
if(tags.length<4){
setTags(prevTags => {
const newTags = selectedTags.filter(tag => !prevTags.includes(tag));
return [...prevTags, ...newTags];
});
}
};
const removeTag = (tagToRemove: string) => {
setTags(tags.filter(tag => tag !== tagToRemove));
};
return (
<form onSubmit={handleSubmit} className="space-y-4 bg-white p-6 rounded-lg shadow-md">
<div>
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-2">
Post Title
</label>
<input
type="text"
>
<p>I will provide the whole code as a GitHub repository at the end. </p>
<p>Now, let’s look at Supbase Integration.</p>
<h2>
Supabase
</h2>
<p>First create an account on supabase, if you don’t have one. You can look at this article to get information about the creating an account on Supbase, Using ChatGPT with Your Own Data using LangChain and Supabase.</p>
<p>Create the table scheduled_post. You can use the below SQL code to run in the SQL Editor to create the table or you can create the table with Table Editor.<br>
</p>
<pre class="brush:php;toolbar:false"> create table
public.scheduled_posts (
id serial not null,
content text not null,
scheduled_time timestamp with time zone not null,
status text null default 'pending'::text,
created_at timestamp without time zone null default now(),
title character varying null,
devto_article_id character varying null,
posted_at character varying null,
tags character varying[] null,
error_message character varying null,
constraint scheduled_posts_pkey primary key (id)
) tablespace pg_default;
create index if not exists idx_scheduled_time_status on public.scheduled_posts using btree (scheduled_time, status) tablespace pg_default;
上面的命令将在supabase中创建一个目录functions/xscheduler。在那里你可以找到index.ts。边缘函数使用 Deno 环境。
以下代码用于边缘函数：
npx supabase init
对于 SUPABASE_URL 和 SUPABASE_SERVICE_ROLE_KEY 等 ENV，您将自动可用。对于DEVTO_ACCESS_TOKEN，您可以从这里生成它，然后进入项目设置→边缘功能添加令牌。该代币将在 Deno 环境中可用。
您可以使用这个指南来部署所需的边缘函数。
计划任务
Supbase 最近更新了 Cron 作业功能。现在，您可以使用仪表板创建玉米作业，之前您必须为此编写代码。您可以创建一个可以运行以下命令的作业：
- SQL 片段
- 数据库功能
- HTTP 请求
- Subase 边缘函数
我们将使用 Edge Function，您可以使用 Anon 密钥作为 Bearer Token 添加 Edge 函数的详细信息，例如名称和授权。
应用程序的工作
现在，我们已经创建了应用程序，让我们看看现在的工作情况。使用以下命令运行前端：
supabase functions new xscheduler
添加标题、内容、时间和标签等详细信息。添加后，单击安排帖子。一旦文章的计划时间与当前时间匹配，cron 作业就会每分钟运行一次。将会发布。
当时间范围匹配时，文章将发布在 dev.to 上。
附加功能
使用上述技术，您可以为 X、Instagram、LinkedIn 等任何内容构建调度程序应用程序。您可以对其进行处理并添加如下功能：
- 图像：使用supabase存储上传和获取缩略图图像。
- 从 SQL 调用边缘函数：您可以通过从 SQL 片段或数据库函数调用边缘函数来提高效率。这样，只有当文章与当前时间匹配时，才会调用边缘函数。
您可以在 GitHub 上查看该项目的代码。
结论
创建调度程序应用程序可以简化发布文章、发送提醒和管理工作流程等自动化任务。使用 React 作为前端，Supabase 作为后端，我们构建了一个利用数据库、cron 作业和边缘功能的可扩展解决方案。这种方法可以适应各种用例，从而实现高效的自动化。借助这些工具，您可以构建适合您需求的强大调度程序应用程序。
我希望这篇文章能让您了解 cron 作业。感谢您阅读这篇文章。
以上是使用 React 和 Supabase 构建自定义调度程序的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
神秘的JavaScript：它的作用以及为什么重要
Apr 09, 2025 am 12:07 AM
JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
JavaScript难以学习吗？
Apr 03, 2025 am 12:20 AM
学习JavaScript不难，但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程，通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误，使用调试技巧。5)优化性能，遵循最佳实践。
如何实现视差滚动和元素动画效果，像资生堂官网那样？
或者：
怎样才能像资生堂官网一样，实现页面滚动伴随的动画效果？
Apr 04, 2025 pm 05:36 PM
实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网（https://www.shiseido.co.jp/sb/wonderland/）中�...
如何使用JavaScript将具有相同ID的数组元素合并到一个对象中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中将具有相同ID的数组元素合并到一个对象中？在处理数据时，我们常常会遇到需要将具有相同ID�...
JavaScript的演变：当前的趋势和未来前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。
console.log输出结果差异：两次调用为何不同？
Apr 04, 2025 pm 05:12 PM
深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异，并解释其背后的原因。�...
