SnapMap

Application mobile de selfies géolocalisés — Concours National Ynov
Stack : Ionic + Capacitor + Angular standalone + Mapbox + Stripe

---

Prérequis

• Node.js LTS + npm
• Angular CLI : npm install -g @angular/cli
• Ionic CLI : npm install -g @ionic/cli
• Android Studio (Android) et/ou Xcode (iOS, macOS uniquement)

---

Installation

git clone <repo>
cd SnapMap
npm install

---

Configuration

Avant de lancer le projet, renseigne les clés dans src/environments/environment.ts :

export const environment = {
  production: false,
  api: 'http://localhost:4000/',       // URL du backend Stripe
  mapBox: {
    accessToken: 'pk_...',             // Token public Mapbox
  },
};

Ne jamais committer de clé secrète Stripe (sk_...). Elle va uniquement dans stripe-backend/server.js.

---

Commandes

Commande	Description
npm run start	Dev dans le navigateur (hot reload)
npm run build	Compile vers www/
npm run sync	Build + sync vers les plateformes natives
npm run add:android	Ajoute la plateforme Android (une seule fois)
npm run add:ios	Ajoute la plateforme iOS (une seule fois)
npm run android	Build + sync + ouvre Android Studio
npm run ios	Build + sync + ouvre Xcode

---

Lancer sur émulateur / device

# Première fois seulement
npm run add:android
npm run add:ios

# Ensuite
npm run android   # ou npm run ios

Dans Android Studio : sélectionner un émulateur ou téléphone branché en USB puis cliquer Run.
Pour déboguer la WebView : ouvrir chrome://inspect#devices dans Chrome.

---

Backend Stripe

Le paiement nécessite un mini serveur Express local :

cd stripe-backend
npm install
npx nodemon server.js

Le serveur tourne sur http://localhost:4000.
Sur device physique, remplacer localhost par l'IP locale de la machine (ex. 192.168.1.42).

Carte de test Stripe : 4242 4242 4242 4242 — date future, CVC 123.

---

Structure du projet

src/app/
├── core/
│   ├── models/       # interfaces (UserPhoto...)
│   ├── services/     # PhotoService, MapService, PaymentService, GeolocationService
│   ├── guards/
│   └── interceptors/
├── features/
│   ├── camera/       # galerie, prise de photo
│   ├── map/          # carte Mapbox
│   └── shop/         # boutique / paiement
└── shared/
    ├── components/
    ├── pipes/
    └── directives/

---

Permissions natives

Android (android/app/src/main/AndroidManifest.xml) :

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

iOS (ios/App/App/Info.plist) :

<key>NSCameraUsageDescription</key>
<string>Pour prendre des photos.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Pour afficher vos photos sur la carte.</string>