Plugins Capacitor Utiles pour Becik¶

Liste des plugins Capacitor qui pourraient être utiles pour améliorer l'expérience mobile de Becik.

🔌 Plugins Officiels Déjà Installés¶

@capacitor/core¶

Le cœur de Capacitor - déjà configuré.

@capacitor/android¶

Support de la plateforme Android - déjà installé.

@capacitor/app¶

Gestion de l'état de l'app, deep links, et événements système.

import { App } from "@capacitor/app";

App.addListener("appStateChange", ({ isActive }) => {
  console.log("App state changed:", isActive);
});

@capacitor/splash-screen¶

Contrôle du splash screen au démarrage.

import { SplashScreen } from "@capacitor/splash-screen";

await SplashScreen.hide();

@capacitor/status-bar¶

Personnalisation de la barre d'état.

import { StatusBar, Style } from "@capacitor/status-bar";

await StatusBar.setStyle({ style: Style.Dark });
await StatusBar.setBackgroundColor({ color: "#000000" });

📱 Plugins Officiels Recommandés¶

@capacitor/camera¶

Accès à l'appareil photo et à la galerie.

pnpm add @capacitor/camera

Cas d'usage Becik:

Photo du vélo pour le profil
Photo des pneus/composants
Upload de photos de maintenance

@capacitor/geolocation¶

Géolocalisation GPS.

pnpm add @capacitor/geolocation

Cas d'usage Becik:

Tracking des sorties vélo
Carte des itinéraires
Spots de vélo à proximité

@capacitor/push-notifications¶

Notifications push natives.

pnpm add @capacitor/push-notifications

Cas d'usage Becik:

Rappels de maintenance
Alertes Strava
Notifications communautaires

@capacitor/share¶

Partage natif.

pnpm add @capacitor/share

Cas d'usage Becik:

Partager des stats de sortie
Partager le profil du vélo
Inviter des amis

@capacitor/filesystem¶

Accès au système de fichiers.

pnpm add @capacitor/filesystem

Cas d'usage Becik:

Export de données
Cache local
Sauvegarde de fichiers

@capacitor/haptics¶

Retour haptique (vibrations).

pnpm add @capacitor/haptics

Cas d'usage Becik:

Feedback lors d'actions importantes
Confirmation de maintenance effectuée
Alertes

@capacitor/local-notifications¶

Notifications locales (sans serveur).

pnpm add @capacitor/local-notifications

Cas d'usage Becik:

Rappels de maintenance programmés
Alertes de pression de pneus
Notifications hors ligne

@capacitor/preferences¶

Stockage clé-valeur simple.

pnpm add @capacitor/preferences

Cas d'usage Becik:

Préférences utilisateur
Cache de données
État de l'app

@capacitor/network¶

Information sur la connexion réseau.

pnpm add @capacitor/network

Cas d'usage Becik:

Mode hors ligne
Sync différée
Optimisation des requêtes

🌟 Plugins Communautaires Intéressants¶

@capacitor-community/barcode-scanner¶

Scanner de codes-barres et QR codes.

pnpm add @capacitor-community/barcode-scanner

Cas d'usage Becik:

Scanner des codes produits
Ajouter des composants rapidement
Partage de profil via QR

@capacitor-community/background-geolocation¶

Géolocalisation en arrière-plan.

pnpm add @capacitor-community/background-geolocation

Cas d'usage Becik:

Tracking de sortie en arrière-plan
GPS continu pendant le cyclisme

@capacitor-community/sqlite¶

Base de données SQLite locale.

pnpm add @capacitor-community/sqlite

Cas d'usage Becik:

Cache de données complexe
Mode hors ligne avancé
Historique local

@capacitor-community/calendar¶

Intégration avec le calendrier.

pnpm add @capacitor-community/calendar

Cas d'usage Becik:

Ajouter des rappels de maintenance au calendrier
Planifier des sorties

📊 Plugins Spécifiques Strava/Sport¶

@capacitor-community/health¶

Accès aux données de santé (Google Fit, Apple Health).

pnpm add @capacitor-community/health

Cas d'usage Becik:

Synchroniser avec Google Fit
Récupérer données cardio
Stats de santé globales

🔐 Plugins de Sécurité¶

@capacitor-community/biometric¶

Authentification biométrique.

pnpm add @capacitor-community/biometric

Cas d'usage Becik:

Login par empreinte digitale
Sécuriser les données sensibles
Quick unlock

@capacitor-community/secure-storage¶

Stockage sécurisé chiffré.

pnpm add @capacitor-community/secure-storage

Cas d'usage Becik:

Stocker tokens d'API
Données utilisateur sensibles
Clés de chiffrement

🎨 Installation et Usage¶

Installation typique¶

# Installer le plugin
pnpm add @capacitor/nom-du-plugin

# Synchroniser avec Android
pnpm cap sync android

Permissions Android¶

Ajouter les permissions nécessaires dans android/app/src/main/AndroidManifest.xml:

<!-- Exemple pour Camera -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />

<!-- Exemple pour Geolocation -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<!-- Exemple pour Notifications -->
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

📝 Recommandations pour Becik¶

Phase 1 - MVP (Minimum Viable Product)¶

✅ @capacitor/app (déjà installé)
✅ @capacitor/splash-screen (déjà installé)
✅ @capacitor/status-bar (déjà installé)
@capacitor/camera (pour photos de vélo)
@capacitor/share (partage de stats)

Phase 2 - Fonctionnalités Avancées¶

@capacitor/geolocation (tracking GPS)
@capacitor/push-notifications (notifications)
@capacitor/haptics (retour tactile)
@capacitor/preferences (settings locaux)

Phase 3 - Intégrations Premium¶

@capacitor-community/background-geolocation
@capacitor-community/health (Google Fit)
@capacitor-community/biometric (sécurité)

🔗 Ressources¶

💡 Conseils¶

Testez toujours sur un appareil réel - L'émulateur ne supporte pas tous les plugins
Gérer les permissions - Demandez les permissions au bon moment, pas au démarrage
Fallback web - Vérifiez toujours Capacitor.isNativePlatform() avant d'utiliser un plugin
Mode hors ligne - Pensez toujours au cas où l'app n'a pas de réseau
Performance - Les plugins natifs sont plus rapides que les équivalents web

Exemple de code avec fallback web¶

import { Capacitor } from "@capacitor/core";
import { Camera } from "@capacitor/camera";

async function takePicture() {
  if (Capacitor.isNativePlatform()) {
    // Version native
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Uri,
    });
    return image.webPath;
  } else {
    // Fallback web avec input file
    return await webFilePicker();
  }
}