Crear una aplicación (sticky notes) en plataforma metro style paso a paso utilizando como almacenamiento una base de datos SQLite.

1. Parte I. NotasRapidas (sticky notes) App
W8: MVVM y SQLite.
Bases para MVVM y SQLite.
Requerimientos
• Windows 8
• Visual Studio 2012
Conociendo de MVVM
Comenzaredando el reconocimiento al creadorde Modelo-Vista-
ViewModel o conocidocomoMVVM Light toolkit Laurent Bugnion. Hoy en
díaasícomoyo, hay muchosotrosdesarrolladores, quehanestadousando el
patrón MVVM paraaplicaciónbasadas en WPF, Silverlight y ahora Metro
Style.
Lo que se pretende en este blog esdarunaaportación del
conocimientosobreestaarquitectura , y llevar el conocimiento de MVVM con
la esperanza de que hay mejoraspara el desarrollo de App para Metro
Style.
MVVM Light Toolkit V4 RTM es el instaladormásrecientepara Windows 8,
estádisponible en CodePlex. Según el blog de Laurent esunainstalaciónpaso
a pasocomolasversionesanteriores. Solo se tienequedescargar y ejecutar el
MSI desdeCodePlex y comoes habitual seguir los pasos y darsiguiente hasta
el final de la instalación o en sudefectoinstalarlodesde Visual Studio 2012
con la consolaPackage Manager Console y ejecutar el comando Install-
Package-MvvmLight.
Antes de comenzar con el desarrollo de la app voy a darunabrevedescripción
del MVVM es un derivado de Model-View-Controller (MVC) donde los
puntospotenciales de estaarquitectura se aprovechan en Windows
Presentation Foundation (WPF), Silverlight y ahoraaplicaciones Metro
Style.
La arquitectura se basa en separar el Modelo (Model) y la Vista (View)
mediante la introducción de unacapa de abstracción entre ellos: unmodelo
"de la vista" o conocidocomoViewModel.

2. • El modelo (Model).Esresponsable de todos los datos de la aplicación y de la
lógica de negociosrelacionada.
• La vista o vistas(View). Esresponsable de manipular y mostrar los eventos,
animacionesy datos al usuario, en otraspalabras la vista esresponsable
de lasacciones a mostrarpara la interacción con el usuario, asícomo de
permitir la manipulación de los datos de la aplicación.
• El modelo-vista (ViewModel). Esresponsable de implementar el
comportamiento de la vista para responder a lasacciones del
usuariomediantemétodos, comandos y otrospuntos de
accesoqueayudan a mantener el estado de la vista, y de exponer los
datos del modelo de forma talque sea fácilusar bindings en la vista.
Preparación de lasherramientas a utilizar
:Instalación de MVVM y SQLite.
Para efectos de estedesarrollo se van a instalarMVVM desdeManage Nuget
Package y SQLite agregándolocomoreferencia del proyecto.
• Para MVVM sedeben de seguir los siguientespasos:
1. Abrir Visual Studio 2012
2. Generar el proyectodenominadoNotasRapidas
3. Ir a Tools>>Library Package Manager>>Package Manager Console. Como
se muestra a continuación:

3. 4. En la consola de Package Manager Console ponerdespués del prompt PM>
la instrucciónInstall-Package-MvvmLight:
5. Se debe deagregarlasplantillas de MVVM a Visual Studio 2012.
• Para realizar la instalación de SQLite se deben de realizar los
siguientespasos:
1. SituarsesobreReferencias>> Dar
clicderecho>>SeleccionarAgregarReferencia.
2. Se abriráunaventana en la cual del ladoderecho se debe de poner la
referencia a seragregada, en estecasosqlite. Como se muestra a
continuación:

4. 3. Adicionalmentedebes de descargar la librería (dll) de la pagina de SQLite.
4. Al
terminar la descargacopia la librearía (dll) al proyecto.
Al concluir con lasinstalaciones se debe de crearcarpetasparaorganizar el
proyecto, la estructura del directoriodebe de quedar de esta forma:

5. DesarrollandoNotasRápidas (Sticky notes)
Como objetivo de desarrollo se plantea el teneruna Nota Rápidaquecontenga
los elementosbásicoscomo lo son el titulo, fecha y la nota, el diseño de la Nota
Rápida va a ser de la siguientemanera:

6. Antes de comenzar con el desarrollo se debe de comenzar con la estructura de
la base de datos. lacualdebe de tenerunaestructura similar a esta:
Para crearlastablas de la base de datos en SQLite que se van a utilizar en la
aplicación Metro Style de NotasRápidas, se puedenconsiderar dosformas:
Nota: Antes de comenzar a desarrollar la claseesimportanteprimero leer
estas dos formaspara saber porcual forma se va a elegirpara el desarrollo.
LA PRIMERA FORMA, estenerunaclaseparacadatablaque se quieracrear,
laspropiedades de la clase se tienenquedirigir a algunosatributospropios de
SQLite paraque al momento de generarlos la bibliotecasepacomoconstruirlos.
Para ejemplificar, se va a construir la clasepara la TablaNota:

7. En esteejemplo se vecomoalgunosatributos de SQLite se utilizan en
laspropiedades de la clase, paraclarificarcadauno :
PrimaryKey. Se utilizaparaespecificarque la columnaserá la clave principal de
la tabla. AutoIncrement. Por lo general se utiliza en pareja con una clave
principal, y cuandoestaopciónestáactivada, el valor de
estacolumnaesunnúmeroque se incrementaautomáticamentecadavezque se
insertaunanuevafila en la tabla. MaxLength. Se puedeutilizar con
laspropiedades de cadenaparaespecificar el númeromáximo de
caracteresqueseránalmacenados en la columna.
Después de haberdefinido la tabla, es el momento de crear la base de datos.
Como se sabe el desarrollo de aplicación Metro Style se basa en lo posible en
un patrónasynchrnous, de tal forma que setienequeutilizar la
versiónasíncrona de sqlite-net.
Para crear la base de datos, se va a crearunaclase con el nombre de
BDManager, lacualcontendrá la ruta de conexión y métodospara la
manipulación de lasnotasrápida.
La claseBDManager, inicialmentedebe de contenerestaestucturapara la

8. creacion de la base de datos y lastablas:
El métodoGetConnection.Devuelve de forma asíncrona la rutadonde se
encuentra la base datos.
Donde:
DatabaseName. Es el nombre de la base de datos.
_Path. Es la rutadonde se vaencontrar la base de datos.
SQLiteAsyncConnection. Genera la base de datos en la ruta _path.
El métodoCreateDataTable.Sirveparacrear la tabla en la base de datos de
forma asyncrona.
Donde:
conn. Es el objeto de la conexión a la base de datos.
CreateTableAsync<>.Es el métodoparacrear la tabla de forma asíncrona.
TablaNota. Es la clasequeutiliza el métodoasíncronopara la construcción de la
tabla.
await. Esunmetodo Promise.
En estepuntoesdonde se va a clarificaLA SEGUNDA FORMA, lacualconsiste en
vez de generar la tablautilizando la clasepara la creación de esta, con la
instrucción:
awaitconn.CreateTableAsync<TableImage>();

9. Se utilicé la instrucción:
awaitconn.ExecuteAsync("CREATE TABLE TableImage (IdImage
INTEGER PRIMARY KEY, Archivo VARCHAR(120000), IdNota
INTEGER);");
con la cual no se genera ningunaclase de pormedio y se
utilizaunasentencia SQL, para la creación de la tabla.
Dentro de estamismaclase de BDManager se va a continuar con la creación de
los métodosquenos van a Crear, Devolver y Eliminarlasnotas:
Métodoasíncrono paraCrearuna Nota Rápida.

10. MétodoasíncronoparaRetornarunaLista de NotasRápidas.
MétodoasíncronoparaEliminaruna nota rápida.
Hasta estemomento solo se tienecreada la base de datos, lastablas y la
clasequeadministrara los métodosparaguardar, eliminar y
seleccionartodaslasnotas, yanosencontramos en la parte del Model para la
Aplicación.
La publicación de la Parte II, la cualconsistirá en la construcción de la
aplicación con la arquitectura de MVVM y la interaccióncon la base de
datosbajo el esquema de MVVM.