Sistemas Embutidos

Create and initialize project in Firebase 🛠

1. Create the project with normal account in the console
   • Note that the UPorto accounts seems to not have the firebase module
2. Enable the anonymous login in the Authentication
3. Create the Real time DB
   1. Create some entries (add children to child)
4. Look at the access rules (see Firebase: Real time DB Rules)
5. In the console for the Real time DB add the Rules:

   {
     "rules": {
       ".read": "auth != null",
       ".write": false,
       "users": {
         "$uid" : {
           ".write": "auth != null && auth.uid == $uid"
         }
       }
     }
   }
   

Install the demo web app 🔨

1. Download the sample project for RT and unzip it. Have a look 👀 at index.html and scripts/main.js.
2. Add an App to the project on the Firebase project's overview on the console. For this example, add a Web App with no hosting.
3. Copy the generated code to the index.html from the sample project. It should replace the current <script src=...> at the end of the file.
4. Add the libraries for authentication and accessing the RT DB (see Ways to add the Web SDKs to your app):

   <!-- TODO: Add SDKs for Firebase products that you want to use
    https://firebase.google.com/docs/web/setup#available-libraries -->
   <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-auth.js"></script>
   <script src="https://www.gstatic.com/firebasejs/8.2.10/firebase-database.js"></script>
   

5. Run a local web server with npm's http-server for testing (you can use another web server).
   1. Install NodeJS.
   2. Install the package for the http-server:
      npm install --global http-server
   3. Run the following command on the dir where you extracted the sample project:
      http-server -a 127.0.0.1
6. Open a web browser on http://127.0.0.1:8080/ (check the output of the http-server to confirm the URL)

Configure authentication 🔐

1. Open the browser's web console (usually Ctrl+Shift+i) for debugging.
2. Try the login and check the errors on the web console:
   1. Fails due to 127.0.0.1 not being allowed by Firebase ⇒ add 127.0.0.1 in the Authentication/Sign-In Method for authorized domains
   2. Try login again
   3. Fails on Authenticator: see scripts/main.js line 387, of the sample app
      • Note that although Anonymous authentication was turned on, in script/main.js the GoogleAuthProvider is the one used (see Anonym Authentication)
   4. ⇒ Enable Google Authenticator on the Firebase console for Authentication/Sign-In Method
3. Try Login again: it works 🎊 🎇
4. See the Real time DB on the console.
   1. Check the users entries and see the new user added in users.

Configure DB access rules 📜

1. Create a post on the web interface of the sample App
   1. It does not succeed as the Real Time Database rules do not allow it.
   2. ⇒ Change the rules (see also the Examples for access), permitting write access to authenticated users, i.e.:

      {
        "rules": {
          ".read": "auth != null",
          ".write": false,
          "users": {
            "$uid": {
              ".write": "auth != null && auth.uid == $uid"
            }
          },
          "posts": {
            ".write": "auth!=null"
          },
          "user-posts": {
            "$uid": {
              ".write": "auth != null && auth.uid == $uid"
            }
          },
          "post-comments": {
              ".write": "auth != null"
          }
        }
      }
      

   3. Re-add the post and 🎊 🎇
2. Check the contents.
3. Add comments and stars.

Concurrency and updates 💨

1. Change values on the and see the reflection on sample web app interface.
2. Open the sample web app (http://127.0.0.1:8080) on another browser, a Private page or using Firefox's Containers.
3. Login with a different account on the new instance of the sample web app.
4. Add posts, comment, like, etc. and see the effects on the other places (1st sample web app and )

Code Highlights 🔎

Authentication 🔓

• Anonymously
• Email and Password

Data Structure 📐

See the Structure your DB on Firebase's documentation.

Data Access 🚪

Check the function startDatabaseQueries and note:

• getting the references to an entry on the Database with ref;
• adding listeners for changes on those entries with on:
  • for child_added
  • for child_changed
  • for child_removed
  • these will make changes on the html's DOM accordingly. See the Listen for Value events.

Note you should use the off() on the reference as in line 316 to [detach the listeners].

The data read/write works offline, see Work with data offline

Install Firebase tools ⚒

If you want to install the Firebase tools (the cli (Command Line Interface)), follow steps below.
NodeJS is required.

1. Install firebase JS tools:
   npm install -g firebase-tools
   • In Windows, it may lead to error in Execution per the MS Policies. To enable the Script to run do:
     Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
2. Login to firebase, using the link provided and the account used for creating the Project in Firebase.
   firebase login
3. For starting the project and setting it to use Firebase, do on the project's root dir:
   firebase init
   • Follow instructions, namely checking the RT DB support and choosing the correct project (should be listed due to the previous login).

Refs 📚

• Installation & Setup in JavaScript
• Firebase Realtime Database
  • Structure your DB on Firebase's documentation
  • Read and Write Data
    • Listen for Value events
    • Detach Listeners
    • Work with data offline
• Anonym Authentication
• Firebase: Real time DB Rules
  • Examples for access
• Ways to add the Web SDKs to your app
• Samples for Firebase
  • sample project for RT
• Firebase API reference
• Run a local web server with npm's http-server