Une application native sur mesure : Passez vos commandes avec 4D pour mobile

4D v19 R6 et v19 R7 ont apporté deux fonctionnalités intéressantes à 4D for Mobile. Les sessions et l’affichage des pages web servies par le serveur 4D dans votre application mobile native. Mais avez-vous pensé aux possibilités que vous obtenez en combinant les deux ?

Cet article va vous montrer l’une de ces possibilités. Nous allons voir comment construire une application simple qui permet aux utilisateurs mobiles de passer des commandes à leur centrale d’achat pour consolider leur stock:

Panier d’achat HDI

N’hésitez pas à l’essayer vous-même avec le HDI ci-dessus 🙂

CÔTÉ ÉDITEUR DE PROJET

Avec cette application de démonstration, nous allons voir à quel point il est simple de :

• Ajouter des packs à un panier à l’aide d’une action primaire et d’un stockage Session.
• Visualiser le panier à l’aide d’une action URL ouverte prédéfinie.
• Donner la possibilité de retirer des paquets du panier

 

Pour cela, nous devons créer deux actions dans la section Action :

Action « Ajouter au panier »

Tout d’abord, créez une action « Ajouter au panier », une action simple sans aucun paramètre. Cette action vous permettra d’envoyer une requête d’action depuis le périphérique mobile et d’appeler directement la méthode de la base de données On Mobile App Action avec le contexte nécessaire.

Pour créer ces actions, il suffit de créer une nouvelle action de base, de supprimer les paramètres du tableau de fond des paramètres, et de sélectionner la portée de l’entité courante (car nous voulons ajouter un produit spécifique au panier).

action « preset open url »

Nous devons créer une action prédéfinie d’ouverture d’URL avec une étendue de Tableau. Entrez le chemin du serveur 4D dans le champ dédié. Entrons par exemple « /cart.shtml ».

Sur la méthode de base de données Mobile App Action

Cliquez ensuite sur le bouton Create pour créer la méthode de base de données On Mobile App Action. Cela créera automatiquement un cas avec toutes vos actions déjà remplies.

Ensuite, ajoutez du code à votre méthode de base de données On Mobile App Action !

• Tout d’abord, nous voulons vérifier s’il reste des stocks pour les produits que nous voulons ajouter au panier.
• Si c’est le cas, ajoutez un objet produit comme élément de collection dans le stockage de la session.
• Si l’objet produit existe déjà dans la collection, nous voulons incrémenter la quantité.
• Ensuite, lorsque le produit a été correctement ajouté au stockage de la session, nous voulons décrémenter le stock de produits dans notre base de données.
• Enfin, nous demandons à ce que les données de l’application soient rechargées.

#DECLARE($request : Object) : Object
var $productExist : Boolean
var $product; $response; $status : Object
var $mobileData : Collection
var $entity : 4D.Entity
$response:=New object
$action:=MobileAppServer.Action.new($request)
Case of 
 : ($request.action="addToCart")  
  If (Session.storage.mobileData=Null)   
   $mobileData:=New shared collection   
   Use (Session.storage)    
    Session.storage.mobileData:=$mobileData    
   End use    
  Else    
   $mobileData:=Session.storage.mobileData   
  End if   
  $entity:=ds[$request.context.dataClass]\
   .query("ID = "+String($request.context.entity.primaryKey))\
   .first()  
  // CHECK IF STOCK > 0
  If ($entity.Stock>0)   
   If ($mobileData.length>0)    
    $product:=$mobileData.query("Name = :1"; $entity.Name).pop()
    $productExist:=$product#Null    
    If ($productExist)     
     Use ($mobileData)      
      $product.Quantity:=$product.Quantity+1
      $product.Price:=($entity.Price)*($product.Quantity)      
     End use      
    End if 
   End if    
   If (Not($productExist))    
    $product:=New shared object(\
     "Name"; $entity.Name; \
     "Picture"; $entity.Picture; \
     "Quantity"; 1; \
     "Price"; $entity.Price)    
    Use ($mobileData)     
     $mobileData.push($product)     
    End use 
   End if    
   $entity.Stock:=$entity.Stock-1
   $status:=$entity.save()   
   If ($status.success)    
    $response.success:=True
    $response.dataSynchro:=True
    $response.statusText:="Well done 👍\n"\
    +$entity.Name+" has been added to your cart!"    
   Else     
    $response.statusText:="Bad luck 🫤\n"\
    +$entity.Name+" has not been added to your cart!"    
   End if    
  Else    
   // STOCK = 0
   $response.dataSynchro:=True
   $response.statusText:="Bad luck 👎\n"\
   +"No more stock available for this product!"   
  End if   
 Else 
  // Unknown action
  $response.statusText:="Unknown action: "+$request.action
End case 
return $response

Nous voulons ensuite visualiser notre panier sur une page web accessible depuis l’écran de notre application Stocks et donner la possibilité de retirer des produits du panier.

Jetons donc un coup d’oeil à la page web de notre panier…

PAGE WEB

Nous devons implémenter plusieurs choses pour afficher notre panier en fonction de nos besoins :

• Récupérer la collection Session.storage.mobileData et afficher un article par ligne de table en utilisant les balises 4D :

<table id="produits">
  <tr>
    <th>Produit</th>
    <th>Quantité</th>
    <th>Prix</th>
    <th></th>
  </tr>
    <!--#4DEACH $produit dans Session.storage.mobileData-->
  <tr>
    <td>
      <!--#4DTEXT $produit.Nom-->
    </td>
    <td>
      <!--#4DTEXT $produit.Quantité-->
    </td>
    <td>
      <!--#4DTEXT $product.Price--><b>$</b>
    </td>
    <td>
      <input type="button" value="Delete" onclick="RemoveRecord(this)">
    </td>
  </tr>
  <!--#4DENDEACH-->
</table>

• Ajouter une fonction javascript pour fermer la vue native app depuis la webview et l’appeler sur le clic du bouton de fermeture :

<script>
    function closeFunc() {
      $4d.mobile.dismiss() ;
    }
</script>

• Ajouter une fonction javascript pour supprimer une ligne du tableau (supprimer un article de produit de la collection de produits disponible dans Session. storage) :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    function RemoveRecord(element) {
      var rowJavascript = element.parentNode.parentNode ;
      var rowjQuery = $(element).closest("tr") ;

      var request = $.ajax({
          méthode : "POST",
          url : "4DACTION/deleteMethod",
          data : {
              index : rowJavascript.rowIndex - 1
          }
      }) ;
      request.done(function(resultat) {
        window.location.reload() ;
      }) ;
    }
</script>

• Enfin, nous devons créer une méthode de projet deleteMethod et l’appeler dans la fonction RemoveRecord après avoir récupéré l’index à supprimer qui nous permettra de supprimer un élément du panier et de la collection Session.storage.mobileData :

ARRAY TEXT($var1 ; 0)
ARRAY TEXT($var2 ; 0)

WEB GET VARIABLES($var1 ; $var2)
$indexToRemove:=Find in array($var1 ; "index")

If ($indexToRemove>0)
$productIndex:=Num($var2{$indexToRemove})
	
Use (Session.storage.mobileData)
$mobileData:=Session.storage.mobileData
$mobileData.remove($productIndex)
End use 
End if 

Et pour Android ?

Comme d’habitude, pour obtenir l’application Android, il suffit de retourner dans l’éditeur de projet, de sélectionner la cible Android et de cliquer sur le bouton Build ! Vous construisez un seul projet mobile 4D pour obtenir les applications iOS et Android. Vous vous souvenez?

Voici le résultat final sur Android :

Comme vous pouvez le constater, l’utilisation à la fois de la session utilisateur et des pages web servies par 4D peut couvrir des cas d’utilisation fascinants !

C’est votre tour ; partagez le vôtre avec nous sur le forum ! Nous avons hâte de lire votre scénario.