Usos y desusos de la inteligencia artificial en revistas científicas
Introducción a Xamarin Forms con XAML
1. Abril 2016 Diplomado Dispositivos Móviles 1
Módulo de Xamarin Forms
Parte 1: Introducción a Xamarin
2. Abril 2016 Diplomado Dispositivos Móviles 2
Sorey García (@soreygarcia)
Consultora en Movilidad
y Freelancer XAML
Ingenieria Informatica
Politécnico Jaime Isaza Cadavid
Especialista en Desarrollo de Software
Universidad EAFIT
Docente de Cátedra
Institución Universitaria Pascual Bravo
Co-fundadora de la comunidad de
Desarrolladores Avanet y Codies
Instructora
4. Abril 2016 Diplomado Dispositivos Móviles 4
Commercial LicenseOpen Source License / Free available
4
From .NET to Xamarin
Windows
.NET Framework
Linux
Mono
iOS
MonoTouch
Android
Mono for Android
iOS
Xamarin.iOS
Android
Xamarin.Android
5. Abril 2016 Diplomado Dispositivos Móviles 5
Silo
Approach
Crear una App
multiples
veces
6. Abril 2016 Diplomado Dispositivos Móviles 6
Retos del desarrollo nativo
• Mac OS X
• XCode
• Objective-C
• Swift
• iOS SDK
• Apple Tools
• OS
• Eclipse or Android Studio
or…
• Java
• Android SDK
• SDK Tools
• Windows OS
• Visual Studio
• C#
• .NET Framework
• Windows Phone SDK
7. Abril 2016 Diplomado Dispositivos Móviles 7
Write Once,
Run Anywhere
Approach
Mínimo común
denominador App Generation
8. Abril 2016 Diplomado Dispositivos Móviles 8
Retos del desarrollo híbrido
• Mínimo común denominador
• Fragmentación del Browser
• Desarrollo y diseño para 1 plataforma,
afecta las experiencias de usuario
20. Abril 2016 Diplomado Dispositivos Móviles 20
Compilación Nativa
Xamarin.iOS does full Ahead Of Time (AOT)
compilation to produce an ARM binary for
Apple’s App Store.
Xamarin.Android takes advantage of Just In
Time (JIT) compilation on the Android
device.
21. Abril 2016 Diplomado Dispositivos Móviles 21
Cualquier cosa que pueda hacerse en Objective-C or
Java puede hacerse en C# con Xamarin usando Visual
Studio o Xamarin Studio
30. Abril 2016 Diplomado Dispositivos Móviles 30
40+ Pages, Layouts, and Controls
Build from code behind or XAML
Two-way Data Binding
Navigation
Animation API
Dependency Service
Messaging Center
Xamarin.Forms
Shared UI Code
31. Abril 2016 Diplomado Dispositivos Móviles 31
Xamarin’s Unique Approach
Shared C# codebase • 100% native API access • High performance
iOS C# UI Windows C# UIAndroid C# UI
Shared C# Mobile C# Server
Linux/Mono
CoreCLRAzure
Shared C# Client/Server
32. Xamarin.Forms: Interfaces Nativas con Código Compartido
Use a single API to generate native, platform-
specific user interfaces
At runtime, each Xamarin.Forms page and its
controls are mapped to platform-specific native
UI elements
38. Abril 2016 Diplomado Dispositivos Móviles 38
http://www.genymotion.com/
Emuladores
39. Abril 2016 Diplomado Dispositivos Móviles 39
Plataformas Soportadas Xamarin Forms
• Android 4.0.3 o Superior
• iOS 6.1 o Superior
• Windows Phone y Windows 8.1
• Windows 10 UWP
43. Abril 2016 Diplomado Dispositivos Móviles 43
Ventajas y Desventajas
VENTAJAS
• Se escribe el código solo una vez
• Mantiene la experiencia de usuario propia de cada plataforma.
• Se permite el acceso a funciones nativas a través de Inyección de Dependencias.
• No es necesario conocer todo acerca de las plataformas nativas
• Puedes crear código XAML y aprovechar la potencia de MVVM
DESVENTAJAS
• Es un poco nuevo así que es necesario adaptarse a lo que existe, lo que limita en cuanto a
crear UX que demande demasiado esfuerzo gráfico.
48. Abril 2016 Diplomado Dispositivos Móviles 48
Módulo de Xamarin Forms
Parte 2: Consideraciones de Publicación
49. Abril 2016 Diplomado Dispositivos Móviles 49
XAML y C# Everywhere
La mayoría de recursos en
internet enseñan Xamarin
Forms con Code Behind.
Sin embargo la
recomendación es
aprender y trabajar con
XAML y aprovechar su
enfoque a la separación de
responsabilidades entre el
diseño y la codificación.
51. Abril 2016 Diplomado Dispositivos Móviles 51
Apple Developer Center
• Cuenta de Desarrollador o Compañia: 99 USD Anuales
• Cuenta Empresarial: 299 USD Anuales
• En el Apple Developer Center se gestiona la cuenta, certificados y dispositivos
• En iTunes Connect se publican las aplicaciones
• Invitaciones a beta tester via correo desde iTunes Connect subiendo un Bundle a
TestFlight
• Nivel de complejidad: Alto
• Nivel de exigencia en calidad: Alta
• Tiempo de publicación: Días (Entre 7 y 12)
• http://appreviewtimes.com/
52. Abril 2016 Diplomado Dispositivos Móviles 52
Windows Store y Windows Phone Store
Windows Phone Store y Windows Store
• 19 USD de por vida para desarrolladores
• 99 USD de por vida para compañías
• Invitaciones a beta tester via correo subiendo un paquete.
• En el Developer Benefits Center se obtienen beneficios adicionales con suscripciones
• Nivel de Complejidad: Medio
• Nivel de exigencia en calidad: Baja
• Tiempo de publicación: Horas máximo 1 o 2 días, en revisiones posteriores pueden pedirte
mejorar la aplicación o puede ser removida de la tienda.
53. Abril 2016 Diplomado Dispositivos Móviles 53
Play Store Developer Center
Google Play Store
• 25 USD de por vida
• En Google Play Store de gestionan y publican las aplicaciones
• Se puede enviar versiones Beta a grupos de usuarios
• Nivel de complejidad: Bajo
• Nivel de exigencia en calidad: Baja
• Tiempo de publicación: Horas
55. Abril 2016 Diplomado Dispositivos Móviles 55
Herramientas
Xamarin Studio en MAC o Visual Studio 2015 Update 2 en Windows
Android
• Android SDK y APIs necesarias según soporte que se dese dar
• Dispositivo, Visual Studio Emulator for Android, GenyMotion o Android Player
Windows Phone y Windows
• Windows SDK
• Dispositivo o Emuladores del SDK
iOS
• Xcode
• Dispositivo, Emuladores de Xcode
• Xamarin instalado en el MAC aunque se use Windows
56. Abril 2016 Diplomado Dispositivos Móviles 56
Debug y Release
Android
• No requiere de ninguna consideración para ejecutar en ambos modos.
• Para entregar un APK de prueba se necesita generar un KeyStore
• Solo se pueden publicar paquetes en release
Windows Phone y Windows
• No requiere de ninguna consideración para ejecutar en ambos modos.
• Para generar el appx de prueba se necesita firmar los paquetes con Visual
• Las apps Universales de Windows 10 están aún en Preview
• Para probar paquetes en dispositivos, se debe desbloquear el dispositivo para desarrollo
• Solo se pueden publicar paquetes en release
57. Abril 2016 Diplomado Dispositivos Móviles 57
Debug y Release
iOS
• Requiere cuenta de desarrollador autorizada
• Requiere configurar certificados de desarrollo bajados desde del developer center e
instalados en el KeyChain para Debug o Adhoc / AppStore.
• Se requiere generar el AppId de la aplicación en desarrollo
• Para generar IPA (Paquetes en Adhoc para prueba en dispositivos) se requiere registrar el
equipo en la cuenta de desarrollador y habilitar el dispositivo en el certificado especifico de
desarrollo o distribución
• Solo se pueden publicar paquetes generados en modo AppStore.
58. Abril 2016 Diplomado Dispositivos Móviles 58
APIs por Plataforma
(Mapas y Notificaciones)
59. Abril 2016 Diplomado Dispositivos Móviles 59
APIs para Mapas Nativos
Google
• Los mapas requieren configurar el SHA del Key Store en la consola de
desarrolladores y solicitar las llaves para Debug y para Release para Google
Maps Android API v2
• Las notificaciones requieren configurar una llave para Google Cloud
Messaging for Android
• Consola de desarrolladores: https://code.google.com/apis/console/
60. Abril 2016 Diplomado Dispositivos Móviles 60
APIs para Mapas Nativos
iOS
• Los mapas no requieren nada adicional
• Se requiere habilitar el certificado de Notificaciones Push para el AppId
correspondiente a la app que se esta desarrollando uno para Debug y otro
para Adhoc / AppStore
Windows Phone y Windows
• Los mapas requieren una llave para mapas de Bing >
https://www.bingmapsportal.com/
• Las notificaciones requieren de llaves generadas en los Store para cada una
de las aplicaciones publicadas.
61. Abril 2016 Diplomado Dispositivos Móviles 61
Azure Service Bus
Debido a la complejidad del envió de notificaciones que tiene cada
plataforma existen servicios como el de Azure Service Bus que centraliza los
envíos de notificaciones.
• iOS: Debe configurarse el certificado generado en la máquina donde se está compilando
para publicar.
• Android: Debe configurarse la llave entregada en la consola de desarrolladores
• Windows Phone: debe configurarse la llave entregada en el Windows Phone Store.
63. Abril 2016 Diplomado Dispositivos Móviles 63
SQLite
• SQLite provee una base de datos local por plataforma.
• Esta base de datos es almacenada en el sistema de archivos.
• SQLite está soportada nativamente por iOS y Android pero no en Windows Phone o
Windows. Debe instalarse Sqlite for Windows y Sqlite for Windows Phone
65. Abril 2016 Diplomado Dispositivos Móviles 65
Custom Controls, Renderers y Bindings
66. Abril 2016 Diplomado Dispositivos Móviles 66
Controles Extendidos y Custom Controls
• El comportamiento de los controles puede ser extendido creando clases
que heredan de los controles base y añadiendo Propiedades de
Dependencia, un concepto usado en el desarrollo con XAML que permite
crear propiedades que pueden ser enlazadas con orígenes de datos
(Bindings XAML).
67. Abril 2016 Diplomado Dispositivos Móviles 67
Renderers y Custom Renderers
• Los renderers son clases que provee Xamarin, para acceder a los miembros
nativos de los controles de Forms y alterar así la forma como estos
controles se dibujan. Cada control de Forms tiene su renderer excepto los
Layouts.
• Es posible querer renderizar o presentar un control que aún no ha sido
incluido en Xamarin Forms pero que se desea usar.
• Para esto existe un renderer genérico ViewRenderer a través del cual se
pueden realizar las implementaciones de estos controles.
• Para que estos controles tengan datos que provengan de Bindings debe
asociarse este concepto con el visto previamente Controles Extendidos y
Custom Controls.
68. Abril 2016 Diplomado Dispositivos Móviles 68
Bindings
Xamarin provee de los bindings necesarios para acceder a las APIs base de
cada plataforma desde C#, sin embargo hay empresas de terceros que
proveen controles o funcionalidades que son populares.
La manera de acceder a estas es crear nuestros propios bindings si es que no
existen ya en la tienda de componentes.
Es necesario aprender como se hace esto en cada plataforma en particular.
Android
• http://developer.xamarin.com/guides/android/advanced_topics/java_integ
ration_overview/binding_a_java_library_%28.jar%29/
iOS
• http://developer.xamarin.com/guides/ios/advanced_topics/binding_objecti
ve-c/
69. Abril 2016 Diplomado Dispositivos Móviles 69
Módulo de Xamarin Forms
Parte 3: Introducción a XAML y MVVM
71. Abril 2016 Diplomado Dispositivos Móviles 71
• XAML es un lenguaje declarativo, basado en
XML y pensado para escribir la interface gráfica
de una aplicación de forma textual y ordenada.
• Una característica muy importante de XAML es
que todos los objetos qué definamos en el,
automáticamente son instanciados por el CLR y
creados como objetos accesibles desde código,
sin necesidad de realizar de nuevo la declaración
de los mismos en Code Behind, todo gracias al
mecanismo de las Clases Parciales.
• Su principal objetivo es la separación de
responsabilidades.
¿Qué es XAML?
72. Abril 2016 Diplomado Dispositivos Móviles 72
• Los conceptos que permiten esta separación de responsabilidades en
XAML son en especial los bindings y los comandos, los cuales nos
permiten respectivamente “enlazar” datos y acciones a nuestras vistas.
• Ambos dependen del otro concepto a manejar que se conoce como el
contexto de datos, para el cual se requiere una adecuada comprensión
de los conceptos de orientación a objetos.
• Los convertidores por su parte nos ayudan a trasformar un dato y
mostrar en la vista el resultado de dicha transformación.
XAML
73. Abril 2016 Diplomado Dispositivos Móviles 73
• Es un patrón de diseño creado en 2005 y es una evolución de MVC y MVP
usado especialmente para aplicaciones basadas en XAML.
• La traducción de sus iniciales es Modelo Vista – Vista Modelo.
• Su principal propósito y beneficio está en la separación de responsabilidades
a nivel de la presentación de nuestras aplicaciones.
• Las implementaciones de MVVM son diversas y dependen básicamente de
las necesidades que tenga la aplicación o el desarrollo en sí mismo.
• Existen muchos frameworks disponibles para implementar MVVM en
aplicaciones XAML, su elección es personal y opcional. El framework más
más usado es MVVM Light.
¿Qué es MVVM?
74. Abril 2016 Diplomado Dispositivos Móviles 74
Separación de responsabilidades
UserInterface
AppLogic
General Model-View-ViewModel (MVVM)
75. Abril 2016 Diplomado Dispositivos Móviles 75
MVVM Simple
Model
View
ViewModel
Data Bindings
One way
One time
Two way
Commands
Interfaz de Usuario
Clases que representan las
fuentes de datos
Estructuras que
representan los contextos
de datos de las pantallas y
el que permiten el acceso a
la logica de negocio
76. Abril 2016 Diplomado Dispositivos Móviles 76
Vistas
Aplicaciones de escritorio, web forms
Caja de texto
Etiqueta
Form.cs (Code behind C#)
Form.designer.cs (C#)
Clase
Form
Usar code behind en clases parciales,
es el escenario “típico o más sencillo”
de un desarrollador .NET.
Aplicaciones XAML
Caja de texto
Etiqueta
MainPage.xaml
(Lenguaje declarativo XAML)
MainPage.xaml.cs (Code behind C#)
Clase
MainPage
Nuestra meta para hacer
código portable es usar
code hind al mínimo
posible. En la demo de
hecho cero code behind.
77. Abril 2016 Diplomado Dispositivos Móviles 77
Usando XAML se pueden crear de forma declarativa los
mismos elementos gráficos que se crearían en código
Vistas
<StackLayout>
<TextBox/>
<Button/>
</StackLayout>
StackLayout stackPanel = new StackLayout();
Entry textBox = new Entry();
stackPanel.Children.Add(textBox);
Button button = new Button();
stackPanel.Children.Add(button);
78. Abril 2016 Diplomado Dispositivos Móviles 78
Ambos escenarios permiten acceder a los controles de la pantalla como
miembros de la clase que los contiene es decir
this.txtMensaje.Text = “Hola”;
Y crear event handlers para poner el código relacionado a una interacción
del usuario, por ejemplo el click de un botón
private void Button_Click(object sender, RoutedEventArgs e)
{ //Code }
Sin embargo como ya lo dijimos, está no es la mejor práctica para hacer
código portable y reusable.
Vistas
79. Abril 2016 Diplomado Dispositivos Móviles 79
Bindings y Contextos de datos
Los bindings son textos declarativos que
definen a que propiedad o comando del
contexto de datos está asociado un
atributo de un elemento XAML.
Los contextos de datos, no son más que
instancias de clases.
Como fuente de los bindings también
pueden usarse recursos XAML
declarados a nivel de la App o en algún
diccionario de recursos.
Guardar cambios
Nombre
Editar perfil
Apellido
80. Abril 2016 Diplomado Dispositivos Móviles 80
Entendiendo los bindings de forma simple
12:38
recordar
*****
iniciar sesión
password
soreygarcia
usuario
Text={Binding UserName}
Password={Binding Password}
Command={Binding StartCommand}
BindingContext={Binding Usuario, Source={StaticResource Locator}}
BindingContext > Instancia de una clase, de una Vista Modelo
81. Abril 2016 Diplomado Dispositivos Móviles 81
XAML sin bindings
<StackLayout x:Name="ContentPanel" Grid.Row="1" >
<Label Text="TextBlock"/>
<Entry Height="72" Text="TextBox"/>
<Label Text="TextBlock"/>
<Entry Height="72" Text="TextBox"/>
<Button Content="Button"/>
</StackLayout>
Esta es la declaración XAML de la vista que se presento en la diapositiva
anterior creada en Windows Phone.
82. Abril 2016 Diplomado Dispositivos Móviles 82
XAML con bindings
<StackLayout x:Name="ContentPanel" Grid.Row="1">
<Label Text="TextBlock"/>
<Entry Height="72" Text="{Binding Nombre, Mode=TwoWay}"/>
<Label Text="TextBlock"/>
<TextBox Height="72" Text="{Binding Apellido, Mode=TwoWay}"/>
<Button Content="Button"/>
</StackLayout>
Esta es la declaración XAML usando bindings. Lo que hay que entender de esto es que los
bindings de los Textbox indican que esperamos que el DataContext del StackPanel tengan las
propiedades Nombre y Apellido.
83. Abril 2016 Diplomado Dispositivos Móviles 83
¿De donde van a salir esos datos?
<Grid x:Name="LayoutRoot" Background="Transparent"
BindingContext="{Binding Usuario, Source={StaticResource SampleDataSource}}">
<Grid x:Name="ContentPanel">
<!– Aquí van los demás elementos de nuestra vista -->
</Grid>
</Grid>
Si vemos el contenedor de nuestro StackLayout vemos que tiene asignados dos contextos, uno
en tiempo de diseño y otro en tiempo de ejecución.
El contexto del contenedor interno, espera que el contexto del contenedor más externo tenga
alguna propiedad con el nombre Persona.
84. Abril 2016 Diplomado Dispositivos Móviles 84
Vistas Modelos
Las Vistas Modelos
son las clases que al
instanciarse van a
servir como
contextos de datos a
nuestras vistas.
Aprender a definir las
Vistas Modelo, es
más importante de lo
que parece.
class ViewModels
ClueViewModel
«property»
+ Name(): string
+ Value(): string
BindableBase
MainViewModel
- jsonService: IJsonService
- navigationService: INavigationService
- phoneService: IPhoneService
- randomGen: Random
- LoadPlayers(): void
+ MainViewModel(INavigationService, IPhoneService)
~ SufflePlayers(): void
«property»
+ Players(): ObservableCollection<PlayerViewModel>
+ SelectedPlayer(): PlayerViewModel
BindableBase
PlayerViewModel
- navigationService: INavigationService
- phoneService: IPhoneService
- wasDiscovered: bool
- Discover(): void
- Guess(): void
+ PlayerViewModel(INavigationService, IPhoneService)
«property»
+ Answer(): string
+ Clues(): ObservableCollection<ClueViewModel>
+ DiscoverCommand(): ICommand
+ GuessCommand(): ICommand
+ Id(): int
+ Name(): string
+ ParentViewModel(): MainViewModel
+ Photo(): string
+ WasDiscovered(): bool
http://blog.soreygarcia.me/2013/12/imaginando-los-prototipos-y-las-vistas.html
85. Abril 2016 Diplomado Dispositivos Móviles 85
Comandos
Events
Event
HandlersCommanding
Los comandos se enlazan a las vistas a través de bindings y dependen del
contexto de datos pero están enfocados a ejecutar acciones. Su
implementación se hace usando la interfaz ICommand
86. Abril 2016 Diplomado Dispositivos Móviles 86
Comandos
Esta es la asociación en XAML usando bindings del uso de un comando, como
vemos la vista no tiene idea de cual es la implementación concreta del método,
esta es relativa al contexto que le sea asignado.
<StackLayout x:Name="ContentPanel" Grid.Row="1" >
<Label Text="TextBlock"/>
<Entry Height="72" Text="TextBox"/>
<Label Text="TextBlock"/>
<Entry Height="72" Text="TextBox"/>
<Button Content="Button" Command="{Binding GuardarPerfilCommand}"/>
</StackLayout>
87. Abril 2016 Diplomado Dispositivos Móviles 87
Servicios
Otra buena práctica es no colocar lógica compleja en las vistas modelo, aunque ellas son las
receptoras de los comandos, una práctica simple (en este nivel intermedio) es usar clases que
llamaremos servicios, para ejecutar la lógica particular de la app o del negocio.
88. Abril 2016 Diplomado Dispositivos Móviles 88
http://blog.soreygarcia.me/2014/07/xaml-para-principiantes-fordummies.html
89. Abril 2016 Diplomado Dispositivos Móviles 89
Android iOS
Cross (Xamarin Forms)
PCL (Logic)
Windows
+
C
o
m
p
a
r
t
i
d
o
CalendarService CalendarService CalendarService
Xamarin Forms
NavigationService
MainViewModel
ApiService
DepencyCo
ntaider
ICalendarSer
vice
LocalDataService
DbConnectionService DbConnectionService
IDbConnecti
onService
90. Abril 2016 Diplomado Dispositivos Móviles 90
Pantallas
(XAML)
ViewModels
(Origen de los
datos)
Servicios
InstancelLocator
(Dependency
Injection)
Resources
Framework
MVVM
(MVVM Light,
MVVM Cross,
*
Infrastructure.Commo
n)
ApiService
LocalDataServic
e
SettingsService
NavigationServi
ce
NetworkService
CrossService
DialogService
Models
91. Abril 2016 Diplomado Dispositivos Móviles 91
MVVM Light
Pantallas (XAML)
C
o
n
t
r
o
l
e
s
V
i
e
w
M
o
d
e
l
s
Commands
Bindings
Binding
Name
Property Name
Method Login
S
e
r
v
i
c
i
o
s
Data
Login
Binding
ValidationErrors
[KeyName]
Binding
LoginCommand
StaticResource
ThemeColor
Recursos
(Resource Dictionary)
ViewModelLocator
MainViewModel
Patterns & Practices
ServiceLocator
Arquitectura
Con MVVM Light
Autofac (Contenedor de dependencias)
ServiceLocator
ApiService
LocalDataService
DataTemplates
Colores
Fuentes
92. Abril 2016 Diplomado Dispositivos Móviles 92
Material Recomendado
Foros de Xamarin
BugZilla
VERSION FINAL
https://blogs.msdn.microsoft.com/microsoft_press/2016/03/31/fre
e-ebook-creating-mobile-apps-with-xamarin-forms/
OFFICIAL SITE
https://developer.xamarin.com/
ALGUNOS VIDEOS
https://www.youtube.com/user/soreygarcia
93. Abril 2016 Diplomado Dispositivos Móviles 93
Free 30 Day Trial - xamarin.com/university
Unrivaled Mobile
Development
Training
Live unlimited mobile development training from
mobile experts, in your time-zone, on your
schedule, and as often as you'd like.
94. Abril 2016 Diplomado Dispositivos Móviles 94
¿Preguntas?
Sorey García
soreygarcia@gmail.com | @soreygarcia | blog.soreygarcia.me