Diferència entre revisions de la pàgina «Tattook»

De Wiket
Salta a la navegació Salta a la cerca
 
(Hi ha 18 revisions intermèdies del mateix usuari que no es mostren)
Línia 1: Línia 1:
−
'''Proyecto crédito de síntesis Joel Jiménez'''<br>
+
'''Proyecto crédito de síntesis de Joel Jiménez'''<br>
 
== '''Descripción''' ==
 
== '''Descripción''' ==
 
Tattook​ es una aplicación móbil y web inspirada en el concepto de negocio de booking​,  
 
Tattook​ es una aplicación móbil y web inspirada en el concepto de negocio de booking​,  
Línia 5: Línia 5:
 
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. <br>
 
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. <br>
 
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.  
 
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''' ==
 +
<ol>
 +
  <li>https://github.com/jjlorente/tattook-front/tree/development</li>
 +
  <li>https://github.com/jjlorente/tattook-back/tree/development</li>
 +
</ol>
  
 
== '''Funcionalidades''' ==
 
== '''Funcionalidades''' ==
Línia 39: Línia 48:
 
   <li>Heroku</li>
 
   <li>Heroku</li>
 
   <li>Google cloud</li>
 
   <li>Google cloud</li>
 +
</ol>
 +
 +
== '''Diagrama de despliegue''' ==
 +
[[Image:DiagramaTattook.png|500px]]
 +
 +
== '''Wireframes''' ==
 +
<gallery widths="200px" heights="300px" perrow="4">
 +
  Image:WireframeLogin.png|Login Cliente
 +
  Image:WireframeLoginArtista.png|Login Artista
 +
  Image:WireframeWall.png|Wall
 +
  Image:WireframeMapa.png|Google map artistas
 +
  Image:WireframeCarpetas.png|Portfolios
 +
  Image:WireframeFavorites.png|Favorites
 +
  Image:WireframeProfile.png|Profile
 +
  Image:WireframeAjustesProfile.png|Menu desplegable
 +
</gallery>
 +
 +
== '''Capturas de Tattook''' ==
 +
<gallery widths="500px" heights="400px" perrow="2">
 +
  Image:ImageT1.jpeg
 +
  Image:ImageT2.jpeg
 +
  Image:ImageT3.jpeg
 +
  Image:ImageT4.jpeg
 +
</gallery>
 +
 +
== '''Incidencias''' ==
 +
<pre>
 +
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.
 +
</pre>
 +
 +
== '''Líneas futuras''' ==
 +
<ol>
 +
  <li>Página web Tattook</li>
 +
  <li>Filtros de tatuadores, tags de tattoos, cercanía...</li>
 +
  <li>Opción entrar como invitado con limitaciones dentro de Tattook</li>
 +
  <li>Añadir valoración de tatuador, comentarios de otros usuarios en imágenes</li>
 +
  <li>Opción de reportar imagen</li>
 +
  <li>Tatuador premium</li>
 +
  <li>Reservar y pagar desde la app</li>
 
</ol>
 
</ol>
  
Línia 62: Línia 115:
 
   <li>Servicio llamada update usuario</li>
 
   <li>Servicio llamada update usuario</li>
 
   <li>Vista de carpetas (CRUD)</li>
 
   <li>Vista de carpetas (CRUD)</li>
−
   <li>Servicio carpetas (CRUD)</li>
+
   <li>Servicio carpetas</li>
 
   <li>API endpoint carpetas (CRUD)</li>
 
   <li>API endpoint carpetas (CRUD)</li>
 
   <li>Subida de imágenes realizada con cámara</li>
 
   <li>Subida de imágenes realizada con cámara</li>
Línia 81: Línia 134:
 
   <li>Añadir sección notificaciones en vista favoritos</li>
 
   <li>Añadir sección notificaciones en vista favoritos</li>
 
   <li>Opción reportar imagen, comentario o usuario + endpoint API</li>
 
   <li>Opción reportar imagen, comentario o usuario + endpoint API</li>
−
   <li>Entrar como invitado ... Specs por determinar</li>
+
   <li>Añadir Socket.io a la API</li>
−
   <li>Mapa ... Specs por determinar</li>
+
  <li>Conectar aplicación con la API Socket.io</li>
−
   <li>Chat ... Specs por determinar</li>
+
  <li>Definir eventos Socket.io (Recibir y enviar mensajes)</li>
 +
  <li>Definir eventos filtrados por usuario (Mensaje al usuario objetivo)</li>
 +
  <li>Guardar mensajes en la BD con los eventos</li>
 +
  <li>Crear vista listado chats</li>
 +
  <li>Crear vista chat privado</li>
 +
  <li>Instalar y configurar plugin Google Maps para Ionic</li>
 +
  <li>Crear vista mapa</li>
 +
  <li>Utilizar sistema de geolocalización para situar el mapa en la posición actual</li>
 +
  <li>Endpoint API recoger tatuadores cercanos</li>
 +
  <li>Poner marcas en el mapa de todos los tatuadores</li>
 +
   <li>Añadir opción de entrar como invitado en el login</li>
 +
   <li>El invitado solo tiene opción de visualizar el muro y perfiles de tatuadores sin ninguna otra opción (Me gusta, seguir, etc)</li>
 
</ol>
 
</ol>
  
 
== '''Sprint 1 - 30H''' ==
 
== '''Sprint 1 - 30H''' ==
 
<ol>
 
<ol>
−
   <li>Diseñar colecciones BD - '''2h'''</li>
+
   <li><strike>Diseñar colecciones BD</strike> - '''2h'''</li>
−
   <li>Generar keys Google console - '''3h'''</li>
+
   <li><strike>Generar keys Google console</strike> - '''3h'''</li>
−
   <li>Login Google cliente - '''2h'''</li>
+
   <li><strike>Login Google cliente</strike> - '''2h'''</li>
−
   <li>Login Google artista - '''2h'''</li>
+
   <li><strike>Login Google artista</strike> - '''2h'''</li>
−
   <li>Mostrar todas las coincidencias al introducir dirección (Login artista) - '''6h'''</li>
+
   <li><strike>Mostrar todas las coincidencias al introducir dirección (Login artista)</strike> - '''6h'''</li>
−
   <li>Crear API login - '''4h'''</li>
+
   <li><strike>Crear API login</strike> - '''4h'''</li>
−
   <li>Enviar todos los datos necesarios a la API login - '''1h'''</li>
+
   <li><strike>Enviar todos los datos necesarios a la API login</strike> - '''1h'''</li>
−
   <li>Enviar dirección y coordenadas a la API login si es artista - '''1h'''</li>
+
   <li><strike>Enviar dirección y coordenadas a la API login si es artista</strike> - '''1h'''</li>
−
   <li>Subir API a heroku - '''3h'''</li>
+
   <li><strike>Subir API a heroku</strike> - '''3h'''</li>
−
   <li>Generar token y guardarlo al iniciar sesión para mantener sesión abierta - '''4h'''</li>
+
   <li><strike>Generar token y guardarlo al iniciar sesión para mantener sesión abierta</strike> - '''4h'''</li>
−
   <li>Botón cerrar sesión (Eliminar token) - '''1h'''</li>
+
   <li><strike>Botón cerrar sesión (Eliminar token)</strike> - '''1h'''</li>
−
   <li>Añadir menú tabs (Wall,gallery,favorites,profile) - '''1h'''</li>
+
   <li><strike>Añadir menú tabs (Wall,gallery,favorites,profile)</strike> - '''1h'''</li>
 
</ol>
 
</ol>
  
Línia 105: Línia 169:
 
<ol>
 
<ol>
 
   <li>Wireframes - '''1h'''</li>
 
   <li>Wireframes - '''1h'''</li>
−
   <li>Vista profile (Mostrar datos usuario) - '''2h'''</li>
+
   <li><strike>Vista profile (Mostrar datos usuario)</strike> - '''2h'''</li>
−
   <li>Servicio recogida datos usuario - '''3h '''</li>
+
   <li><strike>Servicio recogida datos usuario</strike> - '''3h '''</li>
−
   <li>API endpoint usuario (Update,read,delete) - '''3h'''</li>
+
   <li><strike>API endpoint usuario (Update,read,delete)</strike> - '''3h'''</li>
−
   <li>Formulario editar profile - '''2h'''</li>
+
   <li><strike>Formulario editar profile</strike> - '''2h'''</li>
−
   <li>Servicio llamada update usuario - '''1h'''</li>
+
   <li><strike>Servicio llamada update usuario</strike> - '''1h'''</li>
−
   <li>Vista de carpetas (CRUD) - '''4h'''</li>
+
   <li><strike>Vista de carpetas (CRUD)</strike> - '''4h'''</li>
−
   <li>Servicio carpetas (CRUD) - '''1h'''</li>
+
   <li><strike>Servicio carpetas</strike> - '''1h'''</li>
−
   <li>API endpoint carpetas (CRUD) - '''2h'''</li>
+
   <li><strike>API endpoint carpetas (CRUD)</strike> - '''2h'''</li>
−
   <li>Subida de imágenes realizada con cámara - '''3h'''</li>
+
   <li><strike>Subida de imágenes realizada con cámara</strike> - '''3h'''</li>
−
   <li>Subida de imágenes desde galería móvil - '''3h'''</li>
+
   <li><strike>Subida de imágenes desde galería móvil</strike> - '''3h'''</li>
−
   <li>Crear tags predefinidos para imágenes + crear tabla relación imagen + tag - '''1h'''</li>
+
   <li><strike>Crear tags predefinidos para imágenes + crear tabla relación imagen + tag</strike> - '''1h'''</li>
−
   <li>Mostrar imágenes relacionadas con carpetas - '''2h'''</li>
+
   <li><strike>Mostrar imágenes relacionadas con carpetas</strike> - '''2h'''</li>
−
   <li>Opción eliminar imagen - '''1h'''</li>
+
   <li><strike>Opción eliminar imagen</strike> - '''1h'''</li>
−
   <li>Añadir sección en profile de imágenes subidas - '''1h'''</li>
+
   <li><strike>Añadir sección en profile de imágenes subidas</strike> - '''1h'''</li>
 +
</ol>
 +
 
 +
== '''Sprint 3 - 30H''' ==
 +
<ol>
 +
  <li><strike>Vista muro mostrar imágenes ordenadas por fecha de publicación</strike> - '''2h'''</li>
 +
  <li>Añadir filtros de búsqueda (Distancia,tags) - '''3h '''</li>
 +
  <li><strike>Subvista al hacer clic en una foto (Mostrar imagen ampliada con información del usuario)</strike> - '''3h'''</li>
 +
  <li><strike>Añadir opción me gusta a la imagen y guardarla en favoritos</strike> - '''2h'''</li>
 +
  <li><strike>API endpoint guardar me gusta</strike> - '''2h'''</li>
 +
  <li><strike>Vista favoritos (Sección tattoos)</strike> - '''2h'''</li>
 +
  <li><strike>Vista perfil de otro tatuador</strike> - '''2h'''</li>
 +
  <li><strike>Opción seguir tatuador + endpoint guardar seguidores</strike> - '''2h'''</li>
 +
  <li><strike>Añadir sección tatuadores en vista favoritos</strike> - '''2h'''</li>
 +
  <li>Añadir sección notificaciones en vista favoritos - '''3h'''</li>
 +
  <li>Opción reportar imagen, comentario o usuario + endpoint API - '''4h'''</li>
 +
  <li>Añadir Socket.io a la API - '''3h'''</li>
 +
</ol>
 +
 
 +
== '''Sprint 4 - 30H''' ==
 +
<ol>
 +
  <li><strike>Conectar aplicación con la API Socket.io</strike> - '''2h'''</li>
 +
  <li><strike>Definir eventos Socket.io (Recibir y enviar mensajes)</strike> - '''2h'''</li>
 +
  <li><strike>Definir eventos filtrados por usuario (Mensaje al usuario objetivo)</strike> - '''3h'''</li>
 +
  <li><strike>Guardar mensajes en la BD con los eventos</strike> - '''2h'''</li>
 +
  <li><strike>Crear vista listado chats</strike> - '''3h'''</li>
 +
  <li><strike>Crear vista chat privado</strike> - '''4h'''</li>
 +
  <li><strike>Instalar y configurar plugin Google Maps para Ionic</strike> - '''2h'''</li>
 +
  <li><strike>Crear vista mapa</strike> - '''4h'''</li>
 +
  <li><strike>Utilizar sistema de geolocalización para situar el mapa en la posición actual</strike> - '''2h'''</li>
 +
  <li>Endpoint API recoger tatuadores cercanos - '''3h'''</li>
 +
  <li><strike>Poner marcas en el mapa de todos los tatuadores</strike> - '''3h'''</li>
 
</ol>
 
</ol>

Revisió de 13:18, 18 maig 2020

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

DiagramaTattook.png

Wireframes

  • Login Cliente

  • Login Artista

  • Wall

  • Google map artistas

  • Portfolios

  • Favorites

  • Profile

  • Menu desplegable

Capturas de Tattook

  • ImageT1.jpeg
  • ImageT2.jpeg
  • ImageT3.jpeg
  • ImageT4.jpeg

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
Obtingut de «https://wiket.esteveterradas.cat/index.php?title=Tattook&oldid=6599»