↓Skip to main content
Resources for the Modern Web Resources for the Modern Web
  1. All Posts/

virtual-mirror-for-ecommerce

eCommerce TypeScript

Integrate a virtual mirror with e-commerce products

Virtual try on apps have the full potential to become the next big thing in e-commerce. They relieve much of the stress of going into a store and physically try on different products. They save consumers’ time and brands’ budget, serving as a cost-effective yet convenient alternative for trying on products.Most importantly, it makes choosing products we’ll love as easy as watching in the mirror.
In this code pattern, we will develop a hybrid mobile application using IBM Mobile Foundation integrated with recommendation system , which takes in age and gender as input and based on this, it returns a personalized recommendation of jewellery products. The user can later try these jewellery products virtually using the virtual mirror feature.
When the reader has completed this Code Pattern, they will understand how to:

  • Connect to IBM Mobile Foundation using a mobile application.
  • Take inputs from mobile application and do required processing on IBM Cloud.
  • Deploy and use cloud foundry applications.
  • Access images from Cloud Object Storage using a mobile application.
  • Connect and access Db2 on Cloud.
  • Setup a recommendation engine and integrate it with mobile application.

Flow

  1. Take input from user’s mobile.
  2. The input is passed via IBM Mobile Foundation.
  3. IBM Mobile Foundation passes the user’s input to the recommendation engine.
  4. Recommendation engine interacts with IBM Db2 to get the necessary product details for the recommended products.
  5. Images of the recommended products is retrieved from Cloud Object Storage.
  6. Recommendation engine returns the images and details of the recommended products to the user’s mobile application.
  7. User can click on virtual mirror button to access virtual mirror.
  8. IBM Mobile Foundation passes the user’s input to the virtal mirror application.
  9. Virtual mirror application gives access to the user.
  10. User can view the virtual mirror.

Watch the Video

Pre-requisites

Steps

Please follow the below to setup and run this code pattern.

  1. Clone the repo
  2. Recommendation Engine Setup
  3. Virtual Mirror Setup
  4. Mobile Application Setup

1. Clone the repo

Clone this git repo.
Else, in a terminal, run:

$ git clone https://github.com/IBM/virtual-mirror-for-ecommerce.git

2. Recommendation Engine Setup

In this step we will be building a recommendation engine which takes users’s age and gender as input ,and gives out a recommendation accordingly.

2.1. Sign up for IBM Cloud Object Storage

We use IBM Cloud Object Storage to store the jewellery images required for recommendation and the dataset.

2.1.1 Create IBM Cloud Object Storage
  • In the IBM Cloud Dashboard, click on Catalog and select Object Storage service under Infrastructure -> Storage. Click on Create as shown below.
  • The IBM Cloud Object Storage dashboard will get shown. In the Buckets tab, click on Create bucket. Give an unique name for the bucket. Set the selections for Resiliency (Cross Region), Location (us-geo) and Storage class (Standard), and click on Create as shown below.

Note: Make a note of the Bucket Name as it is Important and will be used in step 4.4.2

2.1.2 Create Service ID and API Key for accessing objects
  • Create Service ID

    • In a separate browser tab/window, launch the IBM Cloud Identity & Access Management dashboard using URL https://cloud.ibm.com/iam/.
    • In case you have multiple IBM Cloud accounts, then select the target Account, Region, Organization and Space.
    • Under Identity & Access (on the left side of the page), select Service IDs and click Create on the right top of the page. Give a name and description, and click Create.
    • Make a note of the name of the Service ID as shown below.

Note: Make a note of the name of the Service ID as it is Important and will be used in step 5.4.2

  • Add Cloud Object Storage Writer role to that service ID

    • Back in IBM Cloud Object Storage dashboard, select Bucket permissions under Buckets click on policies.
    • Click on Service IDs tab. Under Select a service ID, select the service ID created in the above step. Under Assign a role to this service ID for this bucket, select Writer. Click Create policy as shown below.

You should get a confirmation dialog saying “Service permission created“.

  • Create API Key

    • Back in IBM Cloud Identity & Access Management dashboard, under Service IDs, click on the service ID created earlier. Under Access policies, you should see the Writer role for your bucket.
    • Click on API keys tab and then click on Create button. In the Create API key dialog, give a name and description for the API key and click on Create. You should get a confirmation dialog saying API key successfully created as shown below.
    • Click on Download and save the API key as shown below. Note: This is the only time you will see the key. You cannot retrieve it later.
    • You can now close the tab.

Note: Make a note of the API Key as it is Important and will be used in step 4.4.2

2.2.Add the IBM Cloud Object Storage credentials to the python application

To access the Cloud Object Storage service programmatically, you need to copy in your credentials, which you can find in your IBM Cloud Object Storage service credentials in IBM Cloud.

  • Open your IBM Cloud Data Resource list. A list of your provisioned resources is displayed.
  • Locate your Cloud Object Storage instance under Storage tab and click on that.
  • Open the Service Credentials tab on the right hand side of the page and give a name.

  • Select Include HMAC Credentials as shown bellow.

  • View your credentials by clicking View Credentials.

  • Copy your credentials. Create a file credentials1.json and paste the copied credentials into this file.Place this file in the directory JewelleryRecommendation and also in the directory UploadProductsCOS.
  • Replace xxxxxx in the place holder bucket_name with your corresponding bucket name in the file KMeans_200.py.

2.2.1 Upload Images to cloud object Storage
  • Replace xxxxxx in the place holder bucket_name with your corresponding bucket name in the file upload.py.
  • Run the file upload.py locally to upload images and dataset to Cloud Object Storage. 
$ python3 upload.py

2.3. Sign up for IBM Db2 on Cloud Service

  • Create a IBM Db2 instance IBM db2.

2.4. Load product details into Db2

  • Lanch your Db2 on cloud and click on load, as shown below.
  • Click on browse files and upload data.csv, as shown below. data.csv can be found in the root folder of ProductDetailsDB2.
  • Choose the default schema and create a table PRODUCTS, as shown below.
  • Click on Next, as shown below.
  • Click on Next.
  • Click on Begin Load, as shown below.
  • Once the data is loaded, you can view the table which will look like the image, shown below.

NOTE: Make sure you note down the table name. In my case the table name is ZJN44169.PRODUCTS.

2.5. Add the IBM db2 credentials to the python application

  • Replace the placeholder username, password, sg_service_url, database, host, port under credentials_1 in the file KMeans_200.py.
  • Replace XXXX.YYYY in the place holder insert with your corresponding table name in the file KMeans_200.py.

NOTE: You can get username, password, sg_service_url, hostname, port number and Database credentials by creating/clicking New Credentials from your Db2 service instance on cloud.

2.6. Deploy python application to cloud foundry

  • Create a cloud foundry instance IBM Cloud Foundry Service and follow set of instructions for deploying python application to IBM Cloud Foundry.

NOTE: Make Sure the Cloud Foundry App gets at least 256MB of Memory. You can verify it by going to IBM Cloud Dashboard > Resources > Cloud Foundry Apps > YOUR_APP_NAME.

  • Use IBM Cloud command line interface to download, modify, and redeploy your Cloud Foundry applications and service instances.
  • Before you begin, download and install the IBM Cloud CLI.
  • After you install the command line interface, you can get started.
  • Change to the directory. 
$ cd JewelleryRecommendation

Note : Make sure that KMeans_200.py, credentials1.json, requirements.txt, manifest.yml and Procfile is present in the directory JewelleryRecommendation.

  • Connect and log in to IBM Cloud. 
$ ibmcloud api https://api.eu-gb.bluemix.net

$ ibmcloud login -u example@in.ibm.com -o example@in.ibm.com -s dev

NOTE: If you are using a federated ID, use the -sso option.

$ ibmcloud login  -o example@in.ibm.com -s dev -sso

NOTE: You must add single or double quotes around username, org_name, and space_name if the value contains a space, for example, -o "my org".

  • Finally Deploy the application by following command. 
$ ibmcloud cf push YOUR-APP-NAME

Example: ibmcloud cf push recommendation-engine

  • Once you have deployed the application Make a note of the URL of the instance by right clicking on the Visit app URL and copying the link.

Note: This URL is Important as it will be used in step 4.4.2

2.7. Test your deployment

To Test your deployment use any REST Clients like Postman.
After Installing postman type https://YOUR-APP-URL/?age=40&name=Kavya&gender=F to test whether Recommendation engine works.

  • Now click on Send button to run the GET / API. The API response should be shown in the Response Body as shown in snapshot below.

3. Virtual Mirror Setup

  • Create a cloud foundry instance IBM Cloud Foundry Service and follow set of instructions for deploying JavaScript application to IBM Cloud Foundry.

NOTE: Make Sure the Cloud Foundry App gets at least 256MB of Memory. You can verify it by going to IBM Cloud Dashboard > Resources > Cloud Foundry Apps > YOUR_APP_NAME.

  • Use IBM Cloud command line interface to download, modify, and redeploy your Cloud Foundry applications and service instances.
  • Before you begin, download and install the IBM Cloud CLI.
  • After you install the command line interface, you can get started.
  • Go to the VirtualMirror directory. 
$ cd VirtualMirror
  • Connect and log in to IBM Cloud. 
$ ibmcloud api https://api.eu-gb.bluemix.net

$ ibmcloud login -u example@in.ibm.com -o example@in.ibm.com -s dev

NOTE: If you are using a federated ID, use the -sso option.

$ ibmcloud login  -o example@in.ibm.com -s dev -sso

NOTE: You must add single or double quotes around username, org_name, and space_name if the value contains a space, for example, -o "my org".

  • Finally Deploy the application by following command. 
$ ibmcloud cf push YOUR-APP-NAME

Example: ibmcloud cf push virtual-mirror

  • Once you have deployed the application Make a note of the URL of the instance by right clicking on the Visit app URL and copying the link.

Note: This URL is Important as it will be used in step 4.4.2.

4. Mobile Application Setup

The Mobile Application is the component that connects Virtual Mirror and Recommendation Engine.

4.1 Setup Ionic and MFP CLI 

$ node --version
v10.15.0
  • Install Cordova 
$ sudo npm install -g cordova@9.0.0
$ cordova --version
9.0.0

Note: Please refer MFP documentation for compatible versions of Cordova – https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/application-development/sdk/cordova/

  • Install Ionic 
$ sudo npm install -g ionic@5.4.16
$ ionic --version
4.12.0
  • Install IBM Mobile Foundation Platform CLI 
$ sudo npm install -g mfpdev-cli
$ mfpdev --version
8.0.0-2018121711

Note: If you are on Windows, instead of using sudo, run the above command without sudo in a command prompt opened in administrative mode.

Note: While installing MFP CLI, if you hit an error saying npm ERR! package.json npm can't find a package.json file in your current directory., then it is most likely due to MFP CLI not being supported in your npm version. In such a case, downgrade your npm as below, and then install MFP CLI.
$ sudo npm install -g npm@3.10.10

  • Install Java SDK 8…


↑