Le projet continue d’évoluer. L’idée est maintenant de développer une application Android contenant la carte. Celle-ci ne se limitera d’ailleurs plus à la capitale nationale. Cet automne, dans le cadre des Ateliers de maîtrise en informatique appliquée à l’histoire, David et Thomas vont rédiger une quarantaine de marqueurs couvrant l’Estrie, le Centre du Québec et la Montérégie. Comme il se pourrait que l’appli soit un grand succès, on doit s’assurer qu’elle est logée sur un serveur capable de répondre à la demande. En même temps, si l’appli est peu utilisée, on ne souhaiterait pas payer pour un forfait d’hébergement trop dispendieux. C’est particulièrement important, car notre appli risque d’être utilisée beaucoup en été, pendant la saison touristique, et moins en hiver. C’est pourquoi j’ai pensé à Amazon Web Services, qui offre un hébergement flexible dont le prix dépend de l’utilisation.

La première chose à faire est de se créer un compte dans AWS. Vous aurez besoin d’une carte de crédit, mais encore une fois: rien ne vous sera chargé tant que votre site web ne sera pas visité au-delà d’une certaine marge, qui est d’ailleurs très généreuse (20,000 visites). L’avantage est ainsi de pouvoir tester votre code avant, disons, de l’envoyer à Joshua pour l’héberger sur historiamati.ca. La seconde chose à faire est d’ouvrir la console et choisir l’outil S3.

On crée ensuite un «saut» (bucket) pour héberger notre projet.

On donne un nom (il doit être unique dans tout AWS). On choisit la région desservie par le serveur de notre choix, puis NEXT.

Dans les permissions, on choisit de rendre le projet public. AWS nous demande de confirmer, car si le site est beaucoup consulté, nous pourrions éventuellement être facturé.

Mon nouveau saut apparaît maintenant dans la liste.

Si je clique dessus, je peux y téléverser des fichiers.

Je fais donc un «drag and drop» du dossier contenant mon projet (ici en fait un simple fichier index.html).

Je choisis la classe standard de stockage, et je confirme le téléversement. Mon fichier apparaît maintenant dans mon saut:

Si je clique sur le fichier, les détails apparaissent et je peux choisir de le rendre public.

En passant, j’utilise les mots anglais ici, car je trouve ça plus pratique pour suivre les tutoriels qui sont souvent dans cette langue. Mais AWS fonctionne aussi en français. Pour choisir sa langue, il faut aller au bas de la fenêtre.

Je pourrais auss lier mon site à un nom de domaine. Ce qui se ferait avec un autre outil AWS, Route 53, mais il va y avoir des frais ici. Il faudrait d’abord acheter le nom de domaine et lier celui-ci à notre saut principal. Je commence par vérifier la disponibilité du nom de domaine désiré et les options. Par exemple, gastropoliti.ca me coûte 20$ CAN par année. Mais gastropoliti.movie m’aurait coûté 400$. Les tutoriels d’AWS sont très complets pour la suite.

Une fois notre carte en ligne, par contre, on voit que notre navigateur nous prévient qu’il n’est pas sécurisé.

C’est problématique pour notre projet, car, comme je l’expliquais dans un billet, pour pouvoir géolocaliser l’utilisateur (avec sa permission préalable), le site doit être sécurisé. Sinon, on obtient ce message:

On peut sécuriser notre site, mais pour ça, il faut utiliser un troisième outil dans AWS, Cloud Front, qui va créer une distribution à laquelle il sera possible d’ajouter une couche de chiffrement, pour obtenir en bout de ligne un site https. Il faut utiliser pour obtenir ce résultat un 4e outil: Certificate Manager. Je trouve que les tutoriels d’AWS sur cette étape sont incomplets et j’ai dû recourir à leur assistance technique, ce qui signifie des frais supplémentaires. Cependant, les conseils étaient, eux, très clairs.

N’entrez jamais d’informations personnelles sur un site qui n’est pas sécurisé. Vérifiez que l’adresse commence par HTTPS. C’est aussi pour des raisons de sécurité qu’un navigateur refuse de donner notre position GPS à un site qui n’est pas HTTPS. Maintenant qu’il l’est, nous allons pouvoir ajouter quelques lignes de code Leaflet à notre programme.

Leaflet

C’est un petit bout de code simple, mais qui permet de faire plusieurs choses, notamment représenter la position du client par une icône de tortue que j’ai réalisée avec Inkscape. En passant, la tortue est un symbole que l’on retrouve dans presque toutes les cultures autochtones et il est lié au mythe de la création du monde.

  function onLocationFound(e) {
  		var radius = e.accuracy / 2;
  
  		L.marker(e.latlng, {icon: turtleIcon}).addTo(myMap)
  			.bindPopup("Vous êtes à moins de " + radius + " mètres de la tortue").openPopup();
      L.circle(e.latlng, radius).addTo(map);
  }
  
  myMap.on('locationfound', onLocationFound);
  
  function onLocationError(e) {
      alert(e.message);
  }
  
  myMap.on('locationerror', onLocationError);
  
  myMap.locate({setView: true, maxZoom: 16});

Donc, maintenant, quand je consulte la carte, je vois à quelle distance je me trouve des marqueurs, par exemple ici à côté de notre jardin historique.

That’s it folks!