diff --git a/README.md b/README.md index ca65ea66..bda4e85b 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/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} + )} + +