# Instructions de déploiement de Geoguess

# 1) Déployer

Vous pouvez déployer le site via les outils suivants:

"Deploy to netlify" or Deploy with Vercel

Il vous sera demandé de saisir des variables d'environnement, vous retrouverez ci-dessous quand les obtenir.

# 2) Variables d'environnements

# 2.1) Google Map

Variable d'environnement : VUE_APP_API_KEY

  1. Google Cloud, votre 1er projet ?
    1. Aller sur https://cloud.google.com/maps-platform/
    2. Cliquer sur Premiers pas
    3. Une page s'ouvre et vous demande d'activer la facturation "Google"

    Note : Google offre 200 $ de crédit mensuel pour l'usage des apis de Google Map (Source). Pour un usage entre amis, vous ne dépasserez jamais ce montant.

    1. Créer votre compte de facturation

1.(bis) Google Cloud, je connais 💪 alors créer un projet

  1. Dans le "MarketPlace", activer l'api "Maps JavaScript API"
  2. Dans l'onglet "Identifiants", générer une clé d'api. Cette clé sera votre VUE_APP_API_KEY

Vous pouvez définir un quota et une restriction d'url

Comme GeoGuess est une web app front, des visteurs mal attentionnés peuvent voler votre "Google API key" et l'utiliser. Vous DEVEZ définir des quotas et des restrictions. Si vous le pouvez ajouter des protections sur votre site (.htaccess)

# Quotas & restrictions

# Clés API (dans "Identifiants")

"Identifiants"

  1. Sous "Restrictions relatives aux applications", choisir "Référents HTTP (sites Web)"

  2. Ajouter des restrictions pour limiter à l'usage de votre site WEB (1): N'oubliez pas d'ajouter une "*" après "/" pour inclure toutes les urls de votre site.

  3. Restreindre l'API activé : "Maps JavaScript API" (2) "Identifiants"

# Quotas
  1. Rechercher "quotas google maps" dans la barre de recherche
  2. Selectionner "Maps JavaScript API" a côté du titre "Quotas"
  3. Ouvrir "Map loads" via l'icône ">"
  4. Définir les limites. Pour la démo, "Map loads par jour" est défini à 500

"Limits"

Plus d'infos : https://developers.google.com/maps/gmp-get-started

# 2.2) Firebase (multijoueur)

Variables d'environnements : VUE_APP_FIREBASE_API_KEY, VUE_APP_FIREBASE_PROJECT_ID, VUE_APP_FIREBASE_MESSAGING_SENDER_ID, VUE_APP_FIREBASE_APP_ID et VUE_APP_FIREBASE_MEASUREMENT_ID, VUE_APP_FIREBASE_AUTH_DOMAIN, VUE_APP_FIREBASE_DATABASE_URL, VUE_APP_STORAGE_BUCKET

  1. Créer un projet Firebase (ou utiliser le projet créé pour Google Map Api) via https://console.firebase.google.com/

Vous pouvez activer Google Analytics pour obtenir des statistiques

  1. Aller sous la rubrique "Développer" dans "Realtime Database", Créer une base de données
  2. Aller dans l'onglet Règles,
    1. Remplacer les 2 champs (write et read) false par true dans le champ "Règle"
    2. Publier les modifications
  3. Revenez sur la page d'accueil en cliquant dans le menu à gauche sur "Vue d'ensemble du projet"
  4. Sous le titre sur projet, cliquer sur l'icône Web </> pour ajouter une application "Ajout App"
  5. Enregistrer l'application puis récupérer les variables d'environnement indiqué sous firebaseConfig

Voici les associations :

Paramétre Variables d'environnements
apiKey VUE_APP_FIREBASE_API_KEY
authDomain VUE_APP_FIREBASE_AUTH_DOMAIN
databaseURL VUE_APP_FIREBASE_DATABASE_URL
projectId VUE_APP_FIREBASE_PROJECT_ID
storageBucket VUE_APP_STORAGE_BUCKET
messagingSenderId VUE_APP_FIREBASE_MESSAGING_SENDER_ID
appId VUE_APP_FIREBASE_APP_ID
measurementId VUE_APP_FIREBASE_MEASUREMENT_ID

Note: measurementId est accessible si vous avez activé Google Analytics