1. Primeros Pasos
GB Coder se ejecuta íntegramente en el navegador sin necesidad de servidores remotos ni cuentas.
Requisitos del Sistema y Navegadores
GB Coder está diseñado para navegadores web modernos. Para el editor estático HTML/CSS/JS cualquier navegador con soporte ES2020 e IndexedDB es suficiente. Para el IDE avanzado WebContainer se requiere compatibilidad con SharedArrayBuffer y aislamiento de origen cruzado (COOP/COEP). Navegadores basados en Chromium (Chrome, Edge, Brave) y Firefox ofrecen compatibilidad completa.
Creación del Primer Espacio de Trabajo
Accede a /app/projects para entrar al panel de proyectos. Haz clic en "Nuevo Proyecto" y selecciona entre un entorno estático HTML/CSS/JS, una plantilla de React o Vue, o una arquitectura completa con Node.js.
2. Flujo de Trabajo Estático HTML/CSS/JS
Comentarios visuales instantáneos sin tiempos de compilación.
Prototipado en Tres Paneles
El editor estático divide el espacio de trabajo en paneles de HTML, CSS y JavaScript con una ventana de vista previa interactiva. Cada cambio se evalúa con control de frecuencia para actualizar el DOM en tiempo real.
<!-- index.html -->
<div class="card">
<h1 id="headline">Hola GB Coder</h1>
<button id="counterBtn">Clics: 0</button>
</div>
<script>
let count = 0;
const btn = document.getElementById('counterBtn');
btn.addEventListener('click', () => {
count++;
btn.textContent = `Clics: ${count}`;
});
</script>Inyección de Librerías Externas vía CDN
Puedes incluir librerías populares como Tailwind CSS, Bootstrap o React directamente en el encabezado HTML o mediante el gestor de librerías externas.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>3. Plantillas de Proyectos y Galería
Estructuras preconfiguradas para iniciar el desarrollo rápidamente.
Selección de Plantillas
La galería incluye estructuras optimizadas para landing pages, prototipos de componentes y paneles de administración. Los archivos se inicializan en IndexedDB de forma aislada.
Organización Multifile
GB Coder permite organizar proyectos con múltiples archivos, subdirectorios y módulos ES nativos con referencias relativas limpias.
4. Entornos React y Vue
Desarrollo basado en componentes directamente en el navegador.
Prototipado con React 18
Compatibilidad con React 18 y sintaxis JSX/TSX. En el IDE avanzado Vite compila los componentes al vuelo, ofreciendo recarga rápida sin recargar la página completa.
import React, { useState } from 'react';
export default function Contador() {
const [clicks, setClicks] = useState(0);
return (
<div className="p-4 bg-white rounded shadow">
<h2 className="text-xl font-bold">Contador React: {clicks}</h2>
<button
onClick={() => setClicks(c => c + 1)}
className="mt-2 px-4 py-2 bg-blue-600 text-white rounded"
>
Aumentar
</button>
</div>
);
}Componentes Únicos en Vue 3 (.vue)
Las plantillas de Vue admiten bloques template, script setup y style. El compilador en el navegador transforma el archivo .vue en código reactivo al instante.
5. IDE Avanzado y Terminal WebContainer
Ejecuta paquetes Node.js y servidores locales dentro de tu pestaña.
Terminal Interactiva xterm.js
El IDE avanzado integra una shell xterm.js donde puedes ejecutar comandos POSIX habituales, correr scripts de Node.js e instalar dependencias de npm.
# Instalar dependencias
npm install
# Iniciar servidor de desarrollo
npm run dev
# Ver versión de Node.js
node -vReenvío de Puertos a la Vista Previa
Cuando Vite o Express escucha en un puerto local, WebContainers captura el evento y lo canaliza directamente al iframe de vista previa interna sin salir del navegador.
6. Almacenamiento Local, Privacidad y Modo Offline
Seguridad y soberanía total sobre tu código fuente.
Arquitectura con IndexedDB
Cada archivo y carpeta se guarda en la base de datos IndexedDB local gb-coder-projects-db. El código nunca viaja a servidores remotos no autorizados.
Funcionamiento sin Conexión
Una vez cargado, GB Coder continúa funcionando sin conexión a internet. Los navegadores asignan varios gigabytes según el espacio en disco disponible.
7. Copias de Seguridad y Exportación ZIP
Portabilidad sin dependencias propietarias.
Exportación ZIP con Hash SHA-256
Descarga proyectos completos en formato ZIP estándar con cálculo automático de hash de integridad para verificar la autenticidad del archivo.
Restauración e Importación Segura
Arrastra y suelta el archivo ZIP en el panel de proyectos para restaurar el entorno completo tras una validación preventiva de seguridad en las rutas.
8. Búsqueda Global y Atajos de Teclado
Navegación ágil por el código y herramientas de edición.
Atajos de Teclado Principales
Usa los atajos habituales de VS Code: Ctrl+S para guardar, Ctrl+P para cambiar de archivo, Ctrl+F para buscar y Ctrl+` para alternar la terminal.
Búsqueda Global en Archivos
Busca y reemplaza cadenas de texto en todos los archivos del proyecto con soporte para expresiones regulares y coincidencia exacta.
9. Resolución de Problemas y Compatibilidad
Diagnóstico de problemas frecuentes en entornos web.
WebContainer Desactivado o No Soportado
Si la opción WebContainer no está disponible, comprueba que el navegador admita SharedArrayBuffer y que accedas mediante HTTPS con cabeceras COOP/COEP válidas.
Reinicio de Caché y Service Worker
Si observas archivos obsoletos tras una actualización, realiza una recarga forzada (Ctrl+F5 o Ctrl+Shift+R). GB Coder limpia automáticamente versiones antiguas.