search

IBM / virtual-mirror-for-ecommerce

WARNING: This repository is no longer maintained :warning: This repository will not be updated. The repository will be kept available in read-only mode.
18 stars 12 forks source link

readme

WARNING: This repository is no longer maintained :warning:

This repository will not be updated. The repository will be kept available in read-only mode.

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:

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

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

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

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

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.

2.2.1 Upload Images to cloud object Storage
$ python3 upload.py

2.3. Sign up for IBM Db2 on Cloud Service

2.4. Load product details into Db2

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

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.

Database Storage

2.6. Deploy python application to 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.

$ cd JewelleryRecommendation

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

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

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.

3. Virtual Mirror Setup

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.

$ cd VirtualMirror
$ 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".

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

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

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

4.2 Create Mobile Foundation service and configure MFP CLI

NOTE: The user, password and url is Important as it will be used in subsequent steps.

NOTE: Make Sure the Cloud Foundry App for Mobile Foundation-Server gets at least 768MB of Memory.(Recommended is 1GB) You can verify it by going to IBM Cloud Dashboard > Resources > Cloud Foundry Apps > MobileFoundation-Server as shown below.

Create IBM Mobile Foundation memory

Note: If Mobile Foundation service is not available with your current account type, then you can either:

  • Upgrade your account, and avail the Mobile Foundation service's free Developer plan which allows the use of the service free for up to ten daily client devices for development and testing activities, or

Note: For Enter the fully qualified URL of this server:, enter the url mentioned in credentials followed by :443 (the default HTTPS port). 

$ mfpdev server add

NOTE: This URL is Important as it will be required in subsequent Steps.

4.3 Customize the App (Optional)


<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ibm.mfpthejewellerystore" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:mfp="http://www.ibm.com/mobilefirst/cordova-plugin-mfp">
    <name>The Jewellery Store</name>
    <description>A virtual mirror integration into ecommerce products with the help of IBM Mobile Foundation.</description>
    <author email="example@in.ibm.com" href="https://github.com/IBM/virtual-mirror-for-ecommerce/blob/master/">Code Patterns Team </author>
...Specify Cloud Object Storage credentials in MFP Adapter
Recommendation Engine API & Virtual Mirror API in MFP Adapter

4.4 Deploy the MFP Adapter and Test it

4.4.1 Build and Deploy the MFP adapters
$ cd MobileFoundationAdapter

$ cd ImagesFetch

Note: In [Step 4.2], if you specified No to Make this server the default?, then you need to specify the name of your server profile (MyServer in our case) at the end of mfpdev adapter deploy command as shown below.

$ mfpdev adapter deploy MyServer
4.4.2 Launch MFP dashboard and update adapter configurations

Launch MFP Dashboard as below:

  • In the IBM Cloud dashboard, under Cloud Foundry Services, click on the Mobile Foundation service you created in [Step 4.2]. The service overview page that gets shown, will have the MFP dashboard embedded within it. You can also open the MFP dashboard in a separate browser tab by appending /mfpconsole to the url mentioned in [Step 4].
  • Inside the MFP dashboard, in the list on the left, you will see the ImageFetch adapter listed.

Update MFP Adapter configuration as below:

4.4.3 Test the ImageFetch adapter

To Test the adapter use any REST Clients like Postman. After Installing postman type the url created in [step 4.2] and append it with /mfp/api/adapters/ImagesFetch/resource and /objectStorage to test whether the adapter is establishing connection with Cloud Object Storage.

Example: https://mobilefoundation-xxxx-xxxxxx.xx-xx.mybluemix.net/mfp/api/adapters/ImageFetch/resource/objectStorage

Example: https://mobilefoundation-xxxx-xxxxxx.xx-xx.mybluemix.net/mfp/api/adapters/ImageFetch/resource/recommendationEngine

Test the newly added API in MFP Adapter for getting Recommendation Engine API

4.5 Run application on Android phone

4.5.1 Install Android Studio and Android SDK platform
4.5.2 Enable developer options and USB debugging on your Android phone

Note: If you have android adb tools you can check whether your device is connected or not by entering adb devices.

4.5.3 Register the Virtual Mirror App to MFP server

Note: To Propagate changes by running cordova prepare

4.5.4 Build/Run the Ionic application on Android phone

Note: Make sure you Connect the Android phone to your development machine by USB cable, and accept the adb access permissions.

NOTE: If there is not camera prompt in your mobile device follow step 4 from TROUBLESHOOTING.md to fix it.

Options Recommendations
4.5.5 Update App Logo and Splash (Optional)

Reference: Automating Icons and Splash Screens https://blog.ionicframework.com/automating-icons-and-splash-screens/

Copy your desired app icon to JewelleryStoreApp/resources/icon.png and app splash to JewelleryStoreApp/resources/splash.png.

$ ionic cordova resources

For running ionic cordova resources command, you would need to sign up on ionicframework.com and specify the credentials on the command line.

4.6 Build APK for uploading to Google Play Store (Optional)

Reference: https://ionicframework.com/docs/intro/deploying/

$ ionic cordova build android --prod --release


* Set `ANDROID_HOME` environment variable as per instructions in [Step x.x]. On Mac, this is usually:

export ANDROID_HOME=/Users//Library/Android/sdk


* Zip align release build as below:

$ cd ./platforms/android/build/outputs/apk/ $ ls android-release-unsigned.apk $ $ANDROID_HOME/build-tools/28.0.3/zipalign -v -p 4 android-release-unsigned.apk android-release-unsigned-aligned.apk $ ls android-release-unsigned-aligned.apk android-release-unsigned.apk


* Create self signing certificate as below:

Make a note of the `Keystore password` that you set. You would need it for signing your APK.

$ keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias

Enter keystore password: Re-enter new password: What is your first and last name? Unknown: XXXXX XXXXXXXX What is the name of your organizational unit?

What is the name of your organization?

What is the name of your City or Locality?

What is the name of your State or Province?

What is the two-letter country code for this unit?

Is CN=XXXXX XXXXXXXX, OU=XXX, O=XXX, L=Bangalore, ST=Karnataka, C=IN correct?

Generating 2,048 bit RSA key pair and self-signed certificate (SHA256withRSA) with a validity of 10,000 days for: CN=XXXXX XXXXXXXX, OU=XXX, O=XXX, L=Bangalore, ST=Karnataka, C=IN Enter key password for (RETURN if same as keystore password): [Storing my-release-key.jks]

$ ls android-release-unsigned-aligned.apk android-release-unsigned.apk my-release-key.jks


* Self sign APK as below:

$ $ANDROID_HOME/build-tools/28.0.3/apksigner sign --ks my-release-key.jks --out thejewellerystore.apk android-release-unsigned-aligned.apk Keystore password for signer #1: $ ls android-release-unsigned-aligned.apk my-release-key.jks android-release-unsigned.apk thejewellerystore.apk $



* Distribute `thejewellerystore.apk` by uploading to Google Play Store or to your company's internal App store.

<!--Optionally, include any troubleshooting tips (driver issues, etc)-->

<a href="https://www.freepik.com/free-photos-vectors/background">Background vector in the app and the app logo has been designed using resources from Freepik.com created by flatart - www.freepik.com</a>

# Troubleshooting

### Debugging Android hybrid app using Chrome Developer Tools

Please see [troubleshooting guide](TROUBLESHOOTING.md) for solutions to some commonly occuring problems.

* Install Google Chrome
* Open Google Chrome. Open URL `chrome://inspect/#devices`
* Connect your mobile phone to the deployment device via USB cable and you should see your device name listed on the page as shown.

  <img src="https://github.com/IBM/virtual-mirror-for-ecommerce/raw/master/doc/source/images/DebugAndroidAppWithChromeDeveloperTools.png" alt="Debugging of Android app using Chrome Developer Tools" width="800" border="10" />

* Under `Devices`, click on `inspect` below your connected device.

  <img src="https://github.com/IBM/virtual-mirror-for-ecommerce/raw/master/doc/source/images/DebugAndroidConsole.png" alt="Debugging of Android app using Chrome Developer Tools Console" width="800" border="10" />

* You can see the console logs here for every action that the app performs.

<!-- keep this -->
## License

This code pattern is licensed under the Apache License, Version 2. Separate third-party code objects invoked within this code pattern are licensed by their respective providers pursuant to their own separate licenses. Contributions are subject to the [Developer Certificate of Origin, Version 1.1](https://developercertificate.org/) and the [Apache License, Version 2](https://www.apache.org/licenses/LICENSE-2.0.txt).

[Apache License FAQ](https://www.apache.org/foundation/license-faq.html#WhatDoesItMEAN)