Using Cloud Firestore 

Using Cloud Firestore 

Cloud Firestore, Firestore CLI, Firebase Emulator, Cloud Functions

Cloud Firestore is a flexible, scalable database for mobile, web, and server development. Support for it is built-in to FutterFlow. The easiest path to publication, for a mobile app that needs a database back end is to implement the data required in Cloud Firestore.

Cloud Firestore is a NoSQL database, which means you don't define its entire structure in databases and tables ahead of implementation and you dont use SQL statements to access it. Instead, you store data collections, which contain doucuments which contain fields of various data types, mapped to values. The data types are supported are: Array, Boolean, Bytes, Date and time, Floating-point number, Geographical point, Integer, Map, Null, Reference, Text string.

Data model

Firestore is flexible but it helps to think about the data model

My app is going to need a collection called 'territories' which will contain an organisation within it about which we wish to display some data. Easy. Easier if you have a diagram I think.

  ┌───────────┐
  │           │
  │Territories│
  │           │
  └─────┬─────┘
        │
        │ ┌───────────────┐
        └─┤Organisation 1 │
          ├───────────────┤
          │               │
          │ ranking: 2.75 │
          │               │
          │ category: "a" │
          │               │
          │ id: "text id" │
          │               │
          │ name: "name"  │
          │               │
          │ dataPoint1: 1 │
          │               │
          │ dataPoint2: 2 │
          │               │
          │ dataPoint3: 3 │
          │               │
          │ dataPoint4: 4 │
          │               │
          │ etc ...       │
          └───────────────┘

Cloud Firestore doesnt have a built-in mechanism for calculation of these fields or aggregation of them. My data set will need to be modified to adjust values of several fields for a given organisation. The firestore documentation encourages us to either, use a client-side transaction (which isn't possible yet using FlutterFlow and probably isn't desirable) or, to use a Cloud Function for Firebase to update aggregate information in the Firestore database for the app. It is a small data set at first, so it should be easy to add it manually, in the firebase console for testing, and then via a simple admin web app for ongoing admin and adjustment.

TL:DR — Theres a good bit to learn here and of course, more setup is required. We're going to need to set up Cloud Firestore for the Web, and to run it you might need to install Java because Firebase Local Emulator Suite requires a Java Runtime Environment (JRE).

Cloud Firestore for the Web

Watch Todd Kerpelman's video series on YouTube

Cloud Firestore is a database inside Google Firebase for mobile and web apps. There is another older realtime database in Google Firebase too, but FlutterFlow constrains my app a to Cloud Firestore and thats OK. I know little about Cloud Firestore apart from the marketing, so lets dive in to some tutorials and use them to comprehend what can be built for my app. The first one is Getting Started With Cloud Firestore on the Web, one of a series of YouTube videos produced by the Firebase team. In it, the presenter creates a simple web form to update a Cloud Firestore database. My app needs an admin front end in the browser which needs to be able to do use a web form to update Firebase content for the mobile devices to consume, so reviewing the tutorial and building the sample shows me how that can be achieved. The series goes on to cover the 'FriendlyEats sample applicattion. Run through the 'FriendlyEats' codelab and video, and once you have completed them I hope you can see how they are an ideal start point for my admin web app. You can read, write, update and delete entries in a Cloud Firestore database which is exactly what I need to be able to do.

Authentication isn't a feature for the first release of my mobile app, but it is important to have some form of authentication for the admin web app so to start with I think I need Anonymous login meaning that the web browser user will be silently signed in without being prompted. For the codelab the rule just allows an authenticated user to access Cloud Firestore. I'll come back and fix this before deployment to allow only authorised administrators to be able to do so.

Step by Step instructions to start a fresh project in firebase based on the 'FriendlyEats' sample

• Xcode — On a Mac you likely need Xcode and the command line tools and all that to be installed properly first. I certainly did, to build Node for Apple silicon. YMMV
• Java — Firebase Local Emulator Suite requires a Java Runtime Environment (JRE). Instructions for Apple silicon at the end of this article.
• Node.js — Install node.js 14 long term support (LTS). To write a function you need Node.js and to deploy it you will need the Firebase command line interface (CLI). Firebase CLI supports only specific versions of Node.js for cloud functions. You can use Node Version Manager (nvm) to select the latest LTS release for a shell session which as of this article is 14.17.4. Installing it took quite some time on my Apple silicon based Mac which needed to build it from source, but it eventually completed. See also: Firebase Get Started

  
  % nvm install 14.17.4
  Downloading and installing node v14.17.4...
  Downloading https://nodejs.org/dist/v14.17.4/node-v14.17.4-darwin-arm64.tar.xz...
  ...
  Binary download failed, trying source.
  ...
  Downloading https://nodejs.org/dist/v14.17.4/node-v14.17.4.tar.xz...
  ... 
  [pages and pages of debug output]
  ...
  installing ...versions/node/v14.17.4/include/node/zconf.h
  installing ...versions/node/v14.17.4/include/node/zlib.h
  Now using node v14.17.4 (npm v6.14.14)
  % 
  

• Firebase CLI — Install the Firebase CLI globally by running npm install -g firebase-tools. Once completed, the firebase command is available in the terminal! See also: Firebase via npm
• FriendlyEats — Download the finished code from firebase firestore quickstart. This is permitted even if you plan to use the resulting code in commercial work provided you comply with the licence as noted in their GitHub license document.
  firebase/quickstart-js is licensed under the Apache License 2.0 which is a permissive license whose main conditions require preservation of copyright and license notices. Contributors provide an express grant of patent rights. Licensed works, modifications, and larger works may be distributed under different terms and without source code.
• Run firebase login if you haven't already, to log in via the browser and authenticate to firebase for your user account on your computer.

  
  % firebase login
  Visit this URL on this device to log in:
  https://accounts.google.com/o/oauth2/auth?client_id=xxxxxxxxxxx_xxxxxxxx
  
  Waiting for authentication...
  

  Open the URL in your browser (right click in macOS termainal, or copy it and paste it into a browser). Enter the credentials needed to access your Firebase console. The browser will tell you it has completed the authentication, and you can close it. Your shell session should be logged in.
   
  

  
  ✔  Success! Logged in as This email address is being protected from spambots. You need JavaScript enabled to view it.
  % 
  

• Go to the project directory you just created and run firebase init firestore and accept the defaults for Firestore rules and index files.
• Select Test mode and note that this is insecure and will need to be altered.
• Select a location for your Firestore database and note that this becomes the default Google Cloud Platform (GCP) resource location got your project. I chose europe-west2, which is in London, because my audience is in the UK and my data should be hosted in the UK.
• Run firebase init functions and install dependencies with npm. I
• Select JavaScript for language support.
• Enable Anonymous Auth — In the Firebase console, locate the Build section in the left nav.
• Click 'Get Started' on Authentication, then click the 'Anonymous' Sign-in provider, or if you have been here before, find the Sign in tab and then,
• Enable the Anonymous Sign-in Provider, then click Save.
• Run firebase emulators:start --only hosting and you should see that the firebase emulator is serving our app locally.

  
  hosting: Local server: http://localhost:5000
  . The web app should now be available from http://localhost:5000.
  

  Open your app at http://localhost:5000.

Run and modify your firebase project

If you have made it this far you can run the FriendlyEats app as part of your own Firebase project and start to customise it. If your emulator didnt start you probably need to install Java because Firebase Local Emulator Suite requires a Java Runtime Environment (JRE). There's always more setup to do it seems. See below.

Refresh the browser to see that each of the changes has taken effect.

• Modify manifest.json to change the colours and icons for the app.
• Replace the images and favicons. I used favicon.io
• Adjust the colours, I used color-hex.com to give me a nice set of colours to use.

Java Runtime Environment (JRE) for Firebase Local Emulator Suite for Mac's based on Apple silicon

Lets not get into what a gigantic pain this is. Lets just install it. Perhaps its just a bigger pain on Apple silicon based Mac's. But it is yet another dependency in the developer toolchain which is something to grumble about but is for the purposes of building an app with the help of FlutterFlow, just a distraction.

OpenJDK on Apple silicon

Verify that you have a working OpenJDK Java environment on your Apple silicon based Mac by getting the version of java from the command line.

% java --version
openjdk 11.0.12 2021-07-20 LTS
OpenJDK Runtime Environment Zulu11.50+19-CA (build 11.0.12+7-LTS)
OpenJDK 64-Bit Server VM Zulu11.50+19-CA (build 11.0.12+7-LTS, mixed mode)

Now that particular rabbit hole has been explored, you can get on with the steps to try out local development with the Firebase Local Emulator Suite which enables emulation of firebase on the computer Firebase is installed on.