2026年7月27日月曜日

Oracle Backend for FirebaseのLiveLabsを実施する

先日の記事「Oracle APEXが構成済みのデータベースにOracle Backend for Firebaseを構成する」で作成した環境を使って、オラクル社が提供している以下のLiveLabsのコースで作成されるアプリケーションを実行してみます。
それぞれ、以下の言語別のSDKを使用してレシピの登録、編集と一覧表示ができるアプリケーションを作成します。
対応するLiveLabsのコースはありませんが、この他にFlutter SDKも提供されています。
Web、iOS、Andorodのアプリケーションを作成するLiveLabsのコースは、概ね同じ章立てになっています。Lab 3と4は順番が入れ替わっていることがありますが、セキュリティ・ルールはLab 7で設定するため、シード・データのロードと認証の設定は、どちらが先でも後でも実施できます。

Get Started - Oracle Backend for Firebaseの環境を準備します。先日の記事の作業に当たります。

Lab 1: プロジェクトを作成しセキュリティ・ルールを初期化します。先日の記事でプロジェクトの作成までは実施しています。Task 2にて、これからの作業の準備としてDatabaseとStorageに、すべての操作を許可するセキュリティ・ルールを設定します。

Lab 2: GitHubからアプリケーションを含むリポジトリをクローンします。対象のSDKのインストールとプロジェクトの構成を設定し、アプリケーションのビルドと実行ができることを確認します。

Lab 3(または4): シード・データであるレシピをコレクションにロードします。ロードしたレシピが一覧表示できることを確認します。

Lab 4(または3): アプリケーションに認証を実装します。新規ユーザーによるサインアップ(ユーザーの作成)と、そのユーザーによるサインインを確認します。

Lab 5: 新規のレシピを作成する機能を追加します。また、レシピを評価する機能も追加します。

Lab 6: レシピに画像を登録する機能を追加します。

Lab 7: DatabaseおよびStorageのセキュリティ・ルールを更新し、レシピの作成者だけがレシピを編集できるように制限します。

LiveLabsではLab 3からLab 7で、それぞれの機能を実現するコードの記述し、実装した機能のテストを行います。記述するコードについて、それぞれのLabで行ごとに説明されています。

本来は、興味のある言語のSDKのコースを選んで取り組むべきですが、XcodeやAndoroid Studioの扱いに慣れていないなど、コース通りに作業が進まないこともあり得ます。コードの記述はコピペでできますが、Typoなど、気付きにくいこともあります。

以下より、Web、iOS、Andoroidそれぞれで、まずは完成したアプリを動かす手順を紹介します。

記事「Oracle APEXが構成済みのデータベースにOracle Backend for Firebaseを構成する」の作業に続けて実施することを想定しています。


セキュリティ・ルールを設定する



Lab 1: Create Your First ProjectTask 2: Set starter security rulesにて、DatabaseおよびStorageへ制限なしでアクセスできるセキュリティ・ルールを設定しています。
match /{document=**} { allow read, write: if true;}
シード・データはこのセキュリティ・ルールでないとロードできません。そのため、Database、Storage双方とも、最初はこのセキュリティ・ルールを設定します。

Lab 7: Security Rulesで、このセキュリティ・ルールを更新します。

Task 4: Add database security rulesにて、Databaseのセキュリティ・ルールとして以下を設定します。
match /recipes/{recipeId} {
    allow read: if request.auth != null;
    allow create: if request.auth != null && request.resource.data.ownerId == request.auth.uid;
    allow update: if request.auth != null && request.auth.uid == resource.data.ownerId;
}
match /recipes/{recipeId}/ratings/{ratingId} {
    allow read: if request.auth != null;
    allow create: if request.auth != null;
}

Task 6: Add storage security rulesにて、Storageのセキュリティ・ルールとして以下を設定します。
match /recipes/{recipeId}/{fileName} {
    allow read: if true;
    allow create: if request.auth != null;
}

セキュリティ・ルールについては、LiveLabsの説明を参照してください。


Webアプリを実装する



作業ディレクトリとしてfusabase-livelabsを作成し、移動します。

mkdir fusabase-livelabs
cd fusabase-livelabs

% mkdir fusabase-livelabs

% cd fusabase-livelabs

fusabase-livelabs % 


JavaScript SDKを使用したWebアプリを含む、GitHubのリポジトリをクローンします。

git clone https://github.com/KillianLynch/fusabase-livelabs-web.git

fusabase-livelabs % git clone https://github.com/KillianLynch/fusabase-livelabs-web.git

Cloning into 'fusabase-livelabs-web'...

remote: Enumerating objects: 143, done.

remote: Counting objects: 100% (9/9), done.

remote: Compressing objects: 100% (9/9), done.

remote: Total 143 (delta 3), reused 1 (delta 0), pack-reused 134 (from 1)

Receiving objects: 100% (143/143), 377.72 MiB | 8.78 MiB/s, done.

Resolving deltas: 100% (12/12), done.

fusabase-livelabs % 


クローンされたリポジトリfusabase-livelabs-webに、starter、finished、checkpointsが含まれています。

fusabase-livelabs % ls fusabase-livelabs-web 

checkpoints finished package.json README.md starter

fusabase-livelabs % 


LiveLabsのコースを実施する場合は、starterから始めます。できればstarterから始めて、LiveLabsの手順にそって作業を進めることを推奨します。

本記事は完成したアプリを実行することを目的としているため、finishedを使用します。checkpointsには、Labごとの中間の作業結果が保持されています。

cd fusabase-livelabs-web

fusabase-livelabs % cd  fusabase-livelabs-web

fusabase-livelabs-web %  


Oracle Backend for Firebaseのコンソールより、Webアプリケーションを作成します。

Overviewを開き、Webをクリックします(またはProject settingsApplicationsタプを開き、Add applicationsからWebを選びます)。


App NicknameRecipeShareWebとします。LiveLabsではRecipeShareというApp Nicknameを割り当てていますが、iOSのアプリにRecipeShareを使うことにして、Webアプリの名前は競合しないように変更しています。

Register Appをクリックします。


SDK installationの手順が案内されます。

ディレクトリfusabase-livelabs-webより、npm install fusabaseを実行します。

npm install fusabase

package.jsonが更新され、dependenciesにfusabaseが追加されます。

fusabase-livelabs-web % npm install fusabase


added 2 packages, and audited 3 packages in 719ms


found 0 vulnerabilities

fusabase-livelabs-web % more package.json 

{

  "name": "fusabase-recipeshare-workshop",

  "version": "0.1.0",

  "private": true,

  "type": "module",

  "dependencies": {

    "fusabase": "^26.2.0"

  }

}

fusabase-livelabs-web % 


Oracle Backend for Firebaseのコンソールに戻り、Nextをクリックします。


SDK configurationが表示されます。

const fusabaseConfig = {..}の内容をコピーします。


finished/fusabase-config.jsの内容を、上でコピーしたfusabaseConfigの内容で置き換えます。idの値は異なりますが、以下のような内容になります。
// Paste only the key/value lines from the Fusabase console inside the object below.
// Do not copy `const fusabaseConfig =`, any SDK imports, or initialization boilerplate.
export const fusabaseConfig = {
  // Replace these placeholder values with the lines you copied from Fusabase.
  "schema": "testuser",
  "app_name": "RecipeShareWeb",
  "app_type": "WEB",
  "app_id": "57524622CB221AFEE063020012AC22B0",
  "objs_type": "dbfs",
  "project_id": "573E3A97FC7320ADE063020012AC296D",
  "storage_bucket": "dbfs_CXJHFAIIZAPLDEH",
  "auth_type": "base",
  "auth_id": "573E3A97FC7720ADE063020012AC296D",
  "ords_host": "http://localhost:8181/ords/testuser/"
};
ドロワーを下スクロールして、Doneをクリックします。


Live Serverを起動します。(Live ServerのインストールはLab 2, Task 2で紹介されています。)
live-server --port=8000 --host=localhost

fusabase-livelabs-web % live-server --port=8000 --host=localhost

Serving "/Users/__________/Documents/fusabase-livelabs/fusabase-livelabs-web" at http://localhost:8000 (http://::1:8000)

Ready for changes



ディレクトリFinishedに作成されたWebアプリに接続します。


完成したWebアプリケーションが開きます。


それぞれのLabに含まれている動作確認用のタスクを実施します。

Lab 6, Task 3で使用するパスタの画像はstarter/images以下だけにあります。finished/images以下にはありません。

セキュリティ・ルールの更新は、Lab 7の作業の前に実施します。
  • Lab 3: Build the Public Recipe Experience, Task 3: Seed demo data and verify
  • Lab 4: Authentication, Task 6: Verify authentication
  • Lab 5: Write Recipe Data, Task 3: Create a recipe and add a rating
  • Lab 6: Photo Upload, Task 3: Upload a photo and verify
  • Lab 7: Security Rules, Task 5: Verify security rules block unauthorized edits


Backendを初期化する



iOSまたはAndoroidの作業に移る前に、Oracle Backend for Firebaseに保存されたデータを初期化します。

Authenticationから作成されたユーザーを削除します。


Databaseのコレクションrecipesを削除します。


削除の確認を求められます。

Enter pathrecipesを入力し、Deleteをクリックします。


Storageのフォルダrecipesを削除します。


削除の確認を求められます。Deleteをクリックします。


DatabaseおよびStorageのセキュリティ・ルールを、すべてを許可するルールに戻します。
match /{document=**} { allow read, write: if true;}
以上の作業を実施し、次のアプリケーションの実装に移ります。


iOSアプリを実装する



作業ディレクトリfusabase-livelabsに移動します。

iOSアプリのGitHubリポジトリをクローンします。

git clone https://github.com/KillianLynch/fusabase-livelabs-ios.git

fusabase-livelabs % git clone https://github.com/KillianLynch/fusabase-livelabs-ios.git


Cloning into 'fusabase-livelabs-ios'...

remote: Enumerating objects: 160, done.

remote: Counting objects: 100% (12/12), done.

remote: Compressing objects: 100% (11/11), done.

remote: Total 160 (delta 5), reused 3 (delta 1), pack-reused 148 (from 1)

Receiving objects: 100% (160/160), 204.03 MiB | 6.85 MiB/s, done.

Resolving deltas: 100% (18/18), done.

fusabase-livelabs % 


クローンされたリポジトリfusabase-livelabs-iosに、starter、finished、checkpointsが含まれています。

 fusabase-livelabs % ls fusabase-livelabs-ios 

checkpoints finished README.md starter

fusabase-livelabs % 


LIveLabsのコースを実施する場合は、starterから始めます。できればstarterから始めて、LiveLabsの手順にそって作業を進めることを推奨します。

本記事は完成したアプリを実行することを目的としているため、finishedを使用します。

作業ディレクトリを移動し、Xcodeを起動します。

cd fusabase-livelabs-ios/finished
open RecipeShare.xcodeproj


fusabase-livelabs % cd fusabase-livelabs-ios/finished

finished % open RecipeShare.xcodeproj

finished % 


Oracle Backend for Firebaseのコンソールより、iOSアプリケーションを作成します。

Overviewを開き、iOSをクリックします(またはProject settingsApplicationsタプを開き、Add applicationsからiOSを選びます)。


App NicknameRecipeShareとします。

Register Appをクリックします。


SDK installationの手順が案内されます。

GitHubを選択して、手順を確認します。

LiveLabsで紹介されている手順とは少し異なるため、これからはLiveLabsの手順にそって作業を行います。


XcodeのFileメニューより、Add Package Dependencies...を実行します。


開いたパネルで、GitHubの以下のリポジトリを検索します。

https://github.com/oracle/fusabase-ios-sdk.git

見つかったリポジトリfusabase-ios-sdkをダブルクリックします。


開いたパネルChoose Package Products for fusabase-ios-sdk.gitにて、全てのPackage Product(FusabaseAuthFusabaseCoreFusabaseOracledbFusabaseStorage)のAdd to Targetに、RecipeShareを選択します。

Add Packageをクリックします。


Package Dependenciesが更新されます。


Oracle Backend for Firebaseのコンソールに戻り、SDK installationから次に進みます。

SDK configurationとして表示された内容をコピーします。


Xcodeに戻り、ResourcesのAssets以下にあるfusebase-configの内容を置き換えます。

"allow_self_signed_certificates": trueおよび"enable_logging": trueの設定はそのまま残します。"ords_host"の設定の末尾には必ず , (カンマ)を付けます


Oracle Backend for Firebaseのコンソールに戻り、Doneをクリックしてアプリケーションの登録を完了します。


コードを少し修正します。ServicesRecipeService.swiftを開きます。

ファンクションseedRecipesに含まれる、以下の行(103行目)を変更します。

        let seeds: [[String: Any]] = [


Anyの後ろに?を追加します。

        let seeds: [[String: Any?]] = [



同様に、ファンクションcreateRecipeに含まれる、以下の行(244行目)を変更します。

            var data: [String: Any] = [


Anyの後ろに?を追加します。

            var data: [String: Any?] = [



ファンクションaddRecipeRatingの288行目から303行目まで(do { ... } catchの中のコード)を以下のコードに置き換えます。starterから始めている場合は、もともとaddRecipeRatingは以下のコードになっているため変更は不要です。
            let author = authService.user?.email ?? "anonymous"
            
            // 1. Write the rating into the subcollection. 
            var ratingData: [String: Any?] = [
                "author": author,
                "rating": rating,
                "createdAt": Date().timeIntervalSince1970 * 1000.0
            ]
            if let comment, !comment.isEmpty {
                ratingData["comment"] = comment
            }
          
            let recipeRef = db.collection("recipes").document(recipeId)
            _ = try await recipeRef.collection("ratings").addDocument(data: ratingData)
             
            // 2. Read parent recipe to recompute aggregates.
            let snap = try await recipeRef.getDocument()
            let data = snap.data() ?? [:]
            let oldAvg = (data["averageRating"] as? Double) ?? 0
            let oldCount = (data["ratingCount"] as? Int) ?? 0
            
            let newCount = oldCount + 1
            let newAvg = (oldAvg * Double(oldCount) + Double(rating)) / Double(newCount)
            
            // 3. Write the new aggregates back to the parent.
            try await recipeRef.updateData([
                "averageRating": newAvg,
                "ratingCount": newCount
            ])
            
            // Refresh the published list so the updated rating summary appears.
            try await loadRecipes(category: nil)

以上でiOS版のアプリケーションは完成です。

ProductメニューからRunを実行します。


iPhoneシミュレータが起動します。


それぞれのLabに含まれている動作確認用のタスクを実施します。

Lab 6, Task 3で画像spagetti-carbonara.jpgをiPhoneシミュレータにコピーします。画像ファイルはstarter以下にのみ存在します。

セキュリティ・ルールの更新は、Lab 7の作業の前に実施します。
    • Lab 3: Authentication, Task 6: Create an app user
    • Lab 4: Read Recipe Data, Task 3: Seed demo data and verify
    • Lab 5: Write Recipe Data, Task 4: Create a recipe and add a rating
    • Lab 6: Photo Upload, Task 3: Make sure the Simulator has a photo to pick
    • Lab 6: Photo Upload, Task 4: Upload a photo and verify
    • Lab 7: Security Rules, Task 5: Verify security rules block unauthorized edits


    Androidアプリを実装する



    作業ディレクトリfusabase-livelabsに移動します。

    AndroidアプリのGitHubリポジトリをクローンします。

    git clone https://github.com/KillianLynch/fusabase-livelabs-android.git

    fusabase-livelabs % git clone https://github.com/KillianLynch/fusabase-livelabs-android.git

    Cloning into 'fusabase-livelabs-android'...

    remote: Enumerating objects: 205, done.

    remote: Counting objects: 100% (205/205), done.

    remote: Compressing objects: 100% (166/166), done.

    remote: Total 205 (delta 24), reused 197 (delta 22), pack-reused 0 (from 0)

    Receiving objects: 100% (205/205), 18.10 MiB | 6.26 MiB/s, done.

    Resolving deltas: 100% (24/24), done.

    fusabase-livelabs % 


    クローンされたリポジトリfusabase-livelabs-androidに、starter、fisnished、checkpointsが含まれています。

    fusabase-livelabs % ls fusabase-livelabs-android 

    checkpoints finished README.md starter

    fusabase-livelabs % 


    LiveLabsのコースを実施する場合は、starterから始めます。できればstarterから始めて、LiveLabsの手順にそって作業を進めることを推奨します。

    本記事は完成したアプリを実行することを目的としているため、finishedを使用します。

    Android Studioを起動し、finishedの下にあるRecipeShareを開きます。


    Oracle Backend for Firebaseのコンソールより、Androidアプリケーションを作成します。

    Overviewを開き、Androidをクリックします(またはProject settingsApplicationsタプを開き、Add applicationsからAndroidを選びます)。


    App Nicknamecom.oracle.fusabase.recipeshareとします。

    Register Appをクリックします。


    SDK installationの手順が案内されます。

    Package Managerを選択して、手順を確認します。

    これらの設定は、finishedでは実施済みです。Nextをクリックします。


    SDK configurationとして表示された内容を、fusabase-config.jsonとしてダウンロードします。

    ダウンロードされたファイルはRecipeShare/app以下に配置します。

    cp ~/Downloads/fusabase-config.json fusabase-livelabs-android/finished/RecipeShare/app


    下にスクロールしてDoneをクリックし、アプリケーションの登録を完了します。


    Android Studioより、RecipeShare/app以下に配置したfusabase-config.jsonを開きます。

    Androidのエミュレータはそれ自体が仮想ネットワークを持っています。Androidエミュレータからlocalhostへ接続するには、localhostの代わりに10.0.2.2を指定します。

    fusabase-config.jsonのプロパティords_hostのlocalhostの部分を10.0.2.2に置き換えます。

    変更したファイルを保存します。


    以上でAndroidのアプリケーションは完成です。

    Sync Project with Gradle Filesを実行します。


    Device Managerを開き、Androidエミュレーターを起動します。


    Androidエミュレーターが起動します。

    RecipeShareアプリケーションを実行します。


    AndroidエミュレーターでアプリケーションRecipeShareが実行されます。


    それぞれのLabに含まれている動作確認用のタスクを実施します。

    セキュリティ・ルールの更新は、Lab 7の作業の前に実施します。
      • Lab 3: Authentication, Task 6: Run and verify
      • Lab 4: Read Recipe Data, Task 6: Run and verify
      • Lab 5: Write Recipe Data, Task 3: Run and verify
      • Lab 6: Photo Upload, Task 3: Run and verify
      • Lab 7: Security Rules, Task 5: Verify security rules block unauthorized edits
      以上で、Oracle Backend for Firebase (Fusabase) を使った3種類のアプリケーションの動作が確認できました。