shadcn/UI 및 Manifest를 사용하여 단 몇 분 만에 뉴스레터 가입 양식을 만드는 방법

오늘날의 디지털 세계에서는 MVP를 구축하든, 스타트업을 시작하든, 촉박한 마감 기한에 맞춰 프로젝트를 제공하든 관계없이 아이디어를 빠르게 테스트하고 사용자와 상호 작용할 수 있는 능력이 중요합니다. 컨셉을 검증하고, 초기 사용자의 참여를 유도하고, 관심 있는 사람들의 커뮤니티를 구축하고, 피드백을 수집하려면 뉴스레터 구독 양식을 만드는 것이 필요한 경우가 많습니다.

턴키 솔루션은 비용이 많이 들 수 있지만 무료 도구를 사용하는 것은 여전히 ​​복잡하고 시간이 많이 걸립니다.

이 튜토리얼에서는 20분 안에 뉴스레터 구독 양식을 만드는 방법을 보여 드리겠습니다. 복잡한 구성이나 골치 아픈 일이 없습니다. 모든 기능을 갖춘 구독 시스템을 갖춘 양식입니다!

사용된 스택

• shadcn/UI: 프런트엔드 구축을 위해 바로 사용할 수 있고 아름답게 디자인된 구성요소.
• 매니페스트: YAML 파일을 채우는 것만으로 완전한 백엔드를 구축하는 가장 빠르고 쉬운 방법입니다.

이 튜토리얼이 끝나면 첫 번째 구독자를 수집할 수 있는 완전한 운영 양식을 갖추게 됩니다. 준비가 된? 가자!

매니페스트란 무엇입니까?

Manifest는 오픈 소스 BaaS(Backend-as-a-Service)입니다. 이를 통해 애플리케이션을 위한 완전한 백엔드를 생성할 수 있습니다.

단일 YAML 파일만 입력하면 데이터베이스, API, 기술 지식이 없는 관리자를 위한 사용자 친화적인 관리 패널이 포함된 백엔드가 생성됩니다.

이를 통해 백엔드 복잡성을 처리하는 대신 제품 구축에 집중할 수 있습니다.

오늘부로 MVP가 출시되었으며 제품을 올바른 방향으로 발전시키는 데 도움이 되는 커뮤니티 피드백을 기대하고 있습니다.

매니페스트는 GitHub에서 확인하실 수 있으니, 프로젝트가 마음에 드셨다면 ⭐를 남겨주세요!

인터페이스 계획

우리의 목표는 구독 필드와 알림 메시지를 단일 화면에 표시하는 것입니다. 간단하고 효과적이며 기능적입니다. 우리가 얻을 수 있는 것은 다음과 같습니다:

• 구독자를 위한 프런트엔드
• 관리자를 위한 관리자 패널

shadcn/UI를 사용하여 프런트엔드 만들기

프론트엔드, 즉 뉴스레터 구독 양식의 시각적 부분을 사용하여 프로젝트를 만드는 것부터 시작하겠습니다.

저는 Next.js와 함께 shadcn/UI를 사용하기로 결정했습니다. 터미널에서 다음 명령을 실행하세요:

npx shadcn@latest init -d

새 Next.js 프로젝트를 시작하고 프로젝트 이름을 지정하라는 메시지가 표시됩니다. "Y"라고 대답하고 뉴스레터 형식이라고 부릅니다.

프로젝트가 생성되면 다음 파일을 사용하여 프런트엔드를 준비해야 합니다.

npm run dev를 실행하여 개발 서버를 시작하세요.

터미널에 제공된 링크를 클릭하세요. 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";

기존

내부에 다음 스니펫을 추가하여 이 두 구성요소를 사용하세요. 태그:

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 및 Manifest를 사용하여 단 몇 분 만에 뉴스레터 가입 양식을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!