shadcn/UI とマニフェストを使用してわずか数分でニュースレターの登録フォームを作成する方法

今日のデジタル世界では、MVP を構築する場合でも、スタートアップを立ち上げる場合でも、厳しい納期でプロジェクトを遂行する場合でも、アイデアを迅速にテストし、ユーザーと対話できることが非常に重要です。ニュースレター購読フォームの作成は、多くの場合、コンセプトを検証し、初期ユーザーを関与させ、関心のある人々のコミュニティを構築し、フィードバックを収集するために必要です。

ターンキー ソリューションは高価になる可能性がありますが、無料ツールの使用は依然として複雑で時間がかかります。

このチュートリアルでは、ニュースレター購読フォームを 20 分以内に作成する方法を説明します。複雑な設定や面倒な設定は必要ありません。完全に機能するサブスクリプション システムを備えた単なるフォームです!

使用スタック

• shadcn/UI: フロントエンドを構築するための、すぐに使用できる美しくデザインされたコンポーネント。
• マニフェスト: YAML ファイルに記入するだけで、完全なバックエンドを構築する最速かつ簡単な方法です。

このチュートリアルが終わるまでに、最初の購読者を集めるための完全に機能するフォームが完成します。準備ができて？行きましょう!

マニフェストとは何ですか?

Manifest は、オープンソースの Backend-as-a-Service (BaaS) です。これにより、アプリケーションの完全なバックエンドを作成できます。

単一の YAML ファイルに入力するだけで、データベース、API、および技術者以外の管理者にとって使いやすい管理パネルを備えたバックエンドが生成されます。

これにより、バックエンドの複雑さに対処するのではなく、製品の構築に集中できます。

本日の時点で、MVP をリリースしたばかりです。製品を正しい方向に進化させるためにコミュニティからのフィードバックを期待しています。

マニフェストは GitHub で入手できるので、プロジェクトが気に入ったらお気軽に ⭐ を付けてください!

インターフェースの計画

私たちの目標は、サブスクリプションフィールドと通知メッセージを表示する単一の画面です。シンプルかつ効果的で機能的です。得られるものは次のとおりです:

• 購読者向けのフロントエンド
• 管理者用の管理パネル

shadcn/UI を使用したフロントエンドの作成

フロントエンド、つまりニュースレター購読フォームのビジュアル部分を使用してプロジェクトを作成することから始めます。

Next.js で shadcn/UI を使用することにしました。ターミナルで次のコマンドを実行します:

npx shadcn@latest init -d

新しい Next.js プロジェクトを開始し、プロジェクトに名前を付けるように求められます。 「Y」と答えて、ニュースレター形式と名付けます。

プロジェクトが作成されたら、次のファイルを使用してフロントエンドを準備する必要があります:

npm run dev を実行して開発サーバーを起動します。

ターミナルで提供されたリンクをクリックします。デフォルトの Web ブラウザで https://localhost:3000 にある NextJS のようこそ画面が開きます。

静的フォームの作成

app/page.tsx を編集してフォームを作成しましょう。 shadcn は TailwindCSS と連携して動作するため、そのクラスを使用して目的のインターフェイスを構築します。次のコードをコピーします:

export default function Home() {
  return (
    <div classname="w-full lg:grid lg:grid-cols-5 min-h-screen flex sm:items-center sm:justify-center sm:grid">
      <div classname="flex items-center justify-center py-12 col-span-2 px-8">
        <div classname="mx-auto grid max-w-[540px] gap-6">
          <div classname="grid gap-2 text-left">
            <h1 id="Subscribe-to-our-Newsletter">Subscribe to our Newsletter! ?</h1>
            <p classname="text-balance text-muted-foreground">
              Get the latest news, updates, and special offers delivered straight to your inbox.
            </p>
          </div>
          <form classname="grid gap-4">{/* Newsletter form here */}</form>
        </div>
      </div>
      <div classname="hidden bg-muted lg:block col-span-3 min-h-screen bg-gradient-to-t from-green-50 via-pink-100 to-purple-100"></div>
    </div>
  );
}

左側にフォーム用の領域、右側にグラデーション スペースがある分割画面が表示されます。

次に、フォームを追加しましょう。これには、次の shadcn コンポーネントが含まれます:

• 入力
• ボタン

次のコマンドを使用して、ターミナルからこれらのコンポーネントをインストールします。

npx shadcn@latest add input
npx shadcn@latest add button

次に、次のように page.tsx ファイルにコンポーネントをインポートします。

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

これら 2 つのコンポーネントを使用するには、既存の

内に次のスニペットを追加します。タグ:

Subscribe

Sent out weekly on Mondays. Always free.

フロントエンドに応答性の高いニュースレター フォームが必要です。あなたの作品をじっくりと鑑賞してください。リラックスしてください。20 分間の約束はまだ残っています!

マニフェストを使用してバックエンドを作成する

バックエンドを追加して購読者を保存し、管理者が管理パネルを介して購読者を管理できるようにしましょう。

次のコマンドを使用して、プロジェクトのルートにマニフェストをインストールします:

npx add-manifest

バックエンドがインストールされると、リポジトリに次のファイルが表示されます:

Now let’s define our data model. Open the backend.yml file and replace the existing code with this one:

name: Newsletter Form

entities:
  Subscriber:
    properties:
      - { name: email, type: email }

Run the following command to start your server:

npm run manifest

Once your backend is running, the terminal will provide two links:

• ?️ Admin panel : http://localhost:1111,
• ? API Doc: http://localhost:1111/api.

Launch the admin panel on your browser and log in with the pre-filled credentials. You should now see an empty list of subscribers.

There we have it! In under 3 minutes, We’ve built a full backend for our newsletter subscription form. ?

Connecting Manifest with our frontend

We’ll use Manifest’s SDK to connect the form and add emails directly to the subscribers list from the frontend.

From your project’s root, install the SDK with:

npm i @mnfst/sdk

Let’s add the newsletter subscription functionality to turn the static form into a dynamic one that stores emails using Manifest.

Next.js treats the files in the app directory as Server Components by default. To use interactive features (like React hooks), we need to mark our component as a Client Component.

Add "use client"; at the top of your Home.tsx file:

'use client';

Next, create the handleSubmit function to capture the email and send it to Manifest:

export default function Home() {
  const handleSubmit = (e: React.FormEvent<htmlformelement>) => {
    e.preventDefault();

    const form = e.currentTarget as HTMLFormElement;
    const emailInput = form.querySelector('input[name="email"]') as HTMLInputElement;
    const email = emailInput?.value;

    if (!email) {
      alert('Please enter a valid email.');
      return;
    }

    const manifest = new Manifest();
    manifest
      .from('subscribers')
      .create({ email })
      .then(() => {
        form.reset();
        alert('Successfully subscribed!');
      })
      .catch((error) => {
        console.error('Error adding subscriber:', error);
        alert(`Failed to add subscriber: ${error.message || error}`);
      });
  };

  return (
    // ... Your existing code here>
  );
}
</htmlformelement>

Now, add the onSubmit={handleSubmit} attribute to your

tag:

Testing the form

Time to see our form in action! Enter an email address and hit submit. You should get a confirmation message.

Check the admin panel, and voilà! this email is now in the subscriber list!

Enhancing user experience

Let’s add alerts to indicate whether the subscription was successful or not. We’ll use the ShadUI alert component.

Install the alert component with:

npx shadcn@latest add alert

We can now add the alert function, and integrate it into our form. Here is the final page.tsx page:

'use client'

import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import Manifest from '@mnfst/sdk'
import { useState } from 'react'

export default function Home() {
  const [alertVisible, setAlertVisible] = useState(false) // State to manage alert visibility
  const [alertMessage, setAlertMessage] = useState('') // Message to display in the alert

  const handleSubmit = (e: React.FormEvent<htmlformelement>) => {
    e.preventDefault()

    // Retrieve email from the input field
    const form = e.currentTarget as HTMLFormElement
    const emailInput = form.querySelector(
      'input[name="email"]'
    ) as HTMLInputElement
    const email = emailInput?.value

    if (!email) {
      setAlertMessage('Please enter a valid email.')
      setAlertVisible(true)
      setTimeout(() => setAlertVisible(false), 3000) // Hide the alert after 3 seconds
      return
    }

    const manifest = new Manifest()
    manifest
      .from('subscribers')
      .create({ email })
      .then(() => {
        form.reset() // Reset the email input field after success
        setAlertMessage(
          'Successfully subscribed! We will contact you if you are selected.'
        )
        setAlertVisible(true) // Show success alert
        setTimeout(() => setAlertVisible(false), 3000) // Hide the alert after 3 seconds
      })
      .catch((error) => {
        setAlertMessage(`Failed to add subscriber: ${error.message || error}`)
        setAlertVisible(true) // Show error alert
        setTimeout(() => setAlertVisible(false), 3000) // Hide the alert after 3 seconds
      })
  }

  return (
    <div classname="w-full lg:grid lg:grid-cols-5 min-h-screen flex sm:items-center sm:justify-center sm:grid">
      <div classname="flex items-center justify-center py-12 col-span-2 px-8">
        <div classname="relative mx-auto grid max-w-[540px] gap-6">
          <div classname="grid gap-2 text-left">
            <h1 classname="text-3xl font-bold">
              Subscribe to our Newsletter! ?
            </h1>
            <p classname="text-balance text-muted-foreground">
              Get the latest news, updates, and special offers delivered
              straight to your inbox.
            </p>
          </div>
          <form onsubmit="{handleSubmit}" classname="grid gap-4">
            <div classname="flex w-full max-w-sm items-center space-x-2">
              <input type="email" placeholder="m@example.com" name="email" required>
              <button type="submit">Subscribe</button>
            </div>
            <p classname="text-sm text-muted-foreground">
              Sent out weekly on Mondays. Always free.
            </p>
          </form>
          {/* Display the alert based on alertVisible state */}
          {alertVisible && (
            <alert classname="absolute bottom-[-90px] bg-teal-300 border-teal-400 text-teal-800">
              <alertdescription>{alertMessage}</alertdescription>
            </alert>
          )}
        </div>
      </div>
      <div classname="hidden bg-muted lg:block col-span-3 min-h-screen bg-gradient-to-t from-green-50 via-pink-100 to-purple-100"></div>
    </div>
  )
}
</htmlformelement>

Let's try the form with the alert by entering a new valid email.

Congratulations! ? You’ve just built a fully functional newsletter subscription application in a flash! ⚡

Conclusion

By leveraging Manifest alongside your favorite frontend tools, you can rapidly create applications with minimal effort. Manifest has been instrumental in speeding up our development process, allowing us to set up a complete backend in just minutes.

I hope this guide was helpful and that you learned how to create a simple and effective newsletter subscription system for your future projects.

If you'd like to access the full project code, you can check out the repository here.

If you liked using Manifest, consider giving us a ⭐ on GitHub to support the project and stay updated!

以上がshadcn/UI とマニフェストを使用してわずか数分でニュースレターの登録フォームを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。