• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 28/11/2019

Préparez votre application

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Préparez les ressources nécessaires

Jusqu'ici, les applications que vous avez créées ont eu une icône et une splash screen par défaut, fournis par Ionic, mais pour votre déploiement, ce n'est certainement pas ce que vous souhaiterez.  Afin d'utiliser vos propres images, il suffit de remplacer  icon.png  et  splash.png  dans le dossier  resources .

Pour que le CLI puisse compiler correctement votre projet, il faut que l'icône fasse exactement 1024x1024 pixels, et que le splash fasse 2732x2732 pixels. Ionic accepte actuellement des fichiers PNG, PSD ou AI.

Ensuite, pour les différentes images pour Android et iOS et pour les différentes tailles d'écran, vous avez deux possibilités.  Vous pouvez créer les fichiers individuellement et remplacer ceux créés par Ionic, en faisant attention à respecter la nomenclature et les résolutions de chaque image.  Sinon, si vous êtes d'accord pour utiliser les mêmes images pour les deux plateformes et pour toutes les tailles d'écran, vous pouvez exécuter la commande suivante une fois  icon.png  et  splash.png  remplacées :

ionic cordova resources

Cette commande génère automatiquement toutes les versions nécessaires aux différentes plateformes et tailles d'écran à partir des fichiers  icon.png  et  splash.png.

Configurez votre application

Pour configurer les métadonnées de votre application, vous utiliserez le fichier config.xml :

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>nature-view</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>

Votre fichier comprend bien d'autres lignes (générées, pour la plupart, par Ionic), mais ces quelques premières lignes sont celles qui vous intéresseront pour la configuration de votre application.

Vous pouvez modifier l' id  de votre application, ainsi que sa version.  Ces éléments seront très importants lors de la signature de l'application pour le déploiement (deux applications ne peuvent pas avoir le même  id , par exemple).  C'est également ici que vous modifiez le nom de votre application et sa description qui apparaîtront dans l'App Store ou le Play Store au moment de la mise en ligne de l'application.  Vous pouvez également modifier vos informations en tant qu'auteur de l'application : votre adresse mail, votre site internet et votre nom.

Il y a beaucoup de possibilités de configuration dans config.xml.  Pour en savoir plus afin de peaufiner votre configuration, plongez dans la documentation Cordova sur cordova.apache.org.

Construisez votre application

Pour le build final de votre application, vérifiez d'abord que vous avez effectué ces étapes :

  • vous avez effectué toutes les modifications que vous souhaitez effectuer dans le fichier  config.xml  ;

  • vous avez ajouté toutes les plateformes souhaitées au projet — par exemple, avec 
  ionic cordova platform add ios  ;

  • vous avez modifié les icônes et splash screen pour y mettre les vôtres et, si besoin, vous avez exécuté  ionic cordova resources  pour créer les versions des images pour toutes les plateformes et les tailles d'écran.

Si tout est prêt, vous pouvez maintenant effectuer votre build final pour chaque plateforme :

ioniccordovabuild--releaseios
ioniccordovabuild--releaseandroid

Le flag  release  optimise l'application pour le déploiement en retirant certaines fonctions de déboggage, par exemple.  Une fois cette étape terminée, vous pourrez passer à la signature et à la publication de votre application.

Exemple de certificat de réussite
Exemple de certificat de réussite