Používateľské rozhrania a používateľský zážitok

React, Grafické komponenty

Ciele

  1. Naučiť sa rapídne vytvárať webové komponenty na základe návrhov v nástroji Figma.
  2. Naučiť sa tvoriť grafické používateľské rozhranie v prostredí React.
  3. Dbať na konzistentné využívanie dizajnového jazyka v celom projekte a konzistentnosť rozhrania.

Úvod

Layout už máme vytvorený na minulom cvičení. Cieľom dnešného cvičenia je nalniť tento layout obsahom.

Budeme vytvárať tzv. "bleskový prototyp" - implementáciu Figma prototypu, kde sa budeme sústrediť na rapídne vytváranie komponentov a obsahu bez ohľadu na prílišné štýlovanie.

Vytvárame high-fidelity prototyp, no sústredíme sa na konzistentnosť rozhrania, štýlov, a obsahu. Na zabezpečenie konzistentnosti budeme v maximálnej miere používať komponenty existujúceho dizajnového jazyka a následne budeme rapídne vytvárať len komponenty špecifické pre náš projekt ako kombináciu existujúcich komponentov knižnice.

Výsledkom v tomto týždni nemusí byť funkčný prototyp, no mali by sme mať pripravené komponenty a layouty pre všetky obrazovky, ktoré potrebujeme.

Použité technológie

Nasledujúce cvičenia budú prezentované na technológii React, pretože silne podporuje vytváranie jednoduchých HTML komponentov a náš jednoduchý dizajnový jazyk v nástroji Figma je pripravený aj na React export.

Použitie iných rámcov (Angular, Vue, Flutter, Tailwind+Headless CSS, ...) je možné, za nasledujúcich podmienok:

  • Webový softvérový rámec. Pokiaľ bakalárska práca využíva úplne inú technológiu na implementáciu, implementovať priamo v nej môžete len po dohode s cvičiacim.
  • Jednotný dizajnový jazyk. Môžete a mali by ste konzistentne používať existujúce knižnice komponentov a štýlov.
  • Podmienky pre vybraný softvérový rámec:
    • Layouty, responzívnosť
    • Komponentová štruktúra
    • Nepodporúčame používať Bootstrap - existujú aj novšie technológie. Jeho použitie však nezníži bodové hodnotenie zadania.

Poznámka

V našej prípadovej štúdii ako knižnicu komponentov použijeme React Aria, obsahuje veľké množstvo neštýlovaných komponentov pripomínajúcich náš Jednoduchý dizajnový jazyk nástroja Figma.

Upozornenie

Návod na cvičení je stručný a slúži len ako vodítko. Podrobný postup je prezentovaný na prednáške.

Príprava pred cvičením

Úloha 0.1

Pripomeňte si základy Reactu (Moodle -> Predmet KProg -> videá napr. z 2023).

Úloha 0.2

Nainštalujte si nástroj NodeJS.

Úloha 0.3

Do príkazového riadka (v akejkoľvek ceste) napíšte:

npm install -g npm npx create-react-app generate-react-cli

Úloha 0.4

Do repozitára vášho zadania si inicializujte nový React projekt (starý obsah si zatiaľ môžete presunúť do nového adresára old):

npx create-react-app ./react-frontend`

Prezrite si obsah vygenerovaného projektu.

Úloha 0.5

V príkazovom riadku sa nastavte na adresár react-frontend a následne si predinštalujte knižnicu komponentov vášho dizajnového jazyka (napr. pre React: React Aria alebo Headless UI sú výborné pre Simple Design Language, tiež Material, Semantic UI a pod.). Ukážka pre React Aria:

cd react-frontend
npm install --save react-aria-components @spectrum-icons/workflow @adobe/react-spectrum

Úloha 0.6

Vyskúšajte si spustiť projekt v prehliadači napísaním nasledujúceho príkazu do príkazového riadka:

npm start

Úloha 0.7

Nahrajte počiatočný stav projektu do vášho GIT repozitára.

Postup

Krok 1: Presun obsahu z minulého cvičenia

Úloha 1.1

Presuňte si kód vytvorený na minulom cvičení do nového React projektu. Inšpirujte sa návodom z príkladu titulky.com nižšie.

Obsah kódu z minulého cvičenia si presunieme do nového React projektu nasledovne:

  1. Všetky definície CSS premenných a štýlov spoločné pre celý projekt presnieme do src/index.css, namiesto predchádzajúceho obsahu.
  2. Zmeníme src/App.js podľa príkladu nižšie a vložte tam celý layout z predchádzajúceho index.html, pričom
    • všetky class zmeníme na className,
    • všetky štýly presunieme do App.css,
    • názov triedy štýlov hlavného elementu layoutu zmeníme na .App.
import './App.css';
import React from "react";

function App() {
  return (
    <div className="App">
      {/* sem vložte váš layout (všetko z elementu <body>) */}
    </div>
  );
}

export default App;
  1. V src adresári projektu premažeme všetko nepotrebné okrem:
    • public/index.html,
    • v adresári src súbory App.css, App.js, index.css, index.js.
  2. V súbore index.js ponecháme len nasledujúci obsah:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Poznámka

Obrázky sa v React projekte ukladajú do aresára src/assets. Návod, ako ich do jsx vkladať nájdete napríklad na stackoverflow.

Krok 2: Vytvorenie komponentov pre hlavné sekcie

Úloha 2.1

Pre každú hlavnú sekciu stránky si vytvorte React komponent. Inšpirujte sa návodom nižšie.

Vytvoríme si komponent src/components/Menu.jsx a presunieme doňho sekciu definujúcu menu z App.js a s ním súvisiace štýly do App.css. To isté urobíme aj s elementom päty, ktorý presunieme do nového React komponentu src/components/Footer.jsx. Nezabudneme presunúť aj zodpovedajúce štýly do src/components/Menu.css a src/components/Footer.css.

Menu.jsx

import React from "react";
import "./Menu.css";

const Menu = () => {
  return (
    <div className="Menu">
      {/*obsah pôvodného menu*/}
    </div>
  );
};

export default Menu;

Footer.jsx

import React from "react";
import "./Footer.css";

const Footer = () => {
  return (
    <div className="section Footer">
      {/*obsah pôvodnej päty stránky*/}
    </div>
  );
};

export default Footer;

Následne ich v komponente App zobrazíme namiesto pôvodného HTML kódu menu a päty. Nezabudneme na import komponentov Menu a Footer.

// ...
import Footer from "./components/Footer";
import Menu from "./components/Menu";

function App() {
    return (
        <div className="App">
            <Menu></Menu>
            {/* zvyšok HTML kódu */}
            <Footer></Footer>
        </div>
    );
}

export default App;

To isté teraz urobíme so zvyšným HTML kódom v App, pričom tentoraz ho presunieme do nového komponentu src/pages/Index.jsx a jeho CSS. Výsledný kód v App.js teda bude:

function App() {
  return (
    <div className="App">
      <Menu></Menu>
      <Index></Index>
      <Footer></Footer>
    </div>
  );
}

Teraz máme hotovú základnú štruktúru našej aplikácie, pričom komponent Index reprezentuje hlavný layout nášho používateľského rozhrania.

Krok 3: Použitie komponentov z dizajnového jazyka React Aria

Úloha 3.1

V projekte konzistentne používajte komponenty a štýly knižnice dizajnového jazyka. Inšpirujte sa príkladom nižšie.

React Aria používa široké spektrum jednoduchých neštýlovaných React komponentov, ktorý vieme použiť v súlade s naším jednoduchým dizajnovým jazykom použitým vo Figma prototype. Ukážeme si to na príklade jednoduchého formulára pre vyhľadávanie na stránke titulky.com.

Vyhľadávací formulár na hlavnej stránke prototypu titulky.com
Obr. 1: Vyhľadávací formulár na hlavnej stránke prototypu titulky.com

Kód pôvodnej sekcie:

<div>
    <input type="text" placeholder="Názov filmu a seriálu">
    <button>Hľadať</button>
</div>

zmeníme na:

 <Form name="searchForm">
    <div className="search-form">
      <TextField type="text" name="text-to-search" placeholder="Názov filmu alebo seriálu">
        <Input />
      </TextField>
      </div>
    <Button>Hľadať</Button>
  </Form>

pričom komponenty Form, TextField, Input a Button sú importované z knižnice React Aria:

import { Button, TextField, Input, Form } from "react-aria-components";

Návod na import, použtie a štýlovanie každého elementu môžete nájsť v dokumentácii knižnice.

Krok 4: Vytváranie vlastných komponentov

Úloha 4.1

Pre každý vlastný komponent vytvorte nový React komponent v adresári src/component. Pre rýchlu tvorbu komponentov môžete použiť export do React kódu v nástroji Figma (ukážka na prednáške). Komponenty nemusia byť v tomto prototype interaktívne.

Podrobný postup vytvárania vlastných komponentov je prezentovaný na prednáške.

Krok 5: Finalizácia obsahu

Úloha 5.1

Podľa vzoru na tomto cvičení si môžete už teraz pripraviť komponenty pre všetky hlavné stránky vášho zadania do aresára src/pagesa vaše špecifické komponenty do adresára src/components.

Na ďalšom cvičení si ukážeme, ako pridať prototypu interaktivitu pomocou smerovača.

Poznámka

Pre každú stránku alebo komponent nezabudnite na konzistentné delenie súviacich štýlov do ich vlastných CSS súborov.

Úloha 5.2

Do začatia nasledujúceho cvičenia nahrajte priebežný stav projektu na GIT.

Vzorový príklad

Zdroje

© Copyright 2024 KPI FEI TUKE