Firebase SAPUI5 - Simple Real Time Application

Halo...

pada postingan ini saya akan sharing membuat aplikasi real time sederhana dengan sapui5 dan firebase. sebelum mulai, bagi teman-teman yang belum tau apa itu firebase mungkin bisa dibaca-baca dulu diblog2 yang membahas firebase dan bagaimana cara mendaftar akun firebase dan cara membuat database firebase karena di postingan ini saya tidak menjelaskan itu dan hanya fokus pada pembuatan aplikasi real time sederhana sapui5 dan firebase.

ok langsung saja kita mulai, pertama kita masuk dulu ke firebase console dan kita buat project baru, dan kebetulan saya sudah membuat project dengan nama EXAM setelah itu masuk ke project EXAM dan atur rules dengan mengikuti step-step seperti berikut :

rubah menjadi true write and read

setelah itu klik bagian yang ditandai kotak merah diatas kemudian copy source berikut dan kita masukkan kedalam project ui5.

kemudian kita buka eclipse dan buat project baru sapui5, jika belum tau cara membuat project baru di sapui5 bisa dilihat DISINI , kita buat project baru dengan nama ui5FIrebase untuk default view kita buat dengan nama index, kemuadian buka file index.html lalu rubah source code nya menjadi seperti berikut :

buat folder baru dengan nama asset didalam WebContent dangan tambahkan file baru dengan nama frbs.js dan tambahkan source code berikut :

kemudian buka file index.view.js dan tambahkan source code berikut :

var label1 = new sap.m.Label({

text : 'Name'

})

var label2 = new sap.m.Label({

text : 'Email'

})

var label3 = new sap.m.Label({

text : 'Address'

})

var txtNama = new sap.m.Input({

id:'txtName',

showValueHelp:true

})

var txtEmail = new sap.m.Input({

id:'txtEmail'

})

var txtUrl = new sap.m.Input({

id:'txtImgURl'

})

var btnSave = new sap.m.Button({

text:'Save',

icon:'sap-icon://save',

press:function(){

if(action == "Add"){

oController.onAddData();

}else if(action == "Edit"){

press:oController.onEditData();

}

}

})

var btnEdit = new sap.m.Button({

text:'Edit',

icon:'sap-icon://edit',

press:function(){

action = 'Edit';

oController.onOpenDialog(action);

}

})

var btnHapus = new sap.m.Button({

text:'Delete',

icon:'sap-icon://delete',

press:oController.onDeleteData

})

var btnDialog = new sap.m.Button({

text:'Add',

icon:'sap-icon://add-document',

press:function(){

action = 'Add';

oController.onOpenDialog(action);

}

})

var btnCloseDialog = new sap.m.Button({

text:'Cancel',

icon:'sap-icon://close',

press:function(){

oController.onCloseDialog();

}

})

var oTableUI = new sap.ui.table.Table("uiTable",{

selectionMode : sap.ui.table.SelectionMode.Single,

navigationMode: sap.ui.table.NavigationMode.Scrollbar,

selectionBehavior: sap.ui.table.SelectionBehavior.Row,

alternateRowColors:true,

enableColumnReordering:true,

enableCellFilter:true,

visibleRowCount:8

})

oTableUI.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "User ID"}),

    template: new sap.ui.commons.TextField().bindProperty("value", "userid") 

  }));

oTableUI.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "Name"}),

    template: new sap.ui.commons.TextField().bindProperty("value", "username") 

  }));

oTableUI.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "Email"}),

    template: new sap.ui.commons.TextField().bindProperty("value", "email")

  }));

oTableUI.addColumn(new sap.ui.table.Column({

    label: new sap.ui.commons.Label({text: "Address"}),

    template: new sap.ui.commons.TextField().bindProperty("value", "address")

  })); 

oTableUI.attachRowSelectionChange(function(oEvent) { 

oController.onTableKlik(oEvent);

})

var oDialog = new sap.ui.commons.Dialog("oDialog",{

title: "Add New Data",

width: "500px",

height: "400px",  

resizable: true,

modal:true,

showCloseButton:false

});

var oPanel = new sap.m.Panel("oPanel",{

content:[label1,txtNama,label2,txtEmail,label3,txtUrl,btnSave,btnCloseDialog]

})

  return new sap.m.Page({

title: "CRUD SAPUI5 Firebase",

content: [btnDialog, btnEdit, btnHapus, oTableUI

]

});

dan tambahkan source berikut didalam index.controller.js

onInit: function() {

var oModel = new sap.ui.model.json.JSONModel();

var oTable = sap.ui.getCore().byId("uiTable");

database.ref('users').on('value', function(snapshot) {

dtJS = [];

oModel.refresh();

snapshot.forEach(function(childSnapshot) {

  items = {};

  items.userid   = childSnapshot.key;

  items.username = childSnapshot.val().username;

      items.email    = childSnapshot.val().email;

      items.address  = childSnapshot.val().address;

      dtJS.push(items);

      console.log(childSnapshot.key);

    });

oModel.setData(dtJS)

oTable.setModel(oModel);

    oTable.bindRows("/");

});

},

onAddData: function(){

if(key == 0){

key = 1;

}

var name = sap.ui.getCore().byId("txtName");

var email = sap.ui.getCore().byId("txtEmail");

var pic = sap.ui.getCore().byId("txtImgURl");

var dialog = sap.ui.getCore().byId("oDialog");

database.ref('users/' + key).set({

username: name.getValue(),

email   : email.getValue(),

address : pic.getValue()

});

name.setValue("");

email.setValue("");

pic.setValue("");

dialog.close();

},

onEditData: function(){

if(selectedKey == null){

alert("No Data Selected");

}else{

var name = sap.ui.getCore().byId("txtName");

var email = sap.ui.getCore().byId("txtEmail");

var pic = sap.ui.getCore().byId("txtImgURl");

var dialog = sap.ui.getCore().byId("oDialog");

database.ref('users/' + selectedKey).update({

username: name.getValue(),

email   : email.getValue(),

address : pic.getValue()

});

dialog.close();

}

selectedKey = null;

name.setValue("");

email.setValue("");

pic.setValue("");

},

onDeleteData: function(){

if(selectedKey == null){

alert("No Data Selected");

}else{

database.ref('users/' + selectedKey).remove();

}

var name = sap.ui.getCore().byId("txtName");

var email = sap.ui.getCore().byId("txtEmail");

var pic = sap.ui.getCore().byId("txtImgURl");

name.setValue("");

email.setValue("");

pic.setValue("");

selectedKey = null;

},

onTableKlik: function(oEvent){

var oTable = sap.ui.getCore().byId("uiTable");

var idx = oTable.getSelectedIndex()

if (oTable.isIndexSelected(idx)) {

var cxt = oTable.getContextByIndex(idx);

        var path = cxt.sPath;

        var obj = oTable.getModel().getProperty(path);

        

        selectedKey = obj.userid;

        

        var name = sap.ui.getCore().byId("txtName");

var email = sap.ui.getCore().byId("txtEmail");

var pic = sap.ui.getCore().byId("txtImgURl");

name.setValue(obj.username);

email.setValue(obj.email);

pic.setValue(obj.address);

}

},

onOpenDialog: function(action){

var dialog = sap.ui.getCore().byId("oDialog");

var panel = sap.ui.getCore().byId("oPanel");

var name = sap.ui.getCore().byId("txtName");

var email = sap.ui.getCore().byId("txtEmail");

var pic = sap.ui.getCore().byId("txtImgURl");

if(action == "Add"){

dialog.addContent(panel);

dialog.open();

}else if(action == "Edit"){

if(selectedKey == null){

alert("No Data Selected");

}else{

var oTable = sap.ui.getCore().byId("uiTable");

var idx = oTable.getSelectedIndex()

if (oTable.isIndexSelected(idx)) {

var cxt = oTable.getContextByIndex(idx);

        var path = cxt.sPath;

        var obj = oTable.getModel().getProperty(path);

        

        selectedKey = obj.userid;

       

name.setValue(obj.username);

email.setValue(obj.email);

pic.setValue(obj.address);

dialog.addContent(panel);

dialog.open();

}

}

}

},

onCloseDialog: function(){

var dialog = sap.ui.getCore().byId("oDialog");

dialog.close();

selectedKey = null;

}

sekarang coba jalankan aplikasi dan semoga bermanfaat

terimakasih :D

Download SAP Data Dengan RFC & C# WCF Web Service dan SQL Server Part2

Ok melanjutkan postingan saya Sebelumnya untuk membuat wcf web service dengan Visual Studio 2015. langsung saja buka Visual Studio-nya dan buat project baru

Setelah membuat project baru, selanjutnya kita tambahkan libarary RFC Connector kedalam project dengan cara klik kanan pada References->Add Reference

lalu pilih sapnco.dll dan sapnco_util.dll, untuk library nya bisa di download DISINI

kemudian kita tambahkan satu class baru kedalam project dengan nama rfc_Connector

dan didalam class rfc_Connector kita implement interface IDestinationConfiguration dan jangan lupa import name space SAP.Middleware.Connector 

lalu pada bagian RfcConfigParameters tambahkan source code berikut :

lalu kita tambahkan dataset baru kedalam project :

kemudian kita tambahkan table adapter didalam dataset, ikuti gambar berikut untuk menambah table adapter

Kemudian kita tambahkan satu class baru lagi kedalam project dengan nama GlobalData

tambahkan global.asax

Buka file IService1 dan tambah source code berikut :

Buka file Service1.svc dan implement interface yang sudah kita tambahkan pada Iservice1 dan tambahkan name space seperti pada gambar

setelah kita implement interface maka akan terbentuk sebuah method baru dengan nama Download_ZMARA

Berikut Source Code lengkap didalam Service1.svc

string message;
        string status;
        public string Download_ZMARA(string matnr)
        {
            try
            {
                IRfcFunction getDataSAP = GlobalData.rfcRepository.CreateFunction("ZDLMARA");
                getDataSAP.SetValue("P_MATNR", matnr);

                try
                {
                    getDataSAP.Invoke(GlobalData.rfcDestination);
                }
                catch (Exception ex)
                {

                    if (ex.Message.Contains("DATA_NOT_FOUND"))
                    {
                        status = "sukses";
                    }
                    else
                    {
                        status = "gagal";
                    }


                    message = "SAP ZDLMARA ";
                    message += ex.Message;
                    return message;
                }


                IRfcTable IT_MARA = getDataSAP.GetTable("IT_MARA");
                DataSet1 dsUniversal = new DataSet1();

                DataTable dtMARA = dsUniversal.Tables["ZMARA"];

                dtMARA = CreateDataTable(dtMARA, IT_MARA);

                SqlConnection con = GetSQLConn();
                if (con.State == ConnectionState.Closed)
                {
                    con.Open();
                }
                SqlTransaction transaction = con.BeginTransaction();

                SqlCommand command = new SqlCommand("SP_Update_ZMARA", con);
                command.Transaction = transaction;
                command.Parameters.Add(new SqlParameter("@tblZmara", SqlDbType.Structured));
                command.Parameters["@tblZmara"].Value = dtMARA;
                command.Parameters["@tblZmara"].TypeName = "zmaraType";

                command.CommandType = System.Data.CommandType.StoredProcedure;
                command.CommandTimeout = 600000;
                int result = command.ExecuteNonQuery();

                transaction.Commit();
                transaction.Dispose();
                IT_MARA.Clear();
                message = "Download data completed. ";
                message += "ZMARA :" + dtMARA.Rows.Count + " rows. ";
            }
            catch (Exception x)
            {
                return x.Message;
            }

            return message;
        }


        public string GetAppSetting(string key)
        {
            try
            {
                return ConfigurationManager.AppSettings[key];
            }
            catch (Exception)
            {
                return "";
            }
        }

        public SqlConnection GetSQLConn()
        {
            string ConnString = GetAppSetting("ConnString");
            SqlConnection koneksi = new SqlConnection(ConnString);
            return koneksi;
        }

        rfc_Connector konstruktor = new rfc_Connector();

        //function for register to SAP server
        public void Register()
        {

            if (RfcDestinationManager.IsDestinationConfigurationRegistered())
            {
                rfc_Connector konstruktor = new rfc_Connector();
                RfcDestinationManager.UnregisterDestinationConfiguration(konstruktor);
            }
            RfcDestinationManager.RegisterDestinationConfiguration(konstruktor);

        }

        public static DataTable CreateDataTable(DataTable dt, IRfcTable rfcTable)
        {
            foreach (IRfcStructure row in rfcTable)
            {
                DataRow newRow = dt.NewRow();
                for (int element = 0; element < rfcTable.ElementCount; element++)
                {
                    RfcElementMetadata metadata = rfcTable.GetElementMetadata(element);
                    var nrow = newRow[element];
                    var rrow = row.GetString(metadata.Name);
                    newRow[element] = row.GetString(metadata.Name);

                }
                dt.Rows.Add(newRow);
            }

            return dt;

        }

Configurasi web config

sampai disini web service sudah bisa kita jalankan dan coba download data sap, kita cek apakah data berhasil masuk ke database SQL Server atau tidak.

tambahan sedikit, jika menemukan error kurang lebih seperti gambar berikut :

cara mengatasinya adalah masuk ke regedit :

HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\12.0\WebProjects

HKEY_CURRENT_USER\Software\Microsoft\VisualStudio\14.0\WebProjects

terus double klik Use64BitIISExpress lalu ruba nilai 0 jadi 1 kemudia restart visual studio dan IIS lalu jalankan kembali web service nya.

ok cukup sekian sharing kali ini semoga bermanfaat. :D, yang berminat project lengkapnya bisa tulis email dikolom komentar :D

Download SAP Data Dengan RFC & C# WCF Web Service dan SQL Server Part1

Pada postingan kali saya akan berbagi cara mendownload data dari SAP ke database SQL Server dengan fitur RFC yang ada pada SAP melalui WCF web service C# dengan tools visual studio 2015.

di beberapa perusahaan terkadang membutuhkan data yang ada di system SAP untuk digunakan di aplikasi-aplikasi yang dikembangkan diluar SAP dengan database yang berbeda dari SAP dan salah satu fitur yang bisa digunakan untuk menurunkan data dari SAP ke system diluar SAP adalah RFC (Remote Function Call). 

ok kita langsung saja pada pokok pembahasan, untuk contoh saya akan mendownload data dari table (MARA-MATNR, MAKT-MAKTX, MARA-MEINS, MARA-MATKL, MARA-MTART). ada beberapa step yang akan kita lakukan yaitu :

1. SAP

    - Membuat structure untuk sesuai dengan field2 yang akan kita download

    - Membuat function untuk mengambil data.

2. SQL Server

    - Membuat Database

    - Membuat Table

    - Membuat Table Type

    - Membuat Stored Procedure

3. Visual Studio-> Create New Project WCF WebService.

Pada postingan kali ini saya akan membahas point no 1 dan 2 yaitu SAP dan SQL Server.

SAP

-> Membuat Structure

    untuk membuat structure kita jalankan tcode SE11

-> Membuat Function

    masuk ke tcode SE37 dan buat function baru

Sampai pada tahap ini untuk persiapan di SAP sudah selesai, selanjutnya kita akan menyiapkan database di SQL Server sebagai tujuan untuk menyimpan data yang akan kita download dari SAP.

SQL Server

-> Membuat Database

    Nama database yang akan kita buat EXAM atau bisa diganti sesuai keinginan

-> Membuat Table

    kita akan membuat table dengan nama ZMARA dan structurenya seperti berikut :

note : panjang data minimal harus sama dengan yang di SAP

-> Membuat Table Type

    Table type structurenya harus sama dengan table yang sudah dibuat

    CREATE TYPE [dbo].[zmaraType] AS TABLE(

[matnr] [varchar](50) NOT NULL,

[maktx] [varchar](50) NULL,

[meins] [varchar](3) NULL,

[matkl] [varchar](9) NULL,

[mtart] [varchar](4) NULL

      )

-> Membuat Stored Procedure

CREATE PROCEDURE [dbo].[SP_Update_ZMARA]

-- Add the parameters for the stored procedure here

@tblZmara zmaraType readonly

AS

BEGIN

-- SET NOCOUNT ON added to prevent extra result sets from

-- interfering with SELECT statements.

SET NOCOUNT ON;

MERGE INTO zmara T1

      USING @tblZmara T2

      ON T1.[matnr] = T2.[matnr]

      WHEN MATCHED THEN

  UPDATE SET 

T1.[MAKTX] = T2.[MAKTX],

T1.[MEINS] = T2.[MEINS],

T1.[MATKL] = T2.[MATKL],

T1.[MTART] = T2.[MTART]

  WHEN NOT MATCHED THEN

INSERT values(

T2.[MATNR], T2.[MAKTX], T2.[MEINS], T2.[MATKL], T2.[MTART]);

END

ok sampai disini persiapan dari sisi SAP dan SQL Server sudah selesai, untuk selanjutnya kita akan membuat Web Service di Visual Studio dan akan dibahas pada postingan Selanjutnya.

Terimakasih :D