` } }; // Mostrar/ocultar opciones de menú según la plantilla seleccionada document.getElementById('template').addEventListener('change', function(e) { document.getElementById('menuContainer').style.display = e.target.value === 'menu' ? 'block' : 'none'; }); // Agregar elemento de menú function addMenuItem() { const menuItems = document.getElementById('menuItems'); const input = document.createElement('input'); input.type = 'text'; input.className = 'menu-item'; input.placeholder = `Elemento ${menuItems.children.length + 1}`; menuItems.appendChild(input); } // Vista previa del icono document.getElementById('appIcon').addEventListener('change', function(e) { const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = function(e) { document.getElementById('iconPreview').src = e.target.result; } reader.readAsDataURL(file); } }); // Generar el APK document.getElementById('appForm').addEventListener('submit', async function(e) { e.preventDefault(); const progress = document.getElementById('progress'); const progressText = document.getElementById('progressText'); progress.style.display = 'block'; try { // Recopilar datos del formulario const appName = document.getElementById('appName').value; const appPackage = document.getElementById('appPackage').value; const primaryColor = document.getElementById('primaryColor').value; const templateType = document.getElementById('template').value; // Crear contenido HTML let htmlContent = templates[templateType].html; htmlContent = htmlContent.replace(/{{appName}}/g, appName); htmlContent = htmlContent.replace(/{{primaryColor}}/g, primaryColor); if (templateType === 'menu') { const menuItems = Array.from(document.getElementsByClassName('menu-item')) .map(item => item.value) .filter(Boolean) .map(item => ``) .join(''); htmlContent = htmlContent.replace('{{menuItems}}', menuItems); } // Crear estructura del proyecto const zip = new JSZip(); // Agregar archivos necesarios zip.file("index.html", htmlContent); zip.file("config.xml", generateConfigXml(appName, appPackage)); zip.file("package.json", generatePackageJson(appName, appPackage)); // Generar el archivo ZIP progressText.textContent = "Generando archivo de proyecto..."; const content = await zip.generateAsync({type: "blob"}); // Descargar el archivo progressText.textContent = "¡Proyecto generado! Descargando..."; saveAs(content, `${appName.toLowerCase().replace(/\s+/g, '-')}-project.zip`); // Mostrar instrucciones setTimeout(() => { alert(`Proyecto generado con éxito!\n\nPara construir el APK:\n1. Descomprime el archivo ZIP\n2. Abre una terminal en la carpeta del proyecto\n3. Ejecuta:\n npm install\n npx cap add android\n npx cap open android`); progress.style.display = 'none'; }, 1000); } catch (error) { console.error(error); progress.style.display = 'none'; alert('Error al generar el proyecto: ' + error.message); } }); // Generar config.xml function generateConfigXml(appName, appPackage) { return ` ${appName} Una aplicación generada con Web2APK Web2APK Team `; } // Generar package.json function generatePackageJson(appName, appPackage) { return JSON.stringify({ name: appName.toLowerCase().replace(/\s+/g, '-'), version: "1.0.0", description: "Aplicación generada con Web2APK", main: "index.html", scripts: { "start": "npx cap serve", "build": "npx cap build android", "open": "npx cap open android" }, dependencies: { "@capacitor/android": "^5.0.0", "@capacitor/core": "^5.0.0", "@capacitor/cli": "^5.0.0" }, devDependencies: { "@capacitor/cli": "^5.0.0" }, author: "", license: "ISC" }, null, 2); } // Función para generar el archivo capacitor.config.json function generateCapacitorConfig(appName, appPackage) { return JSON.stringify({ appId: appPackage, appName: appName, webDir: ".", bundledWebRuntime: false, server: { androidScheme: "https" }, android: { buildOptions: { keystorePath: "release-key.keystore", keystorePassword: "android", keystoreAlias: "key0", keystoreAliasPassword: "android" } } }, null, 2); } // Función para generar la estructura de directorios de recursos function generateResourceStructure(zip) { // Crear directorios necesarios zip.folder("resources"); zip.folder("resources/android"); zip.folder("resources/android/icon"); zip.folder("resources/android/splash"); // Agregar un archivo README con instrucciones zip.file("README.md", `# ${appName} ## Instrucciones de instalación 1. Descomprime este archivo ZIP en una carpeta nueva 2. Abre una terminal en la carpeta del proyecto 3. Ejecuta los siguientes comandos: \`\`\`bash npm install npx cap add android npx cap sync npx cap open android \`\`\` 4. En Android Studio: - Espera a que el proyecto se indexe - Haz clic en "Build" > "Build Bundle(s) / APK(s)" > "Build APK(s)" - El APK se generará en app/build/outputs/apk/debug/ ## Requisitos previos - Node.js y npm instalados - Android Studio instalado - JDK 11 o superior instalado - Variables de entorno JAVA_HOME y ANDROID_HOME configuradas ## Estructura del proyecto - \`index.html\`: Página principal de la aplicación - \`config.xml\`: Configuración de Cordova - \`capacitor.config.json\`: Configuración de Capacitor - \`package.json\`: Dependencias y scripts del proyecto `); } // Modificar la función de generación del APK para incluir los nuevos archivos document.getElementById('appForm').addEventListener('submit', async function(e) { e.preventDefault(); const progress = document.getElementById('progress'); const progressText = document.getElementById('progressText'); progress.style.display = 'block'; try { // Recopilar datos del formulario const appName = document.getElementById('appName').value; const appPackage = document.getElementById('appPackage').value; const primaryColor = document.getElementById('primaryColor').value; const templateType = document.getElementById('template').value; // Crear contenido HTML let htmlContent = templates[templateType].html; htmlContent = htmlContent.replace(/{{appName}}/g, appName); htmlContent = htmlContent.replace(/{{primaryColor}}/g, primaryColor); if (templateType === 'menu') { const menuItems = Array.from(document.getElementsByClassName('menu-item')) .map(item => item.value) .filter(Boolean) .map(item => ``) .join(''); htmlContent = htmlContent.replace('{{menuItems}}', menuItems); } // Crear estructura del proyecto const zip = new JSZip(); // Agregar archivos necesarios zip.file("index.html", htmlContent); zip.file("config.xml", generateConfigXml(appName, appPackage)); zip.file("package.json", generatePackageJson(appName, appPackage)); zip.file("capacitor.config.json", generateCapacitorConfig(appName, appPackage)); // Generar estructura de recursos generateResourceStructure(zip); // Procesar el icono si se proporcionó uno const iconInput = document.getElementById('appIcon'); if (iconInput.files.length > 0) { const iconFile = iconInput.files[0]; const iconData = await readFileAsArrayBuffer(iconFile); zip.file("resources/icon.png", iconData); } // Generar el archivo ZIP progressText.textContent = "Generando archivo de proyecto..."; const content = await zip.generateAsync({type: "blob"}); // Descargar el archivo progressText.textContent = "¡Proyecto generado! Descargando..."; saveAs(content, `${appName.toLowerCase().replace(/\s+/g, '-')}-project.zip`); // Mostrar instrucciones setTimeout(() => { alert(`Proyecto generado con éxito!\n\nPara construir el APK:\n1. Descomprime el archivo ZIP\n2. Abre una terminal en la carpeta del proyecto\n3. Ejecuta:\n npm install\n npx cap add android\n npx cap open android`); progress.style.display = 'none'; }, 1000); } catch (error) { console.error(error); progress.style.display = 'none'; alert('Error al generar el proyecto: ' + error.message); } }); // Función auxiliar para leer archivos function readFileAsArrayBuffer(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => resolve(reader.result); reader.onerror = reject; reader.readAsArrayBuffer(file); }); }