Taller Xamarin

Material utilizado en talleres de Xamarin

https://github.com/stvansolano/taller-xamarin

http://stvansolano.github.io/blog/

Transcript

1. Desarrollo móvil con Xamarin y C#/.Net
 Desarrollo de apps móviles para iOS/ Android con C#/.Net y Xamarin

2. • 1 – Lista de asistencia • 2 – Sílabo • 3 – Presentación individual Agenda Checklist 1 - 2 - 3 -
3. Sobre mí Esteban Solano Granados Senior Software Engineer http://stvansolano.github.io/blog stvansolano@outlook.com Meetup: http://bit.ly/1PpBGRo •XAML Developer •.Net & C# Specialist •WPF developer -> Xamarin •Xamarin Mobile Certified Developer
4. • 1 - Introducción al curso • 2 – Sobre Xamarin • 3 – Enfoques del desarrollo móvil • 4 – Enfoque Xamarin • 5 - Ejemplos Agenda Agenda
5. Recursos. ¿Qué traer? Recursos utilizar http://stvansolano.github.io/blog stvansolano@outlook.com •PC / Mac (Windows 10 recomendado / MacOS) •Cable USB / Cable iPhone •Teléfono Android (recomendado) •Materiales en GitHub y presentación
6. Código compartido Código compartido entre plataformas > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
7. Enfoque en la experiencia de usuario Enfoque en la experiencia de usuario > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
8. Xamarin – Your Complete Mobile Solution Desarrollar Probar Construir Distribuir Monitorear
9. > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano Creando una app móvil con Xamarin.Forms
10. > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano Creando una app móvil con Xamarin.Forms
11. Más allá del móvil: Full-Stack C# iOS C# UI Windows C# UI Android C# UI C# Compartido (móvil) Servidor C# Linux/Mono CoreCLR Azure Librerías y código C# compartido > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
12. Desarrollo multi-plataforma con C# Sistema Operativo iOS Android WUP (Windows Universal Phone) Mac Generar Compilar Depurar (Emuladores) Dispositivos Reales Generar Compilar Dispositivos Reales - - Windows Generar Compilar Depurar (Mac Agent) Generar Compilar Depurar (Emuladores) Dispositivos Reales Generar Compilar Depurar (Emuladores) Dispositivos Reales Linux - - - - - - - - - > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
13. Xamarin Visual Studio – Mac
14. xamarin.com/testcloud
15. Desempeño nativo Xamarin.iOS – Compilación Ahead Of Time (AOT) para el App Store de Apple. Xamarin.Android – Compilación Just In Time (JIT) en el dispositivo Android.
16. Xamarin
 .Android
17. ✓ Fáciles de instalar ✓ Mac y PC ✓ De terceros * Algunos requieren virtualización Android emulators Emuladores del ADK Genymotion (https://www.genymotion.com/) Visual Studio Emulator for Android Emuladores de Android
18. ✓ Instalar drivers de tu teléfono / ADB Driver ✓ Instalar el Google USB Driver ✓ Habilitar opciones de desarrollador en tu teléfono y permitir depuración USB Recomendaciones Despliegue y depuración de Apps Android en tu dispositivo
19. Recomendaciones
 II USB Drivers http://adbdriver.com
20. Recomendaciones
 III Habilitar opciones de desarrollador •Ajustes -> Dispositivo -> Número de compilación •Hacer tap 7 veces en el Número de compilación •Habilitado! •Opciones de desarrollador •!Depuración USB
21. Enfoques de Xamarin iOS C# UI Windows C# UI Android C# UI Lógica de Negocio Interfaz Gráfica común Lógica de Negocio • Código Fuente C# compartido • 100% acceso a APIs nativos • Alto rendimiento 1. Enfoque tradicional 2. Xamarin Forms
22. Standard Controls Layout Controls Maps Navigation Custom Controls XAML Data Binding Styles + Triggers Framework multi-plataforma para crear aplicaciones con XAML y C# • Android 4.0+ • iOS 6.1+ • Windows Phone 8.x • Windows 10 (UWP) ¿Qué es Xamarin.Forms?
23. Lógica de Negocio Interfaz Gráfica común • Código Fuente C# compartido • 100% acceso a APIs nativos • Alto rendimiento Depende de Compartido Depende de Estructura de una app Xamarin.Forms
24. XAML 101 -
 Introducción a XAML <Label Text="Hello, XAML!" VerticalOptions="Center“ FontAttributes="Bold“ FontSize="Large" TextColor="Aqua" /> XAML = Extensible Application Markup Language (“zammel”) es un lenguaje basado en XML (eXtensible Markup Language) utilizado para representar la parte visual de una aplicación incluyendo texto, botones, cajas de texto entre otros • Es similar a HTML (páginas web) y CSS a nivel de jerarquías y conceptos de elementos en cascada, colores y atributos de ubicación. > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
25. XAML 101 -
 Introducción a XAML (II) • Separar la lógica de interfaz gráfica en 2 o más partes: o Lógica de apariencia o Lógica de comportamiento • Organizar el código o + Entendible o + Mantenible al crecer luego • Separación de roles: o Diseñador (cómo se ve) o Desarrollador (cómo se comporta) • Utilizar bindings, eventos y patrones de diseño o MV* (MVC, MVVM, MVP, entre otros) o Patrón Comando (Command) Beneficios de utilizar XAML > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
26. Conceptos de Interfaz Gráfica Páginas (Page) y Vistas (View) > Meetup: Comunidad Xamarin Costa Rica (.Net Mobile Dev Group) http://stvansolano.github.io/blog Name: OK Las vistas son los controles de interacción del usuario Las páginas representan las pantallas que muestra la aplicación
27. Conceptos de Interfaz Gráfica (II) Derivados de vistas Label Image SearchBar Entry ProgressBar ActivityIndicator Button Slider OpenGLView Editor Stepper WebView DatePicker Switch ListView BoxView TimePicker Frame Picker > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
28. Contenedores de ubicación StackLayout Absolutelayout RelativeLayout Grid ScrollView > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
29. 1. Investigar y elegir una API REST a ser utilizada para el proyecto. Puede crear una propia y consumir sus propios recursos (hosting, base de datos, etc) 2. Asegurarse que no haya algún tipo de limitante por parte de la API para su aplicación (Clases no soportadas, licenciamiento, proxies, etc) 3. De no encontrar ninguna, referirse al profesor y coordinar alguna recomendación. Definición de proyecto > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
30. 4. Realizar despliegues de datos a partir de la API escogida, de manera que la información desplegada en la API web sea consumible por la aplicación móvil. 5. Realizar los despliegues de información a nivel de 3 niveles de profundidad jerárquica de la API Web. 1 => 2 => 3 Paises -> Detalle del País -> Estados, idiomas, etc > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano Definición de proyecto (II)
31. 6. Fecha de entrega: 5 de junio Criterios de evaluación. ✓ Estructura de la aplicación móvil ✓ Conectividad API web ✓ Funcionalidades extra: Almacenamiento local, lógica de negocio, operaciones CRUD, mapas, geolocalización > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano Definición de proyecto (III)
32. Indicaciones de entrega. ✓ Todo el código a utilizar deberá ser entregado como parte del proyecto (API, móvil, assets, etc) ✓ Hospedar en Visual Studio Team Services o GitHub (Agregar al profesor mediante una invitación al correo) ✓ Hospedar proyecto via TFS o Git ✓ Sugerencia: Explorar herramienta y realizar commits/check- ins de acuerdo al avance > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano Definición de proyecto (IV)
33. Queda explícitamente prohibido utilizar las APIs utilizadas durante las lecciones. En caso de desarrollar su API propia, asegurarse de contar con la disponibilidad durante las fechas de revisión y entrega del proyecto. No se aceptan repositorios comprimidos ni por correo electrónico. Entrega del proyecto (V) > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
34. ¿Preguntas? stvansolano@outlook.com Meetup: http://bit.ly/1PpBGRo Escríbeme Twitter: @stvansolano stvansolano@outlook.com Twitter/GitHub: stvansolano
35. Aplicaciones Conectadas > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
36. Antes - Conectado > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
37. Hoy día - Conectado > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
38. Hoy día 
 - Afuera > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
39. Hoy día 
 - Afuera
 (II) > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Conectividad • Poca – nula • Intermitencia • Velocidades: 3G – 4G - LTE • Usuarios impacientes y transitantes • HTTP everywhere
40. REST > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano REST Representational State Transfer Arquitectura para crear aplicaciones distribuidas y modeladas alrededor de la especificación HTTP
41. REST 101 > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano REST está diseñado para tomar ventaja de la arquitectura de la WWW • Operaciones implementadas por verbos HTTP • Utiliza URLs que representan recursos accesibles C = Create=> POST R = Read=> GET U = UPdaTe => PUT D = Delete=> DELETE
42. ¿Por qué utilizar REST?
 (II) > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
43. REST = URLs + Operaciones GET https://www.some_address.com/customers/12345 GET https://www.some_address.com/customers?id=12345 XML / JSON
44. ¿Qué es JSON? • JavaScript Object Notation es un formato de serialización muy conocido que utiliza pares de nombre/valor en forma jerárquica
45. JSON
 .NET > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Librería especializada para la serialización/deserialización de JSON • Se utiliza mayormente para deserializar contenidos (string->Objecto) • Provee código re-utilizable para el manejo de JSON en aplicaciones .Net de todo tipo (DRY – Don’t Repeat Yourself) • Y por supuesto, disponible para Xamarin
46. La clase HttpClient > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Clase propia .Net para comunicación HTTP • Namespace System.Net.Http.HttpClient • Compilable y extendible entre las aplicaciones Android, iOS y WinPhone. • Un único código puede manejar las solicitudes en cada plataforma.
47. Consideraciones & Tips > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano Desarrollando con Xamarin • Habilitar permisos de internet para la aplicación. • http://json2csharp.com: Generar C# desde Json • Precaución: HttpClient implementa IDisposable, por lo que requiere liberar recursos de forma responsable • Utilizar IsBusy/ActivityIndicador para interacciones con el usuario • Utilizar ConfigureAwait(false) para llamadas en segundo plano • GetStringAsync vrs. GetAsync (Codigo de respuesta)
48. Consideraciones & Tips > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano Tips para tu aplicación • Prevenir el estado de la conexión (CrossConnectivity.Current.IsConnected) • Caching para reducir llamadas y agilizar respuestas. • Offline data & sync-up • Mantener la seguridad en mente (tokens) • Segmentar llamadas según las necesidades (Carga, Segundo plano y solicitud de usuario)
49. Estrategias de código compartido > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano Compartir ”X” cantidad de código escrito en una clase y re-utilizarla entre proyectos móvil y otros tipos de proyecto(web, escritorio y más allá)
50. ¿Preguntas? stvansolano@outlook.com Meetup: http://bit.ly/1PpBGRo Escríbeme Twitter: @stvansolano stvansolano@outlook.com Twitter/GitHub: stvansolano
51. Desarrollo móvil con Xamarin y C#/.Net
 Introducción a Git y GitHub para principiantes
52. Instalación de Git y Herramientas Instalación http://stvansolano.github.io/blog stvansolano@outlook.com •Windows, MacOS y Linux •https://gitforwindows.org Herramientas •Terminal (CMD) •Visual Studio Code •SourceTree / GitHub for Desktop
53. Git - DVCS Distributed Version Control System http://stvansolano.github.io/blog stvansolano@outlook.com •2005 – Linus Torvalds -> Padre de Linux •Sistema distribuido para mantener registro de cambios •Cambios? Quién? Cuando? Donde? •Reversión, seguimiento, control de cambios, PRs •Historial
54. GitHub como plataforma GitHub http://stvansolano.github.io/blog stvansolano@outlook.com •2008 – Gratuito y Enterprise •Herramienta “host” de Git más popular del mundo. •Visualización, despliegue y control de Código en línea •Local -> Git -> GitHub <---> Otros sistemas •Integraciones a Ansible, VSTS, Jenkins, DevOps y muchos más.
55. Terminología Principales términos http://stvansolano.github.io/blog stvansolano@outlook.com •Snapshots •Commit •Repo (Repositorio) •Clon (Clone) de un repositorio •Push (subir a un repositorio) •PR = Pull Request •Branches (ramas)
56. Creación de un repositorio git init MiRepositorio Observar un repositorio git status git diff git log Commits git commit -m “Mensaje de commit” Staging y reset git add archivo git reset archivo Ayuda git commando -h Creación de un Branch o rama git branch NuevaRama Cambiar entre ramas git checkout NuevaRama git checkout –b NuevaRama git merge NuevaRama Borrar rama git branch -D NuevaRama Listar ramas git branch -av Hoja de Git Por: Esteban Solano Granados @stvansolano @stvansolano@outlook.com
57. ¿Preguntas? stvansolano@outlook.com Meetup: http://bit.ly/1PpBGRo Escríbeme Twitter: @stvansolano stvansolano@outlook.com Twitter/GitHub: stvansolano
58. Platform Specificics > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Utiliza abstracciones de la lógica que se desea manejar entre plataformas. • El cógido compartido define una interfaz implementable en otros proyectos. • Mediante interfaces podemos separar dependencias e introducir testeabilidad public interface IDialer { bool MakeCall(string number); }
59. Estrategia #1 - 
 File linking > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Uno o varios proyecto contienen un puntero ”acceso directo” al código en otra ubicación para poder ser compilada
60. Estrategia #2- Shared Project > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Los proyectos son enlazados pero NO generan dlls intermedios para referencias • El código se utiliza para generar los binarios finales (iOS, Android, UWP) • Es posible utilizar directivas de compilación para cada plataforma • #if Droid, #if iOS, etc
61. Estrategia #3 - Portable Class Library > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Genera dlls comunes y compartibles entre plataformas (Android, iOS, UWP y más) • No es posible utilizar directivas de compilación • Únicamente soporta ciertos conjuntos soportados de .Net
62. Técnicas de codificación multi- plataforma > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • PCLs (NuGet) • Abstracciones: Interfaces / Clases abstractas • ServiceLocator: Clase que actúa como mediador para interacción con componentes • IoC: Inversion of Control
63. Implementaciones > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Los proyectos de plataforma implementan la lógica específica del sistema operativo móvil • Mediante la interfaz, nuestro código desconoce los detalles específicos y realiza las acciones de manera común public interface IDialer { bool MakeCall(string number); }
64. Xamarin.
 Plugins > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Funcionalidades ”extra” para las aplicaciones • Disponibles como NuGet o paquetes • Algunos requiren permisos/configuración extra http://components.xamarin.com http://developer.xamarin.com
65. Xamarin
 Media 
 Plugin > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • > Nuget (Todos los proyectos) • Tomar fotos, videos • Llamar al Initialize desde el proyecto de Xamarin.Forms (App.xaml.cs) CrossMedia.Current.Initialize();
66. Permisos (Platform) > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano Android: WRITE_EXTERNAL_STORAGE READ_EXTERNAL_STORAGE iOS: NSCameraUsageDescription NSPhotoLibraryUsage
67. Xamarin.
 Plugins > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Funcionalidades ”extra” para las aplicaciones • Disponibles como NuGet o paquetes • Algunos requiren permisos/configuración extra http://components.xamarin.com http://developer.xamarin.com
68. Xamarin.
 Plugins > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano • Mapas • Geoubicación • Settings • Connectivity • Muchos más