Cara membuat borang pendaftaran surat berita dalam beberapa minit sahaja dengan shadcn/UI dan Manifes

Dalam dunia digital hari ini, dapat menguji idea anda dengan pantas dan berinteraksi dengan pengguna anda adalah penting, sama ada anda membina MVP, melancarkan permulaan atau menyampaikan projek pada tarikh akhir yang ketat. Membuat borang langganan surat berita selalunya diperlukan untuk mengesahkan konsep anda, melibatkan pengguna awal, membina komuniti orang yang berminat dan mengumpul maklum balas.

Penyelesaian turnkey boleh menelan kos yang tinggi, manakala menggunakan alatan percuma masih rumit dan memakan masa.

Dalam tutorial ini, saya akan menunjukkan kepada anda cara membuat borang langganan surat berita dalam masa kurang daripada 20 minit. Tiada konfigurasi kompleks, tiada sakit kepala. Hanya satu borang dengan sistem langganan berfungsi sepenuhnya!

Timbunan Digunakan

• shadcn/UI: sedia untuk digunakan, komponen yang direka dengan cantik untuk membina bahagian hadapan.
• Manifest: Cara terpantas dan termudah untuk membina hujung belakang yang lengkap, hanya dengan mengisi fail YAML.

Menjelang akhir tutorial ini, anda akan mempunyai borang yang beroperasi sepenuhnya untuk mengumpulkan pelanggan pertama anda. sedia? Jom!

Apakah Manifest?

Manifest ialah Backend-as-a-Service (BaaS) sumber terbuka kami. Ia membolehkan anda membuat bahagian belakang yang lengkap untuk aplikasi anda.

Dengan hanya mengisi satu fail YAML, anda menjana hujung belakang dengan pangkalan data, API dan panel pentadbir mesra pengguna untuk pentadbir bukan teknikal.

Ini membolehkan anda menumpukan pada membina produk anda dan bukannya menangani kerumitan bahagian belakang.

Setakat hari ini, kami baru sahaja mengeluarkan MVP kami dan kami mengharapkan maklum balas komuniti untuk membantu kami mengembangkan produk ke arah yang betul.

Manifest tersedia di GitHub, jadi jangan ragu untuk memberikannya ⭐ jika anda menyukai projek itu!

Merancang antara muka

Matlamat kami ialah skrin tunggal yang memaparkan medan langganan dan mesej pemberitahuan. Ia mudah, berkesan dan berfungsi. Inilah yang kami akan dapat:

• Halaman hadapan untuk pelanggan
• Panel pentadbir untuk pentadbir

Mencipta bahagian hadapan dengan shadcn/UI

Kami akan mulakan dengan mencipta projek dengan bahagian hadapan, iaitu bahagian visual borang langganan surat berita kami.

Saya memilih untuk menggunakan shadcn/UI dengan Next.js. Jalankan arahan berikut dalam terminal anda:

npx shadcn@latest init -d

Anda akan digesa untuk memulakan projek Next.js baharu dan menamakan projek anda. Jawab “Y” dan panggilnya borang surat berita.

Setelah projek dibuat, anda harus menyediakan bahagian hadapan anda, dengan fail ini:

Mulakan pelayan pembangunan dengan menjalankan: npm run dev.

Klik pada pautan yang disediakan di terminal. Ia sepatutnya membuka skrin alu-aluan NextJS dalam pelayar web lalai anda di https://localhost:3000.

Mencipta bentuk statik

Mari buat borang kami dengan mengedit app/page.tsx. Memandangkan shadcn berfungsi dengan TailwindCSS, kami akan menggunakan kelasnya untuk membina antara muka yang diingini. Salin kod berikut:

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 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 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>
  );
}

Anda sepatutnya melihat skrin berpecah dengan kawasan untuk borang di sebelah kiri dan ruang kecerunan di sebelah kanan.

Sekarang mari tambah borang. Ia akan termasuk komponen shadcn berikut:

• Input
• Butang

Pasang komponen ini melalui terminal anda dengan arahan berikut:

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

Kemudian import komponen dalam fail page.tsx anda seperti ini:

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

Gunakan dua komponen ini dengan menambahkan coretan berikut di dalam tag:

<form className="grid gap-4">
  <div className="flex w-full max-w-sm items-center space-x-2">
    <Input type="email" placeholder="Email" name="email" />
    <Button type="submit">Subscribe</Button>
  </div>
  <p className="text-sm text-muted-foreground">
    Sent out weekly on Mondays. Always free.
  </p>
</form>

Anda sepatutnya mempunyai borang surat berita responsif pada bahagian hadapan anda. Luangkan masa untuk mengagumi kerja anda. Dan berehat, janji 20 minit kami masih utuh!

Mencipta bahagian belakang dengan Manifest

Mari tambahkan bahagian belakang untuk menyimpan pelanggan dan benarkan pentadbir mengurus mereka melalui panel pentadbir.

Pasang Manifes pada akar projek dengan arahan berikut:

npx add-manifest

Setelah bahagian belakang dipasang, anda akan melihat fail berikut dalam repositori anda:

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>
  );
}

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

tag:

<form onSubmit={handleSubmit} className="grid gap-4">

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) => {
    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 (
    

      

        

          

            

              Subscribe to our Newsletter! ?
            
            

              Get the latest news, updates, and special offers delivered
              straight to your inbox.
            
          
          <form onSubmit={handleSubmit} className="grid gap-4">
            

              
              Subscribe
            
            

              Sent out weekly on Mondays. Always free.
            
          
          {/* Display the alert based on alertVisible state */}
          {alertVisible && (
            
              {alertMessage}
            
          )}
        
      
      

    
  )
}

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!

Atas ialah kandungan terperinci Cara membuat borang pendaftaran surat berita dalam beberapa minit sahaja dengan shadcn/UI dan Manifes. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!