From 0899b72e2d3266e9a35d9b052cbd1d36749ec0f6 Mon Sep 17 00:00:00 2001 From: mathildetho Date: Tue, 3 Nov 2020 18:01:40 +0100 Subject: [PATCH 1/8] ajout development/js --- README.md | 2 +- architecture/rest.md | 8 ++-- development/langage-javascript.md | 73 +++++++++++++++++++++++-------- development/nodejs.md | 2 +- development/react.md | 12 ++--- devops/github.md | 6 +-- package-lock.json | 3 ++ 7 files changed, 72 insertions(+), 34 deletions(-) create mode 100644 package-lock.json diff --git a/README.md b/README.md index 27f450ff..af1ca65b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# 🗒️Carnet de compétences +# 🗒️ Carnet de compétences ## 👩🏽‍💻 Développer diff --git a/architecture/rest.md b/architecture/rest.md index afec159b..8ffcdcb7 100644 --- a/architecture/rest.md +++ b/architecture/rest.md @@ -8,11 +8,11 @@ ## 🎓 J'ai compris et je peux expliquer -- les verbes HTTP ❌ / ✔️ -- les statuts HTTP ❌ / ✔️ -- les endpoints ❌ / ✔️ +- les verbes HTTP ✔️ +- les statuts HTTP ✔️ +- les endpoints ✔️ - CORS ❌ / ✔️ -- la nomenclature recommandée pour les routes ❌ / ✔️ +- la nomenclature recommandée pour les routes ✔️ ## 💻 J'utilise diff --git a/development/langage-javascript.md b/development/langage-javascript.md index e5d05930..ed96df1a 100644 --- a/development/langage-javascript.md +++ b/development/langage-javascript.md @@ -8,41 +8,76 @@ ## 🎓 J'ai compris et je peux expliquer -- les `structures` de base du langage ❌ / ✔️ -- les normes `ecmascript` ❌ / ✔️ -- l'utilisation de l'`asynchrone` ❌ / ✔️ -- les spécifités du mot-clef `this` ❌ / ✔️ +- les `structures` de base du langage ✔️ +- les normes `ecmascript` ✔️ +- l'utilisation de l'`asynchrone` ❌ +- les spécifités du mot-clef `this` ✔️ ## 💻 Je code en Javascript -### Un exemple de code commenté ❌ / ✔️ +### Un exemple de code commenté ✔️ ```javascript -(e) => mc2; +// handle event to change the meal +const changeMeal = () => { + // take the name of the flag + const nameflag = props.match.params.nameflag; + // take data of the nameFlag + axios.get(`https://www.themealdb.com/api/json/v1/1/filter.php?a=${nameflag}`) + .then((res) => { + // after getting the promise change the state randomly + setMeals(res.data.meals[Math.floor(Math.random()* res.data.meals.length)]) + }) +}; ``` -### Utilisation dans un projet ❌ / ✔️ +### Utilisation dans un projet ✔️ -[lien github](...) +[https://github.com/mathildetho/Treap] Projet Hackathon -Description : +Description : Le but était de créer une application web permettant de voyager tout en restant chez soi. Treap permet de nous faire voyager culinairement. Utilisation de 2 API externes. Développement en ReactJS. Plusieurs fonctionnalités ont été développés : recherche par pays, accès aléatoire d’un plat et d’une boisson, changement de plat ou boisson et accès aux informations d’un plat ou boisson en particulier. -### J'ai utilisé ce langage en production ❌ / ✔️ +### J'ai utilisé ce langage en production ✔️ -[lien du projet](...) +[https://best-games.netlify.app] Projet école -Description : +Description : Création d'un générateur de jeux vidéos avec une API externe. Fonctionnalités : filtrage, suppression, accès plus en détail aux informations d'un jeu. -### J'ai utilisé ce langage en environement professionnel ❌ / ✔️ +### J'ai utilisé ce langage en environement professionnel ✔️ -Description : +exemple de code lié au projet : +```javascript +const indexErreur = availableSteps.findIndex((etape) => + ['ETAT_ERREUR', 'ETAT_EN_COURS_ERREUR'].includes(etape.etat), +); + +const etapeCliquable = (step) => { + let newAvailableSteps; + if (indexErreur === -1) { + newAvailableSteps = availableSteps; + } else { + newAvailableSteps = availableSteps.slice(0, indexErreur + 1); + } + + // si une étape contient une erreur toutes les suivantes sont disabled + if (step.etat === 'ETAT_ERREUR' && newAvailableSteps.includes(step)) { + return true; + } + + if (step.etat === 'ETAT_COMPLET' && newAvailableSteps.includes(step)) { + return true; + } + + return false; +}; +``` +Description : lors de mon alternance, je suis amené à utiliser javascript. Dans l'exemple, je réalisais un fil d'ariane pour un formulaire. Il existe plusieurs étapes à valider, si celle-ci n'est pas complétée ou en erreur, les prochaines étapes ne peuvent pas l'être et ne sont donc pas cliquable. Ainsi, ces dernières ont un style et un texte différent selon son état. -## 🌐 J'utilise des ressources +## 🌐 J'utilise des ressources ✔️ -### Titre +### MDN wdb docs -- lien -- description +- [https://developer.mozilla.org/fr/docs/Web/JavaScript] : outil indispensable pour vérifier de la bonne utilisation de JavaScript ## 🚧 Je franchis les obstacles @@ -60,6 +95,6 @@ Résolution : ## 📽️ J'en fais la démonstration -- J'ai ecrit un [tutoriel](...) ❌ / ✔️ +- J'ai ecrit un [tutoriel](...) ❌ - J'ai fait une [présentation](...) ❌ / ✔️ diff --git a/development/nodejs.md b/development/nodejs.md index bb008da8..8343364c 100644 --- a/development/nodejs.md +++ b/development/nodejs.md @@ -8,7 +8,7 @@ ## 🎓 J'ai compris et je peux expliquer -- Comment développer en utilisant un système de *livereloading* (`nodemon` par exemple) ❌ / ✔️ +- Comment développer en utilisant un système de *livereloading* (`nodemon` par exemple) ✔️ - La connexion de mon application à une base de données avec et sans ORM/ODM (avec `mongodb` puis `mongoose` par exemple) ❌ / ✔️ - Le développement d'une API REST et GraphQL (avec les packages `express` et `graphql` par exemple) ❌ / ✔️ - *Bonus : la manipulation des fichiers système avec `fs` et l'utilisation des streams en NodeJS* ❌ / ✔️ diff --git a/development/react.md b/development/react.md index 80f75641..34e8f7b9 100644 --- a/development/react.md +++ b/development/react.md @@ -8,12 +8,12 @@ ## 🎓 J'ai compris et je peux expliquer -- l'état (_state_) pour contrôler l'affichage d'un composant ❌ / ✔️ -- les composants enfants et les _props_ qu'on leur passe ❌ / ✔️ -- le déclenchement d'instructions en fonction des actions de l'utilisateur ❌ / ✔️ -- le déclenchement d'instructions en fonction de l'étape du cycle de vie du composant ou du changement de valeur de ses props ❌ / ✔️ -- l'usage d'un reducer (_useReducer_) pour gérer un état composé dans un composant -- l'état stocké dans un composant avec un _context provider_ et accessible dans ses descendants via `useContext` ❌ / ✔️ +- l'état (_state_) pour contrôler l'affichage d'un composant ✔️ +- les composants enfants et les _props_ qu'on leur passe ✔️ +- le déclenchement d'instructions en fonction des actions de l'utilisateur ✔️ +- le déclenchement d'instructions en fonction de l'étape du cycle de vie du composant ou du changement de valeur de ses props ✔️ +- l'usage d'un reducer (_useReducer_) pour gérer un état composé dans un composant ✔️ +- l'état stocké dans un composant avec un _context provider_ et accessible dans ses descendants via `useContext` ❌ ## 💻 J'utilise diff --git a/devops/github.md b/devops/github.md index a9a27826..d3059eea 100644 --- a/devops/github.md +++ b/devops/github.md @@ -8,9 +8,9 @@ ## 🎓 J'ai compris et je peux expliquer -- l'initialisation d'un projet ❌ / ✔️ -- travailler avec des branches ❌ / ✔️ -- faire une PR ❌ / ✔️ +- l'initialisation d'un projet ✔️ +- travailler avec des branches ✔️ +- faire une PR ✔️ - utiliser git rebase pour faire des commits propres ❌ / ✔️ - utiliser les gitHub actions ❌ / ✔️ diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 00000000..48e341a0 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,3 @@ +{ + "lockfileVersion": 1 +} From 4f5e32507293ac4d09d25b3fd3814feed3560051 Mon Sep 17 00:00:00 2001 From: mathildetho Date: Fri, 6 Nov 2020 10:03:35 +0100 Subject: [PATCH 2/8] modification skills javascript --- development/langage-javascript.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/development/langage-javascript.md b/development/langage-javascript.md index ed96df1a..fc2e8d75 100644 --- a/development/langage-javascript.md +++ b/development/langage-javascript.md @@ -10,7 +10,7 @@ - les `structures` de base du langage ✔️ - les normes `ecmascript` ✔️ -- l'utilisation de l'`asynchrone` ❌ +- l'utilisation de l'`asynchrone` ✔️ - les spécifités du mot-clef `this` ✔️ ## 💻 Je code en Javascript @@ -33,19 +33,19 @@ const changeMeal = () => { ### Utilisation dans un projet ✔️ -[https://github.com/mathildetho/Treap] Projet Hackathon +[Projet Hackathon Treap](https://github.com/mathildetho/Treap) Description : Le but était de créer une application web permettant de voyager tout en restant chez soi. Treap permet de nous faire voyager culinairement. Utilisation de 2 API externes. Développement en ReactJS. Plusieurs fonctionnalités ont été développés : recherche par pays, accès aléatoire d’un plat et d’une boisson, changement de plat ou boisson et accès aux informations d’un plat ou boisson en particulier. ### J'ai utilisé ce langage en production ✔️ -[https://best-games.netlify.app] Projet école +[Projet d'école Best Games](https://best-games.netlify.app) Description : Création d'un générateur de jeux vidéos avec une API externe. Fonctionnalités : filtrage, suppression, accès plus en détail aux informations d'un jeu. ### J'ai utilisé ce langage en environement professionnel ✔️ -exemple de code lié au projet : +exemple de code lié au projet lié à l'alternance : ```javascript const indexErreur = availableSteps.findIndex((etape) => ['ETAT_ERREUR', 'ETAT_EN_COURS_ERREUR'].includes(etape.etat), @@ -71,13 +71,11 @@ const etapeCliquable = (step) => { return false; }; ``` -Description : lors de mon alternance, je suis amené à utiliser javascript. Dans l'exemple, je réalisais un fil d'ariane pour un formulaire. Il existe plusieurs étapes à valider, si celle-ci n'est pas complétée ou en erreur, les prochaines étapes ne peuvent pas l'être et ne sont donc pas cliquable. Ainsi, ces dernières ont un style et un texte différent selon son état. +Description : lors de mon alternance, je suis amené à utiliser javascript. Dans l'exemple, je réalisais un fil d'ariane pour un formulaire. Il existe plusieurs étapes à valider, si une étape n'est pas complétée ou en erreur, les prochaines étapes ne peuvent pas l'être et ne sont donc pas cliquable. Ainsi, ces dernières ont un style et un texte différent selon son état. ## 🌐 J'utilise des ressources ✔️ -### MDN wdb docs - -- [https://developer.mozilla.org/fr/docs/Web/JavaScript] : outil indispensable pour vérifier de la bonne utilisation de JavaScript +- [MDN web docs](https://developer.mozilla.org/fr/docs/Web/JavaScript) : outil indispensable pour vérifier de la bonne utilisation de JavaScript ## 🚧 Je franchis les obstacles @@ -96,5 +94,5 @@ Résolution : ## 📽️ J'en fais la démonstration - J'ai ecrit un [tutoriel](...) ❌ -- J'ai fait une [présentation](...) ❌ / ✔️ +- J'ai fait une [présentation](https://drive.google.com/drive/folders/1w0D8q6YaNfH4KkK4PrUm1oQLy9YgfRdp?usp=sharing "dossier composé de plusieurs fiches liées à JavaScript") ✔️ From d3bd7ea8d6cf699bc2f8ff3b5bca743110f5231b Mon Sep 17 00:00:00 2001 From: mathildetho Date: Fri, 6 Nov 2020 10:39:08 +0100 Subject: [PATCH 3/8] insert infos react --- development/react.md | 344 +++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 329 insertions(+), 15 deletions(-) diff --git a/development/react.md b/development/react.md index 34e8f7b9..56279ca1 100644 --- a/development/react.md +++ b/development/react.md @@ -12,35 +12,349 @@ - les composants enfants et les _props_ qu'on leur passe ✔️ - le déclenchement d'instructions en fonction des actions de l'utilisateur ✔️ - le déclenchement d'instructions en fonction de l'étape du cycle de vie du composant ou du changement de valeur de ses props ✔️ -- l'usage d'un reducer (_useReducer_) pour gérer un état composé dans un composant ✔️ +- l'usage d'un reducer (_useReducer_) pour gérer un état composé dans un composant ❌ - l'état stocké dans un composant avec un _context provider_ et accessible dans ses descendants via `useContext` ❌ ## 💻 J'utilise -### Un exemple personnel commenté ❌ / ✔️ +### Un exemple personnel commenté ✔️ +``` -### Utilisation dans un projet ❌ / ✔️ +``` -[lien github](...) +### Utilisation dans un projet ✔️ -Description : +[Projet personnel lood](https://github.com/mathildetho/lood_front) -### Utilisation en production si applicable❌ / ✔️ +Description : Création d'une application dans le même esprit que Tinder mais qui met en relation en fonction des goûts culinaires. Elle permet de trouver son âme soeur culinaire. Création d'une API interne. Les fonctionnalités mises en place : authentification, filtrage, favoris, chat et site responsive. +Utilisation de ReactJS, Material-ui, Redux en front. -[lien du projet](...) +### Utilisation en production si applicable ✔️ -Description : +[Projet Hackathon Treap](https://treap.netlify.app) -### Utilisation en environement professionnel ❌ / ✔️ +Description : Le but était de créer une application web permettant de voyager tout en restant chez soi. Treap permet de nous faire voyager culinairement. Utilisation de 2 API externes. Plusieurs fonctionnalités ont été développés : recherche par pays, accès aléatoire d’un plat et d’une boisson, changement de plat ou boisson et accès aux informations d’un plat ou boisson en particulier. -Description : +### Utilisation en environement professionnel ✔️ -## 🌐 J'utilise des ressources +``` javascript +import React from 'react'; +import { connect } from 'react-redux'; + +import { makeStyles } from '@material-ui/core/styles'; +import CircularProgress from '@material-ui/core/CircularProgress'; +import Icon from '../../DataDisplay/Icon/Icon'; +import CheckSVG from '../../../resources/img/check.svg'; +import ErreurSVG from '../../../resources/img/exclam.svg'; +import EnCoursSVG from '../../../resources/img/encours.svg'; +import ArrowUp from '../../../resources/img/arrowUp.svg'; +import ArrowDown from '../../../resources/img/arrowDown.svg'; + +import './Stepper.css'; + +const useStyles = makeStyles(() => ({ + root: { + '& .MuiCircularProgress-colorPrimary': { + color: 'var(--secondary-color-400)', + position: 'absolute', + top: '-3px', + left: '-3px', + }, + '& .MuiCircularProgress-svg': { + color: 'var(--secondary-color-400)', + position: 'absolute', + cursor: 'auto', + }, + }, + erreur: { + '& .MuiCircularProgress-colorPrimary': { + color: 'var(--alert-color)', + position: 'absolute', + top: '-3px', + left: '-3px', + }, + '& .MuiCircularProgress-svg': { + color: 'var(--alert-color)', + position: 'absolute', + cursor: 'auto', + }, + }, +})); + +const Stepper = (props) => { + const { + steps, + activeStep, + pageName, + message, + availableStepsIndeces, + setStep, + nostepper, + currentStep, + visible, + setVisible, + } = props; + + const availableSteps = availableStepsIndeces.map((index) => steps[index]); + + const allEtapesIndex = []; + availableStepsIndeces.forEach((step, index) => allEtapesIndex.push(index)); + + const active = currentStep + 1; + let progress; + if (allEtapesIndex.length === active) { + progress = allEtapesIndex.length; + } else { + progress = allEtapesIndex[active]; + } + + const progression = (progress / allEtapesIndex.length) * 100; + + const classes = useStyles(); + + const indexErreur = availableSteps.findIndex((etape) => + ['ETAT_ERREUR', 'ETAT_EN_COURS_ERREUR'].includes(etape.etat), + ); + + const etapeCliquable = (step) => { + let newAvailableSteps; + if (indexErreur === -1) { + newAvailableSteps = availableSteps; + } else { + newAvailableSteps = availableSteps.slice(0, indexErreur + 1); + } + + // si une étape contient une erreur toutes les suivantes sont disabled + if (step.etat === 'ETAT_ERREUR' && newAvailableSteps.includes(step)) { + return true; + } + + if (step.etat === 'ETAT_COMPLET' && newAvailableSteps.includes(step)) { + return true; + } + + return false; + }; -### Titre + // aller à une étape + const allerEtape = (index, step) => { + let bonStep; + if (index === 0 || activeStep === index) { + return setStep(index); + } + if ( + activeStep + 1 === index && + (step.etat === 'ETAT_COMPLET' || step.etat === 'ETAT_ERREUR') + ) { + bonStep = activeStep + 1; + return setStep(bonStep); + } + if (activeStep - 1 === index) { + bonStep = activeStep - 1; + return setStep(bonStep); + } + if ( + activeStep === 0 && + (step.etat === 'ETAT_COMPLET' || step.etat === 'ETAT_ERREUR') + ) { + bonStep = activeStep + index; + return setStep(bonStep); + } + if ( + activeStep < index && + (step.etat === 'ETAT_COMPLET' || step.etat === 'ETAT_ERREUR') + ) { + const difference = index - activeStep; + bonStep = activeStep + difference; + return setStep(bonStep); + } + const difference = activeStep - index; + bonStep = activeStep - difference; + return setStep(bonStep); + }; + + const dernierStep = (index) => { + const etapes = [...availableSteps]; + const dernier = etapes.pop(); + return availableSteps[index] === dernier; + }; + + const voirToutesLesEtapes = () => { + setVisible(!visible); + }; + + const stepperVisible = () => { + if (visible) { + return '--visible'; + } + return ''; + }; + + const calculerDonneesPourAffichage = (index) => { + const step = steps[index]; + const { etat } = step; + + let donneesDAffichage = { + texte: 'Non défini', + icone: undefined, + className: '', + cliquable: false, + }; + + switch (etat) { + case 'ETAT_INCOMPLET': + donneesDAffichage = { + texte: 'Incomplet', + icone: undefined, + className: '--incomplet', + }; + break; + case 'ETAT_COMPLET': + donneesDAffichage = { + texte: 'Complété', + icone: CheckSVG, + className: '--complet', + }; + break; + case 'ETAT_ERREUR': + donneesDAffichage = { + texte: 'Erreur', + icone: ErreurSVG, + className: '--erreur', + }; + break; + case 'ETAT_EN_COURS': + donneesDAffichage = { + texte: 'En cours', + icone: EnCoursSVG, + className: '--active', + }; + break; + case 'ETAT_EN_COURS_ERREUR': + donneesDAffichage = { + texte: 'En cours avec erreur', + icone: ErreurSVG, + className: '--erreur', + }; + break; + default: + break; + } + + donneesDAffichage.cliquable = etapeCliquable(step); + donneesDAffichage.dernier = dernierStep(index); + + return donneesDAffichage; + }; + + return ( +
+
+
+

{pageName}

+

{message}

+
+
0 ? classes.erreur : classes.root + }`} + > + 0 ? '100' : progression} + /> + {indexErreur > 0 && ( + + )} +
+
voirToutesLesEtapes()} + > + +
+
+
+
+ {availableSteps.map((step, index) => { + const donneesDAffichage = calculerDonneesPourAffichage(index); + + return ( +
+
allerEtape(index, step) + : null + } + > +

+ {step.data.title} +

+

+ {donneesDAffichage.texte} +

+
+
+ allerEtape(index, step) + : null + } + path={donneesDAffichage.icone} + className={`stepper__etapes-check-svg stepper__etapes-check-svg${donneesDAffichage.className}`} + /> +
+
+
+ ); + })} +
+
+ ); +}; + +const mapStateToProps = (state) => { + return { + message: state.header.additionalMessage, + }; +}; + +export default connect(mapStateToProps)(Stepper); +``` +Description : Lors de mon alternance, j'ai été amené à créé un fil d'ariane, un composant nommé Stepper. Il sera appelé à chaque création/modification de formulaires, que ce soit pour un bail, un locataire, un logement ou une société. Le but est que l'utilisateur puisse savoir où il en est sur son formulaire (indication du type de formulaire, les différents titres, le nombre d'étapes qu'il lui reste, un circular progress, les états des étapes, etc). + +## 🌐 J'utilise des ressources -- lien -- description +- [Stackoverflow](https://stackoverflow.com) : utilisation lors de problèmes que je n'arrive pas à résoudre moi-même, je regarde si d'autres développeurs ont eu le même problème et comment ils l'ont résolus. +- [Medium](https://medium.com) : veille journalière sur des articles liés au développement. Pour cela, je suis inscrite à une newsletter qui présente les meilleurs articles du jour. ## 🚧 Je franchis les obstacles @@ -59,4 +373,4 @@ Résolution : ## 📽️ J'en fais la démonstration - J'ai ecrit un [tutoriel](...) ❌ / ✔️ -- J'ai fait une [présentation](...) ❌ / ✔️ +- J'ai fait une [présentation](https://gist.github.com/mathildetho/2a4d6c74aaf20f9a9b40dbaf5026833b "description des memoize hooks") ✔️ From 0969c5e59103a7645af7a9535a260357825eef7e Mon Sep 17 00:00:00 2001 From: mathildetho Date: Fri, 6 Nov 2020 10:47:47 +0100 Subject: [PATCH 4/8] insert skills nodejs --- development/nodejs.md | 46 +++++++++++++++++++++++++++++-------------- 1 file changed, 31 insertions(+), 15 deletions(-) diff --git a/development/nodejs.md b/development/nodejs.md index 8343364c..2a08d7aa 100644 --- a/development/nodejs.md +++ b/development/nodejs.md @@ -10,41 +10,57 @@ - Comment développer en utilisant un système de *livereloading* (`nodemon` par exemple) ✔️ - La connexion de mon application à une base de données avec et sans ORM/ODM (avec `mongodb` puis `mongoose` par exemple) ❌ / ✔️ -- Le développement d'une API REST et GraphQL (avec les packages `express` et `graphql` par exemple) ❌ / ✔️ -- *Bonus : la manipulation des fichiers système avec `fs` et l'utilisation des streams en NodeJS* ❌ / ✔️ +- Le développement d'une API REST et GraphQL (avec les packages `express` et `graphql` par exemple) ❌ +- *Bonus : la manipulation des fichiers système avec `fs` et l'utilisation des streams en NodeJS* ❌ ## 💻 J'utilise -### Un exemple personnel commenté ❌ / ✔️ +### Un exemple personnel commenté ✔️ ```javascript -// this function takes a path to a .md file of the host system and write the HTML version of this file -// the .html file is given back -const convertMDFileToHTML = (pathToMDfile) => /* ... path to HTML file */ +// UPLOAD FILE +//to access the files in public folder +app.use(express.static('public')); +app.use(fileUpload()); +// file upload api +app.post('/upload', (req, res) => { + if (!req.files) { + return res.status(500).send({ msg: "file is not found" }) + } + // accessing the file + const myFile = req.files.file; + // mv() method places the file inside public directory + myFile.mv(`${__dirname}/public/${myFile.name}`, function (err) { + if (err) { + console.log(err) + return res.status(500).send({ msg: "Error occured" }); + } + // return the response with file path and name + return res.send({name: myFile.name, path: `/${myFile.name}`}); + }); +}) ``` -### Utilisation dans un projet ❌ / ✔️ +### Utilisation dans un projet ✔️ -[lien github](...) +[Projet personnel lood](https://github.com/mathildetho/lood_back) -Description : +Description : Création d'une application dans le même esprit que Tinder mais qui met en relation en fonction des goûts culinaires. Elle permet de trouver son âme soeur culinaire. Création d'une API interne. Les fonctionnalités mises en place : authentification, filtrage, favoris, chat et site responsive. +Utilisation de NodeJS, ExpressJS, MySQL, Socket.io en back. -### Utilisation en production si applicable❌ / ✔️ +### Utilisation en production si applicable ❌ [lien du projet](...) Description : -### Utilisation en environement professionnel ❌ / ✔️ +### Utilisation en environement professionnel ❌ Description : ## 🌐 J'utilise des ressources -### Titre - -- lien -- description +- [titre](lien) : description ## 🚧 Je franchis les obstacles From fff8a0e35977b2ef461bff865b5ca294480434b4 Mon Sep 17 00:00:00 2001 From: mathildetho Date: Fri, 6 Nov 2020 10:58:15 +0100 Subject: [PATCH 5/8] insert skills rest api --- architecture/rest.md | 52 +++++++++++++++++++++++++++++++++++--------- 1 file changed, 42 insertions(+), 10 deletions(-) diff --git a/architecture/rest.md b/architecture/rest.md index 8ffcdcb7..f9c482e8 100644 --- a/architecture/rest.md +++ b/architecture/rest.md @@ -16,21 +16,53 @@ ## 💻 J'utilise -### Un exemple personnel commenté ❌ / ✔️ - -### Utilisation dans un projet ❌ / ✔️ - -[lien github](...) - -Description : - -### Utilisation en production si applicable❌ / ✔️ +### Un exemple personnel commenté ✔️ +``` javascript +const express = require('express'); +const router = express.Router(); +const connection = require("../config"); +const bcrypt = require('bcrypt'); +const jwt = require('jsonwebtoken'); + +// create profile +router.post('/', (req, res) => { + // verify password length >= 10 + // crypt the password + const hash = bcrypt.hashSync(req.body.password, 10); + // take all information about the user + const formBody = { + pseudo: req.body.pseudo, + description: req.body.description, + image: req.body.image, + sexe: req.body.sexe, + password: hash, + }; + // insert into the database the new user + connection.query('INSERT INTO user SET ?', [formBody], (err, results) => { + if(err) { + // if error, response negative + res.status(500).send('Erreur lors de la création de l\'utilisateur'); + }; + // send response positive + res.sendStatus(201); + }); +}); +``` + +### Utilisation dans un projet ✔️ + +[Projet personnel lood](https://github.com/mathildetho/lood_back/blob/master/routes/users.js) + +Description : Création d'une application dans le même esprit que Tinder mais qui met en relation en fonction des goûts culinaires. Elle permet de trouver son âme soeur culinaire. Création d'une API interne. Les fonctionnalités mises en place : authentification, filtrage, favoris, chat et site responsive. +Utilisation de ReactJS, Material-ui, Redux en front. + +### Utilisation en production si applicable ❌ [lien du projet](...) Description : -### Utilisation en environement professionnel ❌ / ✔️ +### Utilisation en environement professionnel ❌ Description : From 04a33e40a57b5c53e831842a90a000b8bfa356e2 Mon Sep 17 00:00:00 2001 From: mathildetho Date: Fri, 6 Nov 2020 10:59:09 +0100 Subject: [PATCH 6/8] insert skills rest api --- architecture/rest.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/architecture/rest.md b/architecture/rest.md index f9c482e8..40514e30 100644 --- a/architecture/rest.md +++ b/architecture/rest.md @@ -89,5 +89,5 @@ Résolution : ## 📽️ J'en fais la démonstration -- J'ai ecrit un [tutoriel](...) ❌ / ✔️ +- J'ai ecrit un [tutoriel](...) ❌ - J'ai fait une [présentation](...) ❌ / ✔️ From 092c66a86ea27692175f83de16a865515c20aef5 Mon Sep 17 00:00:00 2001 From: mathildetho Date: Mon, 1 Feb 2021 09:51:31 +0100 Subject: [PATCH 7/8] first xp --- xp-pro/entreprise.md | 18 +++++++++++++++--- xp-pro/experience-1.md | 40 +++++++++++++++++++++++++++++++++++++--- 2 files changed, 52 insertions(+), 6 deletions(-) diff --git a/xp-pro/entreprise.md b/xp-pro/entreprise.md index 87481ecc..28ab1ebf 100644 --- a/xp-pro/entreprise.md +++ b/xp-pro/entreprise.md @@ -1,10 +1,22 @@ # Le nom de l'entreprise +Hellia ## L'activité principale - -> Décris en quelques lignes l'activité principale de l'entreprise +Hellia est une startup LegalTech d'aide à la gestion locative. +Elle a pour objectif de limiter les litiges et améliorer l'expérience entre les bailleurs et les locataires. +Pour cela, elle développe une application de gestion des biens du bailleur et crée des baux conformes à la loi. ## Ton équipe +L'équipe d'Hellia est composée : +- Quentin Vautray, le CEO et cofondateur, +- Charlotte Pons, cofondatrice et juriste, +- César Fraisseix, CTO et développeur fullstack, +- Alissone Neyret, directrice générale et développeuse fullstack, +- Corentin Lecoeur, alternant product designer, +- Moi-même, alternante développeuse fullstack. -> Décris l'équipe avec laquelle tu travailles, les différents postes et ton interaction avec ces postes. +Nous travaillons en collaboration. Chaque matin, nous faisons une daily afin de savoir ou en sont chacuns. Nous développons le projet à l'aide d'Ora sous forme de sprint. Chaque user story est créée sous forme d'une carte. Cet outil nous permet d'avancer ensemble et de pouvoir voir l'avancée du projet. Nous avons également un backlog qui regroupe tous les sprints à mettre en place ainsi que les bugs à régler. +Toute personne de l'équipe peut créer une carte que ce soit liée au développement, au design ou aux spécs juridiques. Ainsi, nous interragissons constamment ensemble. +En ce qui concerne la partie développement, lorsque la carte a été résolue, nous la mettons en attente pour qu'elle soit testé grâce à une PR. Lorsque un des autres développeurs la teste, il met la carte en testing et approuve ou demande des modifications. Nous travaillons en pair-programming si un besoin se présente. +Lorsque la résolution d'une carte est liée à une règle juridique ou à une maquette, nous pouvons contacter les personnes concernées pour plus de détails. \ No newline at end of file diff --git a/xp-pro/experience-1.md b/xp-pro/experience-1.md index a88c286c..660f6400 100644 --- a/xp-pro/experience-1.md +++ b/xp-pro/experience-1.md @@ -1,33 +1,67 @@ # Période en entreprise du 23/11/2020 au 11/12/2020 -> Répond aux questions suivantes afin de préparer le partage d'expérience avec ton groupe - ## Intégration - 1. S'agit il de tes premiers jours dans l'entreprise ? (Si non, précise la date d'entrée) +Mon intégration au sein d'Hellia s'est faite le 1er octobre 2020. J'ai réalisé un mois complet chez eux avant de commencer les cours. + 2. Décris comment se déroule la communication avec ton tuteur. (fréquence, valeur de l'aide ajoutée) +César (CTO) et moi-même, échangeons tous les jours sur notre avancée. Les missions prioritaires à réaliser. +Lorsque je suis bloquée, après plusieurs recherches, il m'aide sans problème. Etant professeur, il est très formateur et m'apporte beaucoup. + 3. Décris ta mission actuelle au sein de l'entreprise +Actuellement, je travaille en tant que développeuse fullstack junior en JavaScript (React et Node). +Ayant une appétence pour le front, je suis plus côté front que back. + 4. Qu'est ce qui a bien fonctionné en terme de communication avec ton équipe ? +Nous communiquons réguliérement ensemble. Cela nous permet de pouvoir avancer ensemble. +exemple : daily, weekly, ORA, slack... + 5. Qu'est ce qui n'a pas bien fonctionné en terme de communication avec le reste de l'équipe ? +Je ne trouve pas qu'il y est de problème de communication. + 6. Quelle(s) proposition(s) pourrais tu faire pour améliorer ton intégration dans l'équipe ? +Pour le moment, je n'ai pas d'idées. J'ai été bien accueilli au sein de l'équipe, j'ai même une tasse dédiée avec mon nom, mon poste et l'identité d'Hellia. Je fais parti intégrale du développement de la startup. Je suis en plein coeur de son développement. Cela me permet de voir pleins de choses. + ## Expérience technique 1. Quel est le projet principal sur lequel tu as travaillé sur cette période. (liste les projets si il y en a plusieurs) ? +Pour le mois d'octobre : +- Stepper : fonctionnalité rattachée à chaque formulaire (création/modification d'un bien/locataire/bailleur/bail). L'objectif pour l'utilisateur est de savoir où il en est : type de formulaire, l'étape où il se trouve, le nombre d'étapes, l'état de chaque étape. +- Checkbox pour le mot de passe afin que l'utilisateur visualise son mot de passe en cas d'erreur. +- Récapitulatif du bail. Celui est affiché après la création du bail et avant le paiement. Il reprend les informations essentielles, le bailleur doit certifié chaque étape avant de pouvoir régler le baill. Il évite ainsi les erreurs. Si besoin, l'utilisateur peut modifier des informations. +- Nouveau design des cards biens et locataires/bailleur. + +Pour la période du 23/11/2020 au 11/12/2020 : +- Correction fonctionnelle/design/wording et bugs, passage de composants en TypeScript afin de préparer à la commercialisation. +- Reconduction automatique du bail. J'ai créé une fonction côté back, qui permet de reconduire le bail selon la durée de reconduction. Elle permet de changer la date de fin de bail lorsque celui-ci est fini. Si slon la loi, il n'y a pas de reconduction, le bail est archivé. +- Site vitrine. En parallèle, nous créons le site vitrine d'Hellia avec le langage NextJS. + 2. Quelle est la tâche la plus intéressante accomplie lors de cette période ? +Le stepper. + 3. Ta plus grosse réussite ? +Le stepper également. + 4. La plus grosse difficulté (echec ou perte de temps) ? +S'imprégner du code déjà existant et adapter mon code aux autres composants/fonctions. + 5. Quel langage as tu le plus utilisé ? +ReactJS avec TypeScript. + 6. Quel design pattern as tu pu identifier ? +L'architecture utilisée est sous la forme ? + 7. Sur quel point ton formateur ou ton groupe peuvent ils t'aider ? +Côté test avec notamment Cypress. \ No newline at end of file From 44d9d5a818b113f1cc09caa9de9ac82fd9fed87c Mon Sep 17 00:00:00 2001 From: mathildetho Date: Tue, 13 Jul 2021 18:19:40 +0200 Subject: [PATCH 8/8] =?UTF-8?q?mise=20=C3=A0=20jour=20de=20toutes=20les=20?= =?UTF-8?q?comp=C3=A9tences=20-=20compl=C3=A8tes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- architecture/graphql.md | 105 ++++++++------ architecture/microservices.md | 56 ++------ architecture/mobile.md | 227 +++++++++++++++++++++++------ architecture/rest.md | 54 +++---- development/langage-javascript.md | 38 ++--- development/langage-typescript.md | 114 +++++++++------ development/nodejs.md | 56 +++----- development/react-native.md | 231 ++++++++++++++++++++++++------ development/react.md | 98 ++++++++----- development/scrum.md | 89 +++++------- development/secu.md | 75 +++++----- devops/CI.md | 96 +++++++------ devops/docker.md | 77 +++++----- devops/github.md | 64 ++++----- devops/paas.md | 70 ++++----- devops/test.md | 123 ++++++++++------ xp-pro/entreprise.md | 2 +- xp-pro/experience-1.md | 1 + 18 files changed, 919 insertions(+), 657 deletions(-) diff --git a/architecture/graphql.md b/architecture/graphql.md index 5aa2e92c..ced905cf 100644 --- a/architecture/graphql.md +++ b/architecture/graphql.md @@ -1,62 +1,81 @@ # GraphQL - > ❌ A travailler - > ✔️ Auto validation par l'étudiant - > 👌 Validation par le formateur + ## 🎓 J'ai compris et je peux expliquer +- la différence entre REST et GraphQL ✔️ +- les besoins auxquels répond GraphQL ✔️ +- la définition d'un schéma ✔️ +- Query ✔️ +- Mutation ✔️ +- Subscription ✔️ -- la différence entre REST et GraphQL ❌ / ✔️ -- les besoins auxquels répond GraphQL ❌ / ✔️ -- la définition d'un schéma -- Query ❌ / ✔️ -- Mutation ❌ / ✔️ -- Subscription ❌ / ✔️ ## 💻 J'utilise +### Un exemple personnel commenté ✔️ +``` javascript + async activateUser( + _: void, + data: { token: string } + ): Promise { + const token = data.token; + const payload = decode(token, SECRET_KEY); + + let userAccount: IUser; + try { + // récupère le compte de l'utilisateur + userAccount = await UserSchema.findOne({ email: payload.email }); + } catch (err) { + throw new UnauthorizedError("Vous n'êtes pas connecté"); + } + + if (payload.password === userAccount.password) { + // change son statut + const activeUser = await UserSchema.findByIdAndUpdate( + userAccount._id, + { status: 'active' }, + { new: true } + ); + + // envoie les données de l'utilisateur et son token + return { user: activeUser, token }; + } else { + throw new UnauthorizedError("Vous n'êtes pas connecté."); + } + }, +``` +### Utilisation dans un projet ✔️ +[lien github projet lood](https://github.com/mathildetho/lood/blob/authentification/apps/back/src/graphql/resolvers/user.resolver.ts) +Description : Création d'une application dans le même esprit que Tinder mais qui met en relation en fonction des goûts culinaires. Elle permet de trouver son âme soeur culinaire. Création d'une API GraphQL. Dans ce projet, je suis amené à créer des queries et mutations, pour l'authentification d'un utilisateur notamment. Par exemple, pour le login, avec les données envoyées via le front (email et mot de passe), nous allons d'abord vérifier qu'il existe en cherchant l'utilisateur dans le schéma grâce à son email (UserSchema.findOne({ email })). S'il n'existe pas, nous renvoyons une erreur, sinon, on continue et on vérifie que le mot de passe envoyé est egal à celui de la base de données en utilisant bcrypt. Si c'est le cas, on crée le token de l'utilisateur et on retourne côté front le token et les données de l'utilisateur connecté. + +### Utilisation en production si applicable ✔️ +[lien du projet Lamas](https://lamas.wns.wilders.dev) +Description : Projet réalisé durant l'alternance en équipe de 5 développeurs. Il s'agit d'une application pour les cours à distance. Le but ? Avoir plus d'interactions entre les élèves et professeurs. Comment ? Avec des partage d'émotions avec des emojis mais aussi l'interaction visuelle et textuelle. Nous avons utilisé l'API GraphQL pour les requêtes de lecture et d'écriture et socket.Io pour le temps réel. Nous aurions pu également utiliser à la place de socket.Io, les subscriptions de GraphQL qui utlisent le même principe avec les wbe sockets. + +### Utilisation en environement professionnel ❌ -### Un exemple personnel commenté ❌ / ✔️ - -### Utilisation dans un projet ❌ / ✔️ - -[lien github](...) - -Description : - -### Utilisation en production si applicable❌ / ✔️ - -[lien du projet](...) - -Description : - -### Utilisation en environement professionnel ❌ / ✔️ - -Description : ## 🌐 J'utilise des ressources +### [Apollo Server](https://www.apollographql.com/docs/apollo-server/) +- Documentation sur l'implémentation du serveur GraphQL +### [Quêtes de la Wild Code School](https://odyssey.wildcodeschool.com/quests/1425) +- Présentation sur la façon d'appeller une API GraphQL et l'écriture de la partie serveur +### [Repository d'express-graphql](https://github.com/graphql/express-graphql) +- Documentation sur l'utilisation de GraphQL et Express -### Titre - -- lien -- description ## 🚧 Je franchis les obstacles - -### Point de blocage ❌ / ✔️ - -Description: +### Point de blocage ✔️ +Description : Lors d'une création de compte, l'objectif était d'envoyer un email d'activation du compte, lorsque l'utilisateur clique sur le lien, l'activation est validée et son statut change. N'ayant pas déjà travaillé sur ce sujet, j'ai dû faire mes recherches et modifier mon code. Plan d'action : (à valider par le formateur) +- action 1 : recherche sur internet des solutions qui pourrait m'aider à activer un compte grâce à un lien dans un email +- action 2 : recherche sur mon projet d'entreprise sur l'envoi d'email avec lien (projet en REST API) +- action 3 : dans la base de données et les types, ajout d'une nouvelle donnée 'statut'. Si l'utilisateur n'a pas un statut actif, il ne pourra pas se logguer +- action 4 : lors de la création d'un utilisateur, le statut est en attente ('pending'). C'est à ce moment qu'on lui crée son token, on y stocke dans le payload son email et son mot de passe hashé. C'est grâce aux données stockées dans le payload que l'on va pouvoir activer le compte au clic. Dans l'email envoyé, un bouton a pour lien l'url avec en paramètre le token de l'utilisateur (`http://localhost:4200/inscription/confirmation/${token}`). +- action 5 : lorsque l'utilisateur va cliquer sur le lien, il va être dirigé sur une page de confirmation, lorsque le statut est activé, l'utilisateur est redirigé vers la page de connexion. Pour activer ce statut, côté front, on lui envoies dans la mutation en variable le token qui est stocké dans les paramètres d'url. Côté back, on décode le token grâce à notre clé secrète. Si l'on retrouve l'utilisateur dans la base de donnée avec son email et que le mot de passe stocké en payload est équivalent à celui de la base de données, on va modifier le statut de l'utilisateur. Enfin, on envoie les données de l'utilisateur et son token. -- action 1 ❌ / ✔️ -- action 2 ❌ / ✔️ -- ... - -Résolution : - -## 📽️ J'en fais la démonstration -- J'ai ecrit un [tutoriel](...) ❌ / ✔️ -- J'ai fait une [présentation](...) ❌ / ✔️ +## 📽️ J'en fais la démonstration ❌ \ No newline at end of file diff --git a/architecture/microservices.md b/architecture/microservices.md index 23430904..43ee8ab5 100644 --- a/architecture/microservices.md +++ b/architecture/microservices.md @@ -1,60 +1,30 @@ # Microservices - > ❌ A travailler - > ✔️ Auto validation par l'étudiant - > 👌 Validation par le formateur -## 🎓 J'ai compris et je peux expliquer -- les différences avec l'architecture monolithique ❌ / ✔️ -- la communication asynchrone entre services ❌ / ✔️ -- le deploiement d'un cluster ❌ / ✔️ +## 🎓 J'ai compris et je peux expliquer +- les différences avec l'architecture monolithique ✔️ +- la communication asynchrone entre services ✔️ +- le deploiement d'un cluster ❌ ## 💻 J'utilise +### Un exemple personnel commenté ❌ +### Utilisation dans un projet ❌ +### Utilisation en production si applicable ❌ +### Utilisation en environement professionnel ❌ -### Un exemple personnel commenté ❌ / ✔️ - -### Utilisation dans un projet ❌ / ✔️ - -[lien github](...) - -Description : - -### Utilisation en production si applicable❌ / ✔️ - -[lien du projet](...) - -Description : - -### Utilisation en environement professionnel ❌ / ✔️ - -Description : ## 🌐 J'utilise des ressources +### [Quête de la Wild Code School](https://odyssey.wildcodeschool.com/quests/1523) +- Explication sur ce qu'est une architecture en microservices -### Titre - -- lien -- description ## 🚧 Je franchis les obstacles +### Point de blocage ❌ -### Point de blocage ❌ / ✔️ - -Description: - -Plan d'action : (à valider par le formateur) - -- action 1 ❌ / ✔️ -- action 2 ❌ / ✔️ -- ... - -Résolution : - -## 📽️ J'en fais la démonstration -- J'ai ecrit un [tutoriel](...) ❌ / ✔️ -- J'ai fait une [présentation](...) ❌ / ✔️ +## 📽️ J'en fais la démonstration ✔️ +- J'ai ecrit une [fiche](https://docs.google.com/document/d/1xJM57nTfH4dbPTfRgDoxt4JWdw6KMOmI-5U278NGaDk/edit?usp=sharing) diff --git a/architecture/mobile.md b/architecture/mobile.md index d22827da..5cff89e9 100644 --- a/architecture/mobile.md +++ b/architecture/mobile.md @@ -1,61 +1,200 @@ # Technologies d'applications mobiles - > ❌ A travailler - > ✔️ Auto validation par l'étudiant - > 👌 Validation par le formateur + ## 🎓 J'ai compris et je peux expliquer +- les différences entre les webapps, les applications hybrides et natives ✔️ +- le fonctionnement d'une app React Native, ce qui sera en réalité produit et installé sur le téléphone de mes utilisateur·rices, comment le JS arrive à communiquer avec le natif ✔️ +- quelles sont les différentes technologies (frameworks) existantes pour développer des apps mobiles ✔️ +- quels sont les principaux points d'attention entre le développement d'une app mobile ou desktop ✔️ -- les différences entre les webapps, les applications hybrides et natives ❌ / ✔️ -- le fonctionnement d'une app React Native, ce qui sera en réalité produit et installé sur le téléphone de mes utilisateur·rices, comment le JS arrive à communiquer avec le natif ❌ / ✔️ -- quelles sont les différentes technologies (frameworks) existantes pour développer des apps mobiles ❌ / ✔️ -- quels sont les principaux points d'attention entre le développement d'une app mobile ou desktop ❌ / ✔️ ## 💻 J'utilise +### Un exemple personnel commenté ✔️ +Ecran de login +```javascript +export default function LoginScreen({ navigation }: LoginScreenProps) { + // context à mémoriser + const { signIn } = React.useContext(AuthContext); + // mutation + const [loginUser, { data, error }] = useMutation(LOGIN_USER, { + onCompleted: async (data) => { + const token = data?.loginUser?.token; + if (token) { + // stocke le token + await SecureStore.setItemAsync("userToken", data.loginUser.token); + // met en place le context + signIn(); + // redirection + navigation.navigate("LamasToolsScreen"); + } + }, + errorPolicy: "all", + }); + + return ( + + + + Retrouve tes Lamas Tools + {/* formulaire de login */} + loginUser({ variables: { ...values } })} {/* appel de la mutation */} + validationSchema={loginValidationSchema} {/* vérification de la validité des données */} + > + {({ + handleChange, + handleSubmit, + values, + errors, + touched, + isValid, + }) => ( + <> + {/* équivalent à une div */} + } + /> + {errors.email && touched.email && ( + {errors.email} {/* équivalent à un span*/} + )} + + + } + /> + {errors.password && touched.password && ( + {errors.password} + )} + +