Building UI Modules & Widget
Objectives
- Get more familiar with creating UI modules using SOAJS and AngularJs
- Get more familiar with creating a widget using SOAJS and AngularJs
Create Pet Store UI module
This UI module is found under /wiki/spaces/BL/pages/61906563 pillar in the Dashboard.
It lists the pets available in the store and give you the ability to manage this store using the API created here.
To learn how it is created, click here.
You can check the code here.
Create Orders UI module
This UI module is found under /wiki/spaces/BL/pages/61906563 pillar in the Dashboard.
It lists the orders from all the clients, so the admin can confirm or reject an order. He can also filter the orders.
To learn how it is created, click here.
You can check the code here.
Create the Widget
The widget is the frontend SDK where you use your APIs to have a functional website.
This widget is based on JavaScript, AngularJs, bootstrap and jQuery. It's a commercial widget unlike the Dashboard that's a management SDK.
The difference between the Dashboard SDK and the widget is mainly the theme. Unlike the widget, we find in the Dashboard a left menu related to the pillar clicked in the header.
Note that the widget could be written in any language and still benefit from urac, oauth and all the security provided by SOAJS.
You can check the code here.
Folder Structure
Widget flow
Go to your browser and enter petstore.soajs.org:81. The widget will open on the homepage where all the available pets are listed.
The user can either fill his cart without logging in or after logging in, so we have two scenarios:
- Scenario 1 - Anonymous User:
- The user adds to his cart
- Check his cart by clicking on the cart icon or word in the header
- Remove items from his cart in case of mind change
- Get back to the homepage in case the user want to add other items
- Finally go to the cart, click on checkout and you will be redirected to the login page to choose between 4 login methods: standard login, through Facebook, Twitter or Google+
2. Scenario 2 - Logged in User:
- After the user login, we merge his previous cart with the session cart in case of any
- The user can access his account to manage it
- The user can add to his cart
- The user can remove from his cart
- The user can checkout his cart
- The user can see his previous orders in My Orders page (only available if logged in)
The widget contains a search box located in the header. It's found in the homepage, cart and My Orders pages.