DESARROLLO DE UN SITIO WEB DE COMPRA DE
JUGUETES DE AFILIADOS DE AMAZON
O S C A R D E L A G U I L A O S C A R D E L A G U I L A
G I M É N E Z G I M É N E Z
U N I V E R S I T A T O B E R T A
U N I V E R S I T A T O B E R T A
D E C A T A L U N Y A ( U O C )
D E C A T A L U N Y A ( U O C )
( G E G A N T O Y S . C O M )
INTRODUCCIÓN
TAREAS, HERRAMIENTAS, FRAMEWORKS DISEÑO
IMPLEMENTACIÓN
PROBLEMAS Y SOLUCIONES
LÍNEAS FUTURAS DE DESARROLLO CONCLUSIONES
1 2 3 4 5 6 7
CONTENIDO DE LA PRESENTACIÓN
Actualmente la manera de trabajar y ganarse la vida es muy diferente de hace 30 años. Trabajamos desde casa,
compartiendo oficina, en la calle, en el metro...
Quiero presentar una nueva forma de trabajo que genera ingresos pasivos aprovechando lo que nos ofrecen algunas de las grandes plataformas de venta actuales, como Amazon, por lo que invirtiendo algo de
tiempo podríamos beneficiarnos.
1. INTRODUCCIÓN
2 4
CREA LA WEB DESDE
DONDE PROMOCIONAR LOS PRODUCTOS.
NO TE PREOCUPAS DE DEVOLUCIONES O
REEMBOLSOS.
NO ERES EL
RESPONSABLE DE
LLEVAR EL PRODUCTO A SU DESTINO.
OBTENCIÓN DE
COMISIÓN POR LA VENTA QUE SE REALIZÓ.
Afiliados de Amazon es un programa de marketing que consiste en que Amazon ofrece su inventario de productos a gente que quiera promocionarlos de forma online para que con las ventas producidas provinientes de tu web ganes una comisión.
PUNTOS CLAVE
1
3
Por lo tanto nuestro TFM consistirá a desarrollar un sitio web, que será básicamente un catálogo de juguetes
seleccionados del inventario de Amazon con información cada uno de ellos de valor añadido, con las siguientes
características: sitio web rápido, con interfaz amigable, con autentificación de usuario, con administración que permita realizar las operaciones de CRUD sobre el producto.
LA IDEA DEL PROYECTO
GEGANTOYS.COM
DISEÑO ENTORNO
TRABAJO DESARROLLO FUNCIONES
ADICIONALES
PRODUCTO Y CONCLUSIONES Justinmind
Angular Material, inserción de componentes (menú móvil y panel expansivo).
Tailwind: para realizar un diseño responsive fácilmente.
Bootstrap: componente garantiás
Windows
IDE: VSCode
Protocolos: SSH, FTP Herramientas: Xampp,
Alojamiento Web: Hostinger
ANGULAR Y LARAVEL MYSQL
BACKEND: API, Autentificación con Sanctum, envío de email con Mailable, CORS (orígenes cruzados)
FRONTEND: formularios reactivos, formData, Redux, effects,
DomSanitizer, carga lazy.
PWA, ANGULAR UNIVERSAL
La App puede descargarse como aplicación en escritorio y móvil mediante PWA.
Angular Universal: Páginas del sitio web pre-renderizadas para facilitar la indexación en los motores de búsqueda.
GEGANTOYS.COM
PageSpeed Insights: El producto obtenido tiene una buena
puntuación en escritorio, pero peor en la versión mobile. Requiere de un refactoring y de técnicas de mejora de rendimiento (formato de
imágenes modernos, optimización de imágenes, revisión de los
recursos utilizados, accesibilidad).
2. TAREAS, HERRAMIENTAS, FRAMEWORKS
a)Roles de usuario y Sitemap
Usuario no autentificado: inicio, catálogo, blog, garantías, login.
Usuario autentificado: experiencias, favoritos, perfil.
Administrador: administración juguetes y experiencias, publicar o no publicar.
d)Flujo
autentificación
En la página de login se encuentra la opción de dar de alta un usuario. Una vez logado podemos cambiar la contraseña en el perfil del usuario.
b)Funcionalidades destacadas
1. Menú lateral para usuario autentificado.
2. Menú mobile.
3. Formulario de contacto.
4. Sección de FAQs
5. Acceso a redes sociales.
f)Componente categorías
Es un componente cuya estructura es en forma de árbol de 3 niveles que coincide con categoría, subcategoría y
subsubcategoría. La navegabilidad por el árbol se realiza mediante Breadcrumbs e imágenes pertenecientes a la categoría.
c)Flujo compra juguete.
El usuario realiza una búsqueda en el
catálogo mediante buscador o categorías y clicando el botón rojo culmina en Amazon donde realiza la compra. Aquí se guardan datos de navegación y estadísticas.
e)Estudio
Usabilidad (Jacob Nielsen)
Facilidad de memorización (No hay carga cognitiva). Cotrol de errores: Mensajes de notificación y control errores en los
formularios sin confusión. Satisfacción:
Coherencia con los colores. Facilidad de aprendizaje: iconos minimalistas.
3. DISEÑO
REDUX + EFFECTS EN LA APP
He utilizado Redux + Effects para disponer de todos los juguetes a mostrar en memoria del cliente. De esta manera podemos regresar del detalle del juguete al listado catálogo sin necesidad de realizar scroll situándonos en el juguete desde donde lo visitamos.
ACCESO RESTRINGIDO MEDIANTE 'GUARDS'
Para controlar el acceso a las páginas que necesitan de usuario autentificado se realiza mediante Guards de Angular y con la
implementación del middleware HTTP INTERCEPTOR de Angular junto con el token tipo Bearer recibido de backend en la request.
CARGA LAZY O PEREZOSA
La App queda dividida en módulos para no cargar la App de una sola vez y disminuir el tiempo de espera inicial. Se va cargando bajo
demanda.
4. IMPLEMENTACIÓN
FRONTEND (ANGULAR)
Paginación mediante carga de un número de ítems determinado clicando un botón.
Fichero de configuración de Tailwind para crear estilos personalizados.
Validaciones personalizadas con Angular en los formularios de datos del usurario: comprobación de contraseñas iguales, formato de email correcto,...
Pipes de formateo de fecha a mostrar en pantalla y de mostrar imagen no disponible en caso no se
encuentre.
Uso del objeto FormDatas para poder enviar fichero al servidor (upload de la imagen).
Variables globales para controlar fácilmente el entorno de producción o desarrollo.
Uso de la caché para mejorar la experiencia de usuario configurando el service-worker.
1.
2.
3.
4.
5.
6.
7.
ENVIO DE EMAILS CON MAILABLE
La clase Mailable de Laravel en el backend consta de una vista que desarrollamos para dar formato el email que se envía al destinatario.
AUTENTIFICACIÓN MEDIANTE SANCTUM
Sanctum provee de un middleware que se encarga de comprobar que el token Bearer de autentificación que llega en la request sea correcto. La comprobación la realizamos para aquellas rutas o los endpoints que deseamos.
CONTROL 'MANUAL' DE LA PAGINACIÓN
La idea de gegantoys.com es que contenga pocos productos por lo que no utilizamos la interfaz de paginación de Laravel que nos
devuelve mucha información (número de ítems totales, enlace de siguiente página, ...), sino que la controlamos manualmente
mediante offset, limit en la consulta a la base de datos.
4. IMPLEMENTACIÓN BACKEND (LARAVEL)
Implementación de los endpoints que constituyen la API; que retorna los datos en formato JSON.
Implementación de un middleware para resolver el problema de recursos cruzados CORS.
Guardado de imágenes del producto en el sistema de ficheros del servidor mediante funciones PHP.
Datos de prueba mediante Seeders y factories que ayudan a resolver y mejorar el resultado final de la web.
Encriptación de las contraseñas.
ORM (Mapeador del objeto relacional) Facilita el trabajo para interactuar con la base de datos.
1.
2.
3.
4.
5.
6.
1 2
3
CONSTRUCCIÓN DE URL MEDIANTE
DOMSANITIZER
Cuando intentaba construir
dinámicamente la URL de acceso a una imagen en la plantilla HTML de Angular daba error porque no era una ruta segura. Las URL's las he
construido mediante DomSanitizer de Angular en el controlador del
componente.
PROBLEMAS EN APPLE
Para dispositivos Apple he
comprobado que debemos indicar el tipo de datos que vamos a enviar al servidor. En los formularios de la plantilla HTML debemos indicar enctype="multipart/form-data" si vamos a enviar FormData.
TAILWIND Y ANGULAR
Debemos instalar la dependencia Autoprefixer en nuestro proyecto Angular para que en producción los estilos Tailwind sean reconocidos.
5. PROBLEMAS Y SOLUCIONES FRONTEND
4
ANGULAR UNIVERSAL
Al realizar el pre-renderizado de la App de Angular no solamente
obtenemos páginas estáticas como resultado sino que propiciamos una buena indexación para los motores de búsqueda y al refrescar la página de la App donde nos encontremos, no nos dará la respuesta 404 de página no encontrada.
1 2 3
FORTIFY VS SANCTUM
Fortify posibilita autentificaciones, pero deben utilizarse junto con Sanctum en nuestro caso porque
Fortify es incompatible con SPA's. Para autentificación mediante token
usamos Sanctum.
PROBLEMAS CORS
Aun y que hemos implementado el middleware para solventar el problema de los CORS, he tenido que instalar tanto backend como frontend en la misma máquina. Quise instalar el frontend en Netlify utilizando el backend en el alojamiento de
Hostinger pero sin éxito porque un endpoint daba problemas de CORS (los demás endpoints funcionaban correctamente).
CARGA DE JUGUETES REALES
Para la carga de productos reales en la base de datos se ha realizado
mediante la función de importar en phpMhyAdmin sobre la tabla juguetes.
Desde un fichero que aconsejamos que sea con el formato o extensión de .ods, para no generar errores en la carga.
5. PROBLEMAS Y SOLUCIONES BACKEND
PEQUEÑAS
Mantener la página cuando la refrescamos
almecenando el token de sesión en la memoria del navegador.
Confirmación de borrado de ítemos mediante ventana emergente o similar.
Adición de un optimizador de imágenes en desarrollo
Mejorar el control de errores (estados, visualización de los errores ) para facilitar el mantenimiento.
Deshabilitar botón cargar más si no hay ítems
GRANDES
Aplicar técnicas SEO para la indexación correcta en los motores de búsqueda mediante datos
estructurados.
Realizar una mejora del código para optimizar los resultados obtenidos en pagespeed insights.
Adición de vídeo en el detalle de juguete mediante youtuber-player o similar.
Diseño nuevo de la página de inicio.
Animaciones
No soy un robot: formulario de contacto Autentificación: Reseteo de contraseña.
Verificación de email
6. LÍNEAS FUTURAS DE DESARROLLO
Implementado con varias y modernas tecnologías.
Cubre muchas de las funcionalidades comunes a los sitios web actuales.
Escalable por la naturaleza de las tecnologías empleadas.
Consta de componentes reutilizables.
CONCLUSIONES DEL
PRODUCTO
GRACIAS
A CONTINUACIÓN DESEO DAR LAS
GRACIAS A TODO EL EQUIPO DOCENTE DE ESTE MÁSTER QUE CON SU PASIÓN Y
SERVILISMO ME HAN MOTIVADO, AÚN MÁS, PARA REALIZAR UN MEJOR TRABAJO.
