Jak jsem vytvořil svou první aplikaci Electron &You Can Too Pt.1 – Problém, nápad a technologie

Přemýšleli jste někdy o vytvoření vlastní elektronové aplikace? Možná máte nápad, který chcete realizovat. Nebo možná máte problém, který nikdo jiný neřeší. Nebo jste jen zvědaví a chcete se naučit, jak vytvořit elektronovou aplikaci. Možná všechny tyto důvody. To je přesně to, co se chystáme udělat, vytvořit naši vlastní elektronovou aplikaci od nuly. V této části začneme problémem, který chceme vyřešit. Poté nastíníme myšlenku naší aplikace. Poté se rozhodneme, jaký technologický zásobník použijeme. Takže bez dalších okolků začněme naši cestu do světa elektronu.

Jak jsem vytvořil svou první elektronovou aplikaci a můžete to také, část 2.

Jak jsem vytvořil svou první aplikaci Electron &You Can Too část 3.

Jak jsem vytvořil svou první aplikaci Electron &You Can Too část 4.

Jak jsem vytvořil svou první aplikaci Electron &You Can Too, část 5.

Problém

Každý produkt a také služba (no, teoreticky, služba je produkt), by měly začínat problémem. I když by mohlo být zábavné stavět něco kvůli budování nebo kvůli učení, není to optimální. Samotná práce je často větší radost, když věc, kterou chceme postavit, má i nějakou užitečnost. A tím myslím něco víc, než být jen vzdělávací rekvizitou. V případě věcí, které mají nějakou užitečnost, je pravděpodobnější, že je na světě někdo jiný, kdo může chtít použít to, co jsme postavili.

To byl důvod, proč jsem se rozhodl vytvořit tento tutoriál o vytvoření elektronové aplikace a založit jej na řešení skutečného problému, i když malého. Takže, jaký je problém, který budeme řešit? Slyšeli jste někdy o metodě „grease the groove“? Jak už někteří možná víte, jsem velkým fanouškem fitness a tréninku, zejména kalisteniky. Jeden problém, který v tuto chvíli řeším, je nedostatek síly. Jsou cviky, které pro mě prostě nejsou volbou. A to je místo, kde na scénu vstupuje metoda „grease the groove“.

Metoda drážky promažte tukem

Poprvé jsem o této metodě slyšel od sovětského instruktora speciálních sil a popularizátora tréninku s kettlebellem Pavla Tsatsoulina v Tim Ferriss Show. Zjednodušeně řečeno, metoda „namažte drážku“ je o zvyšování síly pomocí cvičení. Teorie za touto metodou je, že síla je dovednost. A jako každou jinou dovednost, pokud ji chceme zlepšit, musíme ji cvičit a trénovat. Tímto způsobem vytváříme a posilujeme spojení mezi naším nervovým systémem a našimi svalovými vlákny. To také posiluje myelinovou vrstvu kolem axonů nervových buněk zapojených do cvičení.

Čím pevnější je spojení mezi naším nervovým systémem a svalovými vlákny a myelinovým plátem, tím rychleji se mohou naše svaly stahovat. Rychlejší svalové kontrakce znamenají, že pohyb nebo cvičení, které cvičíme, se stávají přirozenějšími a jednoduššími. V důsledku toho rozvíjíme neuromuskulární motorický vzorec. Proč je dobré pracovat na těchto neuromuskulárních motorických vzorcích? Neuromuskulární motorické vzorce nám umožňují použít větší sílu. Způsob, jakým to dělá, je využití většího množství svalových vláken. A čím účinnější jsou tyto vzorce, tím větší množství svalových vláken můžeme použít, což vede k větší síle.

Rovnice je jednoduchá. Rychlejší svalová kontrakce + více stažení svalových vláken =větší síla (zpevnění). Abychom to shrnuli, cvičení konkrétního pohybu nám pomáhá zesílit konkrétní pohyb tím, že rozvíjí účinnější neuromuskulární motorické vzorce. Dělejte to často a budete v tom lepší. A právě o tom je metoda „namažte drážku“. Uděláme konkrétní pohyb nebo dva a cvičíme ho několikrát denně. Postupem času, jak vyvíjíme účinnější neuromuskulární motorické vzorce, sílíme. To je ono.

Jedno upozornění. Než to zkusíte doma, je třeba mít na paměti jednu důležitou věc. Je nutné VYHNOUT se selhání. Metoda Grease the groove je o nácviku pohybu v té nejlepší formě, jakou umíme. Nejde o to, abychom se zabili. Obvykle to znamená cvičit někde kolem 40-50 % toho, co jsme schopni udělat. Řekněme, že chceme zvýšit naši sílu a dosáhnout pokroku v klikech. V takovém případě provedeme maximální počet opakování (opakování), které dokážeme udělat, a poté uděláme pouze 40 % nebo na úrovni obtížnosti 40 %.

Nakonec těchto 40 % zopakujeme několikrát denně. Konkrétnější příklad. Řekněme, že dokážeme udělat maximálně 15 kliků v jedné sadě. Náš program mazací drážky pak provede pouze 6 kliků v dokonalé formě v jedné sadě. A tuto sadu uděláme několikrát denně s dostatkem času mezi těmito sadami. Může to být každých 45, 60 nebo 90 minut. Můžeme si vybrat, jaký časový rámec chceme, jen musíme být svěží a plně odpočatí a zotavení z poslední série. Pamatujte, že je to cvičení, ne cvičení v posilovně.

Na konci dne se nám cvičným mazáním drážky podaří udělat velké množství dokonalých kliků. Představte si, kolik dokonalých kliků to bude za týden nebo měsíc. Tato kvantita a kvalita nás pomalu posílí. Až příště budeme testovat naše max, nebude to 15 kliků, ale možná 20 nebo i více. Vím, že to může znít šíleně. Děláte nějaké cvičení nebo pohyb několikrát denně? Nicméně to funguje. Pokud se chcete dozvědět více, na blogu The Art of Manliness je skvělý dlouhý článek o této metodě.

Zpět k problému

Dobře, zpět k problému a důvodu, proč vytvořit elektronovou aplikaci. Problémem je nedostatek síly. Jedním z potenciálních řešení je namazat drážkovou metodu, o které jsme právě hovořili. To však přináší řadu malých problémů. Nejprve musíme sledovat počet sad, které musíme udělat za den, a kolik jsme již udělali. Za druhé, chceme měřit dobu odpočinku bez neustálého sledování hodin. Za třetí, možná budeme chtít sledovat náš pokrok v dlouhodobém horizontu. Za čtvrté, možná budeme potřebovat pomoc s nastavením správného počtu opakování.

Některé z těchto problémů lze snadno vyřešit. Můžeme použít editor dokumentů nebo tužku a papír a napsat si, kolik sad chceme udělat a kolik jsme jich už udělali. Tyto poznámky pak můžeme někde uložit, abychom si je mohli později prohlédnout. Dále můžeme použít stopky k měření přestávky a nechat je upozornit nás, když je čas udělat další sadu. Nakonec můžeme použít hlavu nebo kalkulačku k nalezení správného počtu opakování, které bychom měli udělat v jedné sadě, přičemž nezapomeneme, že by to mělo být někde mezi 40 a 50 % našeho maxima.

Problém s tímto řešením a důvod, proč se mi nelíbí, je, že je příliš složité. Obsahuje příliš mnoho nástrojů. Musí existovat jiný způsob, který je mnohem jednodušší. Způsob, který by celý tento proces učinil téměř automatickým. Co kdyby existoval jen jeden nástroj, jedna jednoduchá aplikace, která by se o to všechno postarala, nic víc? No, když neexistuje nic, co by vyhovovalo našim potřebám, proč bychom si to nemohli postavit sami? Proč nemůžeme vytvořit jednoduchou elektronovou aplikaci, která by nám pomohla procvičit promaštění drážky? Výzva přijata!

Nápad a řešení

Takže to je to, co uděláme v této mini sérii. Chystáme se vytvořit jednoduchou elektronovou aplikaci, která poběží na stolních počítačích. Měl by být kompatibilní s hlavními platformami, Windows, Mac a Linux. O vytvoření mobilní aplikace pomocí stejného zásobníku si můžeme promluvit později. Tato aplikace bude mít jen jeden cíl a dělat jen jednu věc. Pomůže nám to procvičit metodu promazávání drážky pro jakékoli cvičení nebo pohyb, který chceme. Nyní si promluvme o funkcích, o těch, které musíte mít, i o těch, které jsou příjemné.

Funkce, které musíte mít

Za prvé, funkce, které musíte mít. Jak jsme diskutovali, musíme sledovat počet sérií, které musíme každý den udělat, a také to, kolik jsme jich již zvládli. Dále by naše aplikace měla obsahovat jednoduché stopky pro měření doby odpočinku mezi sériemi. To jsou v podstatě funkce, které musíte mít. No, je tu ještě jeden. Měli bychom být schopni minimalizovat aplikaci do systémové lišty. Naše aplikace by měla být viditelná pouze tehdy, když je to nutné nebo když chceme. Jinak bychom ani neměli vědět, že běží. Žádné další okno na obrazovce. Takže systémová lišta je nutností.

Příjemné funkce

Nyní si povíme něco o užitečných funkcích. Bylo by hezké, kdyby naše aplikace mohla sledovat náš pokrok. Možná budeme chtít vědět, jak jsme na tom dlouhodobě. A také můžeme chtít vědět, jak dlouho cvičíme konkrétní cvičení nebo pohyb. To nám může pomoci pochopit, zda děláme nějaký pokrok a jak rychle tento pokrok je. Usnadní také zaznamenávání cviků a pohybů, které jsme již cvičili v minulosti. Dále by nám aplikace mohla pomoci s nastavením správného počtu opakování nebo nám alespoň poskytnout nějaký hrubý odhad.

Tato funkce by byla užitečná ze dvou důvodů. Za prvé, z naší strany není nutné žádné počítání. Jistě, je to velmi jednoduchá matematika, ale stále je to něco, co můžeme zautomatizovat. Zadruhé se musíme ujistit, že znalost teorie, která se skrývá za metodou mazací drážky, by neměla být nutná. Aplikace by měla být užitečná i pro někoho, kdo o této metodě nic neví a chce naši aplikaci vyzkoušet jednoduše proto, že chce být silnější. Tento problém by tedy vyřešila kalkulačka s jednou nebo několika předvolbami.

Je tu ještě jedna funkce, kterou bychom možná chtěli zvážit, upozornění. Předpokládejme, že naše elektronová aplikace bude obsahovat stopky. To se bude hodit. Stále však budeme muset čas od času otevřít aplikaci, abychom zkontrolovali, zda není čas na další sadu. To není ideální. Přes den máme spoustu jiných věcí na práci. A protože aplikace poběží na pozadí, bude snadné zapomenout na náš trénink namazávání drážek. To staví oznámení někam mezi nutnost a něco, co musíte mít. Aplikace bude fungovat i bez nich, ale mohou zlepšit celkový dojem.

Pojďme si tedy udělat rychlou rekapitulaci. Sledování počtu sad (udělaných a již hotových), jednoduché stopky a systémová lišta. To jsou funkce, které musíte mít. Něco pro sledování našeho pokroku, nějaká jednoduchá kalkulačka opakování (a sad) s předvolbami a upozorněními na ploše, možná s nějakým zvukem. Zní to, že máme velmi dobrou představu o tom, co chceme postavit, alespoň pro našeho MVP. Nyní je čas přemýšlet o technologickém zásobníku pro naši elektronovou aplikaci.

Technický zásobník

Základním rámcem pro naši aplikaci bude elektron. Tam je jasno. To také znamená, že budeme pracovat s HTML, CSS a JavaScriptem. Díky těmto technologiím bude tato mini série snadněji sledovatelná pro nás všechny, kteří přicházíme ze světa webového vývoje a webdesignu. Tyto technologie jsou nakonec nástrojem našeho obchodu a naším denním chlebem, abych tak řekl. Nyní také rychle diskutujte o tom, jaké knihovny můžeme použít k vývoji naší elektronové aplikace. Jistě, můžeme se držet základů. Můžeme si však také procvičit práci s některými populárními knihovnami.

První a nejdůležitější knihovna, kterou v tomto projektu použijeme, bude React. Pomůže nám vytvořit naši elektronovou aplikaci pomocí modulárního přístupu a komponent. Usnadňuje a urychluje také práci s JavaScriptem a manipulací s DOM. S Reactem můžeme použít state pro funkce, jako jsou stopky a počítadlo sad. Konečně je to také osobní. Líbí se mi React a tohle může být příležitost se o něm dozvědět víc. V případě state vedení může také zvážit MobX zejména kvůli pozorovatelům a pozorovatelům. Prozatím se budeme držet React state .

Pokud jde o CSS a styling, nejprve jsem chtěl použít PostCSS. Myslím si však, že bychom místo toho měli používat stylizované komponenty. Tato knihovna pro styling skvěle funguje s Reactem, snadno se používá a zvládne vše, co budeme pro naši elektronovou aplikaci potřebovat. Poslední věcí, kterou je třeba zvážit, je, jaký bundler použijeme. Prozatím vyzkoušíme Balíček balíků. Vím, že je to divoká karta, která se může obrátit proti, ale vypadá to docela dobře. A v nejhorším případě můžeme vždy přejít na starý dobrý Webpack. A možná budeme. To je vše pro další knihovny. No, skoro.

Potřebujeme něco k vybudování naší elektronové aplikace. Zbývají nám tak tři možnosti. První z nich je elektron-builder. Druhým je balič elektronů. Třetí možností je elektron-kovárna. V tuto chvíli se stále rozhoduji mezi elektron-builderem a elektron-baličem. Stejně jako u bundlera si nejsem jistý, který si vybrat. Jedinou podmínkou, kterou oba tyto balíčky splňují, je možnost vytvořit přenosnou aplikaci bez nutnosti instalace. Nechme to otevřené do další části, kde začneme s vývojovou fází.

Závěrečné úvahy o budování elektronové aplikace

To je vše, co pro vás pro tento úvodní díl této mini série mám. Doufám, že nejste zklamáni, protože tato část byla zaměřena na čistou teorii a plánování a dnes jsme nenapsali ani řádek kódu. Výhodou je, že máme jasnou představu o tom, co chceme postavit a jaké funkce by naše elektronová aplikace měla mít. To nám pomůže pracovat na tom, co je opravdu důležité, a v důsledku toho vyvinout naši elektronovou aplikaci rychleji. Děkujeme za váš dnešní čas a připravte se, protože v příštím díle si ušpiníme ruce a ponoříme se do kódu.