UNIDAD ACADÉMICA DE CIENCIAS DE LA INGENIERÍA Y APLICADAS

INGENIERÍA EN INFORMÁTICA Y SISTEMAS COMPUTACIONALES

SEGURIDAD INFORMÁTICA

1. DATOS INFORMATIVOS
 Nombre: Solís Jonathan- Monge Brayan -Viera José
 Ciclo: Noveno “A”.
 Fecha: 31 de Enero del 2019

2. TEMA:
 Informe Técnico una aplicación móvil referente a un Álbum de música.
3. OBJETIVO:
Desarrollar una aplicación móvil referente mediante un framework de desarrollo
denominado Xamarin y un gestor de base de datos remoto Sqlite con el objeto de crear
una autenticación y asimilar un álbum de música.
4. INTRODUCCIÓN:
En el presente trabajo se propone crear una manera de autenticación y generar un
álbum de música en una herramienta de desarrollo móvil denominada Xamarin.
Dentro de este contexto se analizará meticulosamente las diferentes clases que
intervendrán en el mismo, así también se pretende simplificar en lo mejor posible
líneas de código, mantener un orden de cada código y fomentar un diseño atractivo
para que el potencial usuario pueda navegar en la aplicación sin ningún tipo de
contratiempos.
Asimismo algo de vital importancia es tener en consideración para este pequeño
aplicativo móvil el Modelo Vista VistaModelo (MVVM) .Y también conocer cuál es
el proceso detalladamente cada uno de los procesos que intervendrán al momento de
generar este aplicativo.
Por otra parte es alto grado de relevancia que el docente pueda generar algún tipo de
documento o videos para poder guiarnos y así generar un aplicativo acorde a todas las
especificaciones solicitadas.
5. DESARROLLO:
CAPÍTULO I
INTRODUCCIÓN A LAS APLICACIONES A UTILIZAR
En primera instancia se expresara un poco de modelo de desarrollo que se esta
utilizando en esta aplicación movil:
 Figura 1:Estrutura del patron MVVM.

MVVM: podemos usarla con múltiples vistas sin tener que modificarla. Por lo tanto los
diseñadores y programadores pueden trabajar en paralelo. Si la información y
comportamiento no cambian, un cambio en la vista no provoca que se tenga que modificar
la capa “ViewModel”. Además, como la capa “ViewModel” es un POJO, es fácil realizar
tests unitarios sobre ella sin ninguna configuración ni entorno especial.

Modelo (Model): Esta capa posee un conjunto de clases que corresponden al dominio de
negocio de la aplicación, dependiendo de los requerimientos funcionales que plantee el
usuario se diseña un diagrama de clases que soporte estas necesidades.

Vista (View): Esta capa posee la presentación visual que se ofrece al usuario, esta
interfaz es la que permite al usuario entregar o recibir información almacenada en el
sistema.

En segudna instancia se puede mencionar a Xamarin “permite crear aplicaciones de iOS,

Android y Windows con grandes cantidades de código compartido, incluido el código UI
o el marcado XAML UI. Las páginas y vistas de la aplicación se asignan a controles
nativos en cada plataforma, pero se pueden personalizar para proporcionar una IU
específica de la plataforma o para acceder a funciones específicas de la plataforma.”[1]

Figura 2:Xamarin reseña general.

Y por ultimo y no menos importante se mencioanra a brave rasgos una base de datos
remota que SQLite.
 Figura 3: Reseña de SQLite.
Menciona que “SQLite es una librería compacta y autocontenida de código abierto y
distribuida bajo dominio público que implementa un gestor de bases de datos SQL
embebido, sin configuración y transaccional.”[2]

“Los usuarios más conocidos que la utilizan actualmente en sus aplicaciones son:
Adobe,Apple, Mozilla, Google, McAfee, Microsoft, Philips, Sun y Toshiba, entre
otros.”[2]
CAPITLO II
CREACIÓN PASO A PASO DE LA APLICACIÓN MOVIL.
En primera instancia se debe explicar como es el proceso de creación de un neuvo
proyecto .

Figura 3: Creacion de un nuevo Proyecto Xamarin.Form.

 Figura 4: Selección de las plataformas a utilizar.
Posterior a la creación de un nuevo proeycto se procedera a crear unas carpetas en las
cuales contendras el modelo, vistas y el modeloVista.

Figura 5: Creación de las respectivas Carpetas.

Procedemos a instalar el paquete para la conexión con sqlite atraves de la
administración de paquetes NuGet.

Figura 6: Instalación del Paquete Nuget sqlite-net-pcl.

Creación de la Clase Usuario que contendra nuestra respectiva tabla User la cual tendra
4 atributos.
Codigo de la creación de la tabla User:

using SQLite;
[Table("tbl_user")]
class Usuario
{
[PrimaryKey, AutoIncrement]
public int Id { get; set; }
[MaxLength(100), Unique]
public string cedula { get; set; }
[MaxLength(100)]
public string nombre { get; set; }
[MaxLength(100)]
public string clave { get; set; }
}
Creación de la clase UsurioModelView la cual contendra los atributos, propiedades,
constructor y las funciones necesarioas para poder registrar el usuario.
Región de Atributos:
#region Atributos
private SQLiteConnection conn;
private static UsuarioModelView instancia;

internal static void Inicializador(object filename)

{
throw new NotImplementedException();
}
#endregion

Región de Propiedades:

#region Propiedades
public string Mensaje;
private string filename;

public UsuarioModelView(string dbPath)

{
conn = new SQLiteConnection(dbPath);
conn.CreateTable<Usuario>();
}

public static UsuarioModelView Instancia

{
get
{
if (instancia == null)
{

throw new Exception("Inicialice el constructor");

}
return instancia;
}
}
#endregion

Región del Constructor :

#region Constructor
public static void Inicializador(String filename)
{
if (instancia != null)
instancia.conn.Close();
if (filename == null)
throw new ArgumentException();

instancia = new UsuarioModelView(filename);

}
#endregion

Región de las Funciones :

#region Funciones
public IEnumerable<Usuario> GetAllUser()
{
try
{
 return conn.Table<Usuario>();
}
catch (Exception e)
{
Mensaje = e.Message;
}

return Enumerable.Empty<Usuario>();
}
public int AddUser(string Cedula, string Nombre, string Clave)
{
int usuario = 0;
try
{
usuario = conn.Insert(new Usuario()
{ cedula = Cedula, nombre = Nombre, clave = Clave });
Mensaje = "Registro ingresado correctamente";
}
catch (Exception e)
{
Mensaje = e.Message;
}
return usuario;
}
#endregion

Posterior a lo anteior mostrado se crearon als vistas tanto para el Inicio del Login ,
Registro de usuario, Album de musica:

Codigo XML de la Vista General del Login:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TrabajoFinal.View.Principal">
<ContentPage.Content>
<ScrollView>
<StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="AUTO"/>
</Grid.RowDefinitions>

<Image Source="img3.jpg" Aspect="AspectFill"/>

<Image Source="unnamed.png" HorizontalOptions="Center" VerticalOptions="End"

WidthRequest="100" HeightRequest="100" TranslationY="50"/>

<Label Text="LOGIN:" TextColor="Black" Font="15" HorizontalOptions="Center"

VerticalOptions="End" TranslationY="80"></Label>
<Entry x:Name="txtUser" TextColor="Black" VerticalOptions="End"
TranslationY="130" HeightRequest="40" Placeholder="Ingrese cedula"></Entry>
<Entry x:Name="txtContrasena" TextColor="Black" VerticalOptions="End"
TranslationY="180" HeightRequest="40" Placeholder="Ingrese clave"></Entry>

<Button x:Name="btnIngresar" Text="Ingresar" BackgroundColor="#00D8FF"

TextColor="White" BorderRadius="20" HorizontalOptions="Center"
VerticalOptions="End" TranslationY="230" HeightRequest="40"
Clicked="BtnIngresar_Clicked"></Button>
<Button x:Name="btnRegresar" Text="Registrar" BackgroundColor="#00D8FF"
TextColor="White" BorderRadius="20" HorizontalOptions="Center"
VerticalOptions="End" TranslationY="280" HeightRequest="40"
Clicked="BtnRegresar_Clicked" ></Button>

</Grid>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
Codigo XML de la Vista del Registro de Usuario:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TrabajoFinal.View.CRUDPage">
<ContentPage.Content>
<ScrollView>
<StackLayout >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="AUTO"/>
<RowDefinition Height="AUTO"/>
</Grid.RowDefinitions>

<Image Source="img2.png" Aspect="AspectFill"/>

<Image Source="persona2.jpg" HorizontalOptions="Center"

VerticalOptions="End"
WidthRequest="100" HeightRequest="100" TranslationY="50"/>

<Label Text="Registrate:" TextColor="Gold" Font="15"

HorizontalOptions="Center" VerticalOptions="End" TranslationY="80"></Label>
<Entry x:Name="txtCedula" VerticalOptions="End" TranslationY="130"
HeightRequest="40" Placeholder="Ingrese cedula"></Entry>
<Entry x:Name="txtNombre" VerticalOptions="End" TranslationY="180"
HeightRequest="40" Placeholder="Ingrese nombre"></Entry>
<Entry x:Name="txtClave" VerticalOptions="End" TranslationY="230"
HeightRequest="40" Placeholder="Ingrese clave"></Entry>
<Button x:Name="btnGuardar" Text="Registrar Fiesta"
BackgroundColor="#00D8FF" TextColor="White" BorderRadius="20" HorizontalOptions="Center"
VerticalOptions="End" TranslationY="270" HeightRequest="40"
Clicked="BtnGuardar_Clicked"></Button>

</Grid>

</StackLayout>

</ScrollView>
</ContentPage.Content>
</ContentPage>
Codigo XML.css de la Vista del Album de Musica:
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using TrabajoFinal.Models_View;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace TrabajoFinal.View
{
public partial class PageAlbun : ContentPage
{
private ObservableCollection<Elementos> elementos { get; set; }

private Elementos _selectedElemetos { get; set; }

private Elementos SelectedElementos

{

get { return _selectedElemetos; }

set
{
 if (_selectedElemetos != value)
{
_selectedElemetos = value;
HandleSelectedItem();
}
}
}

private void HandleSelectedItem()

{
Page page = new Page();
page.DisplayAlert("Selected Item", "Genero: " +
SelectedElementos.Listado, "OK");
}

public PageAlbun()
{

InitializeComponent();
elementos = new ObservableCollection<Elementos>();
elementos.Add(new Elementos
{
Imagen = "m1.jpg",
Genero = "Regeton",
Descripcion = "Es un género musical bailable que se deriva del
reggae y del dancehall"
});
elementos.Add(new Elementos
{
Imagen = "m2.jpg",
Genero = "Electro",
Descripcion = "Es un conjunto de géneros de música electrónica,
como el house, techno, trance, eurodance, hard dance, italo-disco, dance pop,
entre otros"

});
elementos.Add(new Elementos
{
Imagen = "m3.jpg",
Genero = "CHICHA",
Descripcion = "Es un género musical que nació a mediados de los
años setenta en Perú, cuyos orígenes provienen del huayno y la cumbia guarachera
de las costas peruanas"

});
elementos.Add(new Elementos
{
Imagen = "m4.jpg",
Genero = "80 Y 90",
Descripcion = "Es un genero musical de la epoca de ORO donde la
musica Disco era muy popular",
});
elementos.Add(new Elementos
{
Imagen = "m5.jpg",
Genero = "NUEVO",
Descripcion = "Es un género musical que provienen del huayno y la
cumbia guarachera de las costas peruanas",
});
elementos.Add(new Elementos
{
 Imagen = "m6.jpg",
Genero = "Pop",
Descripcion = "Genero musica que se caracteriza por su
estructura sencilla y directa y por la especial importancia que se concede a la
melodí y por la especial "
});
elementos.Add(new Elementos
{
Imagen = "m7.jpg",
Genero = "Pop-Latino",
Descripcion = "El pop latino se refiere generalmente a aquella
música pop que tiene sonidos o influencia latina"

});
elementos.Add(new Elementos
{
Imagen = "m8.jpg",
Genero = "Electropop",
Descripcion = "Género musical con una base de pop, con una línea
de sonido frío y sintético con tintes robóticos y futuristas"

});
elementos.Add(new Elementos
{
Imagen = "m9.jpg",
Genero = "Rock and Roll",
Descripcion = "Es un género musical de ritmo marcado, derivado de
una mezcla de diversos géneros de música folclórica estadounidense",
});
elementos.Add(new Elementos
{
Imagen = "m10.jpg",
Genero = "Rock Alternativo",
Descripcion = "El rock alternativo es un género musical que nació
en los años 80 ",
});
elementos.Add(new Elementos
{
Imagen = "m11.jpg",
Genero = "Metal sinfónico:",
Descripcion = "E El metal sinfónico es un subgénero del heavy
metal que combina las características propias de este género"
});
elementos.Add(new Elementos
{
Imagen = "m12.jpg",
Genero = "Punk",
Descripcion = "Es un género musical dentro del rock. E"

});
elementos.Add(new Elementos
{
Imagen = "m13.jpg",
Genero = "Techno",
Descripcion = " Estilo de música de baile propio de las
discotecas nacido en la década de 1980 y caracterizado por el empleo de
sintetizadores"
});
elementos.Add(new Elementos
{
Imagen = "m14.jpg",
 Genero = "Reggae",
Descripcion = "El reggae es un género musical que se desarrolló
por primera vez en Jamaica.El reggae suele acentuar el segundo y cuarto pulso de
cada compás,y utiliza la guitarra para poner énfasis",
});
elementos.Add(new Elementos
{
Imagen = "m15.jpg",
Genero = "Dance",
Descripcion = "Es un conjunto de géneros de música electrónica,
como el house, trance,etc",
});
elementos.Add(new Elementos
{
Imagen = "m16.jpg",
Genero = "Jazz",
Descripcion = " Estilo musical de carácter principalmente
instrumental, se caracterizan por tener una estructura base de ritmo y acordes "
});
elementos.Add(new Elementos
{
Imagen = "m17.jpg",
Genero = "Flamenco",
Descripcion = ": Género musical de cante y de baile que se
caracteriza por la fusión de elementos musicales andaluces,gitanos y orientales"

});
elementos.Add(new Elementos
{
Imagen = "m18.jpg",
Genero = "Cumbia",
Descripcion = "Composición musical, de ritmo moderado y en compás
de dos por cuatro,con la cual se acompaña este baile"

});
elementos.Add(new Elementos
{
Imagen = "m19.jpg",
Genero = "Rock and Roll",
Descripcion = "Es un género musical de ritmo marcado, derivado de
una mezcla de diversos géneros de música folclórica estadounidense",
});
elementos.Add(new Elementos
{
Imagen = "m13.jpg",
Genero = "Tango",
Descripcion = "Baile de origen rioplatense de movimientos lentos
y diversidad de pasos,ejecutado por una pareja enlazada",
});
listView.ItemsSource = elementos;
}

}
}
Codigo XML de la Vista Album:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TrabajoFinal.View.PageAlbun">
<ContentPage.Content>
 <ScrollView>
<StackLayout>
<Label Text="SELECCIONE UN GENERO MUSICAL" FontSize="20"
HorizontalOptions ="Center" BackgroundColor = "BurlyWood"
TextDecorations="Underline" />

<ListView x:Name="listView" RowHeight="100"

SelectedItem="{Binding SelectedElementos}" >
<ListView.ItemTemplate >
<DataTemplate>
<ViewCell>

<StackLayout Orientation="Horizontal"
HorizontalOptions="Fill" >
<Image Source="{Binding Imagen}"
AbsoluteLayout.LayoutBounds="250.25,0.25,50,50"/>
<StackLayout Orientation="Vertical">
<Label Text="{Binding Genero}"
FontSize="20" AbsoluteLayout.LayoutBounds="20.25,20.25,60,60" ></Label>
<Label Text="{Binding Descripcion}"
FontSize="15" AbsoluteLayout.LayoutBounds="20.25,20.25,60,60"></Label>
</StackLayout>
</StackLayout>

</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>

</ListView>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>

6. CONCLUSIONES:
Se concluye que al utilizar las debidas herramientas que nos proporciona Xamarin se
puede desarrollar unas aplicaciones excelentes de gran rango que permita ejecutar
funciones previas a las que el usuario o cliente ha solicitado.

7. BIBLIOGRAFÍA:
[1] X. Forms, “Xamarin.Forms.”
[2] D. Ponsoda Montiel, “Introducción SQLite,” 2008.