Hello ! Tu viens de développer ton application Cordova et tu voudrais l’exporter sur ton téléphone ? Tu es au bon endroit !

Sinon je te conseille de voir le tutoriel pour créer une application facilement  

Avant de commencer, je tiens à dire que nous allons exporter l’application pour les appareils Android, car c’est un système d’exploitation open-source, ainsi tout le monde peut exécuter l’application quelque soit sa machine (PC ou Mac). Là, tu te dis que tu n’as pas de téléphone sous Android donc que cet article ne te concerne pas … que nenni ! D’une, nous allons émuler un téléphone Android sur notre ordinateur, et de deux, nous allons aussi voir certaines commandes utiles pour exporter ton application sur iOS.

NB : c’est une des limites du monde d’Apple, tu dois avoir un Mac pour exporter une application sous iOS. À l’inverse, tu peux exporter une application Android que tu sois sur PC ou Mac.

Configuration de l’export

Premièrement, tu auras besoin du SDK d’Android, SDK signifie Software Development Kit, cela est mis à disposition aux développeurs par des entreprises, pour que les développeurs s’appuient dessus pour créer des produits avec. Ici Google nous propose le SDK d’Android pour que nous puissions développer des applications sous Android. Il va donc falloir télécharger le SDK.

Si tu es sous Windows, exécute le fichier .exe téléchargé, installe-le, puis lance l’Android SDK Manager. Si tu es sous Mac ou Linux, quand le téléchargement sera fini, extrait le dossier où tu souhaites dans tes fichiers et rends-toi dans ce dossier, puis dans tools, et exécute le fichier nommé android.
Quelque soit ton système d’exploitation rappelle-toi où tu as installé le SDK, nous en aurons besoin plus tard.

Il se peut que lors de l’installation tu sois bloqué car tu n’as pas Java, tu as donc besoin de l’installer car Android se base sur ce langage pour fonctionner, rends-toi ici, et installe la version qui correspond à ta machine. Termine l’installation du SDK d’Android et lance-le.

Le gestionnaire de SDK ouvert, tu te retrouves avec pleins de versions d’Android, il va falloir en installer une, nous allons choisir la version 5.1.1 (API 22), sélectionne les mêmes paquets que sur la capture d’écran suivante :

androidSdkManager

Cela va te permettre d’exporter ainsi que d’émuler l’application. Quand tu as sélectionné ce qu’il faut, installe-les, accepte les licences, et laisse charger. Cela va prendre un petit moment.

Pendant ce temps, je t’invite à revenir dans le terminal, notre application ne sait pas encore vers quel système mobile elle va être exportée. Pour résoudre cela, il y a une commande de Cordova qui te permet d’ajouter une plate-forme à ton application. Comme nous voulons notre application sur Android, il nous suffit de taper dans le dossier de notre projet depuis le terminal : cordova platform add android. Cela va créer un dossier android dans le dossier platforms de ton application.

Ensuite, il va falloir pointer le dossier que nous avons téléchargé plus haut à l’aide d’une variable d’environnement. Ce type de variable sert à communiquer des informations entre différents programmes qui ne sont pas liés, elle est utilisée par le système d’exploitation. Nous allons donc définir une variable d’environnement, mais cela sera à faire à chaque fois que tu rallumes ton ordinateur. Quand la commande fonctionnera, je te conseille de la garder de côté dans un bloc-notes On est donc parti pour l’export de l’application.

Émulation

Voici que tu auras à faire à chaque fois que tu voudras émuler/exporter ton application.
Pour exporter ou émuler une application Android notre système a besoin d’une variable d’environnement nommée ANDROID_HOME, celle-ci va pointer sur ton dossier téléchargé, il te faut donc le chemin complet vers ce dossier. Quand tu as trouvé le chemin pour ton dossier, tu es prêt pour déclarer ta variable d’environnement, comme cela dans ton terminal:
Mac : export ANDROID_HOME=/Users/phil/code/android-sdk-macosx
Windows : set ANDROID_HOME=C:/Users/Phil/AppData/Local/Android/android-sdk
Linux : export ANDROID_HOME=/home/phil/android-sdk-linux

Avec l’Android SDK Manager d’ouvert, en haut de la fenêtre ouvre le menu tools, clique sur Manage AVDs, AVD signifie Android Virtual Device, c’est grâce à cela que nous allons choisir sur quel appareil Android nous allons tester notre application. Pour cela il va falloir créer un appareil, via le bouton Create à droite. Voici ce que j’ai choisi :

AndroidVirtualDevice

Ensuite, valide la création de l’appareil. Rends-toi dans le terminal et tapes cordova emulate android : cela va t’ouvrir une nouvelle fenêtre avec un appareil Android qu’on vient de créer. Ne fais rien, l’application va se lancer d’elle-même. Voilà ce qui devrait s’ouvrir : remplis le formulaire et valide-le, tu auras la météo.

emulator

Tu seras d’accord pour dire que l’application est lente, c’est normal cela est dû à l’émulateur, mais que tu ais un appareil Android chez toi ou non, tu vois l’application tourner sur un appareil Android Sache que tout cela peut aussi être fait pour iOS depuis un Mac.

Exporter l’application sur ton téléphone

Pour exporter ton application sur ton téléphone, tu as juste besoin d’avoir déclaré la variable ANDROID_HOME, tu n’as pas besoin de l’AVD. Tu as donc ton application finie et le SDK d’android installé sur ton ordinateur, tu peux alors taper dans le terminal cordova build android. Cela va créer un fichier .apk pour installer ton application sur ton appareil. Branche ton téléphone à ton ordinateur puis active la mémoire de stockage USB depuis ton téléphone. Comme une clé USB, tu vas voir les dossiers contenus dans ton téléphone, copie le fichier android-debug.apk qui vient d’être créé par le terminal dans ton téléphone. Si tu ne le trouves pas, il se trouve dans le dossier de l’application sous : platforms/android/build/outputs/apk/android-debug.apk

Quand tu as bien copié le fichier dans ton téléphone, débranche-le du PC, il va maintenant falloir trouver le fichier dans le téléphone. Pour cela, tu peux utiliser une application gestionnaire de fichier, la plupart du temps il y en a une de base dans ton appareil. Quand tu as trouvé le fichier android-debug.apk dans ton téléphone, clique dessus. Une pop-up apparaît et te dit que l’installation est bloquée, il va falloir autoriser les sources inconnues : rends-toi dans tes paramètres, dans « Sécurité » et coche « Sources Inconnues ». Pas de panique, la pop-up de mise en garde veut juste dire que tu ne dois pas installer n’importe quelle application, mais là c’est toi qui l’a faite donc pas de souci  . Retourne dans le gestionnaire de fichier et clique sur ton application, installe-la, ouvre-la et amuse-toi avec  .

Et ensuite ?

Tu viens de créer une application fonctionnelle et tu voudrais la rendre accessible au monde entier ? Rien de mieux que de la mettre les stores d’applications ! Je vais te donner des pistes pour savoir comment faire  

Sache que pour mettre son application sur les stores tu as besoin d’un compte développeur, malheureusement payant. Il te faudra débourser 25$ (environ 20€) pour le Play Store, et 99$ (environ 90€) pour l’App Store. Quand tu as choisi sur quelle plateforme tu vas soumettre ton application, il faudra créer une version de production de l’application avec Cordova, il te suffit d’ajouter --release à la fin de cordova build android. Ensuite il faudra signer ton application pour qu’elle ai une identité. Pour la signer, tu as de nombreux façons de le faire, tu peux te référer aux documentations officielles d’android et d’iOS. Quand tu soumets une application sur les store, il y a une étape de validation pour voir si ton application respecte les règles des stores, sur le Play Store cela prend environ 1 jour, pour 5 jours pour l’App Store. Ensuite tu pourras voir ton application sur le store que tu as choisi !

Voila tu as appris à créer une application Cordova de A à Z. Tout le processus a pu te paraître long mais il a fallu installer de nombreux outils, qui sont maintenant sur ta machine, et tu n’auras plus à le faire. Tu peux modifier ou utiliser l’application à ta guise.

Ceci est une bonne base pour faire une application que tu peux voir sur le Play Store ou l’App Store, en ajoutant quelques fonctionnalités et en utilisant les mêmes outils que dans la partie 2 voici ce à quoi je suis arrivé : https://play.google.com/store/apps/details?id=com.philemoncombes.cleanweather
Si tu es fier de ton application n’hésite pas à la partager dans les commentaires

 

PS : tu peux retrouver les deux tutoriels qui précèdent celui-ci ici :

#Tutoriel : Exporter son application #mobile sur #Android ou #iOSClick to Tweet
Créer une application mobile de A à Z – Partie 3 : Export
5 (100%) 3 votes

Ce qui pourrait également t'intéresser ...

6 réflexions sur “ Créer une application mobile de A à Z – Partie 3 : Export ”

  1. Bonjour !
    Déjà un grand merci pour ce tutoriel qui est en train de me permettre de réaliser mon PTUT de DUT Informatique

    J’ai un problème lors de l’émulation de l’application. J’obtiens une erreur comme cela:

    https://uploads.disquscdn.com/images/eebdc91c376412a2b4934e81a9294aa9b3569eaeb9e048d3add3982fe966aef7.jpg

    Pourtant, j’ai bien suivi toutes les étapes, et essayé de réinstaller les dernières version de android sdk etc
    Est-ce que quelqu’un aurait une idée d’ou cela peut venir ?

    Merci d’avance !

  2. export ANDROID_HOME=/home/phil/android-sdk-linux ??? on m´explique ?
    Moi j´ai android-studio/bin/studio.sh

    c´est quoi android-sdk-linux ????????????????????????????? Pourquoi ce sujet n´est clair nul part ou je vais.
    Deja si je pouvais savoir si c´est un folder ou un exec ca m´aiderait

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir