Flutter、Spring Boot、Oracle Database Free Spatial、およびOpenStreetMapを使用したジオキャッシング・マルチプレイヤー・ゲームの開発 (2023/06/27)

https://blogs.oracle.com/developers/post/develop-a-geocaching-multiplayer-game-using-flutter-spring-boot-oracle-database-free-spatial-and-openstreetmap

投稿者：Paul Parkinson

このブログでは、Flutter、Spring Boot、Oracle Database with Spatial (SQL、JSON、Blockchain)、およびOpenStreetMapで構成される、非常に強力で多用途で広く普及している、完全に無料のソフトウェア・スタックを使用して、フルスタック・アプリケーションをすばやく作成する方法を説明します。もちろん、すべてのソースはここにあります。

ユース・ケースとして、ジオキャッシングに基づいてマルチプレイヤー・ゲームを作成します。(196か国とスペースに310万以上のアクティブなジオキャッチがあります。)

プレーヤーは、世界中の特定の場所にアイテム/写真を配置して、他のプレイヤーが見つけることができます。プレイヤがジオキャッシュの場所を検出すると、ゲストブックに署名し、ゲストブックに署名した他のユーザーが表示されるようになります。プレーヤは、正直なポリシーを使用して、他のアイテムや写真を配置することを理解して、あらゆるアイテムや写真を撮ることができます。

当社のアプリケーションはオンライン・バージョンのゲームですが、実際のバージョンを追跡/照合したり、他の任意の数の目的まで拡張するために使用できます。

Oracle Database Free(JSON、Spatial、Blockchain表などを表示)からSpring Boot(Rest、JSON、JDBCなどを表示)まで、最下から最上まで、アプリケーションを設定し、アーキテクチャの各ビットを記述します(Webおよびモバイル、ウィジェット、マップ、Restなどを表示)。

要するに、私たちは...

1. データベースの作成
2. Spring Bootを構成して、GeoCacheUserおよび関連する表とJSONドキュメントをデータベース内に作成して使用します。構築して確認します。
3. Oracle Databaseを呼び出すSpring Bootサービスを呼び出すFlutterサービスを構築して実行します。

まず、アプリの簡単な説明をしましょう。

アプリケーションには、トップ・キャッシュ、追加GeoCacheおよびマップ(Spatial)の3つの項目を含むナビゲーション・バーがあります。

まず、「Add GeoCache」フォーム(名前、ラット、ロングおよびイメージURLを指定)を使用してジオキャッチを追加します。

次に、マップ(空間)をチェックして、ジオキャッチを表示および選択します。

キャッシュの名前とイメージ、およびキャッシュに署名したことがわかります。

最後に、「Top Caches」に移動して、どのキャッシュの訪問/署名が最も多かったかを確認します。

GeoJSON

GeoJSONは標準(RFC 7946)で、JSONオブジェクトを使用して、様々な幾何学エンティティおよびこれらの組合せをユーザー定義プロパティとともに表します。このアプリケーションでは、特定のプロパティを持つ単純な緯度座標と経度座標をプロットしており、フィーチャの配列を含むフィーチャ コレクション構造を使用しています。さらに、フィーチャには、ポイント(座標を含む)のジオメトリと、アプリケーション固有の値の配列を持つプロパティがあります。たとえば、ジオキャッシュを追加した人の名前、配置したイメージのイメージの場所、およびジオキャッシュにアクセスした人/人の名前などです。次に、このGeoJSONの例を示します。この例は、データベース/Oracle、バック・エンド/Spring Bootおよびフロント・エンド/フッターのオブジェクトで表されます。

JSON

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -81.5812,
          28.4187
        ]
      },
      "properties": {
        "name": "BillWatkins75",
        "imagelocation": "https://.../spacemountain.png"
      }
    }
  ]
}

Oracleコンバージドデータベース

このアプリケーションでは、GeoJSONにSQL、JSON、ブロックチェーン表、およびもちろんSpatialを使用し、同じマッピングを行います。Oracleコンバージドデータベースは、SQL、JSON (および両方ともJSON Duality機能を介して同時に)、Rest、Messaging and Events、Editions、IoT Streaming、Machine Learning、Blockchain、Graph、Spatialのすべてを1つのデータベースでサポートしているため、非常に強力で多用途です。

あらゆるバージョンのOracle Databaseを使用できます。クラウドでは、OracleのAlways FreeのAutonomous Databaseを使用できます(インターネットを介して公開し、数分でゲームをグローバル/オンラインに利用可能にすることもでき、またOracle 23c Freeバージョンを使用して、コンテナ・イメージをローカルにインストールしたり使用したりできます)。または、もちろん、開発やクラウドにローカルで本番などに使用でき、これらのオプションのいずれかを設定することは非常に迅速です。

Always FreeのOracle Cloud Databaseオプション...

ここに移動して、Oracle Cloud Always Free Autonomous Databaseを設定できます

プロンプトは非常に直観的です。次に示すように、Oracle Databaseのメニュー画面で「Autonomous Transaction Processing」を選択し、「Create Autonomous Database」ボタンをクリックします。すべてのデフォルトを取得し、管理ユーザーのパスワードを指定するだけです。

データベースの作成/利用可能になったら、「データベース接続」ボタンをクリックして、次に示すようにウォレットをダウンロードします。

Oracle Database Freeオプション...

ここに移動してOracle Database Free 23cを設定できます。

コンテナ・イメージの使用は非常に簡単です。次の1行のみを実行して、-e ORACLE_PASSWORD=Welcome12345を任意のパスワードに置き換え、-v oracle-volume:/somedirectoryをディレクトリの場所に置き換えます(または、インメモリー・データベースのみを使用する場合は完全に省略します)。

docker pull 
container-registry.oracle.com/database/free:latest; docker run -e ORACLE_PASSWORD=Welcome12345 -v oracle-volume:/somedirectory container-registry.oracle.com/database/free:latest

これで終わりです。

Spring Boot

SQLclをダウンロードしてインストールし、前述のデータベース/オプションを管理するか、OCIコンソールで「Database Actions」、「SQL」の順にクリックしてクラウド・データベースを管理できます。これは当然のことながら非常に有用であり、ユーザーなどを作成するために通常のベスト・プラクティスであるため、このことをお薦めします。ただし、このアプリケーションで使用するGeoCacheUserを作成するために、Javaコードを単にまたはSpring Bootアプリケーションで使用します。

いつものように、Spring Bootアプリケーションを構築するにはJavaおよびMavenが必要です。前述のlogocaching-game-flutter-springboot-oraclespatial/springboot_applicationディレクトリにcdのリポジトリをクローニングまたはダウンロードし、次のステップに従ってアプリケーションで使用するGeoCacheUserを作成します。

1. URL、ユーザー名およびパスワードを指定して、src/main/resources/application.yamlのデータソース構成を変更します。
2. mvnクリーン・パッケージの実行
3. java -jar target/geojson-0.0.1-SNAPSHOT.jarを実行します。
4. curl "http://localhost:8080/geocache/createDBUser?userName=GeoCacheUser&password=[youradminorsyspassword]"を実行して、パスワード値を自分のものに置き換えます。
5. 手順3で開始したJava/Spring Bootプロセスを停止します。
6. 次に、src/main/resources/application.yamlのデータソース構成を再度変更します。今回は、ステップ4で指定したユーザー名とパスワードを指定します。
7. mvnクリーン・パッケージの実行
8. java -jar target/geojson-0.0.1-SNAPSHOT.jarを実行します。
9. curl  http://localhost:8080/geocache/createTablesを実行

セットアップが完了し、次のコマンドを実行できる必要があります(ただし、この時点では空のJSON値が返されます({"type":"FeatureCollection"、"features":[]})

• curl http://localhost:8080/geocache/getGeoCaches
• curl http://localhost:8080/geocache/getGeoCacheTop10

セットアップが進んでいないので、アプリケーションのSpring Boot部分を詳しく見てみましょう。

バックエンド開発にまったく関わっている場合、この分野で最も人気のあるフレームワークであるSpring Bootに精通している可能性が高くなります。

一般に、データ操作をDAO (データ・アクセス・オブジェクト)、@ComponentまたはJPAなどに移動しますが、わかりやすくするために、このアプリケーションのロジックは最小限に保たれ、Spring RestController OracleGeoJSONController.javaに含まれています。geojsonパッケージの単純なPOJOは、前述したGeoJSON標準の表現にすぎません。

コントローラには、それぞれ@PostMappingまたは@GetMapping (Restエンドポイント注釈)を使用してFlutterアプリケーション・レイヤーからリクエストを受信し、Spring BootのJDBCTemplate (JDBCを使用するための便利な一時的/API)を使用してOracle Databaseと通信する4つの主要なメソッドが含まれています。

• addGeoCacheおよびgetGeoCachesメソッドは、ユーザーが追加したジオキャッチを格納し、それらを取得して、ユーザーが表示するマップにマーカーとしてプロットするために使用されます。これらは、JSONを格納する単純な表であり、設定時に次のものを使用して作成されたジオキャッシュ表に対して動作します。

CREATE TABLE geocache (geocache_doc VARCHAR2 (4000) CHECK (geocache_doc is json))

• addGeoCacheJournalEntryおよびgetGeoCacheTop10は、ジオキャッシュへの訪問を格納するために使用されます(実際のジオキャッシュでゲストブックに署名するのと同じ)。これらは仕訳/元帳タイプ・エントリであるため、Oracleデータベースのブロックチェーン表機能を使用して、NFTタイプのジオキャッシング保証が提供される例を示します。ブロックチェーン表内の行は、特別な順序付けおよび連鎖アルゴリズムによって改ざんが防止されます。ユーザーは、行が改ざんされていないことを確認できます。ブロックチェーン表は、参加者がOracle Databaseプロバイダを信頼するブロックチェーン・アプリケーションの実装に使用できますが、データに改ざんされていないことを確認する手段が必要です。これは、設定時に作成された表tahtの非常に単純な構文です。

CREATE BLOCKCHAIN TABLE geocache_journal
        (creatorname VARCHAR2(128), visitorname VARCHAR2(128), imageurl VARCHAR2(128), 
         longitude NUMBER, latitude NUMBER)
        NO DROP UNTIL 1 DAYS IDLE
        NO DELETE UNTIL 16 DAYS AFTER INSERT
        HASHING USING "SHA2_512" VERSION "v1"

これらの4つのメソッドは、FlutterのマップにGeoJSON座標/ポイントをプロットするだけであるため、非常に簡単です。アプリケーションでは現在使用されていない他の問合せがありますが、追加の機能再空間分析など、テストのために構築されるスタータとして使用できます。

たとえば、SDO_GEOMETRY (JGeometry)などを使用して、近接および包含に基づく問合せの実行、データのフィルタ、距離関係の測定および空間データの結合/変換、3D地理情報システム(GIS)およびスマート・シティ・アプリケーション用のレーザー・スキャンまたはフォトグラム測定からの空間センサー・データの管理を行います。ここには適切なスタート・ポイントがあり、関連するJava APIがここにあります。

また、ここからは、特定の作成者のキャッシュ、特定の訪問者の作成者などの訪問者のリストを、フォロー、フォローバック、アナリストの機能などについて簡単に問い合せることが必要です。

Flutter

ここでは、さまざまな言語、フレームワークなどの違いには触れませんが、アイデアを出すために、フラッターは基本的にReact Nativeと人気まで結びついています。

Flutterは、モバイル、Webアプリケーション、デスクトップ・アプリケーションなどの「任意の画面」で1つのコード・ベースを実行できる抽象化を実現し、同時にこれらすべてのデバイス/スクリーンのネイティブ機能にアクセスできるようにしているという事実により、非常に急速に普及しています。また、使いやすく、オブジェクト指向の高速なダーツ言語ダーツ上に構築され、自然に適切に設計され、適応可能なUI構造とパターンを提供するウィジェットに基づいています(テーマなどの継承によって暗黙的に継承される可能性もあります)。その結果、また別のメリットは、それが得た広範なコミュニティ・サポートです。

繰り返しになりますが、アプリは可能な限りシンプルかつ簡潔に作られていますが、重要な利点と簡潔さを示し、基盤となる強力な基盤を提供します。

Flutterは設定が非常に簡単ですが、特定のプロジェクトにはかなりのボイラ・コードがあるため、リポジトリは3つのキー・ファイルのみを提供します。ニーズや環境によっては、インストールが必要なコンポーネントもあります。これらも簡単に設定できるはずです。これでhttps://docs.flutter.dev/get-startedにある「インストール」、「設定エディタ」および「テスト・ドライブ」のステップが終了したら、ここでGeoCachingアプリケーションを続行できます。

準備ができたら、geocaching-game-flutter-springboot-oraclespatial/flutter_applicationディレクトリにある3つのファイルを、プロジェクト内の対応する場所にコピーします。これら3つのファイルを詳しく見ていきましょう。

• pubspec.yamlは、様々な構成および依存関係を含むアプリケーションの基本仕様です。アプリケーションに3つの主要な依存関係が追加されています(対応するインポートは*.dartfileソース・コードにあります)。
• flutter_map: ^5.0.0は、マップ機能を提供します(openstreetmap.orgは、ボランティアによって構築され、タイルなどのために、編集可能な自由な世界地図です)。
• latlong2: ^0.9.0は、マップに配置したマーカー・ポイントの機能を提供します。
• http: ^1.0.0には、Restコールを実行する機能があります(特にSpring Bootサービス)。
• geocachejson.dartには、FeatureCollection (GeoJSON)のオブジェクト表現と、Spring Bootサービスからのフェッチ/読取りのためのRestコールが含まれます。
• main.dartは、Flutterサービスのメイン・プログラムです。含まれているもの...

• アプリケーションのエントリ・ポイントであり、MyHomePage Widget (Widgetsはステートレスまたはステートフル)をコールするmain()メソッド。このメソッドには、mainAreaに表示するために3つのウィジェットに相関する3つのナビゲーション・アイテムを含む列を含むLayoutBuilderを持つScaffoldがあります...
• GeoCacheTopScoresWidgetは、最も署名/訪問された上位10のジオキャッシュの場所を問い合せて表示します(つまり、Spring Boot getGeoCacheTop10メソッドを呼び出します)。キャッシュの名前など、最も訪問数が多い図のアイコンが含まれています。
• GeoCacheFormWidgetには、ジオキャッシュを作成するためにユーザーが入力する形式が含まれます(つまり、Spring Boot addGeoCacheメソッドをコールします)。
• MapWidgetは、すべてのジオキャッシュ情報(つまり、Spring BootメソッドgetGeoCachesをコール)を問い合せ、マップに表示します。ユーザーは、必要に応じてマップ内を移動し、任意の場所を選択できます。場所を選択すると、ジオキャッシュのイメージが、ユーザーが署名したキャッシュをユーザーに通知するメッセージとともに表示されます。これは、ブロックチェーン表に記録されるバックエンドに送信されます(つまり、Spring Boot addGeoCacheJournalEntryをコールします)

アプリケーションの実行

最後に、データベースおよびSpring Bootアプリケーションを実行することで、右下のメニューから選択して「デバッグの開始」ボタンを押すことで、任意のデバイスを使用してFlutterアプリケーションを実行できます。ファイルを保存すると、アプリケーションへの追加の変更がホット・リロードされます(開発サイクルが速くなります)。環境に応じて、FlutterおよびSpring Bootが実行される場合は、CORSまたはサービス間のその他のセキュリティ・サポートを構成するか、開発のみのためにセキュリティを無効にする必要があります(たとえば、flutter\bin\cacheディレクトリ内の関連するスタンプ・ファイルをクリアし、設定- disable-web-security in flutter\packages\flutter_tools\lib\src\web\chrome.dart)

まとめ

アプリケーションとソース・コードをできるだけ簡潔にしながら、拡張と構築が容易なかなりの機能を備えたフル・スタックを提供してきました。

ご意見やご質問はお待ちしておりますので、お時間を大変お待ちしております。