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

sobota 6. května 2017

Připravuji videokurz: Vlastní mobilní aplikace - I

Právě pracuji na videokurzu Vlastní mobilní aplikace - I.

Cílem je ukázat jednoduchý a praktický způsob, jak si se základní znalostí HTML (a případně i CSS) vytvořit vlastní mobilní aplikaci pro Android.

V kurzu (ještě není hotový) ukážu na praktickém příkladu, jak si vytvořit jednoduchou mobilní aplikaci, která zobrazí předem připravený obsah - tím můžou být nadpisy, odstavce textu, obrázky, atd.

Mám připraveny tři šablony (se stejným obsahem), které můžete použít a upravit si je podle svého. Vytvářenou aplikaci lze testovat v mobilním telefonu a po jejím odladění si ji můžete vytvořit jako soubor s příponou .apk a nainstalovat ji do telefonu či tabletu.

Jednotlivé šablony: 11A-F7-blank, 12A-F7-pages a 13A-F7-tabs vypadají takhle:




pondělí 1. května 2017

Pracuji na aplikaci: Todo list - seznam úkolů

V těchto dnech pracuji na malé aplikaci Todo list (seznam úkolů). Přešel jsem z kombinace Ionic/Angular na Framework7/VueJS.

Aplikace je funkční. Ukládá data automaticky do telefonu (úložiště localstorage). Vypadá takhle:



Není to celé moje práce, vyšel jsem z této ukázky aplikace https://jsfiddle.net/Nikoniko/sa0u4791/11/
kterou jsem upravil.

Co aplikace umí?

1. Vytvořit nový úkol. Všechny úkoly se uloží do telefonu (localstorage). Tlačítko plus vpravo nahoře.
2. Přepínat mezi zobrazením úkolů (list), editací (edit) a mazáním (del). Tlačítko vlevo nahoře.
3. Přepínat mezi zobrazením od novějšího ke staršímu a naopak. Tlačítko šipka vlevo nahoře.
4. Upravit libovolný úkol.
5. Smazat libovolný úkol (ať už je hotový nebo ne).
6. Označit/odznačit úkol jako hotový.
7. Zobrazuje počet hotových úkolů a celkový počet.

Co bych rád dodělal:

1. Rád bych vyřešil (nevím jak...) situaci, kdy se zobrazí dialog pro zadání nového úkolu a zobrazí se klávesnice - dialog se posune nahoru, i když není klávesnicí překrytý a není to nutné.
2. Podporu více jazyků a přepínání mezi nimi.
3. Nastavení: barvy, výchozí řazení úkolů, ...

Stažení aplikace:

Máte-li zájem o funkční verzi (je nutné v telefonu povolit "instalování z neznámých zdrojů), najdete ji tady.



středa 15. února 2017

Videokurz: Základy VueJS 2.x

Dnes byl publikován můj videokurz Základy VueJS

Obsah kurzu
1. Příprava, instalace Google Chrome a NetBeans. (01:17)
2. Založení projektu v NetBeans. (02:38)
3. Přidání VueJS do projektu, úvodní nastavení VueJS. (04:48)
4. Provázání mezi HTML a JS, vypsání obsahu proměnné. (04:32)
5. Data a funkce (1), práce s proměnnými a funkcemi. Praktický příklad - jednoduchá kalkulačka. Volání funkce po stisku tlačítka. (10:07)
6. Data a funkce (2), práce s proměnnými a funkcemi. Podmíněný příkaz, podmínka. (05:18)
7. Automatické funkce, automaticky vypočítané proměnné. (07:05)
8. Podmíněné zobrazení části HTML při splnění podmínky. (04:51)
9. Úprava struktury, umístění souborů v projektu. (06:05)
10. Kaskádové styly CSS, vizuální vzhled aplikace. (06:15)
11. Cyklus (1), vypsání více odstavců za sebou. (04:43)
12. Cyklus (2), vypsání dat z JS do HTML pomocí cyklu. (05:03)
13. Cyklus (3), vypsání dat (objektů) z JS do HTML pomocí cyklu, práce s objektem. (09:17)
14. Změna hodnoty atributu v HTML, zakázání tlačítka na základě podmínky, nastavení CSS třídy podle podmínky. (04:54)
15. Seznam osob (zadání projektu). Zadání vlastní samostatné práce - aplikace pro seznam osob. (08:09)
16. Seznam osob (HTML kód) - ukázka řešení HTML kódu. (07:59)
17. Seznam osob (HTML kód) - ukázka řešení VueJS kódu. (08:01)


Úvodní video

Online videokurz najdete na naucmese.cz