Veröffentlicht am 27-03-2019

Amine - Wenn du etwas liebst, lass es frei

Foto von Alex Knight auf Unsplash
SPOILER ALERT: Dies ist nur ein ehrlicher Beitrag von mir, in dem ich darüber nachdenke, was ich für ein bedeutendes Projekt hielt, an dem ich im letzten Jahr gearbeitet habe. Flamme meine Gedanken nicht zu sehr ... Außerdem mache ich meinen gesamten Code online verfügbar, vollständig Open Source.

REKAPITULIEREN:

Also ein paar Monate bis März 2018 zurückspulen. Ich sah mir viel mehr Anime an und wurde langsam müde von den Online-Streaming-Sites, die ich benutzte. Für den Anfang hatten die meisten von ihnen ärgerliche Anzeigen und anstößige Banner, die die gesamte Seite abdeckten. Jede Schaltfläche und jeder Link wurde mit Pop-up-Landminen durchsetzt, die beim Anklicken explodierten. Nun mag dies für den Durchschnittszuschauer besonders unwichtig erscheinen, aber für einen Binge-Watcher wie für mich eindeutig, wurden diese zu mehr als einem einfachen Haustier.

Ich schaute mich an anderen Streaming-Sites um, um zu sehen, was gerade gemacht wurde. Sites wie Masterani.me (RIP 2019) erregten mit ihrem sauberen und fließenden Design schnell meine Aufmerksamkeit. Was mir fehlte, war die Möglichkeit, Watchlisten mit MyAnimeList (mal) oder Kitsu-APIs zu synchronisieren und zu verfolgen. Ich stellte fest, dass ich ihre Website zum Ansehen von Inhalten benutzte und mich dann bei einer externen Website anmeldete, um zu verfolgen, was ich gerade angesehen habe. Außerdem war die Geschwindigkeit auf ihren Servern nicht gut ausbalanciert. Ich habe an bestimmten Tagen bemerkt, und zu bestimmten Zeiten (normalerweise Samstagabend) waren Videos buchstäblich unübertroffen. Die allzu bekannten Pausen aufgrund von Pufferung und inkonsistenten Serverquellen hinderten mich daran, meine Begeisterung voll zu genießen.

DER WUNSCH:

Ich dachte mir; Es musste eine kostenlose Plattform ohne Anzeigen und Verzögerungen geben, die meine Watch-Lists nachverfolgen konnte und über eine ansehnliche Anzahl hochwertiger Serverquellen verfügte, um hohe Ladezeiten auszugleichen. Ich konnte keinen finden oder kannte ihn zumindest nicht. Ich hatte ein Problem, das eine verzweifelte Lösung brauchte.

NULL ZU HELDEN ?:

Als ich mit Amine begann, hatte ich nur minimale Kenntnisse über Web-Apps und -Infrastruktur. Ich hatte fast keine Projekterfahrung mit Backend-Entwicklung; Ich hatte nicht viel mit Datenbanken, Routern oder anderen wichtigen serverseitigen Programmen (NodeJS, ExpressJS, ws, Routern, Middleware usw.) gearbeitet. Sicher, ich hatte mit vielem Zeug herumgespielt, aber nicht annähernd genug, um zu wissen, wie ich das erreichen kann, was ich wollte. Mein Frontend war, na ja, es war wirklich nur Bootstrap. Ich hatte Websites und clientseitige JavaScript-Anwendungen entwickelt, aber nichts mit Zustandsverwaltung und komplexen API-Aufrufen. So begann ich meine Reise des exponentiellen Wachstums und Lernens.

Einige meiner groben Brainstorming- und Forschungsnotizen

Ich entdeckte das Web-Scraping durch ein grundlegendes Puppenspiel-Tutorial (siehe Tutorial) auf Medium. In diesem Moment wurde mir klar, dass es sehr gut möglich ist, die unzähligen Anime-Quellen zu nutzen und sie zu einer zuverlässigen und redundanten Plattform zusammenzufassen.

Nach einem Monat war die Prototyp-Plattform endlich fertig. Mit etwas Kreativität, Improvisation und Inspiration konnte ich etwas erschaffen, das ich für unglaublich hielt. In dieser Zeit lernte ich die meisten der von mir verwendeten Bibliotheken wie ExpressJS, MongoDB und Pug. Das ist eine andere Sache über Projekte. Sie holen alles auf, was Sie bei der Arbeit wissen müssen.

Ein paar Screenshots meines frühen Prototyps in Aktion
Ich habe einfache Freude daran gefunden, meine Freunde meine Plattform testen zu lassen. Die Plattform funktionierte gut für das, was ich wollte, aber ich hatte das Gefühl, dass es nicht ganz so war, wie ich es wollte.

Straßenblöcke:

Es gab viele Probleme, die die Bereitstellung der Plattform für die öffentliche Nutzung verhindern. Für den Anfang wurde mein System von einem Server in meinem Keller gehostet. Ich habe einen Router verwendet, der vollständig von den HTTP-API-Endpunkten abhängig ist. Jetzt gab es intern kein großes Problem, jedoch bemerkte ich bald, dass das Vorhandensein eines SSL-Zertifikats aufgrund von Problemen mit CORS aufgrund von Problemen mit CORS das Funktionieren der Site verhinderte.

Probleme sind immer größer, wenn Sie sich ihnen stellen. Ich habe neue Dinge ausprobiert und wusste nicht, was mich erwartet. Im Nachhinein war die Tatsache, dass die Mehrheit der Plattform funktionierte, tatsächlich ein Wunder (in Anbetracht der Tatsache, dass es sich um Spaghetti handelte). Ich habe das CORS-Problem gelöst, indem ich die Mehrheit meiner API neu geschrieben habe. Innerhalb von ein paar Wochen habe ich den Großteil der HTTP-Routen auf Web-Socket-Routen umgestellt. Nun hatte ich mehr oder weniger die Basis des Backends aufgebaut.

REWORK:

Während mein Backend dort war, wo ich es wollte, fehlte mir mein Frontend. Ich fühlte mich durch die Bootstrap-Designs blockiert und es wurde immer schwieriger, den Status mit Pug-Mix-Ins und URL-Daten zu verwalten. Zu diesem Zeitpunkt habe ich mich zum ersten Mal für die Verwendung von React entschieden. Ich habe mich sofort mit React auseinandergesetzt, um zu lernen und mein Front-End wieder aufzubauen. Ich habe alle möglichen anderen Probleme entdeckt und die Komplexität moderner Front-End-Sites wirklich unterschätzt. Nach langem Bauen, Reparieren und Verschrotten war mein React-Frontend nun komplett.

Einige Screenshots von meinem ersten Frontend von React

FIREBASE:

Später baute ich die Plattform mit Firebase als Backend und Datenspeicher neu auf. Firebase war wie ein Hauch frischer Luft. Das System war sauberer, einfacher und stabiler. Ich habe die Echtzeitdatenbank als Ersatz für die Hälfte meiner API verwendet, und die Authentifizierung wurde weniger fehlerhaft. Die Verwendung von Firebase gab mir eine Vorstellung davon, wie sauber ein Backend sein sollte.

VORHANDEN:

Obwohl die Website in den letzten Monaten gehostet wurde, ist die Plattform seit einiger Zeit nicht mehr live (meine Server sind offline). Ich machte eine Pause, um zu versuchen, eine neue Perspektive zu finden, um herauszufinden, welche Schritte als nächstes zu unternehmen sind. Ich habe vor kurzem wieder mit Amine gearbeitet, und ich hoffe, dass es von Hunderten von Benutzern online genutzt wird. Ich fange mit neuen Frameworks und Implementierungstechniken an.

Die ganze Prämisse von Amine Version 2 ist nicht so sehr der Inhalt, sondern die Fähigkeit zu teilen und zu sehen, was andere Leute fühlen. Die Hoffnung besteht darin, eine Community rund um die Anime-Kultur aufzubauen und es den Menschen zu ermöglichen, sich über Story, Handlung und Emotionen zu verbinden. Die Plattform wird eine Vielzahl neuer Funktionen bieten, darunter mehr personalisierte Empfehlungen, mehr Streaming-Quellen, Chats, Freunde, interaktive Aktivitäten und vieles mehr. Wenn Sie über Amine diskutieren, mehr darüber erfahren oder einen Beitrag zu Amine leisten möchten, wenden Sie sich an mich (auf LinkedIn oder per E-Mail). Ich würde gerne chatten.

Ich mache den gesamten Code für dieses Projekt auf GitHub verfügbar. Hier sind die verschiedenen Repositories:

  • Die ursprünglich fertiggestellte Prototypplattform
  • Die anfängliche Reaktion des Frontends
  • Der separate Umbau des Backends
  • Die aktuelle Reaktion der Front-End / W-Firebase-Integration
  • Scraper-Modul für 9 Jahre (veraltet)
  • Kratzmodul für Masteranime

Die Plattform ist nicht mehr live, aber die Demo läuft noch. Sie können die Seite hier besuchen.

FAZIT:

Hoffentlich hat Ihnen dieser Artikel gefallen. Dies ist nur eine kurze Zusammenfassung meiner Reise zu Amine. Ich habe viele technische Dinge und Gründe für einige der von mir verwendeten Praktiken und Entwurfsmuster übersprungen. Wenn Sie mehr erfahren möchten, schreiben Sie mir entweder eine Nachricht oder lassen Sie es mich in den Kommentaren wissen.

Ein großer Gruß an meinen Freund Adam Aboud, der mir bei der Bearbeitung dieses Artikels geholfen hat. Sie finden ihn auf LinkedIn.

Weitere Web-Goodies und Tech-Artikel kommen auf Sie zu… STAY TUNED

Möchten Sie mehr darüber erfahren, was ich mache? Schauen Sie sich einige meiner Projekte auf GitHub an oder verbinden Sie sich mit mir auf LinkedIn.

Siehe auch

Was sind die Fehler, die Leute machen, wenn sie sich für einen Computer-Reparaturbetrieb entscheiden?Geschenkideeneinfache Heimtextilien Dampfer BewertungDell-Monitor: Kenntnisse zum Ausführen eines Diagnosetests auf einem Dell-Monitor.Ihr einziges vertrauenswürdiges Blockchain-Projekt (Digitalbits)Sunsky Gutscheincodes