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

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 :-)
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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


 

Mala si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 10x (8.09 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript

 

Všetky články v sekcii
JavaScriptu zdrojákoviště - Základná konštrukcia jazyka
Program pre vás napísal Milan Turyna
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor se věnuje nyní vývoji webu (fullstack)
Aktivity (1)

 

 

Komentáre

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

Odpovedať
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
Odpovedá 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.

 
Odpovedať
27.12.2019 9:27
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Petr Štechmüller
Překladatel
Avatar
Odpovedá na Milan Turyna
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í...

Odpovedať
27.12.2019 10:11
Pokud spolu kód a komentář nekorespondují, budou patrně oba chybné
Avatar
Milan Turyna
Redaktor
Avatar
Odpovedá na 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 :)

 
Odpovedať
27.12.2019 10:38
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 4 správy z 4.