Prevody mien a kurzy mien

Jednoduchá webová aplikácia k prevádzanie mien a všetkého čo sa toho týka (lepší popis nemám: D ).

Niečo málo o kóde

Väčšina aplikácia je naprogramovaná v čistom JavaScripte ale viditeľné veci (doplnenie obsahu do HTML a prípadne nejaké frontend vecičky, napríklad tooltip hover) sú robené v jQuery a tiež pomocou bootstrap knižnice (javascript i css).

Ako aplikácia funguje?

Hlavné jadro aplikácie sa nachádza v súbore api.js ktorý sa skladá z dvoch tried (API a APIParser, XML) kde API.getResponse () získava pomocou XMLHttpRequest kde ten požiadavka vedie k súboru api / get.php ktorý si získa už naozajstné API z Českej národnej banky (už len ČNB), k API sa nepristupuje rovno pomocou JavaScriptu kvôli jednému problému (ak chcete vedieť niečo viac, myslím že to je tento error https://developer.mozilla.org/...gAllowOrigin), vďaka tomu že posielame požiadavky cez jeden server a nie cez každý počítač zvlášť, tak tu je jednoduchý caching, aby ma ČNB pri posielaní požiadaviek nezabila .. caching som nerobil objektový pretože by som akurát zväčšil kód a pri malej aplikácii kde sa ten caching využije naozaj len tu, mi to prišlo zbytočné (tento kód som teraz zmenil aby tu nebol horizontálny scrollbar, ale len o jednu premennú).

// 27.12.2019: Celá aplikácia je teraz v JavaScripte, viac v časti Update.

header('Content-Type: text/xml'); // nastaveno aby prohlížeč věděl že se jedná o XML
$cachefile = 'temp/'.date('M-d-Y').'.php'; // soubor
if (file_exists($cachefile) && time() - 3600 < filemtime($cachefile)) { // podmínka díky ní to fakčí
    echo file_get_contents($cachefile);
    exit;
}
ob_start(); // najdi si pojem output buffering
foreach(glob('temp/*') as $file){ // glob('temp/*') vrátí pole jmen souborů které "splňují temp/*"
    if(is_file($file)) // podmínka pro zjištění jestli soubor existuje a jestli to je soubor
        unlink($file); // pokud soubor existuje, už existovat nebude :(
}
$url = 'https://www.cnb.cz/cs/financni_trhy/devizovy_trh/kurzy_devizoveho_trhu/denni_kurz.xml';
echo(file_get_contents($url)); // vypíše obsah
$fp = fopen($cachefile, 'w'); // otevře soubor a nebo ho vytvoří
fwrite($fp, ob_get_contents()); // zapíše obsah bufferu
fclose($fp); // soubor zavře
ob_end_flush(); // a konec :-)

No a v triede APIParser sú funkcie ktoré vracia jednotlivé hodnoty a v súbore main.js sa nastavuje kam tie danej hodnoty patrí (do akého elementu, respektíve).

Update: 27.12.2019 (Upravil pristupovanie k API)

Teraz už je celá aplikácia naprogramovaná len v JavaScripte, pretože namiesto toho aby som pomocou PHP si přendával dáta z ČNB do Javascriptu teraz používam cudzie službu (online Cors proxy), ktorá dovoľuje pristupovať k API bez žiadneho problému s Corsy, ale keby sa niečo pokazilo na jednej takejto službe, tak je tam aj záložný ktorá je síce o trochu pomalší (v poriadku do 0.3s), ale lepšie, než aby to nefungovalo, ale väčšinu času stejnak bude to hlavné. Aktualizačný doba kurzového lístka furt zostáva na 3600 (1hodina) sekundách, na tej aktualizačný doba sa nedá zmeniť a nie je uvedená.

PHP kód tu nechám keby niekto hľadal jednoduchý spôsob na cache súboru o pár riadkoch. Uvidíme či sa tieto služby osvedčí a budú následne použité vo finálnej verzii aplikácie, je to síce mini aplikácie ale stabilita je všade dôležitá:)

Update: 1.1.2020

Bol pridaný samotný prevod mien s možnosťou zmenou dáta až do 1.1.1991. Ako malý detail sa teraz meny radia podľa abecedy a taktiež pri načítaní stránky sa teraz zobrazuje loader ktorý ale netrvá tak dlho a je to len kvôli načítanie API, takže sa nemusíte báť. Kvôli dlhým menám som bol nútený zmeniť viewport width na 550px kvôli zobrazenie celých názvu mien, ale keď som testoval v devtools známej mobily a aj rôzne width pomocou kolónky "responsive", tak by malo byť vidieť všetko tak ako má a všade. Tiež boli pridané rôzne "chybové hlásenia", ktoré sa zobrazí v tlačidle namiesto textu "Previesť menu ...". U niektorých slov / súslovie je pridaný aj tooltip kvôli lepšiemu porozumeniu danému slovu / súslovie.

Update: 6.1.2020 (pridaný malý templating systém: D )

Dneska som pridal možnosť zaokrúhľovania s limitom 9 kvôli nerozbít layoutu (nerozbije sa, je tam potom horizontálny scrollbar v tabuľke, ale nie je to nič pekného:) ), V prípade že niekto zadá vyššie číslo ako 9, tak sa zobrazí užívateľsky prívetivý "error" (alebo varovanie to už je jedno), ktorý oznámi o danom úkone, je to vyriešené tak, že využívam script typu text / template ktorý prehliadač nedokáže zaregistrovať, ale javascript ho furt berie ako DOM objekt, teda si z neho vezmem predpripravený template s premennými, napríklad {{nadpis}}, a potom si pomocou už minulé funkcie strReplace nahradím danej premennej, obsahom. A danú "komponent" vytvorím pomocou funkcie createComponent. Príklad použitia:

function createComponent(element, template, variables, view) {
    $(element).fadeIn(view);
    $(element).html(document.getElementById(template).innerHTML.strReplace(variables));
    $('html, body').animate({
        scrollTop: $(element).offset().top
    }, 1300);
}

createComponent(document.getElementById('alert-vysledek'), 'alert--red', {
    '{{nadpis}}': 'Změna ve výpočtu',
    '{{obsah}}': 'Zadal jste v zaokrouhlení větší číslo jak 9, proto byl výpočet automaticky zaok..',
    '{{footer}}':  time
}, "slow");

<script type='text/template' id='alert--red'>

    <div class="alert alert-danger" role="alert" style="border-radius: 0; margin-top: 16px;">
        <h4 class="alert-heading">{{nadpis}}</h4>
        <p>{{obsah}}</p>
        <hr>
        <p class="mb-0">{{footer}}</p>
    </div>
</script>

Medzera po

Čo je zatiaľ hotové?

Približný layout a dizajn stránky, základné fungovanie a tiež aj to prevádzanie, okrem tohoto by som chcel generovanie nejaké grafe, ale to je zatiaľ vo hviezdach:) Potom by to chcelo ešte nejakú tabuľku množstvo, kódu daných mien (napríklad usd, czk) a tak ďalej. Aplikáciu by som zatiaľ v tomto stave nevydal (ku dňu 26.12.2019) ale k prvej verzii ktorá by teoreticky dala byť publikovateľnej už moc ďaleko nie je:)

Prečo je táto aplikácia vytvorená?

No tak hlavné je logicky aby užívatelia mohli si jednoducho prevádzať meny a druhý dôvod je že som sa chcel niečo málo priučiť v JavaScripte a táto mini-aplikácie ma napadla. Aj keď sa primárne venujem PHP tak všeobecný prehľad neuškodí, a potom čo som robil CMS som si chcel zas trošku odvyknúť na tú PHP syntax: D

Online

https://apps.turyna.eu/prevody

Hodnotenie poroty

porotca	bodov	hodnotenie
David Jančík	6	Cool appky, docela často si toto vyhľadávam a bohužiaľ samotný web ČNB na prevod kurzov nie je úplne ideálne. Chýba mi tu ale pár vecí - skúšal som napríklad zadať prevod meny v dátach, kedy euro ešte vôbec neexistovalo a nedočkal som sa žiadne chyby alebo spätnej väzby.
Tomáš Bitter	7	Meny možno síce prevádzať aj priamo na Googlu, ale keď som objavil, že v aplikácii možno zvoliť aj iné časové obdobie, tak som bol potešený. Zvlášť, keď človek rieši účtovníctva, tak sa podobný prevod celkom hodí.
michal Čapka	7	Super nápad na aplikáciu, ktorá môže mať veľmi rozšírené využitie. Chýba mi tu ale trochu nejaká interakcie - napríklad po stistknutí tlačidla na samotný prevod niečo ako kliknutie alebo zmena farby, ktorá by používateľa informovala o tom, že bol úkon vykonaný. Chápem, že je to funkcionalita navyše, však by sa tu mohli objaviť aj výpočty napríklad mesačných priemerov, ktoré sa v účtovníctve naozaj hodí.

Galéria