Esto es un anuncio, si es molesto en tu lectura, ¡ocúltalo!
Si no sabes por qué terminaste aquí, revisa el por qué de esta aplicación en:
De Compras con El Respondón
La salvación para tus idas al súper (o al changarro).Pero si ya quieres comenzar a utilizar la aplicación, da clic en el siguiente botón:
1. Anatomía de la Pantalla Principal #
El centro de operaciones donde el orden se encuentra con el caos del supermercado.
Para entender cómo opera la aplicación desde el momento en que la abres, aquí tienes el desglose pieza por pieza de la interfaz principal, con sus debidas correcciones técnicas.
Nota mental: todas las imágenes de este manual tienen superpoderes, así que con un solo toque puedes verlas en grande y hacerles zoom para no perderte ni un solo píxel:
- Logotipo e Identidad: El sello de la casa (De Compras con El Respondón). Incluye un enlace directo al sitio oficial (
elrespondon.top) para que sepas exactamente en qué ecosistema estás parado. - Selector de Listas (
LISTA 1/1/3): El centro de mando para alternar entre tus diferentes listas de compras y mantener todo bajo control.- Navegación fluida: Solo tienes que arrastrar el dedo hacia la izquierda y hacia la derecha para moverte entre listas a la velocidad de la luz.
- Botón de WhatsApp: El acceso directo para mandar tu lista por chat a quien se encargue de surtirla. Si la otra persona también tiene instalada la aplicación, podrá copiar y pegar tu lista directamente en su propia interfaz, facilitándole la vida y evitando que el pobre mortal tenga que anotar todo a mano. ¡Magia pura para el pasillo de los apuros!
- Menú de Hamburguesa (
☰): La puerta de entrada al menú general de navegación, que despliega de golpe las opciones clave del sistema: Lista Global, Carrito, Formulario completo, Compras frecuentes, Recibos, Compara y Ahorra, Compartir/Importar WhatsApp, Compartir app, Ver anuncio, Política de Privacidad, Invítame un café y esta misma Documentación (todo operando bajo la versión 3.11.5 de Código-Ed). - Barra de Presupuesto: El aviso interactivo donde puedes hacer doble clic para fijar un límite de gasto y evitar sorpresas desagradables a la hora de pagar en la caja.
- Contenedor Central y Estado Vacío: La zona principal donde aparecerán tus productos. Incluye los avisos de gestos rápidos (deslizar a la derecha para mover al carrito, deslizar a la izquierda para eliminar) y los accesos directos informativos.
- Botón de Adición Flotante (
+): El botón azul siempre visible. Con un solo clic abres el formulario rápido para meter artículos volando; con dos toques despliegas el formulario completo para detallar hasta el último gramo. - Barra de Totales: El desglose en tiempo real que te muestra cuántos artículos llevas anotados y cuántos ya están en el carrito, junto con sus respectivos totales en dinero.
- Acceso Directo al Carrito: El botón naranja con icono de canasta que te transporta de inmediato a la vista de caja y cobro.
1.1 Logotipo e Identidad #
El sello oficial de la casa (De Compras con El Respondón) para que sepas en qué ecosistema estás parado. Si le das clic específicamente a la leyenda «El Respondón», la aplicación te abrirá de inmediato el sitio web oficial en https://elrespondon.top por si quieres echarle un ojo al resto de los contenidos.
1.2 Selector de Listas #
El centro de mando para alternar entre tus diferentes listas de compras y mantener todo bajo control.
El indicador superior no solo te muestra en qué lista estás parado actualmente (como el indicador LISTA 1 acompañado de su posición 1/3), sino que es completamente interactivo para administrar tus categorías:
- Navegación exprés: Puedes arrastrar el dedo hacia la izquierda o hacia la derecha específicamente sobre el recuadro del selector para moverte fluidamente entre tus diferentes listas.
- Personalización al instante: Con un doble toque directo sobre el nombre de la lista, invocarás el modal de edición donde podrás cambiarle el nombre a tu antojo.
1.3 Botón de WhatsApp #
«Exporta tus listas volando a WhatsApp para mandárselas a la pareja o al despistado de la familia que se encargará del mandado.»
El botón verde de WhatsApp es tu salvavidas para compartir las compras sin complicaciones. Al presionarlo, la aplicación empaqueta toda tu lista actual —ordenada por tiendas, con sus precios, cantidades y el total— y la envía directamente al chat que elijas.
- El formato de salida: Como ves en el ejemplo, el mensaje se arma solito agrupando los artículos por tienda (por ejemplo, 3B con el Shampoo y el Azúcar; Aurrera con la Telera y el Caldo de Pollo), desglosando el resumen total de 13 artículos por $99.00.
- Magia para importar: El mensaje incluye automáticamente un enlace y las instrucciones para que, si otra persona recibe el texto, solo tenga que pegarlo en su aplicación para clonar tu lista exacta sin tener que adivinar qué marcas o cantidades pediste.
1.4 Menú de Hamburguesa #
«El centro de control maestro donde vive toda la trastienda de la aplicación para cuando necesitas acceder a las funciones avanzadas.»
Al presionar el clásico icono de las tres rayitas (el menú de hamburguesa), se despliega un panel completo con accesos directos organizados en cuadrícula. Es tu caja de herramientas para moverte por toda la aplicación de un solo trago.
- El panel de opciones: Desde aquí puedes saltar con total libertad a apartados clave como la Lista Global (la sección en la que estamos ahorita), el Carrito, el Formulario completo, Compras frecuentes, Recibos, Compara y Ahorra, herramientas de WhatsApp, y hasta apartados informativos como la Política de Privacidad, Documentación o invitarme un café.
- Todo a la mano: Diseñado con fichas visuales muy claras para que no pierdas tiempo buscando menús escondidos; un toque sobre cualquier botón y te transportas directo a la función que necesitas. Todo esto lo iremos viendo conforme se vaya ocupando o en futura documentación.
1.5 Barra de Presupuesto #
«El lugar donde pones los pies en la tierra y defines de cuánto va a ser el golpe a la cartera antes de pisar el supermercado.»
Esta barra discreta te salva de gastar lo que no tienes distribuyendo tus fondos por método de pago.
- Configurar al instante: Como se ve en la primera vista, solo tienes que dar un doble clic sobre el aviso para invocar el modal de configuración de presupuesto.
- Personalización total y a tu medida: En la ventana emergente no solo defines los montos, sino que puedes editar directamente los nombres de las tarjetas en sus campos de texto (por ejemplo, bautizarlas como Banamex o Santander, tal como lo muestra el ejemplo) y el sistema los recuerda para que no te andes confundiendo con nombres genéricos, además de capturar tu Efectivo. Esto es clave porque te ayudará a cerrar tus recibos con precisión (algo que veremos a fondo en la sección de Carrito), ya que al pagar podrás seleccionar exactamente de qué parte de tu presupuesto están saliendo los fondos.
- El gran total: Una vez guardado, la barra se transforma para mostrarte el desglose limpio por método y el gran total disponible acumulado (el diamante con los $5,215.00 listos para la balacera de ofertas), para que sepas exactamente con cuánto oxígeno cuentas.
1.6 Contenedor Central y Estado Vacío #
«El corazón de la batalla, donde la lista de mandado cobra vida o se queda más desierta que conciencia de político.»
Esta área central es la pantalla principal de la aplicación, el terreno donde ocurre toda la acción de tus compras.
- Cuando el territorio está pelón (Estado Vacío): Si todavía no agregas nada a la lista, te recibe la ilustración clásica acompañada de la dolorosa verdad: Tu lista está ahí esperando clemencia, con sus avisos de que puedes deslizar para mandar al carrito o borrar. Abajo, te dejamos los enlaces directos para que visites la página de De Compras con el Respondón o le eches un ojo a cómo va creciendo esta Documentación.
- Cuando hay mandado en juego: En cuanto empiezas a surtir la lista (como ves en el segundo ejemplo con las tiendas 3B y Aurrera), el contenedor se pone las pilas agrupando los artículos por bloques, mostrando cantidades, precios unitarios, subtotales por tienda y los artículos listos para la acción.
1.6.1 Gestos y Magia Negra en la Interfaz (Artículos y Tiendas) #
«Porque aquí no venimos a adivinar: un buen desliz o un toque a tiempo te salvan la vida o te mandan el mandado al carrito sin escalas.»
La aplicación responde a tus dedos con una serie de movimientos tácticos que hacen todo más fluido. Conócelos antes de meter la pata:
Gestos sobre los Artículos #
- Deslizar a la derecha (Al Carrito): Si pasas el dedo de izquierda a derecha sobre cualquier producto (como se ve en la animación con el Caldo Pollo poniéndose amarillo), lo mandas directo al carrito de compras para marcarlo como que ya lo llevas (en carrito pues).
- Deslizar a la izquierda (A la Basura): Si el desliz es al revés (de derecha a izquierda), la barra se pone roja con su respectivo bote de basura para borrar el artículo de la faz de la tierra (o al menos de tu lista).
- Un toque rápido (Editar): Picarle normalito a un producto te abre el modal de Editar artículo (formulario completo), donde puedes cambiarle el nombre, ajustar cantidades, modificar la cantidad del contenido para ver el precio unitario, la categoría, la tienda o pegarle una URL si andas muy formal y en el futuro quieres revisar el precio, pero el formulario completo lo veremos más adelante.
- Menú de Listas: Al mantener presionado un artículo, se despliega un menú flotante para moverlo de lista (por ejemplo, mandarlo de Casa a la Lista 2 o Lista 3 en un pestañeo).
Gestos sobre las Tiendas #
- Vista exclusiva por tienda (Filtrado): Un toque sobre el encabezado de la tienda (el bloque de 3B o Aurrera) te transporta directo a la vista individual por establecimiento, donde la interfaz aísla y te muestra únicamente los artículos de esa tienda en específico para que los demás artículos no te distraigan.
Deslizar el título de la tienda (A la derecha): Mandas todos los artículos de esa tienda al carrito de un solo jalón operando por mayoreo.
- Deslizar el título de la tienda (A la izquierda): Borras de golpe todos los artículos que pertenecen a ese establecimiento sin andar de romántico.
1.7 Botón de Adición Flotante (+) #
Todo este relajo nació por un coraje marca ACME allá por 2019, cuando un maldito cartón de leche nos demostró que las matemáticas de los supermercados operan bajo leyes oscuras diseñadas exclusivamente para sangrarnos la cartera. Como se negaban a dejarnos en paz y las apps del mercado actual parecen hechas por sádicos que prefieren secuestrarte la pantalla con anuncios en vez de dejarte registrar un artículo, mandamos a volar a la competencia. Para eso armamos este botón flotante +: nuestra trinchera privada para vaciar los precios a velocidad de rayo y sin publicidad fastidiosa.
Aquí operamos con dos modalidades según la prisa que traigas:
Formulario rápido (Un toque): Si andas a las carreras y no traes tiempo para fórmulas científicas, un solo toque sobre el botón abre este panel exprés. Porque no nos gustan las aplicaciones cuadradas que te exigen media vida, aquí tienes la libertad total: puedes rellenar los tres campos básicos (Artículo, Precio y Tienda) o solo poner el nombre del artículo y salvar el día en segundos.
Formulario completo (Doble toque o menú de hamburguesa): Si la cosa se pone seria y necesitas auditar hasta el último centavo para ganarle a la reduflación, un doble toque al botón flotante (o entrar directo desde el menú de hamburguesa 
) te despliega el arsenal completo. Además, la aplicación aprende conforme cierras recibos: entre más la uses, más se afina su memoria para ofrecerte autocompletado inteligente y escribir cada vez menos. Vamos campo por campo para que no quede duda:
- Artículo (*): El nombre de la criatura que vas a comprar (obligatorio, por supuesto).
- Cantidad y Presentación: Cuántos te vas a llevar y en qué empaque vienen (pieza, paquete, kilo, etc.), ajustándolos con los botones de más y menos al tiro.
- Precio unitario y Total: Pon el precio del artículo y la aplicación solita hace la magia con la matemática del súper para calcular el total.
- Contenido y Precio por unidad: El truco definitivo para cazar tramposos. Anotas cuántos gramos, mililitros o piezas trae (por ejemplo, el rollo o el tetrapack) y la app te calcula el precio real por unidad para saber si el empaque «grande» realmente te ahorra lana o te quiere ver la cara.
- Categoría y Tienda: Para clasificar si va a la lista de la casa, la escuela o el chisme, y asignarlo directo al establecimiento correspondiente (como Bodega Aurrera o 3B).
- URL del producto (opcional): El enlace por si quieres dejar el chismecito digital guardado de dónde lo cotizaste en línea o revisarlo en el futuro.
1.8 Barra de Totales #
Como si estuviéramos celebrando en grande —pero con la cartera bien vigilada para que no nos den baje—, aquí la regla de oro es arriba los billetes y arriba las cuentas claras. Justo en la parte baja de la pantalla tenemos este centro de mando financiero que te muestra la realidad de tu dinero antes de llegar a la caja a sufrir.
Aquí no hay adivinanzas, el tablero se divide en dos datos clave para que sepas exactamente dónde estás parado:
- Artículos (Total general): Te indica cuántos artículos te quedan pendientes en la lista y la suma exacta de lo que falta por comprar. Ojo aquí: ya no toma en cuenta lo que ya metiste al carrito, sirviendo puramente como el saldo de lo que aún está por recolectarse en los pasillos. Ideal para saber si vas a salir tablas o si vas a tener que dejar la crema chantilly en el estante.
- En carrito (Total parcial): La cuenta exacta de lo que ya echaste al carrito real o marcaste en la app. Así vas monitoreando en tiempo real cuánto llevas gastado de tus adquisiciones físicas antes de pasar a pagarle a la cajera.
1.9 Acceso Directo al Carrito #
Y para rematar con la tercia de ases de la barra inferior, llegamos al botón estrella: el Acceso Directo al Carrito (esa chulada naranja con icono de canasta que ves de lado derecho).
Porque sabemos que andar cargando el changarro virtual y buscar lo que ya recolectaste es un dolor de cabeza en las aplicaciones tradicionales, un solo toque en esta canasta te manda volando directo al resumen de lo que ya lleva boleto de salida. Aquí puedes revisar a detalle todo lo que echaste al carrito físico, verificar montos y confirmar que la cuenta vaya marchando sobre ruedas antes de enfrentarte a la temida hora de pagarle a la cajera.
(Pero no te me desesperes todavía: el funcionamiento a fondo de todo lo relacionado con el carrito lo veremos a detalle en el siguiente documento).
Esto es un anuncio, si es molesto en tu lectura, ¡ocúltalo!
