CARRERA : INTELIGENCIA ARTIFICIAL VI SEMESTRE

CURSO : DISEÑO Y DESARROLLO DE APLICACIONES MÓVILES II

Instructor Mg. Arturo Huapaya H.

Escuela de Tecnologías de la Información
 Objetivo del curso

Al finalizar el módulo formativo el

aprendiz estará en la capacidad de
desarrollar aplicaciones móviles.

2
Escuela de Tecnologías de la Información www.senati.edu.pe
 Objetivo de la semana 4

El aprendiz será capaz de crear una

aplicación movil en Xamarin.

3
Escuela de Tecnologías de la Información www.senati.edu.pe
 Recordando

4
Escuela de Tecnologías de la Información www.senati.edu.pe
 Veamos el siguiente video

5
Escuela de Tecnologías de la Información www.senati.edu.pe
 ¿Qué es Xamarin?

• Xamarin es una plataforma de código abierto para compilar aplicaciones móviles con
mejor rendimiento para iOS, Android y Windows con .NET.

• Xamarin se ejecuta en un entorno administrado que proporciona ventajas como la

asignación de memoria y la recolección de elementos no utilizados.

• Xamarin permite a los desarrolladores compartir un promedio del 90% de la aplicación

entre plataformas, por lo que permite conseguir un rendimiento y una apariencia nativos
en cada plataforma.

• Las aplicaciones de Xamarin se pueden escribir en PC o Mac, y compilar en paquetes de

aplicación nativos, como un archivo .apk en Android o .ipa en iOS.

6
Escuela de Tecnologías de la Información www.senati.edu.pe
 Arquitectura de una App Xamarin

Xamarin se agrega a .NET, que controla de forma automática tareas como la asignación de memoria, la
recolección de elementos no utilizados y la interoperabilidad con las plataformas subyacentes.

7
Escuela de Tecnologías de la Información www.senati.edu.pe
 Xamarin.Android

• Las aplicaciones Xamarin.Android se compilan desde C# en lenguaje intermedio

(IL) que, después, se compila Just-in-Time (JIT) en un ensamblado nativo
cuando se inicia la aplicación.

• Las aplicaciones Xamarin.Android se ejecutan en el entorno de ejecución Mono,

en paralelo con la máquina virtual en tiempo de ejecución de Android (ART).
Xamarin proporciona enlaces .NET a los espacios de nombres Android.* y
Java.*.

• El entorno de ejecución Mono llama a estos espacios de nombres a través de

contenedores administrados que se pueden llamar (MCW) y proporciona a ART
contenedores que se pueden llamar de Android (ACW) , lo que permite que
ambos entornos invoquen código entre sí.

8
Escuela de Tecnologías de la Información www.senati.edu.pe
 Xamarin.iOS

• Las aplicaciones Xamarin.iOS se compilan Ahead-of-Time

(AOT) de forma completa desde código de C# en código de
ensamblado de ARM nativo.

• Xamarin usa selectores para exponer Objective-C en código de

C# administrado y Registrars para exponer código de C#
administrado en Objective-C.

• Los selectores y Registrars se denominan colectivamente

"enlaces" y permiten la comunicación entre Objective-C y C#.

9
Escuela de Tecnologías de la Información www.senati.edu.pe
 Xamarin.Essentials

• Xamarin.Essentials es una biblioteca que proporciona API

multiplataforma para características de dispositivos nativos
tales como:

• Información del dispositivo

• Sistema de archivos

• Acelerómetro

• Marcador telefónico

• Texto a voz

• GPS

10
Escuela de Tecnologías de la Información www.senati.edu.pe
 Xamarin.Forms

• Es un marco de interfaz de usuario de código abierto que permite compilar aplicaciones Xamarin.iOS, Xamarin.Android y Windows
desde un único código base compartido.

• Permite crear interfaces de usuario en XAML mediante un único lenguaje de programación, en C#. Las interfaces de usuario se
representan como controles nativos con mejor rendimiento en cada plataforma.

11
Escuela de Tecnologías de la Información www.senati.edu.pe
 Xamarin.Forms XAML

• XAML (Lenguaje de marcado de aplicaciones extensible ) es un lenguaje basado en XML creado por Microsoft como una alternativa al código de programación
para crear instancias e inicializar objetos y organizar esos objetos en jerarquías padre-hijo.

• XAML permite definir interfaces de usuario en aplicaciones de Xamarin.Forms mediante marcado en lugar de código.. XAML es muy adecuado para su uso con la
arquitectura de aplicaciones MVVM (Model-View-ViewModel): XAML define la Vista que está vinculada al código de ViewModel a través de enlaces de datos
basados en XAML.

12
Escuela de Tecnologías de la Información www.senati.edu.pe
 Actividad 01

Preparación de la PC para la creación de App con

Xamarin desde Visual Studio.

• Siga los paso de Guía Nro. 1.

• El Trabajo es Individual

• Tiempo: 30 minutos

13
Escuela de Tecnologías de la Información www.senati.edu.pe
 Creación de App básicas con Xamarin

14
Escuela de Tecnologías de la Información www.senati.edu.pe
 Estructura del proyecto móvil con Xamarin

Proyecto Xamarin.Form: Es el proyecto Xamarin form desde

donde desarrollaremos la App con Xamarin.

Proyecto .Android: Genera la estructura nativa de la App para

dispositivos Android..

Proyecto .IOS: Genera la estructura nativa de la App para

dispositivos IOS.

15
Escuela de Tecnologías de la Información www.senati.edu.pe
 Estructura del proyecto Xamarin

1. Dependencias: Se agregan los componentes, plugins o extensiones

(Paquetes NuGet) y referencias necesarias para el proyecto movil.

2. App.xaml: Contine el archivo App.xaml.cs. Es El archivo desde

donde generaremos la configuración de a la App. Se basa en
lenguaje XAML

App.xaml.cs: Es un archivo de código subyacente C# asociado al

archivo XAML Se encargará de gestionar mediante codigo la
inicialización de componentes, conexiones a base de datos,
modificar estados del movil y valores por defectos.

La clase App deriva de la clase Xamarin.Forms.Application.

16
Escuela de Tecnologías de la Información www.senati.edu.pe
 Estructura del proyecto Xamarin

3. MainPage.xaml: Contiene el archivo MainPage.xaml.cs: Es la primera

pagina (Pantalla) de la aplicación

MainPage.xaml.cs: Aquí generaremos las acciones que

ejecutaran los controles de al interfaz.

4. AssemblyInfo.cs: En el archivo AssemblyInfo, los atributos informativos

contienen información sobre el nombre del producto, la descripción, la
marca comercial y el copyright.

17
Escuela de Tecnologías de la Información www.senati.edu.pe
 Examinando MainPage.xaml

La raíz del MainPage.xaml es ContentPage, todo componente que contendrá la pagina debemos crear dentro de esta etiqueta.
Por defecto el archivo MainPage, contiene un layaout (Capa) que permite agrupar los elementos definidos en la interfaz.

18
Escuela de Tecnologías de la Información www.senati.edu.pe
 Elementos de MainPage.xaml

• Una clase de Xamarin.Forms como ContentPage, StackLayout, Frame o

Label se representa en el archivo XAML como un elemento XML.

• Las propiedades de la clase como por ejemplo Text de la clase Label o

BackgroundColor del Frame aparecen como atributos XML.

• Algunas propiedades son tipos de datos básicos como las propiedades

Title y Text que son de tipo String, Rotation es de tipo Double, y la
propiedad IsVisible es de tipo Boolean.

• Otras propiedades como HorizontalTextAlignment, recibe parámetros

establecidos como por ejemplo Center.

19
Escuela de Tecnologías de la Información www.senati.edu.pe
 Actividad 02

Crear la primera App en Xamarin

• Siga los pasos de Guía Nro. 2

• El Trabajo es Individual

• Tiempo: 30 minutos

20
Escuela de Tecnologías de la Información www.senati.edu.pe
 Actividad 03

Crear la primera App en Xamarin

• Siga los pasos de Guía Nro. 3

• El Trabajo es Individual

• Tiempo: 30 minutos

21
Escuela de Tecnologías de la Información www.senati.edu.pe
 Taller 01

Crear una App en Xamarin del tipo informativa mediante

Xamarin.Forms de al menos 6 páginas.

• Debe poder realizar un proceso de navegación de acuerdo

al tipo de App Informativa a ha creado.

• Utilice elementos StackLayout, Label y button.

• El Trabajo es Individual

• Tiempo: 45 minutos

22
Escuela de Tecnologías de la Información www.senati.edu.pe
 MasterDetailPage

23
Escuela de Tecnologías de la Información www.senati.edu.pe
 MasterDetailPage

MasterDetailPage es una página de Xamarin.Forms que muestra una página maestra y una página de detalles y coordina la
sincronización entre ellas. Xamarin.Forms usa esta misma clase para la navegación por cajones y la navegación principal-
detalle.

MasterDetailPage tiene dos propiedades nombradas Mastery Detail que alojan las dos partes lógicas de cada patrón. Estas
propiedades pueden contener Page tipos derivados. En la mayoría de las aplicaciones, usará tipos derivados de ContentPage
para sus páginas maestras y de detalles.

24
Escuela de Tecnologías de la Información www.senati.edu.pe
 Demo MasterDetailPage

25
Escuela de Tecnologías de la Información www.senati.edu.pe
 Taller 02

Crear una App en Xamarin Calculadora IMC mediante MasterDetailPage que

contenga:

• Pagina de Menú:
• Presentación: Inflo sobre el IMC
• Calculadora IMC: Interfaz para generar el IMC de una persona.
• Logout: Cerrar la App

• El Trabajo es Grupal

• Tiempo: 45 minutos

26
Escuela de Tecnologías de la Información www.senati.edu.pe
 Taller 02

Crear una App en Xamarin que Genere .

• Debe poder realizar un proceso de navegación de

acuerdo al tipo de App Informativa a ha creado.

• Utilice elementos StackLayout, Label y button.

• El Trabajo es Individual

• Tiempo: 45 minutos

27
Escuela de Tecnologías de la Información www.senati.edu.pe
 GRACIAS!!

28
Escuela de Tecnologías de la Información www.senati.edu.pe