Una aplicación nativa hecha a medida: Hacer pedidos con 4D para móviles

4D v19 R6 y v19 R7 trajeron dos funcionalidades interesantes a 4D for Mobile. Sesiones y mostrar páginas web servidas por el servidor 4D en su aplicación móvil nativa. Pero, ¿ha pensado en las posibilidades que se obtienen al combinar ambas?

Este blog post le mostrará una de estas posibilidades. Vamos a ver cómo construir una aplicación sencilla que permita a los usuarios móviles realizar pedidos a su central de compras para consolidar su stock:

Carrito de la compra IDH

No dudes en probarlo tú mismo con el IDH anterior 🙂

LADO DEL EDITOR DE PROYECTOS

Con esta aplicación de demostración, vamos a ver lo sencillo que es :

• Añadir paquetes a un carrito utilizando una acción primaria y un almacenamiento de Sesión
• Visualizar el carrito usando una acción preestablecida de abrir URL
• Dar la posibilidad de eliminar paquetes del carrito

 

Para ello, necesitamos crear dos acciones desde la sección Acción :

Acción Añadir al carro

En primer lugar, cree una acción «añadir al carro «, una acción simple sin ningún parámetro. Esta acción le permitirá enviar una solicitud de acción desde el dispositivo móvil y llamar directamente al método de base de datos On Mobile App Action con el contexto necesario.

Para crear estas acciones, sólo tienes que crear una nueva acción básica, eliminar los parámetros de la tabla inferior de parámetros y seleccionar el ámbito de entidad Actual (ya que queremos añadir un producto específico al carrito).

acción preestablecida de abrir url

Necesitamos crear una acción preestablecida de abrir URL con un ámbito de Tabla. Introduzca la ruta del servidor 4D en el campo dedicado. Introduzcamos «/cart.shtml» por ejemplo.

En el método de base de datos Mobile App Action

Luego haga clic en el botón Create para crear el método de base de datos On Mobile App Action. Esto creará automáticamente un Caso con todas sus acciones ya rellenadas.

Luego, agregue algo de código a su método de base de datos On Mobile App Action.

• Primero, queremos comprobar si quedan existencias de los productos que queremos añadir al carrito.
• Si es así, añade un objeto producto como elemento de la colección en el almacenamiento de la Sesión.
• Si el objeto producto ya existe en la colección, queremos incrementar la cantidad.
• A continuación, cuando el producto se haya añadido correctamente al almacenamiento de la Sesión, queremos disminuir la cantidad de productos en nuestra base de datos.
• Finalmente, pedimos que se recarguen los datos de la aplicación.

#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

A continuación queremos visualizar nuestro carrito en una página web accesible desde la pantalla de nuestra aplicación Stocks y dar la posibilidad de eliminar productos del carrito.

Echemos un vistazo a la página web de nuestro carrito…

PÁGINA WEB

Tenemos que implementar varias cosas para mostrar nuestro carrito para satisfacer nuestras necesidades :

• Obtener la colección Session.storage.mobileData y mostrar un artículo por fila de la tabla utilizando etiquetas 4D:

<table id="products">
  <tr>
    <th>Producto</th>
    <th>Cantidad</th>
    <th>Precio</th>
    <th></th>
  </tr>
    <!--#4DEACH $producto en Session.storage.mobileData-->
  <tr>
    <td>
      <!--#4DTEXT $producto.Nombre-->
    </td>
    <td>
      <!--#4DTEXT $producto.Cantidad-->
    </td>
    <td>
      <!--#4DTEXT $producto.Precio--><b>$</b>
    </td>
    <td>
      <input type="button" value="Eliminar" onclick="EliminarRegistro(this)">
    </td>
  </tr>
  ¡<!
</tabla>

• Añadir una función javascript para cerrar la vista de la app nativa desde la webview y llamarla al pulsar el botón cerrar :

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

• Añadir una función javascript para eliminar una fila de la tabla (eliminar un elemento de producto de la colección de productos disponibles en el almacenamiento Session.) :

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

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

• Por último, necesitamos crear un método de proyecto deleteMethod y llamarlo en la función RemoveRecord después de haber recuperado el índice a borrar que nos permitirá eliminar un elemento del carrito y de la colección Session.storage.mobileData:

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

WEB GET VARIABLES($var1; $var2)
$indexToRemove:=Buscar en array($var1; "index")

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

¿Qué pasa con Android?

¡Como de costumbre, para obtener la aplicación Android, sólo tienes que volver al editor de proyectos, seleccionar el objetivo Android y hacer clic en el botón Build! Construye un único proyecto 4D mobile para obtener las aplicaciones iOS y Android. ¿Te acuerdas?

Aquí está el resultado final en Android :

Como puede ver, ¡utilizar tanto la sesión de usuario como las páginas web servidas por 4D puede cubrir algunos casos de uso fascinantes!

Es su turno; ¡comparta el suyo con nosotros en el foro! Esperamos leer su escenario.