\chapter{Manual del usuario}

\section{Aplicación Web}

\subsubsection{Página de bienvenida y registro de nuevos usuarios}

La pantalla inicial para el acceso a la aplicación Web se muestra en la Figura~\ref{fig:LoginWeb}) Los usuarios desde esta página pueden hacer \emph{log in} usando su usuario y password o su correo y password. En caso de ser un usuario no registrado, desde esta misma página se puede acceder a la página de registro. Porque hay dos clases de usuarios Web, también hay dos páginas de registro diferentes: para los usuarios de tipo empresa, la página de registro se muestra en la Figura~\ref{fig:RegistroEmpresaWeb}) mientras que para los usuarios genéricos (aquellos que descargarán anuncios en sus dispositivos móviles) la página de registro se muestra en la Figura~\ref{fig:RegistroUsuarioWeb})

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/LoginWeb}
    \caption{\emph{Página de acceso aplicación Web}}
    \label{fig:LoginWeb}
\end{figure}

\begin{figure}[H]
    \centering
        \includegraphics[width=1\textwidth,height=0.5\textheight]{fig/RegistroUsuarioWeb}
    \caption{\emph{Resto de usuarios: página de registro aplicación Web}}
    \label{fig:RegistroUsuarioWeb}
\end{figure}

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth,height=0.6\textheight]{fig/RegistroEmpresaWeb}
    \caption{\emph{Empresas: página de registro aplicación Web}}
    \label{fig:RegistroEmpresaWeb}
\end{figure}


Como se puede observar en las Figuras~\ref{fig:RegistroUsuarioWeb} y \ref{fig:RegistroEmpresaWeb} es necesario la introducción de un captcha para poder registrarse. Para la generación de los captchas se está utilizando tecnología proporcionada por Google y en concreto se está haciendo uso de ReCAPTCHA\footnote{Para más información acerca de ReCAPTCHA ver: \url{http://www.google.com/recaptcha}}. En la página de registro, el usuario puede indicar el lenguaje que desea utilizar, de este modo puede internacionalizarse la información mostrada y no solo basarse en el idioma proporcionado de forma automática por el navegador Web (todo navegador Web proporciona cierta información acerca de sí mismo, parte de esta información es el idioma del usuario)

\subsubsection{Resto de usuarios: selección de categorías}

Aquellos usuarios que no tienen el rol empresa, una vez se autentican contra el servidor (el proceso de \emph{log in} explicado en la sección anterior) accederán a la página mostrada en la Figura~\ref{fig:UsuarioSeleccionWeb}) Aquí el usuario puede seleccionar aquellas categorías sobre las cuales desea recibir anuncios en su dispositivo móvil. Las categorías son presentadas de forma jerárquica y para poder persistir los cambios es necesario que el usuario pulse sobre el botón que aparece en la zona inferior derecha de la página Web.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/UsuarioSeleccionWeb}
    \caption{\emph{Resto de usuarios: selección de categorías de interés en la Web}}
    \label{fig:UsuarioSeleccionWeb}
\end{figure}


\subsubsection{Usuarios empresa y normales: visualización y modificación de datos personales}

Los dos tipos de usuarios (empresa y normales) pueden editar sus datos personales, para lograr dicha edición existen dos páginas, las cuales se muestran las Figuras~\ref{fig:DatosUsuarioWeb} y \ref{fig:EdicionDatosUsuarioWeb} donde se puede observar la pantalla en la cual cualquier usuario puede visualizar sus datos personales. En la esquina inferior derecha de la página mostrada en la Figura~\ref{fig:DatosUsuarioWeb}), se observa el botón que permite acceder a la página mostrada en la Figura~\ref{fig:EdicionDatosUsuarioWeb}) desde la cual el usuario (con rol empresa o sin él) puede actualizar sus datos personales. Un usuario normal, no puede realizar más acciones, en cambio el usuario con rol empresa como se verá en la próxima sección puede realizar muchas más tareas desde el entorno Web proporcionado por el sistema implementado en este Trabajo Fin de Carrera.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/DatosUsuarioWeb}
    \caption{\emph{Todo tipo de usuarios: visualización datos personales en la Web}}
    \label{fig:DatosUsuarioWeb}
\end{figure}

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/EdicionDatosUsuarioWeb}
    \caption{\emph{Todo tipo de usuarios: edición de datos personales en la Web}}
    \label{fig:EdicionDatosUsuarioWeb}
\end{figure}

\subsubsection{Usuarios rol empresa: visualización y edición de los datos de una empresa}

En el servidor Web los datos relativos a una compañía serán su Código de Identificación Fiscal o CIF, su nombre y un \emph{logo}. El \emph{logo} en sí, actualmente no tiene ninguna utilidad pero podría ser utilizado para generar una página web desde la cual mostrar a usuarios autenticados o no las últimas empresas que se han registrado en el sistema o las últimas que han modificado o añadido algún anuncio o dato en el servidor Web. La página de visualización de los datos se muestra en la Figura~\ref{fig:DatosCompaniaWeb}) y la de edición en la Figura~\ref{fig:EdicionDatosCompaniaWeb}) Por último indicar que el tamaño del \emph{logo} está limitado, y en caso de superar este límite se mostrará un mensaje del error al usuario.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/DatosCompaniaWeb}
    \caption{\emph{Usuarios rol empresa: visualización datos de la compañía en la Web}}
    \label{fig:DatosCompaniaWeb}
\end{figure}

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/EdicionDatosCompaniaWeb}
    \caption{\emph{Usuarios rol empresa: edición datos de la compañía en la aplicación Web}}
    \label{fig:EdicionDatosCompaniaWeb}
\end{figure}

\subsubsection{Usuarios rol empresa: listado, edición y creación de anuncios}

En la Figura~\ref{fig:ListadoAnunciosWeb}) se muestra la página Web que lista todos los anuncios que pertenecen al usuario actual. En la parte superior derecha del listado se puede seleccionar el lenguaje de los anuncios a mostrar. Esto es debido a que un mismo anuncio se puede definir en uno o más lenguajes, mediante la selección del lenguaje de los anuncios que se quieren listar se consigue que el usuario pueda decidir en cada momento el lenguaje de los anuncios listados evitando mostrar anuncios que no han sido definidos en el lenguaje seleccionado. El índice de anuncios se muestra con un paginador para evitar presentar un índice de anuncios demasiado largo en una sola página Web.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/ListadoAnunciosWeb}
    \caption{\emph{Usuarios rol empresa: listado de anuncios en la aplicación Web}}
    \label{fig:ListadoAnunciosWeb}
\end{figure}

Desde la ventana de listado de anuncios el usuario con rol de empresa puede borrar, editar los datos de un anuncio o crear un anuncio nuevo. En la Figura~\ref{fig:CreacionAnunciosWeb}) se muestra parte de la página que permite crear y editar nuevos anuncios. Se observa como el usuario puede para el mismo anuncio editar los datos en múltiples idiomas (actualmente el sistema solo permite Inglés y Castellano, pero el número de idiomas puede ampliarse fácilmente con solo añadir más idiomas a la tabla de la base de datos que maneja dicha información) También se observa la posibilidad de asignar una latitud y longitud a un determinado anuncio. Para la introducción de las coordenadas geográficas se utiliza la API JavaScript de Google Maps, a través de la cual y de una forma gráfica el usuario puede asignar una localización espacial a su anuncio. Basta con pinchar sobre la longitud o la latitud para que se abra de forma automática una ventana emergente que nos permite seleccionar la posición geográfica a través de Google Maps. Las dimensiones de la imagen asociada con un anuncio son limitadas de forma automática por el sistema, esto es debido a que la imagen en cuestión será la que finalmente los usuarios vean en sus dispositivos móviles, si no hubiera ninguna restricción en cuanto al tamaño, en caso de ser demasiado grande la imagen consumiría demasiado ancho de banda para su descarga y además quedaría descolocada respecto a otras imágenes en la aplicación para dispositivos móviles (en nuestro caso la aplicación Android). Por último observar que es necesario asignar una categoría de empresa a un anuncio si queremos que el anuncio llegue finalmente al usuario. Las categorías de empresa a su vez se asocian con categorías generales que son las que el usuario final ve (como mostradas en la Figura~\ref{fig:UsuarioSeleccionWeb}) Por tanto hay una relación directa entre categorías generales, categorías de empresa y anuncios. Si no existe esta relación el usuario final no recibirá el anuncio aunque éste haya sido creado y exista en el sistema.

La posibilidad de tener el mismo anuncio en diferentes idiomas permite que éste pueda llegar a más usuarios finales, pues cada usuario final tiene asociado un tipo de idioma y solo recibirá anuncios en ese lenguaje. Si se guarda el mismo anuncio en todos los idiomas que admite el sistema, el usuario con rol empresa sabrá que el anuncio creado por él siempre llegará a un usuario final sea cual sea su idioma.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/CreacionAnunciosWeb}
    \caption{\emph{Usuarios rol empresa: creación y edición de anuncios en la aplicación Web}}
    \label{fig:CreacionAnunciosWeb}
\end{figure}


\subsubsection{Usuarios rol empresa: listado, edición y creación de categorías}

Al igual que sucedía con los anuncios, el usuario con rol empresa puede listar sus categorías. Este listado es jerárquico, de tal forma que habrá categorías y tantas subcategorías como el usuario quiera. Siempre existe una categoría raíz denominada Producto que no puede ser borrada y desde la cual se podrán añadir nuevas categorías. En la Figura~\ref{fig:ListadoCategoriasWeb}) se muestra la página Web que lista las categorías; desde ahí se pueden editar, borrar o añadir nuevas categorías.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/ListadoCategoriasWeb}
    \caption{\emph{Usuarios rol empresa: listado de categorías en la aplicación Web}}
    \label{fig:ListadoCategoriasWeb}
\end{figure}

En la Figura~\ref{fig:CreacionCategoriasWeb}) se muestra cómo el usuario con rol empresa puede crear o editar una categoría. El campo más importante es aquel que hace referencia a la categoría general existente en el sistema pues como se ha comentado previamente, solamente si un anuncio está asociado indirectamente con una categoría general será recibido por el usuario final en su dispositivo móvil.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/CreacionCategoriasWeb}
    \caption{\emph{Usuarios rol empresa: creación y edición de categorías}}
    \label{fig:CreacionCategoriasWeb}
\end{figure}


\subsubsection{Usuarios rol empresa: listado, edición y creación de oficinas}

El usuario con rol empresa puede crear oficinas o sucursales y asignar a éstas una localización geográfica, además las oficinas o sucursales pueden tener anuncios asociados de tal forma que si un usuario se encuentra dentro del área de acción de una determinada oficina o sucursal y además esta oficina o sucursal tiene asociado un anuncio de interés para el usuario, el usuario final recibirá en su dispositivo móvil ese anuncio o notificación. Por tanto no solo se localiza geográficamente anuncios si no también oficinas y no solamente existe un radio de acción para anuncios si no también para oficinas o sucursales. Este radio de acción actualmente se encuentra predefinido en el propio sistema pero en desarrollos futuros, tal y como fue comentado en el capítulo 8, podría ser modificado por el usuario previo pago de una algún tipo de cuota.

La Figura~\ref{fig:ListadoOficinasWeb}) muestra la página Web con el listado de oficinas desde donde también se puede acceder a las páginas de edición o creación de nuevas sucursales (como mostrado en la Figura~\ref{fig:CreacionOficinasWeb}) si se pincha sobre el botón situado en la parte inferior derecha de la ventana, o también se puede acceder a la página desde la cual asociar anuncios a una determinada sucursal tras pinchar sobre el correspondiente link como se muestra en la Figura~\ref{fig:AsociacionOficinasWeb}). Al igual que sucedía con los anuncios, se utiliza un paginador para evitar generar un listado demasiado grande, además el usuario puede ordenar la información por país, región, ciudad, dirección o código postal con solo pinchar en la cabecera de la lista mostrada.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/ListadoOficinasWeb}
    \caption{\emph{Usuarios rol empresa: listado de oficinas o sucursales}}
    \label{fig:ListadoOficinasWeb}
\end{figure}

En la Figura~\ref{fig:CreacionOficinasWeb}) se observa la página Web donde el usuario puede editar o crear los datos de una oficina o sucursal. Como sucedía con los anuncios, para la introducción de los datos relacionados con la posición geográfica (la latitud y la longitud) se hace uso de la API JavaScript de Google Maps, donde se muestra una ventana emergente con un mapa que permite seleccionar de forma gráfica las coordenadas geográficas de la sucursal u oficina.

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/CreacionOficinasWeb}
    \caption{\emph{Usuarios rol empresa: creación y edición de oficinas o sucursales}}
    \label{fig:CreacionOficinasWeb}
\end{figure}

Por último y no menos importante, se muestra la Figura~\ref{fig:AsociacionOficinasWeb}) donde se observa la página Web que permite asociar anuncios a una determinada oficina o sucursal. Hemos dicho que si un usuario final se encuentra en el radio de acción de una determinada oficina recibirá inmediatamente una notificación o anuncio relacionado con una categoría de interés para él acerca de un producto que se encuentra en dicha oficina o sucursal. Es a través de esta página Web donde el usuario con rol empresa añade anuncios (relacionados con productos) a una determinada oficina, indicando de este modo que esa sucursal tiene el producto relacionado con el anuncio añadido en la página Web mostrada en la Figura~\ref{fig:AsociacionOficinasWeb}) A la izquierda se muestran los anuncios que una determinada sucursal tiene asociados o lo que es lo mismo; esa sucursal tiene productos relacionados con esos anuncios, y a la derecha se muestran los anuncios que no están asociados a dicha sucursal. Simplemente seleccionando uno o múltiples anuncios y pulsando sobre las flechas, una sucursal puede asociarse o desasociarse con uno o varios anuncios. Para persistir los cambios simplemente es necesario que el usuario pulse sobre el botón que se encuentra en la parte inferior derecha de la ventana, tal y como muestra la Figura~\ref{fig:AsociacionOficinasWeb})

\begin{figure}[H]
    \centering
        \includegraphics[width=\textwidth]{fig/AsociacionOficinasWeb}
    \caption{\emph{Usuarios rol empresa: asociación de anuncios a oficinas o sucursales}}
    \label{fig:AsociacionOficinasWeb}
\end{figure}

\cleardoublepage

\section{Aplicación Android}

\subsubsection{Ventana de Log in}

Para poder recibir anuncios desde el servidor Web, el usuario debe registrarse previamente en el sistema remoto. En la Figura~\ref{fig:LoginAndroid}) se muestra la ventana donde el usuario debe introducir su nombre de usuario y password. Esta información es exactamente la misma que la utilizada en la aplicación Web por tanto, el nombre de usuario y password creado en la Web es el que debe ser usado en la aplicación Android y por supuesto el usuario debe estar previamente registrado en el sistema mediante la página de registro mostrada en la Figura~\ref{fig:RegistroUsuarioWeb})

\begin{figure}[H]
    \centering
        \includegraphics[width=0.5\textwidth,height=0.5\textheight]{fig/LoginAndroid}
    \caption{\emph{Ventana de log in desde la aplicación Android}}
    \label{fig:LoginAndroid}
\end{figure}

\subsubsection{Ventana de listado de anuncios}

Nada más arrancar la aplicación Android, se accede a la ventan que muestra un listado con los anuncios que el usuario tiene descargados. Si no tiene ninguno, por supuesto, no mostrará nada. Esta ventana es mostrada en la Figura~\ref{fig:ListadoAndroid}) Recordar que un anuncio lleva asociada una página Web donde se puede acceder a más información relacionada con ese u otros anuncios, para acceder a dicha página Web el usuario debe pinchar sobre alguno de los anuncios listados en la Figura~\ref{fig:ListadoAndroid}) Si el usuario no ha pulsado sobre alguno de los anuncios, el estado del anuncio es como no leído y el color de fondo que se muestra es gris; en cambio, si el usuario ya ha pulsado sobre ese anuncio el fondo es de color negro. La Figura~\ref{fig:ListadoAndroid}) muestra anuncios acerca de los cuales el usuario ya ha visto su información asociada (la página Web con más información) cuyo fondo es negro y anuncios con fondo gris donde la información asociada todavía no ha sido leída.

\begin{figure}[H]
    \centering
        \includegraphics[width=0.5\textwidth,height=0.5\textheight]{fig/ListadoAndroid}
    \caption{\emph{Listado de anuncios}}
    \label{fig:ListadoAndroid}
\end{figure}

\subsubsection{Ventana de borrado y selección de anuncios}

Los anuncios recibidos puedes ser borrados, para ello desde el mismo listado de la Figura~\ref{fig:ListadoAndroid}) se puede seleccionar uno o varios anuncios para borrar. Simplemente pulsando sobre uno de los anuncios durante un breve espacio de tiempo se entra en el modo ``Selección'' que permite seleccionar más anuncios con una sola pulsación. Después, utilizando la barra en la parte inferior de la pantalla que aparece al entrar en este modo selección, se puede efectuar el borrado de los anuncios descargados. La Figura~\ref{fig:ListadoSeleccionadoAndroid}) muestra este modo ``Selección'' y algunos anuncios seleccionados para ser borrados.

\begin{figure}[H]
    \centering
        \includegraphics[width=0.5\textwidth,height=0.5\textheight]{fig/ListadoSeleccionadoAndroid}
    \caption{\emph{Borrado de anuncios en la aplicación Android}}
    \label{fig:ListadoSeleccionadoAndroid}
\end{figure}

\cleardoublepage

\subsubsection{Ventana de configuración}

Pulsando sobre el icono que representa una llave inglesa, se puede acceder a la ventana de configuración, la cual se muestra en la Figura~\ref{fig:SettingsAndroid}) Desde esta ventana se puede lanzar el servicio en segundo plano, que será el encargado de enviar actualizaciones sobre la posición al servidor remoto (nuestro servidor Web) y procesar los datos recibidos (los anuncios) así como notificar al usuario de la existencia de nuevos anuncios recibidos. El servicio en segundo plano solo puede ser lanzado una vez que el usuario haya hecho \emph{log in} en el servicio remoto, en caso contrario, la aplicación Android muestra un mensaje de error indicando al usuario que debe hacer \emph{log in} antes de poder recibir nuevos anuncios. Por tanto el usuario desde el primer momento puede hacer uso de todas las funcionalidades de la aplicación excepto las relacionadas con la recepción de nuevos anuncios. Para iniciar o parar el servicio en segundo plano el usuario debe marcar o desmarcar la opción \emph{Service started}.

\begin{figure}[H]
    \centering
        \includegraphics[width=0.5\textwidth,height=0.5\textheight]{fig/SettingsAndroid}
    \caption{\emph{Ventana de configuración}}
    \label{fig:SettingsAndroid}
\end{figure}

Desde la ventana mostrada en la Figura~\ref{fig:SettingsAndroid}) el usuario también puede modificar la frecuencia con la cual la aplicación intentará averiguar si el usuario ha variado su posición. 

\begin{itemize}
    \item \emph{Time update rate}: Mediante esta opción el usuario puede especificar el tiempo de espera entre dos intentos por parte de la aplicación de averiguar la actual localización del usuario. Durante ese tiempo la aplicación no intenta averiguar la actual posición geográfica ahorrando de este modo más o menos batería en función de si el tiempo entre los dos intentos es mayor o menor (a más espacio temporal entre intentos de averiguar la posición menor consumo de batería habrá) Por defecto cada 0 minutos, lo cual quiere decir que la aplicación siempre estará intentando actualizar su posición (consumiendo de este modo mucha batería) y enviará la nueva localización al servidor tan pronto como se satisfaga el valor de la opción utilizada en \emph{Meters update rate}. En la Figura~\ref{fig:SettingsAndroidTime}) se muestran los diferentes valores que el usuario puede elegir para configurar esta opción.
    \item \emph{Meters update rate}: Con esta opción el usuario especifica la variación entre dos posiciones geográficas (la actual y la pasada) que debe existir para que la aplicación lance una petición al servidor Web para que éste retorne (si los hay) anuncios alrededor de la posición geográfica actual. De este modo la aplicación solo hace peticiones al servidor Web (enviando la localización actual del usuario) cuando la distancia entre la última posición enviada al servidor y la actual es igual o mayor al valor en metros fijado por el usuario mediante la opción \emph{Meters update rate}. Por defecto cada 10 metros la aplicación enviará al servidor Web la nueva localización del usuario. En la Figura~\ref{fig:SettingsAndroidMeters}) se observa el menú que el usuario puede utilizar para variar esta opción.
\end{itemize}


\begin{figure}[H]
    \centering
        \includegraphics[width=0.5\textwidth,height=0.5\textheight]{fig/SettingsAndroidTime}
    \caption{\emph{Selección de tiempo entre actualizaciones de la localización}}
    \label{fig:SettingsAndroidTime}
\end{figure}

\begin{figure}[H]
    \centering
        \includegraphics[width=0.5\textwidth,height=0.5\textheight]{fig/SettingsAndroidMeters}
    \caption{\emph{Selección de metros entre actualizaciones de la localización}}
    \label{fig:SettingsAndroidMeters}
\end{figure}

\cleardoublepage

\subsubsection{Notificación en la barra de herramientas Android}

Nada más lanzar el servicio en segundo plano, se muestra un icono en la barra de herramientas de Android, si el usuario se dirige a la ventana de notificaciones tal y como muestra la Figura~\ref{fig:NotificacionAndroid}) verá (entre otras posibles notificaciones) la correspondiente a la aplicación Android implementada para este Trabajo Fin de Carrera. Se puede identificar la notificación en cuestión mediante el nombre ``MobiAds Service'', además se observa un contador que indica el número de anuncios que el usuario tiene descargados pero que todavía no ha leído. Es decir, que tiene esos anuncios, puede que los haya visto en el listado de anuncios con fondo gris pero todavía no ha pulsado sobre ellos y no ha sido dirigido a la página Web donde podrá encontrar más información acerca del anuncio.

\begin{figure}[H]
    \centering
        \includegraphics[width=0.5\textwidth,height=0.5\textheight]{fig/NotificacionAndroid}
    \caption{\emph{Notificación en barra de herramientas}}
    \label{fig:NotificacionAndroid}
\end{figure}

\subsubsection{Listado de últimos anuncios descargados}

Si el usuario pulsa sobre la notificación mostrada en la Figura~\ref{fig:NotificacionAndroid}) aparece una ventana emergente donde se listan todos los anuncios descargados o todavía no leídos. Desde este listado y al igual que sucedía en la ventana mostrada en la Figura~\ref{fig:ListadoAndroid}) el usuario puede pulsar sobre un determinado anuncio y leer la información localizada en la página Web asociada a dicho anuncio lo cual hará que automáticamente el anuncio desparezca de esta ventana emergente, o bien si pulsa sobre un anuncio durante un tiempo prolongado de unos 2 segundos, aparecerá una opción que permitirá al usuario si lo desea borrar el anuncio recién descargado, incluso aunque todavía no se haya leído la información asociada con él. Esta ventana emergente es mostrada en la Figura~\ref{fig:ListadoUltimosAdsAndroid})

\begin{figure}[H]
    \centering
        \includegraphics[width=0.5\textwidth,height=0.5\textheight]{fig/ListadoUltimosAdsAndroid}
    \caption{\emph{Listado de los anuncios nuevos descargados o no leidos.}}
    \label{fig:ListadoUltimosAdsAndroid}
\end{figure}





