Tabla de contenidos
1. Introducción
2. La molestia del deslizamiento manual en TikTok
3. Explorando posibles soluciones
4. Reconstruyendo la interfaz de TikTok
5. Rediseñando la versión de escritorio
6. Implementando el front-end con React
7. Introduciendo Scroll Snap para desplazamiento automático
8. Manejando la reproducción de video y eventos de desplazamiento
9. Agregando funcionalidad de backend con Node.js
10. Alojando la aplicación en gcore
11. Conclusión
Introducción
TikTok se ha convertido en una plataforma popular para compartir videos cortos, pero una gran molestia es la falta de desplazamiento automático. En este artículo, exploraremos los desafíos de implementar el desplazamiento automático en TikTok y discutiremos posibles soluciones. También profundizaremos en el proceso de reconstruir la interfaz de TikTok, rediseñar la versión de escritorio e implementar el front-end utilizando React. Además, cubriremos el uso de Scroll Snap para desplazamiento automático, el manejo de la reproducción de video y eventos de desplazamiento, la adición de funcionalidad de backend con Node.js y el alojamiento de la aplicación en gcore. ¡Vamos a sumergirnos!
La molestia del deslizamiento manual en TikTok
Una de las frustraciones que muchos usuarios de TikTok enfrentan es la necesidad de deslizar manualmente para navegar entre videos. Esto puede ser particularmente inconveniente cuando se realiza varias tareas o cuando las manos están ocupadas. Inicialmente, busqué una configuración dentro de la aplicación TikTok para habilitar el desplazamiento automático, pero para mi decepción, no existía tal opción. Esto me llevó a explorar soluciones alternativas.
Explorando posibles soluciones
Para abordar la falta de desplazamiento automático, comencé investigando el algoritmo de TikTok y sus APIs. Mi objetivo era encontrar una manera de implementar el desplazamiento mientras se extraían videos de la aplicación. Sin embargo, descubrí que muchas de las APIs de TikTok están restringidas, lo que dificulta el acceso directo a las URL de video. A pesar de mi investigación, no pude encontrar una solución sencilla dentro del marco existente de TikTok.
Reconstruyendo la interfaz de TikTok
Sin dejarme desanimar por las limitaciones de la aplicación TikTok, decidí tomar el asunto en mis propias manos. Me embarqué en un proyecto para reconstruir toda la interfaz de TikTok desde cero, tanto el front-end como el back-end. Esto me permitiría introducir la función de desplazamiento automático tan necesaria y dar a los usuarios la capacidad de cargar sus propios videos.
Rediseñando la versión de escritorio
Durante el proceso de reconstrucción de la interfaz de TikTok, noté que la versión de escritorio de TikTok carecía de la misma estética y eficiencia que la versión móvil. Para abordar esto, aproveché la oportunidad para rediseñar la versión de escritorio, asegurándome de que se alineara con la estética de diseño de la versión móvil. Realicé ajustes para optimizar la utilización del espacio, acomodar comentarios adicionales e incluso consideré introducir una interfaz de paisaje para videos.
Implementando el front-end con React
Para desarrollar el front-end de la interfaz de TikTok reconstruida, elegí usar React debido a su estructura basada en componentes y facilidad de desarrollo. Aprovechando Create React App y la biblioteca de componentes de estilo, creé componentes pequeños y reutilizables para construir la interfaz. Este enfoque permitió una integración eficiente de CSS y facilitó la reutilización de código en el futuro.
Introduciendo Scroll Snap para desplazamiento automático
Después de una extensa experimentación, me topé con una propiedad CSS notable llamada Scroll Snap. Esta propiedad permite el desplazamiento automático a secciones específicas, proporcionando una experiencia de usuario perfecta. Scroll Snap funciona en varios dispositivos y navegadores, lo que lo convierte en una solución ideal para implementar el desplazamiento automático en TikTok.
Manejando la reproducción de video y eventos de desplazamiento
Para lograr la sincronización de la reproducción automática y el desplazamiento, necesitaba combinar Scroll Snap con JavaScript. Busqué ayuda en Stack Overflow y descubrí una biblioteca que abordaba algunos de los desafíos que enfrentaba. Al incorporar esta biblioteca en mi proyecto, pude reproducir automáticamente videos cuando entraban en la vista y detenerlos.
