0 XP
?
Débutant45 min30 XP

Objectifs de cette leçon

  • Concevoir l'architecture d'un projet avant de coder
  • Choisir les bonnes technologies
  • Planifier la structure de fichiers et modules

Concevoir l'architecture technique 🏗️

Qu'est-ce qu'une architecture technique ?

L'architecture technique définit comment votre application sera construite : quels composants, comment ils communiquent, et où les données seront stockées.


Les couches d'une application

Application Web classique

┌─────────────────────────────────┐
│         FRONTEND                │
│   (Navigateur de l'utilisateur) │
│   React / Next.js / Vue         │
├─────────────────────────────────┤
│          API REST               │
│   (Communication client-serveur)│
│   GET /api/users                │
├─────────────────────────────────┤
│          BACKEND                │
│   (Logique métier)              │
│   Laravel / Node.js / Django    │
├─────────────────────────────────┤
│       BASE DE DONNÉES           │
│   (Stockage des données)        │
│   MySQL / PostgreSQL / MongoDB  │
└─────────────────────────────────┘

Application Mobile

┌─────────────────────────────────┐
│         APPLICATION             │
│     (React Native / Expo)       │
│     Sur le téléphone            │
├─────────────────────────────────┤
│          API REST               │
│     (HTTP / JSON)               │
├─────────────────────────────────┤
│          BACKEND                │
│     (Laravel / Node.js)         │
├─────────────────────────────────┤
│       BASE DE DONNÉES           │
│     (MySQL / PostgreSQL)        │
└─────────────────────────────────┘

Architecture Fullstack

    Mobile (React Native)     Web (Next.js)
           \                    /
            \                  /
             ↘                ↙
              API REST (Laravel)
                    │
           ┌───────┴───────┐
           │               │
      MySQL            Redis
      (BDD)           (Cache)

Choisir sa stack technique

BesoinOption 1Option 2Option 3
FrontendNext.js (React)Nuxt.js (Vue)Angular
BackendLaravel (PHP)Node.js (Express)Django (Python)
BDDMySQLPostgreSQLMongoDB
MobileReact NativeFlutterSwift/Kotlin
CacheRedisMemcached-
HébergementVPS (DigitalOcean)AWSVercel + Neon

Conception de l'API

Définir les ressources

/users          → GET (liste), POST (créer)
/users/:id      → GET (détail), PUT (modifier), DELETE (supprimer)
/stages         → GET (liste), POST (créer)
/stages/:id     → GET (détail), PUT, DELETE
/candidatures   → GET, POST
/auth/login     → POST
/auth/register  → POST

Diagramme des entités

┌──────────┐     ┌──────────┐     ┌──────────────┐
│  User    │ 1→* │  Stage   │ 1→* │ Candidature  │
│----------│     │----------│     │--------------│
│ id       │     │ id       │     │ id           │
│ name     │     │ title    │     │ user_id      │
│ email    │     │ company  │     │ stage_id     │
│ role     │     │ location │     │ motivation   │
└──────────┘     └──────────┘     │ status       │
                                  └──────────────┘

Utiliser l'IA pour l'architecture

Bon prompt :

Propose une architecture technique pour une application de gestion
de stages avec les contraintes suivantes :
- Frontend : Next.js + Tailwind CSS
- Backend : Laravel + MySQL
- Auth : JWT avec Sanctum
- Responsive : mobile + desktop
- Déploiement : Docker + VPS

Donne-moi :
1. Le diagramme des entités
2. Les routes API
3. La structure des dossiers
4. Les choix techniques justifiés

Exercices 🎯

  1. Architecture : Dessinez l'architecture technique pour une application de e-commerce.
  2. API : Définissez les 10 routes API principales pour votre projet.
  3. Entités : Créez le diagramme des entités avec les relations.

Prochaine leçon : Utiliser OpenCode efficacement.

Concepteur d'architecture

Architecture : Architecture Fullstack

Mobile (React Native)
Web (Next.js)
API (Laravel)
MySQL
Redis (Cache)