スケジューリングは、最新のアプリケーションの重要な機能の 1 つです。これにより、自動化できる定期的なタスクを実行できるようになります。リマインダーの送信、投稿のスケジュール設定、データの更新、ワークフローの自動化などのタスク。
そこで、この記事では、dev.to に記事を投稿するためのスケジューラーを構築します。 dev.to にはスケジューリング機能がありますが、どのような種類のスケジューラー アプリケーションの構築にも使用できる、私たちの方法で実装するつもりです。
それでは、始めましょう。
次の技術スタックを使用します:
スケジューラ アプリケーションを簡単に構築するにはこれで十分です。
アプリケーションがどのように動作するかについて説明します。これにより、アプリケーションのフローを理解しやすくなります。一つ一つの流れは次のとおりです:
最近、建物のフロントエンドは生成 AI が多くなり、静かになってきました。私たちが使用する AI の 1 つは、bolt.new です。なぜボルト.ニューなのか？依存関係と tailwindcss などのすべての構成を含む完全な React アプリケーションを生成できます。 StackBlitz を使用して記事を直接編集したり、アプリケーションをデプロイしたりできます。必要に応じて、コードをダウンロードしてローカルで実行できます。ボーナス ポイントは、Supabase と非常によく統合されているため、Supbase 統合を使用して動作する React アプリケーションを生成できることです。
フロントの生成に使用しました。全ページはこちらです。
これは、コンポーネントを表示し、ランディング ページを提供するためのページを処理します。
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;
スケジュールされた記事が表示されます。
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>
);
}
これは、ユーザーが記事に関する情報を提供できるフォームを処理します。
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 を使用して開発されています。
エッジ機能をローカルで実行およびデプロイするには、以下が必要です:
これをインストールした後、フロントエンド コード ディレクトリなどを使用して Supabase Edge 関数を作成できます。
以下のコマンドを実行して、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>
);
}
以下のコマンドを使用して Edge 機能を作成できます
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 内にディレクトリ function/xscheduler を作成します。そこにindex.tsがあります。 Edge機能はDeno環境を使用します。
以下のコードはエッジ関数用です:
npx supabase init
ENV の場合、SUPABASE_URL や SUPABASE_SERVICE_ROLE_KEY などは自動的に利用可能になります。 DEVTO_ACCESS_TOKEN の場合は、ここから生成し、[プロジェクト設定] → [エッジ機能] に移動してトークンを追加できます。このトークンは Deno 環境で利用可能になります。
必要なエッジ機能のデプロイには、この ガイドを使用できます。
Supbase は最近 Cron ジョブ機能を更新しました。以前はコードを記述する必要があったトウモロコシ ジョブをダッシュボードを使用して作成できるようになりました。以下を実行できるジョブを作成できます:
Edge 機能を使用します。Anon キーをベアラー トークンとして使用して、名前や認証などの Edge 機能の詳細を追加できます。
アプリケーションを作成したので、動作を見てみましょう。以下のコマンドを使用してフロントを実行します:
supabase functions new xscheduler
タイトル、コンテンツ、時間、タグなどの詳細を追加します。追加したら、「投稿のスケジュール」をクリックします。 cron ジョブは、記事のスケジュールされた時刻が現在の時刻と一致すると、1 分ごとに実行されます。掲載させていただきます。
時間範囲が一致すると、記事は dev.to に投稿されます。
上記の手法を使用すると、X、Instagram、LinkedIn などのスケジューラー アプリケーションを構築できます。それに取り組んで、次のような機能を追加できます。
ここで、GitHub でこのプロジェクトのコードを調べることができます。
スケジューラー アプリケーションを作成すると、記事の投稿、リマインダーの送信、ワークフローの管理などのタスクの自動化が簡素化されます。フロントエンドに React を、バックエンドに Supabase を使用して、データベース、cron ジョブ、エッジ機能を活用するスケーラブルなソリューションを構築しました。このアプローチはさまざまなユースケースに適応でき、効率的な自動化が可能になります。これらのツールを使用すると、ニーズに合わせた強力なスケジューラー アプリケーションを構築することができます。
この記事が cron ジョブについて理解していただければ幸いです。記事をお読みいただきありがとうございます。
以上がReact と Supabase を使用したカスタム スケジューラの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
