NextJS Templates
Membangun Aplikasi Ticketing dengan Next.js, Vercel, dan Back4App

30min
Dalam tutorial ini, kita akan membangun sebuah Sistem Tiket menggunakan Next.js dengan router aplikasi, Back4App sebagai layanan backend, dan Tailwind CSS untuk styling. Aplikasi ini memungkinkan pengguna untuk membuat, memperbarui, melihat, dan menghapus tiket, sambil memanfaatkan Parse Server di Back4App untuk manajemen database.
1. Prasyarat
Sebelum memulai, pastikan Anda memiliki:
Node.js terinstal di mesin Anda (Panduan Instalasi Node.js).
Akun Back4App (Daftar gratis).
Akun Vercel untuk penyebaran (Daftar untuk Vercel).
2. Menyiapkan Back4App
Masuk ke dasbor Back4App Anda dan buat proyek baru.
Navigasikan ke Data Browser dan buat kelas baru bernama Tiket dengan skema berikut:
Nama Bidang
Tipe
judul
String
deskripsi
String
kategori
String
prioritas
Nomor
kemajuan
Nomor
status
String
dibuatPada
Tanggal     (dihasilkan secara otomatis)
diperbaruiPada
Tanggal     (dihasilkan secara otomatis)
3. Menyiapkan Frontend (Next.js)
3.1 Buat Proyek Next.js Baru
Jalankan perintah berikut untuk membuat proyek Next.js baru:
Bash
npx create-next-app@latest ticketing-app
cd ticketing-app
npx create-next-app@latest ticketing-app
cd ticketing-app
﻿
3.2 Instal Dependensi
Instal Tailwind CSS, Font Awesome, dan Parse SDK untuk operasi backend:
Bash
npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome-free parse
npx tailwindcss init -p
npm install tailwindcss postcss autoprefixer @fortawesome/fontawesome-free parse
npx tailwindcss init -p
﻿
3.3 Siapkan Tailwind CSS
Edit file tailwind.config.js untuk mengonfigurasi jalur konten Tailwind CSS:
JS
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
﻿
Di styles/globals.css, tambahkan impor Tailwind:
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;
﻿
3.4 Buat Struktur Proyek
Mengikuti struktur yang disediakan, buat direktori dan komponen yang diperlukan.
Struktur Direktori:
Text
/app
  /tickets
    /[id]
      page.js
  layout.js
  page.js
/components
  DeleteBlock.jsx
  Nav.jsx
  PriorityDisplay.jsx
  ProgressDisplay.jsx
  StatusDisplay.jsx
  TicketCard.jsx
  TicketForm.jsx
/lib
  parseClient.js
/app
  /tickets
    /[id]
      page.js
  layout.js
  page.js
/components
  DeleteBlock.jsx
  Nav.jsx
  PriorityDisplay.jsx
  ProgressDisplay.jsx
  StatusDisplay.jsx
  TicketCard.jsx
  TicketForm.jsx
/lib
  parseClient.js
﻿
4. Menyiapkan Klien Parse
Di folder /lib , buat file parseClient.js untuk mengonfigurasi SDK Parse.
JS
import Parse from 'parse';

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

export default Parse;
import Parse from 'parse';

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

export default Parse;
﻿
Ganti 'YOUR_APP_ID' dan 'YOUR_JS_KEY' dengan kredensial proyek Back4App Anda.
5. Membuat Komponen Utama
5.1 Formulir Tiket
Komponen ini akan menangani pembuatan dan pembaruan tiket.
Di /components/TicketForm.jsx, buat yang berikut:
JS
import { useState } from 'react';
import Parse from '../lib/parseClient';

export default function TicketForm({ ticket }) {
  const [title, setTitle] = useState(ticket?.title || '');
  const [description, setDescription] = useState(ticket?.description || '');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Ticket = Parse.Object.extend('Ticket');
    const newTicket = ticket || new Ticket();
    newTicket.set('title', title);
    newTicket.set('description', description);

    try {
      await newTicket.save();
      alert('Ticket saved successfully!');
    } catch (error) {
      console.error('Error saving ticket:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
        required
      />
      <textarea
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="Description"
        required
      />
      <button type="submit">Save Ticket</button>
    </form>
  );
}
import { useState } from 'react';
import Parse from '../lib/parseClient';

export default function TicketForm({ ticket }) {
  const [title, setTitle] = useState(ticket?.title || '');
  const [description, setDescription] = useState(ticket?.description || '');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const Ticket = Parse.Object.extend('Ticket');
    const newTicket = ticket || new Ticket();
    newTicket.set('title', title);
    newTicket.set('description', description);

    try {
      await newTicket.save();
      alert('Ticket saved successfully!');
    } catch (error) {
      console.error('Error saving ticket:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="Title"
        required
      />
      <textarea
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        placeholder="Description"
        required
      />
      <button type="submit">Save Ticket</button>
    </form>
  );
}
﻿
5.2 Kartu Tiket
Komponen ini akan menampilkan informasi tiket individu.
Di /components/TicketCard.jsx:
JS
import Link from 'next/link';
import ProgressDisplay from './ProgressDisplay';

export default function TicketCard({ ticket }) {
  return (
    <div className="border p-4">
      <h2>{ticket.title}</h2>
      <p>{ticket.description}</p>
      <ProgressDisplay progress={ticket.progress} />
      <Link href={`/tickets/${ticket.objectId}`}>Edit</Link>
    </div>
  );
}
import Link from 'next/link';
import ProgressDisplay from './ProgressDisplay';

export default function TicketCard({ ticket }) {
  return (
    <div className="border p-4">
      <h2>{ticket.title}</h2>
      <p>{ticket.description}</p>
      <ProgressDisplay progress={ticket.progress} />
      <Link href={`/tickets/${ticket.objectId}`}>Edit</Link>
    </div>
  );
}
﻿
5.3 HapusBlok
Komponen konfirmasi untuk menghapus tiket:
Di /components/DeleteBlock.jsx:
JS
import Parse from '../lib/parseClient';

export default function DeleteBlock({ ticketId, onDelete }) {
  const handleDelete = async () => {
    const query = new Parse.Query('Ticket');
    const ticket = await query.get(ticketId);

    try {
      await ticket.destroy();
      alert('Ticket deleted successfully');
      onDelete();
    } catch (error) {
      console.error('Error deleting ticket:', error);
    }
  };

  return (
    <button onClick={handleDelete}>Delete Ticket</button>
  );
}
import Parse from '../lib/parseClient';

export default function DeleteBlock({ ticketId, onDelete }) {
  const handleDelete = async () => {
    const query = new Parse.Query('Ticket');
    const ticket = await query.get(ticketId);

    try {
      await ticket.destroy();
      alert('Ticket deleted successfully');
      onDelete();
    } catch (error) {
      console.error('Error deleting ticket:', error);
    }
  };

  return (
    <button onClick={handleDelete}>Delete Ticket</button>
  );
}
﻿
5.4 TampilkanProgres
Komponen ini menunjukkan progres sebagai bilah persentase:
Di /components/ProgressDisplay.jsx:
JS
export default function ProgressDisplay({ progress }) {
  return (
    <div>
      <div className="w-full bg-gray-200 rounded">
        <div
          className="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded"
          style={{ width: `${progress}%` }}
        >
          {progress}%
        </div>
      </div>
    </div>
  );
}
export default function ProgressDisplay({ progress }) {
  return (
    <div>
      <div className="w-full bg-gray-200 rounded">
        <div
          className="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded"
          style={{ width: `${progress}%` }}
        >
          {progress}%
        </div>
      </div>
    </div>
  );
}
﻿
5.4 TampilkanProgres
6. Halaman dan Routing
6.1 Daftar Tiket
Di /app/page.js, tampilkan daftar tiket:
JS
import { useEffect, useState } from 'react';
import Parse from '../lib/parseClient';
import TicketCard from '../components/TicketCard';

export default function Home() {
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const fetchTickets = async () => {
      const query = new Parse.Query('Ticket');
      const results = await query.find();
      setTickets(results);
    };
    fetchTickets();
  }, []);

  return (
    <div>
      <h1>Tickets</h1>
      {tickets.map(ticket => (
        <TicketCard key={ticket.id} ticket={ticket} />
      ))}
    </div>
  );
}
import { useEffect, useState } from 'react';
import Parse from '../lib/parseClient';
import TicketCard from '../components/TicketCard';

export default function Home() {
  const [tickets, setTickets] = useState([]);

  useEffect(() => {
    const fetchTickets = async () => {
      const query = new Parse.Query('Ticket');
      const results = await query.find();
      setTickets(results);
    };
    fetchTickets();
  }, []);

  return (
    <div>
      <h1>Tickets</h1>
      {tickets.map(ticket => (
        <TicketCard key={ticket.id} ticket={ticket} />
      ))}
    </div>
  );
}
﻿
6.2 Detail dan Edit Tiket
Di /app/tickets/[id]/page.js:
JS
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Parse from '../../../lib/parseClient';
import TicketForm from '../../../components/TicketForm';
import DeleteBlock from '../../../components/DeleteBlock';

export default function TicketDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [ticket, setTicket] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchTicket = async () => {
      const query = new Parse.Query('Ticket');
      const result = await query.get(id);
      setTicket(result);
    };
    fetchTicket();
  }, [id]);

  const handleDelete = () => {
    router.push('/');
  };

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

  return (
    <div>
      <TicketForm ticket={ticket} />
      <DeleteBlock ticketId={ticket.id} onDelete={handleDelete} />
    </div>
  );
}
import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Parse from '../../../lib/parseClient';
import TicketForm from '../../../components/TicketForm';
import DeleteBlock from '../../../components/DeleteBlock';

export default function TicketDetail() {
  const router = useRouter();
  const { id } = router.query;
  const [ticket, setTicket] = useState(null);

  useEffect(() => {
    if (!id) return;
    const fetchTicket = async () => {
      const query = new Parse.Query('Ticket');
      const result = await query.get(id);
      setTicket(result);
    };
    fetchTicket();
  }, [id]);

  const handleDelete = () => {
    router.push('/');
  };

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

  return (
    <div>
      <TicketForm ticket={ticket} />
      <DeleteBlock ticketId={ticket.id} onDelete={handleDelete} />
    </div>
  );
}
﻿
7. Menerapkan ke Vercel 
7.1: Buat Akun Vercel
Jika Anda belum memiliki akun Vercel, kunjungi vercel.com dan buat akun.
Anda dapat mendaftar dengan GitHub, GitLab, atau Bitbucket. Vercel memudahkan untuk menghubungkan repositori Anda langsung untuk penerapan.
7.2: Dorong Kode Anda ke GitHub
Untuk menerapkan aplikasi Anda di Vercel, Anda perlu memiliki proyek Anda yang dihosting di platform kontrol versi seperti GitHub (atau GitLab/Bitbucket).
Jika proyek Anda belum ada di GitHub, ikuti langkah-langkah ini:
Inisialisasi git di direktori proyek Anda:
bashCopy codegit init
Tambahkan proyek Anda ke GitHub:
bashCopy codegit add .
git commit -m "Komit awal"
git branch -M main
git remote add origin https://github.com/YOUR_GITHUB_USERNAME/ticketing-app.git
git push -u origin main
7.3: Instal Vercel CLI (Opsional) 
Jika Anda lebih suka menerapkan langsung dari baris perintah, instal Vercel CLI secara global:
bashCopy codenpm install -g vercel
Sebagai alternatif, Anda dapat menerapkan melalui dasbor Vercel, yang akan kami bahas selanjutnya.
7.4: Hubungkan Repositori GitHub Anda ke Vercel
Pergi ke Vercel.
Klik Proyek Baru.
Pilih repositori Git yang berisi proyek Next.js Anda.
Konfigurasi proyek Anda:
Vercel akan secara otomatis mendeteksi bahwa ini adalah proyek Next.js dan menerapkan pengaturan build yang benar.
Atur Direktori Root ke folder proyek (jika perlu).
7.5: Atur Variabel Lingkungan 
Anda perlu mengonfigurasi kredensial Back4App Anda dan variabel lingkungan lainnya di Vercel.
Di Pengaturan Proyek Vercel, pergi ke bagian Variabel Lingkungan.
Tambahkan variabel lingkungan berikut:
7.6: Atur Konfigurasi Parse di .env.local (Opsional)
Jika Anda menggunakan variabel lingkungan lokal selama pengembangan, pastikan untuk membuat file .env.local di direktori root proyek Anda dengan variabel berikut:
bashCopy codeNEXT_PUBLIC_PARSE_APP_ID=YOUR_APP_ID
NEXT_PUBLIC_PARSE_JS_KEY=YOUR_JS_KEY
NEXT_PUBLIC_PARSE_SERVER_URL=https://parseapi.back4app.com
Variabel lingkungan ini juga akan digunakan oleh Vercel setelah mereka diatur di dasbor Vercel.
7.7: Konfigurasi Pengaturan Build (Opsional)
Pastikan bahwa versi Node.js dan perintah build telah dikonfigurasi dengan benar (Vercel mendeteksi ini secara otomatis).
Untuk aplikasi Next.js, pengaturan default harusnya:
Perintah build: npm run build
Direktori output: .next/
7.8: Deploy Proyek
Setelah Anda menghubungkan repositori GitHub Anda, Vercel akan secara otomatis memicu proses build dan deployment.
Anda dapat melihat status build Anda di dasbor Vercel.
7.9: Periksa Log Deployment 
Jika ada masalah yang muncul selama deployment, Anda dapat memeriksa log deployment untuk melakukan debug.
7.10: Akses Aplikasi yang Dideploy 
Setelah deployment berhasil, Vercel akan memberikan Anda URL unik di mana aplikasi Next.js Anda dapat diakses. Anda dapat mengunjungi URL tersebut untuk mengakses Aplikasi Tiket yang telah dideploy.
Misalnya: https://your-app-name.vercel.app/
8. Memastikan Deployment yang Lancar
Kredensial Back4App: Periksa kembali bahwa variabel lingkungan Back4App Anda telah diatur dengan benar di .env.local (untuk pengembangan lokal) dan di dasbor Vercel (untuk produksi).
CORS (Cross-Origin Resource Sharing): Pastikan bahwa Back4App mengizinkan URL Vercel Anda dalam pengaturan CORS-nya, yang dapat Anda konfigurasi di dasbor Back4App di bawah Keamanan.
Uji API Anda: Sebelum melakukan deployment, uji interaksi API Back4App Anda secara lokal untuk memastikan semuanya berjalan lancar.
﻿
9. Kesimpulan
Dengan langkah-langkah ini, Aplikasi Tiket Next.js Anda sekarang seharusnya telah dideploy di Vercel, menggunakan Back4App untuk backend. Ini menyelesaikan siklus pengembangan penuh, dari pengaturan Back4App, membuat frontend di Next.js, hingga mendepoy aplikasi secara langsung di Vercel.
Jika Anda ingin melakukan pembaruan, cukup dorong perubahan ke repositori GitHub Anda, dan Vercel akan secara otomatis memicu deployment baru.
Nama Bidang	Tipe
judul	String
deskripsi	String
kategori	String
prioritas	Nomor
kemajuan	Nomor
status	String
dibuatPada	Tanggal (dihasilkan secara otomatis)
diperbaruiPada	Tanggal (dihasilkan secara otomatis)
Diperbarui 24 Jan 2025
Apakah halaman ini membantu Anda?
SEBELUMNYA
Bagaimana Membangun Backend untuk ReactJS?
BERIKUTNYA
Tutorial Aplikasi Penagihan dengan Next.js, Vercel & Back4app