Desarrollo de interfaces de usuario - Obligatorio 1

Integrantes

Agustín Daguerre 158736

Franco Simeone 160850

Decisiones de diseño

Al momento de desarrollar nuestra aplicación tomamos ciertas medidas para intentar tener una interfaz de usuario con un cierto grado de usabilidad que sea del agrado de los usuarios.

Es por esto que nos basamos en la aplicación Whatsapp Web, ya que la misma es conocida por la mayoría de los usuarios, de forma de minimizar el tiempo de aprendizaje de los usuarios, así como también la tasa de error, mientras que se aumenta la velocidad de operación por parte de los mismos

Lo primero que tuvimos en cuenta son las guias de Material Desing , con las que nos informamos que nuestros componentes cumplieran las buenas prácticas de las mismas.

La aplicación cumple con Responsive Web Design para conseguir una experiencia optimizada para cualquier tamaño de pantalla. Además, de forma de maximizar la experiencia de usuario en dispositivos con pantallas pequeñas se realizó el patrón de Mater-Detail.

Al momento de utilizar la aplicación, si el usuario se encuentra en un dispositivo con una pantalla pequeña, el mismo podrá observar solamente la lista de usuarios, y al seleccionar un usuario para chatear, entonces podrá observar el componente correspondiente a la conversación.

Por otra parte, si el usuario está usando la aplicación en un dispositivo con una pantalla más grande podrá observar tanto la lista de usuarios como también la conversación al mismo tiempo.

Es importante resaltar que para realizar nuestra aplicación de forma que la misma fuera Responsive se debieron manejar algunos conceptos importantes. Entre estos destacamos el uso de unidades relativas en vez de unidades estáticas, para que la aplicación se ajuste a cada dispositivo independientemente del tamaño de su pantalla.

También fueron utilizados contenedores para facilitar las posiciones relativas del mismo a la pantalla, y esto en conjunto con propiedades flex para mejorar el layout de la aplicación.

Por otro lado, para poder facilitar el diseño al mismo tiempo que ahorrar tiempo, se decidió utilizar Material-ui como librería de componentes. La misma presenta varios componentes que podemos importar y utilizar de forma sencilla en nuestro sistema, además de que todos estos cumplen las buenas practicas de Material Design.

Además, utilizamos esta librería para realizar de forma fácil la funcionalidad respectiva a cambiar el theme de la aplicación, ya que ésta provee una forma de seleccionar los estilos que se utilizan por los componentes. Decidimos usar la misma para seleccionar los colores a utilizar.

En conjunto con lo anterior se utiliza la librería de StyledComponents para poder modificar los estilos para los componentes que se realizaron. Esta librería en conjunto con Material-ui fue de mucha ayuda para personalizar nuestro sistema.

Además, para que nuestra aplicación contar con una mejor interfaz, y mejorará la usabilidad de la misma se utilizaron otras librerías interesantes a tener en cuenta. Entre las mismas destacamos, Micro-Link para llevar acabo la previsualizacion de mensajes con URL en las conversaciones.

Otra libreria usada es EmojiMart, esta es la encargada de renderizar el componente relativo a la selección de emojis. La librería presenta un componente con similar interfaz a la utilizada tanto en Whatsapp Web como Slack, por lo que los usuarios tendrán una percepción mayor de como utilizarlo.

Jerarquía de componentes

Para mostrar la jerarquía de componentes por los que nuestra aplicación se conforma decidimos separar en tres la misma. Cada una de las siguientes imágenes representa la jerarquía de componentes para cada paso por los que el usuario debe transitar para poder utilizar la aplicación.

El primero de estos pasos es poder loguearse. Para esto, en nuestra aplicación se renderiza un solo componente, Login. Aquí el usuario ingresa los datos, tanto nombre de usuario, como una url a una imagen de cierto formato (jpeg, jpg, gif, png).

Luego, la aplicación realiza las request correspondientes para crear o cargar el usuario junto con sus chats y mensajes. En este momento nuestra aplicación renderiza el componente Loader.

En este momento el usuario podrá utilizar la aplicación. Aqui la aplicacion renderiza los dos componentes principales de la aplicación, estos son el SideBar y el Chat.

Como podemos observar en la imágenes, estos componentes están conformados por varios otros.

El componente SideBar está compuesto por tres componentes, de arriba hacia abajo, UserOptions, el cual se encarga de mostrar la imagen de usuario logueado, asi como tambien un control para que el usuario pueda elegir el tema, y por último el botón de deslogueo.

Luego encontramos el componente SearchBar, el mismo se encarga de buscar un usuario en la lista a partir de un nombre que ingrese el usuario logueado.

Finalmente se encuentra la lista de usuarios UsersList, esta se encarga de mostrar todo los usuarios registrados en la aplicación. Este componente está conformado por otro llamado UserItem, el cual es el encargado de generar la información del usuario a mostrar, como es la imagen, nombre y ultima conexion.

Por otra parte, el componente Chat está formado, en la parte superior por un componente llamado ChatDetails, que se encarga de mostrar la información del usuario con el que se esta chateando en ese momento. En la zona media de Chat, encontramos el componente ChatConversation que es el encargado de renderizar los mensajes entre los diferentes usuarios.

Por último, en la zona inferior se encuentra ChatInput, este es el componente encargado de generar el nuevo mensaje a enviar.

Estructura del estado

Para mantener el estado de la aplicación se utilizó Redux, cómo era requerido en la letra. En nuestro estado mantenemos las entidades que obtenemos del backend (API graphcool) y otras variables relacionadas al estado de la UI de la app. La estructura de estado es la siguiente

Estado inicial

store: Map({
  entities: {
    users: {},
    messages: {},
    chats: {},
  }),
  app: Map({
    loading: false,
    logged: false,
    conectionTime: null,
    activeChatId: null,
    receiverId: null,
    currentUser: null,
    lightThemeSelected: true,
    userId: null,
  })
}

Estado transitorio

store: Map({
  entities: {
    users: {
      cjhbawx0k21i601628ljlldea: {
         id: “cjhbawx0k21i601628ljlldea”,
         username: “Agustin”,
         chats: [“cjhbawx0k21i601628ljlldex”, “cjhbawx0k21i601628ljlldeb”],
         typingChat: “cjhbawx0k21i608999ljlldea”,
         ...
      }
    },
    messages: {
      cjhbawx0k21i601628lxxxdea: {
         id: “cjhbawx0k21i601628lxxxdea”,
         content: “Hi, are you there?”,
         sender: “cjhbawx0k21i601628ljlldex”,
         receiver: “cjhbawx0k21i601628ljlldeb”,
         chat: “cjhbawx0k21i608999ljlldea”,
         new: false,
         ...
      }
    },
    chats: {
      cjhbawx0k21i601628lxxxdea: {
         id: “cjhbawx0k21i601628lxxxdea”,
         messages: [“cjhbawx0k21i601628ljlldex”, “cjhbawx0k21i601628ljlldeb”],
         users: [“cjhbawx0k21i60ds28ljlldex”, “cjhbawx0k21i601628ljlldeb”],
         typingUsers: [“cjhbawx0k21i60ds28ljlldex”],
      }
    },
  }),
  app: Map({
    loading: false,
    logged: true,
    conectionTime: “2018-05-18T02:11:32.451Z”,
    activeChatId: ”cjhbawx0k21i601628lxxxdea”,
    receiverId: ”cjhbawx0k21i601628lxxxdds”,
    currentUser: ”cjhbawx0k21i601628lxxxdea”,
    lightThemeSelected: true,
    userId: ”cjhbawx0k21i601628lxxxdea”,
  })
}

Para mantener el store consistente, en lo que respecta a las entidades, utilizamos las librerías Immutable y normalizr. Estas nos permiten definir un schema entre las entidades a mantener y así poder normalizar evitando mantener entidades repetidas y que puedan causar inconsistencias. Immutable nos facilita el actualizado del store mediante operaciones que no permiten mutar el estado actual, sino que realiza una copia con las modificaciones necesarias.

Cabe reconocer que a futuro para próximas versiones se realizará un refactor del estado de la aplicación para reducir el uso de variables innecesarias, como por ejemplo currenUser y userId.

Instrucciones de configuración

Para configurar un ambiente de desarrollo local

Clonar el repositorio

git clone [email protected]:agustindaguerre/devui-chat.git

Pararse en la branch develop

git checkout develop

Instalar las dependencias necesarias

npm install

En src/api/client.js y src/utils/socket.js se deberan cambiar los endpoints correspondientes a la API de graphcool, ya que los actuales corresponden a producción. En futuras versiones se modificara esto introduciendo variables de entorno.

Correr la app localmente

npm start

Para proximas versiones sera necesario setear variables de entorno correspondientes para conectarse a la API de graphcool

GRAPHCOOL_SUBSCRIPTION_ENDPOINT=<SOCKET_SUB_ENDPOINT>`` GRAPHCOOL_API_URL=<API_ENDPOINT>```