Tattook

Proyecto crédito de síntesis de Joel Jiménez

Descripción

Tattook​ es una aplicación móbil y web inspirada en el concepto de negocio de booking​, consiste en facilitar la búsqueda de un local de tatuaje o tatuador freelance para alguien que esté buscando el lugar ideal para tatuarse.
El cliente podrá ver los tatuadores más cercanos y sus valoraciones, comentarios, trabajos del tatuador, portfolios, precios … Y contactar directamente por chat con el tatuador o local.
En el caso del tatuador cuenta con una galería donde podrá mostrar todos sus trabajos, es totalmente gratis anunciarse en Tattook​ con opción a ser ​Tattook​ ​premium​ donde el tatuador obtendrá beneficios dentro de la aplicación, como por ejemplo mayor visibilidad.

APK para dispositivos Android

https://drive.google.com/open?id=1EO6gNxVW9NVmqeUahpZATfH2yzOtCRyj

GitHub

1. https://github.com/jjlorente/tattook-front/tree/development
2. https://github.com/jjlorente/tattook-back/tree/development

Funcionalidades

1. Login social.
2. Dos tipos de perfiles: Negocio y cliente.
3. Opción de entrar como invitado. Solo tendrá disponible la visualización del muro y perfiles de los negocios. Solo opción de lectura.
4. Constará de un muro principal donde se irán mostrando las últimas actualizaciones (imagenes de últimos trabajos, promociones...) de los negocios de la zona de interés marcada del cliente.
5. Filtro de búsqueda.
6. Comentario y valoración del cliente sobre el servicio.
7. Chat entre cliente y negocio.
8. Filtro de búsqueda por geolocalización.
9. El perfil de negocio tendrá la opción de crear portafolio de diseños y trabajos realizados con opción de añadir hashtags a las imágenes para facilitar la búsqueda a los clientes.
10. Opción reportar imagen, usuario, conversación y comentario de servicio.

Especificaciones no funcionales

Lenguajes utilizados

1. Javascript
2. Typescript
3. HTML
4. Sass

Frameworks

1. Ionic
2. Angular
3. Express
4. Socket.io

Servicios de producción

1. Heroku
2. Google cloud

Diagrama de despliegue

Wireframes

• 

  Login Cliente

• 

  Login Artista

• 

  Wall

• 

  Google map artistas

• 

  Portfolios

• 

  Favorites

• 

  Profile

• 

  Menu desplegable

Capturas de Tattook

• 
• 
• 
• 

Incidencias

Al principio del proyecto al ser Angular un framework donde nunca había programado, me costó entender como funcionaba el sistema de rutas, services, components, interceptors, modals, observable.
También tuve que aprender nuevas funcionalidades como subscribe, map, pipe, tap, ionViewWillEnter, ngOnInit...

Buscar mucha documentación con el tema del login de Google, console developer Google, maps.googleapis, Ionic.

La API en Node.js en general no tuve muchos problemas, lo que más me costó fue añadir Socket.io y entender como funcionaba el tema de los eventos ya que nunca lo utilicé anteriormente.

Líneas futuras

1. Página web Tattook
2. Filtros de tatuadores, tags de tattoos, cercanía...
3. Opción entrar como invitado con limitaciones dentro de Tattook
4. Añadir valoración de tatuador, comentarios de otros usuarios en imágenes
5. Opción de reportar imagen
6. Tatuador premium
7. Reservar y pagar desde la app

Backlog

1. Diseñar colecciones BD
2. Generar keys Google console
3. Login Google cliente
4. Login Google artista
5. Mostrar todas las coincidencias al introducir dirección (Login artista)
6. Crear API login
7. Enviar todos los datos necesarios a la API login
8. Enviar dirección y coordenadas a la API login si es artista
9. Subir API a heroku
10. Generar token y guardarlo al iniciar sesión para mantener sesión abierta
11. Botón cerrar sesión (Eliminar token)
12. Añadir menú tabs (Wall,gallery,favorites,profile)
13. Wireframes
14. Vista profile (Mostrar datos usuario)
15. Servicio recogida datos usuario
16. API endpoint usuario (Update,read,delete)
17. Formulario editar profile
18. Servicio llamada update usuario
19. Vista de carpetas (CRUD)
20. Servicio carpetas
21. API endpoint carpetas (CRUD)
22. Subida de imágenes realizada con cámara
23. Subida de imágenes desde galería móvil
24. Crear tags predefinidos para imágenes + crear tabla relación imagen + tag
25. Mostrar imágenes relacionadas con carpetas
26. Opción eliminar imagen
27. Añadir sección en profile de imágenes subidas
28. Vista muro mostrar imágenes ordenadas por fecha de publicación
29. Añadir filtros de búsqueda (Distancia,tags)
30. Subvista al hacer clic en una foto (Mostrar imagen ampliada con información del usuario)
31. Añadir opción me gusta a la imagen y guardarla en favoritos
32. API endpoint guardar me gusta
33. Vista favoritos (Sección tattoos)
34. Vista perfil de otro tatuador
35. Opción seguir tatuador + endpoint guardar seguidores
36. Añadir sección tatuadores en vista favoritos
37. Añadir sección notificaciones en vista favoritos
38. Opción reportar imagen, comentario o usuario + endpoint API
39. Añadir Socket.io a la API
40. Conectar aplicación con la API Socket.io
41. Definir eventos Socket.io (Recibir y enviar mensajes)
42. Definir eventos filtrados por usuario (Mensaje al usuario objetivo)
43. Guardar mensajes en la BD con los eventos
44. Crear vista listado chats
45. Crear vista chat privado
46. Instalar y configurar plugin Google Maps para Ionic
47. Crear vista mapa
48. Utilizar sistema de geolocalización para situar el mapa en la posición actual
49. Endpoint API recoger tatuadores cercanos
50. Poner marcas en el mapa de todos los tatuadores
51. Añadir opción de entrar como invitado en el login
52. El invitado solo tiene opción de visualizar el muro y perfiles de tatuadores sin ninguna otra opción (Me gusta, seguir, etc)

Sprint 1 - 30H

1. Diseñar colecciones BD - 2h
2. Generar keys Google console - 3h
3. Login Google cliente - 2h
4. Login Google artista - 2h
5. Mostrar todas las coincidencias al introducir dirección (Login artista) - 6h
6. Crear API login - 4h
7. Enviar todos los datos necesarios a la API login - 1h
8. Enviar dirección y coordenadas a la API login si es artista - 1h
9. Subir API a heroku - 3h
10. Generar token y guardarlo al iniciar sesión para mantener sesión abierta - 4h
11. Botón cerrar sesión (Eliminar token) - 1h
12. Añadir menú tabs (Wall,gallery,favorites,profile) - 1h

Sprint 2 - 30H

1. Wireframes - 1h
2. Vista profile (Mostrar datos usuario) - 2h
3. Servicio recogida datos usuario - 3h
4. API endpoint usuario (Update,read,delete) - 3h
5. Formulario editar profile - 2h
6. Servicio llamada update usuario - 1h
7. Vista de carpetas (CRUD) - 4h
8. Servicio carpetas - 1h
9. API endpoint carpetas (CRUD) - 2h
10. Subida de imágenes realizada con cámara - 3h
11. Subida de imágenes desde galería móvil - 3h
12. Crear tags predefinidos para imágenes + crear tabla relación imagen + tag - 1h
13. Mostrar imágenes relacionadas con carpetas - 2h
14. Opción eliminar imagen - 1h
15. Añadir sección en profile de imágenes subidas - 1h

Sprint 3 - 30H

1. Vista muro mostrar imágenes ordenadas por fecha de publicación - 2h
2. Añadir filtros de búsqueda (Distancia,tags) - 3h
3. Subvista al hacer clic en una foto (Mostrar imagen ampliada con información del usuario) - 3h
4. Añadir opción me gusta a la imagen y guardarla en favoritos - 2h
5. API endpoint guardar me gusta - 2h
6. Vista favoritos (Sección tattoos) - 2h
7. Vista perfil de otro tatuador - 2h
8. Opción seguir tatuador + endpoint guardar seguidores - 2h
9. Añadir sección tatuadores en vista favoritos - 2h
10. Añadir sección notificaciones en vista favoritos - 3h
11. Opción reportar imagen, comentario o usuario + endpoint API - 4h
12. Añadir Socket.io a la API - 3h

Sprint 4 - 30H

1. Conectar aplicación con la API Socket.io - 2h
2. Definir eventos Socket.io (Recibir y enviar mensajes) - 2h
3. Definir eventos filtrados por usuario (Mensaje al usuario objetivo) - 3h
4. Guardar mensajes en la BD con los eventos - 2h
5. Crear vista listado chats - 3h
6. Crear vista chat privado - 4h
7. Instalar y configurar plugin Google Maps para Ionic - 2h
8. Crear vista mapa - 4h
9. Utilizar sistema de geolocalización para situar el mapa en la posición actual - 2h
10. Endpoint API recoger tatuadores cercanos - 3h
11. Poner marcas en el mapa de todos los tatuadores - 3h