Objectives: 

1. Learn how to deploy a full working APP on top of SOAJS (Pet Store)

2. Learn how to build UI Modules and deploy them in the Operate pillar of SOAJS DSBRD

3. Learn how to deploy a custom UI Frontend Interface for your APP with SOAJS
   - Deploy and use oAuth to login
   - Deploy and use URAC for member management and 3rd party integration (Facebook, Google+, Twitter)

Scenario:

1. Install SOAJS
2. Install Demo
3. Deploy Demo
4. Use the Demo

1- Install SOAJS

Anchor
Install Install

Start by installing and deploying SOAJS as a local Cloud; Click Here and you will be redirected to the SOAJS Installer Space where you can find the installation instructions.

For this demo, we will be using Local Cloud Deployment on top of Docker. 

 and we will provide our custom UI modules for the pet store.

Once you reach step Deployment Information in the installer, you need to set the following information

under Git Account to add the UI Modules

:

2- Install Demo

Anchor
InstallDemo InstallDemo

Clone Once you finished the installation of SOAJS with the custom UI modules, clone the full demo repositories from Github. You have 3 repositories to clone, one that contains the services code, one that contains the UI Modules and Widget code and one that contains a script that will bootstrap some database configuration for this demo ( explained here).configuration repository to import some sample data before you proceed. 

# Create a directory to clone the repo
> mkdir -p /opt/soajs/node_modules


# Go to directory
> cd /opt/soajs/node_modules


# Clone services repo from Github
> git clone git@github.com:SOAJS-Demos/soajs.petstore.services


# Clone UI Modules & Widget repo from Github
> git clone git@github.com:SOAJS-Demos/soajs.petstore.ui


# Clone configuration repo from Github
> git clone git@github.com:SOAJS-Demos/soajs.petstore.config


# install dependencies for each repository
> cd soajs.petstore.services
> npm install
> cd ../soajs.petstore.ui
> npm install
> cd ../soajs.petstore.config
> npm install


# Import the configuration
> cd soajs.petstore.config/import/
> node .

# Open the import script help manual
> cd soajs.petstore.config/import/
> node . --help

From here on, we will use the SOAJS Dashboard UI to resume all the work. Log in to the SOAJS Dashboard to proceed.

3 - Deploy Demo

Anchor
Deploy Deploy

3.1 Activate Demo Repo

Head over to the Develop pillar → Git Accounts to active the demo microservice.

In the Git Accounts, we find the default SOAJS account activated and it contains a list of repositories we can turn on and off.

Since the The Pet Store demo is in a new organization, click on add account button and create a new organization with the following inputs :

• Account Provider : Github
• Account Domain : github.com
• Account Type : Organization - Public
• Account Label : SOAJS Demos
• Username :  SOAJS-Demos

Activate the soajs.pestore.ui repository, you will be asked to select a branch; pick master.

another organization (SOAJS Demos); this means we need to create an account for it and activate it.

The list contains multiple repositories but for the Pet Store Demo we need to activate 2 of them:

3.2 Deploy Environment and Microservice

Our import script already imported the configuration we need to get things going.

Let's deploy the DEV environment , nginx using dev nginx recipe, petstore service, orders service, urac and oauth which will contain:

Step 1: Deploy Environment

Go to Deploy pillar → Registries → Add New Environment

Select DEV from the drop down menu in the top left corner.

Click on High Availability → Cloud in the left-hand side menu and press Deploy Environment.

Fill in the deploy environment form like the following pictures for both Nginx and Controller sections.

Step 2: Deploy Service

Click on Deploy New Service and fill the form like the following pictures:

You should deploy Deploy the following services on the latest version in case of many : urac, oauth, petstore and using their latest versions: urac - oauth - petstore & orders

Once the environment is deployed, update your hosts file and add the below entry:

127.0.0.1    dev-api.mydomain.com 127.0.0.1    petstore.soajs.org
127.0.0.1    petstore-api.soajs.org

4- Use the Demo

Anchor
Explore Explore

4.1 Test the services

Swagger Simulator : rich UI simulator that provides REST API documentation and the ability to interact with them.
SOAJS Dashboard UI is equipped with Swagger Engine and Simulator by default.

1. Go to the dashboard → Develop → Services: 
2. Click on Swagger logo that appears if the microservice is created using Swagger Editor and a new tab will open
3. Choose your environment where you deployed your microservice
4. Use the simulator to make API calls to your microservice

4.2 Explore the widget

Go to In your browser , write open http://petstore.soajs.org:81 and you will access the widget to start finding your best pet to buy!!You should access the homepage to see the available pets, create an account, login and start shopping. and the pet store frontend UI interface will open; Enjoy the Shopping 

4.3 Manage the pet store

Go to the dashboard, Operate pillar, where you will find two UI Modules : Pet Store and Order Management.

4.3.1 Pet Store

In the Pet Store module, you will be able to list, add, edit and delete pets in manage your pets inventory for the store.

4.3.2 Order Management

In the Order Management module, you will be able to list all checked out orders and confirm fulfill or reject an orderthem.

5 - Conclusion

To sum things up, this demo is an excellent example on how to deploy a full project APP on top of SOAJS. We will go threw creating services, UI modules and a widget. 

In addition, you will get more familiar in deploying services in DEV environment.

Finally, you will get to know more about SOAJS power when it comes of using ready made services, new services, security, permissions and much more!!

We showed you how to create environments and deploy microservices in them using catalog recipes and while doing that, we introduced couple of ready made services by SOAJS: Controller - oAuth - URAC.

Ready made services do not require any development effort, simply deploy and use them.

In addition to microservices, we showed you how to deploy and operate on two types of UI components: UI Modules & Frontend UI Interfaces.

Dive in deeper and learn more about how the full demo is constructed in the sub pages where we tackle every section by itself and explain it in depth.