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 Monkey Conf 2018

674 views

Published on

Taller realizado en la Monkey Con 2018. Realizamos una aplicación Xamarin.Forms haciendo uso de Custom Vision para realizar análisis de imágenes.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Taller Xamarin Monkey Conf 2018

  1. 1. Desarrollo de aplicaciones multiplataforma con Xamarin Taller
  2. 2. Sponsors Sin ellos no sería posible el evento!
  3. 3. Software Developer at Microsoft • Blog: http://geeks.ms/blogs/jsuarez • Email: javiersuarezruiz@hotmail.com • Twitter: @jsuarezruiz
  4. 4. 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 2:30h. A lo largo del taller, iremos resolviendo dudas y preguntas. El taller
  5. 5. 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).
  6. 6. No dudéis en preguntar!
  7. 7. Por si alguien, no tiene material: https://goo.gl/nT7qqL https://goo.gl/Qnt2ME
  8. 8. Primero, repasemos conceptos básicos
  9. 9. Xamarin – Solución completa para el Desarrollo móvil
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. Xamarin ahora gratis e incluido en Visual Studio
  16. 16. 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.
  17. 17. Open Source – open.xamarin.com
  18. 18. C# mola Y lo sabes!
  19. 19. C# mola
  20. 20. ¿Cómo funciona es Xamarin?
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. Cualquier cosa que puedas hacer con Objective-C, Swift, o Java se puede hacer con C# y Visual Studio con Xamarin.
  25. 25. La clave, compartir código
  26. 26. 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.
  27. 27. Conoce Xamarin.Forms
  28. 28. 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
  29. 29. ¿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
  30. 30. Layouts Páginas Stack Absolute Relative Grid ContentView ScrollView Frame Content MasterDetai l Navigatio n Tabbed Carousel
  31. 31. 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
  32. 32. A practicar: Vistas básicas XAML Love!
  33. 33. 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
  34. 34. 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
  35. 35. View ViewModel Model get/set Propiedades Comandos Notifica cambios C# Models View View ViewModel ViewModel Model Model Cross Platform
  36. 36. • 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.
  37. 37. Continuamos: MVVM Enlace a datos y otros conceptos básicos
  38. 38. 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
  39. 39. 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.
  40. 40. 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
  41. 41. Plugins Xamarin Common API
  42. 42. Continuamos: Plugins Utiizando Plugin para acceder a la cámara
  43. 43. 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; }
  44. 44. "Tiene botones exquisitos... con mangas largas... es válido para algo casual y para negocios " {f(x) {f(x) Machine Learning “Programando lo inprogramable”
  45. 45. f(x) Modelo { Machine Learning crea un Uso de estos datos Machine Learning “Programando lo inprogramable” Pero necesita un montón de datos de entrenamiento de ejemplo para predecir correctamente...;)
  46. 46. Muchas tareas con Machine Learning! Linear Discriminant Analysis Regresión Redes neuronales (Autoencoders, Self-organizing maps, etc.) ML supervisado (Infers label) ML sin supervisión (Infers structure) Modelado de temas Dimensionality Reduction Redes neuronales (MultiLayer Perception, etc.) Modelado de temas Predicción estructurada Árboles de decisión Naïve Bayes Clasificación binaria Multi-class Classification Clustering Detección de anomalía Latent variable models Regresión lineal Regresión logística k-nearest neighbor Support Vector Machines ( K-means Mixture models Hierarchical clustering)
  47. 47. “Democratizar Machine Learning y AI en general, para los desarrolladores” La meta
  48. 48. 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
  49. 49. 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
  50. 50. Detección de objetos
  51. 51. Entrenar en el Cloud, correr en cualquier lugar Entrena en Custom Vision Service Despliega y ejecuta donde sea
  52. 52. Continuamos: Peticiones Http Acceso a customvision.ai
  53. 53. Aplicación completa
  54. 54. Preguntas y respuestas. ¿Dudas? P&R

×