テーラーメイドのネイティブアプリ。モバイル版4Dで注文する

4D v19 R6とv19 R7は、4D for Mobileに2つの興味深い機能をもたらしました。セッションと、4Dサーバーが提供するウェブページをあなたのネイティブモバイルアプリで表示することです。しかし、この2つを組み合わせたときに得られる可能性について考えたことがありますか？

このブログ記事では、その可能性の1つを紹介します。モバイルユーザーが中央購買部に発注し、在庫を一元管理できるようなシンプルなアプリの構築方法を紹介します。

ショッピングカートHDI

上記のHDIを使用して、ご自身で自由に試してみてください 🙂

プロジェクト・エディター側

このデモ・アプリケーションでは、.NET Frameworkを使用することで、以下のことが簡単にできることを確認します。

プライマリーアクションと セッションストレージを使用して、パックをカートに追加する。
プリセットのopen URLアクションを使用してカートを可視化する。
カートからパッケージを削除する機能を提供する

そのためには、Actionセクションから2つのアクションを作成する必要があります。

カートに入れるアクション

まず、 「カートに入れる」アクションを作成します。これはパラメータを持たないシンプルなアクションです。このアクションによって、モバイルデバイスからアクションリクエストを送信し、必要なコンテキストを持つOn Mobile App Actionデータベースメソッドを直接呼び出すことができます。

これらのアクションを作成するには、新しい基本アクションを作成し、パラメータボトムテーブルからパラメータを削除し、Currentエンティティスコープを選択するだけです（特定の製品をカートに追加したいため）。

URLを開くプリセットアクション

テーブルスコープを持つopen URLプリセットアクションを作成する必要があります。専用フィールドに4Dサーバーのパスを入力します。例えば、”/cart.shtml “と入力しましょう。

Mobile App Actionのデータベースメソッドで

次に、「Create」ボタンをクリックし、「On Mobile App Action」データベースメソッドを作成します。これで、すべてのアクションがすでに記入されたCaseが自動的に作成されます。

次に、On Mobile App Actionデータベースメソッドにいくつかのコードを追加します。

まず、カートに入れたい商品の在庫が残っているかどうかを確認します。
もしあれば、Sessionストレージにコレクションアイテムとして商品オブジェクトを追加します。
商品オブジェクトがすでにコレクションに存在する場合は、数量を増加させたいと思います。
そして、商品がSessionストレージに正しく追加されたら、データベース内の商品在庫をデクリメントしたいと思います。
最後に、アプリのデータを再読み込みするように依頼します。

#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

次に、Stocksアプリの画面からアクセスできるWebページでカートを可視化し、カートから商品を削除する機能を提供したいと思います。

では、カートのWebページを見てみましょう。

ウェブページ

カートを表示するために、いくつかの実装が必要です。

Session.storage.mobileDataコレクションを取得し、4Dタグを使用してテーブルの行ごとに1つのアイテムを表示します。

<table id="products">
  <tr>
    <th>製品</th>。
    <th>数量</th>。
    <th>価格</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></b> </td> <!
    </td> <!
    <td
      <input type="button" value="Delete "onclick="RemoveRecord(this)">。
    </td
  </tr> <td
  <!--#4dendeach-->のように。
</table>のようになります。

Webビューからネイティブアプリビューを閉じるためのjavascript関数を追加し、閉じるボタンクリック時に呼び出します。

<script>
    function closeFunc() {
      4d.mobile.dismiss()を実行します。
    }
</script>になります。

テーブルの行を削除する（Session.storageで利用可能な商品コレクションから商品アイテムを削除する）ためのjavascript関数を追加します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>。
<script type="text/javascript"> <script type="text/javascript"> <script>は、以下のようになります。
    関数RemoveRecord(element) {
      var rowJavascript = element.parentNode.parentNode。
      var rowjQuery = $(element).closest("tr");

      var request = $.ajax({
          メソッド"POST",
          url:"4DACTION/deleteMethod",
          データ{
              index: rowJavascript.rowIndex - 1
          }
      });
      request.done(function(resultat) {)
        window.location.reload()を実行します。
      });
    }
</script>

最後に、deleteMethodプロジェクトメソッドを作成し、RemoveRecord関数の中で、カートや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

Androidの場合はどうでしょうか？

いつものように、Androidアプリを取得するには、プロジェクトエディタに戻って、Androidターゲットを選択し、ビルドボタンをクリックするだけです！4Dモバイルプロジェクトを1つビルドします。iOSとAndroidのアプリを取得するために、1つの4Dモバイルプロジェクトを構築します。覚えていますか？

これが、Androidの最終結果です。

このように、ユーザーセッションと4Dが提供するウェブページの両方を使用することで、いくつかの魅力的なユースケースをカバーすることができます。

次は、あなたの番です。あなたのシナリオをフォーラムで共有してください。あなたのシナリオを読むのが楽しみです。

Discuss

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