Slides of my presentation about Xamarin Fundamentals for cross-platform mobile app development at Semana Lambda student community event

2. Luis Beltrán
• Investigador/estudiante en Tomas Bata
University in Zlín, República Checa
• Docente en Tecnologico Nacional de
Mexico en Celaya, Mexico
• Microsoft MVP en IA y Tecnologías de
Desarrollador
luis@luisbeltran.mx
@darkicebeam

3. Nuevos retos
Más dispositivos Plataformas emergentes Datos e Inteligencia

4. Enfoque tradicional de desarrollo (SILO)
Tradicionalmente, las aplicaciones tienen bases de código separadas escritas en su
lenguaje nativo, construidas usando herramientas nativas e incorporando
características específicas de plataforma

5. Ventajas
Las aplicaciones tradicionales siguen las
guías de experiencia de usuario de cada
plataforma: estilo de navegación, diseño de
interfaces, configuraciones, etc.
Los usuarios saben qué esperar y cómo
utilizar una app de forma natural.

6. Desventajas
El desarrollo tradicional de apps toma más tiempo, requiere múltiples equipos,
múltiples entornos de desarrollo y no se puede compartir código.

7. Tecnologías cross-platform
“cross-platform”: Tecnología que permite escribir
lógica de negocios y crear interfaces de usuario bajo
un framework de trabajo común para construir
aplicaciones para iOS, Android y posiblemente
Windows.
“Write once, run anywhere”

8. Opciones actuales
Flutter React Native Xamarin

9. Recomendaciones
• Elige la tecnología cross-platform que más se ajuste a tus necesidades, stack, conocimientos,
reutilización de código.
• No elijas cross-platform si el equipo de desarrollo (colaboradores) no tiene los
conocimientos requeridos.
• Entender que cross-platform no es ideal para todos los escenarios.
• Pon atención especial a tu proveedor de servicios.
• Experimenta cada plataforma de primera mano.

10. Consideraciones
Cross-platform NO sustituye el aprendizaje de los patrones de cada plataforma
Cross-platform NO es la solución para todo.
Ciertos aspectos deben seguirse gestionando:
Acceso offline
Permisos
Almacenamiento

11. .NET: La plataforma para construir lo que necesites
Desktop Web Cloud Mobile Gaming IoT AI
.NET

12. Xamarin
Una plataforma de aplicaciones open source de Microsoft para construir apps
iOS, Android, macOS, Windows, watchOS, & tvOS
modernas y de alto rendimiento con .NET.

13. Xamarin.Forms
Un framework mobile para UI
open source de Microsoft para
construir apps iOS, Android & Windows con .NET a partir de
una base única de código compartido.

14. Xamarin + Xamarin.Forms
Xamarin.Forms
Enfoque Tradicional
iOS C# UI Windows C# UI
Android C# UI
Lógica de C# (Shared) Lógica de C# (Shared)
Xamarin.Forms
Base de código compartido • Acceso 100% a APIs nativos • Alto
desempeño

15. Xamarin.iOS
MapKit UIKit SiriKit ARKit CoreML
System.Data System.Windows System.Numerics System.Core System.ServiceModel
System.Net System System.IO System.Linq System.Xml
C#
Todo lo que puedes hacer en Swift y
Objective-C para iOS, lo puedes
programar con Xamarin usando C#
API cubierto al 100% con el beneficio adicional de
las APIs de .NET

16. Xamarin.Android
Fingerprint Bluetooth Picture-in-Picture Geolocation NFC
System.Data System.Windows System.Numerics System.Core System.ServiceModel
System.Net System System.IO System.Linq System.Xml
C#
Todo lo que puedes hacer en Android y
Kotlin para Android, lo puedes
programar con Xamarin usando C#
API cubierto al 100% con el beneficio adicional de
las APIs de .NET

17. APIs de Windows
Windows.Media Windows.Networking Windows.Storage Windows.Foundation Windows.Devices
System.Data System.Windows System.Numerics System.Core System.ServiceModel
System.Net System System.IO System.Linq System.Xml
C#
Las apps de Windows son construidas en
C# usando las APIs nativas

18. Xamarin.Forms
Xamarin.Forms permite compartir todavía más
elementos que en Xamarin Tradicional, dado
que existe una definición de UI común.
Esto significa que puedes construir interfaces
de usuario nativas para Android, iOS y
Windows a partir de una base única de código
compartido.

19. Herramientas
Utilizas Visual Studio (for Windows/Mac), C# + XAML y las bibliotecas de .NET
para construir aplicaciones de Xamarin.

21. Prueba tus aplicaciones:
Emuladores o dispositivos físicos

22. Requisitos de instalación
Xamarin.iOS
• Equipo Mac (o acceso remoto)
• Xcode
• SDK de iOS
Xamarin.Android
• Equipo Windows 10 o Mac
• SDK de Android
Hardware
• 8 GB de RAM (mínimo)
• Soporte a virtualización (en caso de usar emuladores)
• Procesador Core i5 (mínimo)
• Recomendable disco SSD

23. Estructura de una solución Xamarin.Forms

24. Creando la UI de la app
La Interfaz de Usuario (UI) de la aplicación está definida en términos de
páginas (Pages) y vistas (Views).
Views son los controles
de UI con los que el
usuario interactúa
Page representa una pantalla única
que se muestra en la aplicación

25. Xamarin.Forms Pages
Page es una clase abstracta utilizada para definir una pantalla única de
contenido.
Content MasterDetail Navigation Tabbed Carousel

26. Content Page
Muestra un solo
elemento en
pantalla

27. Xamarin.Forms Views
View es la clase base para todos los
controles visuales, con una gran cantidad de
elementos estándar presentes.

28. Xamarin.Forms Views

29. Label
Utiliza un Label para mostrar bloques de texto de solo lectura.

30. Image
Permite mostrar una imagen a partir de un nombre de archivo, ruta
URL, ruta física del dispositivo, recurso embebido o stream.
<Image Source="waterfront.jpg" />

31. Activity Indicator

32. CollectionView
• CollectionView es una vista flexible y eficaz para
presentar listas de datos que tienen especificaciones
de diseño diferentes.
• Un CollectionView se rellena con datos estableciendo
el valor de la propiedad ItemsSource con cualquier
colección que implemente la interfaz IEnumerable.
• La apariencia de cada elemento de la lista se define
asignando un DataTemplate al ItemTemplate.

33. <CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}” Aspect="AspectFill"
HeightRequest="60” WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}” FontAttributes="Bold" />
<Label Grid.Row="1"
Grid.Column="1” Text="{Binding Location}"
FontAttributes="Italic” VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
...
</CollectionView>

34. Acomodando la UI mediante Layouts
• Los Layouts en Xamarin.Forms son contenedores que
permiten dar una estructura a la UI (tamaño y
posición).
• Los Layouts admiten uno o más Views, conocidos como
“hijos”.
• En lugar de especificar posiciones con coordenadas
(pixeles, dips, etc.), utilizas los contenedores de layout
para controlar cómo se posicionan los views con
respecto a los demás.
• Esta estrategia promueve un diseño adaptable, que no
se ve afectado por dimensiones y resoluciones.

36. Grid
Grid es un panel de diseño utilizado para crear renglones y columnas,
donde los elementos se posicionan en celdas (indicando la columna y
renglón específico), además de que pueden abarcar más de una celda
(span).

37. Especifica el
renglón / columna

38. Especifica el span

39. Ejemplo de interfaz de usuario en
Xamarin.Forms

40. Patrones de separación de presentación
Son patrones y reglas utilizadas para ayudar a los desarrolladores a
dividir su código en capas lógicas, diseñadas específicamente para
separar el código de la interfaz de usuario del código de lógica de
negocios.

41. Patrones comunes de separación de
presentación
Elegir un patrón de presentación para tu aplicación depende de los
APIs disponibles para la plataforma de desarrollo y la preferencia
personal del desarrollador.

42. MVVM
MVVM es una variante de MVC que usa una
infraestructura de enlace de datos (data
binding) para conectar los controladores (aquí
llamados ViewModels) a las vistas.
Cada capa únicamente debería tener
conocimiento directo acerca de la capa
debjo de ella.

43. Model
El Modelo representa los datos de aplicación.

44. View
La Vista presenta la información al usuario por medio de una interfaz
específica de plataforma.

45. ViewModel
El ViewModel proporciona una representación centrada en la vista de
los datos a mostrar.
Expone propiedades
enlazables e
implementa
notificaciones en los
cambios de las
propiedades
Por lo general hay un
Model por cada
ViewModel (relación
1:1)

46. Conectando View y ViewModel
Asignamos una instancia de ViewModel en el BindingContext de la
View para conectar las propiedades expuestas por el ViewModel y que
estén disponibles para ser usadas en la View.
<ContentPage ... xmlns:local="clr-
namespace:DemoApp">
<ContentPage.BindingContext>
<local:MainViewModel />
</ContentPage.BindingContext>
...
</ContentPage>

47. Para enlazar una propiedad del ViewModel en la View, utilizamos Data
Binding

48. Demo
https://github.com/icebeam7/Back2LearnApp

50. Registro al evento
https://www.eventbrite.com.mx/e/global-ai-back-together-tickets-175537636797
Global AI Back Together: 19 al 21 de Octubre

51. https://www.eventbrite.com.mx/e/nenufar-ep-3-tickets-175014963467
Nenúfar Ep. 3: 23 de Octubre

52. ¡Gracias por tu atención!
https://forms.office.com/r/dLcedct6LD
¿Cómo estuvo mi presentación?
Luis Beltrán
about.me/luis-beltran