feat: Implementar nuevas mejoras en Amayo Bot Editor
- Agregar selector de directorio multi-OS con validación y persistencia - Implementar preview en tiempo real del código generado en CommandCreator y EventCreator - Activar TypeScript strict mode y añadir snippets nativos para mejorar la experiencia de desarrollo - Crear documentación detallada sobre las nuevas funcionalidades y cambios realizados - Actualizar README con instrucciones de uso y solución de problemas comunes - Modificar archivos clave para integrar las nuevas características y mejorar la usabilidad
This commit is contained in:
Shni
259
README/MEJORAS_UX.md
Normal file
259
README/MEJORAS_UX.md
Normal file
@@ -0,0 +1,259 @@
|
||||
# Mejoras de UX Implementadas
|
||||
|
||||
## 📋 Resumen
|
||||
Se han implementado mejoras importantes para hacer que el editor de comandos y eventos se sienta más nativo y similar a VS Code.
|
||||
|
||||
## ✅ Cambios Implementados
|
||||
|
||||
### 1. **Eliminación del Preview Box Estático**
|
||||
- ❌ **Antes**: Existía una caja de preview separada que mostraba el código generado
|
||||
- ✅ **Ahora**: El editor Monaco se actualiza en tiempo real según los campos del formulario
|
||||
|
||||
**Archivos modificados:**
|
||||
- `src/components/CommandCreator.vue`
|
||||
- `src/components/EventCreator.vue`
|
||||
|
||||
**Beneficios:**
|
||||
- Interfaz más limpia y menos redundante
|
||||
- Mejor uso del espacio en pantalla
|
||||
- Experiencia más integrada
|
||||
|
||||
---
|
||||
|
||||
### 2. **Actualización en Tiempo Real del Editor Monaco**
|
||||
Se implementó un sistema de `watch()` que detecta cambios en los campos del formulario y actualiza automáticamente el contenido del editor Monaco.
|
||||
|
||||
**Implementación:**
|
||||
```typescript
|
||||
watch(() => commandData.value, () => {
|
||||
if (editor) {
|
||||
const currentPosition = editor.getPosition();
|
||||
const newCode = getDefaultCode();
|
||||
editor.setValue(newCode);
|
||||
if (currentPosition) {
|
||||
editor.setPosition(currentPosition);
|
||||
}
|
||||
}
|
||||
}, { deep: true });
|
||||
```
|
||||
|
||||
**Características:**
|
||||
- ✅ Actualización instantánea al escribir en cualquier campo
|
||||
- ✅ Preserva la posición del cursor durante actualizaciones
|
||||
- ✅ Watch profundo (`deep: true`) detecta cambios en objetos anidados
|
||||
- ✅ Watch adicional para el campo `aliasesInput` en comandos
|
||||
|
||||
**Campos que activan la actualización:**
|
||||
- Nombre del comando/evento
|
||||
- Tipo (message/slash o standard/extra)
|
||||
- Descripción
|
||||
- Categoría
|
||||
- Cooldown
|
||||
- Aliases (solo comandos)
|
||||
- Evento de Discord (solo eventos estándar)
|
||||
|
||||
---
|
||||
|
||||
### 3. **Sistema de Snippets Nativo tipo VS Code**
|
||||
Se eliminó el botón "Insertar Snippet" y se implementó un sistema de autocompletado nativo usando el API de Monaco.
|
||||
|
||||
**Antes:**
|
||||
```vue
|
||||
<button @click="insertSnippet" class="snippet-btn">
|
||||
📝 Insertar Snippet
|
||||
</button>
|
||||
```
|
||||
|
||||
**Ahora:**
|
||||
- Autocompletado inteligente con `Ctrl + Space`
|
||||
- Snippets aparecen en el dropdown de sugerencias
|
||||
- Tab stops para navegar entre placeholders (como en VS Code)
|
||||
|
||||
---
|
||||
|
||||
### 4. **Snippets Disponibles**
|
||||
|
||||
#### **Para Comandos (`CommandCreator.vue`):**
|
||||
|
||||
| Snippet | Descripción | Tab Stops |
|
||||
|---------|-------------|-----------|
|
||||
| `try-catch` | Bloque try-catch con logger | Error message |
|
||||
| `async-function` | Función asíncrona | Nombre, parámetros, body |
|
||||
| `discord-embed` | Estructura de embed completa | Título, descripción, color, campos, footer |
|
||||
| `message-reply` | Responder a mensaje | Contenido del mensaje |
|
||||
| `interaction-reply` | Responder a interacción | Contenido, ephemeral |
|
||||
| `interaction-defer` | Diferir respuesta | Ephemeral, código, mensaje final |
|
||||
| `logger-info` | Log de información | Mensaje |
|
||||
| `logger-error` | Log de error con contexto | Variable de error, mensaje |
|
||||
| `prisma-findUnique` | Buscar registro en Prisma | Model, campo, valor |
|
||||
| `prisma-create` | Crear registro en Prisma | Model, campo, valor |
|
||||
| `prisma-update` | Actualizar registro en Prisma | Model, where, field, valor |
|
||||
| `check-permissions` | Verificar permisos del usuario | Permiso requerido |
|
||||
| `check-args` | Verificar argumentos del comando | Cantidad mínima, uso |
|
||||
|
||||
#### **Para Eventos (`EventCreator.vue`):**
|
||||
|
||||
| Snippet | Descripción | Tab Stops |
|
||||
|---------|-------------|-----------|
|
||||
| `try-catch` | Bloque try-catch con logger | Error message |
|
||||
| `logger-info` | Log de información | Mensaje |
|
||||
| `logger-error` | Log de error con contexto | Variable de error, mensaje |
|
||||
| `check-bot-message` | Ignorar mensajes de bots | - |
|
||||
| `check-guild` | Verificar si está en servidor | - |
|
||||
| `check-content` | Verificar contenido del mensaje | - |
|
||||
| `prisma-findUnique` | Buscar registro en Prisma | Model, campo, valor |
|
||||
| `prisma-create` | Crear registro en Prisma | Model, campo, valor |
|
||||
| `discord-embed` | Estructura de embed | Título, descripción, color, campos, footer |
|
||||
| `event-ready` | Template evento ready | Código personalizado |
|
||||
| `event-messageCreate` | Template evento messageCreate | Código personalizado |
|
||||
|
||||
---
|
||||
|
||||
### 5. **Configuración Mejorada de Monaco**
|
||||
|
||||
**Opciones de autocompletado habilitadas:**
|
||||
```typescript
|
||||
{
|
||||
suggestOnTriggerCharacters: true,
|
||||
quickSuggestions: {
|
||||
other: true,
|
||||
comments: false,
|
||||
strings: true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**TypeScript en modo estricto:**
|
||||
```typescript
|
||||
{
|
||||
strict: true,
|
||||
noImplicitAny: true,
|
||||
strictNullChecks: true,
|
||||
strictFunctionTypes: true
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Cómo Usar los Snippets
|
||||
|
||||
### Método 1: Autocompletado
|
||||
1. Empieza a escribir el nombre del snippet (ej: `try`)
|
||||
2. Aparecerá el dropdown con sugerencias
|
||||
3. Selecciona el snippet con las flechas ⬆️⬇️
|
||||
4. Presiona `Tab` o `Enter` para insertar
|
||||
|
||||
### Método 2: Ctrl + Space
|
||||
1. Presiona `Ctrl + Space` en cualquier lugar del editor
|
||||
2. Se mostrará la lista completa de snippets disponibles
|
||||
3. Busca el snippet deseado
|
||||
4. Selecciona y presiona `Tab` o `Enter`
|
||||
|
||||
### Navegación por Tab Stops
|
||||
Una vez insertado el snippet:
|
||||
1. Presiona `Tab` para saltar al siguiente placeholder
|
||||
2. Escribe tu código personalizado
|
||||
3. Presiona `Tab` nuevamente para el siguiente
|
||||
4. Presiona `Esc` para salir del modo snippet
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Ejemplo de Uso
|
||||
|
||||
### Crear un comando con embed:
|
||||
1. Rellena los campos del formulario (nombre, descripción, etc.)
|
||||
2. El editor se actualiza automáticamente con la estructura base
|
||||
3. Dentro de la función `run()`, escribe `discord`
|
||||
4. Selecciona `discord-embed` del dropdown
|
||||
5. Presiona `Tab` y completa título, descripción, etc.
|
||||
6. Guarda el comando
|
||||
|
||||
---
|
||||
|
||||
## 📊 Comparación Antes/Después
|
||||
|
||||
| Aspecto | Antes | Después |
|
||||
|---------|-------|---------|
|
||||
| **Preview** | Caja estática separada | Editor Monaco en tiempo real |
|
||||
| **Snippets** | Botón con opciones limitadas | Autocompletado nativo con 13+ snippets |
|
||||
| **Actualización** | Manual (botón o cambio de campo) | Instantánea al escribir |
|
||||
| **Espacio UI** | Dividido en 3 secciones | 2 secciones (formulario + editor) |
|
||||
| **Experiencia** | Custom/diferente | Similar a VS Code nativo |
|
||||
| **Tab Stops** | ❌ No disponible | ✅ Navegación con Tab |
|
||||
| **Discoverability** | Botón oculta opciones | Dropdown muestra todo |
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Archivos Modificados
|
||||
|
||||
### `CommandCreator.vue`
|
||||
- ❌ Eliminado: Preview box HTML
|
||||
- ❌ Eliminado: Computed property `generatedCodePreview`
|
||||
- ❌ Eliminado: Botón "Insertar Snippet"
|
||||
- ❌ Eliminado: Función `insertSnippet()`
|
||||
- ❌ Eliminado: Estilos `.snippet-btn`
|
||||
- ✅ Añadido: Watch para actualización en tiempo real
|
||||
- ✅ Añadido: 13 snippets nativos con tab stops
|
||||
- ✅ Añadido: Configuración `quickSuggestions`
|
||||
|
||||
### `EventCreator.vue`
|
||||
- ❌ Eliminado: Preview box HTML
|
||||
- ❌ Eliminado: Computed property `generatedCodePreview`
|
||||
- ❌ Eliminado: Botón "Insertar Snippet"
|
||||
- ❌ Eliminado: Función `insertSnippet()`
|
||||
- ❌ Eliminado: Estilos `.snippet-btn`
|
||||
- ✅ Añadido: Watch para actualización en tiempo real
|
||||
- ✅ Añadido: 11 snippets nativos con tab stops
|
||||
- ✅ Añadido: Configuración `quickSuggestions`
|
||||
- ✅ Añadido: TypeScript strict mode
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Próximas Mejoras Sugeridas
|
||||
|
||||
### Corto Plazo
|
||||
- [ ] Agregar más snippets específicos de Discord.js (ButtonBuilder, SelectMenuBuilder, etc.)
|
||||
- [ ] Implementar snippets para manejo de base de datos (más queries de Prisma)
|
||||
- [ ] Agregar snippet para validación de roles
|
||||
|
||||
### Mediano Plazo
|
||||
- [ ] Sistema de snippets personalizados (que el usuario pueda crear los suyos)
|
||||
- [ ] Guardar snippets favoritos del usuario
|
||||
- [ ] Templates predefinidos para tipos comunes de comandos (economía, moderación, etc.)
|
||||
|
||||
### Largo Plazo
|
||||
- [ ] IntelliSense completo para tipos de Discord.js
|
||||
- [ ] Sugerencias basadas en el contexto del proyecto
|
||||
- [ ] Autocompletado de nombres de modelos de Prisma desde `schema.prisma`
|
||||
|
||||
---
|
||||
|
||||
## 📝 Notas Técnicas
|
||||
|
||||
### Performance
|
||||
- Los watches usan `deep: true` lo cual podría tener impacto en formularios muy complejos
|
||||
- Sin embargo, dado el tamaño pequeño de `commandData` y `eventData`, el impacto es negligible
|
||||
- La actualización del editor preserva la posición del cursor para evitar interrupciones
|
||||
|
||||
### Compatibilidad
|
||||
- Funciona en Windows, Linux y macOS
|
||||
- Usa API estándar de Monaco Editor
|
||||
- Compatible con Tauri 2.x
|
||||
|
||||
### Mantenibilidad
|
||||
- Los snippets están centralizados en cada componente
|
||||
- Fácil agregar nuevos snippets siguiendo el mismo patrón
|
||||
- Documentación inline en cada snippet con `documentation` property
|
||||
|
||||
---
|
||||
|
||||
## 🎉 Resultado Final
|
||||
|
||||
La aplicación ahora ofrece una experiencia mucho más fluida y profesional, similar a trabajar directamente en VS Code. Los usuarios pueden:
|
||||
|
||||
1. **Ver cambios instantáneamente** mientras completan el formulario
|
||||
2. **Usar snippets nativamente** sin necesidad de memorizar o buscar en menús
|
||||
3. **Navegar eficientemente** con tab stops como en cualquier IDE moderno
|
||||
4. **Tener más espacio** para el código sin distracciones visuales
|
||||
|
||||
¡La experiencia de desarrollo es ahora mucho más natural e intuitiva! 🎯
|
||||
Reference in New Issue
Block a user