Eine maßgeschneiderte Native App: Bestellen Sie mit 4D for Mobile

4D v19 R6 und v19 R7 bieten zwei interessante Funktionen für 4D for Mobile. Sitzungen und die Anzeige von Webseiten, die vom 4D Server in Ihrer nativen mobilen Anwendung bereitgestellt werden. Aber haben Sie auch an die Möglichkeiten gedacht, die sich ergeben, wenn Sie beides kombinieren?

Dieser Blogbeitrag zeigt Ihnen eine dieser Möglichkeiten. Wir werden sehen, wie man eine einfache App erstellt, die es mobilen Nutzern ermöglicht, Bestellungen bei ihrer Einkaufszentrale aufzugeben, um ihren Bestand zu konsolidieren:

Shopping Cart HDI

Probieren Sie es mit dem obigen HDI einfach selbst aus 🙂

PROJEKT-EDITOR-SEITE

Mit dieser Demo-App werden wir sehen, wie einfach es ist:

• Hinzufügen von Packungen zu einem Warenkorb mithilfe einer primären Aktion und einer Session-Speicherung
• Visualisierung des Warenkorbs mithilfe einer voreingestellten Aktion zum Öffnen der URL
• Die Möglichkeit, Pakete aus dem Warenkorb zu entfernen

 

Zu diesem Zweck müssen wir zwei Aktionen aus dem Abschnitt Aktion erstellen:

Aktion „In den Warenkorb legen“

Erstellen Sie zunächst eine Aktion „In den Warenkorb legen“, eine einfache Aktion ohne Parameter. Mit dieser Aktion können Sie eine Aktionsanforderung vom mobilen Gerät aus senden und direkt die Datenbankmethode On Mobile App Action mit dem erforderlichen Kontext aufrufen.

Um diese Aktionen zu erstellen, müssen Sie lediglich eine neue Basisaktion erstellen, die Parameter aus der unteren Tabelle der Parameter entfernen und den Bereich „Current entity“ auswählen (da wir ein bestimmtes Produkt zum Warenkorb hinzufügen wollen).

Voreingestellte Aktion „Url öffnen“

Wir müssen eine voreingestellte Aktion „URL öffnen“ mit einem Tabellenbereich erstellen. Geben Sie den 4D Serverpfad in das entsprechende Feld ein. Geben wir zum Beispiel „/cart.shtml“ ein.

In der Datenbankmethode Mobile App Action

Klicken Sie dann auf die Schaltfläche Erstellen, um die Datenbankmethode On Mobile App Action zu erstellen. Dadurch wird automatisch ein Case erstellt, in dem alle Ihre Aktionen bereits eingetragen sind.

Fügen Sie dann etwas Code zu Ihrer Datenbankmethode On Mobile App Action hinzu!

• Zunächst wollen wir prüfen, ob die Produkte, die wir in den Warenkorb legen wollen, noch vorrätig sind.
• Wenn ja, fügen Sie ein Produktobjekt als Collection in den Session-Speicher ein.
• Wenn das Produktobjekt bereits in der Sammlung vorhanden ist, soll die Menge erhöht werden.
• Wenn das Produkt korrekt zum Session-Speicher hinzugefügt wurde, wollen wir den Produktbestand in unserer Datenbank verringern.
• Schließlich fordern wir die App-Daten auf, neu geladen zu werden.

 

#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

Dann wollen wir unseren Einkaufswagen auf einer Webseite anzeigen, die von unserer Stocks-App aus zugänglich ist, und die Möglichkeit bieten, Produkte aus dem Einkaufswagen zu entfernen.

Werfen wir also einen Blick auf unsere Warenkorb-Webseite…

WEBSEITE

Wir müssen einige Dinge implementieren, um unseren Einkaufswagen unseren Bedürfnissen entsprechend darzustellen:

• Abrufen der Session.storage.mobileData-Sammlung und Anzeige eines Artikels pro Tabellenzeile unter Verwendung von 4D-Tags:

<table id="products">
  <tr>
    <th>Produkt</th>
    <th>Menge</th>
    <th>Preis</th>
    <th></th>
  </tr>
    <!--#4DEACH $product in Session.storage.mobileData-->
  <tr>
    <td>
      <!--#4DTEXT $Produkt.Name-->
    </td>
    <td>
      <!--#4DTEXT $Produkt.Menge-->
    </td>
    <td>
      <!--#4DTEXT $Produkt.Preis--><b>$</b>
    </td>
    <td>
      <input type="button" value="Löschen" onclick="RemoveRecord(this)">
    </td>
  </tr>
  <!--#4DENDEACH-->
</table>

• Fügen Sie eine Javascript-Funktion zum Schließen der nativen App-Ansicht aus der Webansicht hinzu und rufen Sie sie beim Klicken auf die Schaltfläche „Schließen“ auf:

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

• Fügen Sie eine Javascript-Funktion hinzu, um eine Tabellenzeile zu entfernen (entfernen Sie ein Produktelement aus der Produktsammlung, die in Session.storage verfügbar ist) :

<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({
          method: "POST",
          url: "4DACTION/deleteMethod",
          data: {
              index: rowJavascript.rowIndex - 1
          }
      });
      request.done(function(resultat) {
        window.location.reload();
      });
    }
</script>

• Schließlich müssen wir eine Projektmethode deleteMethod erstellen und sie in der Funktion RemoveRecord aufrufen, nachdem wir den zu löschenden Index abgerufen haben, der es uns ermöglicht, ein Element aus dem Warenkorb und aus der Sammlung Session.storage.mobileData zu löschen:

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 

Was ist mit Android?

Um die Android-App zu erhalten, müssen Sie wie üblich zum Projekt-Editor zurückkehren, das Android-Ziel auswählen und auf die Schaltfläche Build klicken! Sie erstellen ein einziges 4D Mobile Projekt, um iOS und Android Apps zu erhalten. Erinnern Sie sich?

Hier ist das Endergebnis für Android:

Wie Sie sehen, können Sie mit der Benutzersitzung und den von 4D bereitgestellten Webseiten einige faszinierende Anwendungsfälle abdecken!

Jetzt sind Sie an der Reihe; teilen Sie Ihre Erfahrungen mit uns im Forum! Ich freue mich darauf, Ihr Szenario zu lesen.