Et si notre carte était une application pour téléphone ou tablette? Cela présenterait plusieurs avantages: impossibilité pour l’usager de jouer accidentellement avec le zoom du navigateur et gâcher l’expérience de consultation; facilité pour l’usager de retrouver l’appli puisqu’elle apparaît après téléchargement comme une icône sur son téléphone (au lieu de se fier à sa capacité d’ajouter le site à ses favoris); possibilité de charger un montant pour télécharger l’appli, genre 1$ et tous les profits (après réglement des frais d’hébergement sur AWS) iront à une institution caritative oeuvrant pour le bien-être des Premières Nations, des Métis et des Inuits. Au départ, je pensais m’être mis la barre haute en entreprenant ce projet d’appli, mais il s’avère que c’est incroyablement simple avec l’outil Apache Cordova («un framework open-source qui permet de créer des applications pour différentes plateformes en HTML, CSS et JavaScript»). Cela dit, pour pouvoir utiliser cette ressource, il faut installer d’autres composantes. La bonne nouvelle, c’est que nous allons faire tout ça avec uniquement l’invite de commande (ou presque). Vous pouvez revoir les bases de celle-ci dans mon tutoriel.
La première chose à faire, est d’installer Node.js qui contient npm (le gestionnaire de paquets officiel de Node.js). Ça vient dans un paquet d’installation standard. Il y a fort à parier que vous allez avoir besoin de Node dans d’autres projets. Une fois l’installation terminée, vérifiez dans l’invite de commande que node et npm sont bien installés.
node -v npm -v
La seconde chose à faire est d’intaller le kit d’outils de développement d’appli Android de Google. La façon la plus simple est d’installer Android Studio, dont on aura besoin de toute façon pour la prochaine leçon. Dans les paramètres d’Android, il faut s’assurer que la version 8 de SDK est bien installée et que toutes les versions des outils installés (sous l’onglet SDK tools) sont à jour, sinon cochez les mises à jour et cliquez sur appliquer, puis redémarrez l’ordi.
Donc, pour résumer: même si l’on ne va pas se servir d’Android Studio maintenant, son installation permet d’installer les outils dont on aura besoin ici, soit le kit SDK et Gradle, un autre kit qui permet, lui, de construire l’appli. Le problème, toutefois, est qu’après installation, ces outils ne vont pas nécessairement être utilisables en dehors d’Android Studio. Il faut, pour cela, les ajouter au PATH. On commence par trouver dans les paramètres de notre ordi les variables de l’environnement du compte. Le plus simple est de commencer à taper «variables» dans la boîte de recherche.
Ensuite, choisir de modifier la variable Path et ajouter le chemin absolu vers les dossiers qui contiennent les répertoires où se trouvent SDK (jdk) et Gradle.
Puis cliquer sur OK. Ceci va permettre à notre ordi de savoir où se trouvent ces outils lorsque nous les invoquerons avec l’invite de commande. Ouvrons cette dernière (Windows+R) et vérifions que Gradle est installé.
gradle -v
La table est mise pour passer aux vraies affaires. Toujous dans l’invite de commande, installons Cordova à l’aide de npm.
npm install -g cordova
On crée ensuite un dossier pour notre projet avec l’invite de commande (nom du dossier, nom du projet [il doit être unique], nom tel qu’il apparaîtra sur le téléphone):
cordova create Orendaapp com.orenda Mémoires Autochtones
Trouvons dans l’explorateur de fichiers le dossier créé. On y trouve un sous- dossier www. Il contient des données qui ne sont pas pertinentes pour notre projet. On peut toutes les supprimer et les remplacer par notre projet Leaflet. ATTENTION cependant: il faut respecter la même structure, ce qui peut, comme dans mon cas, demander à réorganiser vos dossiers et fichiers et changer dans le head du html les références à ceux-ci.
Nous avons donc un nouveau projet Cordova mais qui n’est pas spécifiquement un projet Android. Pour ce faire, situons-nous d’abord avec l’invite de commande dans le projet.
cd C:\Users\Tristan\Orendaapp
On se souvient que cd veut dire changedirectory. Nous allons maintenant ajouter la plateforme Android dans le dossier de notre projet Cordova.
cordova platform add android
On peut voir que l’opération est réussie:
On pourrait aussi ajouter une plateforme iPhone.
cordova platform add ios
Ce que nous ferons PEUT-ÊTRE plus tard.
Toujours dans l’invite de commande, déplaçons-nous spécifiquement dans le dossier www de notre projet.
cd C:\Users\Tristan\Orendaapp\www
Nous allons y construire l’appli avec une simple ligne:
cordova build
Ne faites pas comme moi: j’ai tapé «corona» la première fois! Ça va tous nous rendre fous cette pandémie… Vérifions maintenant que notre appli fonctionne correctement. Pour ce faire, nous allons avoir besoin d’un téléphone Android.
Allez dans les paramètres de votre téléphone, dans À propos du téléphone, puis dans Informations sur le logiciel et tapez 7 fois sur le Numéro de version, ce qui va débloquer les Options de développement. Si vous revenez en arrière, celles-ci devraient maintenant apparaître tout au bas des paramètres. Dans ces options, activez le débloquage USB. Branchez votre téléphone à votre ordi avec un câble USB. Dans l’exporateur de fichiers, retrouvez le fichier de votre appli. C’est un fichier qui a pour nom app-debug.apk et il est situé ici: C:\Users\Tristan\memoiresautochtonesapp\platforms\android\app\build\outputs\apk\debug. L’appli est maintenant sur votre téléphone. Vous pourriez aussi dans l’invite de commande exécutez:
cordova run android
IEnsuite ouvrir dans Chrome: chrome://inspect/#devices et choisissez d’inspecter votre téléphone. Une fenêtre émulant votre téléphone apparaîtra. Enjoy.
Il reste encore beaucoup de choses à faire avant de commencer à envisager mettre l’appli dans le PlayStore (notamment fixer un bug lié à la géolocalisation), ce qui va nous amener à voir Android Studio dans une prochaine leçon, mais c’est déjà très encourageant et somme toute assez simple. Essayez-vous à la maison à créer votre appli!
1 commentaire
1 Pingback