Hogyan győzzük le az állásinterjúk kódolási kihívásait?

Az alábbi történet Jonathan Sexton története, segítségül szolgál azok számára, akik épp webfejlesztői állás interjújának küszöbén állnak. Fogadjátok sok szeretettel!


Ahogy már sokan tudjátok, néhány hete munkakeresési fázisban vagyok, és megpályáztam pár webfejlesztői állást ezalatt. Úgy gondoltam, hogy jó ötlet lenne megosztani veletek néhány kihívást, amibe belefutottam ez idő alatt.



Illetve nem csak ezt, hanem hogy én hogyan álltam neki a megoldásuknak. Természetesen rengeteg módszer létezik a kihívások megoldására, csupán én így közelítettem meg.


Nem fogok semmi olyan információt megosztani, mely az interjúfolyamat sajátossága, illetve ami alapján fel lehetne ismerni a céget, a folyamat integritásának megőrzése végett.


Kezdjünk is bele!


A kihívás


Nem olyan régen kaptam meg ezt, és kifejezetten jól esett megoldani:


Feladat: Add vissza fordított időrendben posztok egy végponttól vett, formázott listáját


Hogy megvédjem a céget és az adatait, nem fogom megosztani az URL-t, ahonnan az információt visszaadtam, helyette egy generikus linket fogok használni a JSONPlaceholder-ről (ami egy szuper, ingyenes és nyílt forráskódú API fejlesztőknek, ha szükségük van generikus kívülről jövő adatokra) az alábbi kódban.

Itt a HTML amivel kezdtem, hogy legyen valahol kimutatni az eredményeinket:


                                      Alapvető HTML boilerplate kód


A <ul> címkének van azonosítója, szóval a folyamat során később tudjuk formázni.


Az adatok megszerzése a végponttól


Rendben, most ássunk bele egy kicsit a JavaScript részébe a dolognak. Először is, én szeretem beállítani az outputot és a display változóimat:


                   A visszaadott kód megjelenítésére használt változóink


Én a let parancsot használom az output változónál, és null-ra állítom, mert később még meg fogjuk változtatni az értékét. A list változó konstansként van deklarálva, mivel az értéke nem fog változni.


                             Az adatok megszerzése a végponttól 


A fenti példában deklaráltunk egy getData nevű arrow függvényt egy try...catch blokkba ágyazva (ez egy tisztább/könnyebben használható és olvasható módja a kivételkezelésnek, ami kipróbálja a kód egy részét, és elkapja a kivételt, ha hiba keletkezik – alább majd a catch részét is látni fogjátok). Mivel az adatokat aszinkron kapjuk, így használnunk kell az async/await parancsokat is a megszerzésükhöz.


Amikor pedig deklaráltuk a data változónkat, a következő lépés egy változó beállítása, hogy a megkapott adatot egy JSON objektummá konvertálja, így egy számunkra használható formába kerüljön. Ezt a .json() metódussal tudjuk megtenni. Emellett azért is várunk az adatra, mert ha kihagynánk az await kulcsszót, a JavaScript megpróbálná a data változót JSON-ná konvertálni, de az adat még nem lenne ott, mivel egy aszinkron API felől érkezik.


                                         A dicsőséges adatunk!


A szekció legutolsó sorában a console.log-ot alkalmazzuk az adatainkon, hogy megbizonyosodjunk róla, hogy mindent megkapunk amit akarunk. Van egy tömbünk tele objektumokkal. Azt is észreveheted, hogy a published_at kulcs tárolja a dátumokat, és nincsenek semmilyen sorrendbe

állítva. A formátumuk sem egy egyszerű négyszámjegyű évszámból áll, ami alapján könnyű lenne őket fordított időrendbe rendezni. Ezzel még dolgoznunk kell.


Az adataink manipulálása


                                   A data változónk lemásolása


Itt deklaráljuk a dataCopy változót, mely a spread operator(…) segítségével tömbbé alakított dataJSON változóra mutat. Lényegében lemásoljuk a visszaadott JSON adatokat, hogy ne az eredetivel dolgozzunk (rossz ötlet), miközben tömbbé alakítjuk, hogy iterálni tudjunk rajtuk. Ezután rendezzük a tömböt. A rendezés egy hihetetlenül hasznos tömbművelet, mely a tömbindexeket a mi akaratunknak megfelelően sorba állítja, mely a rendezésnek átadott függvény alapján történik.


Általában célszerű az adatokat érték szerint rendezni (legkisebbtől a legnagyobbig), így kivonjuk az a paramétert a b-ből. De mivel most fordított időrendben kell megjeleníteni az adatainkat, úgy döntöttem, hogy egy új dátumot hozok létre (a new operátor és a Date beépített metódus segítségével, mely egy új, platformfüggetlen, formázott dátumpéldányt hoz létre). Most pedig, mivel az a és a b a tömbindexeinkben ülő objektumokat reprezentálják, hozzá tudunk férni a kulcs/érték párokhoz az említett objektumokban. Szóval egyszerűen kivonjuk a b.published_at értékét az a.published_at értékéből, és ez megadja nekünk a kívánt fordított időrendi sorrendet.


A munkánk gyümölcseinek megjelenítése


Emlékszel még az output változónkra, melynek a program elején null értéket állítottunk?

Hát most elérkezett az ideje!


                          Az output változó most behozza a lemaradását


Most azért folyik itt egy-két dolog. Először is, új értéket állítunk az output változónak a dataCopy változónk átmapelésével, a map metódus használatával. Ez a metódus visszaad egy új tömböt úgy, hogy a megadott függvényt lefuttatja az összes indexre. Az item paraméter a tömbben található objektumainkat reprezentálja, melyeket a végponttól kaptunk, és így hozzá tud férni az összes olyan tulajdonsághoz, mint a title vagy a published_at.

Két listaelemet adunk vissza, mindkettőben egy <span>-nel (formázási célból), emellett egy stringet a Title és a Date Published fejlécekhez. Ezek belsejében megtalálhatók a változók, melyek template literálok használatával állítják a címet és a dátumot minden posztnál. Ezután beállítjuk a list változónk innerHTML-jét az output változóval megegyezőre.

Végül pedig megvan a bezáró kapcsos zárójelünk, és a try...catch blokkunk hibakezelése a függvényhívásunk mellett.


              Ez a kódrészlet lekezel minden hibát, és megjeleníti őket konzolban


Végső kód


Így néz ki jelenleg a teljes kódunk:


                                     A kódbázisunk teljes egésze


És itt az alap CSS formázás:


                   Azt mondtam alap formázás? Mert én alapra gondoltam


És itt a munkánk eredménye a nagyon alap formázással együtt:


                                        Hát nem gyönyörű?


Ahogy azt láthatod, telejsítettük a követelményeket, és a lista ténylegesen fordított időrendben jelenik meg. Juppí!


(Forrás)

***
Ha Te is kreatív, kihívásokkal teli mérnök állást keresel minoségi munkáltatónál, jó helyen jársz, mert a Schönherz Bázis épp azért jött létre, hogy Neked segítsen.
Gyere, nézz szét aktuális állásaink között!


2019.09.20