237 lines
6.6 KiB
Markdown
237 lines
6.6 KiB
Markdown
# ✅ Configuración Completada - Arduino Emulator
|
|
|
|
## 🎉 Resumen de lo Implementado
|
|
|
|
### ✅ Repositorios de Wokwi Clonados y Configurados
|
|
|
|
Se han clonado los siguientes repositorios oficiales de Wokwi en `wokwi-libs/`:
|
|
|
|
| Repositorio | Estado | Descripción |
|
|
|-------------|--------|-------------|
|
|
| **wokwi-elements** | ✅ Compilado | 50+ componentes electrónicos Web Components |
|
|
| **avr8js** | ✅ Compilado | Emulador completo de AVR8 (ATmega328p) |
|
|
| **rp2040js** | ✅ Clonado | Emulador RP2040 (Raspberry Pi Pico) |
|
|
| **wokwi-features** | ✅ Clonado | Documentación y features |
|
|
|
|
### ✅ Integración Configurada
|
|
|
|
#### Frontend (Vite)
|
|
- ✅ Alias configurados en `vite.config.ts` para usar repos locales
|
|
- ✅ Package.json actualizado con `file:../wokwi-libs/...`
|
|
- ✅ TypeScript declarations para Web Components en `vite-env.d.ts`
|
|
|
|
#### Componentes React Creados
|
|
- ✅ `LED.tsx` - Wrapper para `<wokwi-led>`
|
|
- ✅ `ArduinoUno.tsx` - Wrapper para `<wokwi-arduino-uno>`
|
|
- ✅ `Resistor.tsx` - Wrapper para `<wokwi-resistor>`
|
|
- ✅ `Pushbutton.tsx` - Wrapper para `<wokwi-pushbutton>`
|
|
|
|
#### SimulatorCanvas Actualizado
|
|
- ✅ Usa `<wokwi-arduino-uno>` en lugar de div personalizado
|
|
- ✅ Usa `<wokwi-led>` en lugar de círculos CSS
|
|
- ✅ LED interno del Arduino conectado al estado
|
|
|
|
### ✅ Documentación Creada
|
|
|
|
| Archivo | Descripción |
|
|
|---------|-------------|
|
|
| [WOKWI_LIBS.md](WOKWI_LIBS.md) | Guía completa de integración con Wokwi |
|
|
| [ARCHITECTURE.md](ARCHITECTURE.md) | Arquitectura del proyecto y flujos de datos |
|
|
| [README.md](README.md) | Instrucciones de instalación y uso |
|
|
| [update-wokwi-libs.bat](update-wokwi-libs.bat) | Script de actualización automática |
|
|
| [.gitignore](.gitignore) | Archivos a ignorar en Git |
|
|
|
|
## 🚀 Cómo Empezar
|
|
|
|
### 1. Asegúrate de tener arduino-cli instalado
|
|
|
|
```bash
|
|
arduino-cli version
|
|
arduino-cli core install arduino:avr
|
|
```
|
|
|
|
### 2. Inicia el Backend
|
|
|
|
```bash
|
|
# Opción 1: Usando el script
|
|
start-backend.bat
|
|
|
|
# Opción 2: Manual
|
|
cd backend
|
|
venv\Scripts\activate
|
|
uvicorn app.main:app --reload --port 8000
|
|
```
|
|
|
|
### 3. Inicia el Frontend
|
|
|
|
```bash
|
|
# Opción 1: Usando el script
|
|
start-frontend.bat
|
|
|
|
# Opción 2: Manual
|
|
cd frontend
|
|
npm run dev
|
|
```
|
|
|
|
### 4. Abre en el Navegador
|
|
|
|
- Frontend: http://localhost:5173
|
|
- Backend API: http://localhost:8000
|
|
- API Docs: http://localhost:8000/docs
|
|
|
|
## 🔄 Actualizar Librerías de Wokwi
|
|
|
|
Cuando Wokwi lance nuevas versiones o agregue nuevos componentes:
|
|
|
|
```bash
|
|
# Ejecutar script de actualización
|
|
update-wokwi-libs.bat
|
|
```
|
|
|
|
Esto hará:
|
|
1. `git pull` en cada repositorio
|
|
2. `npm install` para actualizar dependencias
|
|
3. `npm run build` para recompilar
|
|
|
|
## 🎯 Ventajas de Esta Configuración
|
|
|
|
### ✅ Siempre Actualizado
|
|
- Un simple `git pull` te da las últimas mejoras de Wokwi
|
|
- No dependes de que publiquen en npm
|
|
- Nuevos componentes disponibles inmediatamente
|
|
|
|
### ✅ Compatible con Wokwi
|
|
- Usas exactamente el mismo código que Wokwi.com
|
|
- Tus simulaciones funcionarán igual que en Wokwi
|
|
- Puedes exportar/importar proyectos fácilmente (futuro)
|
|
|
|
### ✅ Desarrollo Flexible
|
|
- Puedes modificar el código fuente si necesitas
|
|
- Debugging más fácil con código fuente disponible
|
|
- Puedes contribuir mejoras a Wokwi (PRs)
|
|
|
|
### ✅ Sin Dependencias de Internet
|
|
- Una vez clonado, funciona 100% offline
|
|
- Compilación local con arduino-cli
|
|
- No requiere servicios externos
|
|
|
|
## 📦 Componentes Disponibles
|
|
|
|
Gracias a wokwi-elements, tienes acceso a 50+ componentes:
|
|
|
|
### Básicos
|
|
- ✅ `wokwi-led` - LEDs de colores
|
|
- ✅ `wokwi-resistor` - Resistencias
|
|
- ✅ `wokwi-pushbutton` - Botones
|
|
- ✅ `wokwi-slide-switch` - Interruptores
|
|
- ✅ `wokwi-potentiometer` - Potenciómetros
|
|
|
|
### Placas
|
|
- ✅ `wokwi-arduino-uno` - Arduino Uno R3
|
|
- ✅ `wokwi-arduino-mega` - Arduino Mega 2560
|
|
- ✅ `wokwi-arduino-nano` - Arduino Nano
|
|
- ✅ `wokwi-pi-pico` - Raspberry Pi Pico
|
|
- ✅ `wokwi-esp32-devkit-v1` - ESP32
|
|
|
|
### Pantallas
|
|
- ✅ `wokwi-lcd1602` - LCD 16x2
|
|
- ✅ `wokwi-neopixel` - LEDs RGB
|
|
- ✅ `wokwi-7segment` - Display 7 segmentos
|
|
|
|
### Sensores
|
|
- ✅ `wokwi-dht22` - Temperatura y humedad
|
|
- ✅ `wokwi-hc-sr04` - Ultrasónico
|
|
- ✅ `wokwi-pir-motion-sensor` - Movimiento PIR
|
|
- ✅ `wokwi-photoresistor-sensor` - Fotoresistor
|
|
|
|
### Otros
|
|
- ✅ `wokwi-servo` - Servo motor
|
|
- ✅ `wokwi-membrane-keypad` - Teclado 4x4
|
|
- ✅ `wokwi-ir-receiver` - Receptor IR
|
|
- ✅ `wokwi-ds1307` - Reloj RTC
|
|
|
|
## 🔨 Próximos Pasos Sugeridos
|
|
|
|
### Inmediato
|
|
1. ✅ **Prueba la app** - Compila y ejecuta el ejemplo Blink
|
|
2. ✅ **Explora componentes** - Revisa `wokwi-libs/wokwi-elements/src/`
|
|
3. ✅ **Lee la documentación** - [WOKWI_LIBS.md](WOKWI_LIBS.md) y [ARCHITECTURE.md](ARCHITECTURE.md)
|
|
|
|
### Fase 2: Emulación Real con avr8js
|
|
- [ ] Implementar `AVRSimulator.ts` usando avr8js clonado
|
|
- [ ] Parser de archivos Intel HEX
|
|
- [ ] `PinManager` con write hooks
|
|
- [ ] Conectar CPU execution loop a componentes visuales
|
|
|
|
### Fase 3: Más Componentes
|
|
- [ ] Agregar wrappers para más componentes (botones, sensores)
|
|
- [ ] Implementar drag & drop de componentes
|
|
- [ ] Sistema de wiring visual
|
|
|
|
### Fase 4: Persistencia
|
|
- [ ] Base de datos SQLite
|
|
- [ ] Guardar/cargar proyectos
|
|
- [ ] Exportar circuitos como JSON
|
|
|
|
## 📚 Recursos de Aprendizaje
|
|
|
|
### Wokwi
|
|
- [Wokwi Elements Catalog](https://elements.wokwi.com/) - Todos los componentes disponibles
|
|
- [Wokwi Simulator](https://wokwi.com) - Prueba componentes online
|
|
- [AVR8js Demo](https://github.com/wokwi/avr8js/tree/main/demo) - Ejemplos de uso
|
|
|
|
### Desarrollo
|
|
- [React Docs](https://react.dev/) - Framework UI
|
|
- [Vite Docs](https://vitejs.dev/) - Build tool
|
|
- [FastAPI Docs](https://fastapi.tiangolo.com/) - Backend framework
|
|
- [Arduino CLI](https://arduino.github.io/arduino-cli/) - Compilador
|
|
|
|
### Web Components
|
|
- [Lit Documentation](https://lit.dev/) - Framework usado por wokwi-elements
|
|
- [Web Components Guide](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
|
|
|
|
## 🐛 Troubleshooting
|
|
|
|
### Los componentes no se muestran
|
|
|
|
Verifica que wokwi-elements esté compilado:
|
|
|
|
```bash
|
|
cd wokwi-libs/wokwi-elements
|
|
npm run build
|
|
```
|
|
|
|
### Error: "Cannot find module 'avr8js'"
|
|
|
|
Recompila avr8js:
|
|
|
|
```bash
|
|
cd wokwi-libs/avr8js
|
|
npm install
|
|
npm run build
|
|
```
|
|
|
|
### arduino-cli no funciona
|
|
|
|
Verifica la instalación:
|
|
|
|
```bash
|
|
arduino-cli version
|
|
arduino-cli core list
|
|
arduino-cli core install arduino:avr
|
|
```
|
|
|
|
## 🎊 ¡Todo Listo!
|
|
|
|
Tu proyecto está completamente configurado y listo para desarrollar. Tienes:
|
|
|
|
- ✅ Repositorios oficiales de Wokwi clonados y funcionando
|
|
- ✅ 50+ componentes electrónicos disponibles
|
|
- ✅ Emulador AVR8 listo para integrar
|
|
- ✅ Editor de código profesional (Monaco)
|
|
- ✅ Compilador Arduino local
|
|
- ✅ Sistema de actualización automática
|
|
- ✅ Documentación completa
|
|
|
|
¡A programar Arduino! 🚀
|