Compétence B2

Être capable de choisir une architecture adaptée et de structurer son développement autour de celle-ci

• Quoi :

Cette compétence implique ma capacité à choisir efficacement une architecture adaptée pour un projet et à structurer mon développement en fonction, tout en prenant en compte des paramètres essentiels tels que le budget, le temps, et la stratégie.

• Comment :

1. Pusher tableau comparatif : J'ai réalisé un tableau comparatif pour choisir Pusher, en évaluant des critères tels que le coût, la performance et la facilité d'intégration.

2. AR choix technologie : J'ai écrit un article réflexif sur comment choisir la technologie la plus adaptée pour un projet spécifique.

Résumé exécutif de mon 3ème AR

3. Choix de la librairie Graphique pour Koloka : Initialement, j'ai choisi GraphBuilder, mais je suis ensuite passé à Grafana pour mieux répondre aux besoins du projet.

Graphique des préférences pour les biens immobiliers

4. Realm database pour AKTS : J'ai sélectionné Realm comme base de données NoSQL pour sa compatibilité avec iOS, Android et Windows.

import 'package:realm/realm.dart';
part 'xxxxxxx_data.g.dart';
 
@RealmModel()
class _Datalogger {
  @PrimaryKey()
  late ObjectId id;
  late String xxxx;
  late String xxxx;
  late String macAddress;
  late String model;
 
  late List<_Data> dataEntries;
}
 
@RealmModel()
class _Data {
  @PrimaryKey()
  late ObjectId id;
  double? humidity;
  double? temperature;
  double? pressure;
  int? timestamp;
}

5. SF Architecture Logicielle : J'ai suivi une formation sur les microservices pour comprendre leur rôle dans les architectures logicielles modernes.

Extrait de la SF Architecture logicielle

6. LI Docker + Pratique : J'ai participé à un atelier pratique sur Docker pour en comprendre l'application concrète.

Extrait de la pratique Docker

7. Fonction Regex pour les mots de passe : J'ai implémenté une fonction regex pour sécuriser les mots de passe.

Mise en place du regex sur l'application Koloka

export const validatePassword = (password) => {
    const Reg = new RegExp(/^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/);
    return Reg.test(password);
}

Introduction aux architectures orientées service

• Quoi :

Cette compétence implique une compréhension approfondie de l'architecture de systèmes d'information modernes, y compris les concepts de SOA (Service-Oriented Architecture), microservices, et la gestion des API.

• Comment :

1. Lecture individuelle (LI) sur SOA, Microservices et API Management : J'ai étudié le guide de l’architecture d’un SI AGILE pour comprendre les principes de SOA et microservices, et comment ils contribuent à la flexibilité et à l'agilité des systèmes d'information.

Table des matières de la 1ère partie de la LI

Table des matières de la 2ème partie de la LI

2. LI sur SAAS, PAAS, IAAS : Cette lecture m'a permis de saisir les différences et les applications de ces modèles de services cloud, enrichissant ma compréhension de l'infrastructure cloud moderne.

Table des matières de la LI

3. LI sur GraphQL : J'ai exploré GraphQL, une technologie d'API puissante pour améliorer les interactions entre le client et le serveur, optimisant les requêtes de données.

Table des matières de la LI

4. SF sur les architectures logicielles microservices : Cette formation m'a apporté des connaissances pratiques sur l'implémentation et la gestion des microservices, essentielles pour les architectures SI modernes.

Extrait de la SF Architecture logicielle

5. Application pratique avec NEXT.JS et Strapi : J'ai utilisé Next.js pour créer des API dans le dossier pages/api, permettant la récupération et la gestion des données immobilières dans le projet Koloka. Cette approche a permis une intégration efficace avec Strapi, un CMS headless, pour gérer le contenu des annonces immobilières.

// pages/api/immo-posts.js
 
export default async function handler(req, res) {
    const url = process.env.NEXT_STRAPI_PUBLIC_API_URL;
    const key = process.env.STRAPI_API_KEY;
    console.log("url"+url + key);
    try {
        const apiKey = process.env.STRAPI_API_KEY;
        const apiUrl = `${process.env.NEXT_STRAPI_PUBLIC_API_URL}/api/immo-posts?populate=*`;
 
        const response = await fetch(apiUrl, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer ${apiKey}`,
            },
 
        });
 
        console.log("res"+response);
 
        if (!response.ok) {
            throw new Error(`Erreur HTTP! Statut: ${response.status}`);
        }
 
        const data = await response.json();
 
        res.status(200).json(data);
    } catch (error) {
        console.error('Erreur lors de la gestion de la requête API :', error);
        res.status(500).json({ message: 'Erreur serveur' });
    }
}

• Pourquoi :

Comprendre ces architectures modernes est crucial pour développer des SI agiles et réactifs, capables de s'adapter rapidement aux besoins changeants des projets et des organisations.

• Application pratique :

Dans le projet Koloka, l'application de ces concepts d'architecture a permis de créer un système d'information flexible et évolutif. En particulier, l'utilisation de Next.js et Strapi a facilité la gestion et la publication dynamique des annonces immobilières, démontrant l'efficacité des architectures modernes.

• Réflexion personnelle :

L'exploration de ces différentes architectures et technologies a été une expérience enrichissante. Elle m'a permis de comprendre l'importance d'une architecture SI bien conçue, qui non seulement répond aux besoins actuels mais est également préparée pour l'avenir. Cette compétence s'est avérée essentielle pour ma capacité à contribuer efficacement à des projets technologiques complexes, me permettant d'adopter une approche plus stratégique et réfléchie dans la conception des systèmes d'information.

Connaitre et maîtriser les principaux design patterns

• Quoi :

Cette compétence englobe ma capacité à comprendre et à appliquer efficacement les principaux modèles de conception (design patterns) dans le développement logiciel.

• Comment :

1. Lecture Individuelle sur les Design Patterns : J'ai étudié en détail 23 modèles de conception, ce qui m'a permis de comprendre leur utilité et leurs applications dans divers contextes de développement.

Table des matières de la LI sur les Design Patterns

2. Singleton pour la DB REALM dans AKTS : Dans le projet AKTS, j'ai mis en œuvre le pattern Singleton pour initialiser une seule instance de la base de données REALM. Cela a garanti une gestion efficace et cohérente des données dans l'application.

class Singleton {
  static final Singleton _singleton = Singleton._internal();
 
  factory Singleton() {
    final config = Configuration.local(
        [Utilisateur.schema, Datalogger.schema]);
    final realm = Realm(config);
    return _singleton;
  }
 
  Singleton._internal();
}
 
Future<void> main() async {
  Singleton singleton = Singleton();
 
}

3. Component Design Pattern avec React et Next.js : J'ai appliqué le modèle de conception de composants en utilisant React et Next.js, ce qui m'a aidé à structurer l'application de manière modulaire et réutilisable.

   • exemple: Dans le cadre de ce projet, j'ai créé le composant Search, qui est un excellent exemple de l'application du Component Design Pattern. Ce composant gère la fonctionnalité de recherche, permettant aux utilisateurs de filtrer les propriétés selon différents critères tels que le prix, le nombre de chambres et le type de logement.

const Search = () => {
    const optionsPrices = [500, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2200, 2400, 2600, 2800, 3000, 3500, 4000, 4500, 5000, 6000, 7000, 8000, 9000, 10000];
    const optionsRooms = [1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10];
    const optionsTypes = ["Studio", "Flat", "House"]
    return (
        <div className="mx-auto max-w-3xl lg:max-w-7xl mb-16 grid grid-cols-5 gap-8">
            <SearchInput/>
            <Dropdown name="Prices" options={optionsPrices}/>
            <Dropdown name="Rooms" options={optionsRooms}/>
            <Dropdown name="Types" options={optionsTypes}/>
        </div>
    )
};
 
export default Search;

return (
        <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:max-w-7xl lg:px-8">
            <Title/>
            <Search/>
            {/* Mobile filter section */}
            <MobileFilter mobileFiltersOpen={mobileFiltersOpen} setMobileFiltersOpen={setMobileFiltersOpen}
                          filters={filters}/>
            {/* Filter */}
            <Filter filters={filters} setMobileFiltersOpen={setMobileFiltersOpen} sortOptions={sortOptions}/>
            <PropertyGrid/>
        </div>
    )
};

4. SF sur les Architectures Logicielles : Cette formation m'a fourni des connaissances approfondies sur différents modèles d'architecture logicielle, incluant leur lien avec les design patterns.

Extrait SF architecture logicielle

5. Jotaï : J'ai utilisé Jotai, une bibliothèque de gestion d'état moderne pour React, pour gérer l'état des propriétés de manière efficace et modulaire. Jotai permet une gestion d'état plus simple et plus intuitive, ce qui facilite la construction d'applications React scalables et maintenables.

import {atom} from "jotai";
 
const propertyAtom = atom({});
 
export {propertyAtom};

• exemple :

const Property = () => {
    const {data: session} = useSession();
    const property = useAtomValue(propertyAtom);
 
    return (
        <div className="mx-auto max-w-7xl sm:px-6 sm:pt-16 lg:px-8">
            <div className="mx-auto max-w-2xl lg:max-w-none">
                {/* Property */}
                <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
                    {/* Image gallery */}
                    <Tab.Group as="div" className="flex flex-col-reverse">
                        {/* Image selector */}
                        <div className="mx-auto mt-6 hidden w-full max-w-2xl sm:block lg:max-w-none">
                            <Tab.List className="grid grid-cols-4 gap-6">
                                {propertyImages.map((image, index) => (
                                    //suite du code
<Disclosure.Panel as="div" className="prose prose-sm pb-6">
                                                <ul role="list">
                                                    <li>{property.attributes.type}</li>
                                                    <li>{property.attributes.address}</li>
                                                    {
                                                        property.attributes.floor > 1 ? (
                                                            <li>{getOrdinal(property.attributes.floor)} floors</li>
                                                        ) : (
                                                            <li>{getOrdinal(property.attributes.floor)} floor</li>
                                                        )
                                                    }
                                                    <li>{property.attributes.area + ' m²'}</li>
                                                    {
                                                        property.attributes.nbRoom > 1 ? (
                                                            <li>{property.attributes.nbRoom} rooms</li>
                                                        ) : (
                                                            <li>{property.attributes.nbRoom} room</li>
                                                        )
                                                    }
                                                    <li>available on {property.attributes.dateAvailable}</li>
 
                                                </ul>
                                            </Disclosure.Panel>

• Pourquoi :

La maîtrise des design patterns est essentielle pour développer des logiciels efficaces, évolutifs et faciles à maintenir. Ces modèles offrent des solutions éprouvées à des problèmes de conception courants, permettant une architecture logicielle plus robuste et plus flexible.

• Application pratique :

En intégrant ces modèles de conception dans mes projets, j'ai pu améliorer la structure et la qualité du code. L'utilisation de Jotai pour la gestion d'état dans React, par exemple, a simplifié la complexité de l'application et amélioré la maintenabilité du code.

• Réflexion personnelle :

Explorer et appliquer différents design patterns m'a permis de mieux comprendre l'architecture logicielle et d'adopter des approches plus stratégiques dans mes développements. La découverte de Jotai a été particulièrement enrichissante, me montrant l'importance d'une gestion d'état efficace dans les applications React modernes.

Maîtriser les structures de données avancées

• Quoi :

Cette compétence implique la compréhension et la maîtrise des structures de données avancées, essentielles pour le traitement et la gestion efficaces des données dans les applications logicielles.

• Comment :

1. LI sur GraphQL : J'ai étudié GraphQL pour comprendre comment structurer et interroger les données de manière flexible et efficace, en particulier pour les applications web modernes.

2. LI sur MQTT (Message Queuing Telemetry Transport) : Cette lecture m'a aidé à comprendre le rôle des structures de données dans la priorisation et la gestion des messages dans les systèmes de communication en temps réel.

3. Fonction dans Koloka : J'ai développé une fonction pour sélectionner la meilleure qualité d'image dans une collection, en traitant et en restructurant des données complexes. Cette fonction illustre mon utilisation pratique des structures de données pour optimiser le traitement des données dans une application web.

export const getBestQualityImageProperties = (properties) => {
    const newProperties = [...properties];
    const processFormats = (formats) => {
        let isFirstFormat = true;
        let highValue;
 
        for (const [key, value] of Object.entries(formats)) {
            if (isFirstFormat) {
                highValue = {...value};
                delete formats[key];
                isFirstFormat = false;
            } else {
                delete formats[key];
            }
        }
 
        formats.high = highValue;
    };
    for (const property of newProperties) {
        if (!property.hasOwnProperty('attributes')) {
            processFormats(property.cover.formats);
            if (property.hasOwnProperty('carousel')) {
                for (const image of property.carousel.data) {
                    processFormats(image.formats);
                }
            }
        } else {
            processFormats(property.attributes.cover.data.attributes.formats);
            if (property.attributes.hasOwnProperty('carousel')) {
                for (const image of property.attributes.carousel.data) {
                    processFormats(image.attributes.formats);
                }
            }
        }
    }
    return newProperties;
};

Liste des appartements

Détails d'un appartement

4. LI sur NoSQL : J'ai exploré les bases de données NoSQL pour comprendre leurs structures de données non relationnelles, ce qui est crucial pour les applications nécessitant une grande flexibilité et une évolutivité des données.

• Pourquoi :

Maîtriser les structures de données avancées est essentiel pour développer des applications efficaces et performantes, capables de gérer de grandes quantités de données complexes de manière optimale.

• Application pratique :

Dans le projet Koloka, l'utilisation de structures de données avancées m'a permis d'optimiser le traitement des images, de gérer les requêtes API REST de manière efficace, et de travailler avec des données flexibles grâce à NoSQL pour le projet AKTS, soulignant l'importance de ces compétences dans la conception et le développement d'applications modernes.

• Réflexion personnelle :

Explorer et appliquer des structures de données avancées dans mes projets m'a offert une compréhension approfondie de l'importance de la gestion efficace des données. Que ce soit en optimisant les requêtes API REST ou en traitant des collections d'images, chaque application pratique m'a permis de renforcer mes compétences en développement logiciel et de comprendre comment des structures de données bien conçues peuvent significativement améliorer la performance et la flexibilité d'une application.

Maîtriser les concepts des librairies et composants (principes SOLID, création de logiciels selon architecture modulaire, partage de briques logicielles)

• Quoi:

Cette compétence couvre la compréhension et l'application des principes SOLID, la création de logiciels selon une architecture modulaire, et le partage de briques logicielles.

• Comment :

1. LI sur SOLID : J'ai étudié les principes SOLID pour approfondir ma compréhension des meilleures pratiques en programmation orientée objet, essentielles pour créer des logiciels robustes et maintenables.

Extrait de la LI sur SOLID

2. Next.js - Composant Design React : J'ai conçu et développé des composants modulaires en React pour le projet Koloka, comme les carrés pour les messages, et la page chat, illustrant l'application de ces principes en pratique.

Extrait du code de la page chat

3. Atomic Design avec Jotai et Next.js : J'ai utilisé l'approche Atomic Design en combinaison avec Jotai pour structurer efficacement les composants de l'interface utilisateur, optimisant la réutilisabilité et la maintenabilité.

import {atom} from "jotai";
 
const propertiesAtom = atom(0);
 
export {propertiesAtom};

4. Intégration de la Librairie Shadcn : J'ai intégré cette librairie pour améliorer certaines fonctionnalités de l'application, démontrant ma capacité à incorporer des outils externes pour augmenter l'efficacité du développement.

Composant sur shadcn (opens in a new tab)

Utilisation du composant sur ma page chat

5. Utilisation de v0.dev pour les Carrés de Messages : J'ai employé cette librairie spécifique pour gérer les carrés de messages dans le projet, ce qui a permis une gestion plus efficace des composants de l'interface utilisateur.

Exemple d'un prompt sur V0.dev

6. Strapi comme Headless CMS : J'ai utilisé Strapi comme un CMS headless, une brique logicielle indépendante du front-end, pour gérer le contenu de manière flexible et modulaire.

7. Utilisation de npm pour les Librairies : J'ai régulièrement utilisé npm pour gérer les librairies et dépendances dans mes projets, ce qui a facilité la maintenance et la mise à jour des composants.

npx shadcn-ui@latest add avatar

8. Architecture Modulaire avec Flutter : Dans le projet AKTS, j'ai adopté l'architecture modulaire de Flutter pour structurer l'application. Cette approche a permis de séparer clairement les fonctionnalités en différents modules comme screen, model, provider et repository, chacun ayant des responsabilités définies. Cela a facilité la gestion du code et a amélioré la testabilité de l'application.

Architecture projet AKTS avec flutter

• Pourquoi :

Maîtriser ces concepts est fondamental pour développer des applications modulaires, évolutives et maintenables, en tirant parti des meilleures pratiques de développement logiciel.

• Application pratique :

Dans le projet Koloka, l'utilisation de ces principes et outils a permis de construire une architecture logicielle solide, où chaque composant pouvait être développé, testé et maintenu indépendamment, contribuant ainsi à l'efficacité et à la qualité globale de l'application.

• Réflexion personnelle :

En appliquant ces concepts dans mes projets, j'ai acquis une compréhension approfondie de l'importance de la modularité et de la réutilisabilité en développement logiciel. L'expérience acquise en intégrant des librairies, en utilisant des principes comme SOLID et en développant des composants modulaires a renforcé ma capacité à concevoir des logiciels de manière plus structurée et efficace, tout en améliorant la collaboration au sein des équipes de développement.

Mettre en œuvre la sécurité dans la construction de services (sécurité applicative)

• Quoi :

Cette compétence implique l'intégration de pratiques de sécurité applicative dans le développement de services, pour assurer la protection contre les vulnérabilités et les attaques.

• Comment :

1. SF sécurité applicative : J'ai suivi des formations pour acquérir des connaissances fondamentales sur la sécurité applicative et comprendre les meilleures pratiques de sécurisation des applications.

Extrait du rapport de la SF

2. Blocage à Trois Couches pour les Messages : Dans le projet Koloka, j'ai implémenté un mécanisme de blocage à trois niveaux (frontend, API, base de données) pour empêcher l'envoi de messages invalides, tels que ceux sans caractères ou avec des caractères vides.

   • Frontend : J'ai mis en place une validation dans le composant de message pour empêcher l'envoi de chaînes vides ou non valides à l'API. Ceci est réalisé par des vérifications avant l'envoi du formulaire.

 const Message = () => {
    const [currentChat, setCurrentChat] = useAtom(currentChatAtom);
    const formRef = useRef(null);
    const [isSending, setIsSending] = useState(false);
 
    const handleSendMessage = async (event, form) => {
        event.preventDefault();
        const message = form.message.value;
        if (message === '') return;
        setIsSending(true);
        const currentMessage = await sendMessage(form);
        setIsSending(false)
 
        if (currentMessage) {
            const newMessage = {content: currentMessage.content, me: currentMessage.me};
            setCurrentChat({...currentChat, messages: [...currentChat.messages, newMessage]});
        }
    }
 
    const handleKeyPress = async (event) => {
        if (event.key === 'Enter' && !event.shiftKey && isSending === false) {
            await handleSendMessage(event, formRef.current);
        }
    }
 
    const handleSubmit = async (event) => {
        await handleSendMessage(event, formRef.current);
    }
 
    return (
        <form ref={formRef} className="grid w-full gap-2" onSubmit={handleSubmit}>
            <Textarea disabled={isSending} name='message' placeholder="Type your message here." required={true}
                      onKeyPress={handleKeyPress}/>
            <input type="hidden" name="channel" value={currentChat.idChannel}/>
            <Button type='submit' disabled={isSending}>Send message</Button>
        </form>
    )
}
 
export default Message;

• API controller : Au niveau de l'API, j'ai ajouté une couche de validation supplémentaire pour vérifier les données reçues avant de les traiter. Cela empêche les requêtes non valides ou malveillantes d'atteindre la base de données.

export default async function handler(req, res) {
const session = await getServerSession(req, res, authOptions);
if (session) {
    const {payload, channel} = req.body;
    if (!payload || !channel) {
        res.status(400);
        res.json({error: "Missing payload or channel"});
        return;
    }
    const newPayload = {
        payload,
        from: {
            id: session.token.id,
        },
    };
    const retrieveChatId = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_API_URL}/api/chat/retrieveChatId`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${process.env.STRAPI_API_KEY}`,
        },
        body: JSON.stringify({
            data: {
                channel,
                idUser: session.token.id,
            }
        }),
    });
    if (retrieveChatId.status !== 200) {
        res.status(404);
        res.json({error: "Chat not found"});
    }
    const chat = await retrieveChatId.json();
    const saveMessage = await fetch(`${process.env.NEXT_PUBLIC_STRAPI_API_URL}/api/messages`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${process.env.STRAPI_API_KEY}`,
        },
        body: JSON.stringify({
            data:
                {
                    chat: chat.idChat,
                    idUser: session.token.id,
                    content: newPayload.payload,
                }
        }),
    });
    await pusher.trigger(channel, 'message', newPayload);
    const data = await saveMessage.json();
    data.me = true;
    res.status(200).json(data);
} else {
    res.status(401);
}
}

• Base de données : Des contraintes de validation ont été configurées directement sur les modèles de la base de données pour assurer que seules les données conformes aux critères définis soient enregistrées, servant de dernière ligne de défense.

Modification de la DB

3. LI sur les Vulnérabilités Web : J'ai étudié les vulnérabilités web courantes pour mieux comprendre comment protéger les applications contre ces failles.
4. Tests de Sécurité sur l'API de Strapi : J'ai effectué des tests de sécurité pour identifier les failles potentielles dans l'API de Strapi, renforçant ainsi la sécurité de l'application.

Identification faille sur notre API

5. Tests de Failles XSS sur Koloka : J'ai activement testé et mitigé les failles XSS (Cross-Site Scripting) dans le projet Koloka pour empêcher les attaques par injection de scripts.

Exemples de failles XSS que j'ai testées

• Pourquoi :

  La mise en œuvre de la sécurité dans la construction de services est cruciale pour protéger les applications contre les menaces et vulnérabilités, assurant ainsi la sûreté des données et la confiance des utilisateurs. C'est un élément fondamental pour répondre aux exigences de conformité et pour préserver l'intégrité de l'infrastructure numérique.

• Application pratique :

  En appliquant ces connaissances en sécurité applicative dans le projet Koloka, j'ai renforcé la robustesse et la fiabilité de l'application. L'implémentation de blocage à trois couches pour les messages est un exemple concret de la manière dont les contrôles de sécurité peuvent être intégrés à chaque niveau de l'architecture d'une application pour offrir une défense en profondeur contre les vulnérabilités.

• Réflexion personnelle :

En tant que débutant en sécurité applicative, mon expérience à travers les formations suivies et les tests pratiques a été une introduction essentielle à l'importance de la sécurité dans le développement de services. Cette expérience m'a ouvert les yeux sur le fait que la sécurité ne doit pas être un ajout tardif, mais plutôt une considération intégrée dès le début du processus de conception. Bien que je sois encore en phase d'apprentissage, cette approche proactive a renforcé ma conscience de la nécessité de construire des services sécurisés et a aiguisé mon intérêt pour approfondir mes connaissances et compétences en sécurité dans le développement logiciel.