📘 Documentación del Login en .
NET MAUI
1. ¿Qué es este código?
Es una página de inicio de sesión (LoginPage) creada en .NET MAUI, que permite al
usuario ingresar su DNI y Nombre completo.
Además, incluye la opción de recordar datos para que la próxima vez se carguen
automáticamente.
2. Estructura General
El código se divide en dos partes:
1. XAML → define la interfaz gráfica (cómo se ve la pantalla).
2. C# (code-behind) → define la lógica (qué hace la aplicación cuando interactúas
con ella).
3. Interfaz en XAML ([Link])
Secciones principales:
🔹 a) Encabezado (Logo y Título)
<Label Text=" " FontSize="60"/>
<Label Text="ConstruTech" FontSize="32" FontAttributes="Bold"/>
<Label Text="Presupuestos y diseños al alcance de tus manos"
FontSize="14"/>
• Muestra un ícono de construcción.
• Título de la app "ConstruTech".
• Un subtítulo descriptivo.
🔹 b) Formulario de Login
<Entry x:Name="EntryDNI" Placeholder="Ingresa tu DNI (8 dígitos)"
Keyboard="Numeric"/>
<Entry x:Name="EntryNombre" Placeholder="Ingresa tu nombre completo"/>
• DNI → solo acepta números (8 dígitos).
• Nombre Completo → texto libre.
🔹 c) Checkbox "Recordar mis datos"
<CheckBox x:Name="CheckRecordar"/>
<Label Text="Recordar mis datos"/>
• Si el usuario lo marca , los datos se guardan en la memoria del celular.
🔹 d) Botón "Ingresar"
<Button x:Name="BtnIngresar" Text="INGRESAR"
Clicked="OnIngresarClicked"/>
• Al hacer clic, ejecuta la función OnIngresarClicked en C#.
🔹 e) Mensaje de Estado
<Label x:Name="LabelMensaje" IsVisible="False"/>
• Muestra mensajes de error o confirmación (ejemplo: "DNI inválido").
4. Lógica en C# ([Link])
🔹 a) Constructor
public LoginPage()
{
InitializeComponent();
CargarDatosGuardados();
}
• InitializeComponent() → carga la interfaz definida en XAML.
• CargarDatosGuardados() → recupera los datos del usuario guardados
anteriormente.
🔹 b) Evento al presionar "Ingresar"
private async void OnIngresarClicked(object sender, EventArgs e)
Pasos principales:
1. Validar DNI
o Que no esté vacío.
o Que tenga 8 dígitos.
o Que solo sean números.
2. Validar Nombre
o Que no esté vacío.
3. Guardar datos si el usuario marcó "Recordar".
4. Simular verificación (aquí podría ir la conexión a base de datos).
5. Crear un objeto Usuario con los datos ingresados.
6. Navegar a la página principal (DashboardPage).
🔹 c) Guardar y cargar datos
[Link]("dni_guardado", [Link]);
[Link]("nombre_guardado", [Link]);
var dniGuardado = [Link]("dni_guardado", "");
var nombreGuardado = [Link]("nombre_guardado", "");
• Usa Preferences (almacenamiento local del dispositivo).
• Permite que al volver a abrir la app, los datos se completen automáticamente.
🔹 d) Clase Usuario
public class Usuario
{
public string DNI { get; set; }
public string Nombre { get; set; }
public DateTime FechaRegistro { get; set; } = [Link];
}
• Modelo temporal para representar al usuario.
• Guarda el DNI, Nombre y fecha de registro.
5. Resumen para Explicación a un Jurado
• XAML → define la interfaz (lo que ve el usuario).
• C# → maneja la lógica (validaciones, almacenamiento de datos, navegación).
• Buenas prácticas usadas:
o Validación de datos antes de continuar.
o Uso de Preferences para recordar datos.
o Separación de diseño (XAML) y lógica (C#).
• Flujo completo del login:
1. El usuario escribe DNI y nombre.
2. El sistema valida los datos.
3. Si el usuario marca "Recordar", se guardan.
4. Si todo está bien, lo redirige a la página principal.
📘 Documentación del DashboardPage en .NET MAUI
1. ¿Qué es esta página?
Es la pantalla principal que ve el usuario después de iniciar sesión.
Aquí se muestran:
• Saludo personalizado con el nombre y la especialidad.
• Estadísticas rápidas (total de presupuestos y facturación).
• Acciones principales (calculadora, historial, tutoriales, herramientas).
• Acceso rápido a funciones comunes.
• Un tip del día que cambia automáticamente.
2. Estructura General
Igual que en el login, el código está dividido en dos partes:
1. XAML → define el diseño visual.
2. C# (code-behind) → maneja la lógica y las interacciones.
3. Interfaz en XAML ([Link])
Secciones principales:
🔹 a) Encabezado (Header)
<Label x:Name="LabelSaludo" Text="¡Hola, [Nombre]!" />
<Label x:Name="LabelEspecialidad" Text="Albañil"/>
<Button Text=" " Clicked="OnConfiguracionClicked"/>
• Muestra el saludo personalizado con el nombre del usuario.
• Muestra la especialidad guardada (ej. albañil, carpintero).
• Tiene un botón de configuración .
🔹 b) Estadísticas rápidas
<Label x:Name="LabelTotalPresupuestos" Text="0"/>
<Label x:Name="LabelMontoTotal" Text="S/ 0.00"/>
• Total de presupuestos creados.
• Monto total facturado.
• Muestra la información guardada en el dispositivo.
🔹 c) Acciones principales
Cada opción está dentro de un Frame con ícono y texto, y responde a un clic:
• Calculadora de Presupuestos → abre CalculadoraPage.
• Historial de proyectos → abre HistorialPage.
• Tutoriales → muestra un mensaje.
• Herramientas extra → muestra un mensaje.
🔹 d) Acceso rápido
<Button Text=" Nuevo Presupuesto Rápido"
Clicked="OnNuevoPresupuestoClicked"/>
<Button Text=" Compartir App" Clicked="OnCompartirAppClicked"/>
<Button Text=" Ayuda" Clicked="OnAyudaClicked"/>
• Botón para crear presupuesto rápido.
• Botón para compartir la aplicación.
• Botón de ayuda, que abre un menú con soporte, FAQ, tutoriales y feedback.
🔹 e) Tip del día
<Label x:Name="LabelTipDelDia"
Text="Siempre añade un 10% extra en materiales..."/>
• Muestra un consejo de construcción diario.
• Cambia automáticamente según el día del año.
4. Lógica en C# ([Link])
🔹 a) Constructor
public DashboardPage()
{
InitializeComponent();
CargarDatosUsuario();
CargarEstadisticas();
MostrarTipDelDia();
}
• Inicializa la página.
• Carga datos del usuario (nombre y especialidad).
• Carga estadísticas guardadas.
• Muestra el tip del día.
🔹 b) Cargar datos del usuario
var nombre = [Link]("nombre_guardado", "Usuario");
[Link] = $"¡Hola, {nombre}!";
• Recupera el nombre y la especialidad del usuario guardados en el celular.
• Los muestra en la parte superior.
🔹 c) Cargar estadísticas
var totalPresupuestos = [Link]("total_presupuestos", 0);
var montoTotal = [Link]("monto_total_facturado", 0.0);
• Obtiene el total de presupuestos creados y el monto total facturado.
• Por ahora son datos de ejemplo, pero más adelante vendrán de una base de datos
(SQLite).
🔹 d) Tip del día
var dayOfYear = [Link];
var tipIndex = dayOfYear % _tipsDelDia.Length;
[Link] = _tipsDelDia[tipIndex];
• Usa el número del día del año para seleccionar un tip distinto.
• Ejemplo:
o Día 1 → tip 1.
o Día 2 → tip 2.
o Y así sucesivamente, rotando automáticamente.
🔹 e) Acciones principales
Ejemplo: Calculadora
private async void OnCalculadoraClicked(object sender, EventArgs e)
{
await [Link](new CalculadoraPage());
}
• Abre la página de calculadora de presupuestos.
Los demás (Historial, Tutoriales, Herramientas) funcionan igual, con navegación o
mensajes de alerta.
🔹 f) Acciones rápidas
Ejemplo: Compartir app
await [Link](new ShareTextRequest
{
Text = "¡Descarga ConstruTech! ...",
Title = "Comparte ConstruTech"
});
• Permite enviar un enlace de la app por WhatsApp, correo u otra red.
Ejemplo: Ayuda
var result = await DisplayActionSheet("¿En qué te podemos ayudar?",
"Cancelar", null,
"Contactar Soporte", "FAQ",
"Tutorial", "Feedback");
• Muestra un menú emergente con opciones de soporte.
🔹 g) Configuración ⚙️
var result = await DisplayActionSheet("Configuración", "Cancelar", null,
"Editar Perfil", "Configurar
Moneda", "Notificaciones", "Cerrar Sesión");
• Muestra opciones de configuración.
• Incluye cerrar sesión, que más adelante deberá limpiar los datos y volver al login.
5. Resumen para Explicación a un Jurado
• DashboardPage es la pantalla principal tras el login.
• Permite al usuario:
o Ver su saludo y especialidad.
o Consultar estadísticas rápidas.
o Acceder a herramientas principales (calculadora, historial, tutoriales).
o Usar accesos rápidos (nuevo presupuesto, ayuda, compartir).
o Leer un tip del día que cambia automáticamente.
• Está pensado como un panel de control (dashboard) con todo lo que el usuario
necesita a la mano.
