(Parte 1) Replicando IU de Aplicación de vuelos: Preparando el proyecto para trabajar con MVVM

¡¡¡Hola !!!💁‍♀ Continuamos en la replica de Apps 😍  En este caso, vamos a replicar un IU de una aplicación para vuelos el cual es un diseño obtenido de Dribble realizado por Gleb Kuznetsov✈. ¡Puedes darle un vistazo aqui! ¡Pero esta vez llevaremos a cabo una dinámica ligeramente diferente a la de los artículos anteriores ya que estaremos explicando primero la estructura para hacer nuestro proyecto en MVVM!

Si estás comenzando con Xamarin Forms, ¡Este es un muy buen ejercicio para comprender mejor MVVM! 🤩

Como sabemos, cada diseño tiene una estructura de soporte detrás y es necesario entenderla lo mejor posible. Es por esta razón que comenzaremos este artículo desarrollando la implementación de MVVM. Haremos el análisis de las clases requeridas y por lo tanto de sus atributos, para obtener los Modelos y ViewModels necesarios y luego poder comunicarnos con la UI que desarrollaremos. 💪🏼

Así que en detalle veremos los siguientes puntos:

➖ Identificando y creando modelos

➖ Creando el ViewModel

➖ Preparando la vista para la implementación


¡Empecemos!

Identificando y creando modelos: Clase Passenger

La imagen tiene un atributo ALT vacío; su nombre de archivo es screen-shot-2020-05-10-at-7.10.28-pm.png

Para empezar veamos el diseño que tenemos como objetivo. El propósito de la aplicación es mostrar todos los detalles de los vuelos incluyendo los pasajeros que están registrados.

Sabiendo esto, comenzaremos identificando cada uno de los datos del pasajero.

Como vemos en la imagen, necesitaremos los siguientes atributos:

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-06-at-7.48.18-PM-1024x387.png

En tu proyecto crea una nueva carpeta llamada “Models” y dentro de ella estaremos agregando todos los Modelos creados.

Y ahora, ¡Creemos la clase Passenger!

public class Passenger
    {
        public string Name        { get; set; }
        public string Email       { get; set; }
        public string Seat        { get; set; }
        public string Picture     { get; set; }
        public bool   IsConfirmed { get; set; } 
    }

Una vez creada la primera clase, ¡Creemos la clase Vuelo!

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-06-at-7.57.01-PM-591x1024.png

Continuemos identificando los datos requeridos en la clase Flight (Vuelo). 

Como vemos en la imagen, necesitaremos los siguientes atributos:

This image has an empty alt attribute; its file name is Screen-Shot-2020-05-06-at-8.04.11-PM-1024x764.png

Y ahora, ¡Creemos la clase Flight!

 public class Flight
    {
        public string From          { get; set; }
        public string FromDate      { get; set; }
        public string To            { get; set; }
        public string ToDate        { get; set; }
        public string Number        { get; set; }
        public string ClassType     { get; set; }
        public string Boarding      { get; set; }
        public string Terminal      { get; set; }
        public string Total         { get; set; }
        public bool   IsSplitPayment { get; set; }
        public List<Passenger> passenger { get; set; }
    }

¡Finalmente, hemos creado todos nuestros modelos requeridos! ¡Estamos listos para continuar con la creación de ViewModel! 💪😎


Creando nuestro ViewModel

En tu proyecto crea una nueva carpeta llamada “ViewModels”  y luego, agrega la siguiente clase:

Comencemos a crear FlightViewModel: Además de esto, también declaro una ObservableCollection para los vuelos.

public class FlightViewModel
    {
        // Declaring flight collection
        public ObservableCollection<Flight> flight { get; set; } 
        
        public FlightViewModel()
        {
            // Here add the code that is being explained in the next step.
        }
        
    }

Una vez creado, ¡Usemos nuestra estructura de datos para completar con información de prueba!

flight = new ObservableCollection<Flight>()
            {
                new Flight
                {
                    From            ="MAC",
                    To              ="SDQ",
                    FromDate        ="24 May, 12:30",
                    ToDate          ="20:30",
                    Number          ="AR 712",
                    ClassType       ="First",
                    Boarding        ="21:35",
                    Terminal        ="B",
                    Total           ="$1,536",
                    IsSplitPayment  =true,
                    passenger      = new List<Passenger>
                    {
                        new Passenger
                        {
                            Name = "Leo R.",
                            Email = "leoreyes@hotmail.com",
                            Seat="17-C",
                            Picture="LeoR",
                            IsConfirmed = false
                        },
                        new Passenger
                        {
                            Name = "Victor R.",
                            Email = "victorr@hotmail.com",
                            Seat="16-A",
                            Picture="VictorR",
                            IsConfirmed = true
                        }
                    }
                },
                 new Flight
                {
                    From            ="LAS",
                    To              ="NYC",
                    FromDate        ="26 May, 10:30",
                    ToDate          ="14:30",
                    Number          ="AR 352",
                    ClassType       ="Economic",
                    Boarding        ="21:35",
                    Terminal        ="B",
                    Total           ="$1,096",
                    IsSplitPayment  =false,
                    passenger       = new List<Passenger>
                    {
                        new Passenger
                        {
                            Name = "Jessie L.",
                            Email = "jessie@hotmail.com",
                            Seat="17-B",
                            Picture="JessieL",
                            IsConfirmed = true
                        }
                    }
                }
            }

Preparando la vista para la implementación

Finally, let’s prepare the communication between these before views to start with the development of our UI! In your project create a new folder named “Views” and inside them, add all the views that you need, in this case let’s add FlightPage.

Finalmente, ¡Preparemos la comunicación entre la estructura de datos realizada anteriormente para comenzar con el desarrollo de nuestra interfaz de usuario! En tu proyecto, crea una nueva carpeta llamada “Views”  y, dentro de ella agrega todas las vistas que necesites, en este caso agregaremos FlightPage.xaml

Una vez creada: ¡Ya que estamos implementando MVVM de una manera simple, agrega un  BindingContext a tu XAML!  En tu XAML antes de la etiqueta <ContentPage.Content>, agrega el siguiente código:

<ContentPage.BindingContext>
        <local:ViewModels.FlightViewModel/>
</ContentPage.BindingContext>

O si deseas agregarlo en el código de C#, simplemente ve a tu PageName.xaml.cs

BindingContext = new FlightViewModel();

¡Felicidades! Sus datos están estructurados y listos para comenzar a trabajar con la IU ! 🎊

📌 ¡En la segunda parte de esta serie crearemos la estructura XAML para replicar el diseño!

📔 Información adicional:

  • La segunda parte de esta publicación: “Replicando un IU de vuelos: Trabajando con XAML” estará disponible aquí.
  • Si deseas obtener más información sobre MVVM puedes leer el siguiente artículo.

¡Y nuestra estructura de aplicación de vuelo está lista! 😎.
 
Para ver la estructura de código completa de esta parte, puedes ingresar a mi repositorio de Github😍
 
 
 
 

¡Buena suerte con tu implementación! 😎

Gracias por leer mi artículo!!! 💚

Artículo en inglés: https://askxammy.com/part-1-replicating-flight-ui-preparing-the-project-to-work-with-mvvm/

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s