Martin Čuchta

1. Ako postaviť frontend nad
kvalitným API
VOL.7
sli.do
#FMKE7
Martin Čuchta

2. sli.do #FMKE7
Kde je dokumentácia?
KolegaPDF

3. sli.do #FMKE7
http://api.com/docs

4. sli.do #FMKE7
GET /products/{product_id}

5. sli.do #FMKE7
Implementujeme API po starom
api hostname sa nám opakuje
závislosť na konkrétnej knižnici pre http requesty (fetch)
ak sa zmení endpoint, musíme ho ručne opraviť na všetkých
miestach
žiadna validácia parametrov

6. sli.do #FMKE7
Riešenie?
použijeme .env, kde si uchováme API hostname
vytvoríme si pre každý endpoint funkciu, ktorú budeme volať
parametre tejto funkcie budú URL parametrami
neriešime závislosť na knižnici v celom projekte
v tejto funkcii si môžeme validovať parametre
zabalíme si túto množinu funkcií do triedy, v ktorej centrálne vyriešime
autorizáciu

7. sli.do #FMKE7

8. sli.do #FMKE7
Čo ak sa API zmení?

9. sli.do #FMKE7
Generovanie všeobecne
Model Generátor Kód
Šablóna

10. sli.do #FMKE7
Swagger.yaml
informácie o každom endpointe
ľahko parsovateľné
stále aktuálne
/docs sa generujú zo
swagger.yaml

11. sli.do #FMKE7
Generujeme API triedu
swagger.json swagger-js-codegen JavaScript
{{ mustache }}

12. sli.do #FMKE7
Generujeme iné API triedy
swagger.json
swagger-js-codegen Swift
TypeScript
C#
swagger-js-codegen
swagger-js-codegen

13. sli.do #FMKE7
Proces generovania
1. získame API URL pre aktuálny environment
2. stiahneme najnovší swagger.json
3. importujeme (custom) mustache šablóny
4. generujeme triedu pomocou swagger-js-codegen
5. formátujeme kód pomocou Prettier
6. uložíme priamo do zdrojákov projektu

14. sli.do #FMKE7
Použitie

15. sli.do #FMKE7
package.json

16. sli.do #FMKE7
Prešli sme dlhú cestu …

17. sli.do #FMKE7
Ďakujem!