Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij podzimní akce 30% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se JavaScript
JavaScript týden

Převody měn a kurzy měn

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

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 :-)
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 :D)

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 :D

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í.

Galerie

Program byl vytvořen v roce 2019.

 

Stáhnout

Staženo 7x (8.09 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

Všechny články v sekci
JavaScript zdrojákoviště - Základní konstrukce jazyka
Program pro vás napsal Milan Turyna
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Autor se věnuje nyní vývoji webu (fullstack)
Aktivity (12)

 

 

Komentáře

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:27.12.2019 1:22

Na ten origin problém jsme tu v JS také narazili :)

Odpovědět
27.12.2019 1:22
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Milan Turyna
Redaktor
Avatar
Odpovídá na David Čápka
Milan Turyna:27.12.2019 9:27

Vím, hledal jsem tu taktéž ale v té chybě je přímo zpráva že ta hlavička chybí na té URL kam se posílal request.

Access to XMLHttpRequest at 'https://www.cnb­.cz/cs/financni_trhy/de­vizovy_trh/kur­zy_devizoveho_trhu/den­ni_kurz.xml' from origin 'xxxx' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

a chrome dává ještě varování něčeho co si říká CORB. A kdybych napsal ČNB na nějaký technický email (jestli mají) tak bych propásnul minimálně příští dvě soutěže a odpověď by byla "Ne, děkujeme, přejeme hezký den. :)". Zkoušel jsem více možností jak by to šlo obejít ale nic jsme nenašel, možná to tu je a já jenom neumím hledat.

 
Odpovědět
27.12.2019 9:27
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na Milan Turyna
Ing. Petr Štechmüller:27.12.2019 10:11

CORS jsem nedávno také řešil a našel jsem pěkné řešení. Staší veškeré requesty poslat například přes stránku: https://cors-anywhere.herokuapp.com. Když na ni kliknete, je tam návod k použití. Dále tam od toho jsou i zdrojáky, takže si to můžete sami hostovat... Mě to vyřešilo dlouhé trápení...

Odpovědět
27.12.2019 10:11
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Milan Turyna
Redaktor
Avatar
Odpovídá na Ing. Petr Štechmüller
Milan Turyna:27.12.2019 10:38

Děkuji za řešení, tohle by mě nenapadlo asi to zkusím, využiji yacdn.org protože je to o trošku rychlejší než na tom webu co jste posílal (teď jsem si hledal ty cors proxies a porovnával), sice ne o moc, ale aspoň něco :)

 
Odpovědět
27.12.2019 10:38
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.