ENDFIELD

ENDFIELD

ENDFIELD GENERATOR

Platform generator code otomatis untuk mempercepat development fullstack application. Dengan ENDFIELD GENERATOR, Anda dapat membuat CRUD lengkap hanya dalam beberapa klik.

โšก

Cepat & Efisien

Generate code dalam hitungan detik

๐ŸŽฏ

Konsisten

Struktur code yang terstandarisasi

๐Ÿ”ง

Fleksibel

Customizable sesuai kebutuhan

๐Ÿ“Œ Fitur Utama

  • โœ… Auto-generate Model, Controller, Routes, Hooks
  • โœ… Real-time code editor dengan syntax highlighting
  • โœ… Multi-user collaboration dengan presence detection
  • โœ… Git integration untuk commit & push otomatis
  • โœ… Database sync untuk struktur tabel
  • โœ… Live chat untuk tim development
  • โœ… Persistent coding stats - waktu coding tersimpan otomatis setiap 30 detik

๐Ÿ”ง Core Backend yang Didukung

โœ“ ReadyExpress.js- Node.js framework (fast & minimal)
โœ“ ReadyAdonis.js- Full-featured Node.js framework
โณ IncomingLaravel- PHP framework (coming soon)

๐Ÿ‘จโ€๐Ÿ’ป Tentang ENDFIELD Generator

Dibuat oleh:Yutsuri Hiskeawa (ENDFIELD Team)
Framework:Nuxt 4 - The Intuitive Vue Framework
Tech Stack:
Vue 3TypeScriptTailwindCSSFirebase
Version:v2.0.0 (2026)

๐Ÿ“ Struktur Proyek

ENDFIELD GENERATOR terdiri dari beberapa proyek yang saling terintegrasi:

๐Ÿ”ง BE (Backend Utama)

Backend utama berbasis Node.js + Express untuk handle API generator dan CRUD operations.

BE/
โ”œโ”€โ”€ server/
โ”‚   โ”œโ”€โ”€ controllers/       # Business logic & API handlers
โ”‚   โ”‚   โ”œโ”€โ”€ generatorController.js   # Generator CRUD
โ”‚   โ”‚   โ”œโ”€โ”€ dynamicController.js     # Dynamic endpoints
โ”‚   โ”‚   โ””โ”€โ”€ authController.js        # Authentication
โ”‚   โ”œโ”€โ”€ models/            # Database models (Sequelize)
โ”‚   โ”œโ”€โ”€ routes/            # API route definitions
โ”‚   โ”œโ”€โ”€ middleware/        # Auth, validation, error handling
โ”‚   โ”œโ”€โ”€ helpers/           # Utility functions
โ”‚   โ”œโ”€โ”€ hooks/             # Database hooks (before/after save)
โ”‚   โ””โ”€โ”€ config/            # Database & app configuration
โ”œโ”€โ”€ package.json
โ””โ”€โ”€ ecosystem.config.cjs   # PM2 configuration

Teknologi yang digunakan:

Node.jsExpressSequelize ORMMySQL

๐ŸŽจ FE (Frontend Utama)

Frontend berbasis Vue 3 + Vite untuk aplikasi utama yang di-generate.

FE/
โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ views/             # Page components
โ”‚   โ”œโ”€โ”€ components/        # Reusable components
โ”‚   โ”œโ”€โ”€ router/            # Vue Router configuration
โ”‚   โ”œโ”€โ”€ stores/            # Pinia state management
โ”‚   โ”œโ”€โ”€ composables/       # Vue composables
โ”‚   โ””โ”€โ”€ plugins/           # Vue plugins
โ”œโ”€โ”€ template/              # Generator templates
โ”‚   โ”œโ”€โ”€ Form.txt           # Form template
โ”‚   โ”œโ”€โ”€ Landing.txt        # List/table template
โ”‚   โ””โ”€โ”€ service.txt        # API service template
โ””โ”€โ”€ add_route.cjs          # Script untuk auto-add routes

Teknologi yang digunakan:

Vue 3VitePiniaVue Router

โš™๏ธ generator-web (Proyek Ini)

Web interface untuk generator berbasis Nuxt 3. Ini adalah control panel untuk membuat dan mengedit code.

generator-web/
โ”œโ”€โ”€ app/
โ”‚   โ”œโ”€โ”€ pages/
โ”‚   โ”‚   โ”œโ”€โ”€ index.vue              # Dashboard & project list
โ”‚   โ”‚   โ”œโ”€โ”€ login.vue              # Authentication
โ”‚   โ”‚   โ”œโ”€โ”€ docs.vue               # Halaman ini
โ”‚   โ”‚   โ””โ”€โ”€ project/[id]/
โ”‚   โ”‚       โ”œโ”€โ”€ index.vue          # Code editor utama
โ”‚   โ”‚       โ””โ”€โ”€ history.vue        # Git history
โ”‚   โ”œโ”€โ”€ components/
โ”‚   โ”‚   โ”œโ”€โ”€ CodeEditor/            # Code editor components
โ”‚   โ”‚   โ”œโ”€โ”€ TableEditor.vue        # Database table editor
โ”‚   โ”‚   โ”œโ”€โ”€ ChatBox.vue            # Team chat
โ”‚   โ”‚   โ””โ”€โ”€ ModelSidebar.vue       # Model navigator
โ”‚   โ”œโ”€โ”€ composables/
โ”‚   โ”‚   โ”œโ”€โ”€ usePresence.ts         # User presence tracking
โ”‚   โ”‚   โ””โ”€โ”€ useHistoryService.ts   # Git integration
โ”‚   โ””โ”€โ”€ stores/
โ”‚       โ””โ”€โ”€ auth.ts                # Authentication store
โ””โ”€โ”€ nuxt.config.ts

Teknologi yang digunakan:

Nuxt 4 โšกVue 3TypeScriptFirebase Realtime DBTailwindCSS

๐Ÿ—‚๏ธ Proyek Lainnya

BE-MVG

Backend khusus untuk MVG (Multi-Vehicle Garage) system

bosbaut-be

Backend untuk aplikasi BosBaut (inventory & sales)

template-be-mvg

Template backend MVG untuk cloning project baru

postman-web

API testing & documentation tool (Nuxt 3)

โœ๏ธ Menggunakan Editor

Panduan lengkap untuk menggunakan code editor ENDFIELD GENERATOR.

1๏ธโƒฃ Membuat Proyek Baru

  1. Klik tombol "Add Project" di dashboard
  2. Masukkan nama project dan URL backend
  3. Klik "Create" untuk membuat project
  4. Project akan muncul di daftar dan siap digunakan

2๏ธโƒฃ Membuat Model Baru

  1. Buka project yang sudah dibuat
  2. Klik "Table Editor" di toolbar
  3. Definisikan nama tabel dan kolom-kolom yang dibutuhkan
  4. Klik "Generate" untuk membuat model, controller, routes, dan hooks
  5. Code akan otomatis ter-generate dan muncul di sidebar

3๏ธโƒฃ Edit Code

Cara mengedit:

  1. Pilih komponen dari sidebar (Model, Controller, Hook, Helper)
  2. Code akan muncul di editor dengan syntax highlighting
  3. Edit code sesuai kebutuhan
  4. Klik "Save" atau tekan Ctrl+S untuk menyimpan
  5. Sistem akan validasi syntax sebelum menyimpan

โš ๏ธ Perhatian:

Jika ada user lain yang sedang edit file yang sama, akan muncul warning untuk mencegah konflik.

4๏ธโƒฃ Sync ke Database

  1. Setelah model dibuat/diedit, klik "Sync Database"
  2. Sistem akan create/alter table di database sesuai model
  3. Tunggu hingga proses selesai (ada notifikasi sukses/error)
  4. Tabel database sudah siap digunakan

5๏ธโƒฃ Commit & Push

  1. Setelah selesai edit, klik "Git Commit & Push"
  2. Masukkan commit message yang deskriptif
  3. Klik "Commit & Push"
  4. Code akan di-push ke repository (background process)
  5. Cek history di tab "History" untuk melihat commit log

6๏ธโƒฃ Split Screen Mode

Cara menggunakan split screen:

  1. Klik tombol "Split Horizontal" atau "Split Vertical" di toolbar
  2. Editor akan terbagi menjadi 2 panel yang bisa digunakan secara bersamaan
  3. Drag & drop tab antar panel untuk memindahkan file
  4. Drag file dari sidebar langsung ke panel yang diinginkan
  5. Klik atau ketik di salah satu panel untuk fokus (panel aktif ditandai dengan animasi GIF)
  6. Tekan Ctrl+S untuk save file di panel yang sedang aktif

๐Ÿ’ก Tips Split Screen:

  • โ€ข Panel aktif memiliki border berwarna dan menampilkan animasi GIF
  • โ€ข Panel non-aktif akan tampak lebih redup (dimmed)
  • โ€ข Save selalu menggunakan file dari panel yang sedang aktif
  • โ€ข Cocok untuk membandingkan atau edit 2 file sekaligus (model vs controller)

๐ŸŽฏ Fitur Editor

โœจ Syntax Highlighting

Code diwarnai berdasarkan syntax (JavaScript, PHP, Blade, HTML, CSS, SQL, JSON, TypeScript)

๐ŸŽจ Tailwind CSS IntelliSense

Autocomplete Tailwind CSS classes dengan color preview untuk file Blade PHP. Support arbitrary values: text-[#hex]

๐Ÿ” Search & Replace

Cari dan ganti text dalam code dengan mudah (Ctrl+F)

โšก Auto-save

Shortcut Ctrl+S untuk save cepat dengan multi-panel support

๐Ÿ”’ Syntax Validation

Validasi syntax sebelum save untuk cegah error

๐ŸŽจ Color Picker

Color swatch untuk Tailwind color classes. Klik swatch untuk ubah warna dengan color picker visual

๐Ÿ‘ฅ Presence Detection

Lihat siapa saja yang sedang online dan edit file mana (real-time via Firebase)

๐Ÿ’ฌ Live Chat

Komunikasi real-time dengan tim, draggable chat window dengan notifikasi suara (Ctrl+K)

๐Ÿ–ฅ๏ธ Split Screen

Mode split horizontal/vertical untuk edit 2 file sekaligus seperti VS Code. Drag & drop file antar panel

๐ŸŽฏ Smart Focus Detection

Otomatis deteksi panel aktif dengan visual indicator (animasi GIF & border warna)

๐Ÿ“ Minimap

Minimap preview untuk navigasi cepat dalam file besar

๐Ÿ”„ Undo/Redo History

Unlimited undo/redo untuk wireframe changes (max 50 states)

โฑ๏ธ Auto-save Drafts

Drafts tersimpan otomatis di localStorage, tidak hilang saat refresh

๐Ÿ”” Conflict Warning

Warning otomatis jika user lain sedang edit file yang sama

๐Ÿ“œ Code History

Tracking semua perubahan code dengan diff viewer untuk rollback

๐ŸŒ Multi-language Support

Auto-detect language dari extension file (.js, .php, .blade.php, .html, .css, .json, .sql, .ts)

โš™๏ธ Teknologi Editor

Monaco Editor

Engine yang sama dengan VS Code, support IntelliSense, syntax highlighting, dan code completion

Firebase Realtime Database

Real-time collaboration, presence tracking, dan live chat

Vue 3 Composition API

Reactive state management untuk UI yang responsif

GitHub Dark Theme

Theme gelap nyaman untuk mata dengan syntax highlighting optimal

๐Ÿงฉ Komponen Generator

Setiap komponen yang di-generate memiliki fungsi spesifik dalam arsitektur aplikasi.

๐Ÿ—„๏ธ Model

File: server/models/{nama}.js

Model adalah representasi struktur database menggunakan Sequelize ORM. Mendefinisikan kolom, tipe data, relasi, dan validasi.

Contoh struktur model:

import { DataTypes } from 'sequelize';
export default (sequelize) => {
  const User = sequelize.define('m_user', {
    id: {
      type: DataTypes.UUID,
      defaultValue: DataTypes.UUIDV4,
      primaryKey: true
    },
    username: {
      type: DataTypes.STRING(100),
      allowNull: false,
      unique: true
    },
    email: DataTypes.STRING(255),
    isActive: {
      type: DataTypes.BOOLEAN,
      defaultValue: true
    }
  }, {
    tableName: 'm_user',
    timestamps: true
  });
  return User;
};

Fungsi utama:

  • Define struktur tabel dan kolom
  • Set tipe data (STRING, INTEGER, BOOLEAN, DATE, dll)
  • Validasi (allowNull, unique, length, dll)
  • Default values dan auto-increment
  • Relasi antar tabel (hasMany, belongsTo, dll)
  • Timestamps otomatis (createdAt, updatedAt)

๐ŸŽฎ Controller

File: server/controllers/{nama}Controller.js

Controller menangani business logic dan request/response handling. Berisi fungsi untuk CRUD operations.

Fungsi standar yang di-generate:

// GET all with pagination & filter
export const getAll = async (req, res) => { ... }

// GET by ID
export const getById = async (req, res) => { ... }

// POST create new
export const create = async (req, res) => { ... }

// PUT update by ID
export const update = async (req, res) => { ... }

// DELETE by ID
export const remove = async (req, res) => { ... }

// POST bulk create
export const bulkCreate = async (req, res) => { ... }

// DELETE bulk
export const bulkDelete = async (req, res) => { ... }

Fitur controller:

  • Pagination otomatis (limit, offset)
  • Dynamic filtering berdasarkan query params
  • Sorting (order by column ASC/DESC)
  • Error handling dengan try-catch
  • Response format standar (status, message, data)
  • Support untuk relasi (include models)

๐Ÿ›ฃ๏ธ Routes

File: server/routes/{nama}Routes.js

Routes mendefinisikan endpoint API dan mapping ke controller functions. Menggunakan Express Router.

Endpoint standar:

import express from 'express';
import * as controller from '../controllers/userController.js';

const router = express.Router();

router.get('/users', controller.getAll);
router.get('/users/:id', controller.getById);
router.post('/users', controller.create);
router.put('/users/:id', controller.update);
router.delete('/users/:id', controller.remove);
router.post('/users/bulk', controller.bulkCreate);
router.delete('/users/bulk', controller.bulkDelete);

export default router;

HTTP Methods:

  • GET - Mengambil data (list atau single)
  • POST - Membuat data baru
  • PUT - Update data existing
  • DELETE - Hapus data

๐Ÿช Hooks

File: server/hooks/{nama}Hooks.js

Hooks adalah fungsi yang dijalankan sebelum atau sesudah database operation (lifecycle hooks). Berguna untuk validasi, transformasi data, atau trigger aksi lain.

Jenis hooks yang tersedia:

export default (User) => {
  // Sebelum create
  User.beforeCreate(async (instance) => {
    // Hash password, generate slug, dll
  });

  // Setelah create
  User.afterCreate(async (instance) => {
    // Send email, log activity, dll
  });

  // Sebelum update
  User.beforeUpdate(async (instance) => {
    // Validasi, track changes, dll
  });

  // Setelah update
  User.afterUpdate(async (instance) => {
    // Update cache, notify, dll
  });

  // Sebelum delete
  User.beforeDestroy(async (instance) => {
    // Check dependencies, backup, dll
  });
};

Use cases umum:

  • Hash password sebelum save
  • Generate unique slug/code
  • Validasi business rules
  • Auto-populate fields (created_by, updated_by)
  • Send notification/email
  • Log audit trail
  • Update related records

๐Ÿ› ๏ธ Helpers

File: server/helpers/{nama}.js

Helper functions adalah utility functions yang bisa digunakan di berbagai tempat. Tidak terikat dengan model tertentu.

Contoh helper functions:

// Format response
export const successResponse = (data, message) => ({
  status: 'success',
  message,
  data
});

export const errorResponse = (message, error) => ({
  status: 'error',
  message,
  error: error?.message
});

// Generate unique code
export const generateCode = (prefix) => {
  const date = new Date();
  const timestamp = date.getTime();
  return `${prefix}-${timestamp}`;
};

// Pagination helper
export const paginate = (page, limit) => {
  const offset = (page - 1) * limit;
  return { limit, offset };
};

Kategori helpers:

  • Response formatting
  • Date/time manipulation
  • String formatting (slugify, capitalize, dll)
  • Number formatting (currency, percentage)
  • File upload handling
  • Token generation
  • Email sending

๐Ÿš€ Fitur Advanced

Fitur-fitur canggih yang membuat ENDFIELD GENERATOR berbeda dari generator lainnya.

๐ŸŽจ

Tailwind CSS IntelliSense for Blade

Autocomplete Tailwind classes di file Blade PHP seperti VS Code

โœจ Fitur IntelliSense:

  • โœ“
    Autocomplete ~900+ Tailwind utility classes

    Layout, Flexbox, Grid, Spacing, Typography, Border, Effects, Filters, Backdrop, Animations, Transform, Position, Display, Interactivity, SVG, dan lainnya

  • โœ“
    Color palette lengkap dengan preview

    20+ color families (slate, gray, red, blue, green, dll) dengan 11 shades (50-950). Muncul icon โ–  dengan hex code di suggestion

  • โœ“
    Color swatch & Color picker visual

    Klik color swatch di editor gutter untuk buka color picker. Pilih warna baru akan otomatis generate arbitrary values: text-[#hex]

  • โœ“
    Support arbitrary values

    Deteksi dan tampilkan color swatch untuk text-[#d82c2c], bg-[#fff], border-[#a1b2c3]

  • โœ“
    Smart trigger characters

    Autocomplete muncul otomatis saat ketik di dalam attribute class="..."

  • โœ“
    Responsive variants

    sm:, md:, lg:, xl:, 2xl: untuk responsive design

  • โœ“
    State variants

    hover:, focus:, active:, disabled:, dark:, first:, last:, odd:, even:, checked:, group-hover:, peer-focus:

๐Ÿ’ก Cara Pakai:

  1. 1. Buka file .blade.php di editor
  2. 2. Ketik class=" atau class='
  3. 3. Autocomplete muncul otomatis saat Anda mengetik
  4. 4. Lihat color preview di suggestion list dan color swatch di gutter
  5. 5. Klik color swatch untuk ubah warna dengan visual picker
๐Ÿ–ฅ๏ธ

Split Screen Mode

Edit 2 file sekaligus dengan smart panel detection

๐ŸŽฏ Fitur Split Screen:

  • โ–ธ
    Split Horizontal / Vertical

    Pilih orientasi yang nyaman: horizontal (atas-bawah) atau vertical (kiri-kanan)

  • โ–ธ
    Drag & Drop file antar panel

    Drag tab dari panel 1 ke panel 2 atau sebaliknya untuk pindah file

  • โ–ธ
    Drag file dari sidebar ke panel

    Buka file langsung di panel tertentu dengan drag dari sidebar

  • โ–ธ
    Smart focus detection

    Panel aktif ditandai dengan border berwarna + animasi GIF (yanto-logo.gif). Panel non-aktif dimmed

  • โ–ธ
    Independent scroll & cursor

    Setiap panel memiliki scroll position dan cursor position sendiri

  • โ–ธ
    Ctrl+S saves active panel

    Save selalu menggunakan file dari panel yang sedang fokus/aktif

๐Ÿ’ก Use Cases:

  • โ€ข Edit Model sambil lihat Controller untuk sinkronisasi field
  • โ€ข Buka Hook di panel 1, Controller di panel 2 untuk cek logic
  • โ€ข Compare before & after saat refactoring code
  • โ€ข Edit 2 related files tanpa perlu switch tab berulang kali
๐Ÿ“œ

Code History & Diff Viewer

Track semua perubahan code dengan visual diff

๐Ÿ” Fitur History:

  • โœ“Otomatis save history setiap kali save code atau sync database
  • โœ“Tersimpan di central server (server.qqltech.com:7124)
  • โœ“Filter by type: Wireframe, Custom Function, Custom Hook, Helper
  • โœ“Filter by model/table name
  • โœ“Track who made the change (editedBy)
  • โœ“Side-by-side diff viewer dengan Monaco Editor
  • โœ“Highlight added (green) dan removed (red) lines

๐Ÿ’ก Cara Akses History:

  1. 1. Klik tombol "History" di toolbar project
  2. 2. Pilih filter (type, table name, etc)
  3. 3. Klik history item untuk lihat detail changes
  4. 4. Diff viewer akan muncul dengan before/after code
  5. 5. Gunakan untuk rollback atau reference changes
๐Ÿ”€

Git Integration

Commit & Push langsung dari web interface

๐Ÿš€ Fitur Git:

  • โ–ธCommit semua changes dengan custom message
  • โ–ธOtomatis git add . sebelum commit
  • โ–ธPush langsung ke remote repository
  • โ–ธBackground process - tidak block UI
  • โ–ธReal-time feedback (success/error)

โš ๏ธ Prerequisites:

  • โ€ข Git repository sudah initialized di backend project
  • โ€ข Remote origin sudah configured
  • โ€ข Backend server punya access ke Git (SSH key atau credentials)
  • โ€ข PM2 environment variable GIT_REPO_PATH (optional)

๐Ÿ‘ฅ Kolaborasi Tim

Fitur collaboration real-time untuk tim development.

๐Ÿ‘๏ธ

User Presence Tracking

Lihat siapa yang online dan sedang edit apa

๐ŸŽฏ Fitur Presence:

  • โ—
    Real-time online status

    Indicator hijau untuk online, abu-abu untuk offline. Update via Firebase setiap detik

  • โ—
    Current file tracking

    Lihat file mana yang sedang dibuka/diedit oleh user lain

  • โ—
    Project filtering

    Hanya tampilkan user yang sedang di project yang sama (by server URL)

  • โ—
    Profile photo & username

    Tampilkan foto profil dan nama user untuk identifikasi mudah

  • โ—
    Conflict warning

    Warning otomatis muncul jika Anda buka file yang sedang diedit user lain

  • โ—
    Auto-disconnect detection

    Firebase onDisconnect otomatis set user offline saat close tab

๐Ÿ” Cara Lihat User Presence:

  1. 1. Klik icon "Active Users" di header (badge dengan jumlah user online)
  2. 2. Modal muncul dengan daftar user yang online di project yang sama
  3. 3. Lihat file mana yang sedang dibuka oleh setiap user
  4. 4. Badge warning muncul di file yang sedang conflict
๐Ÿ’ฌ

Live Chat Global

Komunikasi real-time dengan seluruh tim

๐Ÿ’ฌ Fitur Chat:

  • โœ“
    Real-time messaging

    Message muncul instant tanpa refresh. Powered by Firebase Realtime Database

  • โœ“
    Draggable chat window

    Drag & drop chat ke posisi manapun di layar. Position tersimpan

  • โœ“
    Sound notification

    Audio "jokowi-kaget.mp3" play otomatis untuk message dari user lain

  • โœ“
    Unread badge counter

    Badge merah dengan jumlah unread messages di button chat

  • โœ“
    Profile photo di message

    Setiap message tampilkan foto profil dan username pengirim

  • โœ“
    Keyboard shortcut Ctrl+K

    Toggle chat window dengan cepat

  • โœ“
    Auto-scroll to latest message

    Scroll otomatis ke message terbaru saat receive message baru

๐Ÿ’ก Tips Chat:

  • โ€ข Chat adalah global untuk semua project (chat/global/messages di Firebase)
  • โ€ข Message history tersimpan permanent di Firebase
  • โ€ข Last seen timestamp tersimpan di localStorage
  • โ€ข Notifikasi suara bisa di-mute jika mengganggu
  • โ€ข Chat window position tersimpan per browser
๐Ÿ“Š

Coding Stats Tracking

Track waktu coding Anda secara otomatis

โฑ๏ธ Fitur Stats:

  • ๐Ÿ“ˆ
    Auto-tracking saat coding

    Timer mulai otomatis saat buka project/editor

  • ๐Ÿ“ˆ
    Save ke Firebase setiap 30 detik

    Data tersimpan permanent, tidak hilang saat logout atau offline

  • ๐Ÿ“ˆ
    Total time accumulation

    Akumulasi total waktu coding dari semua session

  • ๐Ÿ“ˆ
    Leaderboard di dashboard

    Lihat ranking top coders berdasarkan total coding time

  • ๐Ÿ“ˆ
    Persistent across devices

    Stats tersinkron karena disimpan di Firebase, bukan localStorage

โš™๏ธ Data Structure:

Firebase Path: /presence/{userId}
{
  userId: "uuid",
  username: "john_doe",
  foto: "uploads/photo.jpg",
  isOnline: true,
  lastSeen: timestamp,
  serverUrl: "https://server.qqltech.com:7129",
  currentFile: "userController.js"
}

โš™๏ธ Parameter Backend

Dokumentasi lengkap parameter yang bisa digunakan dalam API calls.

๐Ÿ” Query Parameters (GET)

Parameter yang dikirim via URL query string untuk filtering dan pagination.

๐Ÿ“„ Pagination

GET /api/users?page=1&limit=20
page- Nomor halaman (default: 1)
limit- Jumlah data per halaman (default: 10)

๐Ÿ“Š Sorting

GET /api/users?order_by=createdAt&order_type=DESC
order_by- Nama kolom untuk sorting
order_type- ASC (ascending) atau DESC (descending)

๐Ÿ”Ž Filtering

GET /api/users?filter_column_username=john&filter_column_isActive=true
filter_column_{nama_kolom}- Filter berdasarkan nilai kolom tertentu

Contoh: filter_column_email=admin@mail.com

๐Ÿ” Search (LIKE)

GET /api/users?search_username=john
search_{nama_kolom}- Pencarian dengan LIKE (partial match)

Akan mencari record yang mengandung kata kunci (case-insensitive)

๐Ÿ”— Include Relations

GET /api/orders?include=customer,items
include- Include related models (comma-separated)

Menampilkan data dari tabel yang berelasi dalam satu request

๐Ÿ“ค Request Body (POST/PUT)

Data yang dikirim dalam body request untuk create/update operations.

โž• Create Single Record

POST /api/users
Content-Type: application/json

{
  "username": "john_doe",
  "email": "john@example.com",
  "password": "secret123",
  "isActive": true
}

โœ๏ธ Update Record

PUT /api/users/123e4567-e89b-12d3-a456-426614174000
Content-Type: application/json

{
  "email": "newemail@example.com",
  "isActive": false
}

Hanya field yang dikirim yang akan di-update, field lain tetap

๐Ÿ“ฆ Bulk Create

POST /api/users/bulk
Content-Type: application/json

{
  "data": [
    { "username": "user1", "email": "user1@mail.com" },
    { "username": "user2", "email": "user2@mail.com" },
    { "username": "user3", "email": "user3@mail.com" }
  ]
}

๐Ÿ—‘๏ธ Bulk Delete

DELETE /api/users/bulk
Content-Type: application/json

{
  "ids": [
    "123e4567-e89b-12d3-a456-426614174000",
    "123e4567-e89b-12d3-a456-426614174001",
    "123e4567-e89b-12d3-a456-426614174002"
  ]
}

๐Ÿ“ฅ Response Format

Semua response mengikuti format standar berikut:

โœ… Success Response

{
  "status": "success",
  "message": "Data retrieved successfully",
  "data": {
    "rows": [...],
    "count": 150,
    "page": 1,
    "totalPages": 15
  }
}

โŒ Error Response

{
  "status": "error",
  "message": "Validation error",
  "error": "Username already exists"
}

๐Ÿ—„๏ธ Database & Model

Panduan bekerja dengan database dan Sequelize ORM.

๐Ÿ“Š Tipe Data Sequelize

STRING(length)

VARCHAR - text dengan panjang tertentu

TEXT

TEXT - text panjang tanpa limit

INTEGER

INT - angka bulat

BIGINT

BIGINT - angka bulat besar

FLOAT / DOUBLE

Angka desimal

DECIMAL(p, s)

Desimal presisi (untuk uang)

BOOLEAN

true/false

DATE

Tanggal dan waktu

DATEONLY

Hanya tanggal (tanpa waktu)

UUID

Unique identifier (primary key)

JSON

Data JSON object

ENUM(...values)

Pilihan terbatas

โœ”๏ธ Validasi Kolom

allowNull: false

Field wajib diisi (NOT NULL)

unique: true

Nilai harus unik di seluruh tabel

defaultValue: 'value'

Nilai default jika tidak diisi

primaryKey: true

Tandai sebagai primary key

autoIncrement: true

Auto-increment untuk INTEGER

validate: { isEmail: true }

Validasi format email

๐Ÿ”— Relasi Antar Tabel

One-to-Many (hasMany)

User.hasMany(Order, { foreignKey: 'user_id' });
Order.belongsTo(User, { foreignKey: 'user_id' });

Satu user punya banyak order

One-to-One (hasOne)

User.hasOne(Profile, { foreignKey: 'user_id' });
Profile.belongsTo(User, { foreignKey: 'user_id' });

Satu user punya satu profile

Many-to-Many (belongsToMany)

User.belongsToMany(Role, { through: 'user_roles' });
Role.belongsToMany(User, { through: 'user_roles' });

Banyak user punya banyak role (via junction table)

๐Ÿ”Œ API Endpoints

Dokumentasi lengkap API endpoints yang tersedia di ENDFIELD GENERATOR.

โš™๏ธ Generator API

POST/api/generator/generate-crud

Generate CRUD lengkap untuk tabel tertentu

Body: { "tableName": "m_customer" }
GET/api/generator/components

Get list semua komponen yang sudah di-generate

GET/api/generator/component/:type/:name

Get code dari komponen tertentu

Params: type (model/controller/hook/helper), name

PUT/api/generator/component/:type/:name

Update code komponen

Body: { "content": "...code baru..." }
DELETE/api/generator/component/:name

Hapus semua file komponen (model, controller, routes, hooks)

POST/api/generator/commit-push

Git commit & push changes

Body: { "message": "Add customer module" }

๐Ÿ“ Project API

GET/api/gen-projects

Get list semua project user

POST/api/gen-projects

Create project baru

Body: {
ย ย "project": "My App",
ย ย "url_project": "https://api.myapp.com",
ย ย "gen_login_id": "user-uuid"
}
DELETE/api/gen-projects/:id

Hapus project

๐Ÿ” Authentication API

POST/api/gen-login/login

Login user

Body: {
ย ย "username": "admin",
ย ย "password": "password123"
}
GET/api/gen-login/me

Get current user info

Header: Authorization: Bearer {token}

๐Ÿš€ Deployment

Panduan deploy aplikasi ke production environment.

๐Ÿ”ง Deploy Backend (PM2)

Backend menggunakan PM2 untuk process management. File konfigurasi: ecosystem.config.cjs

Langkah deployment:

  1. npm install
  2. cp .env.example .env (setup environment variables)
  3. pm2 start ecosystem.config.cjs
  4. pm2 save (save process list)
  5. pm2 startup (auto-start on reboot)

๐Ÿ’ก PM2 Commands:

  • pm2 list - List running processes
  • pm2 logs - View logs
  • pm2 restart all - Restart all processes
  • pm2 stop all - Stop all processes

๐ŸŽจ Deploy Frontend (Vercel)

Frontend (Vue/Nuxt) bisa di-deploy ke Vercel atau Netlify.

Deploy ke Vercel:

  1. Install Vercel CLI: npm i -g vercel
  2. Login: vercel login
  3. Deploy: vercel
  4. Production: vercel --prod

โœ… Auto-deploy:

Hubungkan repository GitHub ke Vercel untuk auto-deploy setiap push ke main branch.

๐Ÿ—„๏ธ Database Setup

Setup database MySQL untuk production.

Environment Variables (.env):

DB_HOST=localhost
DB_PORT=3306
DB_NAME=generator_db
DB_USER=root
DB_PASS=your_password
DB_DIALECT=mysql

JWT_SECRET=your_secret_key
PORT=7124

โš ๏ธ Important:

Pastikan database sudah dibuat sebelum menjalankan aplikasi. Sequelize akan auto-create tables jika belum ada.

๐Ÿ’ก Tips & Tricks

Tips dan best practices untuk menggunakan ENDFIELD GENERATOR secara efektif.

๐ŸŽฏ Penamaan Konsisten

Gunakan naming convention: m_ untuk master data, t_ untuk transaksi, d_ untuk detail/child table.

โšก Gunakan Shortcuts

  • Ctrl+S - Save code
  • Ctrl+F - Search dalam code
  • Ctrl+K - Toggle chat

๐Ÿ”„ Sync Database Regular

Lakukan sync database setelah membuat/edit model untuk memastikan struktur tabel up-to-date.

๐Ÿ’พ Commit Message yang Jelas

Gunakan commit message deskriptif: "Add customer CRUD", "Fix validation in order controller", dll.

๐Ÿ‘ฅ Cek User Presence

Sebelum edit file, cek apakah ada user lain yang sedang edit file yang sama untuk hindari konflik.

๐Ÿงช Test API di Postman

Setelah generate CRUD, test semua endpoint di Postman untuk memastikan berfungsi dengan baik.

๐Ÿ”’ Backup Sebelum Edit Besar

Untuk perubahan besar, backup code dulu atau buat branch baru di Git.

๐Ÿ“š Gunakan Hooks untuk Logic Reusable

Taruh logic yang reusable (hash password, generate code, dll) di hooks agar bisa dipakai otomatis.

๐Ÿ“Š Coding Stats Tersimpan Otomatis

Waktu coding Anda tersimpan otomatis setiap 30 detik ke Firebase. Data tidak akan hilang meskipun logout atau offline. Saat login kembali, akumulasi waktu akan dilanjutkan dari terakhir kali disimpan.

๐Ÿ–ฅ๏ธ Manfaatkan Split Screen

Gunakan split screen untuk produktivitas maksimal. Cocok untuk membandingkan model dengan controller, atau edit controller sambil melihat hooks-nya. Drag & drop file antar panel dengan mudah.

โŒจ๏ธ Keyboard Shortcuts

Save code (active panel)Ctrl+S
Search in codeCtrl+F
Toggle chatCtrl+K
Close modalEsc

๐Ÿ’ก Split Screen Tips: Ctrl+S akan selalu save file dari panel yang sedang aktif (panel dengan border berwarna dan animasi GIF). Klik atau ketik di panel untuk mengaktifkannya.

ยฉ 2026 ENDFIELD GENERATOR - Code Generation Tools

Built with ๐Ÿ’™ using Nuxt 4, Vue 3, TypeScript, TailwindCSS, Firebase & Sequelize

Created by Fahrizal Rahman & ENDFIELD Team