Índice
1. Introdução
2. O Aborrecimento do Deslize Manual no TikTok
3. Explorando Possíveis Soluções
4. Reconstruindo a Interface do TikTok
5. Redesign da Versão Desktop
6. Implementando o Front-End com React
7. Introduzindo o Scroll Snap para Rolagem Automática
8. Lidando com a Reprodução de Vídeo e Eventos de Rolagem
9. Construindo o Back-End com Node.js
10. Implantação do Aplicativo na Nuvem
11. Conclusão
Introdução
O TikTok tornou-se uma plataforma popular para compartilhar vídeos curtos, mas uma grande frustração é a falta de uma função de rolagem automática. Neste artigo, exploraremos os desafios de implementar a rolagem automática no TikTok e discutiremos possíveis soluções. Também abordaremos o processo de reconstrução da interface do TikTok, o redesign da versão desktop e a implementação do front-end usando React. Além disso, abordaremos o uso do scroll snap para rolagem automática, lidando com a reprodução de vídeo e eventos de rolagem, construindo o back-end com Node.js e implantando o aplicativo na nuvem. Vamos mergulhar!
O Aborrecimento do Deslize Manual no TikTok
Uma das frustrações que muitos usuários do TikTok enfrentam é a necessidade de deslizar manualmente para navegar entre os vídeos. Isso pode ser particularmente inconveniente quando se está fazendo várias tarefas ao mesmo tempo ou quando as mãos estão ocupadas. Inicialmente, procurei uma configuração dentro do aplicativo TikTok para habilitar a rolagem automática, mas para minha decepção, nenhuma opção desse tipo existia. Isso me levou a explorar soluções alternativas.
Explorando Possíveis Soluções
Para resolver a falta de rolagem automática, comecei investigando o algoritmo do TikTok e suas APIs. Minha ideia inicial era criar uma camada sobre o aplicativo, semelhante a um iframe, que permitisse a rolagem enquanto puxava os vídeos. No entanto, descobri que muitas das APIs do TikTok são restritas, tornando desafiador o acesso direto às URLs dos vídeos. Apesar de extensa pesquisa, não consegui encontrar uma solução simples dentro do framework existente do TikTok.
Reconstruindo a Interface do TikTok
Sem se deixar desanimar pelas limitações do aplicativo TikTok, decidi tomar as rédeas e reconstruir toda a interface do TikTok do zero. Isso envolveu o desenvolvimento de componentes tanto do front-end quanto do back-end. Começando pela fase de design, usei o Figma para mapear e projetar uma versão aprimorada da interface do TikTok. Foquei em melhorar a versão desktop, que achei inferior em comparação com a versão móvel.
Redesign da Versão Desktop
Ao redesenhar a versão desktop do TikTok, meu objetivo foi manter a consistência com a versão móvel, ao mesmo tempo em que otimizava o uso do espaço na tela. Coloquei o menu no topo, invertido em relação à versão móvel, e aloquei mais espaço para vídeos no lado direito. Além disso, fiz provisões para exibir comentários, com foco em destacar os principais comentários. Até considerei incorporar designs de modo paisagem para incentivar os usuários a criar mais conteúdo nesse formato.
Implementando o Front-End com React
Para dar vida à interface do TikTok redesenhada, escolhi usar o React por sua estrutura baseada em componentes e facilidade de desenvolvimento. Aproveitando o Create React App, configurei rapidamente o projeto e utilizei a biblioteca de componentes de estilo para integração e reutilização eficientes do CSS. Dividi o conteúdo em pequenos componentes, com a maioria residindo no arquivo app.js. Embora o arquivo tenha crescido bastante, ele permaneceu gerenciável para este projeto básico.
Introduzindo o Scroll Snap para Rolagem Automática
Depois de encontrar desafios com a implementação de rolagem automática, tropecei em uma propriedade CSS notável chamada scroll snap. Essa propriedade permite a rolagem automática para seções específicas, proporcionando uma experiência do usuário perfeita. O scroll snap funciona em vários dispositivos, incluindo desktops e telefones móveis, e é compatível com vários navegadores. Animado por essa descoberta, eu...
