Universidad Da Vinci

Maestría en Sistemas
Computacionales
Desarrollo de Aplicaciones para
Móviles
Ejercicios con .Net MAUI

Por: Pablo González Vellano

Facilitador: Armando Román Gallardo

Fecha: 25/02/2024
Actividad Integradora 6
Objetivo:

Desarrollar aplicaciones móviles utilizando .NET MAUI para cumplir con los siguientes
requerimientos:

1. Aplicación móvil multiplataforma .NET MAUI para escribir y leer en un archivo de

texto: El objetivo es crear una aplicación que permita a los usuarios escribir y
guardar texto en un archivo de texto en el dispositivo local. Además, debe permitir
leer el contenido de archivos previamente guardados. Esto se puede lograr mediante
la implementación de una interfaz de usuario que permita la entrada de texto y
botones para guardar y leer el archivo. El acceso al sistema de archivos del
dispositivo se realizará utilizando las API proporcionadas por .NET MAUI, y la
funcionalidad para escribir y leer en el archivo se implementará utilizando las clases
y métodos relevantes.

2. Aplicación móvil multiplataforma .net MAUI para autenticarse utilizando el archivo

de preferencia de las aplicaciones para almacenar los datos del usuario en caso de
que este así lo decida: El objetivo es crear una aplicación que permita a los usuarios
autenticarse en la aplicación utilizando sus credenciales. La aplicación almacenará
los datos del usuario, como el nombre de usuario y contraseña, en el archivo de
preferencia de la aplicación para su uso posterior. La autenticación se llevará a cabo
mediante una interfaz de inicio de sesión que solicitará al usuario sus credenciales y
las verificará con los datos almacenados en el archivo de preferencia. En caso de
que el usuario lo decida, se guardará la información de inicio de sesión para facilitar
futuros accesos.

3. Aplicación móvil multiplataforma .net MAUI para agregar, editar, modificar y

buscar información en una agenda utilizando bases de datos locales con SQLite: El
objetivo es desarrollar una aplicación que permita a los usuarios gestionar una
agenda personal. La aplicación utilizará una base de datos local con SQLite para
almacenar los contactos y su información asociada. Los usuarios podrán agregar
nuevos contactos, editar la información de los contactos existentes, eliminar
contactos y buscar contactos por nombre u otra información relevante. La interfaz
de usuario contendrá formularios y controles que permitan realizar estas
operaciones de manera intuitiva y sencilla. La aplicación utilizará la biblioteca
SQLite-net-pcl para interactuar con la base de datos SQLite y realizar operaciones
CRUD (Crear, Leer, Actualizar, Eliminar).

4. El objetivo final es desarrollar estas aplicaciones móviles utilizando .NET MAUI,

aprovechando su capacidad de ser multiplataforma y utilizar una sola base de
código compartida para desplegar las aplicaciones en Android, iOS y Windows.
Además, se utilizará SQLite como base de datos local para almacenar la
información necesaria para las funcionalidades de escritura y lectura de archivos de
texto, autenticación y gestión de la agenda. Esto permitirá crear aplicaciones
móviles completas y conectadas que brinden una experiencia fluida y consistente a
los usuarios en diferentes plataformas.
Actividad Integradora 6

Actividades

1. 1 Ejercicio 1: “Editor de Texto”

Para este ejercicio vamos a hacer una aplicación que contenga lo siguiente:
a) Permita poner un nombre de archivo.
b) Permita editar Texto.
c) Permita guardar el archivo en el dispositivo con el texto ingresado.
d) Permita recuperar el archivo con el texto ingresado.
Para este ejercicio, la aplicación quedaría de la siguiente forma:

Donde nos damos cuenta de que nos pide un nombre de archivo, este es el nombre
del archivo a crear, y en el siguiente recuadro del formulario, nos pide el texto a
agregar, y con el botón de guardar texto, guardamos el archivo con el texto
ingresado.
Hacemos exactamente lo mismo para un segundo archivo, y después si queremos
recuperar el archivo guardado, solo basta con presionar el botón cargar texto, y
nuevamente nos mostrara lo siguiente:
Actividad Integradora 6

El código para el interfaz del usuario quedaría como:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="editor1.MainPage"
Title="Editor de Texto">

<ScrollView>
<StackLayout>
<Label Text="Nombre del archivo:" />
<Entry x:Name="fileNameEntry" Placeholder="Ingrese el nombre del
archivo" />

<Label Text="Texto a guardar:" />

<Editor x:Name="textEditor" HeightRequest="200" />

<Button Text="Guardar Texto" Clicked="OnSaveButtonClicked"

HorizontalOptions="Center" />
<Button Text="Cargar Texto" Clicked="OnLoadButtonClicked"
HorizontalOptions="Center" />

<Label x:Name="resultLabel" HorizontalOptions="Center"

VerticalOptions="CenterAndExpand" />

</StackLayout>
</ScrollView>

</ContentPage>

Y para la parte lógica:

namespace editor1
{
Actividad Integradora 6
public partial class MainPage : ContentPage
{
private string filePath;
public MainPage()
{
InitializeComponent();
}
private void OnSaveButtonClicked(object sender, EventArgs e)
{
// Obtener el nombre del archivo y el texto del editor
string fileName = fileNameEntry.Text;
string inputText = textEditor.Text;

// Validar si el nombre del archivo no está vacío

if (string.IsNullOrWhiteSpace(fileName))
{
DisplayAlert("Error", "Ingrese un nombre de archivo válido.", "Aceptar");
return;
}

// Guardar el texto en el archivo especificado

filePath =
Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationD
ata), fileName);
File.WriteAllText(filePath, inputText);

// Mostrar mensaje de éxito

DisplayAlert("Texto guardado", "El texto se ha guardado correctamente.",
"Aceptar");

private void OnLoadButtonClicked(object sender, EventArgs e)

{
string fileName = fileNameEntry.Text;

filePath =
Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationD
ata), fileName);

// Validar si el archivo existe

if (File.Exists(filePath))
{
// Leer el texto desde el archivo
string savedText = File.ReadAllText(filePath);

// Mostrar el texto en el editor

textEditor.Text = savedText;
// Actualizar etiqueta para mostrar el nombre del archivo cargado
resultLabel.Text = $"Archivo cargado: {Path.GetFileName(filePath)}";
}
else
{
// Mostrar mensaje si el archivo no existe
DisplayAlert("Error", "El archivo especificado no existe.", "Aceptar");
}
}

}
Actividad Integradora 6

De esta forma se realiza una aplicación similar a un block de Notas.

2. Ejercicio 2: Sistema de Autentificación.

Para este ejercicio vamos hacer una aplicación que muestre una ventana de
autentificación de usuario con su contraseña, posteriormente para la tercera
aplicación, daremos una funcionalidad.

La aplicación quedaría de la siguiente forma:

Actividad Integradora 6

Podemos considerar los siguiente:

Este solo ingresa el usuario y la contraseña y muestra un mensaje de accesos
exitoso, aunque aun no tenemos la función de guardar en un registro y también de
acceder a una base de datos para hacer funcional la aplicación.

En el siguiente código se muestra la interfaz de la aplicación:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="registrousuario.MainPage"
Title="Autentificar Usuarios">

<ScrollView>
<StackLayout Margin="20">
<Entry x:Name="UsernameEntry" Placeholder="Username" />
<Entry x:Name="PasswordEntry" Placeholder="Password"
IsPassword="True" />

<StackLayout Orientation="Horizontal">
<CheckBox x:Name="RememberMeCheckbox" VerticalOptions="Center" />
<Label Text="Remember Me" VerticalOptions="Center" />
</StackLayout>

<Button Text="Login" Clicked="OnLoginButtonClicked" />

</StackLayout>
</ScrollView>

</ContentPage>

Y en el siguiente código, se muestra la lógica de la aplicación con sus respectivos

comentarios de cada parte:
using Microsoft.Extensions.Configuration;
public partial class MainPage : ContentPage
{
private const string recuerdamekey = "Recuerdame";
private const string usuarioKey = "Usuario";
private const string PasswordKey = "Password";

public MainPage()
{
// Inicializamos los componentes, y definimos si hay algún nombre
// de entrada, para que este lo deje puesto.

InitializeComponent();
if (Preferences.Get(recuerdamekey, false))
{
UsernameEntry.Text = Preferences.Get(usuarioKey, string.Empty);
PasswordEntry.Text = Preferences.Get(PasswordKey, string.Empty);
RememberMeCheckbox.IsChecked = true;
}

}
Actividad Integradora 6

private void OnLoginButtonClicked(object sender, EventArgs e)

{
string username = UsernameEntry.Text;
string password = PasswordEntry.Text;
bool rememberMe = RememberMeCheckbox.IsChecked;

// Aquí realizarías la lógica de autenticación.

// En este ejemplo, simplemente mostramos un mensaje de éxito.

if (!string.IsNullOrWhiteSpace(username) && !
string.IsNullOrWhiteSpace(password))
{
if (rememberMe)
{
// Guardar los datos de autenticación en las preferencias
Preferences.Set(usuarioKey, username);
Preferences.Set(PasswordKey, password);
Preferences.Set(recuerdamekey, true);
}
else
{
// Si no se recuerdan los datos, eliminarlos de las preferencias
Preferences.Remove(usuarioKey);
Preferences.Remove(PasswordKey);
Preferences.Set(recuerdamekey, false);
}

// Realizar la lógica de autenticación aquí, por ejemplo, navegación a la siguiente

página
DisplayAlert("Success", "Login successful!", "OK");
}
else
{
DisplayAlert("Error", "Please enter both username and password.", "OK");
}
}
}

Por último, tenemos la aplicación sencilla, que aun no hace la autentificación.

3. Ejercicio 3: Agenda. Aplicación móvil multiplataforma .net MAUI para agregar,

editar, modificar y buscar información en una agenda utilizando bases de datos
locales con SQLite

Para este ejercicio tomamos en cuenta que la interfaz quedaría de la siguiente

forma:
Actividad Integradora 6
Actividad Integradora 6

En el ejercicio, aunque las pantallas tienen botones, en este caso ocupamos otro
ejemplo similar, ya que el ejercicio propuesto tenia muchos problemas, por lo que se
opto por recurrir en hacer uno nuevo, donde este incluye un solo botón de guardar, y
al dar click en los registros, este nos muestra un menú desplegable de editar o
eliminar.

El código de la interfaz es el siguiente:

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="agenda3.MainPage"
Title="Agenda">

<FlexLayout Direction="Column">
<VerticalStackLayout Padding="10" FlexLayout.Basis="400"
Background="Beige">
<Entry x:Name="nombreEntry" Placeholder="Nombre"/>
<Entry x:Name="direccionEntry" Placeholder="Dirección"/>
<Entry x:Name="telefonoEntry" Placeholder="Teléfono"/>
<Entry x:Name="correoEntry" Placeholder="Correo electrónico"/>
Actividad Integradora 6
<Button x:Name="GuardarButton" Text="Guardar"
Clicked="Guardar_Clicked"/>
</VerticalStackLayout>
<ListView x:Name="listView" FlexLayout.Grow="1" HasUnevenRows="True"
ItemTapped="listView_ItemTapped">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<VerticalStackLayout Padding="5">
<Label Text="{Binding Nombre}" FontSize="17"
FontAttributes="Bold" />
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Label Grid.Column ="0" Text="{Binding Dirección}" />
<Label Grid.Column ="2" Text="{Binding Teléfono}" />
<Label Grid.Column ="3" Text="{Binding Correo }" />

</Grid>
</VerticalStackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

</FlexLayout>

</ContentPage>

Y el código para cada parte se muestra a continuación:

a) Parte Lógica de la aplicación:

namespace agenda3
{
public partial class MainPage : ContentPage
{
private readonly LocalDbService _dbService;
private int _editCustomerId;
public MainPage(LocalDbService dbService)
{
InitializeComponent();
_dbService = dbService;
Task.Run(async () => listView.ItemsSource = await
_dbService.GetCustomers());
}

private async void Guardar_Clicked(object sender, EventArgs e)

Actividad Integradora 6
{
if (_editCustomerId == 0)
{
//agregar cliente
await _dbService.Create(new Customer
{
Nombre = nombreEntry.Text,
Direccion = direccionEntry.Text,
Telefono = telefonoEntry.Text,
CorreoElectronico = correoEntry.Text
});
}
else
{
//editar cliente
await _dbService.Update(new Customer
{
Id = _editCustomerId,
Nombre = nombreEntry.Text,
Direccion = direccionEntry.Text,
Telefono = telefonoEntry.Text,
CorreoElectronico = correoEntry.Text
});
_editCustomerId = 0;
}

nombreEntry.Text = string.Empty;
direccionEntry.Text = string.Empty;
telefonoEntry.Text = string.Empty;
correoEntry.Text = string.Empty;

listView.ItemsSource = await _dbService.GetCustomers();

private async void listView_ItemTapped(object sender, ItemTappedEventArgs e)

{
var customer = (Customer)e.Item;
var action = await DisplayActionSheet("Action", "Cancel", null, "Edit",
"Delete");

switch (action){
case "Edit":
_editCustomerId = customer.Id;
Actividad Integradora 6
nombreEntry.Text = customer.Nombre;
direccionEntry.Text = customer.Direccion;
telefonoEntry.Text = customer.Telefono;
correoEntry.Text = customer.CorreoElectronico;
break;

case "Delete":
await _dbService.Delete(customer);
listView.ItemsSource = await _dbService.GetCustomers();

break;
}

}
}

b) La clase MauiProgram quedaría de la siguiente forma:

using Microsoft.Extensions.Logging;

namespace agenda3
{
public static class MauiProgram
{
public static MauiApp CreateMauiApp()
{
var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});

builder.Services.AddSingleton<LocalDbService>();
builder.Services.AddTransient<MainPage>();
#if DEBUG
builder.Logging.AddDebug();
#endif

return builder.Build();
}
Actividad Integradora 6
}
}

c) Creamos un clase (LocalDbService) que nos dé referencia a la base de datos y

nos permita hacer conexión con ella:

using SQLite;

namespace agenda3
{
public class LocalDbService
{
private const string DB_NAME = "demo_local_db.db3";
private readonly SQLiteAsyncConnection _connection;

public LocalDbService()
{
_connection = new
SQLiteAsyncConnection(Path.Combine(FileSystem.AppDataDirectory, DB_NAME));
_connection.CreateTableAsync<Customer>();
}
public async Task<List<Customer>> GetCustomers()
{
return await _connection.Table<Customer>().ToListAsync();
}

public async Task<Customer> GetById(int id)

{
return await _connection.Table<Customer>().Where( x => x.Id ==
id).FirstOrDefaultAsync();
}

public async Task Create(Customer customer)

{
await _connection.InsertAsync(customer);
}

public async Task Update(Customer customer)

{
await _connection.UpdateAsync(customer);
}

public async Task Delete(Customer customer)

{
await _connection.DeleteAsync(customer);
Actividad Integradora 6
}

}
}

d) Creamos otra clase donde contenga la tabla de donde se almacén y actualizan

los datos (Customer):

using SQLite;

namespace agenda3
{
[Table("customer")]
public class Customer
{
[PrimaryKey]
[AutoIncrement]
[Column("id")]
public int Id { get; set; }

[Column("nombre")]
public string Nombre { get; set; }

[Column("direccion")]
public string Direccion { get; set; }

[Column("telefono")]
public string Telefono { get; set; }

[Column("correo")]
public string CorreoElectronico { get; set; }
}
}

De esta forma tenemos la aplicación con las funciones que se piden en el ejercicio.

Reto: Desarrolla una aplicación donde juntes la aplicación de autenticación y

verifique si es el usuario uno, y contraseña uno y lo pase a la agenda hecha
con sqlite (Investigar como agregar una página nueva , y navegar hacia esa
pagina)

Para esta aplicación utilizamos el ejercicio 2 y 3, solo con una respectiva

modificación:
Actividad Integradora 6

Y el mainpage: quedo con estas modificaciones:

using acceso1.Paginas;

namespace acceso1
{
public partial class MainPage : ContentPage
{
private const string recuerdamekey = "Recuerdame";
private const string usuarioKey = "Usuario";
private const string PasswordKey = "Password";

public MainPage()
{
// Inicializamos los componentes, y definimos si hay algún nombre
// de entrada, para que este lo deje puesto.

InitializeComponent();
if (Preferences.Get(recuerdamekey, false))
{
UsernameEntry.Text = Preferences.Get(usuarioKey, string.Empty);
PasswordEntry.Text = Preferences.Get(PasswordKey, string.Empty);
RememberMeCheckbox.IsChecked = true;
Actividad Integradora 6
}

private async void OnLoginButtonClicked(object sender, EventArgs e)

{
string username = UsernameEntry.Text;
string password = PasswordEntry.Text;
bool rememberMe = RememberMeCheckbox.IsChecked;

var localDbService = new LocalDbService();

Customer user = await localDbService.GetUserByUsername(username);

if (user != null)
{
// Usuario encontrado, navegar a la página Pagina2
await Navigation.PushAsync(new Paginas.Pagina2(localDbService, user));
}
else
{
// Usuario no encontrado, mostrar mensaje de error
await DisplayAlert("Error", "Usuario no encontrado", "Aceptar");
}

}
}

Conclusiones (Referente a si se cumplió el objetivo de la actividad)

El objetivo de esta actividad fue entender y ocupar bases de datos, hacer

conexión entre ellas por medio de aplicaciones, por lo que parte de ellas se
cumplieron, aunque con muchos problemas.

Para el Reto, aún falta implementar más cosas para ir detallando el código, ya
que hay varias referencias de saltar de página en página, esto se va a ir
puliendo con el diseño más específico de la aplicación, e iniciando un
proyecto desde cero, para tomar en cuenta todas las características que tiene la
aplicación.

Referencias:

1. s/n [ El Camino Dev]. (15 jun 2022). Curso de .NET MAUI gratis # 2 -
Tipos de Páginas. [Video]. Recuperado de
https://www.youtube.com/watch?v=EXznxjxqN_g
2. s/n [Generar APK Firmado en NET MAUI]. (10 ago 2023). Generar APK
Firmado en NET MAUI. [Video]. Recuperado de
https://www.youtube.com/watch?v=1m3Wt9UTGvI&t=202s
Actividad Integradora 6
3. s/n [Coding Droplets]. (21 nov 2023). DotNet MAUI Sqlite Tutorial - .Net
MAUI Sqlite CRUD Operations. [Video]. Recuperado de
https://www.youtube.com/watch?v=VziMUc-VQko