This sample application demonstrates the use of the Firestore and the Firestore Listener. For the storage of the photos the Storage is integrated. For the analysis of the photos the VisionML is used.

Requirements

This was the initial requirements for the Photobox Application, which was shown for the first time at a workshop at EKON26 in November 2022:

• A Firemonkey application for Windows/Android shall be implemented.
• The application shall identify the user while startup by email and password by using a self registration workflow.
• After logging in again on the same device, the auto login on the device allows a quick login thanks to saving the refresh token
• The application shall manage the user's photos, either uploaded from the photo library (on Windows the pictures folder) or taken from the camera.
• Simultaneously running applications where the same user is logged in will immediately see all newly created photos from other devices.
• While uploading new photos the system shall catch image captions retrieve from the Vision ML service.
• Firestore and storage are protected by access rules so that each user sees only his own uploaded photos.

The multi-device application contains a tab control with 3 tabs. The first tab Register contains the self-registration frame. The second tab "Box" provides a master detail view with a list of all uploaded photos on the left side. On the right side a preview of the photo can be displayed. Photos for upload can be selected from the Photo library on the one hand, or obtained from the camera by using the tab CaptureImg. The toolbar on the top allows you to upload, download and delete photos.

Implementation in 4 steps

In order to better understand the building and structure of this sample application, the implementation was divided into 4 Scrum stories.

If you just need a quick start, create a Firebase project with the final rules from step 4. These firebase project will run together with the code in the main directory Samples\PhotoBox.

Step 1: Writing/reading documents to the Firestore

1. Edit and save the Firebase project settings.
2. Capture a photo from the camera and the picture library by using the Firmonkey framework FMX.
3. Write one document per image to Firestore.
4. Add a Firestore listener on the collection photos1 that reads all documents and show it in a list box.

For preparation you need a new Firebase project, where you have to define the following access rules for the Firestore for step 1:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /photos1/{photoID} {
      allow read, write:
        if true; 
     }
   }
}

Step 2: Upload and Download of picture files into the Firebase Storage

1. New design for master detail view.
2. Add method for upload photo to Storage.
3. Download photo when the Firestore listener detects a new document.

To use the Firebase Storage for storing photos, the following access rules must first be set in the Storage for step 2:

rules_version = '2';
service firebase.storage {
   match /b/{bucket}/o {
     match /photos2/{userID}/{photoID} {
       allow read, write: 
         if request.auth.uid == userID;
     }
  }
}

Step 3: Analyze the photo with Vision ML

1. Enable the usage of VisionML within the Firebase Console. Unfortunately you need a credit card to upgrade to the blaze plan (Pay as you go).
2. Upload the picture to the Vision ML service and start annotate image.

• Hint: The current VisonML supports only raw pictures in the following formats: GIF, TIFF or PDF!
• Problem: The Firemonkey FMX.Graphics does not yet support conversion into GIF on Android platform! (On Windows this service is available).
  For more information view and vote for RSP-17682!

3. Interpret the results of this service and add new fields to the document in the Firestore database.

Step 4: Integrate login and self registration workflow

1. Use the implemented frame of FB4D for this job!
2. Setup the access rules in order to protect the user's photos.

Enter the following access rules for the Firestore:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /photos/{photoID} {
      allow read:
        if (request.auth.uid != null) &&
           (request.auth.uid == resource.data.createdBy);
      allow write:
        if (request.auth.uid != null) &&
           (request.auth.uid == request.resource.data.createdBy); 
     }
   }
}

This rule allows each registered user to read only the documents in the photo collection that he created himself. Compare this solution also with the chat application, where all documents are readable.

To use the Firebase Storage for storing photos, the following access rules must first be set in the Storage:

rules_version = '2';
service firebase.storage {
   match /b/{bucket}/o {
     match /photos/{userID}/{photoID} {
       allow read, write: 
         if request.auth.uid == userID;
     }
  }
}

This rule prevents a user from changing and viewing pictures for another user.

As this application uses the self-registration workflow you need firstly to disable the email enumeration protection for a newly created Firebase project.