In this tutorial you will extend the Storefront using a micro service. The aim is to give helpful Tips to the undecided purchaser. You will run the Tips micro service locally and connect it to YaaS Storefront. The tips are communicated via REST calls to YaaS Storefront.
You will learn
You will learn how to customize your Storefront using a micro service. The Storefront is structured around Angular Modules. The aim of this tutorial is to include a button in your Storefront’s Product Details page that gives helpful Tips to the undecided purchaser, such as “This would add to your overall coolness”, and “One word: No”. To achieve this, you will run a new micro service locally to provide the tips, and add a button to your StoreFront that calls this. The tips are communicated via REST calls to your YaaS Storefront.
You will get most from this tutorial if you already have basic knowledge of Node.js, Angular and Restangular. If you are not already familiar with them and would like to dive into the code, you can follow the provided links to start learning.
Step 1: View the default Angular Modules
Locate your yaas-storefront folder which we will refer to below. View the default Angular Modules that are included in your Storefront @ (1)/public/js/app. You can extend the Storefront’s functionality by adding your own Angular Modules to these. In this tutorial you will add a new Angular Module to support the “Mr Tip” functionality.
NOTE: Each Angular Module provides the support for a specific piece of business functionality such as Products, Customers, Cart etc. Each Angular Module contains all the different parts required for that in your application, such as controllers, services, filters, etc.
Compile and deploy the new micro service that stores and delivers Tips:
Run javac -version to confirm that you have Java installed. If not, follow instructions on Oracle Website to download and install the Java SE Development Kit. Remember to set your JAVA_HOME environment variable to point to your JDK directory, and confirm that javac -version then runs.
Run mvn -v to confirm that you have maven installed. If not, follow instructions on Apache Maven Website, and confirm that mvn -v then runs.
Compile and package the micro service into a war file: Run the mvn clean package command from within (2)/yaasbite200.
Execute the micro service locally by running java -jar target/yaasbite2-1.0-SNAPSHOT.war from within (2)/yaasbite200.
Confirm that you can reach the front-end-client @http://localhost:8080 and use this to populate the service with Tips such as “Oh My GOD YES!!!”, “One word: No”, “That would suit your hamster”
NOTE: Please keep the micro service running. You will use this in the next steps.
With the Tips micro service running locally, you can now extend your StoreFront to include a button on its product detail page, that calls this service, and thus provide tips to the undecided purchaser. To do this you need to modify some files in the yaas-storefront folder (1). Place all the files that are in (2)/yaasbitestorefrontdeltas/two into their respective locations in the yaas-storedfront folder (1), overwriting the original files:
For example: file file product-detail-ctrl.js located in (2)/yaasbitestorefrontdeltas/two/public/js/app/products/controllers/product-detail-ctrl.js should replace the one in (1)/yaas-storefront/two/public/js/app/products/controllers/product-detail-ctrl.js
Confirm that your Tip micro service is still running, then run npm start in folder (1), to restart your Storefront web server. Open the Storefront in Chrome @http://localhost:9000 and browse to a product page.
The “Mr Tip” button is getting its Tips from your Service. Open Chrome’s Developer Tools (Chrome > View > Developer > Developer Tools) and observe the REST Traffic that is happening behind the scenes between the Storefront and your Service.
Search for ADJUSTED_AS_NEEDED in the files you added, to see how this extra logic has been added.
In this tutorial you extended the YaaS Storefront functionality using the Tips micro service. The micro service provided tips to a button in the storefront in order to help undecided purchasers with their shopping. The next step will be to back the YaaS storefront with your own customized YaaS project.