Microsoft Summit5 y 6 de octubre, 2016

#TechSum

#TechSum

Taller XamarinJavier SuárezJosué YerayMarcos CobeñaRafa Serna

#TechSum

Plain Concepts GO!!! Sorteamos …1 Juego Deus EXSi cazas a 5 Plain speakers

1 Curso desarrollo appsSi cazas a nuestro MVP Javier Suárez

1 Dron con cámaraSi aciertas todas las preguntas del test de nuestro stand http://plainconceptsgo.azurewebsites.net/

En nuestro curso online de:

10% de descuento

www.campusMVP.es

Usa este cupón en campusMVP.es:

xamarindo

Válido hasta el 31 de Diciembre de 2016

#TechSum

¿Qué vamos a ver?Introducción al tallerIntroducción a XamarinCreación proyectoEstructura proyectoMVVMPrimeras pruebas enlace a datos

La interfaz compartidaPáginas, Layouts y controles en Xamarin.FormsRecursos y estilosCreando la interfaz básica de nuestra App

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

NavegaciónConceptos básicos de navegaciónCompletar la App

#TechSum

Introducción al taller

#TechSum

• 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

#TechSum

No dudéis en preguntar!

#TechSum

Introducción a Xamarin

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

Develop Testear Build Distribuir Monitorear

#TechSum

Código nativo

iOS WindowsAndroid

Objective-CXcode

C#Visual Studio

JavaAndroid Studio

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

#TechSum

Escribe una vez, corre en todos

App Generator

LuaJavascript

ActionscriptHTML+CSS

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

#TechSum

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

#TechSum

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

#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

#TechSum

C# mola

Y lo sabes!

#TechSum

C# mola

LINQ

XML

Gestión de eventos y delegados

#TechSum

Async/Await

Código más simple, mantenimiento

#TechSum

Android ItemClick, ¿ves diferencias?C# con Xamarin

Java

C# & Async con Xamarin

#TechSum

DEMO: Crear proyectoConociendo las plantillas y contenido básico

#TechSum

¿Cómo funciona es Xamarin?

#TechSum

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

#TechSum

iOS – Acceso al 100% de las APIs

MapKit UIKit iBeacon CoreGraphics CoreMotion

System.Data System.Windows

System.Numerics System.Core System.ServiceMod

el

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

#TechSum

Android – Acceso al 100%de las APIs

Text-to-speech ActionBar Printing Framework Renderscript NFC

System.Data System.Windows

System.Numerics System.Core System.ServiceMod

el

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

#TechSum

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

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

#TechSum

La clave, compartir código

#TechSum

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

Portable Class Libraries

#TechSum

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%

#TechSum

Introducción a Xamarin.Forms

#TechSum

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

#TechSum

¿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

#TechSum

Layouts

Páginas

Stack Absolute Relative Grid ContentView

ScrollView

Frame

Content MasterDetail

Navigation

Tabbed Carousel

#TechSum

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

#TechSum

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

Comparativa de controles

#TechSum

Windows Xamarin.FormsDataContext BindingContext{Binding Property}

{Binding Property}

ItemsSource ItemsSourceItemTemplate ItemTemplateDataTemplate DataTemplate

Comparativa de enlace a datos

#TechSum

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"> <!-- Settings --></ContentPage></TabbedPage.Children></TabbedPage>

UI Nativa desde código compartido

#TechSum

DEMO: Vistas básicasXAML Love!

#TechSum

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?

#TechSum

DEMO: MVVMEnlace a datos y otros conceptos básicos

#TechSum

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

BateríaGPSLámparaNotificationesSettingsText To Speech

BateríaGPSLámparaNotificationesSettingsText To Speech

TextToSpeech

Speak(“Hello World”);

AVSpeechSynthesizer SpeechSynthesizer

PluginsXamarin

Common API

github.com/xamarin/plugins

#TechSum

DEMO: PluginsPosición GPS

#TechSum

Gracias a todos!

http://aka.ms/MTS02

© 2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.