Inicio Rápido

Requisitos Previos

Node.js 18 o superior
pnpm (recomendado), npm, o yarn
Una cuenta de desarrollador de Whatalo — regístrate en el Developer Portal
Una tienda de desarrollo (créala en el Developer Portal, hasta 3 permitidas)

Paso 1: Scaffoldear tu Plugin

npx create-whatalo-plugin

El scaffolder te pide un nombre de plugin y crea un proyecto React + Vite. No necesitas instalar nada globalmente.

Paso 2: Autenticarse

cd mi-plugin
whatalo login

Tu navegador se abre automáticamente. Confirma el código de dispositivo mostrado en la terminal. Una vez confirmado, el CLI guarda un token de acceso localmente.

Paso 3: Iniciar el Servidor de Desarrollo

whatalo dev

El CLI hace tres cosas simultáneamente:

Inicia tu servidor de desarrollo Vite en el puerto 5173
Crea un túnel cloudflared (descargado automáticamente en el primer uso)
Registra una sesión de desarrollo temporal en la barra lateral del admin

Verás una salida similar a esta:

  Plugin:  Mi Plugin
  Store:   Mi Tienda Demo
  Local:   http://localhost:5173
  Tunnel:  https://abc123.trycloudflare.com

  Preview: https://admin.whatalo.com/store/abc/integrations/mi-plugin

  Admin pages:
    › Dashboard  → .../integrations/mi-plugin
    › Settings   → .../integrations/mi-plugin/settings

  Press p to open preview in browser
  Press r to restart server
  Press q to quit

Presiona p o copia la URL de vista previa. Tu plugin aparece en la barra lateral del admin bajo Integraciones. Ambas páginas Dashboard y Settings definidas en el manifiesto ya están enlazadas como sub-elementos.

Qué se Scaffoldeó

mi-plugin/
├── whatalo.app.ts          ← Manifiesto del plugin (defineApp)
├── whatalo.app.toml        ← Config del proyecto (slug, comandos de build, puerto)
├── package.json
├── vite.config.ts
├── src/
│   ├── app.tsx             ← Componente principal con router de páginas (switch en currentPage)
│   ├── main.tsx            ← Punto de entrada de React
│   ├── pages/
│   │   └── settings.tsx    ← Componente de la página Settings
│   ├── webhooks/
│   │   └── verify.ts       ← Helper de verificación de firma de webhook
│   └── components/
│       └── whatalo-ui/     ← Componentes UI preconstruidos (Page, Card, Button, etc.)
└── .env.example

Qué Sucede Cuando Cambias el Manifiesto

Edita whatalo.app.ts mientras whatalo dev está corriendo. El CLI detecta el cambio, recarga el manifiesto y sincroniza la lista de páginas actualizada con la barra lateral del admin — sin necesidad de reiniciar.

Próximos Pasos

Tu Primer Plugin — tutorial completo de principio a fin
Arquitectura del Plugin — entiende el modelo de iframe y App Bridge
Referencia CLI — los 14 comandos
App Bridge — cómo usar contexto y acciones