Taller Xamarin

Xamarin Dev Days Madrid

¿Qué vamos a ver?
Introducción al taller

Repaso a Xamarin

Creación proyecto
• Estructura proyecto
• MVVM
• Primeras pruebas enlace a datos

La interfaz compartida
• Páginas, Layouts y controles en Xamarin.Forms
• Recursos y estilos
• Creando la interfaz básica de nuestra App

Creación de servicios
• Conceptos básicos relacionados con servicios
• Creación de servicios (navegación y REST)
• Usando plugins

Navegación
• Conceptos básicos de navegación
• Completar la App
Xamarin Dev Days Madrid
Introducción al taller
El taller
Crearemos una aplicación meteorológica con información real. Veremos conceptos
como:
• Crear estructura Proyecto.
• Aplicar MVVM.
• Diseño de vistas.
• Navegación.
• Uso de plugins.

La aplicación se realizará paso a paso, en diferentes bloques a lo largo de 2,5h.

A lo largo del taller, contaremos con diferentes responsables que se encargarán

tanto de hacer la aplicación paso a paso como de resolver dudas.

También tendremos alguna sorpresa y detalle ;)

Xamarin Dev Days Madrid

No dudéis en preguntar!

Xamarin Dev Days Madrid

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

Develop Testear Build Distribuir Monitorear

Xamarin Dev Days Madrid

 Código nativo

iOS Android Windows

Objective-C Java C#
Xcode Android Studio Visual Studio

No se comparte código • Diferentes lenguajes & entornos de desarrollo • Diferentes

equipos
Xamarin Dev Days Madrid
Escribe una vez, corre en todos

Lua
Javascript
Actionscript
App Generator
HTML+CSS

Acceso limitado a APIs • Menos rendimiento • Experiencia de usuario más pobre

Xamarin Dev Days Madrid
 El enfoque de Xamarin

iOS C# UI Android C# UI Windows C# UI

Shared C# Mobile

Código común compartido • Acceso 100% a APIs nativas • Alto rendimiento

Xamarin Dev Days Madrid
Xamarin + Xamarin.Forms

iOS C# UI Android C# UI Windows C# UI

Shared UI Code

Shared C# Backend
Shared C# Backend

Enfoque tradicional Con Xamarin.Forms:

Más código compartido, nativo

Xamarin Dev Days Madrid

 El enfoque de Xamarin

Linux/Mono
iOS C# UI Android C# UI Windows C# UI Azure CoreCLR

Shared C# Mobile C# Server

Shared C# Client/Server

Código común compartido • Acceso 100% a APIs nativas • Alto rendimiento

Xamarin Dev Days Madrid
 Xamarin ahora gratis e
incluido en Visual Studio
Rendimiento nativo

Xamarin.iOS usa la compilación Ahead Xamarin.Android toma ventaja de la

Of Time (AOT) para crear un binario compilación Just In Time (JIT) en
ARM para la Apple’s App Store. dispositivos Android.

#TechSum
Xamarin Dev Days Madrid
Open Source – open.xamarin.com

Xamarin Dev Days Madrid

Open Source
• Xamarin.iOS
• Xamarin.Mac
• Xamarin.Android
• Xamarin.Forms
• Bindings & Plugins

• Cómo arrancar
• Guías de contribución
Xamarin Dev Days Madrid
C# mola

Y lo
sabes!
Xamarin Dev Days Madrid
C# mola

LINQ

XML

Gestión de eventos y
delegados
Xamarin Dev Days Madrid
Async/Await

Código más simple, mantenimiento

Xamarin Dev Days Madrid
Android ItemClick, ¿ves diferencias?
Java C# con Xamarin

C# & Async con Xamarin

Xamarin Dev Days Madrid

DEMO: Crear proyecto
Conociendo las plantillas y
contenido básico
¿Cómo funciona es
Xamarin?

Xamarin Dev Days Madrid

Windows APIs

Microsoft.Phone Microsoft.Networking Windows.Storage Windows.Foundation Microsoft.Devices

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

System.Data System.Windows System.Numerics System.Core System.ServiceModel

Xamarin Dev Days Madrid

iOS – Acceso al 100% de las
APIs
MapKit UIKit iBeacon CoreGraphics CoreMotion

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

System.Data System.Windows System.Numerics System.Core System.ServiceModel

Xamarin Dev Days Madrid

Android – Acceso al 100%de las
APIs
Text-to-speech ActionBar Printing Framework Renderscript NFC

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

System.Data System.Windows System.Numerics System.Core System.ServiceModel

Xamarin Dev Days Madrid

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

Xamarin Dev Days Madrid

La clave, compartir
código

Xamarin Dev Days Madrid

Portable Class Libraries

1 librería
Múltiples Platformas
Incluidas:
Xamarin.iOS y Xamarin.Android

Xamarin Dev Days Madrid

 iCircuit Touch Draw

14%
28%

Android
86% 72%

30%
39
Estadísticas
de código
%
iOS 61
70%
%

12%
24%
compartid
Mac
88% 76% o
10%

Windows Phone
90%

Xamarin Dev Days Madrid

Introducción a Xamarin.Forms
 Conoce Xamarin.Forms

Crear UIs nativas para iOS, Android, y Windows

Desde un mismo archivo común, compartido C#.

Xamarin Dev Days Madrid
Xamarin + Xamarin.Forms

iOS C# UI Android C# UI Windows C# UI

Shared UI Code

Shared C# Backend
Shared C# Backend

Enfoque tradicional de Con Xamarin.Forms:

Xamarin Más código compartido,
todo nativo
Xamarin Dev Days Madrid
¿Qué se incluye?

✓ 40+ páginas, layouts, y

controles
(code behind o XAML)
Shared UI Code
✓ Two-way data binding
✓ Mavegación
Shared C# Backend
✓ API de animaciones
✓ Dependency Service
✓ Messaging Center

Xamarin Dev Days Madrid

Página
s Content MasterDetail Navigation Tabbed Carousel

Layou
ts
Stack Absolute Relative Grid ContentView ScrollView Frame

Xamarin Dev Days Madrid

Controles

ActivityIndicator BoxView Button DatePicker Editor

Entry Image Label ListView Map

OpenGLView Picker ProgressBar SearchBar Slider

Stepper TableView TimePicker WebView EntryCell

ImageCell SwitchCell TextCell ViewCell

Xamarin Dev Days Madrid

El ecosistema Xamarin.Forms

Xamarin Dev Days Madrid

Windows Xamarin.Forms
StackPanel StackLayout
TextBox Entry
ListBox ListView
CheckBox Switch Comparativa
ProgressBar ActivityIndicator
de controles
Grid Grid
Label Label
Button Button
Image Image
Date/TimePicker Date/TimePicker
Xamarin Dev Days Madrid
Windows Xamarin.Forms
DataContext BindingContext
{Binding Property} {Binding Property}
ItemsSource ItemsSource Comparativa de
ItemTemplate ItemTemplate enlace a datos
DataTemplate DataTemplate

Xamarin Dev Days Madrid

Personalización
de la
plataforma

Xamarin Dev Days Madrid

UI Nativa desde código compartido
<?xml version="1.0" encoding="UTF-8"?>

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="MyApp.MainPage">

<TabbedPage.Children>

<ContentPage Title="Profile" Icon="Profile.png">

<StackLayout Spacing="20" Padding="20"

VerticalOptions="Center">

<Entry Placeholder="Username"

Text="{Binding Username}"/>

<Entry Placeholder="Password"
Xamarin Dev Days Madrid
DEMO: Vistas básicas
XAML Love!
El patron MVVM
Comparativa de plataformas móviles

iOS Android Windows

Phone
IDE Xcode Android Visual Studio
Studio
ObjectiveC o Java C#
Lenguaje
Swift

Vistas Storyboard AXML XAML

Patrón diseño MVC MVC MVVM
Comparativa de plataformas móviles

iOS Android Windows

Phone
IDE Visual Studio Visual Studio Visual Studio

Lenguaje C# C# C#

Vistas Storyboard AXML XAML

Patrón diseño MVVM MVVM MVVM
MVVM

get/set
Propiedades

ViewModel
Comandos

ViewModel
C#

Model
View

ViewModel

Model
View

Model
View
Models
Notifica cambios

Cross Platform
Pero... ¿Por qué 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.
DEMO: MVVM
Enlace a datos y otros conceptos
básicos
Plugins
Shared C# Backend

Xamarin Dev Days Madrid

 Código
específico de
UI+APIs UI + APIs UI + APIs plataforma
Batería Batería Batería ¿Qué ocurre si
GPS GPS GPS necesitamos accede a
Lámpara Lámpara Lámpara
características
Notificationes Notificationes Notificationes
Settings Settings Settings
específicas de la
Text To Speech Text To Speech Text To Speech
plataforma?

Xamarin Dev Days Madrid

 Speak(“Hello World”);

AVSpeechSynthesizer TextToSpeech SpeechSynthesizer

Xamarin Dev Days Madrid

Plugins github.com/xamarin/plugins

Xamarin

Common API

Xamarin Dev Days Madrid

DEMO: Plugins
Posición GPS
Gracias a todos!
Hasta la próxima!