Este documento describe un taller sobre el desarrollo de aplicaciones móviles con Xamarin.Forms empleando Machine Learning. El taller mostrará cómo crear la estructura de un proyecto Xamarin, diseñar interfaces de usuario, acceder a código específico de plataforma, realizar peticiones HTTP y más. La aplicación que se construirá podrá tomar fotos y analizarlas con Custom Vision para identificar si contienen perros calientes. El taller resolverá dudas y proporcionará recursos adicionales.

1. Taller Xamarin
Opensouthcode 2018
Málaga / Spain
June 01 - 02, 2018

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. 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

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. No dudéis en preguntar!

7. Por si alguien, no tiene material:
https://goo.gl/nT7qqL
https://goo.gl/Qnt2ME

8. Primero, repasemos
conceptos básicos

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

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. 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. 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. 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. 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. Xamarin ahora gratis e
incluido en Visual Studio

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. Open Source – open.xamarin.com

18. C# mola
Y lo
sabes!

19. C# mola

20. ¿Cómo funciona es
Xamarin?

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. 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. 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. Cualquier cosa que puedas hacer con Objective-C, Swift,
o Java
se puede hacer con C# y Visual Studio con Xamarin.

25. La clave, compartir
código

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. Conoce Xamarin.Forms

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. ¿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. Layouts
Páginas
Stack Absolute Relative Grid ContentView ScrollView Frame
Content MasterDetai
l
Navigatio
n
Tabbed Carousel

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. A practicar: Vistas básicas
XAML Love!

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. 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. View
ViewModel
Model
get/set
Propiedades
Comandos
Notifica
cambios
C#
Models
View
View
ViewModel
ViewModel
Model
Model
Cross Platform

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. Continuamos: MVVM
Enlace a datos y otros conceptos básicos

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. 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. 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. Plugins
Xamarin
Common API

42. Continuamos: Plugins
Utiizando Plugin para acceder a la cámara

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. 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

45. 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

46. Detección de objetos

47. Entrenar en el Cloud, correr en cualquier lugar
Entrena en Custom Vision
Service
Despliega y ejecuta donde sea

48. Continuamos: Peticiones Http
Acceso a customvision.ai

49. Aplicación completa

50. Preguntas y respuestas.
¿Dudas?
P&R

51. El gorila
PREGUNTÓN

52. Concurso en el que
sorteamos pequeños regalos
(detalles).
¿En qué consiste?

53. 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

54. ¿Qué lenguaje utilizamos para diseñar las vistas en Xamarin.Forms?
A. XAML B. AXML

55. ¿Cuántos proyectos (por defecto) componen una App Xamarin.Forms?
A. 3 B. 4

56. Xamarin.Forms crea un único binario válido para todas las
plataformas
A. Falso B. Verdadero

57. ¿Vistas nativas?
A. Xamarin.Forms B. Xamarin Classic

58. En Xamarin.Forms para añadir una página
con pestañas…
A.
TabbedPage
B.
MasterDetailPage

59. Se debe llamar a _______________ antes de
usar Xamarin.Forms
A. Forms.Initialize B. Forms.Init

60. ¿Qué patron solemos aplicar en el Desarrollo
de nuestras Apps Xamarin.Forms?
A. MVC B. MVVM

61. 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

62. ¿Qué lenguaje utilizamos para desarrollar la lógica en
Xamarin.Forms?
A. C# B. Varias opciones

63. ¿Todo el código de Xamarin es 100%
compartido?
A. No B. Si

64. ¿Qué control NO existe en Xamarin.Forms?
A. ListView B. ListBox

65. ¿Cómo establecemos el context en
Xamarin.Forms?
A.
BindingContext
B. DataContext

66. ¿Se tiene 100% de acceso a APIs nativas con
Xamarin?
A. No! B. Si!

67. Enhorabuena!
Has sido de los
últimos
superviviente
en pie!

68. Gracias a todos!
Hasta la próxima!