Tento příspěvek byl původně umístěn na mém osobním blogu
Mohlo by mi to vynést cenu „Nerd of the month“, ale chci vám říct, jak (a proč) jsem postavil PWA pro svou vlastní svatbu. :)
Nejprve několik tvrdých faktů:
- Oženil jsem se. Hurá!
- Původně jsem s tímto nápadem přišel před několika lety, když se můj nejlepší muž oženil.
- Zpočátku to může znít velmi divně, ale myslím, že důvody, proč jsem to udělal, jsou oprávněné.
Opravdu ne, proč by to někdo dělal?
Když se můj nejlepší muž oženil, původně jsem přišel s tímto nápadem poskytnout jim aplikaci/webovou stránku, která by svatebním hostům umožnila nahrávat fotografie a textové zprávy v průběhu dne, aby tak zdokumentovali svůj svatební den tak, jak jej vnímají ostatní.
Bohužel jsem tehdy musel dokončit diplomovou práci a také jsem musel strávit nějaký čas v nemocnicích (proto jsem nakonec také zmeškal jeho svatbu). Ale ta myšlenka mi nějak utkvěla v paměti.
Rychle vpřed před několika týdny, jsem blízko k svatbě. A abych byl upřímný, byla to moje žena, kdo vrátil můj nápad na stůl.
Kromě zřejmého důvodu, že se prostě rád učím stavěním věcí, se mi také líbil nápad umožnit našim hostům sdílet své dojmy soukromě. Existují desítky platforem sociálních médií pro sdílení takových věcí, ale podle mého názoru zachytíte pouze „pravdivé duch (hloupé tváře, zábavné příběhy, co si jen vzpomenete) události, pokud poskytnete způsob, jak sdílet data soukromě. Víte, věci, které byste nezveřejnili na svém Facebooku, Twitteru atd. Také jsem to neudělal/nedělal Nechci mnoho obrázků z mého svatební putování po sociálních sítích.
Dalším příjemným vedlejším efektem takové aplikace/webu by byla možnost poskytovat našim hostům informace. Věci jako časový rozvrh, jídelníček, kredity a tak dále.
Zde je shrnutí našich požadavků:
Poskytněte našim hostům aplikaci / webovou stránku, která:
- Uchovává data událostí
- Umožňuje jim nahrávat textové zprávy a/nebo obrázky
- Je trochu "antisociální Hosté vidí pouze svá vlastní nahraná videa, veškerý obsah vidíme pouze já a moje žena
- Nevypadá příliš sh****
- Běží na různých zařízeních od „To by mělo být v muzeu!“ na „Právě to vyšlo včera!“ , včetně různých operačních systémů
Dobře, to nezní tak hloupý. Jak jste to postavili?
Nejprve jsem přišel s myšlenkou vytvořit multiplatformní nativní aplikaci pomocí Flutter. Vytvářel jsem malé ukázkové aplikace, když to bylo ve stavu alfa a opravdu se mi to líbilo, takže v případě nativní aplikace by to bylo moje rychlé řešení. Nativní aplikace však vyžadují správný způsob distribuce, což by zase vyžadovalo účet vývojáře Apple, což by mě zase stálo 100 $ ročně, což je důvod, proč jsem svůj nápad s nativní aplikací zavrhl.
Poté, co jsem slyšel spoustu pozitivních věcí o možnostech, které nabízejí progresivní webové aplikace (PWA), rozhodl jsem se oprášit své dovednosti v oblasti vývoje webových frontendů. A protože mé dovednosti v oblasti vývoje webových frontendů v podstatě neexistovaly, rozhodl jsem se to udělat tvrdším způsobem a používat pouze obyčejný JS, HTML a CSS.
Zní to rozumně, ale co jste se při vytváření aplikace naučili?
Věci, které jsem předtím (vědomě) nepoužíval, a proto o nich nemám ani ponětí:
- Polyfills
- Sliby
- Fetch API
- Rozhraní API pro pozorovatele křižovatek
- Servisní pracovníci
- Dotazy na média
- Transformace CSS
Věci, které jsem chtěl vyzkoušet:
- Auth0 pro ověření
Věci, které jsem již věděl, ale stále jsem rozšířil své znalosti
- Backend Python pomocí Flask
Věci, které jsem sám vytvořil, abych je lépe pochopil
- Velmi základní druh jednostránkové aplikace
- Směrování, včetně ověření pro určité trasy
- Léné načítání obrázků
- Vlastní přizpůsobené ukládání do mezipaměti prostřednictvím servisního pracovníka
Fotky nebo se to nestalo!
Závěr
- Nejlepší způsob, jak se naučit nové věci, je skutečně je používat!
- Mít pevně stanovený termín a poměrně málo lidí, kterým můžete ukázat svou práci, skutečně zvyšuje vaši motivaci (a také zvyšuje váš strach z neúspěchu)!
- Vytvořil jsem responzivní webovou stránku s materiálovým designem, která je první pro mobily a která podporuje moderní prohlížeče (Chrome, FireFox, Samsung Internet, Safari) od nuly
- Zjistili jsme hodně o responzivním designu, zvláštnostech prohlížeče a vývoji front-end obecně
- Doufám, že výsledek nevypadá špatně, komentáře jsou vítány!
- Ten design se mi líbil víc, než jsem si myslel (o tom později)
- Fungovalo to! :)
Tento příspěvek přeskočil všechny technické detaily a měl by představovat moji motivaci a také přehled na vysoké úrovni. Bude následovat techničtější příspěvek, ale právě teď jsem příliš unavený.
Pokud vás to zaujalo, neváhejte mě kontaktovat prostřednictvím komentářů, e-mailu, Twitteru atd.
Tak dlouho
Simon