BreynGINE

Mi programa de facturación (en el móvil)

Esta es la versión para el móvil y la tablet (Android), con la interfaz táctil del editor. ¿Lo vas a hacer en el ordenador? Ve a la versión para ordenador.
Estás leyendo el tutorial en el navegador del móvil. En BreynGINE, ☰ > Ayuda > Tutoriales abre esta misma página y te ofrece copiar a tu proyecto los dibujos y sonidos que necesita; aquí también puedes descargarlos en ZIP.

Capítulo 1Lo que vas a hacer

En este tutorial vas a crear un programa de facturación para el ordenador, desde cero y sin escribir código, y lo vas a hacer desde el móvil. Tendrá clientes, productos y facturas con sus líneas; calculará solo la base, el IVA y el total; numerará las facturas por series y sacará cada factura en PDF, con tu logotipo, lista para enviar o imprimir.

«Mi facturación»: una factura con sus líneas y los totales calculados.
«Mi facturación»: una factura con sus líneas y los totales calculados.
Y su PDF, con los datos de tu empresa y del cliente.
Y su PDF, con los datos de tu empresa y del cliente.

Usarás:

  • BreynData, el panel Datos: aquí diseñas las tablas (clientes, productos, facturas...) de una base de datos.
  • Los componentes Tabla de datos y Formulario de datos, que enseñan y editan los registros sin programar nada.
  • BreynFlow, para unir las pantallas: abrir una factura, filtrar sus líneas, crear el PDF...

Es la versión del tutorial para la interfaz táctil del editor, con capturas del móvil. Si aún no conoces las pestañas de abajo (Escena, Vista, Inspector, Proyecto, Más), mira el capítulo El editor en el móvil de Mi primer juego. Y si no conoces el modo App, el tutorial de la lista de tareas lo explica con calma: aquí se va un poco más rápido en lo que ya sale allí.

Consejo: el programa es para Windows, así que al final necesitarás un ordenador para generar el .exe (te contamos cómo llevarte el proyecto). Todo lo demás, diseñarlo y probarlo, se hace en el móvil. Con una tablet, o un móvil grande, irás más cómodo.

Capítulo 2Crea el proyecto

En el administrador de proyectos, toca Nuevo Proyecto, llama al proyecto Mi facturación y elige la plantilla Programa de escritorio.

La plantilla «Programa de escritorio».
La plantilla «Programa de escritorio».

En la pestaña Proyecto, toca dos veces home.tscn y luego toca Vista (y 2D en la barra de entornos):

Un programa de escritorio: pantallas del tamaño de un ordenador (1280 × 720), dentro de la vista del móvil.
Un programa de escritorio: pantallas del tamaño de un ordenador (1280 × 720), dentro de la vista del móvil.

Se parece al modo App, con tres diferencias:

  • La pantalla tiene tamaño de Ordenador y se ve como una ventana. Pellizca la vista para acercarte.
  • main.tscn es la ventana del programa: una Barra lateral (las secciones, a la izquierda) y Screens, donde se abren las pantallas. La rellenarás al final.
  • En el panel Componentes, en vez de Generar APK verás Generar EXE..., para crear el programa de Windows.
Consejo: la plantilla Programa de escritorio: Facturación, de la pestaña Tienda del administrador de proyectos, trae un programa como este ya hecho, con VeriFactu incluido. Ábrela cuando termines para comparar.

Capítulo 3El panel Datos

El panel de BreynData está en la pestaña Más. Tócala y, arriba, toca los tres puntos ⋮: sale la lista de paneles (Consola, Depurador, Audio...). Elige Datos.

Los tres puntos ⋮ de la pestaña Más llevan a cualquier panel de abajo: aquí, a Datos.
Los tres puntos ⋮ de la pestaña Más llevan a cualquier panel de abajo: aquí, a Datos.

El panel Datos tiene cuatro pestañas: Tablas, Registros, Empresa y VeriFactu. No caben todas: con las flechitas ‹ › de la derecha llegas a las demás.

Los datos de tu empresa

Ve a la pestaña Empresa y rellena tus datos: salen arriba en cada PDF.

  • Nombre y NIF / CIF.
  • Detalles: la dirección, el correo, el teléfono... una cosa por línea.
  • Logotipo: toca Elegir... y elige una imagen del proyecto. Si no tienes una a mano, toca ☰ > Ayuda > Tutoriales > Mi programa de facturación (escritorio) y Copiar y abrir: el logotipo de ejemplo se copia al proyecto como logo.png. (También puedes descargarlo aquí.)
  • Pie de página: una frase al pie de cada página.
La pestaña Empresa del panel Datos.
La pestaña Empresa del panel Datos.

Capítulo 4Las tablas: clientes y productos

Una tabla es un tipo de registro: los clientes, los productos, las facturas... Cada tabla tiene campos: los datos de cada registro (el nombre, el precio, la fecha...). Ve a la pestaña Tablas.

En el móvil, la pestaña se lee de arriba abajo, y se desliza con el dedo: arriba, la lista de tablas y los datos de la tabla elegida; en medio, sus campos (nombre y tipo); y debajo, los ajustes del campo que toques.

Clientes

1
Toca + Tabla. Debajo, en Nombre escribe clientes (el nombre para las reglas: letras, números y _, sin espacios ni acentos), en Etiqueta Clientes (el nombre que se ve) y en Orden name.
2
La tabla ya trae un campo: name (Nombre), obligatorio. Déjalo así.
3
Toca + Campo y, en los ajustes del campo (desliza hacia abajo), ponle Nombre nif, Etiqueta NIF y marca Único (no puede haber dos clientes con el mismo NIF).
4
Más campos: direccion (Dirección), de Tipo Texto largo y sin Mostrar en listados; email (Email) y telefono (Teléfono).
Las tablas del proyecto, con sus datos debajo.
Las tablas del proyecto, con sus datos debajo.

Los tipos de campo que puedes usar:

  • Texto y Texto largo (varias líneas).
  • Número entero, Número decimal y Dinero (con dos decimales y el símbolo €).
  • Fecha y Sí/No (una casilla).
  • Registro de otra tabla: un desplegable para elegir, por ejemplo, el cliente de una factura.
  • Opción: un desplegable con valores fijos.

Productos

1
+ Tabla: nombre productos, etiqueta Productos, orden descripcion.
2
Toca el campo name y cámbialo: nombre descripcion, etiqueta Descripción.
3
+ Campo: precio (Precio), de tipo Dinero.
4
En Se muestra como elige Descripción: es lo que se ve de un producto en los desplegables.

Capítulo 5La tabla de facturas

Aquí está lo más interesante: campos que se numeran y se calculan solos.

1
+ Tabla: nombre facturas, etiqueta Facturas, orden -fecha, -numero (el «-» ordena de mayor a menor: las más nuevas arriba).
2
Cambia el primer campo por serie (Serie), de tipo Opción, con las Opciones A y R (A para las normales, R para las rectificativas) y el Valor Predeterminado A.
3
Y añade estos campos:
  • numero (Número): Número entero, obligatorio, con Numeración automática y Numerar por serie. Así la serie A va 1, 2, 3... y la R lleva su propia cuenta.
  • codigo (Factura): Texto, con la Fórmula serie + "-" + str(numero), sin Mostrar en listados. Da «A-1», «A-2»...
  • fecha (Fecha): Fecha, obligatoria, con el Valor Predeterminado today (hoy).
  • cliente (Cliente): Registro de otra tabla, obligatorio, con la Tabla referenciada clientes.
Los campos de las facturas (nombre y tipo), y los ajustes del campo «cliente».Los campos de las facturas (nombre y tipo), y los ajustes del campo «cliente».
Los campos de las facturas (nombre y tipo), y los ajustes del campo «cliente».
  • iva_pct (IVA %): Número decimal, con el valor predeterminado 21.
  • base (Base imponible): Dinero, con Suma de lineas.importe: la suma de los importes de sus líneas (la tabla de líneas la harás ahora).
  • iva (IVA): Dinero, con la fórmula base * iva_pct / 100.
  • total (Total): Dinero, con la fórmula base + iva.
  • pagada (Pagada): Sí/No.
  • notas (Notas): Texto largo.
4
En Se muestra como elige Factura (el código A-1).
Consejo: los campos con fórmula o con «Suma de» no se escriben: se calculan solos cada vez que cambia algo. En las fórmulas usas los nombres de los campos, y + - * / para las cuentas. Con las flechas ▲ ▼ que hay junto a + Campo cambias el orden de los campos.

Capítulo 6Las líneas de las facturas

Cada factura tiene varias líneas (los conceptos). Van en su propia tabla:

1
+ Tabla: nombre lineas, etiqueta Líneas de factura.
2
El primer campo será factura (Factura): Registro de otra tabla de facturas, obligatorio, con Borrar con el padre (si borras una factura, se borran sus líneas) y sin Mostrar en listados.
3
Añade:
  • producto (Producto): Registro de otra tabla de productos, sin Mostrar en listados.
  • descripcion (Descripción): Texto, obligatorio.
  • cantidad (Cantidad): Número decimal, valor predeterminado 1.
  • precio (Precio): Dinero.
  • importe (Importe): Dinero, con la fórmula cantidad * precio.
4
Elige Descripción en Se muestra como.

Por último, toca Guardar tablas (debajo de la lista de campos). El diseño se guarda en data/schema.tres y la base de datos se pone al día (si un día añades campos, los datos que ya tienes no se pierden).

Consejo: fíjate en que descripcion y precio se llaman igual en productos y en líneas. Gracias a eso, al elegir un producto en una línea, su descripción y su precio se copian solos.

Capítulo 7La pantalla de clientes

Ahora, las pantallas. Ve a la pestaña Escena, toca los tres puntos ⋮ de arriba y elige Componentes. Toca Nueva pantalla... y créala: clientes.tscn. Pon Clientes en su Title (en el Inspector).

El panel Componentes: arriba, Nueva pantalla y Generar EXE; más abajo, los componentes de datos.El panel Componentes: arriba, Nueva pantalla y Generar EXE; más abajo, los componentes de datos.
El panel Componentes: arriba, Nueva pantalla y Generar EXE; más abajo, los componentes de datos.

La pantalla tendrá la lista de clientes a la izquierda y, a la derecha, una tarjeta con el formulario del cliente seleccionado. Como en el tutorial de tareas: toca el objeto en la Jerarquía y luego el componente en Componentes (se cambia de uno a otro con ⋮).

1
Toca Box y añade una Fila. En el Inspector, en Layout > Container Sizing, marca Expand en Vertical: así la fila ocupa toda la altura.
2
Con la fila seleccionada, añade una Tabla de datos. Llámala Tabla (mantén el dedo > Renombrar). En el Inspector: Table clientes y, en Columns, las columnas que quieres ver: name, nif, email y telefono.
3
Toca otra vez la fila y añade una Tarjeta. Ponle Custom Minimum Size x = 380 y en Container Sizing > Vertical elige Shrink Begin (que no se estire hacia abajo). Cambia su texto «Tarjeta» por Cliente.
4
Toca el Box de la tarjeta y añade un Formulario de datos llamado Formulario, con Table clientes.
La Jerarquía de la pantalla de clientes, y cómo queda: la tabla y el formulario, ya con los campos que diseñaste.La Jerarquía de la pantalla de clientes, y cómo queda: la tabla y el formulario, ya con los campos que diseñaste.
La Jerarquía de la pantalla de clientes, y cómo queda: la tabla y el formulario, ya con los campos que diseñaste.

El formulario saca solo un campo para cada dato, con su tipo: el desplegable, la casilla, el texto largo... y los botones Guardar, Nuevo y Borrar.

Sus reglas

Toca Clientes (la pantalla) en la Jerarquía y añade el componente Reglas (BreynFlow). Luego ve a la vista BreynFlow (desliza la barra de entornos) y crea dos reglas:

  • Abrir el registro: evento Datos > Fila de tabla de datos (Tabla, «se selecciona») → acción Datos > Abrir registro en formulario (Formulario). El registro es {record_id}, el de la fila elegida.
  • Uno nuevo: Fila de tabla de datos (Tabla, «pide uno nuevo (botón Nuevo)») → Abrir registro en formulario (Formulario) con el registro 0, que quiere decir «uno nuevo, vacío».
La regla «Abrir el registro».
La regla «Abrir el registro».

Y la de productos

Haz igual la pantalla productos.tscn (título Productos): una fila con una Tabla de datos de productos (columnas descripcion y precio), una tarjeta Producto con su Formulario de datos y las mismas dos reglas.

Consejo: puedes duplicar clientes.tscn en la pestaña Proyecto (mantén el dedo sobre el archivo > Duplicar...) y cambiar solo la tabla, las columnas y el título.

Capítulo 8La lista de facturas

Nueva pantalla: facturas.tscn, con el título Facturas.

1
Toca AppBar y añade un Botón llamado PdfLista, con el texto PDF de la lista y el estilo Text.
2
Toca Box y añade una Tabla de datos llamada Tabla: tabla facturas, columnas serie, numero, fecha, cliente, total y pagada.

Aquí las facturas no se editan al lado, sino en su propia pantalla (la harás ahora). Las reglas:

  • Abrir una factura: Fila de tabla de datos (Tabla, «se abre (doble clic o Intro)») → Ir a una pantalla factura.tscn enviando factura_id = {record_id}.
  • Una factura nueva: Fila de tabla de datos («pide uno nuevo (botón Nuevo)») → Ir a una pantalla factura.tscn enviando factura_id = 0.
  • PDF de la lista: Se pulsa un botón (PdfLista) → Datos > Crear PDF de «un listado de una tabla», tabla facturas, título Facturas.
La lista de facturas (en el ordenador).
La lista de facturas (en el ordenador).

Capítulo 9La pantalla de una factura

La última pantalla, y la más completa: factura.tscn, con el título Factura. A la izquierda irá la factura y, a la derecha, sus líneas.

1
En AppBar, un Botón Pdf con el texto PDF y estilo Text.
2
En Box, una Fila con Expand en Vertical, como en clientes.
3
Dentro de la fila, una Tarjeta (ancho mínimo 360, Shrink Begin, texto Factura) con un Formulario de datos llamado FormFactura de la tabla facturas.
4
Toca la fila y añade una Columna (con Expand en Horizontal, para que ocupe el resto). Dentro: un Título con el texto Líneas, una Tabla de datos llamada Lineas y una Tarjeta con un Formulario de datos llamado FormLinea.
5
La tabla Lineas: tabla lineas, columnas descripcion, cantidad, precio e importe; desmarca Show Search y Show New Button.
6
El formulario FormLinea: tabla lineas, Columns 2 y, en Fields, producto, descripcion, cantidad, precio e importe (sin factura: esa se pone sola).
7
En la tarjeta de la línea, cambia el texto por una ayuda: Guarda primero la factura y luego añade sus líneas. Al elegir un producto se rellenan su descripción y su precio.
La pantalla de una factura: el formulario a la izquierda, las líneas a la derecha.
La pantalla de una factura: el formulario a la izquierda, las líneas a la derecha.
Consejo: en un formulario, Fields vacío quiere decir «todos los campos, en su orden». Solo hace falta rellenarlo para quitar alguno o cambiar el orden.

Capítulo 10Las reglas de la factura

Añade Reglas (BreynFlow) a la pantalla Factura. Son siete, pero muy parecidas entre sí (con el menú ⋮ de una regla > Duplicar regla irás más rápido):

  • Abrir la factura: Se muestra la pantalla → Abrir registro en formulario (FormFactura, registro {factura_id}). Es el número que envió la lista (0 si es nueva).
  • Sus líneas: Datos > Formulario guardado (FormFactura, «muestra un registro (o uno nuevo)», su id en factura_id) → Datos > Filtrar tabla de datos (Lineas, solo los registros con factura = {factura_id}) → Abrir registro en formulario (FormLinea, registro 0, con los valores iniciales factura = {factura_id}).
  • Guardada: sus líneas: lo mismo, pero con «guarda un registro». Así, al guardar una factura nueva, ya se le pueden añadir líneas.
  • Factura borrada: Formulario guardado (FormFactura, «borra un registro») → Volver atrás.
  • Línea guardada: la siguiente: Formulario guardado (FormLinea, «guarda un registro», su id en linea_id) → Abrir registro en formulario (FormLinea, registro 0, con factura = {factura_id}). El formulario queda listo para la línea siguiente.
  • Cambiar una línea: Fila de tabla de datos (Lineas, «se selecciona», su id en linea_id) → Abrir registro en formulario (FormLinea, registro {linea_id}).
  • PDF: Se pulsa un botón (Pdf) → Crear PDF de «un documento de un registro (factura...)», tabla facturas, registro {factura_id}, título Factura.
Consejo: «Crear PDF» encuentra solo lo que necesita una factura: el número y su serie, la fecha, el cliente, las líneas (la tabla que apunta a las facturas y se borra con ellas) y los totales (los campos de dinero calculados).

Guarda (💾).

Capítulo 11La barra lateral

Ya solo falta decirle al programa qué secciones tiene. En la pestaña Proyecto, toca dos veces main.tscn, toca Sidebar en la Jerarquía y, en el Inspector:

  • App Title: Mi facturación.
  • Titles: Facturas, Clientes y Productos (toca la lista para abrirla, pon Tamaño 3 y escribe cada una).
  • Screens: res://facturas.tscn, res://clientes.tscn y res://productos.tscn, en el mismo orden (con el botón de carpeta de cada fila).
Las tres pantallas de la barra lateral, en el Inspector. Si una lista no cabe, deslízala de lado.
Las tres pantallas de la barra lateral, en el Inspector. Si una lista no cabe, deslízala de lado.

La primera sección es la que se abre al arrancar. La pantalla home.tscn de la plantilla ya no se usa: puedes borrarla.

Capítulo 12¡A facturar!

Guarda todo y toca ▶. El programa se abre encima del editor, con su barra lateral. Es un programa de ordenador, así que en el móvil se ve pequeño: gira el móvil para verlo en horizontal, o pruébalo en una tablet.

1
Ve a Clientes, toca Nuevo, rellena el formulario y toca Guardar. Añade otro.
Un cliente nuevo.
Un cliente nuevo.
2
En Productos, añade unos cuantos con su precio.
3
Ve a Facturas y toca Nuevo. La serie ya es A y la fecha la de hoy; elige el cliente y toca Guardar: la factura recibe su número.
4
Ahora, a la derecha, elige un producto: su descripción y su precio aparecen solos. Cambia la cantidad si quieres y toca Guardar. Añade más líneas.
Al elegir un producto, la línea se rellena sola.
Al elegir un producto, la línea se rellena sola.

La base, el IVA y el total se calculan a cada línea.

5
Toca PDF: se crea el PDF de la factura.
6
Vuelve atrás (la flecha de arriba): la lista ya enseña tus facturas, de la más nueva a la más antigua.
La lista de facturas.
La lista de facturas.
Consejo: en el editor, el panel Datos > Registros enseña los datos guardados en este dispositivo, y también puedes cambiarlos desde ahí.
La pestaña Registros del panel Datos.
La pestaña Registros del panel Datos.

Capítulo 13El programa para Windows

El programa de verdad es un .exe para Windows, y ese archivo se genera en un ordenador. Llévate el proyecto así:

1
Toca ☰ > Proyecto > Empaquetar proyecto como ZIP... y guarda el ZIP (por ejemplo, en Descargas).
☰ > Proyecto: Empaquetar proyecto como ZIP...
☰ > Proyecto: Empaquetar proyecto como ZIP...
2
Pásalo al ordenador (por correo, por la nube, con un cable...).
3
En el ordenador, abre BreynGINE, toca Importar en el administrador de proyectos y elige el ZIP.
4
Con el proyecto abierto, pulsa Generar EXE... en el panel Componentes.
La ventana «Generar EXE (Windows)», en el ordenador.
La ventana «Generar EXE (Windows)», en el ordenador.

Pon el nombre del programa, la versión, tu empresa y un icono (un PNG cuadrado o un .ico; puedes dibujarlo en el editor de Sprites). Pulsa Generar y tendrás un solo archivo .exe, con todo dentro, en la carpeta build del proyecto. Cada ordenador donde lo uses tendrá su propia base de datos.

VeriFactu

Si facturas en España, la pestaña VeriFactu del panel Datos prepara el programa para la normativa: al emitir cada factura se envía a la AEAT con tu certificado digital y el PDF lleva el código QR.

La pestaña VeriFactu: qué campos son el número, la serie, la fecha, el cliente, los importes...
La pestaña VeriFactu: qué campos son el número, la serie, la fecha, el cliente, los importes...

La plantilla Programa de escritorio: Facturación de la Tienda lo trae ya configurado, con el botón Emitir y las piezas VeriFactu de BreynFlow: es el mejor sitio para verlo funcionando.

Capítulo 14Y ahora, ¿qué?

¡Has hecho un programa de facturación completo, desde el móvil! Con base de datos, numeración por series, cálculos automáticos y PDF con tu logotipo. Ideas para seguir:

  • Añade presupuestos: otra tabla igual que facturas, con sus líneas, y su PDF con el título Presupuesto.
  • Filtra la lista: Filtrar tabla de datos con pagada = false para ver solo las facturas pendientes.
  • Cuenta lo que te deben: la condición Número de registros y un texto que lo diga.
  • Pon un buscador de clientes en la factura: el componente Selector de registro.
  • Haz una versión para el móvil: los mismos datos y componentes funcionan en el modo App, y esa sí la puedes instalar desde el propio móvil con Generar APK.

¡Que las cuentas te salgan siempre!

← Todos los tutoriales