Este documento presenta una introducción a la arquitectura de aplicaciones móviles multiplataforma con Xamarin. Explica las diferencias en las arquitecturas nativas de iOS, Android y Windows Phone y cómo Xamarin permite el desarrollo multiplataforma con C# y el patrón MVVM. También introduce el framework MVVMCross y cómo permite compartir código entre plataformas mediante Portable Class Libraries, el uso de propiedades, comandos e INotifyPropertyChanged, y la inyección de dependencias.

1. Arquitectura de Apps Xamari
Javier Suárez Ruiz

2. Javier Suárez
Microsoft MVP Windows Platform
Development
• Blog: http://geeks.ms/blogs/jsuarez
• Email: javiersuarezruiz@hotmail.com
• Twitter: @jsuarezruiz

3. ¿Qué vamos a ver?
1.Arquitectura de proyectos móviles en cada
plataforma.
2.El patron MVVM.
3.Introducción a MVVMCross.
4.Utilizando MVVMCross.
5.Preguntas y Respuestas.

4. Comparativa de plataformas móviles. Nativo
IDE
Lenguaje
Vistas
iOS Android Windows
Phone
Xcode Android
Studio
Visual Studio
ObjectiveC o
Swift
Java C#
Storyboard AXML XAML
MVC MVC MVVMPatrón diseño

5. Primer proyecto con Xamarin!

6. Comparativa de plataformas móviles. Nativo
IDE
Lenguaje
Vistas
iOS Android Windows
Phone
Xcode Android
Studio
Visual Studio
ObjectiveC o
Swift
Java C#
Storyboard AXML XAML
MVC MVC MVVMPatrón diseño

7. Comparativa de plataformas móviles. Xamarin
IDE
Lenguaje
Vistas
iOS Android Windows
Phone
Visual Studio Visual Studio Visual Studio
C# C# C#
Storyboard AXML XAML
MVC MVC MVVM
Patrón diseño

8. Comparativa de plataformas móviles. Xamarin
IDE
Lenguaje
Vistas
iOS Android Windows
Phone
Visual Studio Visual Studio Visual Studio
C# C# C#
Storyboard AXML XAML
MVVM MVVM MVVM
Patrón diseño

9. Nuestros objetivos. Buenas prácticas
1. Reutilizar código
2. Utilizar MVVM
3. Utilizar inyección de dependencias para
resolver servicios y viewmodels
4. Dividir responsabilidades, dividir código

10. MVVMView
ViewModel
Model
get/set
Propiedades
Comandos
Notifica cambios
C#
Models
View
View
ViewModel
ViewModel
Model
Model
Cross Platform
Específico de
la Plataforma

11. Pero… ¿Porque MVVM?
Mayor facilidad para mantener, extender y
compartir el código.
Más facilidad a la hora de colaborar.
Testing.
Más fácil de diseñar.

12. MvvmCross
•Cross Platform MVVM Development
Framework
•Gratuito, Open Source
•Soporta
•WP 7, 8, 8.1
•WPF
•WinRT
•Xamarin.Android
•Xamarin.iOS
•Xamarin.Mac
•AKA Mvx

13. Portable Class Library
•1 Librería
•Multiples Platformas
•Incluyendo:
•Xamarin.Android
•Xamarin.iOS

14. Características de una Portable Class Library
•Código compartido centralizado
•Se depura igual que si el código
estuviese en un Proyecto específico.
•Compartir Proyecto/Assembly
•NuGet

15. MVVMCross & PCL
View
ViewModel
Model
Propiedades
Comandos
Notifica cambios
C#
Model
View
View
ViewModel
ViewModel
Model
Model
Cross Platform -PCL
Específico de
Plataforma

16. INotifyPropertyChanged

17. Propriedad típica en la ViewModel

18. Binding OneWay
PersonViewModel
FirstName
LastName
DateOfBirth
First Name
Jon
Last Name
Doe
Date of birth
12/07/1989

19. UI Syntax

20. Two Way Binding
PersonViewModel
FirstName
LastName
DateOfBirth
First Name
Jon
Last Name
Doe
Date of birth
12/07/1989

21. UI Syntax

22. Nuestra primera App
multiplataforma con Xamarin y
MVVM Cross

23. Value Conversion
PersonViewModel
FirstName
LastName
DateOfBirth
First Name
Jon
Last Name
Doe
Age
24
“Age” Conversion

24. IMvxValueConverter

25. AgeValueConverter

26. UI Syntax

27. UI Syntax

28. Trabajando con Converters

29. MyViewModel
Necesita Localización
Necesita SQL
Necesita CalculadoraMy Tax
Calculator
Windows Phone
Location
Inversión de Control
Windows Phone
SQL
El contenedor

30. MyViewModel
Necesita Localización
Necesita SQL
Necesita CalculatorMy Tax
Calculator
iOS Location
Inversión de Control
iOS SQL
El contenedor

31. Mvx.Register<T>
• RegisterSingleton
• Lazy - RegisterSingleton
• RegisterType

32. Registro automático

33. Mvx.Resolve<T>
• Resolve
• CanResolve
• TryResolve

34. Mvx Construction
• Resolución en el constructor
• IoCConstruct

35. Nuestro primer servicio y comenzamos a utilizer
Ioc

36. Acciones (Comandos)
PersonViewModel
FirstName
LastName
DateOfBirth
First Name
Jon
Last Name
Doe
Date of birth
12/07/1989
AddCommand

37. ICommand

38. Typical ViewModel Command

39. UI Syntax

40. Llega el turno de realizar
acciones!

41. Colecciones
PeopleViewModel
Hackers
List<PersonViewModel>
Greg
Jon
Daniel
Cool Hackers
Jon
@redth
Greg
@gshackles
Daniel
@dsplaisted
Tomasz
Tomasz
@cheesebar

42. INotifyCollectionChanged

43. ObservableCollection

44. ViewModel Collection Property

45. UI Syntax

46. UI Syntax

47. UI Syntax

48. UI Syntax

49. Seguimos avanzando,
trabajando con colecciones de
datos y controles listado

50. Navegación
Uso de parámetros
ShowViewModel<DetailViewModel>(new DetailParameters() { Index = 2 });
public void Init(DetailParameters parameters)
{
// use the parameters here
}

51. Go Back

52. Navegación entre páginas

53. Plugins
• Forma rápida y sencilla
de añadir funcionalidad
específica de cada
plataforma.
• Usamos NuGet o
NinjaCoder para
añadirlos.
• Consumimos los plugins
utilizando inyección de
dependencias o Service
Locator.
• Disponibles: Location,
PhoneCall, Email, Sqlite,
etc.

54. Añadiendo y utilizando plugins

55. Preguntas y respuestas.
P&R
¿Dudas?

56. Javier Suárez
Microsoft MVP Windows Platform Development
• Blog: http://geeks.ms/blogs/jsuarez
• Email: javiersuarezruiz@hotmail.com
• Twitter: @jsuarezruiz
GRACIAS

57. Ven a conocer nuestras oficinas:
Avenida de Manoteras 38 – Oficina C311
28050 Madrid
Con Bravent tendrás proyectos cercanos. Conseguirás triunfos globales
Contacta con nosotros:
Llámanos:
91 240 4785
Envíanos un e-mail:
info@bravent.net
bravent@bravent.net
Visita nuestra web:
www.bravent.net
Síguenos en twitter:
@bravent