Slides du talk donné à la API Platform conference, édition 2021. J'y parle du générateur de client NextJS d'API Platform mais aussi de la contribution à l'Open Source en tant que développeur junior.

1. Le générateur de
client NextJS d'API
Platform
Contribuer en tant que développeur junior

2. Le générateur de
... quoi ?

3. Le générateur de client d'API
Platform
Pré-installé dans la distribution d'API Platform

4. Permet de créer rapidement une PWA
fonctionnelle et customisable, par défaut en NextJS

5. Comment ?
Récupère la documentation de l'API (au format Hydra)
en utilisant la librairie bibliothèque api-doc-parser
Charge le template demandé, composé de
templates Handlebars
Rend les templates en y injectant les données
calculées à partir de la documentation de l'API
(liste des types, des propriétés, leurs relations,
règles de validation, etc.)

6. Justine Bruneau-Zahiri
Développeuse Front-End chez Les-
Tilleuls.coop depuis 2019
Intégration, ReactJS, NextJS
Formée à PHP, Symfony et API Platform

7. Mon (drôle de) parcours
Formation de base littéraire
Libraire
Le développement web est réservé aux ingénieurs ou
aux personnes issues des lières scienti ques
Pratique et montée en compétence
Obtention d'une bourse pour un bootcamp en
développement web
Reconversion professionnelle

8. Comment j'ai contribué
à API Platform ?

9. Contribution à la documentation
Suivi de la documentation "pas à pas"
pour installer le projet
Je commence "petit" : xer une typo

10. Première découverte du code du générateur
WHAAT ?
JSX + Handlebars

11. JSX, utilisé pour React

12. Handlebars, pour le templating

15. Contributions au
générateur NextJS

17. Ma première issue
Easy pick, huh ?
Ajouter des templates pour le CRUD (create read update delete)

18. http:/
/localhost/books
Liste

19. Détail
http:/
/localhost/books/1

21. JSON + JSON-LD + Hydra

22. Ajouter l'édition, la
création et la
suppression

23. Formik ?

24. Talk: "Taming forms in React" de Jared Palmer (créateur de Formik)
dispo sur formik.org

26. Edition
http:/
/localhost/books/1/edit

27. Création
http:/
/localhost/books/create

28. Suppression

31. and...next !

32. Afficher les messages d'erreur
de l'API dans le formulaire

34. Remise en question de l'existant
Adaptation à la librairie bibliothèque Formik

36. setErrors fournie par Formik

38. Je ne m'arrête plus

39. Ajout du <title> dans les pages
améliorer le référencement
améliorer l'accessibilité

40. respecter les standards du Web

41. Composant Head fourni par NextJS

43. and I became a
contributor !

45. WIP

46. Ajout de la balise script JSON-LD

50. TOUTES les
contributions sont
importantes
Résoudre des issues
Rager Reporter des issues
Contribuer à la documentation

51. Because I can !

52. Thanks !
and Code with Kindness !
@ZahiriJ