Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
Taller Xamarin
Opensouthcode 2018
Málaga / Spain
June 01 - 02, 2018
Visual Studio Technologies & Windows
Platform Development MVP
Xamarin MVP
Software Developer at Plain Concepts
• Blog: htt...
Crearemos una aplicación Xamarin.Forms haciendo uso de Machine Learning.Veremos conceptos como:
○ Crear estructura Proyect...
La App
Crearemos una aplicación Xamarin.Forms para
Android, iOS y UWP.
Se podrán tomar fotos accediendo a la cámara o bien...
No dudéis en preguntar!
Por si alguien, no tiene material:
https://goo.gl/nT7qqL
https://goo.gl/Qnt2ME
Primero, repasemos
conceptos básicos
Xamarin – Solución completa para el Desarrollo móvil
Código nativo
iOS WindowsAndroid
Objective-C
Xcode
C#
Visual Studio
Java
Android Studio
No se comparte código • Diferentes...
Escribe una vez, corre en todos
App Generator
Lua
Javascript
Actionscript
HTML+CSS
Acceso limitado a APIs • Menos rendimie...
El enfoque de Xamarin
Código común compartido • Acceso 100% a APIs nativas • Alto rendimiento
iOS C# UI Windows C# UIAndro...
Xamarin + Xamarin.Forms
Enfoque tradicional Con Xamarin.Forms:
Más código compartido, nativo
iOS C# UI Windows C# UIAndroi...
El enfoque de Xamarin
Código común compartido • Acceso 100% a APIs nativas • Alto rendimiento
iOS C# UI Windows C# UIAndro...
Xamarin ahora gratis e
incluido en Visual Studio
Rendimiento nativo
Xamarin.iOS usa la compilación Ahead Of
Time (AOT) para crear un binario ARM
para la Apple’s App Store....
Open Source – open.xamarin.com
C# mola
Y lo
sabes!
C# mola
¿Cómo funciona es
Xamarin?
Windows APIs
Microsoft.Phone Microsoft.Networking Windows.Storage Windows.Foundation Microsoft.Devices
System.Data System....
iOS – Acceso al 100% de las
APIsMapKit UIKit iBeacon CoreGraphics CoreMotion
System.Data System.Windows System.Numerics Sy...
Android – Acceso al 100%de las
APIs
Text-to-speech ActionBar Printing Framework Renderscript NFC
System.Data System.Window...
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
LIBRARIES
INFRASTRUCTURE
.NET STANDARD
.NET Standard
.NET Standard permite
compartir Código, binaries
y conceptos entre cl...
Conoce Xamarin.Forms
Xamarin + Xamarin.Forms
Enfoque tradicional de
Xamarin
Con Xamarin.Forms:
Más código compartido, todo nativo
iOS C# UI Win...
¿Qué se incluye?
✓ 40+ páginas, layouts, y
controles
(code behind o XAML)
✓ Two-way data binding
✓ Navegación
✓ API de ani...
Layouts
Páginas
Stack Absolute Relative Grid ContentView ScrollView Frame
Content MasterDetai
l
Navigatio
n
Tabbed Carousel
ActivityIndicator BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picker ProgressBar SearchBar ...
A practicar: Vistas básicas
XAML Love!
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 ...
Continuamos: MVVM
Enlace a datos y otros conceptos básicos
Código específico
de plataforma
¿Qué ocurre si
necesitamos accede a
características
específicas de la
plataforma?
UI+APIs ...
RAZONES PARA EXTENDER XAMARIN.FORMS
Motivos
• Modificar aspectos de la
UI.
• Aprovechar a fondo las
capacidades que nos
of...
SERVICIOS PERSONALIZADOSDependencyService
Podemos utilizar DependencyService para utilizar servicios específicos
de cada p...
Plugins
Xamarin
Common API
Continuamos: Plugins
Utiizando Plugin para acceder a la cámara
Peticiones Http -> 100% compartidas
public async Task<TResult> GetAsync<TResult>(string uri)
{
HttpClient httpClient = Cre...
Computer Vision
Face
Emotion
Content Moderator
Video Indexer
Custom Vision
Custom Decision
QnA Maker
Language
Understandin...
Vision APIs
Procesa y extra
información de videos
Servicio web personalizable que
aprende a reconocer contenido
específico...
Detección de objetos
Entrenar en el Cloud, correr en cualquier lugar
Entrena en Custom Vision
Service
Despliega y ejecuta donde sea
Continuamos: Peticiones Http
Acceso a customvision.ai
Aplicación completa
Preguntas y respuestas.
¿Dudas?
P&R
El gorila
PREGUNTÓN
Concurso en el que
sorteamos pequeños regalos
(detalles).
¿En qué consiste?
Las reglas son sencillas:
• Todo el mundo de pie.
• Tendremos preguntas con opciones A y B. Si
piensas que la respuesta es...
¿Qué lenguaje utilizamos para diseñar las vistas en Xamarin.Forms?
A. XAML B. AXML
¿Cuántos proyectos (por defecto) componen una App Xamarin.Forms?
A. 3 B. 4
Xamarin.Forms crea un único binario válido para todas las
plataformas
A. Falso B. Verdadero
¿Vistas nativas?
A. Xamarin.Forms B. Xamarin Classic
En Xamarin.Forms para añadir una página
con pestañas…
A.
TabbedPage
B.
MasterDetailPage
Se debe llamar a _______________ antes de
usar Xamarin.Forms
A. Forms.Initialize B. Forms.Init
¿Qué patron solemos aplicar en el Desarrollo
de nuestras Apps Xamarin.Forms?
A. MVC B. MVVM
Para establecer la página a la que se realiza la
navegación inicial debemos llamar a…
A.
Application.Main
Page
B.
Applicat...
¿Qué lenguaje utilizamos para desarrollar la lógica en
Xamarin.Forms?
A. C# B. Varias opciones
¿Todo el código de Xamarin es 100%
compartido?
A. No B. Si
¿Qué control NO existe en Xamarin.Forms?
A. ListView B. ListBox
¿Cómo establecemos el context en
Xamarin.Forms?
A.
BindingContext
B. DataContext
¿Se tiene 100% de acceso a APIs nativas con
Xamarin?
A. No! B. Si!
Enhorabuena!
Has sido de los
últimos
superviviente
en pie!
Gracias a todos!
Hasta la próxima!
OpenSouthCode 2018: Taller Xamarin
Próxima SlideShare
Cargando en…5
×

OpenSouthCode 2018: Taller Xamarin

4.398 visualizaciones

Publicado el

Taller Xamarin realizado en OpenSouthCode 2018

Publicado en: Tecnología
  • Sé el primero en comentar

OpenSouthCode 2018: Taller Xamarin

  1. 1. Taller Xamarin Opensouthcode 2018 Málaga / Spain June 01 - 02, 2018
  2. 2. Visual Studio Technologies & Windows Platform Development MVP Xamarin MVP Software Developer at Plain Concepts • Blog: http://geeks.ms/blogs/jsuarez • Email: javiersuarezruiz@hotmail.com • Twitter: @jsuarezruiz
  3. 3. Crearemos una aplicación Xamarin.Forms haciendo uso de Machine Learning.Veremos conceptos como: ○ Crear estructura Proyecto. ○ Estructura de proyectos. ○ Diseño de vistas. ○ Acceder a Código espécifico de plataforma. ○ Hacer peticiones Http. La aplicación se realizará paso a paso, en diferentes bloques a lo largo de casi 2h. A lo largo del taller, iremos resolviendo dudas y preguntas. También tendremos alguna sorpresa y detalle ;) El taller
  4. 4. La App Crearemos una aplicación Xamarin.Forms para Android, iOS y UWP. Se podrán tomar fotos accediendo a la cámara o bien a la galería. La foto se analizará utilizando Custom Vision para determinar si es un HotDog o no. Se mostrará información adicional con porcentajes en base a datos de Custom Vision (tags, etc).
  5. 5. No dudéis en preguntar!
  6. 6. Por si alguien, no tiene material: https://goo.gl/nT7qqL https://goo.gl/Qnt2ME
  7. 7. Primero, repasemos conceptos básicos
  8. 8. Xamarin – Solución completa para el Desarrollo móvil
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. Xamarin ahora gratis e incluido en Visual Studio
  15. 15. 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.
  16. 16. Open Source – open.xamarin.com
  17. 17. C# mola Y lo sabes!
  18. 18. C# mola
  19. 19. ¿Cómo funciona es Xamarin?
  20. 20. Windows APIs Microsoft.Phone Microsoft.Networking Windows.Storage Windows.Foundation Microsoft.Devices System.Data System.Windows System.Numerics System.Core System.ServiceMode l System.Net System System.IO System.Linq System.Xml
  21. 21. iOS – Acceso al 100% de las APIsMapKit UIKit iBeacon CoreGraphics CoreMotion System.Data System.Windows System.Numerics System.Core System.ServiceMode l System.Net System System.IO System.Linq System.Xml
  22. 22. Android – Acceso al 100%de las APIs Text-to-speech ActionBar Printing Framework Renderscript NFC System.Data System.Windows System.Numerics System.Core System.ServiceMode l System.Net System System.IO System.Linq System.Xml
  23. 23. Cualquier cosa que puedas hacer con Objective-C, Swift, o Java se puede hacer con C# y Visual Studio con Xamarin.
  24. 24. La clave, compartir código
  25. 25. LIBRARIES INFRASTRUCTURE .NET STANDARD .NET Standard .NET Standard permite compartir Código, binaries y conceptos entre clients .NET y servidores. • .NET Standard faclita una específicación para cada plataforma para que la implementación sea similar. • Todos los runtime .NET creados por Microsoft están implmenentando el standard.
  26. 26. Conoce Xamarin.Forms
  27. 27. 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
  28. 28. ¿Qué se incluye? ✓ 40+ páginas, layouts, y controles (code behind o XAML) ✓ Two-way data binding ✓ Navegación ✓ API de animaciones ✓ Dependency Service ✓ Messaging Center Shared C# Backend Shared UI Code
  29. 29. Layouts Páginas Stack Absolute Relative Grid ContentView ScrollView Frame Content MasterDetai l Navigatio n Tabbed Carousel
  30. 30. 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
  31. 31. A practicar: Vistas básicas XAML Love!
  32. 32. 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
  33. 33. 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
  34. 34. View ViewModel Model get/set Propiedades Comandos Notifica cambios C# Models View View ViewModel ViewModel Model Model Cross Platform
  35. 35. • 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.
  36. 36. Continuamos: MVVM Enlace a datos y otros conceptos básicos
  37. 37. 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
  38. 38. RAZONES PARA EXTENDER XAMARIN.FORMS Motivos • Modificar aspectos de la UI. • Aprovechar a fondo las capacidades que nos ofrece cada plataforma. • Cubrir ciertas necesidades con nuevos controles o páginas.
  39. 39. SERVICIOS PERSONALIZADOSDependencyService Podemos utilizar DependencyService para utilizar servicios específicos de cada plataforma Definiremos una interfaz del servicio y luego realizaremos implementaciones del mismo por plataforma ICallService MakeCall(string Phone) Facilitamos una implementación por cada plataforma CallService CallService CallService OpenUrl Intent Uri PhoneCallTask
  40. 40. Plugins Xamarin Common API
  41. 41. Continuamos: Plugins Utiizando Plugin para acceder a la cámara
  42. 42. Peticiones Http -> 100% compartidas public async Task<TResult> GetAsync<TResult>(string uri) { HttpClient httpClient = CreateHttpClient(); HttpResponseMessage response = await httpClient.GetAsync(uri); string serialized = await response.Content.ReadAsStringAsync(); TResult result = await Task.Run(() => JsonConvert.DeserializeObject<TResult>(serialized, _serializerSettings)); return result; }
  43. 43. Computer Vision Face Emotion Content Moderator Video Indexer Custom Vision Custom Decision QnA Maker Language Understanding (LUIS) Text Analytics Bing Spell Check Translator Text Speaker Recognition Bing Speech Custom Speech Translator Speech Speech unified service Bing Autosuggest Bing Search Bing Entity Search Bing Statistics add-in Bing Entity Search Bing Visual Search Bing Custom Search
  44. 44. Vision APIs Procesa y extra información de videos Servicio web personalizable que aprende a reconocer contenido específico en imágenes Moderación asistida de texto e imágenes Distingue entre información de una imagen Detecta, identifica y organiza caras Interpreta imágenes para crear experiencias de búsqueda visual a medida
  45. 45. Detección de objetos
  46. 46. Entrenar en el Cloud, correr en cualquier lugar Entrena en Custom Vision Service Despliega y ejecuta donde sea
  47. 47. Continuamos: Peticiones Http Acceso a customvision.ai
  48. 48. Aplicación completa
  49. 49. Preguntas y respuestas. ¿Dudas? P&R
  50. 50. El gorila PREGUNTÓN
  51. 51. Concurso en el que sorteamos pequeños regalos (detalles). ¿En qué consiste?
  52. 52. Las reglas son sencillas: • Todo el mundo de pie. • Tendremos preguntas con opciones A y B. Si piensas que la respuesta es A levanta las manos, en caso contrario, mantenlas hacia abajo. • Si aciertas continuas, si fallas, te sientas. • Sólo los últimos que se mantengan de pie lograrán los premios. Las reglas
  53. 53. ¿Qué lenguaje utilizamos para diseñar las vistas en Xamarin.Forms? A. XAML B. AXML
  54. 54. ¿Cuántos proyectos (por defecto) componen una App Xamarin.Forms? A. 3 B. 4
  55. 55. Xamarin.Forms crea un único binario válido para todas las plataformas A. Falso B. Verdadero
  56. 56. ¿Vistas nativas? A. Xamarin.Forms B. Xamarin Classic
  57. 57. En Xamarin.Forms para añadir una página con pestañas… A. TabbedPage B. MasterDetailPage
  58. 58. Se debe llamar a _______________ antes de usar Xamarin.Forms A. Forms.Initialize B. Forms.Init
  59. 59. ¿Qué patron solemos aplicar en el Desarrollo de nuestras Apps Xamarin.Forms? A. MVC B. MVVM
  60. 60. Para establecer la página a la que se realiza la navegación inicial debemos llamar a… A. Application.Main Page B. Application.FirstPag e
  61. 61. ¿Qué lenguaje utilizamos para desarrollar la lógica en Xamarin.Forms? A. C# B. Varias opciones
  62. 62. ¿Todo el código de Xamarin es 100% compartido? A. No B. Si
  63. 63. ¿Qué control NO existe en Xamarin.Forms? A. ListView B. ListBox
  64. 64. ¿Cómo establecemos el context en Xamarin.Forms? A. BindingContext B. DataContext
  65. 65. ¿Se tiene 100% de acceso a APIs nativas con Xamarin? A. No! B. Si!
  66. 66. Enhorabuena! Has sido de los últimos superviviente en pie!
  67. 67. Gracias a todos! Hasta la próxima!

×