Connecting a UI5 Web App with Google Firebase

[et_pb_section admin_label=”section”] [et_pb_row admin_label=”row”] [et_pb_column type=”4_4″][et_pb_text admin_label=”Text”]

Introduction

Are you looking to connect your UI5 web application with the powerful capabilities of Google Firebase? Look no further! In this comprehensive tutorial, we will guide you through the process of seamlessly integrating your UI5 web app with Google Firebase, allowing you to leverage Firebase’s robust features for authentication, real-time database, cloud storage, and more.

Connecting a UI5 web app with Google Firebase opens up a world of possibilities for enhancing your application’s functionality and user experience. With Firebase’s easy-to-use APIs and intuitive interfaces, you can effortlessly incorporate features like user authentication, allowing your users to securely log in and access personalized content. Additionally, Firebase’s real-time database empowers you to create dynamic, collaborative applications by enabling instant data synchronization across multiple devices.

But that’s not all! By integrating Firebase’s cloud storage, you can effortlessly store and retrieve files, images, and other media assets, ensuring a seamless experience for your users. And with Firebase’s powerful hosting capabilities, deploying and scaling your UI5 web app becomes a breeze.

In this tutorial, we will provide you with a step-by-step guide, complete with code examples and best practices, to ensure a smooth and successful integration process. Whether you’re a UI5 developer looking to enhance your app’s functionality or an aspiring developer eager to learn about the power of Firebase, this tutorial is perfect for you.

Unlock the true potential of your UI5 web app by connecting it with Google Firebase. Join us on this exciting journey and take your application development to new heights!

Steps for Connecting a UI5 Web App with Google Firebase

To connect a UI5 web app with Google Firebase set up a Firebase project. Visit the Firebase console (console.firebase.google.com) and create a new project. Provide a name for your project and choose the desired Firebase services you want to use, such as Authentication, Realtime Database, Cloud Storage, and Hosting.

Step 01: Create an App in Firebase

Step 02: Create a new UI5 App, and add these firebase scripts within index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>firebaseApp</title>
        <script id="sap-ui-bootstrap"
            src="resources/sap-ui-core.js"
            data-sap-ui-theme="sap_fiori_3"
            data-sap-ui-resourceroots='{"firebaseApp.firebaseApp": "./"}'
            data-sap-ui-compatVersion="edge"
            data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
            data-sap-ui-async="true"
            data-sap-ui-frameOptions="trusted">
        </script>
         <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.23.0/firebase-storage.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-functions.js"></script>
        
    </head>
    <body class="sapUiBody">
        <div data-sap-ui-component data-name="firebaseApp.firebaseApp" data-id="container" data-settings='{"id" : "firebaseApp"}'></div>
    </body>
</html>

 

Step 03: Create a new file Firebase.js in js folder and given code:

sap.ui.define([
    "sap/ui/model/json/JSONModel",
], function (JSONModel) {
    "use strict";
    return {
        // Firebase-config retrieved from the Firebase-console
        initializeFirebase: function () {
            // Replace with your config here
            const firebaseConfig = {
                apiKey: "<your API Key>",
                authDomain: "<your authDomain>",
                projectId: "<your projectId>",
                storageBucket: "<your storageBucket>",
                messagingSenderId: "<your messagingSenderId>",
                appId: "<your appId>",
                measurementId: "<your measurementId>"
            };
            // Initialize Firebase with the Firebase-config
            firebase.initializeApp(firebaseConfig);

            // Create a Firestore reference
            const firestore = firebase.firestore();

            // Create a Authentication reference
            const fireAuth = firebase.auth();

            // Get Firebase Instance
            const oFirestore = firebase.firestore;

            // Create a Fire Storage reference
            const fireStorage = firebase.storage();

            // Create a Fire Functions reference
            const fireFunctions = firebase.app().functions('asia-east2');

            // Firebase services object
            const oFirebase = {
                firestore: firestore,
                fireAuth: fireAuth,
                oFirestore: oFirestore,
                fireStorage: fireStorage,
                fireFunctions: fireFunctions
            };

            // Create a Firebase model out of the oFirebase service object which contains all required Firebase services
            var fbModel = new JSONModel(oFirebase);

            // Return the Firebase Model
            return fbModel;
        }
    };
});

Step 04: Set Firebase Model in component.js as shown below:

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "Healthbridge-admin/Healthbridge-admin/model/models",
    "Healthbridge-admin/Healthbridge-admin/js/Firebase"
], function (UIComponent, Device, models, Firebase) {
    "use strict";

    return UIComponent.extend("Healthbridge-admin.Healthbridge-admin.Component", {

        metadata: {
            manifest: "json"
        },

        /**
         * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
         * @public
         * @override
         */
        init: function () {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);

            // enable routing
            this.getRouter().initialize();

            // set the device model
            this.setModel(models.createDeviceModel(), "device");

            // set the app Config model
            this.setModel(models.createAppConfigModel(), "AppConfig");

            //set Firebase Model
            this.setModel(Firebase.initializeFirebase(), "fbModel");

        }
    });
});

Step 05: Check if you can fetch Authentication details by using the below code in onInit or _handleRouteMatched or onAfterRendering

var fireAuth = this.getView().getModel("fbModel").getData().fireAuth;
console.log(fireAuth);

 

 

 [/et_pb_text][/et_pb_column] [/et_pb_row] [/et_pb_section]

Author

  • Barry Allen

    A Full Stack Developer with 10+ years of experience in different domain including SAP, Blockchain, AI and Web Development.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.