On the way....

PeopleSoft Fluid Author App

2016-10-24T06:19:00.002-07:00

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

Integration
Coding - PeopleCode
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

ESP8266 IoT project

2016-09-19T06:02:00.003-07:00

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

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.
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.
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

Button to control LED switch state on and off
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

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.
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.

When you have to rewrite the whole report

2015-12-30T12:25:00.001-08:00

Lamy Pen Modelling

2015-12-29T09:35:00.002-08:00

3d model of one of the finest fountain pen out there Lamy

Managers and Developers

2015-12-18T07:31:00.001-08:00

Small cartoon on IT :) Enjoy !!

Firing up digital painting

2015-10-19T02:45:00.002-07:00

Starting with the new tablet and digital painting.

Plums

2015-09-24T02:59:00.003-07:00

3d Plums...

Scculptris + Blender

Practice Session

2015-09-24T02:49:00.001-07:00

A cigar smoking bust :)

Model , Texture and Render in Blender.

Test Renders

Final Render

Happy Sick Day

2015-09-22T05:55:00.000-07:00

Celebrating the season full of sickness :) ... why not?

Drama at work

2015-09-21T10:00:00.002-07:00

Kungfu Tablet

2015-06-02T11:39:00.002-07:00

Finally configured the tablet properly on my mac. After lots of failed tries here is the least ugly of the images.. The kungfu kid... yes buddy you came into this world after a lot of fighting. :)

Service Center Cartoon

2015-05-31T11:43:00.000-07:00

Small cartoon depicting wonderful work done by the service center staff. With increase in electronics there are multiple service center cropping up ( doing not so excellent work). Two cartoons enjoying the situation

........Please fix it....

Oh and based on my personal experience , if you can't understand it , it must not have belong to the system --

Risk Management in IT

2015-05-26T10:55:00.002-07:00

Risk Mitigation IT Projects

IT Management and documentation

2015-05-26T10:52:00.002-07:00

Documents in IT

IT Appraisal for Programmer

2015-05-26T10:51:00.000-07:00

Cartoon about Appraisal in IT world !!

Worker Cartoon

2015-04-19T01:28:00.000-07:00

A small cartoon portraying different worker.

Post Man
Baddy
Cop
Netaji
Sweeper

Medium - Hand Drawn , digital ink.

Kids Flash Cards - Concept Art

2015-04-18T03:42:00.001-07:00

Concept art for Kids Flash Cards - Nursery Rhymes

Medium - Traditional Media Ink pen with Water Colors.

Inspired by below nursery rhymes -

Wheels on the bus go round and round
Humpty Dumpty sat on a wall
Hot Cross Buns
Ba Ba Ba Ba Black sheep
1-2-3-4-5 Once I caught a fish alive
Incy wincy spider

The Whale - Cut Out style animation

2015-01-07T12:34:00.002-08:00

A small cutout style animation done in blender. Not much from the story telling prospective. All artwork hand drawn using water color. A very great exercise glad to finish it :). Learned a lot of things from this.. little about animation, composition,color and sticking to a style. Wanted to extend the story but time was not on my side this time.

Video

Game Asset Art

2014-12-08T00:15:00.003-08:00

Couple of icon design for new mobile game.

Magic Potion Bottle

Design and developed in Blender.
Post work in Inkscape.

Battery Icon

Theme Flash Card - Pirate

2014-10-08T06:34:00.001-07:00

Launched new Android Application - Theme Based Flash Card. Application is intended to aid with kids learning with bright color art work to hold little attention.

Art work done in Inkscape and traditional media.
No ad supported hence a paid app.
Support Pirate theme and Color theme for now.
Plan to include more themes in same application.

Some snapshots

Google Play link

Bottle Concept Art

2014-09-16T03:18:00.001-07:00

Bottles and Botles, concept art for the application .

Hand Drawn images, inking with a ink pen and black ink. Compiled with inkscape.

Pirate Application Icon

2014-09-09T07:50:00.001-07:00

Designed a new icon for a kid android application - Pirate Flash Card.

Hand Drawn icon - Inking with Black Ink- Ink Pen. Compiled using Inkscape.

Concept Drawing for icon selection

Batman FanArt

2014-08-27T03:26:00.001-07:00

Some Batman fun Art.

Ah Joker replaces batman gun ... find out about these things at the worst time !!

Awesome technology dependent on batteries.

Cartoon Car in Watercolor

2014-02-02T14:49:00.001-08:00

A small rendering of a cartoon car in watercolor. This was a quick sketch and I choose watercolor to render out the image, loved the dirty feel of it rather then a cell like quality. I have never tried blendable markers, I think they are best for this kind of work. This was done on paper and the photograph is taken in a yellow light ( will post the scanned image when I get some time), the actual image is much vibrant.

TV Icon 3d

2014-01-21T11:19:00.004-08:00

Icon designed in blender. Designed for mobile phones.