“Crearemos una app crossPlatform para Android, iOS, UWP, Windows, macOS y Linux”Taller Xamarin

Javier Suárez Ruiz (@jsuarezruiz)Plain Concepts@jsuarezruizMAD · NOV 24-25 · 2017

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

Javier Suárez · Taller Xamarin · @jsuarezruiz

La App

Javier Suárez · Taller Xamarin · @jsuarezruiz

La App

Javier Suárez · Taller Xamarin · @jsuarezruiz

No dudéis en preguntar!

Javier Suárez · Taller Xamarin · @jsuarezruiz

Por si alguien, no tiene material:

https://goo.gl/EJSCX7

Javier Suárez · Taller Xamarin · @jsuarezruiz

Primero, repasemos

conceptos básicos

Javier Suárez · Taller Xamarin · @jsuarezruiz

Xamarin – Solución completa para el Desarrollo móvil

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

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

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

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

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

Xamarin ahora gratis e

incluido en Visual Studio

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.

Javier Suárez · Taller Xamarin · @jsuarezruiz

Open Source – open.xamarin.com

Javier Suárez · Taller Xamarin · @jsuarezruiz

C# mola

Y lo

sabes!

Javier Suárez · Taller Xamarin · @jsuarezruiz

C# mola

Javier Suárez · Taller Xamarin · @jsuarezruiz

¿Cómo funciona es Xamarin?

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.CoreSystem.ServiceMode

l

System.Net System System.IO System.Linq System.Xml

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.CoreSystem.ServiceMode

l

System.Net System System.IO System.Linq System.Xml

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.CoreSystem.ServiceMode

l

System.Net System System.IO System.Linq System.Xml

Javier Suárez · Taller Xamarin · @jsuarezruiz

Cualquier cosa que puedas hacer con Objective-C, Swift, o Javase puede hacer con C# y Visual Studio con Xamarin.

Javier Suárez · Taller Xamarin · @jsuarezruiz

La clave, compartircódigo

Javier Suárez · Taller Xamarin · @jsuarezruiz

Xamarin.iOS Xamarin.Android

Portable Class Libraries

Javier Suárez · Taller Xamarin · @jsuarezruiz

Conoce Xamarin.Forms

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

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

Javier Suárez · Taller Xamarin · @jsuarezruiz

Layouts

Páginas

Stack Absolute Relative Grid ContentView ScrollView Frame

Content MasterDetai

l

Navigatio

n

Tabbed Carousel

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

Javier Suárez · Taller Xamarin · @jsuarezruiz

A practicar: Vistas básicasXAML Love!

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

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

Javier Suárez · Taller Xamarin · @jsuarezruiz

Vie

w

Vie

wM

od

el

Mo

de

l

get/set

Propiedades

Comandos

Notifica

cambios

C#

Models

Vie

wV

iew

Vie

wM

od

el

Vie

wM

od

el

Mo

de

lM

od

el

Cross Platform

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.

Javier Suárez · Taller Xamarin · @jsuarezruiz

Continuamos: MVVMEnlace a datos y otros conceptos básicos

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;}

Javier Suárez · Taller Xamarin · @jsuarezruiz

Continuamos: Servicio RESTAcceso a datos

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.

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.

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 PushAsyncdisponible 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.

Javier Suárez · Taller Xamarin · @jsuarezruiz

Detalles de una películaNavegación entre páginas

Javier Suárez · Taller Xamarin · @jsuarezruiz

Aplicación completaRepasamos conceptos y conocemos algunos nuevos!

Javier Suárez · Taller Xamarin · @jsuarezruiz

P&R¿Preguntas?

Javier Suárez · Taller Xamarin · @jsuarezruiz

Gracias a todos!Hasta la próxima!