DEV Community: Manoj Kumar Mishra

Oracle ERP cloud GUI in VueJS

Manoj Kumar Mishra — Tue, 02 Aug 2022 07:37:00 +0000

Few months back Oracle ERP cloud was introduced in my work place for handling internal processes. I tried to find ways to connect JavaScript front-end frameworks like React/Vue to access oracle cloud erp data but could not find much on internet. In this post we will try to explore a way of accessing Oracle Fusion Cloud REST APIs using Vuejs/Laravel for creating a Dashboard. We will be using Veutify css framework to show the data in tables and use pagination and search features. Link to github repo and specific code for and an example api - salesOrdersForOrderHub.

Oracle ERP provides a GUI like below for users, but in case we want to use ERP data for another web application we need to use REST APIs provided by Oracle cloud. Oracle REST APIs allow all the options of REST APIs like CRUD depending on the API type. We can read more about oracle REST APIs here.

To trigger the APIs via JavaScript in browser eg Vuejs, we need to allow CORS from Oracle Erp end. If we run JavaScript from CLI eg nodeJS/expressJS, we do not need to allow CORS and it will work. As per Oracle Docs, CORS can be allowed for any origin[from browser], but depending on your organization policy, this might or might not be possible.

In my organization this was not possible so to trigger the APIs towards Oracle ERP we are using a backend, it can be in any language like Python, NodeJS/express, PHP etc. We are using Laravel and workflow is given in below image.

In this example we will be using oracle erp api - salesOrdersForOrderHub

This api can be accessed on any of the rest api testing application like Postman or Insomnia.

Laravel code:

    public function getjobs(Request $request)
        {
        if($request->search)
        {
                $res=Http::withBasicAuth('USER', 'PASSWORD')
            ->asForm()->get("$this->SERVER/fscmRestApi/resources/11.13.18.05/salesOrdersForOrderHub"
                , ['limit' => 25,'orderBy'=>'LastUpdateDate:desc','totalResults'=>'true','finder'=>"findByOrderNumber;OrderNumber=$request->search" ]);
            return $res;
        }
        else{
            $offset= $request->offset;
            $res=Http::withBasicAuth('USER', 'PASSWORD')
            ->asForm()->get("$this->SERVER/fscmRestApi/resources/11.13.18.05/salesOrdersForOrderHub"
                , ['limit' => 25,'orderBy'=>'LastUpdateDate:desc','totalResults'=>'true','offset'=>$offset ]);
            return $res;
        }
   }

We are using vueJs to trigger this api code on this link. Vuetify data table with pagination is used here to show the output on screen.

Showing JSON output for one order and editing

To output one record we are using vue-json-tree-view library as below. We can also edit parameters as per Oracle erp rules and save the output using these api's.

Like this we can access any of the allowed APIs of Oracle ERP cloud. Many of them are available in the above mentioned github repo. Suggestions and feedback will be greatly appreciated.

Thank you.

VueJs Component interaction: props and events

Manoj Kumar Mishra — Fri, 29 Jul 2022 02:24:17 +0000

In this post we are going to see how to pass data from parent to child component and vice versa in VueJS. We will be using a small web app for showing the working of both these methods. working demo , github link, stack-overflow link.

Best way for passing data in front-ends like vuejs is to use state management like vuex or pinia which I will cover in my other posts, but sometimes we do not need them in small applications. In such cases we need to use props and events. Props for passing data from Parent to Child and Events for passing data from child to parent component.

Files and Components

We have 3 vue components here
Brew.vue - parent component, accesses breweries apis and passes to childs via props.
BrewList.vue - child component, shows list of breweries on left side
BrewMap.vue- child component, shows the breweries on map on right side.

Overall data flow

Props: Parent to child
We are accessing brewery list via an api parent component Brew.vue and passing it to child component BrewList.vue and BrewMap.vue . Brew.vue parent component is sending brew prop to BrewList.vue child. While passing the brewery list prop, we also added a parameter iconsize which will be used in BrewMap to show the icon on map.

We are accessing the props sent by parent component in child BrewList.vue and listing them in a table as below. we can also watch prop in child components using watcher and check the values.

Events: Parent to Child

Now comes the events part where are going to pass mouse over and mouse leave event information from BrewList.vue child to parent Brew.vue . So whenever we are entering mouse on BrewList.vue breweries names, it triggers these events and passes to Brew.vue parent.

Parent Brew.vue is accessing these events and attaching them to methods for changing the iconsize to large or normal which is visible on BrewMap.vue leaflet map.

Thank you.

Various ways of finding user location and showing on Leaflet maps : ReactJS

Manoj Kumar Mishra — Fri, 15 Jul 2022 22:54:59 +0000

In this post we are going to see an example of finding user location and showing it on leaflet interactive map using javascript/ReactJS. It will ask for browser permission to access user location(coordinates) and use google geocode api to find the location. If browser location permission is denied, it will find the location of your device public ip address.

Demo of this example can be seen here, github code. I have been using the same logic and javascript code for my company website to find the user location and show the content based on different states in Australia.

Folder structure:

This is very simple web application, below is the folder structure of this web app. All the JavaScript code is included in App.js . We are using google geocoding api to find the location address. Its key needs to be saved in env file.

Finding user coordinates:

To show any location on map, we need to have the coordinates of that location ie latitude and longitude. Once we have lat, long, we can use them to find the location address using various APIs.
The W3C Geolocation API is a standard way to retrieve the geographical location information for a client-side device. It allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information.
Browsers Navigator object has methods and properties about the application running the script. The Geolocation API is accessed via a call to navigator.geolocation; this will cause the user's browser to ask them for permission to access their location data. So either user will allow the location access or block it.

Case 1: Location access allowed via browser

In this case when user allows location access, this web app uses google geocoding api to find the location address using user coordinates.

We can also use other apis like geonames api for this. For geonames api we do not need any secret key (we do require key for google geocode api above)

Case 2: Location access blocked via browser

When user access access is not provided, it will use ipapi.co API to find the device public ip address.

There are many other APIs we can use for finding the public ip location, some of them are as below, information about them can be found here.

1: geoipify.whoisxmlapi.com
2: geo.ipify.org
3: IPInfo.io
4: DB-IP.com
5: IP2Location.com
6: IPData.co
7: IPGeolocation.io
8: IPStack.com
9: ClearIP.io
10: IPWhois.io

Showing location coordinates on map:

We are using Leaflet JavaScript library for interactive maps.

Thank you

Using youtube v3 APIs to list and search channel videos and use vue-infinite-loading

Manoj Kumar Mishra — Tue, 12 Jul 2022 22:35:03 +0000

In this post we are going to see an example of using PeachScript/vue-infinite-loading and youtube v3 APIs to infinitely load and search youtube videos of a channel.

Demo of this example can be seen here , and code can be found on github link here.

Folder Structure

src folder structure is as below.

Files

This is a single page application(SPA) having two main components/pages - Home page, About page(for search).
External dependencies used in this app are- axios ( for accessing youtube apis), moment ( formatting date/time) and vue-infinite-loading (for infinite scroll feature).

Home.vue- main file which loads when this SPA is opened on browser

VideoGridItem.vue- component used to show single video grid on home/search page
About.vue- Component used for searching videos

SearchResults.vue- Component where Home/About pages forward all the video results. It loops through them to show each of them on VideoGridItem.vue.
SearchForm.vue- search bar

Header.vue- top bar
api.config.js- points to youtube api key saved in .env file
env file- has VUE_APP_YOUTUBE_API_KEY=yourkey

Find channelId of a youtube channel

To get the videos of a channel first we need to find the channelId using youtube channel name(Here we are using TraversyMedia channel).

Find playlistId using channelId

Now to get playlistId, please replace C with U in channelId (UCxxxxxxxx => UUxxxxxxxx), and use it in below api to get the channel videos.

Search videos of this channel

All above snippets are from Home.vue. For searching videos of this channel we are using About.vue. Youtube has different API for searching the videos.

Find view count of a video

We need to use below API to find the view count of a video. We are using videoId from the output of above APIs inside this API.

vue-infinity-loading

To implement the infinity scroll feature, we need to use nextPageToken field we got in the response of above apis.

Thank you