La práctica consiste en crear una aplicación con los siguientes requisitos:

Obligatorios

• Pantalla con un listado FlatList y datos cargados desde el web services sobre la temática elegida.
• Pantalla de vista detalle al pulsar una celda del listado.
• Hacer uso de la librería Redux
• La app deberá usar uno de los componentes de navegación mostrados en las diapositivas del curso (Recomendado react-native-router-flux)

Opcionales

• El uso de este spinner Spinkit en los tiempos de carga, que tendremos que enlazar MANUALMENTE con nuestros proyectos nativos.
• Un formulario de añadir personaje (aunque no esté conectado contra un webservice)
• En caso de usar una API distinta o de añadir alguna funcionalidad extra, especificar en el Read.me del repositorio.

Es necesario tener instalado:

• Node: brew install node
• Watchman: brew install watchman
• React-Native: npm install -g react-native-cli

Descargar el proyecto:

git clone https://github.com/gemambu/marvelApp.git

e instalarlo:

cd marvelApp

npm install

Ejecutar en un terminal: npm start

Ejecutar en un segundo terminal:

• react-native run-ios en caso de querer arrancar el simulador de iOS
• react-native run-android en caso de querer arrancar el simulador de Android.

La API utilizada para la aplicación es la sugerida en la práctica: API de marvel.

Se han utilizado las siguientes librerías de terceros para el desarrollo de la aplicación:

• react-native-image-picker: Un módulo React Native que le permite utilizar la interfaz de usuario nativa para seleccionar medios de la biblioteca del dispositivo o directamente desde la cámara.
• react-native-router-flux: El primer enrutador declarativo React Native. Separa la lógica de navegación de la presentación.
• react-native-search-box: Un cuadro de búsqueda simple con animación, inspirado en la barra de búsqueda de ios. Ligero, rápido, flexible.
• react-native-spinkit: Una colección de indicadores de carga animados para React Native.

Se ha añadido una barra de búsqueda en el listado de personajes. Para ello, he uitlizado la librería react-native-search-box.

En cuanto el usuario escribe tres o más caracteres, se hace una consulta a la API de marvel buscando coincidencias de nombres que empiecen por el texto de búsqueda. Al pulsar sobre Cancelar, se borra el texto y se vuelve a mostrar el listado completo de personajes sin filtro.

Los datos al crear un personaje son:

• Nombre (obligatorio)
• Descripción (obligatorio)
• Imagen (opcional)

Además se ha añadido una longitud máxima de caracteres para el nombre (20, longitud por defecto) y la descripción (100).

Para los Input se ha utilizado el widget creado en clase, con algún cambio para hacerlo más personalizable (longitud máxima con 20 caracteres por defecto, opción de multilínea a false por defecto y número de líneas, con 1 línea por defecto)

Nota

Esta funcionalidad no es completa, ya que el API de Marvel no ofrece la posibilidad de salvar nuevos personajes.

• Añadir más información en la navegación de detalle de Personaje
• Añadir más endpoints en la aplicación, ya que el API de Marvel ofrece esta posibilidad.
• Si se añaden más endpoints, utilizar una arquitectura donde se puedan generalizar componentes para que el código sea reducido y reutilizable.
• Añadir la gestión de idiomas. Por defecto, todos los mensajes se han completado en Inglés pero todos los textos están incluidos en un único fichero para su manejo.
• Iconos de aplicación.