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
๐จโ๐ป Tentang ENDFIELD Generator
๐ 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:
๐จ 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:
โ๏ธ 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:
๐๏ธ 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
- Klik tombol "Add Project" di dashboard
- Masukkan nama project dan URL backend
- Klik "Create" untuk membuat project
- Project akan muncul di daftar dan siap digunakan
2๏ธโฃ Membuat Model Baru
- Buka project yang sudah dibuat
- Klik "Table Editor" di toolbar
- Definisikan nama tabel dan kolom-kolom yang dibutuhkan
- Klik "Generate" untuk membuat model, controller, routes, dan hooks
- Code akan otomatis ter-generate dan muncul di sidebar
3๏ธโฃ Edit Code
Cara mengedit:
- Pilih komponen dari sidebar (Model, Controller, Hook, Helper)
- Code akan muncul di editor dengan syntax highlighting
- Edit code sesuai kebutuhan
- Klik "Save" atau tekan Ctrl+S untuk menyimpan
- 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
- Setelah model dibuat/diedit, klik "Sync Database"
- Sistem akan create/alter table di database sesuai model
- Tunggu hingga proses selesai (ada notifikasi sukses/error)
- Tabel database sudah siap digunakan
5๏ธโฃ Commit & Push
- Setelah selesai edit, klik "Git Commit & Push"
- Masukkan commit message yang deskriptif
- Klik "Commit & Push"
- Code akan di-push ke repository (background process)
- Cek history di tab "History" untuk melihat commit log
6๏ธโฃ Split Screen Mode
Cara menggunakan split screen:
- Klik tombol "Split Horizontal" atau "Split Vertical" di toolbar
- Editor akan terbagi menjadi 2 panel yang bisa digunakan secara bersamaan
- Drag & drop tab antar panel untuk memindahkan file
- Drag file dari sidebar langsung ke panel yang diinginkan
- Klik atau ketik di salah satu panel untuk fokus (panel aktif ditandai dengan animasi GIF)
- 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 baruPUT- Update data existingDELETE- 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. Buka file .blade.php di editor
- 2. Ketik
class="atauclass=' - 3. Autocomplete muncul otomatis saat Anda mengetik
- 4. Lihat color preview di suggestion list dan color swatch di gutter
- 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. Klik tombol "History" di toolbar project
- 2. Pilih filter (type, table name, etc)
- 3. Klik history item untuk lihat detail changes
- 4. Diff viewer akan muncul dengan before/after code
- 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
onDisconnectotomatis set user offline saat close tab
๐ Cara Lihat User Presence:
- 1. Klik icon "Active Users" di header (badge dengan jumlah user online)
- 2. Modal muncul dengan daftar user yang online di project yang sama
- 3. Lihat file mana yang sedang dibuka oleh setiap user
- 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
page- Nomor halaman (default: 1)limit- Jumlah data per halaman (default: 10)๐ Sorting
order_by- Nama kolom untuk sortingorder_type- ASC (ascending) atau DESC (descending)๐ Filtering
filter_column_{nama_kolom}- Filter berdasarkan nilai kolom tertentu Contoh: filter_column_email=admin@mail.com
๐ Search (LIKE)
search_{nama_kolom}- Pencarian dengan LIKE (partial match)Akan mencari record yang mengandung kata kunci (case-insensitive)
๐ Include Relations
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
TEXTTEXT - text panjang tanpa limit
INTEGERINT - angka bulat
BIGINTBIGINT - angka bulat besar
FLOAT / DOUBLEAngka desimal
DECIMAL(p, s)Desimal presisi (untuk uang)
BOOLEANtrue/false
DATETanggal dan waktu
DATEONLYHanya tanggal (tanpa waktu)
UUIDUnique identifier (primary key)
JSONData JSON object
ENUM(...values)Pilihan terbatas
โ๏ธ Validasi Kolom
allowNull: falseField wajib diisi (NOT NULL)
unique: trueNilai harus unik di seluruh tabel
defaultValue: 'value'Nilai default jika tidak diisi
primaryKey: trueTandai sebagai primary key
autoIncrement: trueAuto-increment untuk INTEGER
validate: { isEmail: true }Validasi format email
๐ Relasi Antar Tabel
One-to-Many (hasMany)
Order.belongsTo(User, { foreignKey: 'user_id' });
Satu user punya banyak order
One-to-One (hasOne)
Profile.belongsTo(User, { foreignKey: 'user_id' });
Satu user punya satu profile
Many-to-Many (belongsToMany)
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
/api/generator/generate-crudGenerate CRUD lengkap untuk tabel tertentu
/api/generator/componentsGet list semua komponen yang sudah di-generate
/api/generator/component/:type/:nameGet code dari komponen tertentu
Params: type (model/controller/hook/helper), name
/api/generator/component/:type/:nameUpdate code komponen
/api/generator/component/:nameHapus semua file komponen (model, controller, routes, hooks)
/api/generator/commit-pushGit commit & push changes
๐ Project API
/api/gen-projectsGet list semua project user
/api/gen-projectsCreate project baru
ย ย "project": "My App",
ย ย "url_project": "https://api.myapp.com",
ย ย "gen_login_id": "user-uuid"
}
/api/gen-projects/:idHapus project
๐ Authentication API
/api/gen-login/loginLogin user
ย ย "username": "admin",
ย ย "password": "password123"
}
/api/gen-login/meGet 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:
- npm install
- cp .env.example .env (setup environment variables)
- pm2 start ecosystem.config.cjs
- pm2 save (save process list)
- 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:
- Install Vercel CLI:
npm i -g vercel - Login:
vercel login - Deploy:
vercel - 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 codeCtrl+F- Search dalam codeCtrl+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
๐ก 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
