Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Taller Xamarin

Taller Xamarin

Esteban Solano Granados

September 12, 2018
Tweet

More Decks by Esteban Solano Granados

Other Decks in Programming

Transcript

  1. • 1 – Lista de asistencia • 2 – Sílabo

    • 3 – Presentación individual Agenda Checklist 1 - 2 - 3 -
  2. Sobre mí Esteban Solano Granados Senior Software Engineer http://stvansolano.github.io/blog [email protected]

    Meetup: http://bit.ly/1PpBGRo •XAML Developer •.Net & C# Specialist •WPF developer -> Xamarin •Xamarin Mobile Certified Developer
  3. • 1 - Introducción al curso • 2 – Sobre

    Xamarin • 3 – Enfoques del desarrollo móvil • 4 – Enfoque Xamarin • 5 - Ejemplos Agenda Agenda
  4. Recursos. ¿Qué traer? Recursos utilizar http://stvansolano.github.io/blog [email protected] •PC / Mac

    (Windows 10 recomendado / MacOS) •Cable USB / Cable iPhone •Teléfono Android (recomendado) •Materiales en GitHub y presentación
  5. Código compartido Código compartido entre plataformas > Meetup: Mobile CR

    Developers http://stvansolano.github.io/blog Twitter: @stvansolano
  6. Enfoque en la experiencia de usuario Enfoque en la experiencia

    de usuario > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
  7. 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
  8. 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
  9. 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.
  10. ✓ 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
  11. ✓ 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
  12. 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
  13. 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
  14. 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?
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. Contenedores de ubicación StackLayout Absolutelayout RelativeLayout Grid ScrollView > Meetup:

    Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano
  21. 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
  22. 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)
  23. 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)
  24. 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)
  25. 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
  26. Hoy día 
 - Afuera > Meetup: Mobile CR Developers

    http://stvansolano.github.io/blog Twitter: @stvansolano
  27. 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
  28. 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
  29. 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
  30. ¿Por qué utilizar REST?
 (II) > Meetup: Mobile CR Developers

    http://stvansolano.github.io/blog Twitter: @stvansolano
  31. ¿Qué es JSON? • JavaScript Object Notation es un formato

    de serialización muy conocido que utiliza pares de nombre/valor en forma jerárquica
  32. 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
  33. 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.
  34. 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)
  35. 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)
  36. 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á)
  37. Instalación de Git y Herramientas Instalación http://stvansolano.github.io/blog [email protected] •Windows, MacOS

    y Linux •https://gitforwindows.org Herramientas •Terminal (CMD) •Visual Studio Code •SourceTree / GitHub for Desktop
  38. Git - DVCS Distributed Version Control System http://stvansolano.github.io/blog [email protected] •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
  39. GitHub como plataforma GitHub http://stvansolano.github.io/blog [email protected] •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.
  40. Terminología Principales términos http://stvansolano.github.io/blog [email protected] •Snapshots •Commit •Repo (Repositorio) •Clon

    (Clone) de un repositorio •Push (subir a un repositorio) •PR = Pull Request •Branches (ramas)
  41. 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 @[email protected]
  42. 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); }
  43. 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
  44. 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
  45. 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
  46. 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
  47. 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); }
  48. 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
  49. 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();
  50. Permisos (Platform) > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano

    Android: WRITE_EXTERNAL_STORAGE READ_EXTERNAL_STORAGE iOS: NSCameraUsageDescription NSPhotoLibraryUsage
  51. 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
  52. Xamarin.
 Plugins > Meetup: Mobile CR Developers http://stvansolano.github.io/blog Twitter: @stvansolano

    • Mapas • Geoubicación • Settings • Connectivity • Muchos más