Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Taller Xamarin
Xamarin Dev Days Madrid
Xamarin Dev Days Madrid
¿Qué vamos a ver?
Introducción al taller
Repaso a Xamarin
Creación proyecto
• Estructura proyecto
...
Introducción al taller
Xamarin Dev Days Madrid
Crearemos una aplicación meteorológica con información real. Veremos conceptos
como:
• Crear estru...
Xamarin Dev Days Madrid
No dudéis en preguntar!
Introducción a Xamarin
Xamarin Dev Days Madrid
Xamarin – Solución completa para el Desarrollo móvil
Xamarin Dev Days Madrid
Código nativo
iOS WindowsAndroid
Objective-C
Xcode
C#
Visual Studio
Java
Android Studio
No se comp...
Xamarin Dev Days Madrid
Escribe una vez, corre en todos
App Generator
Lua
Javascript
Actionscript
HTML+CSS
Acceso limitado...
Xamarin Dev Days Madrid
El enfoque de Xamarin
Código común compartido • Acceso 100% a APIs nativas • Alto rendimiento
iOS ...
Xamarin Dev Days Madrid
Xamarin + Xamarin.Forms
Enfoque tradicional Con Xamarin.Forms:
Más código compartido, nativo
iOS C...
Xamarin Dev Days Madrid
El enfoque de Xamarin
Código común compartido • Acceso 100% a APIs nativas • Alto rendimiento
iOS ...
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 binari...
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...
Xamarin Dev Days Madrid
C# mola
Y lo
sabes!
Xamarin Dev Days Madrid
C# mola
Xamarin Dev Days Madrid
Async/Await
Código más simple, mantenimiento
Xamarin Dev Days Madrid
Android ItemClick, ¿ves diferencias?
C# con XamarinJava
C# & Async con Xamarin
DEMO: Crear proyecto
Conociendo las plantillas y
contenido básico
Xamarin Dev Days Madrid
¿Cómo funciona es
Xamarin?
Xamarin Dev Days Madrid
Windows APIs
Microsoft.Phone Microsoft.Networking Windows.Storage Windows.Foundation Microsoft.Dev...
Xamarin Dev Days Madrid
iOS – Acceso al 100% de las
APIs
MapKit UIKit iBeacon CoreGraphics CoreMotion
System.Data System.W...
Xamarin Dev Days Madrid
Android – Acceso al 100%de las
APIs
Text-to-speech ActionBar Printing Framework Renderscript NFC
S...
Xamarin Dev Days Madrid
Cualquier cosa que puedas hacer con Objective-C,
Swift, o Java
se puede hacer con C# y Visual Stud...
Xamarin Dev Days Madrid
La clave, compartir
código
Xamarin Dev Days Madrid
Xamarin.iOS Xamarin.Android
Portable Class Libraries
Xamarin Dev Days Madrid
Estadísticas
de código
compartid
oMac
iOS
Android
Windows Phone
iCircuit Touch Draw
86%
14%
72%
28...
Introducción a Xamarin.Forms
Xamarin Dev Days Madrid
Conoce Xamarin.Forms
Xamarin Dev Days Madrid
Xamarin + Xamarin.Forms
Enfoque tradicional de
Xamarin
Con Xamarin.Forms:
Más código compartido,
t...
Xamarin Dev Days Madrid
¿Qué se incluye?
✓ 40+ páginas, layouts, y
controles
(code behind o XAML)
✓ Two-way data binding
✓...
Xamarin Dev Days Madrid
Layou
ts
Página
s
Stack Absolute Relative Grid ContentView ScrollView Frame
Content MasterDetail N...
Xamarin Dev Days Madrid
ActivityIndicator BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picke...
Xamarin Dev Days Madrid
El ecosistema Xamarin.Forms
Xamarin Dev Days Madrid
Windows Xamarin.Forms
StackPanel StackLayout
TextBox Entry
ListBox ListView
CheckBox Switch
Progre...
Xamarin Dev Days Madrid
Windows Xamarin.Forms
DataContext BindingContext
{Binding Property} {Binding Property}
ItemsSource...
Xamarin Dev Days Madrid
Xamarin Dev Days Madrid
<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
x...
DEMO: Vistas básicas
XAML Love!
El patron MVVM
IDE
Lenguaje
Vistas
iOS Android Windows
Phone
Xcode Android
Studio
Visual Studio
ObjectiveC o
Swift
Java C#
Storyboard AXM...
IDE
Lenguaje
Vistas
iOS Android Windows
Phone
Visual Studio Visual Studio Visual Studio
C# C# C#
Storyboard AXML XAML
MVVM...
View
ViewModel
Model
get/set
Propiedades
Comandos
Notifica cambios
C#
Models
View
View
ViewModel
ViewModel
Model
Model
Cro...
• Mayor facilidad para mantener, extender y
compartir el código.
• Más facilidad a la hora de colaborar.
• Testing.
• Más ...
DEMO: MVVM
Enlace a datos y otros conceptos
básicos
Plugins
Xamarin Dev Days Madrid
Shared C# Backend
Xamarin Dev Days Madrid
Código
específico de
plataforma
¿Qué ocurre si
necesitamos accede a
características
específicas de...
Xamarin Dev Days Madrid
TextToSpeech
Speak(“Hello World”);
AVSpeechSynthesizer SpeechSynthesizer
Xamarin Dev Days Madrid
Plugins
Xamarin
Common API
DEMO: Plugins
Posición GPS
Gracias a todos!
Hasta la próxima!
Upcoming SlideShare
Loading in …5
×

Xamarin Dev Days Madrid - Taller Xamarin

2,712 views

Published on

Taller Xamarin realizado en el Xamarin Dev Days de Madrid

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Xamarin Dev Days Madrid - Taller Xamarin

  1. 1. Taller Xamarin Xamarin Dev Days Madrid
  2. 2. 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
  3. 3. Introducción al taller
  4. 4. Xamarin Dev Days Madrid 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
  5. 5. Xamarin Dev Days Madrid No dudéis en preguntar!
  6. 6. Introducción a Xamarin
  7. 7. Xamarin Dev Days Madrid Xamarin – Solución completa para el Desarrollo móvil
  8. 8. Xamarin Dev Days Madrid 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
  9. 9. Xamarin Dev Days Madrid 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
  10. 10. Xamarin Dev Days Madrid 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
  11. 11. Xamarin Dev Days Madrid 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
  12. 12. Xamarin Dev Days Madrid 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
  13. 13. Xamarin ahora gratis e incluido en Visual Studio
  14. 14. 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.
  15. 15. Xamarin Dev Days Madrid Open Source – open.xamarin.com
  16. 16. Xamarin Dev Days Madrid Open Source • Xamarin.iOS • Xamarin.Mac • Xamarin.Android • Xamarin.Forms • Bindings & Plugins • Cómo arrancar • Guías de contribución
  17. 17. Xamarin Dev Days Madrid C# mola Y lo sabes!
  18. 18. Xamarin Dev Days Madrid C# mola
  19. 19. Xamarin Dev Days Madrid Async/Await Código más simple, mantenimiento
  20. 20. Xamarin Dev Days Madrid Android ItemClick, ¿ves diferencias? C# con XamarinJava C# & Async con Xamarin
  21. 21. DEMO: Crear proyecto Conociendo las plantillas y contenido básico
  22. 22. Xamarin Dev Days Madrid ¿Cómo funciona es Xamarin?
  23. 23. Xamarin Dev Days Madrid Windows APIs Microsoft.Phone Microsoft.Networking Windows.Storage Windows.Foundation Microsoft.Devices System.Data System.Windows System.Numerics System.Core System.ServiceModel System.Net System System.IO System.Linq System.Xml
  24. 24. Xamarin Dev Days Madrid iOS – Acceso al 100% de las APIs MapKit UIKit iBeacon CoreGraphics CoreMotion System.Data System.Windows System.Numerics System.Core System.ServiceModel System.Net System System.IO System.Linq System.Xml
  25. 25. Xamarin Dev Days Madrid Android – Acceso al 100%de las APIs Text-to-speech ActionBar Printing Framework Renderscript NFC System.Data System.Windows System.Numerics System.Core System.ServiceModel System.Net System System.IO System.Linq System.Xml
  26. 26. 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.
  27. 27. Xamarin Dev Days Madrid La clave, compartir código
  28. 28. Xamarin Dev Days Madrid Xamarin.iOS Xamarin.Android Portable Class Libraries
  29. 29. Xamarin Dev Days Madrid Estadísticas de código compartid oMac iOS Android Windows Phone iCircuit Touch Draw 86% 14% 72% 28% 70% 30% 61%39% 88% 12% 76% 24% 90% 10%
  30. 30. Introducción a Xamarin.Forms
  31. 31. Xamarin Dev Days Madrid Conoce Xamarin.Forms
  32. 32. Xamarin Dev Days Madrid 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
  33. 33. Xamarin Dev Days Madrid ¿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
  34. 34. Xamarin Dev Days Madrid Layou ts Página s Stack Absolute Relative Grid ContentView ScrollView Frame Content MasterDetail Navigation Tabbed Carousel
  35. 35. Xamarin Dev Days Madrid 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
  36. 36. Xamarin Dev Days Madrid El ecosistema Xamarin.Forms
  37. 37. Xamarin Dev Days Madrid Windows Xamarin.Forms StackPanel StackLayout TextBox Entry ListBox ListView CheckBox Switch ProgressBar ActivityIndicator Grid Grid Label Label Button Button Image Image Date/TimePicker Date/TimePicker Comparativa de controles
  38. 38. Xamarin Dev Days Madrid Windows Xamarin.Forms DataContext BindingContext {Binding Property} {Binding Property} ItemsSource ItemsSource ItemTemplate ItemTemplate DataTemplate DataTemplate
  39. 39. Xamarin Dev Days Madrid
  40. 40. Xamarin Dev Days Madrid <?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" UI Nativa desde código compartido
  41. 41. DEMO: Vistas básicas XAML Love!
  42. 42. El patron MVVM
  43. 43. 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
  44. 44. 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
  45. 45. View ViewModel Model get/set Propiedades Comandos Notifica cambios C# Models View View ViewModel ViewModel Model Model Cross Platform
  46. 46. • 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.
  47. 47. DEMO: MVVM Enlace a datos y otros conceptos básicos
  48. 48. Plugins
  49. 49. Xamarin Dev Days Madrid Shared C# Backend
  50. 50. Xamarin Dev Days Madrid 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ía GPS Lámpara Notificationes Settings Text To Speech Batería GPS Lámpara Notificationes Settings Text To Speech Batería GPS Lámpara Notificationes Settings Text To Speech
  51. 51. Xamarin Dev Days Madrid TextToSpeech Speak(“Hello World”); AVSpeechSynthesizer SpeechSynthesizer
  52. 52. Xamarin Dev Days Madrid Plugins Xamarin Common API
  53. 53. DEMO: Plugins Posición GPS
  54. 54. Gracias a todos! Hasta la próxima!

×