L’avantage d’un carnet de recherche comme celui-ci, c’est qu’on peut y revenir comme à un aide-mémoire. On peut ainsi voir l’évolution de sa démarche méthodologique. Et il arrive qu’on regarde en arrière et que l’on se trouve un peu idiot! Dans mon dernier billet, deux choses me semblent maintenant ridicules. La première, c’est que si la carte devient une appli, il n’y a plus besoin de l’héberger sur AWS, puisque le téléchargement se fait une fois et au frais de l’utilisateur. Le PlayStore coûte 25$ une fois par appli, puis 12$ par année. Il y a aussi une taxe à payer dans l’App Store. Nous y reviendrons. C’est très peu comparé aux frais que peuvent entraîner un site très visité. Ceci règle donc la problématique des frais d’hébergement et nous permet de rendre gratuite notre appli et sans pub. Ce n’est pas mauvais pour autant d’avoir vu AWS, puisque cela vous permet d’héberger gratuitement vos projets et j’y mettrai la scrollymap associée à mon livre Du beurre ou des canons (tutoriel à venir).

La deuxième chose ridicule, c’est que si j’avais voulu (presque) tout faire avec l’invite de commande comme je l’annonçais en intro de mon dernier billet, j’aurais pu également créer mes variables d’environnement avec une ligne de code, par exemple ainsi:

setx  PATH "%PATH%;C:\Gradle"

Je concluais le dernier billet sur un problème de géolocalisation.

J’écrivais aussi que je pensais régler ce problème dans Android Studio. Mais après avoir lu «dans les Internets», il m’apparaît que retravailler l’appli dans AS créerait plus de problèmes que cela en résolverait. En fait, on peut simplement corriger cette erreur de géolocalisation en installant le plugin approprié dans notre projet Cordova (en se situant dans le projet avec l’invite de commande): 

cordova plugin add cordova-plugin-geolocation

En raison du fait que notre projet est écrit en Leaflet et de la façon que les permissions liées à la géolocalisation sont gérées dans cette bibliothèque JS, on doit encore installer un plugin, celui de Leaflet:

npm i leaflet-cordova

Ce qui corrige notre erreur de géolocalisation. Tous les plugins doivent être installés avant l’étape cordova build et en se situant dans le projet cordova avec l’invite de commande.

L’avantage de Cordova est qu’on peut déployer son appli sur les plateformes Androis et iOS. Or, j’ai également lu dans des forums que l’App Store snobait les appli qui ne sont que des sites Web sous forme d’appli, ce qui est exactement notre cas. Un type écrivait qu’Apple lui avait demandé d’ajouter des sons à son appli pour qu’elle puisse être acceptée. C’est donc ce que l’on va faire, avec le plugin approprié:

cordova plugin add cordova-plugin-media

Nous créons ensuite un dossier et y ajoutons le chant d’un hibou (trouvé ici) en mp3:

www/audio/hibou.mp3

Il s’agit ensuite d’ouvrir avec Atom le fichier index.js dans le dossier www de notre projet et d’ajouter le code (trouvé ici) suivant:

var myMedia = null;
function playmp3() {
   var src = "/android_asset/www/audio/hibou.mp3";

   if(myMedia === null) {
      myMedia = new Media(src, onSuccess, onError);

      function onSuccess() {
         console.log("playAudio Success");
      }

      function onError(error) {
         console.log("playAudio Error: " + error.code);
      }
   }
   myMedia.play();
}

Il faut maintenant ajouter dans le head de index.html une référence à index.js, de même qu’à cordova.js, qui sera automatiquement ajouté dans www au moment de créer l’appli (cordova build):

<script src="cordova.js"></script>
<script src="js/index.js"></script>

Ensuite, on ajoute (toujours dans index.html) la fonction au code que Joshua a écrit:

    case 1:
            map.setView([46.80651,-71.3570567], 13);
            playmp3();
            break;

Comme c’est un hibou et qu’il nous emporte vers la prochaine destination, nous allons ajouter (toujours dans index.html) une animation pour simuler un vol d’oiseau:

var map = L.map('map', {
center: [54.066331,-70.040892],
zoom: 5,
//nouvelle ligne
zoomAnimation: true,
maxBounds: [
[63.376114,-81.990829],
[43.961622,-55.738199]
],
maxZoom: 18,
minZoom: 5,
zoomControl: false
});

La suite de ce billet n’a pas trait aux plugins mais est quand même importante. Par défaut, une fois installée sur le téléphone, l’icône de notre appli est celle de Cordova.

Pour changer celle-ci, créons d’abord un dossier (res) dans la racine de notre projet qui va contenir notre icône.

il faut ajouter dans le fichier config.xml (qu’on voit sur la photo) le code suivant:

<platform name="android">
        <allow-intent href="market:*" />
        <icon src="res/icon.png" />
    </platform>

Bien sûr, on aura ajouté dans le dossier res le fichier png en question. Je l’ai créé d’abord en SVG (pour l’icône représentant l’usager) dans Inkscape, puis je l’ai importé dans Gimp et je l’ai exporté vers png. Ce qui donne ceci:

Le nom de l’app devait être Mémoires autochtones, mais je pense que ça devrait être plus court pour tenir en une ligne. Des suggestions? Uiesh?