Žádná další aplikace COVID!
Ano, omlouvám se, toto je COVID tracker. Vím, že trh je těmito produkty dost přesycený. Někteří z mých přátel očekávali, že to bude můj Silicon-Valley-Pied-Piper moment, ale s Krysařem mám bohužel společné jen divné jméno...
Mýval
Jsem na to hrdý a jsem ochoten podstoupit riziko, že si lidé budou myslet, že jde o nějakou seznamovací aplikaci pro mývaly. Racoon, s jedním 'C', je přesmyčka (a pravděpodobně jediná přesmyčka) 'Corony.' Je to platný alternativní pravopis - neposlouchejte tu červenou tečkovanou čáru.
[UPRAVIT] Také jsem se konečně dostal k získání vlastní domény. Chtěl jsem však být co nejlevnější, takže mi dovolte představit... racoon.digital!
Mým cílem je zde jen předvést něco, na co jsem hrdý, ne se snažit něco vyhrát nebo založit skutečnou společnost. Takže pokud si myslíte, Tento nápad není originální! nebo Tento název by uživatele opravdu zmátl a bylo by těžké ho prodat! - doufejme, že to není tak důležité, pokud nenajdu žádné manažery, kteří byli v dětství napadeni mývaly.
Základní funkce a získané poznatky
- Dynamická mapa Google
- Oficiální, aktuální celosvětová data COVID-19
- Vlastní značky pro zobrazení případů podle polohy uživatelů (anonymně)
- Komponenta kontroly příznaků
- Zdravotní profil pro ukládání/úpravu příznaků a diagnóz
Zde jsou některé hlavní body toho, co považuji za své největší výzvy/úspěchy/s sebou.
Autorizace a autentizace
Chtěl jsem, aby dvě hlavní součásti – mapa a kontrola symptomů – byly dostupné bez účtu. Chcete-li přidávat příspěvky do mapy, zobrazovat komentáře a ukládat cokoli, jako jsou záložky nebo výsledky diagnostiky, potřebujete účet.
Nyní však chápu, proč je snazší nastavit celou aplikaci buď jako povinné přihlášení, nebo vůbec žádné. Setkal jsem se s mnoha problémy s ternary ohledně toho, zda byl uživatel „přihlášen“, zejména s react-router a Redux. Obecně jsem si Redux naprosto zamiloval, ale je to také poprvé, co jsem jej skutečně použil, takže některé z mých problémů mohou pocházet z chybné implementace Redux/Thunk. Stránka se pokaždé načte, jako by neexistoval žádný aktuální uživatel, a poté, co načtení do mého backendu načte aktuálního uživatele, prochází několika opakovanými vykresleními. To způsobilo spoustu problémů s undefined chyby při počátečním zatížení.
Měl jsem použít localStorage.token ? pro mé trojky místo v podstatě currentUser ? nebo loggedIn ? na základě úspěšného načtení do mé backendové autorizační cesty. Ty při počátečním načtení vrátí false, zatímco pokud je uživatel přihlášen, localStorage.token vrátí hodnotu true při načtení stránky. Myslel jsem, že má smysl nastavit to druhým způsobem jen pro případ, že by nějaký token byl bez uživatele. Pokud je však vaše ověření pevné, pak by uživatel měl token pouze v případě, že je logged_in a je smysluplnější založit jakékoli podmínky ověření na rozhraní pomocí localStorage.token ? (showpage) : null .
google-maps-react
Použil jsem knihovnu google-maps-react pro snadné používání Google Maps JavaScript API v Reactu. Zpočátku byl tento balíček opravdu úžasný a nikdy jsem si neuvědomil, jak obtížné může být zkoušet používat čistý JS uvnitř komponenty React bez nějaké knihovny. Narazil jsem na problémy pouze tehdy, když jsem chtěl více přizpůsobení, jak byste mohli očekávat. Vyskytlo se několik malých zádrhelů, které by rozhodně měli opravit – například zapomněli uvést <Circle /> komponentu ve výchozí verzi. Ale i to mě naučilo zázrakům jednoduché změny čísla verze v package.json od 2.0.2 na 2.0.3 . Milujte to, když to funguje.
Hlubší problémy jsem měl s google-maps-react a proč bych téměř doporučoval nepoužívat obalový balíček vůbec, pokud jste to s aplikací Google Maps React chtěli opravdu brát vážně, byl celý skrytý styl a tajemný <div> s to vyskočilo. Můžete určit styl mapy – opět obrovská výhoda – ale pouze vlastnosti pro celý kontejner/mapu, jako je poloha, výška a šířka.
Pokud jde o záhadu <div> s - Byl jsem na sebe hrdý, že jsem se vrátil ke kořenům vanilla JS a použil následující řešení:
const div = document.querySelector("#root > div")
div.className = "map-container"
Zdá se to malé, ale nejdéle jsem měl v podstatě:
<div id="root">
<div>
<div class="nav"></div>
<div class="map"></div>
</div>
</div>
bez ponětí, jak to druhé, prázdné, beztřídní <div> dostal se tam!
Zkontroloval jsem třikrát všechny své JSX, takže jsem se nedostal do google-maps-react zdrojový kód, myslel jsem, že to muselo být z něčeho, co balíček dělá, aby zabalil komponentu mapy.
Pro tento konkrétní příklad existovalo snadné řešení, ale takových bojů s nepředvídaným stylingem je zde mnohem více. Stále miluji google-maps-react , ale něco, na co je třeba dávat pozor při používání importů. Vedlejší poznámka – existuje také google-map-react .
Symptom Checker API
Pro komponentu diagnostiky jsem použil API Infermedica. Chtěl jsem dělat co nejméně požadavků (rozhraní API je zdarma, ale omezené) a to vše zkomplikovalo, protože je navrženo pro mnoho požadavků. Měli byste odeslat žádost POST se základními informacemi o pacientovi (pohlaví, věk), poté je odpovědí otázka a poté procházíte sledem pohovorů, které přidávají k předchozímu tělu žádosti a nakonec se vrátí odpověď na žádné další otázky/diagnózu.
Skončil jsem s velkou, ošklivou, opakující se funkcí a odesláním formuláře pro uživatele méně než ideální, ale! to! funguje!!!! Je to jeden z mých největších refaktorových cílů nastavit to v zamýšleném stylu rozhovoru nebo dokonce chatbota. Ale teď tomuto memu hluboce rozumím.
Také hledám způsoby, jak nahradit formulář pro kontrolu symptomů něčím chladnějším, jako je legitimní chatbot, a/nebo přepsat svůj vlastní lékařský algoritmus. Toto by však bylo mnohem spíše cvičením při psaní mých vlastních algoritmů - musí existovat tolik složitých věcí s lékařskými znalostmi od skutečných lékařů, které se dostaly do API Infermedica.
Serializátory kolejnic
Na tomto projektu mě zničily serializátory. Napíšu o tom další blogový příspěvek, protože teď mám k tomuto tématu hodně co říct a na této dílčí cestě jsem nenašel mnoho užitečných blogových příspěvků.
Ale teď řeknu, že jsem těžce podcenil serializátory, začal jsem s Active Model, pak jsem se pokusil přejít na Fast JSON API, pak jsem viděl odhalené (naštěstí falešné) záznamy hesel mých uživatelů, pak se mi před očima mihnul život, a pak se konečně vrátil do bodu polorozumění, bezpečnosti a efektivity s AMS. Až do mého delšího příspěvku na blogu - nepodceňujte své serializátory Rails. Udělejte je co nejpevnější, co nejdříve.
Rychlost!!!
Viděl jsem to několikrát sdílené a vždy na to teď myslím – 40 % lidí opustí web, jehož načítání trvá déle než 3 sekundy. Optimalizace doby načítání/dotazu není v bootcampech příliš důležitá. Pro začátečníky je to možná pochopitelně příliš-moc-příliš brzy. Ale myslím Naučil jsem se pár užitečných věcí o optimalizaci Active Record, jako je vyhýbat se .all a místo toho pomocí .includes() nebo .where() , tak to je malé vítězství. Ale chci se dozvědět více o ukládání dat do mezipaměti pomocí localStorage , minimalizace načítání na frontendu a samozřejmě optimalizace backendu.
TensorFlow a strojové učení
Chtěl jsem základní zvukovou komponentu, protože jsem nedávno četl úžasné nápady na projekt pro použití rozpoznávání zvuku k diagnostice pacientů prostřednictvím záznamu kašle. Pro:Použil jsem react-mic a fungovalo to podle očekávání! Hurá! Con:Nic moc jiného jsem s tím nedělal, nebo vůbec nic s TensorFlow ve finální verzi audio komponenty zde.
Nikdy jsem netvrdil, že jsem s AI/ML dost dobrý na to, abych zde TensorFlow používal smysluplným/diagnostickým způsobem, ale myslel jsem si, že mám dost slušné porozumění na to, abych uživateli řekl, zda jeho nahrávka zní jako kašel nebo ne. Ještě bych mohl. Ale termín se klepal a já jsem od toho upustil, protože jde o jednoduchý zvuk, který nahrává, zobrazuje vizualizaci frekvence a umožňuje vám stáhnout si nahrávku. Ale soustředil jsem se zde na pozitiva, použil jsem nový balíček reakcí a nastavil jsem obecnou komponentu, na které se bude později stavět.
Se základy audia, JS a HTML jsem se potýkal víc, než jsem čekal. Nikdy jsem nepoužil žádný z getUserMedia() API a byl zahlcen všemi new AudioContext() a new MediaRecorder(stream, options) takže chci (potřebuji?) tomu všemu lépe porozumět, než cokoli jiného v oblasti:audio/AI/TensorFlow.
Ale nevzdal jsem to! Dostal jsem TensorFlow, aby mi řekl, zda jsem při samostatném cvičení kašlal do mikrofonu nebo ne, jen potřebuji přijít na to, jak udržet 'trénink kašle'.
Nasazení
Poslední poznámka k nasazení jak frontendu, tak backendu do Heroku – tento příspěvek je můj oblíbený článek. Je to docela standardní, ale tohle je stručné a přímé. Nepoužil jsem yarn a neměl jsem žádné problémy. Předtím jsem zkoušel stránky Github a React a nelíbilo se mi to, takže jsem byl překvapen, jak snadné to bylo. Pokud jen hledáte nejrychlejší a nejsnadnější způsob, jak získat svůj backend Rails, frontendovou aplikaci React online, důrazně doporučuji Heroku!
[UPRAVIT] Nyní důrazně doporučuji nasadit frontend na Netlify!! Stále mám svůj backend na Heroku, ale moje frontend/nová doména racoon.digital je na Netlify. Obecně se mi líbí, jak snadné je používat nepřetržité nasazení s Netlify a React. Měl jsem s tím jen drobné překážky, buď kvůli nějaké hloupé, snadno opravitelné chybě, kterou jsem měl v sestavení, a/nebo kvůli tomu, že jsem zapomněl přidat _redirects soubor pro react-router . Zde najdete podrobnější průvodce, ale je to opravdu jednoduché. A zatím se rozhodně zdá rychlejší než Heroku.
Závěr
Doufám, že brzy přidám video demo. Zdá se to jako velmi klíčová věc po bootcampu pro projekty, ale nenávidím zvuk svého vlastního hlasu, takže jsme tady. Doufám, že racoon.digital je zatím dost dobrý. Tato doména byla překvapivě levná - dejte mi prosím vědět, jestli mi chybí něco, co z toho dělá hrozné doménové jméno lol! Chtěl jsem jen něco nezapomenutelného a chytlavého pro svůj LinkedIn a upřímně se mi to líbí, ale tady jsem vždy otevřený zpětné vazbě.
Děkujeme za přečtení!
Reference
- Živý web
- Frontend repo
- Backend repo
- Infermedica API
- google-maps-react