El documento describe un taller sobre el desarrollo de aplicaciones multiplataforma con Xamarin. En el taller, los participantes crearán una aplicación de películas para Android, iOS, UWP y otras plataformas usando C# y compartiendo código entre plataformas. El taller cubrirá conceptos como la estructura de proyectos, diseño de interfaces, navegación y el acceso a APIs nativas de cada plataforma.

1. “Crearemos una app cross
Platform para Android, iOS,
UWP, Windows, macOS y Linux”
Taller Xamarin
Javier Suárez Ruiz (@jsuarezruiz)
Plain Concepts
@jsuarezruizMAD · NOV 24-25 · 2017

2. Javier Suárez · Taller Xamarin · @jsuarezruiz
Crearemos una aplicación de películas con información real. Veremos conceptos como:
∘ Crear estructura Proyecto.
∘ Estructura de proyectos.
∘ Diseño de vistas.
∘ Navegación.
La aplicación se realizará paso a paso, en diferentes bloques a lo largo de 2h.
A lo largo del taller, iremos resolviendo dudas y preguntas.
También tendremos alguna sorpresa y detalle ;)
El taller

3. Javier Suárez · Taller Xamarin · @jsuarezruiz
La App

4. Javier Suárez · Taller Xamarin · @jsuarezruiz
La App

5. Javier Suárez · Taller Xamarin · @jsuarezruiz
No dudéis en preguntar!

6. Javier Suárez · Taller Xamarin · @jsuarezruiz
Por si alguien, no tiene material:
https://goo.gl/EJSCX7

7. Javier Suárez · Taller Xamarin · @jsuarezruiz
Primero, repasemos
conceptos básicos

8. Javier Suárez · Taller Xamarin · @jsuarezruiz
Xamarin – Solución completa para el Desarrollo móvil

9. Javier Suárez · Taller Xamarin · @jsuarezruiz
Código nativo
iOS WindowsAndroid
Objective-C
Xcode
C#
Visual Studio
Java
Android Studio
No se comparte código • Diferentes lenguajes & entornos de desarrollo • Diferentes equipos

10. Javier Suárez · Taller Xamarin · @jsuarezruiz
Escribe una vez, corre en todos
App Generator
Lua
Javascript
Actionscript
HTML+CSS
Acceso limitado a APIs • Menos rendimiento • Experiencia de usuario más pobre

11. Javier Suárez · Taller Xamarin · @jsuarezruiz
El enfoque de Xamarin
Código común compartido • Acceso 100% a APIs nativas • Alto rendimiento
iOS C# UI Windows C# UIAndroid C# UI
Shared C# Mobile

12. Javier Suárez · Taller Xamarin · @jsuarezruiz
Xamarin + Xamarin.Forms
Enfoque tradicional Con Xamarin.Forms:
Más código compartido, nativo
iOS C# UI Windows C# UIAndroid C# UI
Shared C# Backend
Shared UI Code
Shared C# Backend

13. Javier Suárez · Taller Xamarin · @jsuarezruiz
El enfoque de Xamarin
Código común compartido • Acceso 100% a APIs nativas • Alto rendimiento
iOS C# UI Windows C# UIAndroid C# UI
Shared C# Mobile C# Server
Linux/Mono
CoreCLRAzure
Shared C# Client/Server

14. Xamarin ahora gratis e
incluido en Visual Studio

15. Javier Suárez · Taller Xamarin · @jsuarezruiz
#TechSum
Rendimiento nativo
Xamarin.iOS usa la compilación Ahead Of
Time (AOT) para crear un binario ARM
para la Apple’s App Store.
Xamarin.Android toma ventaja de la
compilación Just In Time (JIT) en
dispositivos Android.

16. Javier Suárez · Taller Xamarin · @jsuarezruiz
Open Source – open.xamarin.com

17. Javier Suárez · Taller Xamarin · @jsuarezruiz
C# mola
Y lo
sabes!

18. Javier Suárez · Taller Xamarin · @jsuarezruiz
C# mola

19. Javier Suárez · Taller Xamarin · @jsuarezruiz
¿CómofuncionaesXamarin?

20. Javier Suárez · Taller Xamarin · @jsuarezruiz
Windows APIs
Microsoft.Phone Microsoft.Networking Windows.Storage Windows.Foundation Microsoft.Devices
System.Data System.Windows System.Numerics System.Core
System.ServiceMode
l
System.Net System System.IO System.Linq System.Xml

21. Javier Suárez · Taller Xamarin · @jsuarezruiz
iOS – Acceso al 100% de las APIs
MapKit UIKit iBeacon CoreGraphics CoreMotion
System.Data System.Windows System.Numerics System.Core
System.ServiceMode
l
System.Net System System.IO System.Linq System.Xml

22. Javier Suárez · Taller Xamarin · @jsuarezruiz
Android – Acceso al 100%de las APIs
Text-to-speech ActionBar Printing Framework Renderscript NFC
System.Data System.Windows System.Numerics System.Core
System.ServiceMode
l
System.Net System System.IO System.Linq System.Xml

23. Javier Suárez · Taller Xamarin · @jsuarezruiz
Cualquier cosa que puedas hacer con Objective-C, Swift, o Java
se puede hacer con C# y Visual Studio con Xamarin.

24. Javier Suárez · Taller Xamarin · @jsuarezruiz
Laclave,compartir
código

25. Javier Suárez · Taller Xamarin · @jsuarezruiz
Xamarin.iOS Xamarin.Android
Portable Class Libraries

26. Javier Suárez · Taller Xamarin · @jsuarezruiz
Conoce Xamarin.Forms

27. Javier Suárez · Taller Xamarin · @jsuarezruiz
Xamarin + Xamarin.Forms
Enfoque tradicional de
Xamarin
Con Xamarin.Forms:
Más código compartido, todo nativo
iOS C# UI Windows C# UIAndroid C# UI
Shared C# Backend
Shared UI Code
Shared C# Backend

28. Javier Suárez · Taller Xamarin · @jsuarezruiz
¿Qué se incluye?
✓ 40+ páginas, layouts, y
controles
(code behind o XAML)
✓ Two-way data binding
✓ Mavegación
✓ API de animaciones
✓ Dependency Service
✓ Messaging Center
Shared C# Backend
Shared UI Code

29. Javier Suárez · Taller Xamarin · @jsuarezruiz
Layouts
Páginas
Stack Absolute Relative Grid ContentView ScrollView Frame
Content MasterDetai
l
Navigatio
n
Tabbed Carousel

30. Javier Suárez · Taller Xamarin · @jsuarezruiz
ActivityIndicator BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picker ProgressBar SearchBar Slider
Stepper TableView TimePicker WebView EntryCell
ImageCell SwitchCell TextCell ViewCell
Controles

31. Javier Suárez · Taller Xamarin · @jsuarezruiz
A practicar: Vistas básicas
XAML Love!

32. Javier Suárez · Taller Xamarin · @jsuarezruiz
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

33. Javier Suárez · Taller Xamarin · @jsuarezruiz
IDE
Lenguaje
Vistas
iOS Android Windows
Phone
Visual Studio Visual Studio Visual Studio
C# C# C#
Storyboard AXML XAML
MVVM MVVM MVVMPatrón diseño

34. Javier Suárez · Taller Xamarin · @jsuarezruiz
View
ViewModel
Model
get/set
Propiedades
Comandos
Notifica
cambios
C#
Models
View
View
ViewModel
ViewModel
Model
Model
Cross Platform

35. Javier Suárez · Taller Xamarin · @jsuarezruiz
• 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.

36. Javier Suárez · Taller Xamarin · @jsuarezruiz
Continuamos: MVVM
Enlace a datos y otros conceptos básicos

37. Javier Suárez · Taller Xamarin · @jsuarezruiz
Peticiones Http -> 100% compartidas
public async Task<TResult> GetAsync<TResult>(string uri)
{
HttpClient httpClient = CreateHttpClient();
HttpResponseMessage response = await httpClient.GetAsync(uri);
await HandleResponse(response);
string serialized = await response.Content.ReadAsStringAsync();
TResult result = await Task.Run(() =>
JsonConvert.DeserializeObject<TResult>(serialized, _serializerSettings));
return result;
}

38. Javier Suárez · Taller Xamarin · @jsuarezruiz
Continuamos: Servicio REST
Acceso a datos

39. Javier Suárez · Taller Xamarin · @jsuarezruiz
La clase NavigationPage
La clase NavigationPage nos permite realizar una navegación
jerárquica hacia delante y hacia atrás.
Implementa una pila (LIFO) para gestionar la navegación.

40. Javier Suárez · Taller Xamarin · @jsuarezruiz
Navegación
Para pasar de una página a otra, la app añadirá (push) una nueva
página en la pila de navegación, pasando a ser la página activa:
Para volver a la página anterior, la aplicación quitará (pop) la página
actual de la pila de navegación convirtiéndose la nueva página en la
activa.

41. Javier Suárez · Taller Xamarin · @jsuarezruiz
Navegar hacia delante
await Navigation.PushAsync (new Page());
Para navegar a una nueva página, utilizamos el método PushAsync
disponible en la propiedad Navigation de la página actual:
Cuando el método PushAsync se ha lanzado:
• La página que lanza el método llama al método OnDisappearing.
• La página a la que se navega, lanza el método OnAppearing.

42. Javier Suárez · Taller Xamarin · @jsuarezruiz
Detalles de una película
Navegación entre páginas

43. Javier Suárez · Taller Xamarin · @jsuarezruiz
Aplicación completa
Repasamos conceptos y conocemos algunos nuevos!

44. Javier Suárez · Taller Xamarin · @jsuarezruiz
P&R
¿Preguntas?

45. Javier Suárez · Taller Xamarin · @jsuarezruiz
Gracias a todos!
Hasta la próxima!