úterý 8. srpna 2017

Mobilní aplikace: Chemické názvosloví

Měl jsem na Google Play aplikaci Chemické názvosloví. Tuto původní jsem odstranil a nahradil novou aplikací.

Je určena pro výuku a procvičení základního anorganického názvosloví. Obsahuje info o stavbě hmoty, tabulku přípon (-ný, -natý, -itý, ...) a obecná pravidla pro tvorbu českého anorganického názvosloví.

Z názvosloví zahrnuje: oxidy, halogenidy, nitridy, hydroxidy, sulfidy, bezkyslíkaté a kyslíkaté kyseliny. Kromě výukové části nabízí i procvičení formou přiřazení správné koncovky.

Aplikace je zdarma dostupná na Google Play: Chemické názvosloví

A taky vypadá líp než ta předchozí :-)



sobota 5. srpna 2017

Framework7 + VueJS: aplikace Bitcoin price

Jako malé cvičení jsem udělal jednoduchou aplikaci, která zjistí aktuální cenu bitcoinu v dolarech a kurz České národní banky USD/CZK a zobrazí cenu bitcoinu v dolarech a v korunách.

Vizuální část aplikace

Použil jsem aktuální (srpen 2017) verzi 1.6.4 knihovny Framework7. Zobrazí se jen informační pole a tlačítko pro aktualizaci ceny.

Datová část aplikace

Tu jsem napsal ve VueJS 2.4.2 s využitím knihovny vue-resource, která umožní volat API funkce přes http protokol.

Cenu bitcoinu beru z webu coindesk, konkrétně získávám tento JSON. Kurz dolaru beru ze stránek České národní banky, konkrétně tento TXT soubor.

Cenu bitcoinu v USD a CZK zobrazuji bez desetinných míst. Trochu mi dělala problém návaznost získání dat; proto jsem pozdržel volání funkce zjišťující kurz USD/CZK o 0.7 sekundy, aby se nejprve stihla načíst cena bitconu v dolarech. Občas to zazlobí (závisí na okolnostech), pak stačí jen stisknout tlačítko update a mělo by to být OK.

Aplikace

Po spuštění se cena načte automaticky, chyby při získání dat nejsou ošetřeny. Dělal jsem to jen jako lehké cvičení.

(!!!) Aby vám to fungovalo, musíte mít v prohlížeči vyřešeno CORS, např. rozšířením CORS Toggle pro Google Chrome. (!!!)

Zdrojový kód aplikace (HTML + CSS + JS) je k dispozici přes tyto odkazy (stejný obsah):
http://play.ionic.io/app/6cf2fa2867bc
http://play.ionic.io/app/b518c1217666

Pokud si chcete kód upravit, použijte nejprve odkaz Fork v pravém horním rohu - dostanete tak svoji vlastní kopii.

Android aplikace

Pokud z toho chcete udělat androidí aplikaci (a nevíte jak), může se inspirovat mým bezplatným videokurzem Vlastní mobilní aplikace.





sobota 24. června 2017

VueJS 2: píšeme komponentu - grafický přepínač (toggle) v SVG

Napsal jsem si a odladil komponentu sloužící jako přepínač (toggle). Mám pro ni použití ve své aplikaci, kterou píšu s využitím Framework7 a VueJS.

Pro přepínač má Framework7 implementovaný switch:

<div class="item-title label">Switch</div>
<div class="item-input">
  <label class="label-switch">
    <input type="checkbox">
    <div class="checkbox"></div>
  </label>
</div>

Nepodařilo se mi ho upravit podle mých potřeb, proto jsem se rozhodl ho nahradit vlastní komponentou. Pro zamýšlené použití se hodí SVG.

Vue.component("toggle-name", {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: ""
    },
    coloroff: {
      type: String,
      default: "white"
    },
    coloron: {
      type: String,
      default: "#886aea"
    },
  },
  methods: {
    toggleValue: function(){
      this.value = !this.value;
      this.$emit("update:value", this.value);
    },
  },
  computed: {
    cx: function(){
      return this.value ? 36 : 16
    },
    fill: function(){
      return this.value ? this.coloron : this.coloroff
    }
  },
  template: '<svg @click="toggleValue()" width="52" height="32"><g ><rect x="0" y="0" width="52" height="32" rx="16" ry="16" stroke="lightgray" :fill="fill" /><circle :cx="cx" cy="16" r="16" stroke="lightgray" fill="white"/><text :x="cx" y="22" text-anchor="middle" font-size="16">{{name}}</text></g></svg>'
})


V části props jsou definovány vlastnosti (properties), jako value (hodnota přepínače false/true = off/on), name (jednoznakové jméno, A, B, C, ...), coloron (barva v poloze true), coloroff (barva v poloze false).

V části methods se při přepnutí volá metoda toggleValue, která kromě změny hodnoty emituje událost se změnou (two-way-databinding), aby se změnila i hodnota proměnné, se kterou je přepínač svázán.

V části computed se vypočítá x-ová poloha jezdce - cx, a barva výplně přepínače podle hodnoty (false/true) - fill.

V části template je definován vzhled přepínače, jedná se o grafiku SVG. Přepínač se skládá z obdélníku se zaoblenými rohy a kružnice, která mění svoji polohu v závislosti na stavu přepínače (false/true). Dovnitř kružnice je vepsán název přepínače (jedno písmeno) - name.

V HTML kódu se komponenta použije např. takhle:
<toggle-name :value.sync="A" name="A" class="toggle"></toggle-name>



pondělí 19. června 2017

Framework7 - vlastní build

Nové aplikace už dělám v kombinaci Framework7 (HTML + CSS) a VueJS (JS). 

Framework7 umožňuje provést vlastní build, tj. stručně řečeno nepoužít kompletně celý framework, ale jen dílčí část.

Návod na vlastní sestavení je srozumitelný a snadný, najdete ho v dokumentaci

Vyzkoušel jsem to na malé aplikaci; po náhradě plného F7 za vlastní build obsahující jen základ a po odstranění spouštěcích obrazovek (splash screen) má výsledná aplikace (soubor .apk) jen 200 kB.

Paráda.



sobota 27. května 2017

VueJS 2: píšeme komponentu - zobrazení chemické rovnice

Zadání

Napíšeme si komponentu, která nám zobrazí chemickou rovnici na webové stránce. Použijeme knihovnu Katex a VueJS 2.


Řešení

Název komponenty bude chemula (chemical formula) a bude obsahovat jeden atribut formula. Zobrazí chemickou rovnici pomocí Katexu.

Deklarace komponenty

Vue.component("chemula", {
  replace: true,
  props: {
    formula: {
      type: String,
      default: ""
    }
  },
  data: function(){
    return {
      chars: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz() +->=",
      numbers: "0123456789",
      upIndex: "^",
      dnIndex: "_",  
      leftBracket: "{",
      rightBracket: "}"
    }
  },
  computed: {
    textToKatex: function(){
      var text, katexStr;
      katexStr = "";
      text = " " + this.formula + "  ";

      for (var i = 1; i < text.length-1; i++){
        if (this.chars.indexOf(text[i]) !== -1){
          if (this.numbers.indexOf(text[i-1]) !== -1)
            katexStr = katexStr + this.rightBracket + text[i];
          else           
            katexStr = katexStr +text[i];
        }
        else 
          if (this.numbers.indexOf(text[i]) !== -1){
            if (this.chars.indexOf(text[i-1]) !== -1)
              katexStr = katexStr + this.dnIndex + this.leftBracket + text[i];
            else 
              katexStr = katexStr + text[i];
          }
      };
      
      katexStr = katexStr.replace(/\s\s+/g, ' ');
      katexStr = katexStr.replace(/->/g, '\\rightarrow ');
      katexStr = katexStr.replace(/=/g, '\\rightarrow ');
      try {
        return katex.renderToString(katexStr, {throwOnError: false});  
      } catch (err) {
        return "" 
      }
    }
  },
  template: '<span v-html="textToKatex"></span>'
});

Do atributu formula vložíme zápis chemické rovnice. Ten se prochází znak po znaku a postupně se přidává do proměnné katexStr i se speciálními znaky (dolní index, složená závorka). Výsledný zápis se do HTML kódu vloží v části template, která zobrazí řetězec v Katexu, získaný v části computed.

Použití v HTML kódu

Do webové stránky vložíme komponentu s rovnicí, např.:
<chemula formula="H2SO4 = H2O + SO3" ></chemula>

Jak to vypadá prakticky si můžete ověřit tady (pokud chcete provést úpravy, nejprve prosím klepněte vpravo nahoře na fork, dostanete tak vlastní kopii).


pátek 26. května 2017

VueJS 2: píšeme komponentu - zobrazení matematického výrazu (Katex) v SVG

Řešil jsem docela zajímavý problém. Jak zobrazit matematický výraz pomocí Katexu (implementace Latexu od Khan Academy) do vektorové grafiky SVG.

Nevím o žádném přímém a bezprostředním řešení. Proto jsem experimentoval a přišel jsem na zajímavý trik, jak dostat vygenerovaný výraz do SVG tak, aby šel zobrazit.

Trik spočívá ve využití <foreignObject>, kterým lze do SVG dostat obsah, jež samotné SVG nepodporuje. S trochou práce a štěstí se mi podařilo docílit výsledku.

Ukázka je dostupná tady: http://play.ionic.io/app/f3452825f611

pátek 12. května 2017

Videokurz: Vlastní mobilní aplikace - I

Pro zájemce o vlastní mobilní aplikaci jsem publikoval videokurz "Vlastní mobilní aplikace".

Obejdeme se bez programování - nemusíte tedy umět programovat.

Kurz je česky a zdarma. K napsání vlastní aplikace, která zobrazí vámi vložený obsah (text, obrázky, ...) stačí jen znalost HTML. Celý postup je názorně vysvětlen v průběhu kurzu. Připravil jsem tři šablony pro vaši vlastní aplikaci.

Není třeba vůbec nic instalovat a konfigurovat. Psaní aplikace probíhá v online editoru.

Obsah kurzu (jednotlivá videa):
1. Představení kurzu
2. monaca, založení projektu
3. monaca debugger
4. monaca, sestavení aplikace
5. Framework7, ukázka funkcí
6. Framework7, ukázka aplikací
7. monaca a Framework7, import projektu
8. monaca a Framework7, úprav projektu
9. monaca a Framework7, import projektu (2)
10. monaca a Framework7, sestavení aplikace (.apk)
11. ukončení kurzu

Výsledkem bude soubor .apk, který se nainstaluje do telefonu či tabletu. Stačí povolit instalaci z neznámých zdrojů v menu telefonu.

Vlastní mobilní aplikace