BeReale - Application Mobile Hybride & Web

Projet d'application mobile hybride réalisé avec Nuxt 3, Tailwind CSS, Capacitor et une API Laravel 11 (avec base de données MySQL).

---

🏗️ Architecture du Projet

Le projet est entièrement containerisé avec Docker Compose et s'articule autour de 4 services principaux :

• frontend (Nuxt 3) : Accessible sur http://localhost:3000
• api (Laravel) : Accessible sur http://localhost:8000
• db (MySQL 8) : Port 3306
• phpmyadmin : Accessible sur http://localhost:8080

---

⚙️ Prérequis

Avant de lancer l'installation, assurez-vous d'avoir installé sur votre machine hôte :

• Docker et Docker Compose
• Node.js (v20+) & npm (uniquement pour la synchronisation native Capacitor)
• Android Studio (pour l'émulation mobile)

---

🚀 Procédure d'Installation et de Lancement

1. Clonage et Configuration des Environnements

Placez-vous à la racine de votre projet complet (appmobile) et configurez les fichiers d'environnement.

Dans frontend/.env :

APP_NAME="BeReale"
APP_ENV=web # Switch to 'mobile' when running Android Studio emulator
WEBAPI_URL=http://localhost:8000
APPAPI_URL=[http://192.168.](http://192.168.)X.X:8000 # Your local machine IP for emulator bridging
GOOGLE_MAPS_API_KEY=AIzaSyAzGju5Q4AUgv4vwg3x5KoryeECgJAtxio

2. Démarrage des Conteneurs Docker

Lancez la construction et le démarrage de l'infrastructure en arrière-plan :

docker compose up -d --build

3. Initialisation du Backend (Laravel)

Exécutez les migrations, le seeding de la base de données, et créez le lien symbolique indispensable pour le stockage public des images (avatars et posts) :

# Run database migrations and seeders
docker compose exec api php artisan migrate --seed

# Create public storage symlink
docker compose exec api php artisan storage:link

# Optional: Force framework storage directories structure and permissions
docker compose exec api mkdir -p storage/framework/cache/data
docker compose exec api mkdir -p storage/framework/views
docker compose exec api mkdir -p storage/framework/sessions
docker compose exec api chmod -R 777 storage bootstrap/cache

4. Compilation pour Mobile (Capacitor / Android)

Pour exporter et synchroniser les modifications du frontend vers le dossier natif Android :

docker compose exec frontend npm run build
docker compose exec frontend npx cap sync

---

📱 Intégration des Plugins Native Capacitor

L'application exploite les fonctionnalités matérielles du smartphone via les wrappers natifs suivants :

1. @capacitor/google-maps : Rendu cartographique vectoriel performant pour situer l'utilisateur et les annonces environnantes.
2. @capacitor/geolocation : Capture automatisée des coordonnées GPS de l'appareil lors de la publication d'une annonce.
3. @capacitor/camera : Accès à l'appareil photo et à la galerie pour la modification de l'avatar utilisateur et l'ajout de visuels sur les publications.
4. @capacitor/share : Interfaçage avec le menu de partage natif du système d'exploitation pour propager les liens profonds des posts.
5. @capacitor/local-notifications : Planification et affichage des push logs système.

---

🧪 Méthodologie de Simulation des Notifications

L'architecture actuelle faisant abstraction d'un serveur WebSocket (temps réel), l'activité communautaire du réseau social est simulée dynamiquement côté client :

• Système de Likes : L'activation du bouton d'interaction sur un post déclenche une notification push native système après un délai de 5 secondes (5000ms), simulant la réaction synchrone d'un autre utilisateur.
• Système de Commentaires : L'envoi d'un commentaire l'ajoute instantanément à la pile d'affichage locale et planifie une notification de réponse système après 6 secondes (6000ms).

---

⚠️ Note pour la Correction / Émulation Mobile

Note à l'attention de mon prof préféré : Lors de l'exécution de l'application sur l'émulateur d'Android Studio, il peut arriver de manière intermittente que le composant de la Carte Google Maps ou la récupération géolocalisée des annonces subissent un Timeout (écran vide ou chargement infini).

Ce comportement est une limitation matérielle connue liée à l'allocation des ressources et au pont réseau virtuel de l'émulateur Android Studio

Si le cas se présente, il suffit simplement de revenir à l'accueil et de rouvrir l'onglet Carte ou Annonces. Le rechargement à chaud résout immédiatement le blocage et affiche instantanément les marqueurs, tracés d'itinéraires et données de distance.

Note sur les scripts de synchronisation (package.json) : Les scripts "node" et "android" contiennent des chemins absolus (/mnt/c/users/Moi/...) propres à mon environnement de développement de pont WSL/Windows. Si vous devez utiliser ces commandes spécifiques de synchronisation, veillez à adapter les chemins avec votre propre nom d'utilisateur dans le fichier package.json.

Made with love by Pierre Fiser, enjoy :)