Mes: febrero 2023

API Alumnos + CRUD MAUI

{
  "alumno": [
    {
      "id": 1,
      "nombre": "Ana Pie",
      "nota": 7
    },
    {
      "id": 2,
      "nombre": "Eva Buja",
      "nota": 8
    },
    {
      "id": 3,
      "nombre": "Juan Ra",
      "nota": 4
    },
    {
      "id": 4,
      "nombre": "Rosa",
      "nota": 4
    }
  ]
}

npx json-server –port 3001 –watch db.json

TestMVVM

Ejercicio MAUI

Utilizando la API random user hacer una app MAUI que nos muestre 5 usuarios:

https://randomuser.me/api/?results=5

Con una página de lista de usuarios y una de detalle.

Tened en cuenta que la API da muchos datos, no hace falta que los usemos todos.

¡Suerte!

MVVM

MVVM significa Modelo-Vista-ViewModel y es un patrón arquitectónico utilizado en el desarrollo de aplicaciones de software. Este patrón se utiliza en combinación con la plataforma de desarrollo de aplicaciones móviles de Microsoft, MAUI (Multi-platform App UI).

El patrón MVVM se utiliza para separar las preocupaciones de la lógica empresarial y la interfaz de usuario en diferentes capas de la aplicación. Esto significa que los desarrolladores pueden trabajar en diferentes partes de la aplicación sin interferir en el trabajo de los demás.

En MVVM, el modelo representa los datos y la lógica empresarial de la aplicación. La vista representa la interfaz de usuario y el ViewModel es el enlace entre el modelo y la vista. El ViewModel se utiliza para presentar los datos del modelo en la vista y para actualizar los datos del modelo cuando se realizan cambios en la vista.

MAUI proporciona una arquitectura que permite utilizar el patrón MVVM de manera eficiente. La arquitectura de MAUI permite que la lógica empresarial y la interfaz de usuario se separen de manera efectiva. Los desarrolladores pueden crear modelos que contengan datos y lógica empresarial, vistas que muestren información al usuario y ViewModels que conecten los dos.

El uso de MVVM en MAUI permite a los desarrolladores crear aplicaciones móviles más fáciles de mantener y escalar. La separación de la lógica empresarial y la interfaz de usuario permite a los desarrolladores trabajar en diferentes partes de la aplicación sin interferir en el trabajo de los demás. Además, el uso de ViewModel permite que la lógica empresarial se mantenga independiente de la vista, lo que facilita la prueba y la depuración.

A continuación te proporciono un ejemplo básico de cómo implementar una aplicación de MAUI con el patrón MVVM en C#:

Modelo (Model.cs):


public class Model
{
    public string Text { get; set; }
}

ViewModel (ViewModel.cs):


public class ViewModel
{
    private readonly Model model;
    
    public ViewModel(Model model)
    {
        this.model = model;
    }
    
    public string Text
    {
        get => model.Text;
        set => model.Text = value;
    }
}

Vista (MainPage.xaml):


<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewModels="clr-namespace:MvvmDemo.ViewModels;assembly=MvvmDemo"
             x:Class="MvvmDemo.MainPage">
    <StackLayout>
        <Entry Text="{Binding Text}" />
        <Button Text="Guardar" Clicked="OnSaveClicked" />
    </StackLayout>
</ContentPage>

Vista (MainPage.xaml.cs):


public partial class MainPage : ContentPage
{
    private readonly ViewModel viewModel;
    
    public MainPage(Model model)
    {
        InitializeComponent();
        viewModel = new ViewModel(model);
        BindingContext = viewModel;
    }
    
    private void OnSaveClicked(object sender, EventArgs e)
    {
        // Aquí se pueden guardar los cambios realizados en el modelo
    }
}

En este ejemplo, el modelo (Model) contiene una única propiedad (Text) que se puede establecer y recuperar. El ViewModel (ViewModel) se utiliza para conectar el modelo y la vista, exponiendo una única propiedad (Text) que se puede enlazar a la vista (MainPage.xaml). La vista (MainPage.xaml) muestra una entrada de texto y un botón, y se enlaza a la propiedad Text del ViewModel. Cuando se hace clic en el botón, se puede guardar el valor del modelo actualizado.

Este ejemplo es muy básico, pero debería darte una idea de cómo funciona el patrón MVVM en una aplicación de MAUI.

https://learn.microsoft.com/es-es/dotnet/maui/xaml/fundamentals/mvvm?view=net-maui-7.0

https://mauiman.dev/mvvm.html

Actividad MAUI

Vamos a modificar el programa de las notas para que tenga un título y un contenido. En la lista se verá el título, algo del contenido y la fecha.

Para ello, además de modificar la app tendremos que modificar la manera de guardarlo. Mi consejo es que guardemos titulo+contenido dentro del fichero separados por una cadena (p.ej. ##|##) y al recuperar guardemos cada una de las cosas en su sitio.

¡Suerte!

dotnet maui-samples main 7.0-Tutorials_CreateNetMauiApp_step4

Elementos MAUI

Label
Label is used to display single-line or multi-line text. It can display text with a certain format, such as color, space, text decorations, and even HTML text. To create a Label, we can use the simplest format, like so:

<Label Text="Hello world" />

Image
In the user interface design, we usually use icons to decorate other controls or display images as backgrounds. The Image control can display an image from a local file, a URI, an embedded resource, or a stream. The following code shows an example of how to create an Image control in the simplest form:

<Image Source="dotnet_bot.png" />

Editor
In our app, the users need to enter or edit a single line of text or multiple lines of text. We have two controls to serve this purpose: Editor and Entry.

Editor can be used to enter or edit multiple lines of text. The following is an example of the Editor control:

<Editor Placeholder="Enter your description here" />

Entry
Entry can be used to enter or edit a single line of text. To design a login page, we can use Entry controls to enter a username and password. When users interact with an Entry, the behavior of the keyboard can be customized through the Keyboard property. When users enter their passwords, the IsPassword property can be set to reflect the typical behavior on a login page. The following is an example of a password entry:

<Entry Placeholder="Enter your password" Keyboard="Text"   IsPassword="True" />

ListView
In the user interface design, a common use case is to display a collection of data. In .NET MAUI, a few controls can be used to display a collection of data, such as CollectionView, ListView, and CarouselView. In our app, we will use ListView to display password entries, groups, and the content of an entry. We will introduce the usage of ListView when we introduce ItemsPage.