Un’applicazione nativa su misura: Effettuare ordini con 4D per mobile

4D v19 R6 e v19 R7 hanno introdotto due interessanti funzionalità in 4D for Mobile. Le sessioni e la visualizzazione di pagine web servite dal server 4D nella vostra applicazione mobile nativa. Ma avete pensato alle possibilità che si ottengono combinandole entrambe?

Questo post vi mostrerà una di queste possibilità. Vedremo come costruire una semplice applicazione che consenta agli utenti mobili di effettuare ordini alla propria centrale d’acquisto per consolidare le scorte:

Carrello della spesa HDI

Sentitevi liberi di provarla voi stessi con l’HDI qui sopra 🙂

LATO EDITOR DEL PROGETTO

Con questa applicazione dimostrativa, vedremo quanto sia semplice :

Aggiungere pacchetti a un carrello utilizzando un’ azione primaria e la memorizzazione di sessione
Visualizzare il carrello utilizzando un’azione preimpostata di apertura dell’URL
Dare la possibilità di rimuovere i pacchetti dal carrello

Per questo, dobbiamo creare due azioni dalla sezione Azione:

Azione Aggiungi al carrello

Per prima cosa, creare un’ azione “Aggiungi al carrello”, un’azione semplice senza alcun parametro. Questa azione consentirà di inviare una richiesta di azione dal dispositivo mobile e di chiamare direttamente il metodo del database On Mobile App Action con il contesto necessario.

Per creare queste azioni, basta creare una nuova azione di base, rimuovere i parametri dalla tabella inferiore dei parametri e selezionare l’ambito dell’entità Current (poiché vogliamo aggiungere un prodotto specifico al carrello).

azione preimpostata open url

Dobbiamo creare un’azione preimpostata Open URL con uno scope Table. Inserire il percorso del server 4D nel campo dedicato. Inseriamo ad esempio “/cart.shtml”.

Sul metodo di database Mobile App Action

Fare quindi clic sul pulsante Crea per creare il metodo di database On Mobile App Action. Verrà creato automaticamente un Caso con tutte le azioni già compilate.

Quindi, aggiungere un po’ di codice al metodo di database On Mobile App Action!

Per prima cosa, vogliamo verificare se sono rimaste scorte per i prodotti che vogliamo aggiungere al carrello.
In caso affermativo, aggiungiamo un oggetto prodotto come elemento della collezione nella memoria della sessione.
Se l’oggetto prodotto esiste già nella collezione, vogliamo incrementare la quantità.
Poi, quando il prodotto è stato aggiunto correttamente alla memoria di sessione, vogliamo diminuire lo stock del prodotto nel nostro database.
Infine, chiediamo di ricaricare i dati dell’applicazione.

#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

Vogliamo quindi visualizzare il nostro carrello su una pagina web accessibile dalla schermata dell’applicazione Stocks e dare la possibilità di rimuovere i prodotti dal carrello.

Diamo quindi un’occhiata alla pagina web del nostro carrello…

PAGINA WEB

Dobbiamo implementare diverse cose per visualizzare il nostro carrello in base alle nostre esigenze:

Ottenere la raccolta Session.storage.mobileData e visualizzare un articolo per riga di tabella utilizzando i tag 4D:

<table id="prodotti">
  <tr>
    <th>Prodotto</th>
    <th>Quantità</th>
    <th>Prezzo</th>
    <th></th>
  </tr>
    <!--#4DEACH $product in Session.storage.mobileData-->
  <tr>
    <td>
      <!--#4DTEXT $prodotto.nome-->
    </td>
    <td>
      <!--#4DTEXT $prodotto.Quantità-->
    </td>
    <td>
      <!--#4DTEXT $prodotto.Prezzo--><b>$</b>
    </td>
    <td>
      <input type="button" value="Delete" onclick="RemoveRecord(this)">.
    </td>
  </tr>
  <!--#4DENDEACH-->
</table>

Aggiungere una funzione javascript per chiudere la vista dell’applicazione nativa dalla webview e richiamarla al clic del pulsante di chiusura:

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

Aggiungere una funzione javascript per rimuovere una riga di tabella (rimuovere un prodotto dalla collezione di prodotti disponibile in Session. storage):

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

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

Infine, dobbiamo creare un metodo di progetto deleteMethod e chiamarlo nella funzione RemoveRecord dopo aver recuperato l’indice da cancellare che ci permetterà di eliminare un elemento dal carrello e dalla collezione Session.storage.mobileData:

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

WEB GET VARIABLES($var1; $var2)
$indexToRemove:=Trova in array($var1; "indice")

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

E per quanto riguarda Android?

Come al solito, per ottenere l’applicazione Android, basta tornare all’editor del progetto, selezionare il target Android e fare clic sul pulsante Build! Si costruisce un unico progetto 4D mobile per ottenere le applicazioni iOS e Android. Ricordate?

Ecco il risultato finale su Android:

Come potete vedere, l’utilizzo sia della sessione utente che delle pagine web servite da 4D può coprire alcuni casi d’uso affascinanti!

È il vostro turno; condividete il vostro sul forum! Non vediamo l’ora di leggere il vostro scenario.

Discuss

Tags 4D for Android, 4D for iOS, Mobility, Tutorial