Nativní aplikace na míru: Objednávejte pomocí 4D pro mobilní zařízení

4D v19 R6 a v19 R7 přinesly do 4D pro mobilní zařízení dvě zajímavé funkce. Relace a zobrazování webových stránek obsluhovaných serverem 4D v nativní mobilní aplikaci. Přemýšleli jste ale o možnostech, které získáte, když obě tyto funkce zkombinujete?

Tento příspěvek na blogu vám jednu z těchto možností ukáže. Ukážeme si, jak vytvořit jednoduchou aplikaci, která umožní mobilním uživatelům zadávat objednávky do centrálního nákupu a konsolidovat tak své zásoby:

Nákupní košík HDI

Neváhejte a vyzkoušejte si to sami s výše uvedeným HDI 🙂

STRANA EDITORU PROJEKTU

Na této ukázkové aplikaci si ukážeme, jak jednoduché je :

• Přidat balení do košíku pomocí primární akce a úložiště relací
• Vizualizovat košík pomocí přednastavené akce otevřít URL adresu
• Poskytnout možnost odebrat balíčky z košíku

 

K tomu potřebujeme vytvořit dvě akce ze sekce Akce :

Akci Přidat do košíku

Nejprve vytvořte akci „Přidat do košíku„, jednoduchou akci bez parametrů. Tato akce umožní odeslat požadavek na akci z mobilního zařízení a přímo zavolat databázovou metodu On Mobile App Action s potřebným kontextem.

Pro vytvoření těchto akcí stačí vytvořit novou základní akci, odstranit parametry z dolní tabulky parametrů a vybrat obor Aktuální entita (protože chceme do košíku přidat konkrétní produkt).

Přednastavená akce otevřít url

Potřebujeme vytvořit přednastavenou akci otevřít URL s oborem Tabulka. Do vyhrazeného pole zadejte cestu k serveru 4D. Zadejme například „/cart.shtml“.

V databázové metodě akce mobilní aplikace

Poté kliknutím na tlačítko Vytvořit vytvoříme databázovou metodu On Mobile App Action. Tím se automaticky vytvoří Případ se všemi již vyplněnými akcemi.

Poté do své databázové metody On Mobile App Action přidejte kód!

• Nejprve chceme zkontrolovat, zda u produktů, které chceme přidat do košíku, zbývají skladové zásoby.
• Pokud ano, přidáme objekt produktu jako položku kolekce do skladu relace.
• Pokud již objekt produktu v kolekci existuje, chceme zvýšit jeho množství.
• Poté, když byl produkt správně přidán do úložiště Session, chceme snížit skladovou zásobu produktu v naší databázi.
• Nakonec jsme požádali o opětovné načtení dat aplikace.

#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

Poté chceme vizualizovat náš košík na webové stránce přístupné z obrazovky aplikace Stocks a dát možnost odebrat produkty z košíku.

Podívejme se tedy na naši webovou stránku s košíkem…

WEBOVÁ STRÁNKA

Pro zobrazení našeho košíku musíme implementovat několik věcí, které budou vyhovovat našim potřebám :

• Získat kolekci Session.storage.mobileData a zobrazit jednu položku na řádek tabulky pomocí značek 4D:

<table id="products">
  <tr>
    <th>Produkt</th>
    <th>Množství</th>
    <th>Cena</th>
    <th></th>
  </tr>
    <!--#4DEACH $product in Session.storage.mobileData-->
  <tr>
    <td>
      <!--#4DTEXT $product.Name-->
    </td>
    <td>
      <!--#4DTEXT $product.Quantity-->
    </td>
    <td>
      <!--#4DTEXT $product.Price--><b>$</b>
    </td>
    <td>
      <input type="button" value="Smazat" onclick="RemoveRecord(this)">
    </td>
  </tr>
  <!--#4DENDEACH-->
</table>

• Přidejte javascriptovou funkci pro zavření nativního zobrazení aplikace z webového zobrazení a zavolejte ji při kliknutí na tlačítko zavřít :

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

• Přidání javascriptové funkce pro odebrání řádku tabulky (odebrání položky produktu z kolekce produktů dostupné v 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({
          method: "POST",
          url: "4DACTION/deleteMethod",
          data: {
              index: rowJavascript.rowIndex - 1
          }
      });
      request.done(function(resultat) {
        window.location.reload();
      });
    }
</script>

• Nakonec musíme vytvořit metodu projektu deleteMethod a zavolat ji ve funkci RemoveRecord poté, co jsme získali index k odstranění, který nám umožní odstranit prvek z košíku a z kolekce 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 

A co systém Android?

Jako obvykle se pro získání aplikace pro Android stačí vrátit do editoru projektu, vybrat cíl Android a kliknout na tlačítko Build! Pro získání aplikací pro iOS a Android sestavíte jeden jediný projekt 4D mobile. Pamatujete si?

Zde je konečný výsledek v systému Android :

Jak vidíte, použití uživatelské relace i webových stránek obsluhovaných aplikací 4D může pokrýt několik fascinujících případů použití!

Teď je řada na vás; podělte se s námi na fóru o ty vaše! Těšíme se na váš scénář.