Xamarin Dev Days Madrid - Taller Xamarin
-
Upload
javier-suarez-ruiz -
Category
Technology
-
view
1.419 -
download
2
Embed Size (px)
Transcript of Xamarin Dev Days Madrid - Taller Xamarin

Taller XamarinXamarin Dev Days Madrid

Xamarin Dev Days Madrid
¿Qué vamos a ver?Introducción al taller
Repaso a Xamarin
Creación proyecto• Estructura proyecto• MVVM• Primeras pruebas enlace a datos
La interfaz compartida• Páginas, Layouts y controles en Xamarin.Forms• Recursos y estilos• Creando la interfaz básica de nuestra App
Creación de servicios• Conceptos básicos relacionados con servicios• Creación de servicios (navegación y REST)• Usando plugins
Navegación• Conceptos básicos de navegación• Completar la App

Introducción al taller

Xamarin Dev Days Madrid
Crearemos una aplicación meteorológica con información real. Veremos conceptos como:• Crear estructura Proyecto.• Aplicar MVVM.• Diseño de vistas.• Navegación.• Uso de plugins.
La aplicación se realizará paso a paso, en diferentes bloques a lo largo de 2,5h.A lo largo del taller, contaremos con diferentes responsables que se encargarán tanto de hacer la aplicación paso a paso como de resolver dudas.También tendremos alguna sorpresa y detalle ;)
El taller

Xamarin Dev Days Madrid
No dudéis en preguntar!

Introducción a Xamarin

Xamarin Dev Days Madrid
Xamarin – Solución completa para el Desarrollo móvil
Develop Testear Build Distribuir Monitorear

Xamarin Dev Days Madrid
Código nativo
iOS WindowsAndroid
Objective-CXcode
C#Visual Studio
JavaAndroid Studio
No se comparte código • Diferentes lenguajes & entornos de desarrollo • Diferentes equipos

Xamarin Dev Days Madrid
Escribe una vez, corre en todos
App Generator
LuaJavascript
ActionscriptHTML+CSS
Acceso limitado a APIs • Menos rendimiento • Experiencia de usuario más pobre

Xamarin Dev Days Madrid
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

Xamarin Dev Days Madrid
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

Xamarin Dev Days Madrid
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/MonoCoreCLRAzure
Shared C# Client/Server

Xamarin ahora gratis e incluido en Visual
Studio

Xamarin Dev Days Madrid#TechSum
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.

Xamarin Dev Days Madrid
Open Source – open.xamarin.com

Xamarin Dev Days Madrid
Open Source• Xamarin.iOS• Xamarin.Mac• Xamarin.Android• Xamarin.Forms• Bindings & Plugins
• Cómo arrancar• Guías de contribución

Xamarin Dev Days Madrid
C# mola
Y lo sabes!

Xamarin Dev Days Madrid
C# mola
LINQ
XML
Gestión de eventos y delegados

Xamarin Dev Days Madrid
Async/Await
Código más simple, mantenimiento

Xamarin Dev Days Madrid
Android ItemClick, ¿ves diferencias? C# con
XamarinJava
C# & Async con Xamarin

DEMO: Crear proyectoConociendo las plantillas y contenido básico

Xamarin Dev Days Madrid
¿Cómo funciona es Xamarin?

Xamarin Dev Days Madrid
Windows APIs
Microsoft.Phone Microsoft.Networking
Windows.Storage
Windows.Foundation
Microsoft.Devices
System.Data System.Windows
System.Numerics System.Core System.ServiceMod
el
System.Net System System.IO System.Linq System.Xml

Xamarin Dev Days Madrid
iOS – Acceso al 100% de las APIs
MapKit UIKit iBeacon CoreGraphics CoreMotion
System.Data System.Windows
System.Numerics System.Core System.ServiceMod
el
System.Net System System.IO System.Linq System.Xml

Xamarin Dev Days Madrid
Android – Acceso al 100%de las APIs
Text-to-speech ActionBar Printing Framework Renderscript NFC
System.Data System.Windows
System.Numerics System.Core System.ServiceMod
el
System.Net System System.IO System.Linq System.Xml

Xamarin Dev Days Madrid
Cualquier cosa que puedas hacer con Objective-C, Swift, o Java
se puede hacer con C# y Visual Studio con Xamarin.

Xamarin Dev Days Madrid
La clave, compartir código

Xamarin Dev Days Madrid
1 libreríaMúltiples PlatformasIncluidas:Xamarin.iOS y Xamarin.Android
Portable Class Libraries

Xamarin Dev Days Madrid
Estadísticas de código compartido
Mac
iOS
Android
Windows Phone
iCircuit
Touch Draw
86%
14%
72%
28%
70%
30%
61%
39%
88%
12%
76%
24%
90%
10%

Introducción a Xamarin.Forms

Xamarin Dev Days Madrid
Crear UIs nativas para iOS, Android, y Windows
Desde un mismo archivo común, compartido C#.
Conoce Xamarin.Forms

Xamarin Dev Days Madrid
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

Xamarin Dev Days Madrid
¿Qué se incluye?
✓ 40+ páginas, layouts, y controles (code behind o XAML)✓ Two-way data binding✓ Mavegación✓ API de animaciones✓ Dependency Service✓ Messaging Center
Shared C# Backend
Shared UI Code

Xamarin Dev Days Madrid
Layouts
Páginas
Stack Absolute Relative Grid ContentView
ScrollView
Frame
Content MasterDetail
Navigation
Tabbed Carousel

Xamarin Dev Days Madrid
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

Xamarin Dev Days Madrid
El ecosistema Xamarin.Forms

Xamarin Dev Days Madrid
Windows Xamarin.FormsStackPanel StackLayoutTextBox EntryListBox ListViewCheckBox SwitchProgressBar ActivityIndicatorGrid GridLabel LabelButton ButtonImage ImageDate/TimePicker Date/TimePicker
Comparativa de controles

Xamarin Dev Days Madrid
Windows Xamarin.FormsDataContext BindingContext{Binding Property}
{Binding Property}
ItemsSource ItemsSourceItemTemplate ItemTemplateDataTemplate DataTemplate
Comparativa de enlace a datos

Xamarin Dev Days Madrid
Personalización de la plataforma

Xamarin Dev Days Madrid
<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MyApp.MainPage">
<TabbedPage.Children>
<ContentPage Title="Profile" Icon="Profile.png">
<StackLayout Spacing="20" Padding="20"
VerticalOptions="Center">
<Entry Placeholder="Username"
Text="{Binding Username}"/>
<Entry Placeholder="Password"
Text="{Binding Password}"
IsPassword="true"/>
<Button Text="Login" TextColor="White"
BackgroundColor="#77D065"
Command="{Binding LoginCommand}"/>
</StackLayout>
</ContentPage>
<ContentPage Title="Settings" Icon="Settings.png">
<!-- Settings -->
</ContentPage>
</TabbedPage.Children>
</TabbedPage>
UI Nativa desde código compartido

DEMO: Vistas básicasXAML Love!

El patron MVVM

IDE
Lenguaje
Vistas
iOS Android Windows Phone
Xcode Android Studio
Visual Studio
ObjectiveC o Swift
Java C#
Storyboard AXML XAMLMVC MVC MVVMPatrón diseño
Comparativa de plataformas móviles

IDE
LenguajeVistas
iOS Android Windows Phone
Visual Studio
Visual Studio
Visual Studio
C# C# C#
Storyboard AXML XAMLMVVM MVVM MVVM
Patrón diseño
Comparativa de plataformas móviles

View
ViewModel
Model
get/set PropiedadesComandos
Notifica cambios
C#
Models
ViewView
ViewModel
ViewModel
ModelM
odel
Cross Platform
MVVM

• 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.
Pero... ¿Por qué MVVM?

DEMO: MVVMEnlace a datos y otros conceptos básicos

Plugins

Xamarin Dev Days Madrid
Shared C# Backend

Xamarin Dev Days Madrid
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íaGPSLámparaNotificationesSettingsText To Speech
BateríaGPSLámparaNotificationesSettingsText To Speech
BateríaGPSLámparaNotificationesSettingsText To Speech

Xamarin Dev Days Madrid
TextToSpeech
Speak(“Hello World”);
AVSpeechSynthesizer SpeechSynthesizer

Xamarin Dev Days Madrid
PluginsXamarin
Common API
github.com/xamarin/plugins

DEMO: PluginsPosición GPS

Gracias a todos!Hasta la próxima!