Zenelejátszó készítése a Reddithez, és vírusos lesz az üzlet

Néhány éve kezdtem el dolgozni a Reddit zenelejátszóján, egészen pontosan két éve. Egy asztali natív alkalmazásnak kellett volna lennie. Meg akartam tanulni, hogyan készítsek ilyet webes technológiák használatával, ezért beleestem a Node.js és a node-webkit (most NW.js) használatába. Úgy tervezték, hogy a YouTube zenelejátszója legyen közvetlenül az asztalon.

A kezdet

Akkor kezdődött, amikor zenét hallgattam a RedditPlaylisteren. Akkoriban a fő kifogásom az interfész volt. Nem tudtam könnyen subredditeket váltani, hiányoztak azok a funkciók, amelyek lehetővé tennék a videó lejátszását, nem lehetett szavazni, kommentelni a linkeket, és nem volt szexi.

Átmásoltam a lejátszási lista által kiválasztott alredditeket, és ezt használtam alapként, és amint felfedeztem, hozzáadtam további feliratokat. Néhány nap munka után volt egy működő alkalmazásom. A SoundCloud könnyen működött, mivel a hangot a natív

Küzdelmeim az asztali alkalmazással

De ahogy haladtam előre, észrevettem, hogy problémák vannak a videók lejátszásával a node-webkit Flash-engedélyei miatt, és csak a Chromium saját kodekeinek hiánya miatt nem tudtam hangként streamelni. A Node-webkit a Chromiumra épül, ezért nincs benne, mert nyitottak és ingyenesek akarnak maradni. És nem szállíthatja őket együtt. A Chrome azonban képes.

Volt néhány architektúraproblémám, ahol egyre nehezebb volt új funkciókat szállítani, mert minden annyira összefonódott. Gyakran, ha megváltoztattam egy dolgot, az eltört valami mást. Egy eseménynek több kódrétegen kellett keresztülmennie ahhoz, hogy például PlayProgress eseményt tudjak fogadni a folyamatjelző sávra.

Így miután küszködtem vele, először megpróbáltam integrálni a Flash-t és küszködtem a Flash-engedélyekkel, majd megpróbáltam a zenét a natív audiofunkciókon keresztül irányítani, később feladtam az ötletet, hogy asztali alkalmazássá tegyem. Megpróbáltam Chrome-alkalmazást létrehozni, de nem tudtam működésre bírni néhány funkciót, például nem tudtam működésbe hozni egy előugró ablakot, amelyen a dal megfelelően játszik le egy videót.

Olvasni:  Szakértői tippek az AI-eszközök zökkenőmentes integrációjához írószoftverekkel és -platformokkal

A webre

Abban az időben jól beállítottam, hogy a Grunt segítségével összefűztem és kicsinyítettem a kódot, és elküldtem az adott fájlokat egy Chrome-alkalmazásba, egy csomópont-webkit alkalmazásba, és megpróbáltam mindegyiket létrehozni. Hozzáadtam egy újabb lépést, ahol építek valamit az internetre, valamit, amit egy böngésző megnyithat és lejátszhat ott. Megvolt a kick-ass domain nevem il.ly regisztrált, és egyszerűen elhelyezte a kódot aldomainként.

Ez megoldotta a legtöbb problémámat a hanglejátszással kapcsolatban. Hozzáadtam billentyűparancsokat, multireddit támogatást, automatikus lejátszást, állandó hivatkozásokat, dalok keresését a Reddit megjegyzésekben, 129 további alreddit és videó módot.

De az interfész nem volt elég jó, és még mindig volt kódszagom, ahol a kód írása egyre lassabb lett.

Ismétlés tovább és tovább

Abban az időben kezdtem belemenni a CoffeeScript-be. Tehát a nulláról kezdtem, és az egész projektet átépítettem, hogy a webre összpontosítsam, moduláris felépítéssel. Azt is szerettem volna, hogy egyszerű változtatásokat hajtsanak végre a programon, amikor csak akarom, anélkül, hogy meg kellene néznem, hogyan csináltam mindent.

Miután utánajártam egy alkalmazás megtervezésének, a Backbone.js használata mellett döntöttem, és egy eseményalapú rendszer mellett döntöttem. Ez csökkentette az iteráció bonyolultságát és sebességét. Új funkciókat írhatnék és modulokat adhatnék hozzá anélkül, hogy zavarnám a kód többi részét.

Hozzáadtam azokat a funkciókat, amelyeket szerettem volna hozzáadni, például az OAuth2-n és a Redditen keresztüli bejelentkezést. Aztán hozzáadtam olyan funkciókat, amelyekkel megjegyzéseket és pozitív szavazást adhatsz a dalokhoz, akár saját bejegyzésekhez is, hogy a felhasználók részt vehessenek a Reddit közösségben zenehallgatás közben.

Változtattam az alkalmazás kinézetén és érzetén, amikor megláttam a Spotify újabb verzióját, és ez megihletett. A változtatásnak köszönhetően egy olyan videót is tudtam hozzáadni, amely a jobb oldalsávban fog lejátszani, és megfelel a YouTube általános szerződési feltételeinek, ahol mindig meg kell mutatni a videót.

Olvasni:  Személyre szabás az UX-ben: Az Ön közelében lévő ügyfelek bevonása a Next.js Geolocation segítségével –

verzió 0.3

Eltartott egy ideig, amíg újra működni kezdtem, mert kidobtam az összes régi kódot, és mert eltartott egy ideig, míg felfogtam a használt új könyvtárakat. De örülök, hogy megtettem. Ahogy néhány naponta ismételtem az új kiadásokat, és a subredditen keresztül érkezett visszajelzésekkel, sikerült valami nagyszerűt alkotnom.

Olyan funkciókat kódoltam, amelyekkel korábban rendelkeztem, mint például a multireddit támogatás, a keresés és az egyéni subredditek. és új lehetőségeket adtunk hozzá, például távirányítóval. Aztán hozzáadtam a HTTPS-t, és 2014 augusztusában egy napnak neveztem, és más projekteken és szabadúszó munkákon dolgoztam.

Hetekkel az indulás előtt

2015 májusában kezdtem újra belevágni. Ekkor kijavítottam a kiemelkedő hibákat, frissítettem a függőségeimet, és még tovább finomítottam a felhasználói felületen. Frissítettem a logót, és váltottam néhány újabb könyvtárra, amelyek az elmúlt évben jelentek meg. A nevet is megváltoztattam
Zenelejátszó Reddithez hogy megfeleljen a Reddit TOS-ének, és hozzáadott egy névtelen távirányítót, amely tokeneken és QR-kódokon alapul.

Kitisztítottam a kódot, és hozzáadtam egy útmutatót a hozzájáruláshoz, és létrehoztam a Github-problémákat, hogy a potenciális közreműködők tudják, min kell dolgozni.

Aztán áthelyeztem a kódot egy Github szervezetbe, és a domain nevet musicplayer.io-ra változtattam, és az egészet robusztusabbá tettem.

Alkalmazott technológiák

Szoftver:

  • Háttér: Node.js CoffeeScript, express, jade, passport, redis, socket.io, Lodash használatával
  • Előtér: CoffeeScript, gerinc, Less, Lodash, Grunt, szemantikus felhasználói felület

Hardver: Debian futtatása io.js-sel, PM2 monitorként, VPS-en

Node.js a JavaScript a háttérben. Gyors és méretezhető hálózati alkalmazásokat írhat. Eseményvezérelt és könnyű.

használom Redis a munkamenet adatainak mentéséhez, így a bejelentkezett emberek bejelentkezve maradnak, ha később visszatérnek. Ez egy egyszerű, gyors és méretezhető kulcsérték adatbázis.

Socket.io távirányítóra való. Ha valaki bejelentkezett, QR-kódot készíthet, és például telefonnal vezérelheti a lejátszót. Jót szórakoztam ezzel, amikor két laptopon volt két hangszóróm különböző helyiségekben, és a távirányító funkcióval tudtam szinkronizálni a zenét.

Hátgerinc építészetként használták. Tetszett, hogy el tudtam különíteni a nézeteket és a gyűjteményeket, és van néhány hasznos beépített funkció. Nem keveredik semmilyen más adattal, mint például az Angular, és nem szabályozza, hogyan írja túl sokat a kódot.

Olvasni:  Foudroyer: Indexelő eszköz a Google, Bing, Yandex és Naver számára – Vélemények

Egyszerűen szeretek beleírni Coffeescript. Jól működik a Backbone-nal is, ahol könnyen létrehozhatok osztályokat vagy használhatok nyíl függvényeket. A kód egy kicsit tisztább lesz.

Kevésbé egy CSS előfeldolgozó. Ha nem tudod mi az, ki kell próbálnod. Használhat változókat és fészekválasztókat.

Röfög az az eszköz, ami mindent felépít. Itt fordítom le, és figyelem a kódom változásait, ahol azonnal lefordítom és újratölti a böngészőt. Van egy éles verziója is, ahol kicsinyítem és összefűzöm a fájlokat, így kevesebb sávszélességet használ.

Jade letisztultabb módja a HTML írásának és a sablonozási nyelvnek. Van benne mix és mi nem. Szeretem használni, és utálok HTML-t írni nélküle.

Expressz a szerver, a backendet MVC-ként állítottam be vele, mint Kraken. Minden külön van a saját moduljában.

Útlevél saját bővítményemmel kezeli a Reddit bejelentkezést.

Lodash segít a funkcionális javascript írásában. Nagyon egyszerűvé teszi a tömbökkel és gyűjteményekkel való munkát.

Indítás

Még mindig nem keltett fel nagy érdeklődést a Music Player, és nem mutattam be annyira másoknak, ezért úgy döntöttem, hogy kipróbálom az /r/InternetIsBeautiful oldalon. Elhelyeztem a zenelejátszó linkjét, és úgy gondoltam, legalább meglátogatok néhányat. De szinte azonnal felrobbant.

Elérte az /r/all címlapját, és néhány óráig a Reddit legfelső linkje volt. Pár percenként körülbelül 5000 látogatóm volt valós időben. Ahogy a megjegyzések száma nőtt, egész idő alatt azon dolgoztam, hogy ne omoljon össze a háttérben. A PM2-t monitorként használtam, és négy kiegyenlítővel fürt módban működtem.

Az alkalmazás nagyon könnyű volt. Csak a HTML és a JavaScript fájlokat kellett szállítanom. Az egyetlen valódi dolog, ami a háttérben történt, a távirányító socket.io integrációja volt. Szóval elég jól bírtam.

Még mindig attól tartottam, hogy minden percben elromlik valami, és javítottam a hibákat, amelyeket a felhasználók élőben jelentettek a megjegyzésekben. Hozzáadtam egy gyorsítótár-leállító mechanizmust, és a PM2 fürt móddal minden leállás nélkül újratölthetem az alkalmazást.

Olvasni:  SolveNote - A legokosabb számológép alkalmazás összetett számításokhoz - Üzleti

Az emberek adományozási lehetőséget kértek, ezért a következő néhány órában létrehoztam egy weboldalt a www.musicplayer.io oldalon, és hozzáadtam egy linket. Csináltam egy twitter fiókot és Facebook-oldalt, valamint tweeteket és blogokat követett említés használatával, és követett mindenkit, aki megemlíti a Reddithez készült Music Playert vagy a domain nevet.

Igazán elképesztő volt ennyi jó visszajelzést kapni az emberektől és azt a sok szeretetet, amit kaptam. Elképesztő a motivációm, hogy ilyen dolgokat csináljak. Nem pénzért vagy egy cégért, hanem azért, mert olyan terméket szeretnék készíteni, amire büszke lehetek, és magam is használnám.

“Minőségi cucc. Már találtam néhány olyan dolgot, ami tetszik a címlapon, amit általában nem hallanék.”

– Valószínűleg az egyik legjobb oldal, amit idén találtam.

A forgalom és a következmények

A zenelejátszó lett a hónap legfontosabb posztja, és még mindig az volt, amikor ezt a cikket írtam. Körülbelül 150 000 ülést kaptam 24 óra alatt, és jelenleg körülbelül 700-at szolgálok ki naponta. Az indítási robbanás gyorsan elhalt, de örülök, hogy a felhasználók jelentős részét megtarthatom. Az indulás előtt körülbelül 30 felhasználóm volt naponta.

Másnap az alkalmazást felvették a The Next Web-en és más blogokon. Szerepeltem a Product Huntban, és felvettek a Product Hunt készítőjére, ami egy nagyszerű közösség a termékek számára.

A forgalomnak és a SEO-nak köszönhetően néhány nappal azután tettem fel, hogy a “zenelejátszó” keresésnél a Google első oldalára tudtam kerülni, részben a domain név és a megfelelő név miatt. Így remélhetőleg fenntarthatóbb forgalom fog átmenni ezen a csatornán idővel.

Jelenleg arra koncentrálok, hogy olyan jó integrációkat adjak hozzá, amelyekkel más zenelejátszók nem rendelkeznek. Például egy parancssori felület, egy API vagy egy Telegram bot. Olyan dolgok, amelyek érdekelnek, és olyan dolgok, amiket szeretnék csinálni.

Új publikációk:

Ajánlott