Integrate your SAP Data into a Firebase App and vice-versa

In:

SAP Data Management

By:

Michele Angelo Pinton
Cover Image for Integrate your SAP Data into a Firebase App and vice-versa

If you are a Front-End Developer you probably love Firebase! It is Mobile-Backend-as-a-Service backed by Google, that provides to web and mobile App Developers all back-end functionalities they need, such as Authentication and Authorization, Real Time DB, Files Storage and also Cloud functions for building a micro-services architecture.

But if you are supposed to build a Business Application, it could likely be that you’ll have to integrate it with some data coming from an SAP back-end system or -vice versa – that you have to consume some data stored in Firebase DB into SAP, e.g. for analytical purposes.

In this article I will show how to build a Web App based on Firebase, that consumes data from an SAP back-end system.

We will use the well-known (at least to ABAPers) “BC_TRAVEL” data model, that is available in any SAP system, and we’ll create a web application that can consume its data content.

In the end, we will move from this classic SAPGUI visualization:

to this brand new Web-App screens:

You can preview the final result of the the demo application at this link here.

We now start our implementation exercise by using the Firebase REST API inside an ABAP program, so that we can store SAP data directly into Firebase DB.

For making it easier, I already developed a minimal Helper Library ready for use: http://alborghetti.github.io/ABAPFire/

To install this library in your system, you can use abapGit:

Create an executable program called ZABAPGIT and past the code you can download here.

Execute ZABAPGIT and click on clone, in the popup insert following data:

If everything goes well, you should have the help library installed (I developed it in an ABAP 740 System, but it should be compatible starting from ABAP 702):

As next step, you have to install the Google CA SSL certificate that you can download here. This is required because all traffic from and to Firebase is protected using HTTPS connections.

Start transaction STRUST and add the certificate under the Anonymous SSL Client Identity:

Now it is time to sign in into Firebase and create a new project, as soon as you have it, click on link “Add Firebase to your web app”:

This will open a pop-up with the configuration parameters you need for consuming Firebase services in your web App and also in the client ABAP program we are going to develop.

As soon as you have this info, create following ABAP program in your SAP system:

REPORT ztest_firebase.
 
TYPE-POOLS : slis.
DATA:
  firebase     TYPE REF TO zabapfire_cl_firebase,
  lcx_firebase TYPE REF TO zcx_abapfire_firebase,
  ls_config    TYPE zabapfire_cl_firebase=>ty_firebase_config.
 
PARAMETERS:
  p_email TYPE string LOWER CASE,
  p_pass  TYPE string LOWER CASE,
  p_path  TYPE  string LOWER CASE DEFAULT '/flights' OBLIGATORY.
 
AT SELECTION-SCREEN OUTPUT.
 
  LOOP AT SCREEN.
    IF screen-name = 'P_PASS'.
      screen-invisible = '1'.
      MODIFY SCREEN.
    ENDIF.
  ENDLOOP.
 
START-OF-SELECTION.
 
**********************************************************************
* Initialize App
**********************************************************************  
  ls_config-apikey = '[your_apikey]'.
  ls_config-authdomain = '[your_authdomain]'.
  ls_config-databaseurl = '[your_databaseurl]'.
  ls_config-messagingsenderid = '[your_messagingsenderid]'.
  ls_config-projectid = '[your_projectid]'.
  ls_config-storagebucket = '[your_storagebucket]'.
 
  firebase = zabapfire_cl_firebase=>initialize_app( ls_config ).
 
**********************************************************************
* Authenticate
**********************************************************************  
TRY.
      firebase->auth->authenticate_with_email(
        EXPORTING
        email = p_email
        password = p_pass ).
    CATCH zcx_abapfire_firebase INTO lcx_firebase.
      MESSAGE i000(zabapfire_msg) WITH lcx_firebase->get_text( )
        DISPLAY LIKE 'E'.
      EXIT.
  ENDTRY.
 
**********************************************************************
* Set data
**********************************************************************  
TYPES:
      BEGIN OF ty_abap,
        $key        TYPE string,
        carrid      TYPE s_carr_id,
        connid      TYPE s_conn_id,
        fldate      TYPE s_date,
        planetype   TYPE s_planetye,
        deptime     TYPE s_dep_time,
        cityfrom    TYPE s_from_cit,
        airpfrom    TYPE s_fromairp,
        cityto      TYPE s_to_city,
        airpto      TYPE s_toairp,
        carrname    TYPE s_carrname,
     END OF ty_abap.
  DATA:
    ls_parameters TYPE  zabapfire_cl_firebase_db=>ty_get_parameters,
    lt_abap       TYPE TABLE OF ty_abap,
    ls_fc         TYPE slis_fieldcat_alv,
    lt_fc         TYPE slis_t_fieldcat_alv.
 
  FIELD-SYMBOLS:
    <ls_abap>     TYPE ty_abap.
 
 
  SELECT
    sflight~carrid AS carrid
    sflight~connid AS connid
    sflight~fldate AS fldate
    sflight~planetype AS planetype
    spfli~deptime AS deptime
    spfli~cityfrom AS cityfrom
    spfli~airpfrom AS airpfrom
    spfli~cityto AS cityto
    spfli~airpto AS airpto
    scarr~carrname AS carrname
    FROM sflight
    INNER JOIN spfli ON spfli~carrid = sflight~carrid AND
                        spfli~connid = sflight~connid
    INNER JOIN scarr ON scarr~carrid = sflight~carrid
    INTO CORRESPONDING FIELDS OF TABLE lt_abap.
 
 
  TRY.
      firebase->db->set(
        EXPORTING
          path =  p_path
          child = lt_abap ).
    CATCH zcx_abapfire_firebase INTO lcx_firebase.
      MESSAGE i000(zabapfire_msg) WITH lcx_firebase->get_text( )
        DISPLAY LIKE 'E'.
      EXIT.
  ENDTRY.
 
  
  ls_fc-fieldname = '$KEY'.
   ls_fc-seltext_m = 'Firebase key'.
   ls_fc-lowercase = abap_true.
   APPEND ls_fc TO lt_fc. CLEAR ls_fc.
   ls_fc-fieldname = 'CARRID'.
   ls_fc-seltext_m = 'Carrier Id'.
   APPEND ls_fc TO lt_fc.
   ls_fc-fieldname = 'CONNID'.
   ls_fc-seltext_m = 'Connection Id'.
   APPEND ls_fc TO lt_fc.
 
   CALL FUNCTION 'REUSE_ALV_GRID_DISPLAY'     
     EXPORTING       
       it_fieldcat   = lt_fc    
     TABLES       
       t_outtab      = lt_abap   
     EXCEPTIONS       
       program_error = 1
       OTHERS        = 2.

Of course, you have to change following data with your Firebase project parameters:

**********************************************************************
* Initialize App
**********************************************************************  
  ls_config-apikey = '[your_apikey]'.
  ls_config-authdomain = '[your_authdomain]'.
  ls_config-databaseurl = '[your_databaseurl]'.
  ls_config-messagingsenderid = '[your_messagingsenderid]'.
  ls_config-projectid = '[your_projectid]'.
  ls_config-storagebucket = '[your_storagebucket]'.

This program is also assuming that you have activated the sign-in method Email/Password in Firebase console and that you have created a user:

Executing this program, in Firebase DB Console you should see the SFLIGHT data replicated into Firebase DB:

OK ABAP part is done! You can now create a web or mobile App that uses this data!

It is not topic of this article to explain how to build a web App! That would not be possible. But if you want, you can clone from following repository the demo App I built and reuse it:https://github.com/alborghetti/ABAPFire.app.git

This are the steps you have to follow:

  • Install GitHub desktop and clone the above repository in a local folder, or if you know how to do it, just clone the repository with git.
  • Install Node.js and NPM
  • Install Angular CLI (this App is based on Angular 2):
npm install -g @angular/cli
  • Go in the folder were you have cloned the App and install all Node Packages:
npm install
  • Change the Firebase configuration parameters in file .\src\environments\firebaseConfig.ts
    export const firebaseConfig = {
        // Paste all this from the Firebase console...    
        apiKey: 'your_apikey',
        authDomain: 'your_authDomain',
        databaseURL: 'your_databaseURL',
        projectId: 'your_projectId',
        storageBucket: 'your_storageBucket',
        messagingSenderId: 'your_messagingSenderId'
    };
  • Test the App
    ng serve

If everything is OK, you can access to http://localhost:4200/ and see the application running.

I think this proposed approach can work quite well for any mobile or web applications, whenever a limited interaction with SAP back-end is required (like – for instance – a business or user specific dash-board)

Of course, for other kinds of applications, such as a complete e-commerce solution, SAPUI5 and Fiori approach would be the best way to go for.

But if you just need – as I said – an application that consumes a more or less static set of data from your SAP system, with this demo you could implement it in an easier way, thus avoiding to set-up an SAP Fiori Architecture… process which might result quite demanding in time and effort consumption.

I hope you enjoyed this article and in case you have any further suggestions or questions, just contact me @ info@inquaero.com

Tags:
SAPSAPDATAMANAGEMENTSAPINTEGRATIONSAPFIREBASE

Latest Posts

Tags