38046e4df8
- 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
175 lines
3.5 KiB
Markdown
175 lines
3.5 KiB
Markdown
# 🚀 Quick Start - Amayo Bot Editor
|
||
|
||
## Inicio Rápido en 3 Pasos
|
||
|
||
### 1️⃣ Instalar Dependencias
|
||
|
||
```bash
|
||
cd AEditor
|
||
npm install
|
||
```
|
||
|
||
### 2️⃣ Ejecutar Aplicación
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
La aplicación se abrirá automáticamente en una ventana desktop.
|
||
|
||
### 3️⃣ ¡Empieza a Crear!
|
||
|
||
- Click en **"➕ Nuevo Comando"** para crear un comando
|
||
- Click en **"➕ Nuevo Evento"** para crear un evento
|
||
- Click en cualquier archivo del sidebar para editarlo
|
||
|
||
---
|
||
|
||
## 🎯 ¿Qué Puedo Hacer?
|
||
|
||
### Crear un Comando de Mensaje
|
||
|
||
1. Click en "➕ Nuevo Comando"
|
||
2. Tipo: **Comando por Mensaje**
|
||
3. Nombre: `test`
|
||
4. Descripción: `Comando de prueba`
|
||
5. Escribe en el editor:
|
||
```typescript
|
||
await message.reply("¡Funciona!");
|
||
```
|
||
6. Click en "➕ Crear Comando"
|
||
|
||
✅ Archivo guardado en: `src/commands/messages/others/test.ts`
|
||
|
||
### Crear un Comando Slash
|
||
|
||
1. Click en "➕ Nuevo Comando"
|
||
2. Tipo: **Comando Slash**
|
||
3. Nombre: `info`
|
||
4. Descripción: `Información del bot`
|
||
5. Escribe en el editor:
|
||
```typescript
|
||
await interaction.reply({
|
||
content: "Bot Amayo v1.0",
|
||
ephemeral: true
|
||
});
|
||
```
|
||
6. Click en "➕ Crear Comando"
|
||
|
||
✅ Archivo guardado en: `src/commands/splashcmd/others/info.ts`
|
||
|
||
### Crear un Evento Estándar
|
||
|
||
1. Click en "➕ Nuevo Evento"
|
||
2. Tipo: **Evento Estándar**
|
||
3. Evento: **ready**
|
||
4. Nombre: `startup`
|
||
5. Escribe en el editor:
|
||
```typescript
|
||
logger.info("¡Bot iniciado correctamente!");
|
||
```
|
||
6. Click en "➕ Crear Evento"
|
||
|
||
✅ Archivo guardado en: `src/events/startup.ts`
|
||
|
||
### Crear un Evento Custom
|
||
|
||
1. Click en "➕ Nuevo Evento"
|
||
2. Tipo: **Evento Custom**
|
||
3. Nombre: `myHandler`
|
||
4. Escribe en el editor:
|
||
```typescript
|
||
if (message.content.includes("hola")) {
|
||
await message.reply("¡Hola!");
|
||
}
|
||
```
|
||
5. Click en "➕ Crear Evento"
|
||
|
||
✅ Archivo guardado en: `src/events/extras/myHandler.ts`
|
||
|
||
---
|
||
|
||
## 📊 Panel de Estadísticas
|
||
|
||
El sidebar muestra en tiempo real:
|
||
|
||
- 📝 **Comandos Mensaje**: Comandos con prefix (!ping)
|
||
- ⚡ **Comandos Slash**: Comandos con / (/ping)
|
||
- 🎯 **Eventos Estándar**: Eventos de Discord.js
|
||
- ✨ **Eventos Custom**: Tus eventos personalizados
|
||
|
||
---
|
||
|
||
## ⌨️ Atajos de Teclado
|
||
|
||
| Atajo | Acción |
|
||
|-------|--------|
|
||
| `Ctrl + S` | Guardar archivo actual |
|
||
| `Ctrl + F` | Buscar en el editor |
|
||
| `Ctrl + H` | Buscar y reemplazar |
|
||
| `F1` | Command palette de Monaco |
|
||
|
||
---
|
||
|
||
## 🎨 Snippets Disponibles
|
||
|
||
En el editor, click en **"📝 Insertar Snippet"** para:
|
||
|
||
### Para Comandos
|
||
|
||
- **Reply básico**: Respuesta simple
|
||
- **Embed**: Mensaje con embed
|
||
- **Error handling**: Try-catch con manejo de errores
|
||
|
||
### Para Eventos
|
||
|
||
- **Logger**: Mensaje de log
|
||
- **Message check**: Validar mensaje
|
||
- **Prisma query**: Ejemplo de base de datos
|
||
|
||
---
|
||
|
||
## 🔄 Editar Archivos Existentes
|
||
|
||
1. En el sidebar, busca tu archivo
|
||
2. Click en él
|
||
3. Edita en el editor Monaco
|
||
4. Guarda con `Ctrl + S`
|
||
|
||
El indicador **●** muestra si hay cambios sin guardar.
|
||
|
||
---
|
||
|
||
## 🐛 Problemas Comunes
|
||
|
||
### No se ve ningún comando/evento
|
||
|
||
**Solución**: Verifica que existe la carpeta `../src/` relativa a AEditor.
|
||
|
||
### Error al guardar
|
||
|
||
**Solución**: Confirma que tienes permisos de escritura en el proyecto.
|
||
|
||
### Monaco Editor no carga
|
||
|
||
**Solución**:
|
||
```bash
|
||
npm install monaco-editor @vueuse/core
|
||
```
|
||
|
||
---
|
||
|
||
## 📚 Más Información
|
||
|
||
- **README_EDITOR.md**: Guía detallada de uso
|
||
- **DOCUMENTACION_COMPLETA.md**: Documentación técnica completa
|
||
- **RESUMEN_PROYECTO.md**: Resumen de todo lo implementado
|
||
|
||
---
|
||
|
||
## 🎉 ¡Listo!
|
||
|
||
Ya tienes todo lo necesario para empezar a crear comandos y eventos de forma visual.
|
||
|
||
**¡Feliz coding! 🚀**
|