Wilson Vargas
Wilson Vargas

Un programador enamorado de su código.

Wilson Vargas
Author

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Share


Suscribete


Mantente al tanto de mis nuevos artículos

Tags


Featured on Planet Xamarin badge

Twitter


Creando un simple Login en Xamarin.Forms

Wilson VargasWilson Vargas

Hola chicos, después de mucho tiempo regreso a escribir algo (creo que lo voy hacer más seguido). He estado un poco alejado debido a que algunas cosas me desanimaron a escribir. En fin, la última semana he recibido muchas consultas acerca de este tema no sé porque, pero fueron varias, créame 😝

Bueno, hoy voy a mostrarle como realizar un simple Login. Sé que tal vez este tutorial sea demasiado simple para algunos, totalmente nuevo para otros o quizá mejore la forma de realizar esta característica tan fundamental en la mayoría de aplicaciones.
En realidad, no es una tarea taaaaan difícil que digamos, si bien es cierto la mayoría de aplicaciones tiene esta característica, muchas personas me han preguntado acerca de esto las últimas semanas.

Lo básico

Creo que está demás decir que para este tutorial vamos a utilizar lo siguiente:

  • Visual Studio 2015 Community Edition Update 2
  • Settings Plugin (Plugin creado por James Montemagno)
    Te dije, era algo básico…

Manos a la obra

Bueno, vamos a crear un proyecto de tipo Cross Platform en Visual Studio, elegimos la ruta donde lo guardaremos, le ponemos un nombre adecuado (no como el del ejemplo jaja).

En la siguiente ventana elegimos una aplicación en blanco o de tipo Master Detail Page según sea tu necesidad, para efectos de este tutorial vamos a elegir una aplicación en blanco nuestra estrategia de código compartido será la de biblioteca de clases portable.

Lo que crea Visual Studio es una plantilla lista para compilar y ejecutar, normalmente la estructura del proyecto es la siguiente:

En esta solución existen cuatro proyectos que básicamente son:
El proyecto de biblioteca de clases portable: Es en el cual se va a codificar la mayor parte de nuestra aplicación, en este ejemplo vamos a usar MVVM entonces vamos a tener nuestras Vistas (interfaces), nuestro Modelos (clases) y nuestro Vista modelos.

Los 3 proyectos para cada plataforma (Android, iOS, UWP): Estos tres proyectos son los que se ejecutan como aplicación propiamente dicha. Aquí es donde se almacenan las imágenes, fuentes, etc. Hay otras formas de renderizar imágenes no necesariamente tienen que estar en cada uno de estos proyectos, si quieres aprender más sobre esto revisa este enlace.

Bueno, lo que a mí me gusta hacer siempre en mi biblioteca de clases portable es separar por carpetas todo lo que tenga que ver con MVVM es por eso que yo ordeno este proyecto con esta estructura:

Yo sé que ustedes son observadores y han visto que he creado tres archivos de tipo Content Page en esta carpeta, efectivamente, esta carpeta va a contener las interfaces de nuestra aplicación.

Nuestra interfaz

Siempre me gusta hacer un bosquejo de todas mis aplicaciones, es obvio que está aplicación es realmente sencilla y cualquiera diría que hacer un bosquejo de esta aplicación sería una pérdida de tiempo, pero lo que les recomiendo es que por más pequeña que sea el proyecto que realicen siempre usen esas buenas prácticas que hacen que una aplicación sea realmente buena.
Bueno, esta será nuestra interfaz del Login:

Para realizar esta interfaz tendremos que aplicar todos nuestros conocimientos de XAML si es que tal vez tú aún no tienes conocimientos de esto puedes buscar un curso de esto en Microsoft Virtual Academy estoy seguro que ahí debe de haber alguno. Si es que por algún motivo no entiendes o no encuentras ningún tutorial acerca de XAML échame un tweet y encantado te ayudo con tu duda o como ahora escribo algún tutorial con tu duda.
Bueno el código XAML de nuestra interfaz de Login será el siguiente:

Nuestra interfaz principal, será algo más sencilla de hecho solo tendremos un Label con un mensaje de bienvenida y un botón de cerrar sesión. Este es el código de nuestra interfaz principal.

Importante: Cada archivo de nuestra interfaz (.xaml) genera otro archivo dependiente de él que es un archivo de formato .xaml.cs, es decir nuestros archivos LoginPage.xaml y MainPage.xaml tendrán los archivos LoginPage.xaml.cs y MainPage.xaml.cs respectivamente. Ten en cuenta esto porque luego trabajaremos en estos archivos.

Nuestra lógica

He creado tres clases que serán nuestro ViewModel una para nuestra vista de Login y otra para nuestra vista principal. La tercera la he creado como Base para las otras dos, hubiera instalado algun componente pero en mi experiencia siempre trabajo con un ViewModelBase a mi estilo.

Mi clase ViewModelBase recoje las mejores practicas de casi todos los componentes de MVVM que existen en Xamarin, de hecho el que te dejo aquí es el más básico, dependiendo de tus necesidades será donde le podrás agregar más propiedades base.

Básicamente, la parte lógica de este tutorial explica un login sencillo comparando el correo (en este caso [email protected]) y la clave (123456). Claro su caso ustedes podrían hacer la consulta a un web service, a Azure Mobile Service o a cualquier servicio que tenga almacenado los datos de sus usuarios.

Si te das cuenta tengo una clase llamada Settings esta clase no la he creado yo, es una clase que lo ha creado un complemento desarrollado por James Montemagno. Lo que te permite este complemento es crear y acceder a las configuraciones del teléfono desde nuestra PCL, es decir con esto podremos crear y acceder a las SharedPreferences en Android, los NSUserDefaults en iOS y las LocalSettings en UWP de manera sencilla.

Para instalar este complemento tienes que ir al gestor de paquetes de Visual Studio:

Ahí debemos buscar el componente llamado Xam.Plugins.Settings e instalarlo en todos nuestro proyectos como se ve en la parte izquierda:

Como haz visto este complemento nos crea una carpeta llamada Helpers y dentro de ella hay una clase Settings.

Para este ejemplo yo he agregado una variable con su respectiva propiedad llamada IsLoggedIn.

Para cerrar sesión lo único que hacemos es cambiar la variable IsLoggedIn de nuestra clase Settings a falso.

Finalmente, en nuestro archivo App.xaml.cs vamos a realizar una simple condición comprobando si está autenticado o no y dependiendo de eso haremos la navegación a la pantalla de Login o a la pantalla principal.

if (Settings.IsLoggedIn)
 {
    MainPage = new NavigationPage(new MainPage());
 }
 else
 {
    MainPage = new NavigationPage(new LoginPage());
 }

Demostración

Conclusión

Como habrás visto este tutorial es un tanto sencillo, pero por preguntas de varios dentro de la comunidad me decidí a realizarlo. Si tienes cualquier duda, alguna sugerencia o quieres agregar algo que mejore esta técnica de login puedes echarme un tweet o colaborar con el código en mi cuenta de github en este repositorio.
Nos leemos pronto.

Un chico con una gran experiencia en el arte del desarrollo software. Desarrollador de aplicaciones de móviles, especialista en ASP.Net, Xamarin y tecnologías de computo en la Nube en especial Azure.

Comentarios