Monday, October 24, 2016

PeopleSoft Fluid Author App

A PeopleSoft Mobile Fluid Application to show - Author and their books based on the keyword entered by the User. The application uses Peoplesoft Integration Broker and GoodReads API to show the data. This article is applicable for PeopleSoft Application only.

Application in Action


Functional Overview
The aim of the application is to cover PeopleSoft Fluid, IB and WebServices technologies. "Author App" encompasses all these technical features. Application is accessible via Fluid Dashboard , from there users can enter keyword and GoodReads API  is invoked to fetch data. Data is parsed using PeopleCode and Bootstrap is used to present the data on the page. PeopleSoft Fluid can integrate best of both the world( PeopleSoft Architecture and Web technologies).



Architecture Diagram

Technical Overview

Will divide the technical section in below categories 

  1. Integration
  2. Coding - PeopleCode
  3. User Iterface


Integration
PeopleSoft support both Synchronous and Asynchronous Inbound & Outbound Integration. A listener can also be setup which will respond to any incoming request. This can be setup easily via Integration Broker technologies and Objects. This specific application does not require any confirmation back to the server and is an Inbound ( consume web service) type of integration , so we will use Asynchronous Inbound Integration. Now we don't require a listener since GoodReads API is not pushing any data to us.
We want the data to flow back  to us when we will request it. So instead of setting up a Listener or in PS Language Node/Queue/Operation we will do a simple IB API call using %IntBroker.ConnectorRequestUrl function. This function will invoke the URL entered and will respond with the data received from the URL. If its a secure call i.e. https , you will need to add the server key to the PeopleSoft keystore. PeopleTools provides tools to add key from the file to the keystore so that allows webserver to communicate with the API. If this is not present you might get a generic connection error.

Now lets look at the API Documentation. Document specifies that user need to pass a Developer Key and Author Name as Parameter. So register on GoogleReads API and they will provide you with a developer key.

Fluid Application need to do following
  • Read for user request submission.
  • Call API using appropriate parameters.
  • Check for exceptions in case of any data /network failure.
  • Parse incoming XML data.
  • Present the Data to the the user.

Development
PeopleCode ( Default Development language in PeopleSoft) will be main language which will handle all above events. PeopleSoft is an event driven language ( PageLoad, Field Change etc.), there are various options where you can write your code. For easy of portability and re-usability we will be using Application Packages which supports Object Oriented concepts. 

User Request submission ( Button press event)
We do a call to an Application Package function from our Component Button Change Event. This is the only code that will reside on our Component.



  • This will initialize the Application Package. App Package Class is a single class with multiple methods. This calls the class constructor, which performs validation on the input field.
  • The Button press method calls two APIs in succession an Author API, which finds the Author Full Name and ID based on our keyword and then a books API which fetches Book information by that Author, we need to pass the Author ID fetched in step1 here as parameter. We have created two different methods for both but their structure is same.
             
  • PeopleSoft XML Document class is used to parse the incoming message. 

  • Fluid page is based on the delivered simple layout template - ps_apps_content. HTML area is added to the page , this gives us the flexibility to add any JS and render the data.

User Interface

Tile Design 
Users access Fluid Applications using Fluid Dashboard, which is a collection of various Tiles ( they can also show active content.) Tile is developed using Adobe Tool. Tile should be 80*80 px image ( it uses various image formats )


Page Design

Main page is a simplistic design to not clutter the main screen in case application is being accessed from mobile. 
Search Field is on the same page to prevent number of clicks and Screen Transition.
These decisions will depend on the functionality of application.



The first two fields are PeopleSoft Objects , Button and Input Field. All the data is view only i.e. we are not saving any data in our database. They are fields of a Derived Table. 

Area below that is a PeopleSoft HTML object and we are passing our elements wrapped in Tags to the HTML Area. 


Thanks for reading 
Vivek







Monday, September 19, 2016

ESP8266 IoT project

LED State Control IoT Case Study

Aim

IoT project to control sensors via Internet. Project included development of User Interface/ Server Scripting and Electronics control. ESP8266 WiFi Micro controller was used to interact with sensors and connect to internet. User Interface was developed in AngularJS , Server side and API was developed in PHP with MYSQL.






Project Overview

User can control the state of the LED ( on and off) and RBG LED Color Control from the Website. Color selector is used to pass RGB values. ESP8266 is reading values from API, parsing it and then controller the LEDs.



Development Environment

       Arduino       AngularJS       Atom            


  1. User Interface - AngularJS provides easy data binding while performing API call backs, this reactive feature was very useful in passing user inputs to server while keeping the page responsive. Bootstrap was used for page design and formatting.
  2. Server Scripting - PHP provides an awesome environment to test out and deploy code. Wamp stack was used for development and GIT was used to deploy code to production environment. PHP was used to store values in MYSQL passed by AngularJS and create API which is consumed by ESP8266.
  3. Development IDE- Atom is an tool, its power to look simple yet provide rich features makes it an ideal lightweight development environment. Arduino is used for microcontroller programming.


Programming 
Architecture

User Interface consist of two input controls 
  1. Button to control LED switch state on and off
  2. Color selector to choose color. 
Change of state is send as a POST request to PHP which stores these values in MYSQL database. 

API - API is developed which when invoked will pass integer values , 10 Digit 1st digit a 0 or 1 for LED State on and off. Rest 9 Digits are RGB values , which can be parsed to pass to the sensor. 

Arduino sketch - connects to the internet then calls the API every 10 seconds ( this lag will take into account DB/ Network Lags) a smaller lag might make it hard to see the result if data is changed continuously. Upon successful receipt of the values, sensor state are switched. 



Electronics


      

ESP8266 - This is a WiFi chip with full TCP/IP stack and has microcontroller capability built in , so this does not require an additional microcontroller to control sensor. From the same board we can access internet and control ( read and write) sensors. This makes it ideal for IoT projects, voltage requirement is around 3.3V. nodeMCU ( lua programing) or Arduino firmware can be flahsed onto it. My experience with Arduino is good so I choose Arduino firmware. Program is simple its connecting to the internet to read API output and change Sensor state.


Lesson Learnt
  1. Code was also implemented to do a callback to read back database stored value( same api could be use for same purpose), this was rejected as multiple users could change LED state and hence page will never show the exact state of the values. This code was removed from the production version.
  2. A lot of time went into controller color of the RGB LED. I had an anode LED and I was not aware of it so programming it using cathode circuit consumed a lot of time. Always ensure the specs of hardware at hand.