> For the complete documentation index, see [llms.txt](https://elguerre.gitbook.io/de0an/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://elguerre.gitbook.io/de0an/capitulo-8-la-construccion-proyectos-tareas-y-pomodoros/introduccion.md).

# Introducción

Hemos decidido nuestro repositorio y el modelo de datos ha sido definido, hemos resuelto el uso de proveedores y servicios de acceso a datos y hemos determinado el uso de entidades de negocio.

Es el momento de comenzar con la implementación de la interfaz de usuario que ya diseñamos y pasar a conocer cómo será la introducción y manipulación de información.

En este capítulo, crearemos las pantallas para la edición de Proyectos, Tareas y Pomodoros, a la misma vez que crearemos ventanas de consulta con listado y ventanas de detalle para facilitar su lectura y representación e incluso crearemos una lista de validación (*checklist*). Dotaremos así, una mayor flexibilidad a cada una de nuestras tareas, nuestro principal elemento de trabajo

Accederemos a la librería de imágenes para elegir la imagen que mejor identifique a cada proyecto, crearemos nuevos estilos, acciones y comportamientos y los asignaremos a los controles para dar un aspecto más personalizado a nuestras ventanas. Añadiremos nueva funcionalidad a nuestra librería común portable “InTools” e iniciaremos una primera navegación entre proyectos, tareas y Pomodoros.

## Introducción

Un aspecto importante de la experiencia de usuario en nuestra aplicación son las notificaciones. Tal y como mencionamos en el capítulo 3, la integración con *Microsoft.Toolkit.Uwp.Notifications* nos permite informar al usuario del estado de sus pomodoros y tareas mediante notificaciones Toast. Más adelante, en el capítulo 9, exploraremos también la creación de Tiles Secundarios para que cada proyecto tenga presencia propia en el menú de inicio.

![C:\Users\juanlu\AppData\Local\Microsoft\Windows\INetCacheContent.Word\Notificatons - Toast.png](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-ec8aeb77fb62e9d92087347be0ea703f07efdad7%2Fimage1.png?alt=media)

**Figura 01.- Estructura de una notificación Toast en UWP**

Para más detalle visitar la página: <https://learn.microsoft.com/es-es/windows/apps/develop/notifications/app-notifications/>

Como ya definimos en el capítulo tres durante la creación del prototipo, y, tal y como hemos implementado en el capítulo 7, las entidades de negocio o esquemas, recogen los datos que el usuario facilita a la aplicación a través de la interfaz de usuario. Todos ellos son almacenados en un repositorio y visibles a través de la interfaz para poder interactuar con el usuario, descubriéndoselos de una manera amigable, permitiendo ser ordenados, priorizados, tipificados, modificados y eliminados.

Aunque esta labor parece realmente sencilla, requiere de cierta complejidad. No siempre es trivial adaptar los datos al diseño inicialmente definido. En ocasiones, es probable que tengamos que modificar nuestro diseño para realizar algunas adaptaciones, pero en ningún caso debemos dejar de lado; nuestro boceto, wireframe, mockup o prototipo, la simplicidad, y, recordemos, *que queremos representar justo lo que queremos evitando flujos y acciones innecesarias. “La sencillez y agilidad entre el usuario y la aplicación han de ser lo más natural posible”.*

Teniendo claro todo ello, comenzaremos a crear las interfaces que va a representar las entidades de negocio: Proyectos, Tareas, Pomodoros y CheckList. Cada una de las cuales se constituirá con una o más pantallas o secciones, de manera que permitan tanto su lectura como su edición/modificación.

Inmortalicemos en este momento, que la creación de cualquier nueva pantalla pasa por completar los siguientes puntos, según concretamos en el capítulo 5 para la creación de la pantalla “Acerca de”:

1. Crear una interfaz “**I\<Nombre>ViewModel**” que implemente a su vez la interfaz IView. ­­
2. Crear un ViewModel “**\<Nombre>ViewModel**” que herede de ViewModelBase e implemente la interfaz anterior.
3. Crear la página en blanco **“\<Nombre>Page.xaml”**.
4. Realizar el registro en el contenedor de dependencias (*ViewModelLocator*) e incluir una propiedad pública “**\<Nombre>**” para su uso como contexto de datos en cada página.

**Nota**: Recordemos una vez más, que el capítulo 2 es nuestra guía de referencia, y es recomendable su revisión en cualquier momento para refrescar, el qué y el cómo hacer las cosas y las posibilidades y limitaciones que cada control/componente nos ofrece.
