Xamarin.Forms - CRUD con SQLite

En este post elaboraremos un ejemplo práctico del ya muy conocido como el CRUD, es decir Crear - Create, Leer - Read, Actualizar - Update y Eliminar - Delete de la entidad usuario (CRUD en inglés).

Nuevamente les dejo el link (App - DÍAbetes) donde se viene detallando todo lo elaborado acerca del diseño y desarrollo de la aplicación.

El ejemplo práctico será diseñada y desarrollada con Xamarin.Forms y a nivel de almacenamiento de datos en SQLite. Se hará uso de la solución y proyecto de nombre AppDIAbetes que contiene todo lo realizando en el proyecto AppLogin, claro esta que seguimos haciendo uso del IDE de Visual Studio y todas las pruebas se viene realizando en un equipo móvil físico con Sistema Operativo Android, recordándoles que esto no restringe el uso de emuladores.

Requisitos:
Microsoft Visual Studio Community 2019.
Xamarin.Froms - XAML.
SQLite - Gestión de datos local.

El proyecto AppLogin se renombro a AppDIAbetes:
Recordar que sólo se viene implementado el proyecto para la plataforma de Android desde el Visual Studio 2019.

Estructura del Proyecto:

La estructura del proyecto se mantiene, pero, con el incremento de los directorios y demás componentes que se crearon. Es decir los directorios ya creados como Data, Models y Views, durante toda la etapa de desarrollo de este proyecto móvil iremos agregando nuevas clases.

Clases creadas:
En las clases DataBase.cs, TaskExtensions.cs se mantiene las mismas instrucciones ya definidas (recordar que son instrucciones la generación y conexión a la base de datos); y en la clase UserDB.cs se agregaron las instrucciones equivales al CRUD y en la clase User.cs se agregaron nuevos atributos

Diseño de Interfaz:
En el directorio Views agregaremos nuevos elementos de tipo Página de Contenido para XAML de nombre de SignUpLogin.xaml (página para crear o agregar un nuevo usuario), UsersList.xaml (página para listar los usuarios creado) y UsersEdit.xaml (para actualiza o eliminar los usuarios - esto no quita a que se puede incluir la creación en esta pagina, es decir mantener las 3 operaciones en un sola página) cada archivo .xaml contienes su archivo de tipo CodeBehind con la extensión de xaml.cs; para aclarar que los archivo MainPage.xaml y Login.xaml agregados en el anterior post no se modificaron.

1. En el archivo SignUpLogin.xaml agregaremos las propiedades de:

Image Source="LogoDIAbetes.jpg" ...

Entry x:Name="entryEmail" ...
  Entry x:Name="entryName" ...
  Entry x:Name="entryPassword" ...
  Entry x:Name="entryConfPassword" ....
  Label x:Name="warningPassword" ...
  Entry x:Name="entryPhone" ...
  Label x:Name="warningPhone" ...
  Button x:Name="signUp" ... Botón para registrar.
  Button x:Name="listsignUp" Botón para ingresar a la lista de usuarios (uso temporal).

XAML completo del archivo SignUpLogin.xaml

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:d="http://xamarin.com/schemas/2014/forms/design"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

x:Class="AppDIAbetes.Views.SignUpLogin" Title="Regístrese aquí">

<ContentPage.ToolbarItems>

</ContentPage.ToolbarItems>

<ContentPage.Content>

</FlexLayout>

</AbsoluteLayout>

</ContentPage.Content>

</ContentPage>

2. En el archivo UsersList.xaml agregaremos las propiedades de:

En la sección ContentPage.ToolbarItems agregaremos el Clicked y TypeArguments

<ContentPage.ToolbarItems>
<ToolbarItem Clicked="OnItemAdded">
<ToolbarItem.IconImageSource>
<OnPlatform x:TypeArguments="ImageSource">
<On Platform="Android" Value="AddUser24.png" />
</OnPlatform>
</ToolbarItem.IconImageSource>
</ToolbarItem>
</ContentPage.ToolbarItems>

Así mismo, agregamos las siguiente propiedades de:

Image Source="ListUsers16.png"

Las demás propiedades tendrá el Binding para la referencia a los atributos de la entidad de datos.

Label Text="{Binding email}" ...

Label Text="{Binding name}" ...

Label Text="{Binding password}" ...

Image Source="{Binding image}" ...

XAML completo del archivo UsersList.xaml

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:d="http://xamarin.com/schemas/2014/forms/design"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

x:Class="AppDIAbetes.Views.UsersList"

Title="Usuarios Registrados">

<ContentPage.ToolbarItems>

<ToolbarItem.IconImageSource>

</OnPlatform>

</ToolbarItem.IconImageSource>

</ToolbarItem>

</ContentPage.ToolbarItems>

<ContentPage.Content>

<ListView.ItemTemplate>

</StackLayout>

</ViewCell>

</DataTemplate>

</ListView.ItemTemplate>

</ListView>

</FlexLayout>

</ScrollView>

</AbsoluteLayout>

</ContentPage.Content>

</ContentPage>

3. En el archivo UsersEdit.xaml agregaremos las propiedades de:

Toda las propiedades de tipo Entry tendrá el Binding para la referencia a datos.

  Image Source="LogoDIAbetes.jpg" ...
Entry x:Name="entryEmail" ...
  Entry x:Name="entryName" ...
  Entry x:Name="entryPassword" ...
  Entry x:Name="entryConfPassword" ....
  Label x:Name="warningPassword" ...
  Entry x:Name="entryPhone" ...
  Label x:Name="warningPhone" ...
  Label Text="Activo" Etiqueta para el Switch
  Switch x:Name="valActive" Propiedad para validar la baja o alta del usuario
Button x:Name="userEdit" Clicked="userEdit_Clicked" Botón para editar o actualiza usuario
Button x:Name="userDelete" Clicked="userDelete_Clicked" Botón para eliminar un usuario

XAML completo del archivo UsersList.xaml

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

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:d="http://xamarin.com/schemas/2014/forms/design"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d"

x:Class="AppDIAbetes.Views.UsersEdit" Title="{Binding name}">

<ContentPage.ToolbarItems>

</ContentPage.ToolbarItems>

<ContentPage.Content>

</FlexLayout>

</AbsoluteLayout>

</ContentPage.Content>

</ContentPage>

Entidad Usuario (User):

Para comenzar abrimos el archivo o clase User.cs (equivalente a nuestro modelo de datos) y agregamos 2 nuevos atributos para determinar la alta o baja del usuario (active = true o false y image para mostrar la imagen en la lista como alta o baja):

using SQLite;

namespace AppDIAbetes.Models

{

public class User

{

[PrimaryKey, AutoIncrement]

public int Id { get; set; }

public string email { get; set; }

public string name { get; set; }

[MaxLength(12)]

public string password { get; set; }

[MaxLength(10)]

public string phone { get; set; }

public bool active { get; set; }

public string image { get; set; }

}

Métodos para manipular datos:

Ahora implementaremos los métodos equivalente a la manipulación de datos para la implementación del CRUD, para esto abrimos el archivo o clase UserDB.cs y creamos las siguientes instrucciones, considerando que se mantiene las instrucciones ya creadas, como la conexión a datos y el método login:

El método (C) SaveItem(User user) es el encargado de registras los datos de cada usuario.
El método (R) GetItemsAsync() es el encargado de obtener todos los datos registrados.

El método (U) UpdateItemAsync(User user) es el encargado de actualizar los datos de cada usuario.

El método (D) DeleteItemAsync(User user) es el encargado de eliminar un usuario.

El método valEmail(string strEmail) es el encargado de validar la existencia de un email, dicho método se invoca en el método SaveItem(User user), es decir antes de ingresar se pregunta si ya existe - en el caso que existe se retorna la letra E en todo caso se confirma la inserción de los datos con la letra I.

using AppDIAbetes.Models;

using SQLite;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Xamarin.Forms;

namespace AppDIAbetes.Data

{

public class UserDB

{

static readonly Lazy<SQLiteAsyncConnection> lazyInitializer = new Lazy<SQLiteAsyncConnection>(() =>

{

return new SQLiteAsyncConnection(DataBase.DatabasePath, DataBase.Flags);

});

static SQLiteAsyncConnection Database => lazyInitializer.Value;

static bool initialized = false;

public UserDB()

{

InitializeAsync().SafeFireAndForget(false);

}

async Task InitializeAsync()

{

if (!initialized)

{

if (!Database.TableMappings.Any(m => m.MappedType.Name == typeof(User).Name))

{

await Database.CreateTablesAsync(CreateFlags.None, typeof(User)).ConfigureAwait(false);

initialized = true;

}

#region metodos crud

public Task<List<User>> GetItemsAsync()

{

return Database.Table<User>().ToListAsync();

}

public Task<User> GetItemAsync(int id)

{

return Database.Table<User>().Where(i => i.Id == id).FirstOrDefaultAsync();

}

public string SaveItem(User user)

{

IEnumerable<User> result = valEmail(user.email);

if (result.Count() == 0)

{

Database.InsertAsync(user);

return "I";

}

else {

return "E";

}

public IEnumerable<User> valEmail(string strEmail)

{

var result = Database.QueryAsync<User>("Select * from User Where email=?", strEmail);

return result.Result;

}

public Task<int> UpdateItemAsync(User user)

{

if (user.active == true)

{

user.image = "check16.png";

}

else

{

user.image = "delete16.png";

}

return Database.UpdateAsync(user);

}

public Task<int> DeleteItemAsync(User user)

{

return Database.DeleteAsync(user);

}

#endregion

#region metodos login

public IEnumerable<User> whereUser(string strEmail, string strPwd)

{

var result = Database.QueryAsync<User>("Select * from User Where email=? and password=?", strEmail, strPwd);

return result.Result;

}

#endregion

}

Para finalizar implementaremos el CodeBehind de cada interfaz:

1. En el CodeBehind SignUpLogin.xaml.cs agregaremos las siguientes instrucciones:

El método asíncrono signUp_Clicked(object sender, EventArgs e) es el encargado de invocar al método equivalente a la manipulación de datos SaveItem(User user) para el registro de los datos de cada usuario, previa validación de ingreso de cada propiedad de la pagina a la que corresponda.

El método listsignUp_Clicked(object sender, EventArgs e) es para invocar o ir a la pagina del listado de usuarios ya registrados.

using System;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

using AppDIAbetes.Models;

using AppDIAbetes.Data;

using System.Diagnostics;

namespace AppDIAbetes.Views

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class SignUpLogin : ContentPage

{

User users = new User();

UserDB userDB = new UserDB();

public SignUpLogin()

{

InitializeComponent();

entryEmail.ReturnCommand = new Command(() => entryName.Focus());

entryName.ReturnCommand = new Command(() => entryPassword.Focus());

entryPassword.ReturnCommand = new Command(() => entryConfPassword.Focus());

entryConfPassword.ReturnCommand = new Command(() => entryPhone.Focus());

}

private async void signUp_Clicked(object sender, EventArgs e)

{

if (validateProperties() == "Of")

{

await DisplayAlert("Alerta", "Debe ingresar los datos solicitados.", "Aceptar");

}

else if (!string.Equals(entryPassword.Text, entryConfPassword.Text))

{

warningPassword.Text = "Ingresar la misma contraseña";

entryPassword.Text = string.Empty;

entryConfPassword.Text = string.Empty;

warningPassword.TextColor = Color.IndianRed;

warningPassword.IsVisible = true;

}

else if (entryPhone.Text.Length != 9)

{

warningPhone.Text = string.Empty;

warningPhone.Text = "Ingresar 9 dígitos";

warningPhone.TextColor = Color.IndianRed;

warningPhone.IsVisible = true;

}

else {

users.email = entryEmail.Text.Trim();

users.name = entryName.Text.Trim();

users.password = entryPassword.Text.Trim();

users.phone = entryPhone.Text.Trim();

users.active = true;//value for default in the insert

users.image = "check16.png";

try

{

var returnResult = userDB.SaveItem(users);

if (returnResult == "I")

{

await DisplayAlert("Aviso", "Registro agregado exitosamente.", "Aceptar");

await Navigation.PushAsync(new UsersList());

cleanProperties();

}

else {

await DisplayAlert("Alerta", "El correo "+ users.email + " ya existe.", "Aceptar");

}

catch (Exception ex)

{

await DisplayAlert("Error", ex.ToString(), "OK");

cleanProperties();

}

/// <summary>

/// Limpia las propiedades después de ingresar los datos

/// </summary>

void cleanProperties()

{

entryEmail.Text = string.Empty;

entryName.Text = string.Empty;

entryPassword.Text = string.Empty;

entryConfPassword.Text = string.Empty;

warningPassword.Text = string.Empty;

warningPassword.IsVisible = false;

entryPhone.Text = string.Empty;

warningPhone.Text = string.Empty;

warningPhone.IsVisible = false;

}

/// <summary>

/// Validación de cada propiedad

/// </summary>

/// <returns></returns>

string validateProperties()

{

string result = null;

if ((string.IsNullOrWhiteSpace(entryEmail.Text)) || (string.IsNullOrWhiteSpace(entryName.Text)) ||

(string.IsNullOrWhiteSpace(entryPassword.Text)) || (string.IsNullOrWhiteSpace(entryPhone.Text)) ||

(string.IsNullOrEmpty(entryPassword.Text)) || (string.IsNullOrEmpty(entryPhone.Text)) ||

(string.IsNullOrEmpty(entryPassword.Text)) || (string.IsNullOrEmpty(entryPhone.Text)))

{

result = "Of";

}

else

{

result = "Ok";

}

return result;

}

private async void listsignUp_Clicked(object sender, EventArgs e) {

await Navigation.PushAsync(new UsersList());

}

2. En el CodeBehind UsersList.xaml.cs agregaremos las siguientes instrucciones:
Las explicaciones de cada método están como comentarios (/// Sección de color verde) al inicio de cada uno de ellos:

using AppDIAbetes.Data;

using AppDIAbetes.Models;

using System;

using System.Collections.Generic;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

namespace AppDIAbetes.Views

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class UsersList : ContentPage

{

UserDB userData = new UserDB();

public UsersList()

{

InitializeComponent();

}

/// <summary>

/// Método para enlazar los datos con el ListView

/// </summary>

protected override async void OnAppearing()

{

base.OnAppearing();

IList<User> users = await userData.GetItemsAsync();

listUser.ItemsSource = users;

}

/// <summary>

/// Método para invocar a la pagina de contenido de registrar nuevo usuario

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

async void OnItemAdded(object sender, EventArgs e)

{

await Navigation.PushAsync(new SignUpLogin

{

BindingContext = new User()

});

}

/// <summary>

/// Método encargado de seleccionar y vincular los datos con la pagina de contenido, para realizar la edición de datos - esto se logra a través del BindingContext.

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

async void OnListItemSelected(object sender, SelectedItemChangedEventArgs e)

{

if (e.SelectedItem != null)

{

await Navigation.PushAsync(new UsersEdit

{

BindingContext = e.SelectedItem as User

});

}

3. En el CodeBehind UsersEdit.xaml.cs agregaremos las siguientes instrucciones:
Del mismo modo, cada método cuenta con sus respectiva explicación al inicio y esta como comentario (/// Sección de color verde):

using AppDIAbetes.Data;

using AppDIAbetes.Models;

using System;

using Xamarin.Forms;

using Xamarin.Forms.Xaml;

namespace AppDIAbetes.Views

{

[XamlCompilation(XamlCompilationOptions.Compile)]

public partial class UsersEdit : ContentPage

{

User users = new User();

UserDB userDB = new UserDB();

public UsersEdit()

{

InitializeComponent();

}

/// <summary>

/// Métodos para actualizar los datos de un usuario ya registrado

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private async void userEdit_Clicked(object sender, EventArgs e)

{

if (validateProperties() == "Of")

{

await DisplayAlert("Alerta", "Debe ingresar los datos solicitados.", "Aceptar");

}

else if (!string.Equals(entryPassword.Text, entryConfPassword.Text))

{

warningPassword.Text = "Ingresar la misma contraseña";

entryPassword.Text = string.Empty;

entryConfPassword.Text = string.Empty;

warningPassword.TextColor = Color.IndianRed;

warningPassword.IsVisible = true;

}

else if (entryPhone.Text.Length != 9)

{

warningPhone.Text = string.Empty;

warningPhone.Text = "Ingresar 9 dígitos";

warningPhone.TextColor = Color.IndianRed;

warningPhone.IsVisible = true;

}

else

{

try

{

//var users = (User)BindingContext;

users = (User)BindingContext;

await userDB.UpdateItemAsync(users);

await DisplayAlert("Aviso", "Registro actualizado exitosamente.", "Aceptar");

await Navigation.PushAsync(new UsersList());

cleanProperties();

}

catch (Exception ex)

{

await DisplayAlert("Error", ex.ToString(), "OK");

cleanProperties();

//Debug.WriteLine(ex); ;

}

/// <summary>

/// Métodos para eliminar un usuario ya registrado, se aplica la eliminación si el usuario confirma el mensaje

/// </summary>

/// <param name="sender"></param>

/// <param name="e"></param>

private async void userDelete_Clicked(object sender, EventArgs e) {

var result = await DisplayAlert("Confirmar", "Estas seguro de eliminar el registro", "Aceptar", "Cancelar");

if (result)//True si se preciona Aceptar, y se elimina el registro.

{

users = (User)BindingContext;

await userDB.DeleteItemAsync(users);

await Navigation.PushAsync(new UsersList());

}

else

{//False si se preciona Cancelar, y se cancela la elimación del registro.

return;

}

/// <summary>

/// Limpia las propiedades después de actualizar los datos

/// </summary>

void cleanProperties()

{

entryEmail.Text = string.Empty;

entryName.Text = string.Empty;

entryPassword.Text = string.Empty;

entryConfPassword.Text = string.Empty;

warningPassword.Text = string.Empty;

warningPassword.IsVisible = false;

entryPhone.Text = string.Empty;

warningPhone.Text = string.Empty;

warningPhone.IsVisible = false;

}

/// <summary>

/// Validación de cada propiedad, salvo la propiedad entryEmail que ya no permite ser modificado

/// </summary>

/// <returns></returns>

string validateProperties()

{

string result = null;

if ((string.IsNullOrWhiteSpace(entryPassword.Text)) || (string.IsNullOrWhiteSpace(entryPhone.Text)) ||

(string.IsNullOrEmpty(entryPassword.Text)) || (string.IsNullOrEmpty(entryPhone.Text)) ||

(string.IsNullOrEmpty(entryPassword.Text)) || (string.IsNullOrEmpty(entryPhone.Text)))

{

result = "Of";

}

else

{

result = "Ok";

}

return result;

}

Resultado:

Al finalizar la edición de esté post ya se cuenta con las siguiente interfaces desarrolladas:

Comparto el vídeo 📹 acerca de lo desarrollado de acuerdo a la descripción de este post publicado, todas las pruebas fueron validados en plataforma 📱 para Android.

Descarga la fuente de:

En proceso de carga...

De todas maneras gratitud a Dios 😊y gracias a todos ustedes por la acogida de este nuevo post, éxitos y bendiciones 🙏 y un gran abrazo a todos ✌...!!!

Publicar un comentario

5 Comentarios

Anónimo20 de julio de 2021, 11:25 a.m.
Muy buen post. Lo are completo
ResponderBorrar
Respuestas
Anónimo25 de junio de 2022, 11:44 p.m.
Excelente post, así puedo ir aprendiendo, gracias
ResponderBorrar
Respuestas
Anónimo6 de octubre de 2022, 1:06 p.m.
Muchisimas gracias por el post, y de igual manera comentar cada linea de codigo compleja, muy util.
ResponderBorrar
Respuestas
Anónimo7 de octubre de 2022, 9:02 a.m.
Como podria hacerse si en vez de mandar los datos a una lista se manden por separado a diferentes Labels?
ResponderBorrar
Respuestas

Agregar un comentario

Ticker

Xamarin.Forms - CRUD con SQLite

Publicadas por Hadsonpar

Publicar un comentario

5 Comentarios

MÁS POPULAR:

Ver la versión de una base de datos Oracle

Windows Forms - CRUD con Visual Studio y SQL Server

Agregar y conectarse a Sql Server desde Visual Studio

Sígueme en:

Tags:

Acerca de mí:

Buscar:

Entradas:

Contacto

Publicaciones Aleatorias

Entradas Populares

Ver la versión de una base de datos Oracle

Windows Forms - CRUD con Visual Studio y SQL Server

Agregar y conectarse a Sql Server desde Visual Studio

Footer Menu Widget

Ticker

Xamarin.Forms - CRUD con SQLite

Publicadas por Hadsonpar

Tal vez te interesen estas entradas

Publicar un comentario

5 Comentarios

Redes Sociales

MÁS POPULAR:

Ver la versión de una base de datos Oracle

Windows Forms - CRUD con Visual Studio y SQL Server

Agregar y conectarse a Sql Server desde Visual Studio

Sígueme en:

Tags:

Acerca de mí:

Buscar:

Entradas:

Contacto

Publicaciones Aleatorias

Entradas Populares

Ver la versión de una base de datos Oracle

Windows Forms - CRUD con Visual Studio y SQL Server

Agregar y conectarse a Sql Server desde Visual Studio

Footer Menu Widget