Převody měn a kurzy měn

JavaScript zdrojákoviště - Základní konstrukce jazyka

Jednoduchá webová aplikace k převádění měn a všeho co se toho týče (lepší popis nemám ).

Něco málo o kódu

Většina aplikace je naprogramovaná v čistém JavaScriptu ale viditelné věci (doplnění obsahu do HTML a popřípadě nějaké frontend věcičky, například tooltip hover) jsou dělané v jQuery a také pomocí bootstrap knihovny (javascript i css).

Jak aplikace funguje?

Hlavní jádro aplikace se nachází v souboru api.js který se skládá ze dvou tříd (API a APIParser, XML) kde API.getResponse() získává pomocí XmlHttpRequest kde ten požadavek vede k souboru api/get.php který si získá už opravdové API z České národní banky (už jen ČNB), k API se nepřistupuje rovnou pomocí JavaScriptu kvůli jednomu problému (pokud chcete vědět něco více, myslím že to je tento error https://developer.mozilla.org/…gAllowOrigin), díky tomu že posíláme požadavky přes jeden server a ne přes každý počítač zvlášť, tak zde je jednoduchý caching, aby mě ČNB při posílání požadavků nezabila.. caching jsem nedělal objektový protože bych akorát zvětšil kód a při malé aplikaci kde se ten caching využije opravdu jen zde, mi to přišlo zbytečné (tenhle kód jsem teď změnil aby zde nebyl horizontální scrollbar, ale jen o jednu proměnnou).

// 27.12.2019 : Celá aplikace je nyní v JavaScriptu, více v části 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 ve třídě APIParser jsou funkce které vrací jednotlivé hodnoty a v souboru main.js se nastavuje kam ty dané hodnoty patří (do jakého elementu, respektive).

Update: 27.12.2019 (Změněno přistupování k API)

Nyní už je celá aplikace naprogramovaná pouze v JavaScriptu, protože místo toho abych pomocí PHP si přendával data z ČNB do Javascriptu nyní používám cizí službu (online cors proxy), která dovoluje přistupovat k API bez žádného problému s CORS, ale kdyby se něco pokazilo na jedné takovéto službě, tak je tam i záložní která je sice o trochu pomalejší (v řádu do 0.3s), ale lepší, než aby to nefungovalo, ale většinu času stejnak bude to hlavní. Aktualizační doba kurzovního lístku furt zůstává na 3600 (1hodina) sekundách, na té aktualizační doba se nedá změnit a není uvedena.

PHP kód zde nechám kdyby někdo hledal jednoduchý způsob na cache souboru o pár řádkách. Uvidíme zda se tyto služby osvědčí a budou následně použity ve finální verzi aplikace, je to sice mini aplikace ale stabilita je všude duležitá

Update: 1.1.2020

Byl přidaný samotný převod měn s možností změnou data až do 1.1.1991. Jako malý detail se nyní měny řadí podle abecedy a taktéž při načtení stránky se nyní zobrazuje loader který ale netrvá tak dlouho a je to jenom kvůli načítání API, takže se nemusíte bát. Kvůli dlouhým měnám jsem byl nucen změnit viewport width na 550px kvůli zobrazení celých názvu měn, ale když jsem testoval v devtools známé mobily a i různé width pomocí kolonky "responsive", tak by mělo být vidět vše tak jak má a všude. Také byly přidané různé "chybové zprávy", které se zobrazí v tlačítku místo textu "Převést měnu...". U některých slov/sousloví je přidán i tooltip kvůli lepšímu porozumění danému slovu/sousloví.

Update: 6.1.2020 (přidán malý templating systém )

Dneska jsem přidal možnost zaokrouhlování s limitem 9 kvůli nerozbití layoutu (nerozbije se, je tam potom horizontální scrollbar v tabulce, ale není to nic pěkného ), v případě že někdo zadá vyšší číslo jak 9, tak se zobrazí uživatelsky přívětivý "error" (nebo varování to už je jedno), který oznámí o daném úkonu, je to vyřešené tak, že využívám script typu text/template který prohlížeč nedokáže zaregistrovat, ale javascript ho furt bere jako DOM objekt, tudíž si z něho vezmu předpřipravený template s proměnnými, například {{nadpis}}, a potom si pomocí již minulé funkce strReplace nahradím dané proměnné, obsahem. A danou "komponentu" vytvořím pomocí funkce createComponent. Příklad použítí:

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>

Mezera po <script> je kvůli zvýraznění v kódu protože to editor bral jako javascript.

Co je zatím hotové?

Přibližný layout a design stránky, základní fungování a také i to převádění, krom tohohle bych chtěl generování nějaké grafu, ale to je zatím ve hvězdách Potom by to chtělo ještě nějakou tabulku množství, kódu daných měn (například usd, czk) a tak dále. Aplikaci bych zatím v tomhle stavu nevydal (ke dni 26.12.2019) ale k první verzi která by teoreticky dala být publikovatelná už moc daleko není

Proč je tahle aplikace vytvořena?

No tak hlavní je logicky aby uživatelé mohli si jednoduše převádět měny a druhý důvod je že jsem se chtěl něco málo přiučit v JavaScriptu a tahle mini-aplikace mě napadla. I když se primárně věnuji PHP tak obecný přehled neuškodí, a potom co jsem dělal CMS jsem si chtěl zas trošku odvyknout na tu PHP syntax

Online

https://apps.turyna.eu/prevody

Hodnocení poroty

Porotce	Bodů	Hodnocení
David Jančík	6	Cool appka, docela často si toto vyhledávám a bohužel samotný web ČNB na převod kurzů není úplně ideální. Chybí mi zde ale pár věcí - zkoušel jsem například zadat převod měny v datech, kdy euro ještě vůbec neexistovalo a nedočkal jsem se žádné chyby nebo zpětné vazby.
Tomáš Bitter	7	Měny lze sice převádět i přímo na Googlu, ale když jsem objevil, že v aplikaci lze zvolit i jiné časové období, tak jsem byl potěšen. Zvlášt, když člověk řeší účetnictví, tak se podobný převod docela hodí.
Michal Čápka	7	Super nápad na aplikaci, která může mít velmi rozšířené využití. Chybí mi zde ale trochu nějaká interakce - například po stistknutí tlačítka na samotný převod něco jako proklik nebo změna barvy, která by uživatele informovala o tom, že byl úkon vykonán. Chápu, že je to funkcionalita navíc, nicméně by se zde mohly objevit i výpočty například měsíčních průměrů, které se v účetnictví opravdu hodí.