Tuto - Développement d'une application Android et iOS

Exemple pratique

Avertissement
Cette leçon est basée sur l'exemple WM Gestion Produits, manipulé dans la leçon 1. Pour suivre cette leçon, vous devez avoir effectué les manipulations des leçons précédentes.

1. Sous le volet "Projet", dans le groupe "Projet", déroulez "Importer" et sélectionnez "Un Webservice".
2. L'assistant d'importation se lance. Passez à l'étape suivante.
3. Indiquez l'adresse à laquelle la description WSDL du Webservice doit être importée :
   
   https://exemples.webdev.info/WSAUTOFORMATIONV2_WEB/awws/WSAutoformationV2.awws?wsdl
   
   Rappel : Ce Webservice permet d'interroger une base fournisseur pour vérifier la disponibilité (stock) d'un produit à partir de sa référence.
   
4. Passez à l'étape suivante. L'importation du Webservice est réalisée.
   
5. Validez la fenêtre d'information. Le Webservice importé est présent dans le dossier "Webservices importés" du volet "Explorateur de projet".
6. Dans le volet "Explorateur de projet", déroulez le dossier "Webservices importés".

Arrêtons-nous un instant sur les informations affichées dans le volet "Explorateur de projet" :

La structure est constituée de :

• le nom du Webservice (WSAutoformationV2 dans cet exemple),
• le nom de chaque fonction (ProduitEnStock dans cet exemple).

Pour connaître la syntaxe d'appel du Webservice, il suffit de double-cliquer sur le nom de la fonction dans le volet "Explorateur de projet". L'éditeur de code affiche la description de la fonction, avec le prototype de l'appel de la fonction :

Appel au Webservice

1. Ouvrez sous l'éditeur la fenêtre interne "FI_Produit" (double-cliquez sur son nom dans le volet "Explorateur de projet" par exemple).
2. Diminuez la largeur du champ "Réappro".
3. Supprimez le champ "Quantité".
4. Ajoutez un champ Bouton :
   • Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur .
   • Cliquez dans la fenêtre à côté du champ "Réappro.".
   • Le champ est automatiquement créé.
5. Modifiez les caractéristiques du champ (option "Description" du menu contextuel). Ce champ a pour nom "BTN_Stock" et pour libellé "Stock".
   
6. Affichez les événements associés au champ (option "Code" du menu contextuel).
7. Dans l'événement "Clic sur BTN_Stock", saisissez le code WLangage suivant :
   
   // Affiche la réponse du Webservice SOAP
   InfoConstruit("Nombre de produits ""%1"" en stock : %2", SAI_Référence, ...
   ProduitEnStock(SAI_Référence))
   
   Examinons ce code :
   • La fonction du Webservice ProduitEnStock est appelée. Ce code utilise le prototype de la fonction que nous avons précédemment affiché dans l'éditeur de code.
   • La réponse est mise en forme et affichée.
8. Fermez l'éditeur de code et enregistrez la fenêtre ( ou Ctrl + S).
9. Fermez la fenêtre interne "FI_Produit".

Test du fonctionnement du Webservice

1. Ouvrez la fenêtre FEN_Avancé_LISTE_Produits (via la combiaison CTRL + E par exemple).
2. Lancez le test de la fenêtre ( parmi les boutons d'accès rapide).
3. Double-cliquez sur un produit : la fiche produit s'affiche.
4. Cliquez sur "Stock".
   
5. Validez la fenêtre d'information et fermez le simulateur.

Appel du Webservice REST

1. Retournez sous l'éditeur dans le code du champ Bouton BTN_Stock.
2. Passez le code existant en commentaires (sélectionnez les lignes de code et utilisez la combinaison de touches Ctrl + //).
3. Saisissez le code suivant :
   
   // Affiche la réponse du Webservice REST
   h est un httpRequête
   h.Méthode = httpGet
   h.URL = "https://exemples.webdev.info/produit/" + SAI_Référence
   h.ContentType = "application/json"
   
   r est un httpRéponse = RESTEnvoie(h)
   Contenu est une chaîne ANSI
   
   SI r.CodeEtat = 200 ALORS // Requête traitée avec succès
   Contenu = r.Contenu
   Info(Contenu)
   SINON
   Info("Une erreur est survenue " +  ErreurInfo() + r.CodeEtat + r.DescriptionCodeEtat)
   FIN
   
   Ce code permet de :
   • Déclarer une variable de type httpRequête. Cette variable permet de définir les paramètres de la requête à effectuer pour interroger le Webservice REST. Les propriétés de cette variable sont :
     • La méthode utilisée : GET dans notre cas.
     • L'URL d'appel du Webservice : c'est l'URL que nous venons de voir. Dans notre cas, la référence du produit correspond à la valeur du champ SAI_Référence.
     • Le type du contenu du message HTTP à envoyer au serveur. Dans notre cas, le message est en JSON.
   • Envoyer la requête au serveur et récupérer la réponse grâce à la fonction RESTEnvoie. La réponse est une variable de type restRéponse.
   • Mettre en forme la réponse.
4. Fermez l'éditeur de code et enregistrez la fenêtre ( ou Ctrl + S).

Test de l'appel au Webservice REST

1. Ouvrez si nécessaire la fenêtre FEN_Avancé_LISTE_Produits (via la combiaison CTRL + E par exemple).
2. Lancez le test de la fenêtre ( parmi les boutons d'accès rapide).
3. Double-cliquez sur un produit : la fiche produit s'affiche.
4. Cliquez sur "Stock".
5. Validez la fenêtre d'information et fermez le simulateur.

Projet corrigé
Vous voulez vérifier le résultat de vos manipulations ? Un projet corrigé est disponible. Ce projet contient les différentes fenêtres et états créés et manipulés dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Développement d'une application Android/iOS", double-cliquez sur "Gestion de produits Android/iOS - Corrigé".

• Notification Push,
• Panel des appareils,
• etc.