Tuto - Ma première application Android/iOS

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 cette application, aussi bien sur une plateforme Android que sur une plateforme iOS.

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.

• 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.

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.

Les différents types de tests

WINDEV Mobile permet d'effectuer plusieurs types de tests d'une application Android dans son ensemble.
Il est possible de tester votre application :

• dans le simulateur proposé par WINDEV Mobile.
  
  

  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, etc.).
• dans l'émulateur Android (AVD) fourni avec le SDK.
  
  

  Pour plus de détails, consultez Tester avec l'émulateur Android.
• directement sur le téléphone mobile.
  
  

  Dans ce cas, il est nécessaire de tester l'ensemble de l'application, et pour cela de générer l'application. Nous verrons en détail la génération d'une application Android dans le tuto Déployer une application Android.

Test en mode simulation

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 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.
   

1. Cliquez sur le bouton "x" situé dans le menu au-dessus de la coque du simulateur.
2. L'éditeur de WINDEV Mobile réapparaît.

Les différents tests sous iOS

Pour une application iOS, WINDEV Mobile propose plusieurs types de tests.
Il est possible de tester votre application :

• dans le simulateur proposé par WINDEV Mobile.
  
  

  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, etc.).
• directement sur le téléphone mobile, via l'application WMDev.
  
  

  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.

Test de la fenêtre en mode simulation

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 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.
   
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.

Test de la fenêtre directement sur le matériel

Vous possédez un iPhone ? Maintenant, testons le projet directement sur le périphérique.

• 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.

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").
   
3. L'application mobile se lance sur le périphérique iOS. Comme notre projet contient une seule fenêtre, la fenêtre que nous avons créée s'ouvre et peut être utilisée.

Cette leçon nous a permis de découvrir les différents modes de tests proposés par WINDEV mobile, aussi bien en Android que en iOS.