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: Instalar el CLI

pnpm add -g whatalo

Esto instala el comando whatalo globalmente. Se recomienda pnpm; npm o yarn también funcionan.

Paso 2: Crear tu Plugin

whatalo login
whatalo init

whatalo login abre tu navegador para autenticarte con un código de dispositivo. Luego whatalo init registra el plugin en el Developer Portal, scaffoldea un proyecto React + Vite, escribe tus credenciales en .env e instala las dependencias.

Paso 3: Iniciar el Servidor de Desarrollo

cd mi-plugin
whatalo dev

El CLI hace tres cosas simultáneamente:

1. Inicia tu servidor de desarrollo Vite en el puerto 5173
2. Crea un túnel cloudflared (descargado automáticamente en el primer uso)
3. 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://app.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

Paso 4: Abrir el Admin

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