NextJS Templates
Tutorial Aplikasi Penagihan dengan Next.js, Vercel & Back4app

26min
Dalam tutorial ini, kita akan membangun sebuah Aplikasi Penagihan menggunakan Next.js sebagai frontend, Back4App sebagai backend, dan layanan tambahan seperti Clerk untuk otentikasi, Stripe untuk pembayaran, dan Resend untuk notifikasi email. Panduan ini akan menjelaskan cara mengatur otentikasi, manajemen faktur, pemrosesan pembayaran, dan penyebaran di Vercel.
1. Prasyarat
Sebelum memulai, pastikan Anda memiliki hal-hal berikut:
Akun Back4App (Daftar di sini)
Akun Clerk (Clerk.io) untuk otentikasi
Akun Stripe (Stripe.com) untuk pemrosesan pembayaran
Akun Resend (Resend.io) untuk notifikasi email
Node.js dan npm terinstal (Instalasi Node.js)
2. Mengatur Backend (Back4App)
2.1 Buat Proyek Baru di Back4App
Masuk ke Back4App dan buat proyek baru.
Navigasikan ke Data Browser dan buat kelas-kelas berikut:
2.2 Model Data (Kelas)
2.2.1 Pengguna (Ditangani secara otomatis oleh Clerk)
objectId
username
email
2.2.2 Organisasi
Buat kelas bernama Organisasi.
Tambahkan kolom berikut:
nama (String): Nama organisasi.
ownerId (Pointer<_User>): Mengarah ke kelas User (dibuat secara otomatis oleh Clerk).
anggota (Array<Pointer<_User>>): Sebuah array pengguna yang menjadi bagian dari organisasi ini.
2.2.3 Pelanggan
Buat kelas bernama Pelanggan.
Tambahkan kolom-kolom ini:
nama (String): Nama pelanggan.
email (String): Email pelanggan.
organizationId (Pointer): Organisasi tempat pelanggan ini berada.
2.2.4 Faktur
Buat kelas bernama Faktur.
Tambahkan kolom-kolom ini:
nomorFaktur (String): Pengidentifikasi faktur yang unik.
idPelanggan (Pointer): Menghubungkan ke pelanggan.
idOrganisasi (Pointer): Menghubungkan ke organisasi.
jumlah (Number): Total jumlah untuk faktur.
status (String): Opsi termasuk 'draft', 'sent', 'paid', dan 'overdue'.
tanggalJatuhTempo (Date): Tanggal jatuh tempo faktur.
item (Array): Daftar item dalam faktur.
2.2.5 Pembayaran
Buat kelas bernama Pembayaran.
Tambahkan kolom-kolom ini:
idFaktur (Pointer): Menghubungkan ke faktur terkait.
jumlah (Number): Jumlah pembayaran.
idSesiStripe (String): ID sesi Stripe.
status (String): Status pembayaran (misalnya, 'pending', 'successful', 'failed').
3. Menyiapkan Frontend (Next.js)
3.1 Buat Proyek Next.js
Mulailah dengan menyiapkan proyek Next.js Anda dengan TypeScript, Tailwind CSS, dan komponen shadcn/ui.
Bash
npx create-next-app@latest invoicing-app --typescript
cd invoicing-app
npm install tailwindcss postcss autoprefixer
npx tailwindcss init
npx create-next-app@latest invoicing-app --typescript
cd invoicing-app
npm install tailwindcss postcss autoprefixer
npx tailwindcss init
﻿
3.2 Siapkan Tailwind CSS
Konfigurasikan Tailwind dengan memperbarui tailwind.config.js dan menambahkan gaya ke globals.css.
Di tailwind.config.js:
JS
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
﻿
Di styles/globals.css:
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
﻿
3.3 Instal Parse SDK dan Layanan Tambahan
Instal dependensi yang diperlukan untuk Parse, Clerk, Stripe, dan Resend.
Bash
npm install parse @clerk/clerk-next stripe resend
npm install parse @clerk/clerk-next stripe resend
﻿
3.4 Inisialisasi Parse SDK di Next.js
Di pages/_app.tsx, inisialisasi Parse SDK dengan kredensial Back4App Anda:
TypeScript
import { ClerkProvider } from '@clerk/clerk-react';
import Parse from 'parse';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

function MyApp({ Component, pageProps }) {
  return (
    <ClerkProvider>
      <Component {...pageProps} />
    </ClerkProvider>
  );
}

export default MyApp;
import { ClerkProvider } from '@clerk/clerk-react';
import Parse from 'parse';

Parse.initialize('YOUR_APP_ID', 'YOUR_JAVASCRIPT_KEY');
Parse.serverURL = 'https://parseapi.back4app.com';

function MyApp({ Component, pageProps }) {
  return (
    <ClerkProvider>
      <Component {...pageProps} />
    </ClerkProvider>
  );
}

export default MyApp;
﻿
Ganti 'YOUR_APP_ID' dan 'YOUR_JAVASCRIPT_KEY' dengan kredensial Back4App Anda.
4. Mengimplementasikan Autentikasi Pengguna
4.1 Integrasi Clerk untuk Autentikasi
Siapkan Clerk untuk autentikasi. Pergi ke dasbor Clerk, buat aplikasi, dan ambil kunci API Anda. Perbarui .env.local file Anda dengan kunci Clerk.
Bash
NEXT_PUBLIC_CLERK_FRONTEND_API=your-clerk-frontend-api
CLERK_API_KEY=your-clerk-api-key
NEXT_PUBLIC_CLERK_FRONTEND_API=your-clerk-frontend-api
CLERK_API_KEY=your-clerk-api-key
﻿
Sekarang buat pages/sign-in.tsx dan pages/sign-up.tsx untuk fungsionalitas masuk dan daftar menggunakan komponen Clerk.
Di pages/sign-in.tsx:
Text
import { SignIn } from '@clerk/clerk-react';

export default function SignInPage() {
  return <SignIn />;
}
import { SignIn } from '@clerk/clerk-react';

export default function SignInPage() {
  return <SignIn />;
}
﻿
Di pages/sign-up.tsx:
Text
import { SignUp } from '@clerk/clerk-react';

export default function SignUpPage() {
  return <SignUp />;
}
import { SignUp } from '@clerk/clerk-react';

export default function SignUpPage() {
  return <SignUp />;
}
﻿
5. Manajemen Organisasi dan Pelanggan
5.1 Buat Organisasi
Pengguna dapat membuat organisasi yang mereka miliki. Buat halaman pages/organizations/new.tsx untuk membuat organisasi baru.
Text
import { useState } from 'react';
import Parse from 'parse';

export default function NewOrganization() {
  const [name, setName] = useState('');

  const handleCreateOrganization = async () => {
    const Organization = Parse.Object.extend('Organization');
    const organization = new Organization();
    organization.set('name', name);
    organization.set('ownerId', Parse.User.current());

    try {
      await organization.save();
      alert('Organization created successfully!');
    } catch (error) {
      console.error('Error creating organization:', error);
    }
  };

  return (
    <div>
      <h1>Create New Organization</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Organization Name"
      />
      <button onClick={handleCreateOrganization}>Create</button>
    </div>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function NewOrganization() {
  const [name, setName] = useState('');

  const handleCreateOrganization = async () => {
    const Organization = Parse.Object.extend('Organization');
    const organization = new Organization();
    organization.set('name', name);
    organization.set('ownerId', Parse.User.current());

    try {
      await organization.save();
      alert('Organization created successfully!');
    } catch (error) {
      console.error('Error creating organization:', error);
    }
  };

  return (
    <div>
      <h1>Create New Organization</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Organization Name"
      />
      <button onClick={handleCreateOrganization}>Create</button>
    </div>
  );
}
﻿
5.2 Mengelola Pelanggan
Buat halaman manajemen pelanggan pages/customers/new.tsx untuk menambahkan pelanggan baru.
Text
import { useState } from 'react';
import Parse from 'parse';

export default function NewCustomer() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleCreateCustomer = async () => {
    const Customer = Parse.Object.extend('Customer');
    const customer = new Customer();
    customer.set('name', name);
    customer.set('email', email);
    customer.set('organizationId', Parse.User.current().get('organizationId'));

    try {
      await customer.save();
      alert('Customer created successfully!');
    } catch (error) {
      console.error('Error creating customer:', error);
    }
  };

  return (
    <div>
      <h1>Create New Customer</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Customer Name"
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Customer Email"
      />
      <button onClick={handleCreateCustomer}>Create</button>
    </div>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function NewCustomer() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleCreateCustomer = async () => {
    const Customer = Parse.Object.extend('Customer');
    const customer = new Customer();
    customer.set('name', name);
    customer.set('email', email);
    customer.set('organizationId', Parse.User.current().get('organizationId'));

    try {
      await customer.save();
      alert('Customer created successfully!');
    } catch (error) {
      console.error('Error creating customer:', error);
    }
  };

  return (
    <div>
      <h1>Create New Customer</h1>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Customer Name"
      />
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Customer Email"
      />
      <button onClick={handleCreateCustomer}>Create</button>
    </div>
  );
}
﻿
6. Manajemen Faktur
6.1 Buat Faktur
Buat halaman pembuatan faktur pages/invoices/new.tsx untuk menghasilkan faktur baru.
Text
import { useState } from 'react';
import Parse from 'parse';

export default function NewInvoice() {
  const [invoiceNumber, setInvoiceNumber] = useState('');
  const [amount, setAmount] = useState(0);

  const handleCreateInvoice = async () => {
    const Invoice = Parse.Object.extend('Invoice');
    const invoice = new Invoice();
    invoice.set('invoiceNumber', invoiceNumber);
    invoice.set('amount', amount);
    invoice.set('organizationId', Parse.User.current().get('organizationId'));

    try {
      await invoice

.save();
      alert('Invoice created successfully!');
    } catch (error) {
      console.error('Error creating invoice:', error);
    }
  };

  return (
    <div>
      <h1>Create New Invoice</h1>
      <input
        type="text"
        value={invoiceNumber}
        onChange={(e) => setInvoiceNumber(e.target.value)}
        placeholder="Invoice Number"
      />
      <input
        type="number"
        value={amount}
        onChange={(e) => setAmount(parseFloat(e.target.value))}
        placeholder="Amount"
      />
      <button onClick={handleCreateInvoice}>Create</button>
    </div>
  );
}
import { useState } from 'react';
import Parse from 'parse';

export default function NewInvoice() {
  const [invoiceNumber, setInvoiceNumber] = useState('');
  const [amount, setAmount] = useState(0);

  const handleCreateInvoice = async () => {
    const Invoice = Parse.Object.extend('Invoice');
    const invoice = new Invoice();
    invoice.set('invoiceNumber', invoiceNumber);
    invoice.set('amount', amount);
    invoice.set('organizationId', Parse.User.current().get('organizationId'));

    try {
      await invoice

.save();
      alert('Invoice created successfully!');
    } catch (error) {
      console.error('Error creating invoice:', error);
    }
  };

  return (
    <div>
      <h1>Create New Invoice</h1>
      <input
        type="text"
        value={invoiceNumber}
        onChange={(e) => setInvoiceNumber(e.target.value)}
        placeholder="Invoice Number"
      />
      <input
        type="number"
        value={amount}
        onChange={(e) => setAmount(parseFloat(e.target.value))}
        placeholder="Amount"
      />
      <button onClick={handleCreateInvoice}>Create</button>
    </div>
  );
}
﻿
6.2 Melihat Faktur
Buat halaman pages/invoices/index.tsx untuk melihat semua faktur dengan opsi pengurutan dan penyaringan.
Text
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function InvoicesList() {
  const [invoices, setInvoices] = useState([]);

  useEffect(() => {
    const fetchInvoices = async () => {
      const Invoice = Parse.Object.extend('Invoice');
      const query = new Parse.Query(Invoice);
      const results = await query.find();
      setInvoices(results);
    };
    fetchInvoices();
  }, []);

  return (
    <div>
      <h1>Invoices</h1>
      {invoices.map(invoice => (
        <div key={invoice.id}>
          <h2>Invoice #{invoice.get('invoiceNumber')}</h2>
          <p>Amount: ${invoice.get('amount')}</p>
          <p>Status: {invoice.get('status')}</p>
        </div>
      ))}
    </div>
  );
}
import { useEffect, useState } from 'react';
import Parse from 'parse';

export default function InvoicesList() {
  const [invoices, setInvoices] = useState([]);

  useEffect(() => {
    const fetchInvoices = async () => {
      const Invoice = Parse.Object.extend('Invoice');
      const query = new Parse.Query(Invoice);
      const results = await query.find();
      setInvoices(results);
    };
    fetchInvoices();
  }, []);

  return (
    <div>
      <h1>Invoices</h1>
      {invoices.map(invoice => (
        <div key={invoice.id}>
          <h2>Invoice #{invoice.get('invoiceNumber')}</h2>
          <p>Amount: ${invoice.get('amount')}</p>
          <p>Status: {invoice.get('status')}</p>
        </div>
      ))}
    </div>
  );
}
﻿
7. Pemrosesan Pembayaran (Integrasi Stripe)
7.1 Siapkan Stripe Checkout
Untuk memproses pembayaran, integrasikan Stripe. Di pages/invoices/[id].tsx, implementasikan pembuatan tautan pembayaran menggunakan Stripe Checkout.
Text
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Stripe from 'stripe';

export default function InvoiceDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [invoice, setInvoice] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchInvoice = async () => {
      const Invoice = Parse.Object.extend('Invoice');
      const query = new Parse.Query(Invoice);
      query.equalTo('objectId', id);
      const result = await query.first();
      setInvoice(result);
    };
    fetchInvoice();
  }, [id]);

  const handlePayInvoice = async () => {
    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items: [
        {
          price_data: {
            currency: 'usd',
            product_data: { name: `Invoice #${invoice.get('invoiceNumber')}` },
            unit_amount: invoice.get('amount') * 100,
          },
          quantity: 1,
        },
      ],
      mode: 'payment',
      success_url: window.location.origin + '/success',
      cancel_url: window.location.origin + '/cancel',
    });
    window.location.href = session.url;
  };

  if (!invoice) return <div>Loading...</div>;

  return (
    <div>
      <h1>Invoice #{invoice.get('invoiceNumber')}</h1>
      <p>Amount: ${invoice.get('amount')}</p>
      <button onClick={handlePayInvoice}>Pay Now</button>
    </div>
  );
}
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import Stripe from 'stripe';

export default function InvoiceDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [invoice, setInvoice] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchInvoice = async () => {
      const Invoice = Parse.Object.extend('Invoice');
      const query = new Parse.Query(Invoice);
      query.equalTo('objectId', id);
      const result = await query.first();
      setInvoice(result);
    };
    fetchInvoice();
  }, [id]);

  const handlePayInvoice = async () => {
    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ['card'],
      line_items: [
        {
          price_data: {
            currency: 'usd',
            product_data: { name: `Invoice #${invoice.get('invoiceNumber')}` },
            unit_amount: invoice.get('amount') * 100,
          },
          quantity: 1,
        },
      ],
      mode: 'payment',
      success_url: window.location.origin + '/success',
      cancel_url: window.location.origin + '/cancel',
    });
    window.location.href = session.url;
  };

  if (!invoice) return <div>Loading...</div>;

  return (
    <div>
      <h1>Invoice #{invoice.get('invoiceNumber')}</h1>
      <p>Amount: ${invoice.get('amount')}</p>
      <button onClick={handlePayInvoice}>Pay Now</button>
    </div>
  );
}
﻿
8. Notifikasi Email (Integrasi Kirim Ulang)
8.1 Mengirim Email Faktur
Atur Resend untuk mengirim email faktur kepada klien.
Text
import { Resend } from 'resend';

export default async function sendInvoiceEmail(invoiceId) {
  const resend = new Resend(process.env.RESEND_API_KEY);
  const invoice = await fetchInvoiceDetails(invoiceId); // Function to fetch invoice details
  const customer = await fetchCustomerDetails(invoice.customerId);

  await resend.sendEmail({
    from: '[email protected]',
    to: customer.email,
    subject: `Invoice #${invoice.invoiceNumber}`,
    html: `<h1>Invoice #${invoice.invoiceNumber}</h1><p>Amount: ${invoice.amount}</p>`,
  });
}
import { Resend } from 'resend';

export default async function sendInvoiceEmail(invoiceId) {
  const resend = new Resend(process.env.RESEND_API_KEY);
  const invoice = await fetchInvoiceDetails(invoiceId); // Function to fetch invoice details
  const customer = await fetchCustomerDetails(invoice.customerId);

  await resend.sendEmail({
    from: 'no-reply@invoicingapp.com',
    to: customer.email,
    subject: `Invoice #${invoice.invoiceNumber}`,
    html: `<h1>Invoice #${invoice.invoiceNumber}</h1><p>Amount: ${invoice.amount}</p>`,
  });
}
﻿
9. Penyebaran di Vercel
Untuk menyebarkan aplikasi di Vercel, instal Vercel CLI dan lakukan penyebaran.
Bash
npm install -g vercel
vercel
npm install -g vercel
vercel
﻿
Konfigurasikan variabel lingkungan untuk Clerk, Stripe, Resend, dan Back4App di dasbor Vercel sebelum penyebaran.
10. Kesimpulan
Dalam tutorial ini, kami membangun sebuah Aplikasi Faktur yang lengkap dengan Next.js, terintegrasi dengan Back4App untuk backend, Clerk untuk otentikasi, Stripe untuk pembayaran, dan Resend untuk notifikasi email. Kami membahas manajemen pengguna dan organisasi, pembuatan faktur, pemrosesan pembayaran, dan penyebaran.
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Membangun Aplikasi Ticketing dengan Next.js, Vercel, dan Back4App
BERIKUTNYA
Tutorial Aplikasi Pemesanan Ruang Pertemuan dengan Back4App, Next.js dan Vercel