pátek 7. února 2014

Píšeme desktopové aplikace v HTML



Nedávno jsem do mailu (díky Honzo!), dostal článek o tom, že Chrome Desktop Apps už fungují i na mobilu.
Na článku mě upřímně nejvíc zaujalo to, že vůbec nějaké Chrome Desktop Apps existují. No a samozřejmě jsem to potřeboval vyzkoušet.
Na žádném "pracovním" projektu se to dvakrát nehodilo, tak jsem si řekl, že moje vařítko čaje si taky zaslouží trochu lásky. Netrvalo to ani den a podařilo se mi překlopit webovou stránku do jednoduché aplikace!


Co jsou Chrome Web Apps?

Malá odbočka pro ty z vás, co (stejně jako já) až do dneška netušili, že něco takového existuje.
Chrome Web Apps jsou webové aplikace, které se ale tváří jako "normální" Windows/Mac/Linux aplikace. To znamená, že ve Windows je najdete přímo ve Start menu (v záložce Chrome Apps), můžete si dát zástupce na plochu atd.
Navíc u nových verzí Chrome je dole na liště tzv. Chrome App Launcher, což je jednoduchý způsob, jak spustit konkrétní aplikaci.


Jak to šlo?

Zdrojový kód původní aplikace je relativně jednoduchý – v zásadě jde o jednu HTML stránku a kus Javascript (popravdě Coffeescript) kódu v AngularJS.
HTML šlo pryč víceméně celé. Ne, že by nešlo použít, ale potřeboval jsem uživatelské rozhraní aplikace razantně zmenšit – aplikace má rozměr jen 380x380 pixelů.
V obou případech jsem použil Twitter Bootstrap, nemusel jsem tedy nic vymýšlet a jen přepsal těch pár divů a výběr čajů dal do select boxu místo radio buttonů, co jsou na webu.
Původně jsem si maloval, že v Javascriptu nebudu muset dělat změny žádné, ale opak byl pravdou. Spoustu kódu jsem naštěstí mohl vyhodit – webová verze musí kontrolovat, zda je použitý správný prohlížeč a zda jsou k dispozici webové notifikace. To šlo všechno pryč.

Změnit se musely dvě věci: Ukládání nastavení, protože desktopová aplikace nemůže použít localStorage, ale musí používat chrome.storage.*. Zase ale se nastavení automaticky (`chrome.storage.sync`) sdílí mezi všemi počítači konkrétního uživatele.
Druhá změněná věc bylo samotné vyvolání notifikace – opět je třeba použít chrome rozhraní. I když tohle asi nebylo 100% nutné.

Poslední věc bylo uklizení kódu, odstranění jednoho zbytečného kontroleru a vyhození JQuery. Tohle ale asi udělám i ve webové verzi a budu se snažit kód trochu sjednotit.

Výsledek? Kdybych od začátku počítal s desktopovou verzí, mohl jsem si ušetřit spoustu práce. Ať už správným použitím kombinace col-xs-* a col-md-* tříd v HTML nebo trochou abstrakce v Javascriptu, kdy bych si obalil volání notifikací a localStorage nějakým proxy objektem.
Ale ani takhle nešlo o nic hrozného, zabralo mi to asi 4-5 hodin času.

Jen výsledný zdroják je zatím v samostatné větvi, sdílení kódu mezi webem a desktopem musím teprve vyřešit.


Hurá do světa

Paradoxně nejvíc času a bádání mi zabralo vydání aplikace do Chrome Web Store. Nějak jsem nepochopil oficiální postup zabalení a vydání aplikace.
Takže pro příští generace (a pro mě za půl roku) tu raději sepíšu svůj vlastní návod:
  1. Aplikace se "zabalí" pomocí "Pack extension" přímo v prohlížeči Chrome. Tento krok je nutný pouze pro distribuci aplikace mimo Chrome Web Store nebo pro vyzkoušení instalace aplikace.
  2. Celý adresář s aplikací se zabalí do zip souboru. Soubor manifest.json musí být v kořeni zipu.
  3. Tento zip soubor se nahraje na Chrome Web Store a vydá.
  4. Zabalená aplikace z prvního kroku se nikam nenahrává, do zipu nepatří, prostě je na nic!
Vydanou aplikaci můžete samozřejmě nainstalovat. z Chrome Web Store. A dejte mi vědět, jak chodí?


Mobilní verze

A běží i na mobilu? No jéje!

Ale o tom až příště.

pondělí 3. února 2014

Chraňte svoje hesla! Aneb kdo si to má všechno pamatovat?

Před časem jsem řešil s dlouholetým zákazníkem problém v námi dodaném systému. Abych mohl problém analyzovat, potřeboval jsem do onoho systému přístup, který jsem však neměl. V rámci zrychlení celé akce došlo k tomu, že mi zákazník své přihlašovací údaje začal diktovat do telefonu (ano, ani to není ideální). Pozorně jsem začal psát. "Uživatelské jméno je Petr, vše malými písmeny." "A heslo je Petr1959, také malými písmeny," sdělil mi pan Petr Novák.

Na první pohled je jasné, že s heslem není něco v pořádku. Nicméně dnes nechci psát o tom, že heslo typu "petr1959" je úplně k ničemu, ale chci psát o tom, jak si pamatovat hesla, pokud jich máte opravdu hodně, chcete je mít stále k dispozici a zároveň chcete, aby tato hesla byla alespoň trochu v bezpečí.

Požadavky na "systém", kterému hesla svěřím:
  • bezpečnost dat - nemohu o hesla jednoduše přijít / zálohování
  • přístupnost - potřebuji hesla když sedím u počítače, stejně tak když jsem někde v terénu jen s mobilním telefonem
  • opensource - systém úschovy hesel by neměl být služba typu LastPass, což není z důvodu, že bych za to nechtěl platit :-)
  • sdílení hesel - možnost některá hesla sdílet s někým jiným
  • nezávislost na platformě - OS X, Windows, Linux, Android, IOS...
  • integrace do webového prohlížeče - Nice To Have :-)
Password Gorilla
Při hledání jsem našel jen několik aplikací pro ukládání "hesel", které by splňovaly to, co jsem požadoval. Nakonec jsem zvolil aplikaci Password Gorilla pro desktop a pro Android aplikaci PasswdSafe.

Takže jak jsou na tom mé jednotlivé požadavky vs. realita?


Bezpečnost dat

Díky tomu, že jsou "hesla" ukládána v datovém souboru, není nic jednoduššího, než tento soubor přidat do běžné zálohy. Datový soubor mám samozřejmě zabezpečen dostatečně dlouhým heslem (30+ znaků).

Přístupnost

Datový soubor mám uložen "v cloudu" (Google Drive, Dropbox...), čímž ho mám přístupný na všech zařízeních, kde ho potřebuji. Na Mac mám soubor syncovaný přes Insync. Na Android pak otevírám datový soubor přes standardní Drive aplikaci v readonly režimu, což mi dostačuje.

Opensource

Jak Password Gorilla, tak i PasswdSafe jsou opensource projekty.

Sdílení hesel

Tam, kde potřebuji hesla sdílet s někým dalším (například všemožné webové přístupy do různých služeb), mám tato hesla uložena ve vlastním datovém souboru, který v "cloudu" s dotyčným sdílím.

Nezávislost na platformě

Celé řešení mám vyzkoušené pouze na OS X a Android, ale předpokládám, že vše bude fungovat stejným způsobem i na ostatních platformách, viz. informace na GitHubu.

Integrace do webového prohlížeče

Tohle jsem zatím nevyřešil a zatím ani nenalezl nikoho, kdo by ve stacku mnou vybraných aplikací vyřešil. Zároveň se ale ukazuje, že tento požadavek pro mě není zásadní a v tuto chvíli mě příliš nevadí.

PasswdSafe

FAQ - aneb na co je dobré ještě myslet


Na Androidu mám nainstalovanou aplikaci PasswdSafe, ale když chci otevřít datový soubor z aplikace Drive, tak ten se nedá otevřít.

Datový soubor je potřeba pojmenovat tak, aby měl příponu ".psafe3".

Jaká všechna hesla si tedy reálně musím zapamatovat?

Jednoznačně je potřeba si zapamatovat heslo k datovému souboru. Tím, že budete datový soubor pravděpodobně "odemykat" poměrně často, neměl by být problém si složité heslo brzy zapamatovat.

Další heslo, které by bylo dobré si zapamatovat, je do vašeho "cloudu", ideálně s dvou úrovňovou autorizací. Představte si situaci, kdy budete v zahraničí a přijdete o notebook i mobilní telefon a záloha bude tisíce kilometrů daleko. V tuto chvíli musíte být schopni zprovoznit celé řešení na novém zařízení, což bude předpokládat i to, že jste si schopni stáhnout datový soubor z vašeho cloudu.

Závěr

Závěrem už jen budu konstatovat, že jsem s výše popsaným řešením pro tuto chvíli spokojený. Minimálně jsem se s kvalitou hesel posunul z "nuly na sto", což považuji za dobrý první krok.

A co vy? Jak se staráte o svá hesla? Také stále ještě používáte stejné heslo na všech používaných službách? Co na to Petr Novák? :-)


P.S.: Petr Novák je osoba smyšlená, nicméně příběh ze začátku blogpostu je skutečný. Nejvíc zarážející na tom pro mě je, že Petr si vylepšil heslo o rok svého narození po tom, kdy mu před dvěma lety někdo vykradl databázi klientů (několik desítek tisíc kontaktů). Pravdou ale je, že tehdy měl uživatelské jméno i heslo stejné 1:1 :-)