JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 18
  • Score
    100M100P100Q39690F
  • License MIT

Veritabanı tabloları için otomatik yönetim paneli oluşturma paketi.

Package Exports

  • easy-adminpanel
  • easy-adminpanel/db
  • easy-adminpanel/middleware

Readme

Easy AdminPanel

Veritabanı tabloları için otomatik CRUD yönetim paneli oluşturma paketi.

Özellikleri

  • Basit ve kullanımı kolay
  • Herhangi bir veritabanı tablosu için CRUD (Oluştur, Oku, Güncelle, Sil) arayüzü oluşturma
  • Tablo yapısını JSON olarak tanımlama veya veritabanı tablolarını otomatik algılama
  • PostgreSQL veritabanı ile entegrasyon
  • Express veya Next.js uygulamalarına otomatik entegrasyon
  • İnteraktif komut satırı arayüzü
  • Express tabanlı API ve React tabanlı arayüz
  • Min. düzeyde konfigürasyon gerektiren kolay kullanım

Kurulum

# Global olarak yüklemek için
npm install -g easy-adminpanel

# veya projenize yerel olarak eklemek için
npm install easy-adminpanel --save-dev

Kullanım

1. Konfigürasyon Dosyası Oluşturma

Üç yöntemle yapılandırma dosyası oluşturabilirsiniz:

A. Şablon kullanarak

npx easy-adminpanel init

Bu komut, projenizin kök dizininde şu içerikle easy-admin.js dosyası oluşturur:

export default {
  tables: [
    {
      name: "users",
      fields: [
        { name: "id", type: "Int", primaryKey: true },
        { name: "username", type: "String" },
        { name: "email", type: "String", unique: true },
        { name: "password", type: "String" },
        { name: "created_at", type: "DateTime" }
      ]
    }
  ]
};

Oluşturulan bu dosyayı ihtiyaçlarınıza göre düzenleyebilirsiniz.

B. Veritabanı tablolarını otomatik algılama

npx easy-adminpanel autodetect

Bu komut, PostgreSQL veritabanı bağlantısı kurarak tüm tabloları ve kolonları otomatik algılar ve easy-admin.js dosyasını oluşturur. Bağlantı için .env dosyanızda gerekli veritabanı değişkenleri tanımlı olmalıdır.

C. İnteraktif olarak

npx easy-adminpanel interactive

Bu komut, komut satırında size sorular sorarak, tablolarınızı ve alanlarını tanımlamanıza yardımcı olur.

2. CRUD Bileşenlerini Oluşturma

npx easy-adminpanel generate

Bu komut, easy-admin.js dosyasını okur ve tanımladığınız her tablo için CRUD bileşenleri içeren bir React uygulaması oluşturur. Ayrıca, projenize Express veya Next.js entegrasyonu için gerekli dosyaları da oluşturur.

3. Yönetim Panelini Başlatma

npx easy-adminpanel start

Bu komut, oluşturulan CRUD uygulamasını çalıştırır ve bir Express sunucusu başlatır. Tarayıcınızda http://localhost:3000/easy-adminpanel adresine giderek yönetim panelinize erişebilirsiniz.

4. Otomatik Entegrasyon

Easy AdminPanel artık projenize otomatik olarak entegre olabilir. generate komutu çalıştırıldığında, paketi projenin yapısını analiz ederek Express veya Next.js için gerekli entegrasyon dosyalarını otomatik oluşturur.

npx easy-adminpanel setup

Bu komut, projenizin yapısını analiz eder ve:

  • Express projeleri için: easy-adminpanel-middleware.js dosyası oluşturur
  • Next.js projeleri için: pages/api/easy-adminpanel/[[...path]].js API rotası oluşturur

5. Middleware Olarak Kullanma

Easy AdminPanel, mevcut Express veya Next.js uygulamalarınıza entegre edilerek aynı port üzerinden çalışabilir. Böylece ayrı bir sunucu çalıştırmak zorunda kalmazsınız.

A. Express Uygulamasında Kullanma

// server.js
import express from 'express';
import { createMiddleware } from 'easy-adminpanel';
// Veya otomatik oluşturulan dosyayı kullanabilirsiniz:
// import { easyAdminPanelMiddleware } from './easy-adminpanel-middleware.js';

const app = express();
const port = process.env.PORT || 3000;

// Önce normal Express rotalarınızı tanımlayın
app.get('/', (req, res) => {
  res.send('Ana sayfa');
});

// Easy AdminPanel'i istediğiniz yol altına ekleyin
app.use('/easy-adminpanel', createMiddleware());
// Veya: app.use('/easy-adminpanel', easyAdminPanelMiddleware);

app.listen(port, () => {
  console.log(`Sunucu çalışıyor: http://localhost:${port}`);
  console.log(`Yönetim paneli: http://localhost:${port}/easy-adminpanel`);
});

B. Next.js Uygulamasında Kullanma

// pages/api/easy-adminpanel/[[...path]].js
import { createNextApiHandler } from 'easy-adminpanel';

export default createNextApiHandler();

Bu şekilde, yönetim paneliniz http://yourdomain.com/api/easy-adminpanel adresinde çalışacaktır.

Next.js uygulamanızda bu rotaya bağlantı eklemek için:

// pages/index.js veya herhangi bir sayfanızda
export default function Home() {
  return (
    <div>
      <h1>Ana Sayfa</h1>
      <p>
        <a href="/api/easy-adminpanel">Yönetim Paneline Git</a>
      </p>
    </div>
  )
}

6. Örnek Entegrasyon Dosyaları Oluşturma

npx easy-adminpanel examples

Bu komut, Express ve Next.js entegrasyonu için örnek dosyalar oluşturur.

Entegrasyon Kılavuzu ve Sorun Giderme

Farklı bir projeye easy-adminpanel entegre ederken izlenmesi gereken adımlar:

1. Bağımlılıkları Yükleme

Projenizin kök dizininde aşağıdaki komutu çalıştırın:

npm install easy-adminpanel express dotenv

2. Konfigürasyon Dosyası Oluşturma

En kolay yöntem, otomatik tablo algılama özelliğini kullanmaktır:

npx easy-adminpanel autodetect

Veya manuel olarak projenizin kök dizininde easy-admin.js dosyasını oluşturabilirsiniz:

export default {
  tables: [
    {
      name: "users",
      fields: [
        { name: "id", type: "Int", primaryKey: true },
        { name: "username", type: "String" },
        { name: "email", type: "String", unique: true },
        // Diğer alanları burada tanımlayın
      ]
    }
    // Diğer tabloları burada tanımlayın
  ]
};

3. Bileşenleri Oluşturma ve Otomatik Entegrasyon

Projenizin kök dizininde aşağıdaki komutu çalıştırın:

npx easy-adminpanel generate

Bu komut:

  1. easy-admin.js dosyasını okuyarak CRUD bileşenlerini oluşturur
  2. Projenizin Express veya Next.js kullanımını algılar
  3. Otomatik entegrasyon dosyalarını oluşturur

Otomatik entegrasyon başarılı olduysa, manuel entegrasyon yapmaya gerek kalmaz.

4. Veritabanı Bağlantısı

PostgreSQL bağlantısı için .env dosyanızda aşağıdaki değişkenlerden en az birini tanımlayın:

# Tek bir connection string:
DATABASE_URL=postgresql://kullanici:sifre@localhost:5432/veritabani
# VEYA
POSTGRES_URL=postgresql://kullanici:sifre@localhost:5432/veritabani

# VEYA parçalı bilgiler:
PGHOST=localhost
PGPORT=5432
PGDATABASE=veritabani
PGUSER=kullanici
PGPASSWORD=sifre

5. Sorun Giderme

Sorun: Yönetim paneline erişilemiyor (404 hatası)

Çözüm:

  • CRUD bileşenlerinin oluşturulduğundan emin olun: npx easy-adminpanel generate
  • easy-admin-ui/public/index.html dosyasının oluşturulduğunu kontrol edin
  • Middleware'in doğru yola bağlandığından emin olun (örn: /easy-adminpanel)
  • Otomatik entegrasyonu yeniden çalıştırın: npx easy-adminpanel setup

Sorun: API istekleri 404 hatası veriyor

Çözüm: API yolunun doğru yapılandırıldığından emin olun. Eğer hala sorun yaşıyorsanız, easy-admin-ui/public/index.html dosyasında API isteklerini şu şekilde güncelleyin:

// Fetch işleminde sabit API URL'i kullanın
const baseApiUrl = '/easy-adminpanel/api';
const response = await fetch(baseApiUrl + '/' + tableName);

Sorun: Next.js ile entegrasyon sorunları

Çözüm: Next.js'nin API rotaları ile Express uygulamasını birleştirmek zor olabilir. İki çözüm:

  1. Next.js API rotalarını kullanın: pages/api/easy-adminpanel/[[...path]].js
  2. Eğer bu çalışmazsa, ayrı bir portta Express sunucusu çalıştırın:
// server.js (Next.js projesinin yanında)
import express from 'express';
import { createServer } from 'easy-adminpanel';

const app = createServer();
app.listen(3001, () => {
  console.log('Admin panel: http://localhost:3001/easy-adminpanel');
});

Sorun: Veritabanı bağlantısı yapılamıyor

Çözüm:

  • .env dosyanızın doğru formatta olduğundan emin olun
  • PostgreSQL servisinizin çalıştığını kontrol edin
  • Bağlantı bilgilerinin doğru olduğunu kontrol edin
  • SSLmode ayarlarını kontrol edin (gerekirse ?sslmode=require ekleyin)

Desteklenen Alan Tipleri

  • String: Metin
  • Int: Tam sayı
  • Float: Ondalıklı sayı
  • Boolean: Mantıksal (doğru/yanlış)
  • DateTime: Tarih ve saat
  • Text: Uzun metin
  • Json: JSON verisi

Alan Özellikleri

Her alan için şu özellikleri belirleyebilirsiniz:

  • name: Alan adı (zorunlu)
  • type: Alan tipi (zorunlu)
  • primaryKey: Birincil anahtar mı? (isteğe bağlı, varsayılan: false)
  • unique: Benzersiz mi? (isteğe bağlı, varsayılan: false)

Örnek Kullanım

// easy-admin.js
export default {
  tables: [
    {
      name: "products",
      fields: [
        { name: "id", type: "Int", primaryKey: true },
        { name: "name", type: "String" },
        { name: "description", type: "Text" },
        { name: "price", type: "Float" },
        { name: "is_available", type: "Boolean" },
        { name: "created_at", type: "DateTime" }
      ]
    },
    {
      name: "categories",
      fields: [
        { name: "id", type: "Int", primaryKey: true },
        { name: "name", type: "String", unique: true },
        { name: "parent_id", type: "Int" }
      ]
    }
  ]
};

Lisans

MIT