PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WINDEV Mobile 28 !
  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Les configurations de projet
  • Premier test et déploiement sous Android
  • Premier test sous Android
  • Premier déploiement sur un appareil Android
  • Premier test et déploiement sous iOS
  • Test sous iOS
  • Premier déploiement sur un appareil iOS
Leçon 2.2. Premiers test et déploiement de l'application
Ce que vous allez apprendre dans cette leçon
  • Les configurations de projet.
  • Configuration Android :
    • Mon premier test en Android.
    • Premier déploiement sur un périphérique Android.
  • Configuration iOS :
    • Mon premier test sous iOS.
    • Premier déploiement sur un périphérique iOS.
Durée

Durée estimée : 1 h
Leçon précédenteSommaireLeçon suivante
Présentation
La leçon précédente nous a permis de créer notre premier projet multiplateforme, avec sa première fenêtre. Dans cette leçon, nous allons tester et déployer cette application, aussi bien sur une plateforme Android que sur une plateforme iOS.

  • Pour suivre cette leçon, ré-ouvrez si nécessaire le projet que vous avez manipulé dans la leçon précédente.
    1. Affichez la page d'accueil de WINDEV (Ctrl + <).
    2. Dans la page d'accueil, cliquez sur "Ouvrir un projet" puis dans la zone "Projets récents", double-cliquez sur "Mon_Projet_iOS_Android".

      Corrigé

      Un projet corrigé est disponible. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Partie 2 - Leçon 2.1 - Ma première application Android/iOS", double-cliquez sur "Mon projet Android/iOS (Corrigé)".
    3. Affichez si nécessaire la fenêtre FEN_Bienvenue dans l'éditeur :
      • Dans le volet "Explorateur de projet", déroulez "Fenêtres" et double-cliquez sur "FEN_Bienvenue".
      • La fenêtre FEN_Bienvenue est affichée dans l'éditeur.
Les configurations de projet
Dans la leçon précédente, nous avons créé un projet pouvant s'exécuter à la fois sur une plateforme Android et sur une plateforme iOS. WINDEV Mobile a automatiquement associé au projet deux configurations de projet, chacune correspondant à une plateforme.

Note

Les configurations de projet permettent de définir les différents types de générations supportées par le projet : Android, iOS, composant, ...
Les éléments du projet peuvent être :
  • communs à plusieurs configurations (par exemple, une fenêtre utilisée en iOS et Android).
  • spécifiques à une configuration (par exemple une classe utilisée uniquement par un composant).
A tout moment, vous pouvez travailler sur une configuration spécifique : les éléments n'appartenant pas à cette configuration apparaissent grisés sous l'éditeur de projet.
Pour plus de détails, consultez Configuration de projet.
  • Vous pouvez vérifier la présence des différentes configurations de projet dans le volet "Explorateur de projet" :
    1. Déroulez l'option "Configurations (Application iOS)" en haut du volet "Explorateur de projet".
    2. Les deux configurations apparaissent :
    3. Pour sélectionner l'une ou l'autre configuration, il suffit de double-cliquer sur le nom de la configuration voulue.
Pour tester ou déployer une application WINDEV Mobile, il est nécessaire de sélectionner la configuration de projet correspondant à la plateforme voulue.
Premier test et déploiement sous Android

Premier test sous Android

WINDEV Mobile permet de tester directement l'application sur le poste de développement grâce au mode simulation. Ce test réalise une simulation d'un périphérique Android sur le poste de développement. Ce test est utile quand le développeur ne dispose pas de périphérique Android. Cependant, ce test ne permet pas d'utiliser les composants matériels de l'appareil (GPS, SMS, appareil photo, ...).

Note

Pour Android, WINDEV Mobile permet également de réaliser un test de l'application via l'émulateur Android (AVD) fourni avec le SDK. Pour plus de détails, consultez Tester avec l'émulateur Android.
  • Nous allons tester la fenêtre FEN_Bienvenue en mode simulation dans une configuration Android.
    1. Sélectionnez si nécessaire la configuration Android de votre projet :
      • Déroulez l'option "Configurations (Application iOS)" en haut du volet "Explorateur de projet".
      • Double-cliquez sur le nom de la configuration Android.
    2. Cliquez sur Tester la fenêtre parmi les boutons d'accès rapide (ou utilisez la touche F9).
    3. Validez si nécessaire le message d'information concernant le mode simulateur.
    4. La fenêtre que vous avez créée se lance en exécution.
    5. Cliquez sur le bouton "Afficher".
    6. Validez la fenêtre système qui s'affiche.
      Test d'une fenêtre
  • Tout développeur sait que tester un programme est souvent long, voire fastidieux. Avec WINDEV Mobile, en UN CLIC, vous testez la fenêtre, l'état ou la procédure que vous êtes en train de réaliser. C'est à la fois simple et rapide !
  • Cliquez sur le bouton "x" situé dans le menu au-dessus de la coque du simulateur pour fermer la fenêtre.
  • L'éditeur de WINDEV Mobile réapparaît.

Note

Dans cette leçon, nous effectuons un test d'une fenêtre sous le simulateur. WINDEV Mobile permet d'effectuer plusieurs types de tests de votre application dans son ensemble.
Il est possible de tester votre application :
Tester le projet
  • dans le simulateur proposé par WINDEV Mobile : sélectionnez "Déboguer sur simulateur Téléphone Android Générique Déboguer sur simulateur XXX" parmi les options d'accès rapide. Cette option permet de tester rapidement le projet sur le PC. C'est cette option que nous utilisons dans ce cours.
  • directement sur le téléphone mobile (option par défaut): sélectionnez l'option "Déboguer sur appareil mobile Déboguer sur appareil mobile" parmi les boutons d'accès rapide : la génération sera effectuée et l'application sera copiée et exécutée sur le téléphone mobile connecté au poste en cours. Vous pouvez ainsi tester directement l'application sur votre matériel.

Premier déploiement sur un appareil Android

Pour exécuter l'application de manière autonome sur l'appareil Android, il suffit de :
  • Connecter l'appareil via un port USB.
  • Générer l'application. Un fichier "apk" va être créé. Ce fichier contient tous les éléments nécessaires à l'exécution de l'application sur un appareil Android.
  • Sélectionner votre appareil à la fin de la génération. La copie de l'application (fichier "apk") peut prendre quelques secondes.
Nous allons voir en détail ces différentes étapes.

Note

Attention : L'activation du débogage USB est nécessaire pour lancer les tests sur le téléphone. Si cette opération n'est pas effectuée, le téléphone ne sera pas détecté par WINDEV Mobile.
Pour activer le débogage USB :
  1. Sur le téléphone, sélectionnez le menu "Paramètres".
  2. Sélectionnez le choix "A propos de l'appareil".
  3. Cliquez plusieurs fois sur l'option "Numéro de build" pour activer le mode développeur.
  4. Remontez d'un niveau.
  5. Le choix "Option de développement" apparaît. Sélectionnez cette option.
  6. Cochez l'option "Débogage USB".
Remarque : Selon la version du téléphone et sa marque, les manipulations à effectuer peuvent varier. Par exemple, pour un matériel de type Samsung Galaxy Notes 3, il est nécessaire de "tapoter" plusieurs fois le champ "Numéro de version" de l'option "A propos de l'appareil" afin d'activer le choix "Option de développement". Dans tous les cas, une recherche Google avec "débogage usb <nom périphérique>" permet d'avoir le mode opératoire adapté au matériel utilisé.
  • Pour générer l'application Android :
    1. Sous le volet "Projet", dans le groupe "Génération", cliquez sur "Générer" (vous pouvez également cliquer sur Génération Android parmi les boutons d'accès rapide).
    2. WINDEV Mobile propose de sélectionner la première fenêtre du projet. Pour notre exemple, sélectionnez "FEN_Bienvenue" et validez (bouton "OK").
      Première fenêtre du projet
    3. L'assistant de génération d'une application Android se lance.
    4. La première étape de l'assistant consiste à demander le mode de génération de l'application. En effet, selon le mode choisi, le format de génération n'est pas le même.
      Pour ce cours, choisissez l'option "Générer pour un déploiement libre (store privé, flotte d'entreprise, etc.)". Passez à l'étape suivante.
    5. L'étape suivante de l'assistant consiste à vérifier les outils nécessaires à la génération de l'application Android.
      Outils de génération
      L'assistant propose de :
      • Télécharger et installer automatiquement le SDK Android et Gradle : dans ce cas, vous devez uniquement valider la licence. WINDEV Mobile s'occupe de tout. Si une mise à jour est disponible, l'assistant de génération vous proposera automatiquement de réaliser les mises à jour nécessaires. Seule une connexion Internet est nécessaire. Cette option est disponible uniquement si vous n'avez pas précédemment téléchargé et installé Gradle.
      • Utiliser les outils installés automatiquement. Cette option est disponible uniquement si vous avez téléchargé et installé les outils lors d'une précédente génération.
      • Spécifier l'emplacement des outils déjà installés sur votre poste. Dans ce cas, il suffit de préciser les chemins d'installation de Gradle et du SDK Android.
    6. Sélectionnez l'option correspondant à votre configuration et passez à l'étape suivante.
      Remarque : Si vous avez choisi de télécharger et installer les outils, le passage à l'étape suivante peut être relativement long et demander la validation de la licence.
    7. L'étape suivante de l'assistant permet de :
      • définir le nom de l'application (affiché sous l'icône permettant de lancer l'application) et le package correspondant.
      • sélectionner l'icône de l'application dans le catalogue d'images de WINDEV Mobile.
        Informations générales
    8. Passez à l'étape suivante. Cette étape permet de définir :
      • l'écran de lancement de l'application,

        Express

        Remarque : L'écran de lancement de l'application n'est pas disponible en version Express.
      • les informations enregistrées dans le manifeste,
      • les options de l'application :
        • le mode de lancement de l'application (lancement au démarrage du périphérique ou non).
        • la gestion des fenêtres maximisées (gestion du multi-window ou non).
    9. Passez à l'étape suivante. L'assistant permet de définir le numéro de version de l'application.
    10. Passez à l'étape suivante. Cette étape permet de signer l'application. L'assistant propose :
      • de signer l'application.
        Remarque : Pour une diffusion de l'application, il est nécessaire de posséder une signature spécifique.
      • d'utiliser une signature générique, utilisable pour les tests de l'application.

        Express

        Remarque : La signature de l'application n'est pas disponible en version Express.
    11. Sélectionnez l'option "Utiliser une signature générique".
    12. Passez à l'étape suivante. Comme nous avons choisi de générer l'application pour une flotte d'appareils, l'assistant propose de choisir le type d'appareils concernés. Conservez les options par défaut.

      Note

      Si vous possédez un appareil branché au PC, utilisez l'option "Détecter le matériel automatiquement". Ainsi, lors des prochaines générations, votre type d'appareil sera automatiquement sélectionné.
    13. Passez à l'étape suivante.
    14. L'assistant permet d'intégrer des fichiers spécifiques (fichiers de données, images, ...). Dans notre exemple, nous n'utiliserons pas cette possibilité. Conservez les options par défaut.
    15. Passez à l'étape suivante. L'assistant permet d'intégrer des librairies spécifiques. Conservez les options par défaut.
    16. Passez à l'étape suivante. L'assistant permet d'intégrer des dépendances distantes utilisées par le projet. Conservez les options par défaut.
    17. Passez à l'étape suivante. L'assistant permet de définir les permissions de l'application. Par défaut, selon les fonctions WLangage utilisées dans l'application, WINDEV Mobile détecte les permissions nécessaires.
    18. Passez à l'étape suivante. Il est possible de restreindre le téléchargement de l'application sur Google Play Store aux matériels disposant des fonctionnalités utilisées. Conservez les options par défaut.
    19. Passez à l'étape suivante. L'assistant permet de configurer les options du SDK Android. Conservez les options par défaut.
      Configuration avancée
    20. Passez à l'étape suivante.
    21. Terminez l'assistant.
    22. La génération est automatiquement effectuée en tâche de fond. Trois petits points (...) apparaissent dans la barre de titre de WINDEV Mobile pour indiquer que la génération est en cours. Une fenêtre de type popup est également affichée, précisant les étapes de la génération.
      Génération en cours
    23. Lorsque la génération est terminée, la fenêtre de type popup affiche les informations suivantes :
      Génération terminée

      Note

      Cette fenêtre peut être affichée à tout moment en cliquant sur l'icône Génération.
    24. Pour copier et exécuter l'application directement sur l'appareil relié au poste ou sur un émulateur, cliquez sur “Déployer”.
    25. Une nouvelle fenêtre apparaît permettant de sélectionner le périphérique d'exécution. Si vous possédez un appareil Android connecté au poste de développement, sélectionnez le matériel listé dans cette fenêtre.
Voilà, notre première application est générée et exécutée sur le périphérique Android.
Premier test et déploiement sous iOS

Test sous iOS

Pour une application iOS, WINDEV Mobile propose plusieurs types de tests :
  • Test du projet ou d'une fenêtre sur le poste de développement grâce au mode simulation. Ce test réalise une simulation d'un périphérique iOS sur le poste de développement. Ce test est utile quand le développeur ne dispose ni de Mac pour compiler l'application ni de périphérique iOS. Cependant, ce test ne permet pas d'utiliser les composants matériels de l'appareil (GPS, SMS, appareil photo, ...).
  • Test d'un projet directement sur le matériel. Ce test est utile quand le développeur ne dispose pas de Mac pour compiler l'application. Tous les composants de l'appareil sont accessibles.
  • Pour tester la fenêtre FEN_Bienvenue dans la configuration iOS en mode simulation :
    1. Sélectionnez la configuration iOS de votre projet :
      • Déroulez l'option "Configurations (Application Android)" en haut du volet "Explorateur de projet".
      • Double-cliquez sur le nom de la configuration iOS.
    2. Cliquez sur Tester la fenêtre parmi les boutons d'accès rapide (ou utilisez la touche F9).
    3. Validez si nécessaire le message d'information concernant le mode simulateur.
    4. La fenêtre que vous avez créée se lance en exécution, dans une coque correspondant au matériel choisi (iPad ou iPhone).
    5. Cliquez sur le bouton "Afficher".
    6. Validez la fenêtre système qui s'affiche.
      Test de la fenêtre
    7. Cliquez sur le bouton "x" situé dans le menu au-dessus de la coque du simulateur pour fermer la fenêtre.
    8. L'éditeur de WINDEV Mobile réapparaît.
  • Vous possédez un iPhone ? Maintenant, testons le projet directement sur le périphérique.
  • Vérifiez tout d'abord que les conditions suivantes sont réunies :
    • l'iPhone/iPad et le poste de développement doivent être sur le même réseau (Wifi par exemple).
    • l'application WMDev doit être téléchargée sur l'iPhone/iPad (https://itunes.apple.com/fr/app/WMDev/id1437792304).
    • les ports réseau suivants doivent être ouverts :
      • 64000 (64000 à 64005 si plusieurs WINDEV Mobile sont lancés en même temps).
      • 27280
      Si un firewall est utilisé, il doit être configuré pour permettre l'utilisation de ces ports.
  • Parmi les boutons d'accès rapide, sélectionnez l'option "Déboguer sur un nouvel iPhone ou iPad Déboguer sur un nouvel iPhone/iPad". La fenêtre de connexion à un appareil iOS apparaît. Cette fenêtre contient un QR code spécifique.
    Connexion à un appareil iOS
    1. Lancez WMDev sur le poste mobile (iPhone ou iPad).
      • Cliquez sur le bouton "+" puis sur le bouton affichant un code-barres.
      • Scannez le code-barres affiché sous WINDEV Mobile dans la fenêtre de connexion à un appareil iOS.
    2. WINDEV Mobile propose de sélectionner la première fenêtre du projet. Pour notre exemple, sélectionnez la fenêtre "FEN_Bienvenue" et validez (bouton "OK").
      Première fenêtre du projet
    3. L'application mobile se lance sur le périphérique iOS.

Premier déploiement sur un appareil iOS

Pour exécuter l'application de manière autonome sur l'appareil, il suffit de :
  • Générer l'application iOS (ou projet Xcode) sous WINDEV Mobile.
  • Transférer le projet Xcode généré sur un poste Mac pour y être compilé.
  • Compiler le projet Xcode afin de générer le programme.
  • Le programme pourra ensuite être installé sur le matériel connecté ou lancé dans l'émulateur Xcode. Il fonctionnera de manière autonome.
Nous allons voir en détail ces différentes étapes.

  • Pour générer l'application iOS :
    1. Sous le volet "Projet", dans le groupe "Génération", cliquez sur "Générer" (vous pouvez également cliquer sur Génération iOS parmi les boutons d'accès rapide).
    2. L'assistant de génération d'une application iPhone/iPad se lance.
      Assistant de génération de l'application iOS
    3. La première étape de l'assistant permet de :
      • définir le nom de l'application, la société et le copyright.
      • saisir l'identifiant du bundle.

        Note

        Cet identifiant est l'identifiant unique de votre application auprès de Apple. Il se définit et s'enregistre sur le compte développeur Apple.
        Cet identifiant permettra d'enregistrer votre application pour pouvoir la tester et la déployer. Par défaut, WINDEV Mobile propose automatiquement un identifiant respectant les normes de développement Apple actuelles. Vous pouvez modifier cet identifiant.
      • saisir l'adresse email utilisée par défaut pour envoyer les éventuels rapports d'erreur générés par l'application.
    4. Passez à l'étape suivante. Vous pouvez indiquer le chemin des différentes icônes de l'application. Plusieurs icônes peuvent être fournies :
      • des icônes pour iPad et iPad Rétina (uniquement si l'application propose des fenêtres pour iPad),
      • des icônes pour tous les modèles d'iPhone (par exemple, l'iPhone 4S et l'iPhone 6 plus ont une résolution différente).
    5. Passez à l'étape suivante.
    6. Indiquez les caractéristiques de l'écran de lancement (également appelé "splash screen").
    7. Passez à l'étape suivante. Indiquez le numéro de version de l'application générée.
    8. Passez à l'étape suivante. Cette étape permet d'intégrer des fichiers spécifiques (fichiers de données, images, ...). Dans notre exemple, nous n'utiliserons pas cette possibilité. Conservez les options par défaut.
    9. Passez à l'étape suivante. Cette étape permet d'indiquer :
      • si l'application est autorisée à être redimensionnée ou non (Split View). Cette option permet notamment à l'utilisateur final d'afficher deux fenêtres de deux applications différentes côte à côte sur certains matériels.
      • si le partage des fichiers avec iTunes est possible. Si cette option est cochée, il sera possible de récupérer les fichiers de l'application sur le Mac lors de la synchronisation. Par exemple, si des fichiers de données ont été livrés avec l'application, l'application iTunes permettra de récupérer ces fichiers.
      • la version minimale nécessaire d'iOS pour exécuter l'application.
      Le bouton "Options avancées" permet de saisir des options spécifiques pour Xcode.
    10. Passez à l'étape suivante. Cette étape permet de définir les options de signature.
      Pour plus de détails sur les options disponibles, consultez Signature des applications iOS.
    11. Validez l'assistant (bouton "Terminer"). La génération est faite dans le dossier "EXE\<Nom de la configuration iOS>" du répertoire du projet. Le répertoire contenant les sources à utiliser sur le Mac s'appelle "Nom_du_projet.xcode.gen" (pour notre exemple "Mon_Projet_iOS.xcode.gen"). C'est ce répertoire qui doit être copié sur le Mac. Cliquez sur le bouton "Ouvrir le répertoire de génération".

      Note

      A tout moment, le répertoire de génération de la configuration de projet en cours peut être affiché : sous le volet "Accueil", dans le groupe "Général", déroulez l'option et sélectionnez "Ouvrir le répertoire de génération".
La suite des manipulations doit être effectuée sur le Mac. Vous devez :
  • Transférer le projet WINDEV Mobile sur le Mac.
  • Compiler le projet sous Xcode.
  • Pour transférer le projet WINDEV Mobile sur le Mac :
    1. Copiez le dossier complet généré dans le répertoire "EXE\<Nom de la configuration iOS>" sur un support externe (clé USB, disque dur externe, répertoire partagé avec le Mac sur le réseau). Ce répertoire a pour nom <Nom du projet>.xcode.gen.
    2. Collez ce dossier sur le Mac qui va compiler l'application.
    3. Ouvrez le dossier sur le Mac et ouvrez le fichier nommé "Nom_du_projet.xcodeproj".
    4. Le projet s'ouvre dans Xcode.
WINDEV Mobile génère automatiquement un projet Xcode pour vos compilations iOS. Pour vous faciliter la mise au point des applications, WINDEV Mobile génère un “Scheme” pour Xcode.
  • Pour compiler le projet sous Xcode :
    1. Dans la liste déroulante en haut à gauche, sélectionnez les options de compilation. Sélectionnez le scheme (correspondant à votre application) puis la cible de compilation (appareil actuellement connecté ou un simulateur).
    2. Pour lancer la compilation, cliquez sur l'option de menu "Product .. Clean" puis sur l'option de menu "Product .. Build".
    3. Un compte rendu de compilation apparaît en haut ("Succeeded" ou sinon le nombre de warnings et d'erreurs). Vous pouvez cliquer sur ces symboles pour voir la liste des erreurs/warnings.
    4. Une fois le programme compilé sans erreurs, vous pouvez lancer la simulation (Option "Product .. Run").
      • Si la cible de compilation est le simulateur, l'application est lancée dans la fenêtre du simulateur.
      • Si la cible de compilation est l'appareil connecté, l'application est directement lancée sur l'appareil.
Vous pouvez ensuite tester votre application directement sur votre iPhone ou iPad.
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 28
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire