Curso Básico de Xamarin – Introducción a Xamarin.Forms

Como parte de la iniciativa de Humberto Jaimes (a la que nos sumanos Cristian González y yo) en la que haciendo un donativo a Huellas de Pan -asociación civil sin fines de lucro que apoya a gente de escasos recursos con alimentos nutritivos- tienes acceso a un Curso Básico de Xamarin, en esta entrada voy a compartir el tutorial de la primer sesión “Introducción a Xamarin.Forms“, dirigido principalmente a aquellos que por primera vez comienzan su camino en el desarrollo de apps móviles multiplataforma con esta tecnología.

Por cierto, todavía puedes participar en esta iniciativa. ¡Dona y Aprende con nosotros! Solo sigue las instrucciones de este tweet.

En esta primer sesión realizaremos una app sencilla pero que mostrará cómo funciona Xamarin.Forms. Desarrollaremos un simple conversor de divisas que calcula los dólares que corresponden a un valor en pesos mexicanos. ¿Listo? ¡Comenzamos!

NOTA: El código fuente de la aplicación finalizada está disponible en mi repositorio de GitHub, por si lo quieres tomar como referencia.

Paso 1. Abre Visual Studio 2019 y selecciona la opción Create a new project:

Paso 2. Busca el tipo de proyecto Mobile App (Xamarin.Forms), selecciónala y da clic en Next:

Paso 3. En el nombre de proyecto escribe AppDivisas, asegúrate de seleccionar una ruta corta para la ubicación de tu solución y da clic en Create:

Paso 4. Selecciona la plantilla Blank (proyecto vacío), selecciona las plataformas que deseas probar y da clic en OK:

Paso 5. Espera a que se genere la solución con los proyectos .NET Standard y el de cada plataforma. Una vez finalizada la carga, da clic derecho en el proyecto .NET Standard AppDivisas y selecciona Add –> New Folder. El nombre de la nueva carpeta es Views.

Paso 6. Ahora da clic derecho en la carpeta Views, selecciona Add –> New Item:

Paso 7. Selecciona la categoría Xamarin.Forms (del lado izquierdo), luego elige Content Page en la lista de elementos y coloca el nombre ConversorView:

Paso 8. Ahora elimina el código seleccionado que se muestra en la siguiente imagen (líneas 9 a 13, lo que está dentro de ContentPage.Content):

Paso 9. A continuación se muestra el código completo de esta página. Básicamente se está agregando la interfaz de usuario, lo que se mostrará en la vista. Estos elementos son:

• Un Grid que organiza todos los controles
• Una etiqueta (Label) con el texto “Monto en Pesos“
• Una caja de texto (Entry) llamada PesosEntry que permitirá al usuario ingresar una cantidad
• Un botón (Button) con el texto Convertir; cuando el usuario lo presione, se calculará el monto correspondiente en dólares
• Un botón (Button) con el texto Limpiar; cuando el usuario lo presione, se pondrá en cadena vacía tanto la caja de texto como la etiqueta de resultado
• Una etiqueta (Label) con el texto “Monto en Dólares“
• Una etiqueta (Label) con el nombre DolaresLabel en la que se mostrará el resultado de la conversión

Paso 10. Abre el archivo ConversorView.xaml.cs, que es el código de la página creada. En ella implementaremos la funcionalidad para manejar los eventos, por ejemplo los clicks de los botones Convertir y Limpiar. El código que agregaremos se muestra a continuación y consiste en:

• La constante tasa con el valor 19.11 (corresponde al tipo de cambio de dólar a pesos).
• El método Limpiar que coloca la caja de texto PesosEntry y la etiqueta DolaresLabel en cadena vacía.
• El manejador de evento ConversorButton_Clicked que convierte la cantidad introducida por el usuario (en pesos) a dólares utilizando la constante definida. En este código se verifica que la información ingresada sea un número valido; si es correcta, se convierte la cantidad; en caso contrario, se llama al método Limpiar.
• El manejador de evento LimpiarButton_Clicked que llama al método Limpiar.

Paso 11. Solo queda modificar la clase App.xaml.cs. El cambio consiste en establecer ConversorView como página de inicio de la aplicación cuando ésta sea ejecutada. Esto se realiza creando una instancia de dicha vista y asigándola al elemento MainPage, tal como se indica a continuación.

Paso 12. ¡Listo! Ahora solo resta probar la aplicación. Primero lo haremos en Android. En la lista de proyectos selecciona AppDivisas.Android tal como se muestra en la imagen. Al lado derecho de esta lista aparecerán los emuladores que hayas iniciado (en este caso, Genymotion) pero lo recomendable es conectar tu dispositivo en caso de que cuentes con uno, pues las pruebas son más rápidas y tienes una mayor confianza de cómo funciona tu aplicación en un dispositivo real. Selecciona el dispositivo o emulador, da clic en el botón de Ejecutar y espera a que compile el proyecto. Si hay errores, corrígelos.

Paso 13. Si el emulador o dispositivo ejecutan la aplicación, verás que se muestra la pantalla que diseñaste. Ingresa una cantidad y verifica que se realiza la conversión correctamente.

Paso 14. Detén la ejecución del proyecto; ahora de manera similar selecciona el proyecto AppDivisas.UWP y elige LocalMachine de la segunda lista.

Paso 15. Al ejecutar la aplicación, así se verá en Windows 10:

Si cuentas con una Mac, podrás compilar el proyecto para iOS y realizar la prueba en un emulador de iPhone por ejemplo.

¡Felicidades! Has desarrollado tu primer aplicación de Xamarin en la que escribiste el código en un solo proyecto y pudiste desplegarlo por lo menos en dos sistemas móviles distintos.

Espero que este tutorial haya sido de utilidad para tí, si tienes alguna duda o comentario, házmelo saber.

¡Saludos y hasta la próxima, muchas gracias por tu visita!

Luis