Getting Started

Lernen Sie, wie Sie in 5 Minuten Ihr erstes Plugin für CockpitOS entwickeln!

CockpitOS SDK

Das CockpitOS SDK ist ein eigenständiges Development Kit, mit dem Sie Plugins und Themes entwickeln können, ohne das gesamte System zu installieren.

Warum das SDK?

• Schneller Start: Keine komplexe Setup-Prozedur
• Isolierte Entwicklung: Nur die nötigen Dependencies
• Hot Reload: Live-Updates während der Entwicklung
• Testing: Integrierte Test-Umgebung
• TypeScript: Vollständige Type-Sicherheit

Installation

1. SDK installieren

npm install -g @cockpitos/sdk

2. Neues Plugin-Projekt erstellen

# Block-Plugin erstellen
cockpitos create-block my-hero-block

# Theme-Plugin erstellen
cockpitos create-theme my-custom-theme

# Service-Plugin erstellen
cockpitos create-service my-api-service

3. Development Server starten

cd my-hero-block
npm run dev

Das öffnet automatisch:

• http://localhost:3000 - Plugin-Playground
• http://localhost:6006 - Storybook für Komponenten

Ihr erstes Block-Plugin

1. Plugin-Struktur

my-hero-block/
├── src/
│   ├── plugin.tsx          # Plugin-Definition
│   ├── component.tsx       # React-Komponente
│   ├── schema.ts          # JSON-Schema für UI
│   └── preview.tsx        # Preview-Komponente
├── package.json
├── tsconfig.json
└── README.md

2. Plugin-Definition (plugin.tsx)

import { BlockPlugin } from '@cockpitos/sdk';
import { HeroComponent } from './component';
import { HeroPreview } from './preview';
import { heroSchema } from './schema';

const MyHeroPlugin: BlockPlugin = {
  id: 'my-hero-block',
  name: 'My Hero Block',
  description: 'Ein beeindruckender Hero-Block',
  version: '1.0.0',
  category: 'layout',
  
  schema: heroSchema,
  component: HeroComponent,
  previewComponent: HeroPreview,
  
  defaultContent: {
    title: 'Willkommen!',
    subtitle: 'Ihr Shopping-Erlebnis beginnt hier',
    backgroundImage: '/images/hero-bg.jpg',
    ctaText: 'Jetzt entdecken',
    ctaUrl: '/shops'
  },
  
  tags: ['hero', 'layout', 'cta']
};

export default MyHeroPlugin;

3. React-Komponente (component.tsx)

import React from 'react';

interface HeroProps {
  block: {
    content: {
      title: string;
      subtitle: string;
      backgroundImage: string;
      ctaText: string;
      ctaUrl: string;
    };
  };
}

export function HeroComponent({ block }: HeroProps) {
  const { title, subtitle, backgroundImage, ctaText, ctaUrl } = block.content;

  return (
    <div 
      className="hero-block relative h-96 flex items-center justify-center text-white"
      style={{
        backgroundImage: `url(${backgroundImage})`,
        backgroundSize: 'cover',
        backgroundPosition: 'center'
      }}
    >
      <div className="absolute inset-0 bg-black bg-opacity-40" />
      <div className="relative text-center z-10">
        <h1 className="text-4xl font-bold mb-4">{title}</h1>
        <p className="text-xl mb-6">{subtitle}</p>
        <a 
          href={ctaUrl}
          className="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-semibold transition-colors"
        >
          {ctaText}
        </a>
      </div>
    </div>
  );
}

4. Schema-Definition (schema.ts)

export const heroSchema = {
  type: 'object',
  properties: {
    title: {
      type: 'string',
      title: 'Titel',
      default: 'Willkommen!'
    },
    subtitle: {
      type: 'string',
      title: 'Untertitel',
      default: 'Ihr Shopping-Erlebnis beginnt hier'
    },
    backgroundImage: {
      type: 'string',
      title: 'Hintergrundbild',
      format: 'uri',
      default: '/images/hero-bg.jpg'
    },
    ctaText: {
      type: 'string',
      title: 'Button-Text',
      default: 'Jetzt entdecken'
    },
    ctaUrl: {
      type: 'string',
      title: 'Button-Link',
      format: 'uri',
      default: '/shops'
    }
  },
  required: ['title', 'subtitle']
};

Plugin testen

1. Development Server

npm run dev

2. Storybook

npm run storybook

3. Tests ausführen

npm test

Plugin veröffentlichen

1. Plugin bauen

npm run build

2. NPM veröffentlichen

npm publish

3. Im CMS registrieren

Das Plugin wird automatisch im CockpitOS Plugin-Marketplace verfügbar.

Nächste Schritte

• Plugin-System Deep Dive - Erweiterte Plugin-Features
• Theme-Entwicklung - Eigene Themes erstellen (Coming Soon)
• API-Integration - Backend-Services entwickeln (Coming Soon)
• Best Practices - Professionelle Plugin-Entwicklung (Coming Soon)

---

Fragen? Besuchen Sie unsere Community oder schauen Sie sich die Examples an (Coming Soon).