0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[ODC]Mobile向けの新しいOffline data synchronizationを試してみる

Posted at

Mobile Appの同期(サーバー・クライアント間でのEntityデータの同期)に変更があったので、確認していく。

Product Releases and Updates

Built-in Offline Data Sync on ODC

要するに何が変わったのか?

  • Mobile AppのSystem EventにOn Syncが追加された
  • それに伴い、OutSystems UIの要素を使わずに同期実装されるようになった
  • 同時に、UI側でもEventが追加された(OnSyncStart, OnSyncComplete and OnSyncError)

環境情報

ODC Studio (Version 1.5.38)
OutSystems 11以来のオフラインデータ同期の仕組みの知識を前提とする。

公式ドキュメント

Offline data synchronization in mobile apps
Implement offline sync

以下、このドキュメントを読みながら動作確認してみる。

要するに何をする機能か

モバイルアプリがネットワーク接続がない環境でも動作できるように、

  1. クライアント側にEntityを定義する(Local Storageの下にEntityを作成する)
  2. サーバー側のEntityと↑のクライアント側Entityを同期するロジックを作成する
  3. (ここが新機能)新しいSystem EventのOn Syncでこのロジックを呼ぶ

なお、クライアント側EntityはネイティブビルドではSQLite、PWAではIndexedDBに保存されるが、我々は意識する必要がないはず。

Implement offline syncの手順を試してみる

Read-Onlyの同期パターンを例に実装していくドキュメントになっている。

Acceleratorを使って基本の実装パターンを自動作成

サーバーサイドのEntityをデータ付きで用意する

Read-Onlyのパターンを作る(サーバー側を更新しなくて良い)ので、OutSystemsがデフォルトで用意しているOutSystemsSampleDataのEntityを利用する。
OutSystemsSampleDataのSample_Employeeへの参照を追加。

image.png

Add Entity from Databaseコマンドで対応するLocalのEntityを作る

Dataタブ > Local Strageを右クリックし、「Add Entity from Database...」を選択。
image.png

Select EntityダイアログでEntity名の一部を入力して、インポート元となるサーバー側Entityを選択。
image.png

Local側に必要なAttributeのみ選択してAddボタンをクリック。全Attributeを選択すすると、静的解析に引っ掛かる(たしかNon-optimized Local Storageの指摘が出る)ので注意。
image.png

出来上がったLocalのEntity(LocalSample_Employee) 。
image.png

Acceleratorで同期ロジックを自動生成

LocalSample_Employeeを右クリック→「Create Action to Sync Data」を選択して同期ロジックを自動生成する(Add Entity from Database...で作ったLocalのEntityでないとコマンドが表示されないようだ)。
image.png

自動生成されるのは、Client ActionとServer Actionが1つずつ。それぞれOfflineDataSyncというフォルダに追加される。
サーバー側Entityの内容で、ローカル側Entityを洗い替えする実装になっている。

Server Action(SyncSample_Employees)の実装。
image.png
先頭でApp内のRoleを持っているかチェック→対象Entityを全件取得してOutput Parameterにセット、というシンプルな実装。

Client Actionの実装。
image.png
セットのServer Actionを呼んで、その内容でローカル側Entityを洗い替えしている(DeleteAllで全件削除→CreateOrUpdateSomeで全件登録)。

新しいSystem EventのOn SyncのHandlerを作成する

Logicタブ > Client Actionsを右クリックし、Add System Event > On Syncと選択し、On Sync Event Handlerを追加。これは、同期時に発生するイベント。
image.png

このEventは、Client Actionで明示的にTrigger Eventで発生させるか、事前にAppのMobileタブのプロパティで設定したタイミングで発生する。

Handlerでは、用意しておいたClient Action(今回はAcceleratorで生成されたSyncLocalSample_Employees)を呼ぶ。
ここでは呼び出されたことがわかりやすいように、Client Action実行直後にMessageを表示している。
image.png

今回は1EntityのみかつサーバーからクライアントへのRead-Onlyのロジックであるためこのようにシンプルなロジックになった。が、本来は複数のEntityの同期処理がここで呼ばれ、かつクライアントで行われた変更のサーバーへの反映も行うため本来ならもう少し複雑なロジックになる。

On Sync EventをTrigger

On Syncを明示的に発生させるパターンで試してみる。
適当なScreenにButtonを配置し、そのOn ClickにTrigger Eventを配置。
EventプロパティはOnSyncにする。
image.png

なお、試してみたらログイン中でないと同期はできないようだ。
ログインしたユーザーで試せば、無事に同期処理が行われた。

以前の同期との違い

以前は、OutSystems 11から引き継いだ仕組みで、OutSystems UIの機能を使って同期していた。
以前作成したMobile Appでまだ同期の仕組みが残っているものがあったので、参照ダイアログで確認できたが、以下のような要素を使っていた。
image.png

このOutSystems UIへの依存が不要になるということか。

Product Releases and Updatesにも以下のように記載あり。

We’re excited to announce that ODC Studio now lets you sync database entities with local storage entities using built-in offline data sync feature, removing the need to consume OutSystems UI to implement offline capabilities.

On Syncに伴うEvent

Sync framework reference - Screens and Blocks sync eventsによると、UIレベルで以下のEventが追加されている。この辺りの動作確認は別の機会に行なっていきたい。

  • OnSyncStart
  • OnSyncComplete
  • OnSyncError
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?