Xamarin Dev Days Madrid - Taller Xamarin

Taller XamarinXamarin Dev Days Madrid

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

Introducción al 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 ;)

El taller


No dudéis en preguntar!

Introducción a Xamarin


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

Develop Testear Build Distribuir Monitorear


Código nativo

iOS WindowsAndroid

Objective-CXcode

C#Visual Studio

JavaAndroid Studio

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


Escribe una vez, corre en todos

App Generator

LuaJavascript

ActionscriptHTML+CSS

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


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


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


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/MonoCoreCLRAzure

Shared C# Client/Server

Xamarin ahora gratis e incluido en Visual

Studio

Xamarin Dev Days Madrid#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.


Open Source – open.xamarin.com


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

• Cómo arrancar• Guías de contribución


C# mola

Y lo sabes!


C# mola

LINQ

XML

Gestión de eventos y delegados


Async/Await

Código más simple, mantenimiento


Android ItemClick, ¿ves diferencias? C# con

XamarinJava

C# & Async con Xamarin

DEMO: Crear proyectoConociendo las plantillas y contenido básico


¿Cómo funciona es Xamarin?


Windows APIs

Microsoft.Phone Microsoft.Networking

Windows.Storage

Windows.Foundation

Microsoft.Devices

System.Data System.Windows

System.Numerics System.Core System.ServiceMod

el

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


iOS – Acceso al 100% de las APIs

MapKit UIKit iBeacon CoreGraphics CoreMotion



el



Android – Acceso al 100%de las APIs

Text-to-speech ActionBar Printing Framework Renderscript NFC



el



Cualquier cosa que puedas hacer con Objective-C, Swift, o Java

se puede hacer con C# y Visual Studio con Xamarin.


La clave, compartir código


1 libreríaMúltiples PlatformasIncluidas:Xamarin.iOS y Xamarin.Android

Portable Class Libraries


Estadísticas de código compartido

Mac

iOS

Android

Windows Phone

iCircuit

Touch Draw

86%

14%

72%

28%

70%

30%

61%

39%

88%

12%

76%

24%

90%

10%

Introducción a Xamarin.Forms


Crear UIs nativas para iOS, Android, y Windows

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

Conoce Xamarin.Forms


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


¿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


Layouts

Páginas

Stack Absolute Relative Grid ContentView

ScrollView

Frame

Content MasterDetail

Navigation

Tabbed Carousel


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


El ecosistema Xamarin.Forms


Windows Xamarin.FormsStackPanel StackLayoutTextBox EntryListBox ListViewCheckBox SwitchProgressBar ActivityIndicatorGrid GridLabel LabelButton ButtonImage ImageDate/TimePicker Date/TimePicker

Comparativa de controles


Windows Xamarin.FormsDataContext BindingContext{Binding Property}

{Binding Property}

ItemsSource ItemsSourceItemTemplate ItemTemplateDataTemplate DataTemplate

Comparativa de enlace a datos


Personalización de la plataforma

<?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"

Text="{Binding Password}"

IsPassword="true"/>

<Button Text="Login" TextColor="White"

BackgroundColor="#77D065"

Command="{Binding LoginCommand}"/>

</StackLayout>

</ContentPage>

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



</ContentPage>

</TabbedPage.Children>

</TabbedPage>

UI Nativa desde código compartido

DEMO: Vistas básicasXAML Love!

El patron MVVM

IDE

Lenguaje

Vistas

iOS Android Windows Phone

Xcode Android Studio

Visual Studio

ObjectiveC o Swift

Java C#

Storyboard AXML XAMLMVC MVC MVVMPatrón diseño

Comparativa de plataformas móviles

IDE

LenguajeVistas

iOS Android Windows Phone

Visual Studio

Visual Studio

Visual Studio

C# C# C#

Storyboard AXML XAMLMVVM MVVM MVVM

Patrón diseño

Comparativa de plataformas móviles

View

ViewModel

Model

get/set PropiedadesComandos

Notifica cambios

C#

Models

ViewView

ViewModel

ViewModel

ModelM

odel

Cross Platform

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.

Pero... ¿Por qué MVVM?

DEMO: MVVMEnlace a datos y otros conceptos básicos

Plugins


Shared C# Backend


Código específico de plataforma¿Qué ocurre si necesitamos accede a características específicas de la plataforma?

UI+APIs UI + APIsUI + APIs

BateríaGPSLámparaNotificationesSettingsText To Speech




TextToSpeech

Speak(“Hello World”);

AVSpeechSynthesizer SpeechSynthesizer


PluginsXamarin

Common API

github.com/xamarin/plugins

DEMO: PluginsPosición GPS

Gracias a todos!Hasta la próxima!

Xamarin Dev Days Madrid - Taller Xamarin

Technology

Transcript of Xamarin Dev Days Madrid - Taller Xamarin