📜 Inhaltsverzeichnis
Einführung
- Das nervige Problem mit TikTok
- Die Lösung: Autoscroll
Recherche zum TikTok-Algorithmus
- Die gesperrten APIs
- Neuaufbau der Benutzeroberfläche von Grund auf
Gestaltung der neuen Benutzeroberfläche
- Neugestaltung der Desktop-Version
- Verwendung von React und Style Components
Implementierung von Autoscroll
- Die Herausforderung von Autoscroll
- Entdeckung von Scroll Snap
- Verwendung von JavaScript zur Steuerung der Videowiedergabe
Hochladen von Inhalten mit Node.js
- Die Notwendigkeit eines Back-End-Servers
- Verwendung von Node.js für die API
- Testen und Bereitstellen des Servers
Schlussfolgerung
- Die Bedeutung von Autoscroll
- Vielen Dank an unseren Sponsor, gcore
📝 Artikel
Einführung
Das nervige Problem mit TikTok
TikTok ist eine beliebte Social-Media-App, mit der Benutzer kurze Videos erstellen und teilen können. Es gibt jedoch ein nerviges Problem mit der App: Sie können nicht automatisch scrollen. Stattdessen müssen Sie manuell wischen, um von einem Video zum nächsten zu gelangen. Dies kann sehr nervig sein, wenn Sie verschiedene Aufgaben erledigen und vielleicht Ihre Hände nicht verfügbar sind.
Die Lösung: Autoscroll
Um dieses Problem zu lösen, habe ich beschlossen, eine Autoscroll-Funktion zu implementieren. Zunächst dachte ich, es müsse sicherlich eine Einstellung innerhalb der TikTok-App geben, um dies zu aktivieren, aber es gibt keine. Dann habe ich ein wenig recherchiert und festgestellt, dass viele Menschen auch nach dieser Funktion suchen. Also dachte ich mir: "Ich bin ein Entwickler, ich könnte diese Funktion einfach erstellen."
Recherche zum TikTok-Algorithmus
Die gesperrten APIs
Ursprünglich habe ich einfach angefangen. Ich wollte nur ins iPhone springen und sehen, ob es eine Einstellung im Betriebssystem gibt, die Autoscroll aktivieren würde. Das würde das ganze Problem lösen, aber das geht auch nicht wirklich. Also begann ich online zu recherchieren, um zu sehen, wie der TikTok-Algorithmus genau aussieht. Wenn ich die APIs herunterladen kann, könnte ich die App so verwenden, wie sie ist, und eine Art Layer darüber erstellen, wie ein iframe, in dem wir das Scrollen implementieren können, während wir die Videos einbinden. Das ist jedoch nicht vollständig möglich. Viele der APIs für TikTok sind tatsächlich ziemlich stark gesperrt. Während Sie zu einem Video gehen und den eingebetteten Code abrufen können, können Sie nicht so einfach die Video-URLs aus der API abrufen. Ich konnte keinen Zugriff darauf bekommen, wie ich dachte.
Neuaufbau der Benutzeroberfläche von Grund auf
Nach all dieser Recherche dachte ich mir: "Weißt du was, das reicht. Ich werde die gesamte TikTok-Benutzeroberfläche von Grund auf neu aufbauen, einschließlich Front-End und Back-End. Ich werde es selbst hosten und es den Leuten ermöglichen, ihre eigenen Videos hochzuladen und dieses Autoscroll zu implementieren. Wenn ich das mache, mache ich es richtig."
Gestaltung der neuen Benutzeroberfläche
Neugestaltung der Desktop-Version
Zunächst habe ich skizziert und entworfen, wie diese TikTok-Benutzeroberfläche tatsächlich aussehen wird. Ich bin ziemlich gut im Design und wollte etwas schaffen, das vielleicht eine kleine Verbesserung gegenüber dem traditionellen Design hat. Das bedeutete, dass ich sowohl die mobile Version als auch die Desktop-Version von TikTok betrachten musste. Ich fand, dass die Desktop-Version ziemlich schlecht ist. Es sieht nicht wirklich wie die mobile Version aus und nutzt den Platz auch nicht so effizient wie es könnte. Also habe ich die Desktop-Version neu gestaltet, um viel besser auszusehen.
Verwendung von React und Style Components
Für die Entwicklung habe ich mich entschieden, React zu verwenden. React ist das, was ich gewohnt bin, insbesondere mit der komponentenbasierten Struktur. Es macht die Entwicklung immer sehr einfach. Ich verwende Create React App, um das Ganze zum Laufen zu bringen, und eine meiner Lieblingsbibliotheken in Create React App ist tatsächlich Style Components, weil es so einfach ist, das CSS für alle Komponenten hinzuzufügen und später wiederzuverwenden. Ich habe den Großteil des Inhalts in kleinen Komponenten zusammengestellt, wobei der Großteil davon in meiner app.js-Datei liegt. Ehrlich gesagt ist diese Datei viel zu groß mit Hunderten von Zeilen, aber das ist in Ordnung, da dies nur ein grundlegendes Projekt ist, und ich werde es auch Open Source machen, damit Sie es überprüfen und testen können. Sie können sogar dazu beitragen.
Implementierung von Autoscroll
Die Herausforderung von Autoscroll
Die Art und Weise, wie ich dies ursprünglich tun wollte, war, auf Stack Overflow zu springen und zu sehen, ob andere Leute dies bereits gelöst haben. Als ich das tat, fand ich viele verschiedene Optionen, aber ich stieß auf eine Bibliothek, die bereits eine Reihe dieser Probleme gelöst hatte und tatsächlich eine intelligente Möglichkeit hatte, diese Play- und Stop-Funktion zu implementieren. Was sie hier getan haben, ist eine Bibliothek zu erstellen, die automatisch abspielt, wenn das Video im Rahmen des Viewports ist, und sobald es den Viewport verlässt, automatisch stoppt.
Entdeckung von Scroll Snap
Ich musste jedoch immer noch herausfinden, wie ich die Autoscroll-Funktion implementieren kann. Hier stieß ich auf die coolste CSS-Eigenschaft, die ich je gesehen habe: Scroll Snap. Scroll Snap ist eine Möglichkeit, zu einem Abschnitt zu scrollen, und die Scrollposition automatisch in diesen Abschnitt zu "snappen". Dies funktioniert auf Desktops, auf Mobiltelefonen und sogar in allen Browsern. Ich bin wirklich beeindruckt, weil dies im Grunde alles abdeckt, was ich tun musste.
Verwendung von JavaScript zur Steuerung der Videowiedergabe
Jetzt brauche ich nur noch etwas JavaScript, um diese Aktion am Ende eines Videos zu steuern. Dazu muss ich ein wenig tiefer gehen, um herauszufinden, ob andere Leute dies vielleicht auf Stack Overflow gemacht haben. Hier brauchte ich drei Dinge. Das erste ist, dass Videos automatisch abgespielt werden, was ich ziemlich sicher bin, dass das Standard-HTML-Element für Videos bereits tun kann, wenn Sie das Tag Autoplay in die Syntax einfügen. Der zweite Teil war, dass eine Funktion gestartet wird, wenn ein Video fertig abgespielt wurde, was nicht
