Uma aplicação nativa feita à medida: Colocar Encomendas com 4D para telemóvel

4D v19 R6 e v19 R7 trouxeram duas características interessantes para 4D para Mobile. Sessões e exibição de páginas web servidas pelo servidor 4D na sua aplicação móvel nativa. Mas pensou nas possibilidades que obtém ao combinar as duas?

Este post de blogue irá mostrar-lhe uma dessas possibilidades. Vamos ver como construir uma aplicação simples que permita aos utilizadores móveis fazer encomendas com a sua central de compras para consolidar o seu stock:

HDI do Carrinho de Compras

Sinta-se à vontade para o experimentar com o HDI acima 🙂

LADO DO EDITOR DO PROJECTO

Com esta aplicação de demonstração, vamos ver como é simples :

• Adicionar pacotes a um carrinho usando uma acção primária e armazenamento da sessão
• Visualizar o carrinho utilizando uma acção URL aberta pré-definida
• Dar a capacidade de remover embalagens do carrinho

 

Para isso, precisamos de criar duas acções a partir da secção Acção :

Acção Adicionar ao carrinho de compras

Primeiro, criar uma acção “adicionar ao carrinho”, uma acção simples sem quaisquer parâmetros. Esta acção permitir-lhe-á enviar um pedido de acção a partir do dispositivo móvel e ligar directamente para o método de base de dados On Mobile App Action com o contexto necessário.

Para criar essas acções, basta criar uma nova acção básica, remover parâmetros da tabela inferior de parâmetros, e seleccionar o âmbito da entidade actual (pois queremos adicionar um produto específico ao carrinho).

abrir acção pré-definida da url

Precisamos de criar uma acção pré-definida de URL aberta com um âmbito de tabela. Introduza o caminho do servidor 4D no campo dedicado. Vamos introduzir “/cart.shtml”, por exemplo.

No método de base de dados da Acção de Aplicações Móveis

Depois clique no botão Criar para criar o método de base de dados On Mobile App Action. Isto irá criar automaticamente um Caso com todas as suas acções já preenchidas.

Depois, adicione algum código ao seu método de base de dados On Mobile App Action!

• Primeiro, queremos verificar se existe stock para os produtos que queremos adicionar ao carrinho.
• Se assim for, adicionar um objecto de produto como um item de colecção no armazenamento da Sessão.
• Se o objecto do produto já existir na colecção, queremos aumentar a quantidade.
• Depois, quando o produto tiver sido correctamente adicionado ao armazenamento da Sessão, queremos diminuir o stock do produto na nossa base de dados.
• Finalmente, pedimos que os dados da aplicação fossem carregados de novo.

#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

Depois queremos visualizar o nosso carrinho numa página web acessível a partir do nosso ecrã de aplicação de Stocks e dar a possibilidade de remover produtos do carrinho.

Portanto, vamos dar uma vista de olhos à nossa página web do carrinho de compras.

PÁGINA WEB

Precisamos de implementar várias coisas para exibir o nosso carrinho de acordo com as nossas necessidades :

• Obter a colecção Session.storage.mobileData e exibir um item por linha de tabela usando etiquetas 4D:

<table id="produtos">
  <tr>
    <o>Produto</th>
    <a>Quantidade</th>
    <o>Preço</th>
    <th></th>
  </tr>
    <!--#4DEACH $produto em Session.storage.mobileData-->
  <tr>
    <td>
      <!--#4DTEXT $product.Name-->
    </td>
    <td>
      <!--#4DTEXT $produto.Quantidade-->
    </td>
    <td>
      <!--#4DTEXT $product.Price--><b>$</b>
    </td>
    <td>
      <input type="button" value="Delete" onclick="RemoveRecord(this)">
    </td>
  </tr>
  <!--#4DENDEACH-->
</tabela>

• Adicione uma função javascript para fechar a vista da aplicação nativa a partir da visualização da web e chame-a no botão fechar clique :

<script>
    função fecharFunc() {
      $4d.mobile.dismiss();
    }
</script>

• Adicionar uma função javascript para remover uma linha de tabela (remover um item da colecção de produtos disponível em Sessão. armazenamento) :

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

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

• Finalmente, precisamos de criar um método de projecto deleteMethod e chamá-lo na função RemoveRecord depois de ter recuperado o índice para apagar que nos permitirá apagar um elemento do carrinho e da colecção 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)
Utilização final 
Terminar se 

E o Android?

Como sempre, para obter a aplicação Android, basta voltar ao editor do projecto, seleccionar o alvo Android e clicar no botão Construir! Constrói um único projecto móvel 4D para obter aplicações iOS e Android. Lembra-se?

Aqui está o resultado final sobre o Android :

Como pode ver, utilizando tanto a sessão do utilizador como as páginas web servidas pelo 4D pode cobrir alguns casos de utilização fascinantes!

É a sua vez; partilhe a sua connosco no fórum! Ansioso por ler o seu cenário.