Delphi + FireMonkey + Android: diseño de una aplicación móvi

[jaoj]

Delphi + FireMonkey + Android: diseño de una aplicación móvil

Esta guía recoge el método que utilizo como referencia para desarrollar proyectos Delphi + FireMonkey (FMX) para Android, tomando CAFEBAKS como ejemplo práctico.

El objetivo no consiste únicamente en conseguir que Delphi compile para Android: la aplicación debe parecer diseñada realmente para un dispositivo móvil.

[hr]

1. Delphi + FireMonkey

Para Android se utiliza FireMonkey (FMX) en lugar de VCL.

Código: Seleccionar todo

DELPHI
│
▼
FIREMONKEY
│
┌────────┴────────┐
▼                 ▼
WINDOWS            ANDROID
pruebas rápidas      destino final

Durante el desarrollo:

• Se diseña visualmente desde el IDE.
• Se prueba rápidamente en Windows.
• Se prueba periódicamente en Android real.
• El código se reserva principalmente para la lógica.
• Cada versión estable se actualiza en GitHub.

[hr]

2. Diseñar pensando en móvil

No se crea una aplicación Windows para reducirla posteriormente.

En Android se priorizan:

• Controles táctiles grandes.
• 🖼 Imágenes e iconos.
• Tarjetas gráficas.
• Layouts adaptables.
• Textos breves.
• Navegación sencilla.

[hr]

3. Un formulario, varias vistas

Siempre que resulta razonable se mantiene un único FormMain y se crean las vistas mediante TLayout:

Código: Seleccionar todo

FormMain
│
├── LayoutCafeteria
├── LayoutTienda
├── LayoutStock
├── LayoutResumen
└── LayoutMenuInferior

Cuando se cambia de sección:

Código: Seleccionar todo

Vista activa    -> Visible = True
Otras vistas    -> Visible = False

El usuario percibe diferentes pantallas, aunque Delphi continúa trabajando sobre el mismo formulario.

[hr]

4. Navegación inferior

Una barra inferior permite acceder a las funciones principales:

Código: Seleccionar todo

┌──────────┬──────────┬──────────┐
│    ☕    │    📦    │    🛒    │
│CAFETERÍA │  STOCK   │  TIENDA  │
└──────────┴──────────┴──────────┘

Los controles se diseñan grandes y separados para utilizarlos cómodamente con los dedos.

[hr]

5. La pantalla se construye por piezas

No se utiliza una única imagen para representar toda la pantalla.

Código: Seleccionar todo

FONDO
+
PERSONAJE
+
OBJETOS
+
TEXTOS
+
CONTROLES
=========

PANTALLA

Los recursos permanecen independientes:

Código: Seleccionar todo

images/
├── fondos/
├── personajes/
├── productos/
├── equipamiento/
└── iconos/

Por ejemplo, al aparecer otro cliente únicamente cambia la imagen y el pedido. El escenario permanece igual.

[hr]

6. Tarjetas táctiles

En lugar de depender de botones tradicionales, una acción puede presentarse como:

Código: Seleccionar todo

┌────────────────┐
│       ☕       │
│  CAPPUCCINO    │
│     3,00 €     │
└────────────────┘

En FMX puede construirse mediante:

Código: Seleccionar todo

TRectangle
├── TImage
├── TLabel
└── TLabel

Toda la tarjeta puede responder a OnClick.

También se puede utilizar TSpeedButton estilizado.

[hr]

🖱 7. Diseñar desde el IDE

Siempre que Delphi lo permite se utilizan:

Designer:
TLayout, TRectangle, TImage, TLabel, TGridLayout...

Object Inspector:
Align, Margins, Padding, Visible, Fill, Stroke...

Events:
OnClick, OnChange...

El código se reserva para comprar, vender, calcular, gestionar estados, guardar datos, etc.

[hr]

➡ Continúa en la Parte 2: adaptación a Android, estructura del código, versiones y ejemplo CAFEBAKS.

[jaoj]

Delphi + FireMonkey + Android — Parte 2

Continuación de la guía de diseño y desarrollo de aplicaciones Android mediante Delphi + FireMonkey.

[hr]

8. Separar interfaz y lógica

La interfaz muestra el estado; las clases gestionan las reglas:

Código: Seleccionar todo

INTERFAZ FMX
Imágenes
Tarjetas
Labels
Layouts
│
▼
LÓGICA
Comprar
Vender
Stock
Clientes
Cálculos
Guardar/cargar

Así se puede modificar posteriormente el diseño sin rehacer la lógica.

[hr]

9. Adaptación a diferentes Android

Se evitan posiciones absolutas:

Código: Seleccionar todo

NO:
X = 40
Y = 720

SÍ:
TLayout
TGridLayout
TGridPanelLayout
Align
Margins
Padding

Por ejemplo:

Código: Seleccionar todo

┌────────────┬────────────┐
│ Espresso   │ C/leche    │
├────────────┼────────────┤
│ Cappuccino │ Chocolate  │
└────────────┴────────────┘

La distribución se adapta a diferentes móviles y tablets.

[hr]

10. Ejemplo de pantalla

Código: Seleccionar todo

┌────────────────────────────┐
│ CAFEBAKS  Día 3    1.245 € │
├────────────────────────────┤
│                            │
│      FONDO CAFETERÍA       │
│           👩               │
│    "Un cappuccino"         │
│                            │
├─────────────┬──────────────┤
│ Espresso    │ C/leche      │
│ Cappuccino  │ Chocolate    │
├─────────────┴──────────────┤
│ ☕ CAFÉ   📦 STOCK  🛒 TIENDA│
└────────────────────────────┘

[hr]

11. Primero funcional, después bonito

No se crea la interfaz gráfica definitiva desde el primer día.

Código: Seleccionar todo

FUNCIONALIDAD
↓
DISEÑO BÁSICO
↓
PRUEBA
↓
FUNCIONA
↓
MEJORA VISUAL
↓
PRUEBA ANDROID
↓
VERSIÓN ESTABLE

Los gráficos provisionales se sustituyen progresivamente cuando la mecánica funciona correctamente.

[hr]

12. Desarrollo por versiones

Cada incremento sigue el mismo ciclo:

Código: Seleccionar todo

1. Nueva funcionalidad
   ↓
2. Diseño FMX
   ↓
3. Prueba Windows
   ↓
4. Prueba Android
   ↓
5. Correcciones
   ↓
6. Versión estable
   ↓
7. Commit + GitHub
   ↓
8. Siguiente función
   

Cada versión debe quedar ejecutable y funcional.

[hr]

13. Estructura progresiva

Se comienza con lo necesario:

Código: Seleccionar todo

PROYECTO/
├── Proyecto.dpr
├── Proyecto.dproj
├── Main.pas
├── Main.fmx
└── README.md

Cuando aumenta la lógica:

Código: Seleccionar todo

PROYECTO/
├── Main.pas
├── Main.fmx
├── Estado.pas
├── Producto.pas
├── Cliente.pas
├── images/
└── README.md

La arquitectura crece cuando aparece una necesidad real.

[hr]

14. Caso práctico: CAFEBAKS

CAFEBAKS aplica este método a un juego de gestión de cafetería:

Código: Seleccionar todo

Capital
↓
Comprar equipamiento
↓
Comprar stock
↓
Abrir cafetería
↓
Cliente → Pedido → Preparar → Cobrar
↓
Consumir stock
↓
Cerrar jornada
↓
Ingresos - gastos = beneficio
↓
Mejorar negocio
↓
Siguiente día

Sus vistas principales son:

Código: Seleccionar todo

CAFEBAKS
│
┌─────────┼─────────┐
▼         ▼         ▼
CAFETERÍA     STOCK     TIENDA
│
▼
RESUMEN

[hr]

15. Valor para portfolio

El proyecto permite demostrar:

• Delphi y Object Pascal.
• FireMonkey.
• Desarrollo Android.
• Diseño móvil adaptable.
• POO y gestión de estados.
• Persistencia.
• Git y GitHub.
• Compilación y distribución móvil.

[hr]

Regla de trabajo

Diseñar para móvil → desarrollar → probar en Windows → probar en Android → corregir → documentar → GitHub → continuar.

El objetivo no consiste simplemente en conseguir que Delphi ejecute una aplicación en Android, sino en crear una aplicación que parezca diseñada realmente para Android.

DelphiHeaven / InformatOLI — Desarrollo Delphi documentado paso a paso.