Skip to content

RESOURCES_IMPLEMENTATION_PLAN.md

Latest commit

 

History

History
557 lines (468 loc) · 11.1 KB

RESOURCES_IMPLEMENTATION_PLAN.md

File metadata and controls

557 lines (468 loc) · 11.1 KB

Plan d'Intégration - Section Ressources

Guides de Blocage dans ScamGuard

Phase: 5E - Ressources & Guides Status: 📋 IMPLEMENTATION PLAN Effort: 3-4 jours (simple & impactant)

🎯 Vue d'ensemble

Ajouter un 5e onglet "Ressources" dans ScamGuard avec des guides complets pour aider les utilisateurs à bloquer les contacts suspects sur leurs téléphones.

📱 INTERFACE PROPOSÉE

Avant (4 onglets)

┌─────────────────────────────────────────┐
│  [Vérifier] [Sécurité] [Académie] [Paramètres]

Après (5 onglets)

┌──────────────────────────────────────────────┐
│ [Vérifier] [Sécurité] [Académie] [Paramètres] [📚 Ressources]

🏗️ STRUCTURE COMPOSANTS

ResourcesTab.jsx (Nouveau)

ResourcesTab
├── ResourcesHeader
│   ├── Titre: "Protégez-vous"
│   ├── Description: "Guides pratiques de blocage"
│   └── Search Bar (optionnel)
│
├── CategoryNavigation
│   ├── "Guides de Blocage"
│   ├── "Blocage par Type"
│   ├── "Conseils de Sécurité"
│   ├── "Vidéos"
│   ├── "FAQ"
│   └── "Ressources Externes"
│
└── ContentArea
    ├── BlockingGuidesSection.jsx
    ├── ByTypeSection.jsx
    ├── SecurityTipsSection.jsx
    ├── VideosSection.jsx
    ├── FAQSection.jsx
    └── ExternalLinksSection.jsx

🔨 DÉTAIL DES COMPOSANTS

1. BlockingGuidesSection.jsx

<BlockingGuidesSection>
  <GuideCard
    title="Bloquer sur Android"
    icon="🤖"
    description="Guide étape par étape"
    expandable={true}
    content={/* AndroidBlockingGuide */}
  />
  <GuideCard
    title="Bloquer sur iPhone"
    icon="🍎"
    description="Via CallKit"
    expandable={true}
    content={/* iOSBlockingGuide */}
  />
</BlockingGuidesSection>

2. ByTypeSection.jsx

<ByTypeSection>
  <TypeCard
    title="Appels téléphoniques"
    icon="☎️"
    guides={[androidGuide, iOSGuide]}
  />
  <TypeCard
    title="SMS et Messages"
    icon="💬"
    guides={[androidSMS, iosSMS]}
  />
  <TypeCard
    title="WhatsApp"
    icon="💚"
    guides={[whatsappGuide]}
  />
  <TypeCard
    title="Autres apps"
    icon="📱"
    guides={[telegram, messenger, email]}
  />
</ByTypeSection>

3. SecurityTipsSection.jsx

<SecurityTipsSection>
  <Checklist title="Avant de Bloquer">
    <CheckItem>Vérifiez qui appelle</CheckItem>
    <CheckItem>Ne cliquez pas sur les liens</CheckItem>
    <CheckItem>Notez le numéro</CheckItem>
  </Checklist>

  <Checklist title="Après avoir Bloqué">
    <CheckItem>Signalez à votre opérateur</CheckItem>
    <CheckItem>Signalez à la police</CheckItem>
    <CheckItem>Vérifiez votre compte</CheckItem>
  </Checklist>
</SecurityTipsSection>

4. VideosSection.jsx

<VideosSection>
  <VideoCard
    title="Bloquer sur Android"
    duration="2 min"
    thumbnail={...}
    videoUrl="https://..."
  />
  <VideoCard
    title="Bloquer sur iPhone"
    duration="2 min"
    thumbnail={...}
    videoUrl="https://..."
  />
  <VideoCard
    title="Signaler un Scam"
    duration="3 min"
    thumbnail={...}
    videoUrl="https://..."
  />
</VideosSection>

5. FAQSection.jsx

<FAQSection>
  <FAQItem
    question="Qu'est-ce qui se passe quand je bloque?"
    answer="L'appel n'apparaît pas, vous ne serez pas notifié..."
    icon="❓"
  />
  <FAQItem
    question="Puis-je débloquer?"
    answer="Oui, à n'importe quel moment..."
    icon="❓"
  />
  {/* Plus de FAQ */}
</FAQSection>

6. ExternalLinksSection.jsx

<ExternalLinksSection>
  <LinkCard
    title="Signaler à la Police"
    icon="🚨"
    links={[
      { country: "Belgique", url: "www.police.be" },
      { country: "France", url: "www.gendarmerie.gouv.fr" },
      { country: "Suisse", url: "..." },
    ]}
  />
  <LinkCard
    title="Récupération de Fraude"
    icon="💳"
    links={[...]}
  />
</ExternalLinksSection>

🎨 DESIGN & UI

Colors (Design Tokens)

--color-resources-primary: #4CAF50    /* Vert protecteur */
--color-alert-danger: #F44336         /* Rouge alerte */
--color-alert-warning: #FF9800        /* Orange avertissement */
--color-success: #4CAF50              /* Vert succès */
--color-info: #2196F3                 /* Bleu info */

Typography

h1: "Protégez-vous" (24px, bold)
h2: "Guides de Blocage" (20px, semi-bold)
h3: "Bloquer sur Android" (16px, medium)
body: "Étape 1: Ouvrir..." (14px, regular)
small: "Conseil: " (12px, italic)

Spacing & Layout

Card padding: 16px
Section margin: 24px
Button padding: 12px 16px
Line height: 1.6 (pour lisibilité)

Composants Réutilisables

- ExpandableCard (Guide expansion)
- ChecklistItem (Avec ✓)
- StepCard (Pas à pas numéroté)
- VideoCard (Avec thumbnail)
- FAQItem (Question/Réponse toggle)
- ExternalLink (Icône + texte)

📋 FICHIERS À CRÉER/MODIFIER

Fichiers Nouveaux

frontend/src/components/Resources/
├── ResourcesTab.jsx
├── BlockingGuidesSection.jsx
├── ByTypeSection.jsx
├── SecurityTipsSection.jsx
├── VideosSection.jsx
├── FAQSection.jsx
├── ExternalLinksSection.jsx
├── GuideCard.jsx
├── StepCard.jsx
├── FAQItem.jsx
└── Resources.css

frontend/src/data/
├── blockingGuides.json
├── securityTips.json
├── faqData.json
└── externalLinks.json

frontend/src/hooks/
└── useResourcesData.js

Fichiers à Modifier

frontend/src/components/BottomNavigation.jsx
  → Ajouter tab "Ressources"

frontend/src/App.jsx
  → Ajouter ResourcesTab dans la structure

frontend/src/styles/design-tokens.css
  → Ajouter couleurs pour ressources

🎬 IMPLÉMENTATION ÉTAPES

Jour 1: Structure & Données

1. Créer la structure des composants
2. Créer les fichiers JSON de contenu
3. Implémenter le routing

Fichiers:
- ResourcesTab.jsx
- blockingGuides.json
- externalLinks.json

Jour 2: Composants Principaux

1. BlockingGuidesSection.jsx
2. ByTypeSection.jsx
3. SecurityTipsSection.jsx

Avec:
- Expansion/Collapse
- Styling
- Responsive design

Jour 3: Sections Secondaires

1. VideosSection.jsx (placeholders)
2. FAQSection.jsx
3. ExternalLinksSection.jsx

Avec:
- Toggle FAQ
- Links externes
- Icons & badges

Jour 4: Polish & Tests

1. Responsive testing
2. Mobile optimization
3. Accessibility (ARIA)
4. Performance
5. Deployment

💾 STRUCTURE DONNÉES

blockingGuides.json

{
  "guides": [
    {
      "id": "android-calls",
      "title": "Bloquer un Appel sur Android",
      "platform": "android",
      "icon": "🤖",
      "type": "appel",
      "steps": [
        {
          "number": 1,
          "instruction": "Ouvrir l'app Téléphone",
          "details": "..."
        },
        {
          "number": 2,
          "instruction": "Appuyer sur l'onglet Historique",
          "details": "..."
        }
        // ...
      ]
    },
    // Plus de guides
  ]
}

securityTips.json

{
  "checklists": [
    {
      "id": "before-block",
      "title": "Avant de Bloquer",
      "icon": "⚠️",
      "items": [
        "Vérifiez qui appelle",
        "Ne cliquez pas sur les liens",
        "Notez le numéro"
      ]
    },
    {
      "id": "after-block",
      "title": "Après avoir Bloqué",
      "icon": "✅",
      "items": [
        "Signalez à votre opérateur",
        "Signalez à la police",
        "Vérifiez votre compte"
      ]
    }
  ]
}

faqData.json

{
  "questions": [
    {
      "id": "faq-1",
      "question": "Qu'est-ce qui se passe quand je bloque?",
      "answer": "L'appel n'apparaît pas...",
      "category": "blocage",
      "helpful": true
    },
    // Plus de FAQ
  ]
}

📱 RESPONSIVE DESIGN

Mobile (< 600px)

- Full-width cards
- Stack vertically
- Large touch targets (44px)
- Single column layout
- Expandable sections (accordion)

Tablet (600-1024px)

- 2-column grid
- Side navigation
- Medium cards
- Mixed layout

Desktop (> 1024px)

- 3-column layout
- Side panel navigation
- Cards in grid
- More whitespace

♿ ACCESSIBILITÉ

- ARIA labels sur tous les boutons
- Semantic HTML (section, article, main)
- Focus outlines visibles
- Color contrast > 4.5:1
- Keyboard navigation complète
- Screen reader friendly
- Alt text pour images/icons

🎯 USER FLOW

Scénario 1: Utilisateur reçoit un appel suspect

1. Utilisateur accepte accidentellement l'appel
2. Réalise que c'est un scam
3. Ouvre ScamGuard
4. Va dans "Ressources"
5. Clique "Guides de Blocage"
6. Sélectionne "Bloquer sur Android"
7. Suit les étapes
8. Bloque le numéro avec succès
9. Retourne et clique "Signaler"
10. Signale à ScamGuard et la police

Scénario 2: Utilisateur apprend d'abord

1. Ouvre ScamGuard
2. Va dans "Ressources"
3. Regarde la vidéo "Bloquer sur iPhone"
4. Lit les conseils de sécurité
5. Consulte la FAQ
6. Prêt à affronter les scams

📊 MÉTRIQUES DE SUCCÈS

✅ Pages vues: > 1000/mois
✅ Temps passé: > 2 min par session
✅ Taux de complétion guide: > 70%
✅ Clics sur liens externes: > 300/mois
✅ Signalements via ressources: > 50/mois
✅ User satisfaction: > 4.5/5 étoiles
✅ Mobile load time: < 2 secondes
✅ Zero accessibility issues (WCAG AA)

🚀 DÉPLOIEMENT

Avant le déploiement

☑️ Tests E2E complets
☑️ Testing responsif (tous les appareils)
☑️ Performance testing
☑️ Accessibility audit
☑️ UX testing avec utilisateurs réels
☑️ Vérifier tous les liens externes
☑️ Traduire en français/anglais/espagnol
☑️ Tester sur lent réseau 3G

Déploiement

1. Déployer sur staging d'abord
2. Tests finaux
3. Déployer en production
4. Monitorer les erreurs
5. Analyser les metrics

📈 PLAN FUTUR

Phase 5E.1 (Maintenance)

  • Ajouter plus de vidéos
  • Ajouter support communauté (commentaires)
  • Analytics et feedback

Phase 5F (Expansion)

  • Contenu localisé par région
  • Guides PDF à télécharger
  • Webinaires en direct
  • Newsletter conseils

⏱️ TIMELINE

Jour 1: Structure & données (4h) Jour 2: Composants (6h) Jour 3: Sections secondaires (5h) Jour 4: Polish & tests (5h)

Total: 20h = ~3 jours (avec developer)

💡 CONCLUSION

Cette section Ressources:

  • ✅ Autonomise les utilisateurs
  • ✅ Réduit les dépendances techniques
  • ✅ Respecte la vie privée
  • ✅ Simple à maintenir
  • ✅ Impactant pour la communauté
  • ✅ Prêt pour production en 3-4 jours

Impact utilisateur: Transformation d'une app éducative en plateforme de guidance pratique.

Status: 🎯 Prêt pour Développement Effort: 3-4 jours Recommandation: Commencer immédiatement après Phase 4C