React SPA webová aplikace pro správu schůzek

Naším cílem bylo vyvinout frontendovou část webové aplikace, zaměřenou na správu meetingů. Práce na tomto projektu začaly v únoru 2019 a hlavní vývoj skončil v červnu 2019.

Výzva - vytvořit frontendovou aplikaci v Reactu

Hlavní výzvou bylo vyvinout komplexní, ale uživatelsky přívětivé řešení pro efektivní správu meetingů. S výjimkou obrazovek pro přihlášení uživatele se jedná o single page aplikaci (SPA).

Výsledek - Single Page Aplikace s Draft.js editorem

Výsledkem bylo vytvoření webové aplikace pro správu meetingů v Reactu s:

• autentizací uživatele s OAuth přes Google,
• možností sdílet meetingy,
• možností importovat kontakty a kalendáře z Googlu,
• bohatým textovým editorem, nabízejícím spoustu funkcí a možností formátování,
• a dalšími funkcemi.

Vývojářský tým

Náš vývojářský tým pro webovou aplikaci Pinstriped se skládal z:

• projektové manažerky Štěpánky,
• React developera Šimona,
• React developera Dominika,
• QA engineera Jakuba.

Použité technologie a knihovny - Draft.js editor a další

Tato aplikace byla vytvořená v Reactu.js s Redux state managementem.

Asi nejdůležitejší technologií pro tento projekt byl Draft.js editor, vytvořený Facebookem.

Draft.js editor byl představený v roce 2016 na React.js konferenci.

Je postavený na immutable modelu a zajišťuje stejnou funkcionalitu a formátování pro všechny webové prohlížeče. Má v sobě zabudován spoustu druhů formátování, ale hlavní výhodou je možnost přizpůsobit si editor svým potřebám. Je možné přidávat obrázky, soubory a jiné prvky přímo do textu. Existuje také spousta Draft.js pluginů, které byly vytvořené Nikem Grafem a jeho týmem.

Jde například o image plugin, video plugin, emoji plugin, mention plugin a jiné. Draft.js editor má EditorState, což je neměnný objekt, který obsahuje kompletní stav editoru, stejně jako ContentState, SelectionState a další. ContentState má metodu, která vrací celý obsah ve formátu JSON, včetně textu, formátování a speciálních prvků, jakou jsou obrázky nebo soubory. Tento obsah můžete snadno odeslat na server a budete mít jistotu, že se zobrazí stejně v jakémkoliv prohlížeči.

Nejpoužívanějšími knihovnami pro tento projekt jsou:

• Draft.js pluginy
• Moment.js pro převod dat
• Formik na formuláře
• Debounce pro optimalizaci výkonu
• Node-sass na CSS moduly
• React-datepicker pro editaci dat a času
• React-responsive-modal na modály
• React-autosuggest pro našeptávání z Google kontaktů
• React-toastify na notifikace

Aplikace detailněji

1. Přihlášení přes email nebo Google
2. Google kalendáře a import kontaktů
3. Úvodní obrazovka
4. Editor meetingů
5. Sdílení meetingů a mód jen pro čtení
6. Vyhledávání podle názvu, obsahu nebo tagu

Přihlášení přes email nebo Google

Uživatel se může zaregistrovat nebo přihlásit přes email nebo Google:

Google kalendáře a import kontaktů

Pokud se přihlásíte přes Google, aplikace má přístup k vašim Google kalendářům a kontaktům, což urychluje vytvoření meetingů a přidávání účastníků meetingů.

Úvodní obrazovka

Po přihlášení se zobrazí úvodní obrazovka se dvěma možnostmi:

1. Create meeting - vytvoří prázdný meeting

2. Connect calendar - vytvoří meeting z události ve vašem kalendáři, včetně data, názvu a účastníků

Editor meetingů

Když vytvoříte nový meeting, zobrazí se editor meetingů. Navrchu je editovatelný název meetingu, datum, čas začátku a konce meetingu a tlačítko Share. Po kliknutí na Share tlačítko vyskočí následující modál:

Sdílení meetingů a mód jen pro čtení

Kliknutím na Send tlačítko pošlete email všem účastníkům meetingu. Můžete také přidat osobní vzkaz nebo zkopírovat odkaz na meeting a poslat ho napřímo komukoliv. Email obsahuje odkaz na meeting ve verzi jen pro čtení:

Pod vrchním panelem zpět v meeting editoru najdete lištu s účastníky, kde jsou zobrazené ikonky účastníků daného meetingu. Po kliknutí na ikonku účastníka nebo plus symbolu budete přesměrováni na stránku se seznamem účastníků:

Správa účastníků meetingu

Můžete buď přidat nebo smazat účastníka. Pokud přidáte účastníka, vyskočí následující modál:

Pokud jste přihlášeni přes Google, uvidíte našeptávač vašich Google kontaktů, což umožňuje rychleji přidat účastníky. Hlavní částí aplikace je editor pro psaní poznámek z meetingů.

Použili jsme Draft.js editor, vytvořený Facebookem, který je výbornou volbou pro formátování bohatého textu.

Také jsme použili pár Draft.js pluginů, jako například mentions plugin, hashtag plugin nebo inline toolbar plugin, díky čemuž jsme ušetřili spoustu času při vývoji této aplikace. Inline toolbar nabízí tyto možnosti formátování:

Pod editorem se nachází další panel nástrojů se speciálními funkcemi, jako:

• Action - vytvoří zaškrtávací políčko (stejná funkcionalita jako v inline toolbaru)
• Mention - můžete zmínit některého účastníka meetingu přímo v poznámkách a přiřadit mu úkoly
• Attach - umožní vám nahrát soubor nebo obrázek přímo do textu
• Tag - vytvoří štítek. Dá se použít například při filtrování meetingů.
• Decision - vloží ikonku do textu, která označuje vaše rozhodnutí

Dále na panelu naleznete tlačítko nápovědy, které zobrazuje klávesové zkratky pro formátování. Naučení se a používání klávesových zkratek znatelně urychluje rychlost psaní poznámek. Na levé straně obrazovky se nachází postranní panel se seznamem meetingů. Ve vrchní části je hlavní menu aplikace s možnostmi Account (nastavení účtu) a Log Out (odhlášení). Vedle jsou dvě tlačítka - tlačítko s kalendářem a tlačítko plus.

Po kliknutí na tlačítko s kalendářem uvidíte seznam vašich Google kalendářů:

Můžete zvolit všechny kalendáře, ze kterých chcete importovat události. Po zmáčknutí tlačítka Connect se zobrazí seznam naimportovaných událostí:

Když zvolíte událost a kliknete na tlačítko Create meeting, vytvoří se nový meeting se stejným názvem, datem a účastníky jako má zvolená událost. Pod spodním panelem naleznete seznam meetingů. Meetingy jsou řazené podle aktuálního data na Upcoming meetings (nadcházející meetingy) a Past meetings (uplynulé meetingy).

U každého meetingu je možnost duplicate nebo delete. Duplicate vytvoří nový meeting se stejným názvem a účastníky jako původní meeting.

Vyhledávání podle názvu, obsahu nebo tagu

Dole na postranním panelu se nachází Search panel, který umožňuje vyhledat meetingy na základě názvu nebo obsahu. Také je možné hledat meetingy podle konkrétního tagu, což umožňuje lepší členění vašich meetingů.