Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Hello Xamarin!
Laboratorio
Hello Xamarin!
Versin: 1.0.0
Octubre de 2016
Pgina 1 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
CONTENIDO
INTRODUCCIN
EJERCICIO 1: INSTALANDO LA PLATAFORMA XAMARIN
Pgina 2 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Introduccion
La instalacin y configuracin del hardware y software depender de las plataformas mviles sobre
las cuales estemos pensando desarrollar. Adems, depender de la plataforma de computo sobre la
cual nos sintamos ms confortables, una Mac o una PC.
Los requerimientos de Xamarin.Forms no son diferentes de los requerimientos para utilizar
Xamarin.iOS o Xamarin.Android o para programar para las plataformas Windows.
Si vamos a desarrollar para iPhone, necesitaremos una Mac. Apple requiere que una Mac sea
utilizada para compilar aplicaciones iPhone y otras aplicaciones iOS. Necesitamos instalar Xcode en
esa mquina y por supuesto, la plataforma Xamarin que incluye las bibliotecas necesarias y Xamarin
Studio. Despus de esto, podemos utilizar Xamarin Studio y Xamarin.Forms en la Mac para
desarrollar aplicaciones iOS.
Una vez que ya tengamos una Mac con Xcode y la plataforma Xamarin instalada, podemos tambin
instalar la plataforma Xamarin sobre una PC y desarrollar para el iPhone utilizando Visual Studio. La
PC y la Mac deben estar conectadas a travs de la Red. Visual Studio se comunica con la Mac a travs
de una interface SSH (Secure Shell) y utiliza la Mac para compilar la aplicacin y ejecutar el programa
sobre un dispositivo fsico o simulador.
Tambin es posible realizar programacin Android en Xamarin Studio sobre la Mac o con Visual
Studio sobre la PC.
Si deseamos desarrollar para las plataformas Windows, necesitaremos Visual Studio 2015. Podemos
desarrollar para todas las plataformas en un nico IDE ejecutando Visual Studio 2015 sobre una PC
conectada a la Mac a travs de la red. La otra opcin es ejecutar Visual Studio en una mquina virtual
sobre la Mac.
Es posible probar nuestras aplicaciones en dispositivos reales conectados a la computadora de
desarrollo a travs de un cable USB, o podemos probar nuestros programas con emuladores.
Existen ventajas y desventajas en cada enfoque. Un dispositivo real es esencial para probar una
interaccin tctil compleja o para probar los tiempos de arranque o respuesta de la aplicacin. Sin
embargo, los emuladores nos permiten ver como una aplicacin se adapta a una variedad de
tamaos y factores de forma.
Los emuladores de iPhone y iPad se ejecutan sobre la Mac. Sin embargo, debido a que las Mac de
escritorio no tienen monitores tctiles, necesitamos utilizar un mouse o un TrackPad para simular los
gestos tctiles. Los gestos tctiles, del TrackPad de la Mac no se trasladan hacia el emulador.
Tambin podemos conectar un iPhone real a la Mac, pero necesitamos provisionarlo como un
dispositivo de desarrollo.
Pgina 3 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Histricamente, los emuladores de Android proporcionados por Google han tendido a ser lentos,
aunque a menudo son extremadamente verstiles en la emulacin de una amplia gama de
dispositivos Android actuales. Afortunadamente, Visual Studio ahora tiene su propio emulador de
Android que trabaja mucho mejor. Tambin es muy fcil conectar un dispositivo Android real a la PC
o a la Mac para realizar pruebas. Todo lo que necesitamos hacer es habilitar la depuracin USB en el
dispositivo.
Los emuladores de Windows Phone pueden manejar diferentes resoluciones de pantalla y tambin
tienden a ejecutarse bastante bien, aunque consumen demasiada memoria. Si ejecutamos el
emulador de Windows Phone sobre un monitor tctil, podemos utilizar los gestos tctiles sobre la
pantalla del emulador. Conectar un Windows Phone real a la PC es bastante fcil, pero requiere que
habilitemos el telfono para desarrollo desde la seccin de Configuracin. Si queremos desbloquear
ms de un telfono, necesitaremos una cuenta de desarrollador.
En este laboratorio, instalars el software necesario para poder empezar a desarrollar aplicaciones
multiplataforma utilizando Xamarin.
Despus de haber realizado la instalacin, tendrs la oportunidad de probar tu ambiente de
desarrollo creando una aplicacin para cada plataforma: iOS, Android y Windows.
Objetivos
Al finalizar este laboratorio, los participantes sern capaces de:
Requisitos
Para la realizacin de este laboratorio es necesario contar con lo siguiente:
Un equipo de desarrollo con sistema operativo Windows 10 y Visual Studio 2015 Community,
Professional o Enterprise.
Un equipo Mac con OS X Yosemite (10.10) o posteriores accesible por la PC a travs de la red
con la ltima versin de Xcode. Xcode puede descargarse desde la tienda de aplicaciones de
Mac o desde el Centro de desarrollo de iOS.
Pgina 4 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Xamarin.Android
Xamarin.Forms
Si
iOS y Android nicamente
PC con Windows
Visual Studio
Si
(con conexin a una
Mac para
compilacin y
depuracin)
Si
Android, Windows,
Windows Phone
(iOS con la
computadora Mac)
Xamarin Studio
No
Si
Android
nicamente
De la tabla anterior podemos concluir que, si deseamos desarrollar aplicaciones para las plataformas
iOS, Android y Windows, lo recomendable es configurar un equipo de desarrollo PC con Windows y
Visual Studio. Para compilar y depurar aplicaciones iOS, necesitaremos una Mac accesible por la PC a
travs de la Red.
Los productos Xamarin dependen de los SDKs de las plataformas Apple y Google para crear
aplicaciones iOS y Android respectivamente.
En este ejercicio instalars la plataforma Xamarin en la Mac e instalars la plataforma Xamarin sobre
Visual Studio 2015 en la PC con Windows 10.
Tarea 1. Instalar Xamarin en la Mac.
La manera ms simple de instalar Xamarin en la Mac es a travs del instalador universal de Xamarin.
El instalador de Xamarin automticamente detecta, descarga e instala cualquier componente
Xamarin requerido para completar la instalacin.
Realiza los siguientes pasos para instalar la plataforma Xamarin sobre la Mac.
Pgina 5 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
2. Llena el formulario con los datos solicitados y haz clic en el botn Download Xamarin Studio
Community para descargar el instalador.
3. Una vez que el instalador haya sido descargado, ejectalo dando doble clic sobre el logo del
instalador.
Pgina 6 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
4. En el cuadro de dilogo de seguridad haz clic en el botn Open para permitir la ejecucin de
la aplicacin.
Pgina 7 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
5. El primer paso de la instalacin requiere que revises y aceptes la licencia para poder
continuar. haz clic en la casilla de verificacin y presiona Continue.
Pgina 8 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
6. En la siguiente pantalla aparecer la lista de los productos a descargar. Los productos que
selecciones en esta pantalla dependern de las plataformas para las cuales deseas desarrollar
aplicaciones. Si nicamente deseas utilizar la Mac para compilar y depurar aplicaciones iOS
desde Visual Studio, puedes seleccionar nicamente Xamarin.iOS.
Para este laboratorio, selecciona todos los productos disponibles y da clic en Continue para
iniciar la descarga e instalacin.
Pgina 9 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
8. En caso de que no hayas instalado Xcode, te ser mostrada una pantalla indicndote los
pasos que debes seguir para instalar Xcode. Xamarin.iOS requiere que el SDK de iOS y Xcode
estn instalados.
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
9. El instalador te mostrar los elementos que sern descargados e instalados. Haz clic en
Continue para iniciar el proceso.
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Pgina 12 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
b. Windows and Web Development > Universal Windows App Development Tools.
Pgina 13 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
7. En caso de que existan actualizaciones, haz clic en Install y sigue las indicaciones para realizar
la actualizacin.
Pgina 14 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Pgina 15 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Visual Studio es notificado de los cambios tan pronto ocurren. Por ejemplo, cuando un
dispositivo iOS es conectado, la barra de herramientas se actualizar inmediatamente para
indicar la presencia del dispositivo.
Mltiples instancias de Visual Studio pueden conectarse de forma simultnea.
La conexin no interrumpir el desarrollo. Solo preguntar por la conexin a la Mac cuando
estemos realizando una operacin en la que sea requerida la Mac, por ejemplo, para
depuracin o para utilizar el diseador de iOS.
Para configurar un host Mac, debemos habilitar la comunicacin entre la extensin Xamarin para
Visual Studio y la Mac. Para hacer esto, necesitamos habilitar la opcin Remote Login en la Mac.
Realiza los siguientes pasos para habilitar la opcin Remote Login en la Mac.
1. Abre la opcin System Preferences en la Mac.
3.
Pgina 16 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
4. Asegrate de la opcin Remote Login est permitida para todos los usuarios o que tu usuario
o grupo Mac est incluido en la lista de usuarios permitidos en la lista de la derecha.
Si tienes el firewall de OS X configurado para bloquear aplicaciones firmadas de manera
predeterminada, debers permitir al proceso mono-sgen recibir conexiones entrantes. Un
dialogo de alerta aparecer preguntndote cuando este sea el caso.
3. En caso de que te sea mostrada la ventana Xamarin Mac Agent Instructions, haz clic en el
botn OK para cerrarla. Esta ventana te proporciona informacin para habilitar el inicio de
sesin remota en la Mac. Este paso lo realizaste en la tarea anterior.
Pgina 17 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
4. La ventana Xamarin Mac Agent te mostrar las computadoras Mac encontradas en la red.
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
6. La primera vez que te conectes a una Mac, te sern solicitadas tus credenciales. Las
credenciales que proporciones deben ser de un usuario configurado en la Mac con derecho
de inicio de sesin remota.
Proporciona tus credenciales en la ventana de dialogo Connect to Mac y haz clic en el botn
Log In para iniciar sesin.
El agente utilizar esas credenciales para crear una nueva conexin SSH hacia la Mac. Si la
conexin tiene xito, una llave SSH ser creada y ser registrada en el archivo
authorized_keys en la Mac. En conexiones subsecuentes, el agente utilizar el nombre de
usuario y el archivo con la llave para conectarse al host de compilacin al que nos hayamos
conectado ms recientemente.
Cuando la conexin haya sido exitosa, la Mac ser mostrada con un icono de conexin a la
derecha.
Cada Mac en la lista tiene un men contextual que nos permite conectarnos, desconectarnos
u olvidar los datos de conexin.
Pgina 19 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
7. Haz clic en el botn Close para cerrar la ventana Xamarin Mac Agent.
8. Haz clic en OK para cerrar la ventana Options.
Es probable que ya tengas ansias de crear tu primera aplicacin Xamarin.Forms, pero antes de que lo
hagas, debers intentar crear proyectos Xamarin normales para iPhone, Android, Windows, Windows
Phone y Windows Mobile.
Si ests experimentado problemas utilizando Xamarin.iOS, Xamarin.Android o Windows, ese no es
problema de Xamarin.Forms. Primero necesitars resolver esos problemas antes de utilizar
Xamarin.Forms.
Pgina 20 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Pgina 21 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
5. Haz doble clic sobre el archivo Main.storyboard desde la ventana Solution Explorer.
Pgina 22 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
9. Utiliza la ventana de propiedades para cambiar la propiedad Text del control Label por el
texto Hello Xamarin iOS. Tambin puedes editar directamente el texto dentro del control
Label dando doble clic sobre el control.
10. Selecciona la opcin iPhoneSimulator para indicar que deseas desplegar la aplicacin iOS en
el simulador de iPhone.
Pgina 23 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Pgina 25 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
5. Desde la ventana Solution Explorer, haz doble clic sobre el archivo Resources > layout >
Main.axml para abrirlo en el diseador de Android.
En caso de que te sea mostrada una pantalla similar a la siguiente, debers actualizar el SDK
de Android que tengas instalado a travs del enlace Open Android SDK.
Cuando el SDK de Android est actualizado, podrs ver la pantalla del diseador de Android
similar a la siguiente.
Pgina 26 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Pgina 27 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Pgina 28 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Pgina 29 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Pgina 30 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Esta plantilla crear dos proyectos, un proyecto para una aplicacin Windows 8.1 y otro
proyecto para una aplicacin Windows Phone 8.1. La plantilla adems agrega un tercer
proyecto con cdigo compartido.
10. Desde la ventana Solution Explorer, haz doble clic sobre el archivo App.xaml.cs del proyecto
compartido para abrirlo en la ventana de cdigo.
11. Agrega el siguiente cdigo dentro del mtodo OnLaunched, justo despus de la ltima lnea
Window.Current.Activate();
Window.Current.Activate();
var msg = new Windows.UI.Popups.MessageDialog("Hello Windows!");
msg.ShowAsync();
Pgina 31 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Pgina 33 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
5. En el cuadro de dialogo New Universal Windows Project haz clic en OK para seleccionar las
versiones de plataforma sugeridas.
Pgina 35 de 38
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
6. Desde la ventana Solution Explorer, haz doble clic sobre el archivo MainPage.xaml para
abrirlo en el diseador. Se mostrar una pantalla similar a la siguiente.
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
10. Si todo funciona correctamente, la aplicacin ser mostrada en el simulador que elegiste. La
aplicacin mostrar el mensaje Hello UWP!.
Soporte: mmunoz@mail.ticapacitacion.com
Xamarin Diplomado
Hello Xamarin!
Resumen
En este laboratorio preparaste tu entorno de desarrollo Xamarin para crear aplicaciones mviles
multiplataforma iOS, Android y Windows desde el entorno de desarrollo Visual Studio 2015.
Configuraste tambin tu entorno de desarrollo Mac para permitir la compilacin y depuracin de
aplicaciones iOS desde Visual Studio.
Si has podido construir aplicaciones Xamarin.iOS, Xamarin.Android y Windows, entonces tienes todo
listo para crear tu primera aplicacin Xamarin.Forms.
Es tiempo de decir Hello, Xamarin.Forms a una nueva era en el desarrollo de aplicaciones mviles
multiplataforma.
Cuando hayas finalizado este laboratorio publica el siguiente mensaje en Twitter y Facebook:
Pgina 38 de 38
Soporte: mmunoz@mail.ticapacitacion.com