Características técnicas

Arquitectura

Flux

Es una patrón de arquitectura para el manejo y el flujo de los datos y el estado en una aplicación web, particularmente en el Front-End. Fue ideada por Facebook y vendría a sustituir el patrón MVC.

Estos son los actores de una arquitectura o diseño con "Flux":

• Vista: Son los componentes web, en nuestro caso construidos de forma nativa con React Native. Es ella la que envía las acciones al Dispatcher.
• Store: Se podría decir que sustituye al modelo de aplicación de un MVC. Guarda los datos y el estado de la aplicación. Flux permite que haya varios. En "store" no hay métodos para modificar los datos ya que esto se hace desde el "Dispatcher" o por medio de acciones.
• Acciones: Son objetos JavaScript. Llevan asociada una intención la cual puede tener asociado un estado y unos datos.
• Dispatcher: Es la encargada de enviar las acciones al "Store". Hace de mediador entre las "Acciones" y el "Store"

El flujo se resume en que es unidireccional, los datos viajan de la vista a un "Store" por medio de acciones, y una vez allí se actualiza la vista con los cambios.

1.-La vista, mediante un evento envía una acción con la intención de realizar un cambio en el estado
2.-La acción contiene el tipo y los datos (si los hubiere) y es enviada al dispatcher.
3.-El dispatcher propaga la acción al Store y se procesa en orden de llegada.
4.-El Store recibe la acción y dependiendo del tipo recibido, actualiza el estado y notifica a las vistas de ese cambio.
5.-La vista recibe la notificación y se actualiza con los cambios.

Redux

Aunque existen varias formas de implementar "Flux" esta es la mas utilizada siendo ya casi un estándar. Pertenece a React. Es una librería pequeña de unos 2kb de tamaño. Ya que es únicamente JavaScript es independiente del framework o librerías que se utilicen para el desarrollo. Aunque "Flux"permite el uso de varios "Stores" "Redux" lo simplifica a uno solo.

• Reducers: Son las funciones encargadas de realizar los cambios en el Store. Ante los mismos datos de entrada estas funciones devuelven siempre el mismo resultado permitiendo encontrar los errores mas fácilmente. Los estados no se modifican si no que se crea una nueva copia a partir del anterior.

Como solo se tiene un "Store" la librería permite crear y combinar varios "reducers" pudiendo modularizar la aplicación fácilmente. Cada "reducer" se dedicara a un estado o a un conjunto de datos diferentes.

Lenguajes

• JSX: Un lenguaje que acompaña a React, el cual es un lenguaje que permite fácilmente conectar la lógica de la aplicación con los elementos que se muestran en la vista en tiempo real.

• ECMA6 Es el nuevo estándar de JavaScript, el cual utilizamos para programar la lógica de la aplicación. Es mas sencillo y eficaz que el antiguo.

Frameworks

El framework base sobre el que trabajamos es React Native, un framework de desarrollo multiplataforma móvil creado por Facebook para poder crear apps para iOS y Android utilizando el mismo código base. Se ha escogido este framework porque ofrece mejor rendimiento que una aplicación web y porque seguimos teniendo acceso al código nativo de ambas plataformas en el caso de que haya que hacer algún cambio a bajo nivel.

Librerías

Sonido

Para poder reproducir sonidos, utilizamos la librería de React Native Sound, una librería que permite trabajar contra ficheros de audio de forma nativa en ambas plataformas. Las funcionalidades que incluye no son compatible al 100% entre todas las plataformas, pero si lo es para lo que se requiere por parte del proyecto, y nos permite jugar con la reproducción de sonidos para lo que queremos.

Brújula

Para la brújula, se ha utilizado la librería RNSimpleCompass, para su uso, se utiliza la única función implementada que permite recibir en grados (De 0 a 360) la situación actual. El dato se actualiza según el umbral mínimo de grados que se escoja para refrescar el valor. Es la única librería de React native que permite el acceso a la brújula.

Gestos

Para obtener los datos de los movimientos del teléfono y mapearlos para reproducir un sonido utilizamos RNSensor, la cuál permite recoger los datos del acelerómetro y del giroscopio, aunque para la aplicación solo hemos necesitado los datos del acelerómetro.

Grabación:

Para la grabación se utilizan dos librerías de react-native-audio AudioRecorder y AudioUtils, y otra de react-native PermissionAndroid que se utiliza en Android para que el usuario autorice el uso del micro.

Layout

Para poder organizar un poco la vista, dado que React Native no admite las clásicas etiquetas de HTMl. Para poder trabajar de forma similar a una tabla, hemos utilizado React Native Easy Grid. Que permite separar los elementos en un Grid