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
| Besoin | Option 1 | Option 2 | Option 3 |
|---|---|---|---|
| Frontend | Next.js (React) | Nuxt.js (Vue) | Angular |
| Backend | Laravel (PHP) | Node.js (Express) | Django (Python) |
| BDD | MySQL | PostgreSQL | MongoDB |
| Mobile | React Native | Flutter | Swift/Kotlin |
| Cache | Redis | Memcached | - |
| Hébergement | VPS (DigitalOcean) | AWS | Vercel + 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 🎯
- Architecture : Dessinez l'architecture technique pour une application de e-commerce.
- API : Définissez les 10 routes API principales pour votre projet.
- 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)