HackFest je každoroční akce v naší organizaci, abychom vyzkoušeli něco nového a zároveň inovovali. Skupina (maximálně 5) lidí se sejde, aby přemýšlela, rozvíjela a demonstrovala nápad tím, že na něm tři dny pracovala. Ani letos tomu nebylo jinak. Byl to HackFest plný zábavy, který objevoval, učil se, selhával, rozvíjel a nakonec i demonstroval.

Tento článek není o zobrazení kódu, který by vysvětlil, jak jsme jako tým myšlenku vyvinuli. Budoucí série to může pokrýt. Tento článek je o tom, jak získat letmý pohled na to, co jsme spolu s výzvami zažili. Doufám, že se vám to bude líbit.

Ale, o čem byla myšlenka?

Záměrem bylo vytvořit aplikaci, která by shromáždila základnu znalostí specifických pro produkt nebo obecných znalostí. Máme wiki, e-maily, dokumenty, které poskytují informace o produktu/službě, kterou organizace nabízí. Ale když je to nejvíce potřeba, nemusíme najít správný zdroj, na který bychom se mohli odkázat.

Proto jsme mysleli na vytvoření aplikace, kde se někdo může ptát na pochyby o produktu, technologii atd., a to volitelným přihlášením k odběru oznámení o odpovědích. Kdokoli může na tyto otázky odpovídat, hlasovat pro ně, lajkovat je, sledovat je. Může procházet interní dokumenty a navrhovat odpovědi. Můžete si to představit jako interní StackOverFlow, plus a mínus pár věcí.

Naší hlavní motivací bylo vyzkoušet si různé technologie a koncepty, o kterých jsme moc nevěděli, ale chtěli jsme je prozkoumat. Pojmenovali jsme to Samvahana což znamená komunikaci v indickém regionálním jazyce. Dobrou zprávou je, že v posledních dnech jsme mohli dokončit dobré základy.

Hovořit o učení...

Bylo to nesmírné. Zde je seznam učení, které stojí za to sdílet.

Jamstack

Jamstack není další technologický zásobník. Jde spíše o architektonický koncept. Základy tohoto zásobníku jsou založeny na JavaScriptu, API a značkách.

Použili jsme většinu konceptů Jamstacku jako,

Celá aplikace je na CDN (nebo ADN). CDN je zkratka pro Content Delivery Network a ADN je Application Delivery Network.
Vše v GIT.
Automatické sestavení s pracovním postupem, kdy vývojáři vloží kód.
Automatické nasazení předem vytvořených značek do CDN/ADN.
Prakticky méně serverů.

Více o konceptu Jamstack si můžete přečíst zde.

Gatsby

Část aplikace je předpřipravená, takže se může načítat rychleji. Měli jsme spoustu možností, jak vyzvednout generátor statických stránek. Můj tým Gatsbyho trochu znal, takže jsme s tím pokračovali.

Existuje mnoho startovacích projektů, které lze s Gatsbym začít. Ekosystém plug-inů je také velmi silný, aby získal téměř vše, co můžete potřebovat pro aplikaci Jamstack.

Auth0

Hlavní roli hraje aplikace s možností klást otázky, odpovídat, shromažďovat znalosti, autentizovat uživatele. Auth0 velmi dobře sedí. Má bezplatný plán, který nejlépe funguje pro zkušební projekt, jako je ten náš.

Vytvoření účtu a nastavení Auth0 je opravdu snadné. Zde je skvělý článek o tom, jak zabezpečit aplikaci Gatsby pomocí Auth0. Mohli bychom to sledovat tak, jak je, aby to fungovalo s naší aplikací.

Fauna

Dále jsme potřebovali datové úložiště. Fauna je datové úložiště bez klient-server ideální pro řešení Jamstack. Na začátek má velmi velkorysý bezplatný plán. Dokumentace je velmi bohatá, najdete v ní téměř vše, co byste možná hledali.

Fauna umožňuje několik způsobů interakce s úložištěm dat,

GraphQL :Opensource datový dotazovací a manipulační jazyk.
Fauna Query Language(FQL) :FQL má ovladače specifické pro daný jazyk, což umožňuje flexibilní použití s jazyky jako JavaScript, Java, Go atd. Další podrobnosti o FQL naleznete zde.

Pokračovali jsme v přístupu GraphQL.

GraphQL

GraphQL je dotazovací jazyk pro API, který poskytuje spoustu struktury způsobu, jakým dotazujeme nebo mutujeme (vytváříme, aktualizujeme a mažeme) data. Křivka učení GraphQL není strmá. Pokud s tím začínáte, vřele doporučuji tento návod, abyste se ho naučili s důvěrou.

Dynamické povahy aplikace bylo dosaženo pomocí GraphQL dotazováním na úložiště dat Fauna pomocí klienta respond-apollo.

js-search

Vytvořili jsme vyhledávací prototyp pro prohledávání znalostní báze. Toto vyhledávání je mocné pro vyhledávání nejen titulů, ale také obsahu. Existují možnosti jako Algolia, která je velmi silná. Zjistili jsme však, že knihovna js-search je pro naše potřeby dostatečně dobrá.

Jedná se o odlehčenou vyhledávací knihovnu na straně klienta pro vyhledávání objektů JavaScript a JSON.

Tailwind CSS

Myslím, že jsem udělal odvážný hovor, když jsem svému týmu navrhl CSS Tailwind, aniž bych s tím měl nějaké předchozí zkušenosti. Tento můj tweet asi nejlépe popisuje naši zkušenost s ním,

https://twitter.com/tapasadhikary/status/1338354966713356288

To je opravdu úžasná věc, kterou jsem se naučil a chci v ní pokračovat.

Ikony peří

Feather Icons je kytice krásných ikon s otevřeným zdrojovým kódem. Můžete si je upravit a stáhnout zdarma. Podívejte se do této části, abyste věděli, jak může sloužit účelu vašeho projektu. Je to velmi cool.

GitHub – Netlify Workflow

Nyní, když nám všechny tyto technologie/knihovny pomohly postavit prototyp, chtěli jsme nasadit s možností kontinuálního nasazení. Integrace Netlify s GitHub je přesně to, co jsme v tomto případě potřebovali.

Obrázek níže ukazuje tok mezi různými vrstvami a jak s nimi různí lidé (uživatelé a vývojáři) komunikují.

Spojení týmu a smysl pro úspěchy

Poslední, ale nejdůležitější věc. Při práci na několika náročných aspektech jsme měli skvělé týmové propojení. V každém kroku jsme měli velký pocit úspěchu, abychom se posunuli vpřed a udělali víc. @nagarjunshroff a @anupamrajanish jsou členové mého týmu, kteří to právě zvládli.

z giphy

A co výzvy?

Bez výzev je většinou nemožné dosáhnout neznámého. Měli jsme mírné množství výzev a mohli jsme na věci přijít jako na pokrok. Zde jsou některá zjištění, která mohou být užitečná,

Startovací sada CSS Tailwind obsahuje některé příklady komponent, které jsou užitečné pro začátečníky.
Gatsby při sestavování ošklivě křičí (gatsby build ), pokud používáte localstorage ve vašem kódu. Podobné dotazy a návrhy můžete najít. Zmírnili jsme to vytvořením nástroje, jako je tento,
```
export const setItem = (key, value) => {
  if (typeof window !== 'undefined') {
      window.localStorage.setItem(key, value);
  }
}
```
Narazili jsme na chybu jako,

Řešení bylo nalezeno zde.
Některé chyby při přesměrování auth0 na netlify byly vyřešeny tímto vláknem.
Gatsbyho chyba s "Not rendering React". Nápovědu najdete zde.
Došlo k chybě, protože Netlify ignorovalo proměnné env nastavené pro Auth0, aby fungovaly v kódu aplikace,
```
domain: process.env.AUTH0_DOMAIN,
clientID: process.env.AUTH0_CLIENTID,
redirectUri: process.env.AUTH0_CALLBACK
```
Později jsme se odtud dočetli o "Nasazení bez citlivých proměnných" a opravili jsme to podle doc.
... a několik dalších, které si nepamatuji!

Než skončíme...

To je prozatím vše. Doufám, že vám tato zkušenost pomůže. Děkuji, že jste dočetli až sem! Pojďme se připojit. Můžete mi na Twitteru @tapasadhikary (@tapasadhikary) s komentáři nebo je můžete klidně sledovat.

Lajkujte/sdílejte tento článek, ať se dostane i k ostatním. Některé ze zajímavých projektů najdete také na mé stránce GitHub. Neváhejte se na to podívat.

Také by se vám mohlo líbit,

Proč potřebujete dělat vedlejší projekty jako vývojář?
Jak snadno najít nápady na obsah blogu?
Jak psát konzistentně, příručka pro technické autory

Dokončil jsem projekt HackFest, zde je to, co jsem se naučil