React と Supabase を使用したカスタム スケジューラの構築

導入

スケジューリングは、最新のアプリケーションの重要な機能の 1 つです。これにより、自動化できる定期的なタスクを実行できるようになります。リマインダーの送信、投稿のスケジュール設定、データの更新、ワークフローの自動化などのタスク。

そこで、この記事では、dev.to に記事を投稿するためのスケジューラーを構築します。 dev.to にはスケジューリング機能がありますが、どのような種類のスケジューラー アプリケーションの構築にも使用できる、私たちの方法で実装するつもりです。

それでは、始めましょう。

技術スタック

次の技術スタックを使用します:

• React: 私たちは React、特に ViteJS と React を使用してフロントを構築します。
• Supabase: アプリケーションを構築するためのオールインワン ソリューションを提供します。データベース、認証、ストレージ、エッジ機能などを提供します。 Supbase から次のものを使用します。
  • データベース: 記事情報とスケジュール時刻を保存するために使用されます。
  • Cron ジョブ: Edge 関数を呼び出すために定期的に実行されます
  • エッジ機能: 現在の時刻がスケジュールされた時刻である記事があるかどうかを確認します。そうすれば記事が投稿されます。

スケジューラ アプリケーションを簡単に構築するにはこれで十分です。

アプリケーションの作業

アプリケーションがどのように動作するかについて説明します。これにより、アプリケーションのフローを理解しやすくなります。一つ一つの流れは次のとおりです:

1. フロントエンドを通じてデータベースに記事を追加します。
2. Cron ジョブは毎分実行され、エッジ関数を呼び出します。
3. 記事予定どおりにエッジ機能が実行され、現在時刻を確認します。記事があればその記事を掲載します。
4. 投稿テーブルの記事データが更新されます。 # フロントエンドの構築

最近、建物のフロントエンドは生成 AI が多くなり、静かになってきました。私たちが使用する AI の 1 つは、bolt.new です。なぜボルト.ニューなのか？依存関係と tailwindcss などのすべての構成を含む完全な React アプリケーションを生成できます。 StackBlitz を使用して記事を直接編集したり、アプリケーションをデプロイしたりできます。必要に応じて、コードをダウンロードしてローカルで実行できます。ボーナス ポイントは、Supabase と非常によく統合されているため、Supbase 統合を使用して動作する React アプリケーションを生成できることです。

フロントの生成に使用しました。全ページはこちらです。

App.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"></newspaper>
                <h1 id="Dev-to-Post-Scheduler">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 id="Schedule-New-Post">Schedule New Post</h2>
                <postform onsubmit="{handleSchedulePost}"></postform>
              </div>
              <div>
                <scheduledposts posts="{posts}"></scheduledposts>
              </div>
            </div>
          </main>
        </div>
      );
    }
    export default App;
</scheduledpost>

SchudledPost.tsx

スケジュールされた記事が表示されます。

    const StatusIcon = ({ status }: { status: ScheduledPost['status'] }) => {
      switch (status) {
        case 'posted':
          return <checkcircle classname="h-5 w-5 text-green-500"></checkcircle>;
        case 'failed':
          return <xcircle classname="h-5 w-5 text-red-500"></xcircle>;
        default:
          return <clock3 classname="h-5 w-5 text-yellow-500"></clock3>;
      }
    };
    export function ScheduledPosts({ posts }: ScheduledPostsProps) {
      return (
        <div classname="space-y-4">
          <h2 id="Scheduled-Posts">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"></calendar>
                          {new Date(post.scheduled_time).toLocaleDateString()}
                        </div>
                        <div classname="flex items-center gap-1">
                          <clock classname="h-4 w-4"></clock>
                          {new Date(post.scheduled_time).toLocaleTimeString()}
                        </div>
                      </div>
                    </div>
                    <statusicon status="{post.status}"></statusicon>
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
      );
    }

ポストフォーム.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"></newspaper>
                <h1 id="Dev-to-Post-Scheduler">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 id="Schedule-New-Post">Schedule New Post</h2>
                <postform onsubmit="{handleSchedulePost}"></postform>
              </div>
              <div>
                <scheduledposts posts="{posts}"></scheduledposts>
              </div>
            </div>
          </main>
        </div>
      );
    }
    export default App;
</scheduledpost>

エッジ機能

エッジ関数はサーバー側の TypeScript 関数であり、ユーザーに近いエッジでグローバルに分散されます。これらは、Webhook をリッスンしたり、Supabase プロジェクトを Stripe などのサードパーティと統合したりするために使用できます。エッジ機能は Deno を使用して開発されています。

エッジ機能をローカルで実行およびデプロイするには、以下が必要です:

• Supbase CLI: このガイドを使用して、CLI をローカルにインストールできます。 npmとnpxを使うだけで簡単です。
• Docker デスクトップ: ここから Docker デスクトップをインストールします。

これをインストールした後、フロントエンド コード ディレクトリなどを使用して Supabase Edge 関数を作成できます。

以下のコマンドを実行して、supabase プロジェクトを開始します:

    const StatusIcon = ({ status }: { status: ScheduledPost['status'] }) => {
      switch (status) {
        case 'posted':
          return <checkcircle classname="h-5 w-5 text-green-500"></checkcircle>;
        case 'failed':
          return <xcircle classname="h-5 w-5 text-red-500"></xcircle>;
        default:
          return <clock3 classname="h-5 w-5 text-yellow-500"></clock3>;
      }
    };
    export function ScheduledPosts({ posts }: ScheduledPostsProps) {
      return (
        <div classname="space-y-4">
          <h2 id="Scheduled-Posts">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"></calendar>
                          {new Date(post.scheduled_time).toLocaleDateString()}
                        </div>
                        <div classname="flex items-center gap-1">
                          <clock classname="h-4 w-4"></clock>
                          {new Date(post.scheduled_time).toLocaleTimeString()}
                        </div>
                      </div>
                    </div>
                    <statusicon status="{post.status}"></statusicon>
                  </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 {
          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 ジョブ機能を更新しました。以前はコードを記述する必要があったトウモロコシ ジョブをダッシュ​​ボードを使用して作成できるようになりました。以下を実行できるジョブを作成できます:

• SQL スニペット
• データベース関数
• HTTP リクエスト
• サブベースエッジ関数

Edge 機能を使用します。Anon キーをベアラー トークンとして使用して、名前や認証などの Edge 機能の詳細を追加できます。

アプリケーションの動作

アプリケーションを作成したので、動作を見てみましょう。以下のコマンドを使用してフロントを実行します:

    supabase functions new xscheduler

タイトル、コンテンツ、時間、タグなどの詳細を追加します。追加したら、「投稿のスケジュール」をクリックします。 cron ジョブは、記事のスケジュールされた時刻が現在の時刻と一致すると、1 分ごとに実行されます。掲載させていただきます。

時間範囲が一致すると、記事は dev.to に投稿されます。

追加機能

上記の手法を使用すると、X、Instagram、LinkedIn などのスケジューラー アプリケーションを構築できます。それに取り組んで、次のような機能を追加できます。

• 画像: supabase ストレージを使用して、サムネイル用の画像をアップロードおよび取得します。
• SQL からのエッジ関数呼び出し: SQL スニペットまたはデータベース関数からエッジ関数を呼び出すことで、さらに効率的にすることができます。これは、記事が現在時刻と一致する場合にのみエッジ関数が呼び出されるようにするためです。

ここで、GitHub でこのプロジェクトのコードを調べることができます。

結論

スケジューラー アプリケーションを作成すると、記事の投稿、リマインダーの送信、ワークフローの管理などのタスクの自動化が簡素化されます。フロントエンドに React を、バックエンドに Supabase を使用して、データベース、cron ジョブ、エッジ機能を活用するスケーラブルなソリューションを構築しました。このアプローチはさまざまなユースケースに適応でき、効率的な自動化が可能になります。これらのツールを使用すると、ニーズに合わせた強力なスケジューラー アプリケーションを構築することができます。

この記事が cron ジョブについて理解していただければ幸いです。記事をお読みいただきありがとうございます。