LightDark
Al desarrollar una aplicación web sencilla con Google Apps Script para buscar en una base de datos, pueden surgir problemas donde el frontend no recibe los resultados esperados. Un caso común es cuando el frontend recibe null del backend, incluso cuando este último está retornando resultados válidos. Este artículo analiza las posibles razones y soluciones a este problema, centrándose en la conversión de nombres y los aspectos técnicos relevantes del código.
Problemas Comunes con Google Apps Script
-
Verificación de Conexiones:
Asegúrate de que el frontend esté correctamente conectado al backend. Revisa las funciones degoogle.script.runque invocan las funciones del lado del servidor. Por ejemplo, en tu código, verifica que la funciónsearchBooksse esté llamando correctamente con los parámetros adecuados. -
Validación de Parámetros:
Antes de realizar la búsqueda en la hoja de cálculo, asegúrate de que los parámetros de entrada, comocategoryysearchTerm, estén siendo recibidos correctamente. La falta de datos o datos incorrectos podría llevar a que el backend no devuelva resultados. - Formato de Datos:
Asegúrate de que los datos devueltos por el backend sean en el formato esperado. En tu funciónsearchBooks, estás utilizando una búsqueda que puede devolver un resultado en un formato inesperado. Es fundamental validar que los datos estén bien estructurados antes de intentar manipularlos en el frontend.
Ejemplo de Implementación
Archivo HTML (index.html)
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
input, select, button { margin: 5px; padding: 10px; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
th { background-color: #f2f2f2; }
</style>
</head>
<body>
<h1>Búsqueda de Libros</h1>
<input type="text" id="searchTerm" placeholder="Ingrese término de búsqueda">
<select id="category">
<option value="">Selecciona una categoría</option>
</select>
<button onclick="search()">Buscar</button>
<table id="results">
<thead>
<tr>
<th>Timestamp</th>
<th>Fecha de Adición</th>
<th>No. Acc</th>
<th>Título del Libro</th>
<th>Autor</th>
<th>Tipo de Libro</th>
<th>Volumen</th>
<th>Editorial</th>
<th>Año de Publicación</th>
<th>Páginas</th>
<th>No. Factura</th>
<th>Fecha de Factura</th>
<th>Precio</th>
<th>Condición</th>
<th>Asignatura</th>
<th>Almirah</th>
<th>Estante</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
// Cargar categorías en el dropdown
google.script.run.withSuccessHandler((categories) => {
const dropdown = document.getElementById('category');
categories.forEach(([category]) => {
const option = document.createElement('option');
option.value = category;
option.text = category;
dropdown.appendChild(option);
});
}).getCategories();
// Función de búsqueda
function search() {
const searchTerm = document.getElementById('searchTerm').value;
const category = document.getElementById('category').value;
if (!searchTerm || !category) {
alert('Por favor, ingresa un término de búsqueda y selecciona una categoría.');
return;
}
google.script.run.withSuccessHandler((results) => {
const tbody = document.querySelector('#results tbody');
tbody.innerHTML = ''; // Limpiar resultados anteriores
if (!results || results.length === 0) {
tbody.innerHTML = '<tr><td colspan="17">No se encontraron resultados.</td></tr>';
return;
}
results.forEach(row => {
const tr = document.createElement('tr');
row.forEach(cell => {
const td = document.createElement('td');
td.textContent = cell;
tr.appendChild(td);
});
tbody.appendChild(tr);
});
}).searchBooks(category, searchTerm);
}
</script>
</body>
</html>Archivo de Código de Google (code.gs)
function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function getCategories() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Category');
const data = sheet.getRange(2, 1, sheet.getLastRow() - 1, 2).getValues();
return data;
}
function searchBooks(category, searchTerm) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const categorySheet = ss.getSheetByName('Category');
const booksSheet = ss.getSheetByName('Books');
const columnNumber = categorySheet.getRange(2, 1, categorySheet.getLastRow() - 1, 2)
.getValues().find(([cat]) => cat === category)?.[1];
const booksData = booksSheet.getRange(2, 1, booksSheet.getLastRow() - 1, booksSheet.getLastColumn()).getValues();
return booksData
.filter(row => row[columnNumber - 1].toString().toLowerCase().includes(searchTerm.toLowerCase()))
.map(row => row.map(cell => cell || ''));
}Conclusión
La integración entre el frontend y el backend en aplicaciones web construidas con Google Apps Script puede presentar desafíos. Si el frontend está recibiendo null, es crucial realizar una serie de verificaciones y validaciones. Asegúrate de que las funciones están correctamente invocadas, que los parámetros son válidos y que los datos están bien formateados. Siguiendo estas recomendaciones, podrás resolver problemas comunes y mejorar la funcionalidad de tu aplicación web.