URL rövidítő 3. rész

Ugye szeretnénk csinálni egy URL rövidítő alkalmazást. Nincs ezzel semmi baj, mert azt mindenki szeret csinálni. Leginkább azért, mert mindenki más ToDo alkalmazásokat csinál 🙂

Az első részben megtudtuk, hogyan működik az AngularJS. Ezek után, a második részben raktunk mögé egy Node.js-t, hogy erre tudjunk építkezni. Itt az ideje összekötni a kettőt. Amikor beküldünk egy linket, akkor a szerver állítson elő egy rövid címet hozzá. És itt jön a harmadik rész.

Szerver oldali rész

Természetesen mindenkinek ott figyel a gépén az eddigi kód. Akinek mégsem az eléri a Bitbucket tárólót és le bírja tölteni. Létrehoztunk egy /routes/index.js fájlt, amit nem használtunk. Legalábbis nem sok minden volt benne. A jelenlegi tartalma így néz ki:

0

Most akkor itt az ideje okosítani rajta. Ezt a függvényt békén is hagyjuk egyelőre, hogy a későbbiekben ne zavarjon meg minket az elnevezés. Hozzunk létre egy másik függvényt mondjuk addLink néven. Ezen kívül ugyebár hasznos lenne generálni is egyből egy rövid azonosítót neki. Tehát létrehozunk egy Link “Objektumot” is. Az, hogy most nem csak egyszerűen generálunk, később lesz hasznos, amikor majd adatbázisban tároljuk, mert akkor amúgy is ilyen formában fogjuk kezelni.

1

Az elején lévő sok kommentelt részt azért másoltam be, hogy látható legyen hova kell rakni. Az az 5 sor már most is ott van a kódban. Most tulajdonképpen megadtuk, hogy ha az alkalmazásunk kap egy POST kérést, aminek a célja a /link, akkor hívja meg a routes.addLink függvényt és majd az teszi a dolgát.

Ha készen van, akkor futtathatjuk az alkalmazást a jól megszokott node app.js parancssal. Tesztelni, hogy működik-e a legegyszerűbb, ha terminálból meghívjuk az url-t. Ebben nagy segítség tud lenni a curl nevű nagyszerű csomag.

2

Láthatóan szépen visszatért mind a rövid, mind pedig a hosszú linkkel, ha pedig nem adtunk meg linket, akkor a hibával.

Kliens oldali rész

Miután megcsináltuk, hogy a szerver tudjon mit kezdeni majd a kliens kéréseivel, jöhet a kliens. Ehhez nem kell más csinálnunk, csak megmondani az Angular.js-nek a /public/javascripts/app.js fájlban, hogy küldje fel a szerverre, majd az alapján írja ki a linket. Van most jelenleg egy ilyen szép controller-ünk:

3

Nah ezt kell kicsit megokosítani. Most ugyebár csak fixen beírjuk, hogy mik a link adatai és kész. Ezt kell megoldani, mert ez hoszú távon (más a második linknél) problémát okozhat.

4

Hosszúnak tűnik, de nem az csak telepakoltam hasznos kis kommentekkel. Tehát mi történik? Miután meghívódik az addLink függvény egyből elindítunk egy POST kérést. Az Angular.js $http modul függvényei nem paraméterként kérik be a callback-et, hanem úgynevezett ígérettel térnek vissza. Ennek az a logikája, hogy megígéri, hogy ott lesz adat és az ígéretnek van státusza, miszerint még nincs adat vagy van, eseteg hiba történt.

Jelen esetben, ha lefutott, akkor meghíva az általunk megadott callback függvényt, ami két paramétert vár (meg is fogja kapni), ami az adat és a válasz státusza. Egyből meg is nézzük, hogy mi a státusz és ha az nem 200, akkor hiba történt (például 500, 404). Ha nem volt hiba és 200-as kódot kaptunk, akkor megnézzük, hogy van-e error tulajdonsága a kapott adathalmaznak. Ha van, akkor a szervernek nem tetszett valami. Jelen esetben egy ilyen van, ha üres volt a link. Ha ilyen hiba előfordul, akkor szólunk a felhasználónak. Persze lehet kultúráltabban is, mint egy szép alert ablakot feldobatni, de most jó lesz ez is, lévén az oldal többi része se néz ki túl szépen. Ha készen van, akkor majd húzunk rá valami szép felületet is 🙂 Megígérem.

Ha nem volt hiba sehol, akkor a kapott adatokból a short értéket felölírjuk, mert most csak egy 7 karakter hosszú azonosítót tartalmaz, amiből valós linket kellene készíteni. Erre már ott van az App.utils.url.get függvényünk, azt nem is bántjuk most. Egyelőre. Ha megvan, akkor betoljuk a $scope.links tömbünk elejére, aminek hatására megjelenik az oldalon is.

Összefoglaló

Tudom, hogy megint nagyon sokat kellett várni a következő részre, de lassan megszokom, hogy buzgálkodjak ezzel is rendszeresebben. Míg egy “sima” cikk írása elsősorban kutatás, olvasás és írás, addig itt elő is kell állítanom közben a kódot.

Persze nem is arról szólt a cikk, hogy miért tartott ilyen sokáig. Az eddigi kliens és szerver oldali részt most összekötöttük. Persze még mindig nem mentettük el adatbázisba, meg úgy sehova sem az adatokat, de már legalább a két réteg beszélget egymással. Haladás.

Holnap vagy holnapután (tényleg) pedig rakunk bele egy MongoDB-t, amibe elmentjük az adatokat, persze előtte jól leteszteljük, hogy már létezik-e vagy sem.

Kapcsolódó linkek:

A forrás elérhető itt: https://bitbucket.org/folyam/url-r-vid-t

Demo: http://url-rovidito.folyam.info/

Kapcsolódó cikkek:

Weboldal Google Drive-ból

Végre eljött az idő. Hasonlóan, mint Dropbox-nál, a Google Drive is képes mostantól tartalmat kiszolgálni. Mostmár teljes értékűnek tekintem ezen a vonalon 🙂

Miért?

Google Apps Script segítségével igen sok mindenhez hozzá lehet férni. A hozzá tartozó scriptek illetve html, css és javascript fájlok tárolhatóak a Drive-on és onnan ki is szolgálhatóak.

(tovább…)

Kapcsolódó cikkek:

URL rövidítő 1. rész

Most készíteni fogunk egy URL rövidítő oldalt. Az első részben csak offline lesz és semmit sem fog elmenteni sehova. A második részben alá pakolunk egy szerveroldali réteget, hogy amit berakunk URL-eket, azokat mentse is el valahova.

Kezdjük a legelején. Mit fogunk használni? AngularJS fogja kezelni a kliensoldali részt. Ez fog ügyelni arra, hogy minden adat a helyén legyen. Először ezt állítjuk hadrendbe. Persze jó volna egyből alá rakni egy Node.js keretet, hogy később ne kelljen túlzottan mozgatni a dolgokat, de ezt mi most nem tesszük meg. Most csak a kliensoldali résszel foglalkozunk. Amúgy sem kell sokat mozgatni és átírni hozzá.

(tovább…)

Kapcsolódó cikkek: