Experimenting with HoloLens for E-Commerce
1 like477 views
The document discusses the use of HoloLens in e-commerce, emphasizing the differences between virtual reality (VR), augmented reality (AR), and mixed reality (MR). It highlights the potential growth of the VR/AR market and reasons for opting for HoloLens, such as its immersive capabilities and flexible API from commercetools. Additionally, it outlines basic development steps for HoloLens, encouraging a progressive learning approach.
![CollisionAPIRequest.js
function addLineItem(productId) {
changeTextAndColor("Loading...", Color.yellow);
var requestUrl = "https://api.sphere.io/medimux-shop/carts/" + loggedUserCartId;
var getUserCart = gameObject.Find("API").GetComponent.<GetAPI>().Get(requestUrl);
yield getUserCart;
if (getUserCart.error) {
// If it fails to return the information, logs the error in the console
Debug.Log(getUserCart.error);
} else {
var currentCartVersion = JSON.Parse(getUserCart.text)["version"];
var cartVersionNumber = int.Parse(currentCartVersion);
// Builds body for the POST request
var requestBody = "{"version":" + cartVersionNumber
+ ", "actions": [{ "action": "addLineItem","
+ ""productId": "" + productId
+ "", "variantId": 1 }]}";
var postAddLineItem = gameObject.Find("API").GetComponent.<GetAPI>().Post(requestUrl, requestBody);
yield postAddLineItem;
if (!postAddLineItem.error) {
gameObject.Find("cartInSuccessSound").GetComponent.<AudioSource>().Play();
changeTextAndColor("Product added", Color.green);
} else {
// Plays feedback Audio
gameObject.Find("cartInErrorSound").GetComponent.<AudioSource>().Play();
changeTextAndColor("Product cannot be added", Color.red);
};
}
}
addLineItem](https://image.slidesharecdn.com/ppt-hololenspresentation-170927124017/85/Experimenting-with-HoloLens-for-E-Commerce-47-320.jpg)
![CollisionAPIRequest.js
addLineItem
var currentCartVersion = JSON.Parse(getUserCart.text)["version"]](https://image.slidesharecdn.com/ppt-hololenspresentation-170927124017/85/Experimenting-with-HoloLens-for-E-Commerce-53-320.jpg)
![CollisionAPIRequest.js
addLineItem
var requestBody = "{"version":" + cartVersionNumber
+ ", "actions": [{ "action": "addLineItem",
+ ""productId": "" + productId
+ "", "variantId": 1 }]}";](https://image.slidesharecdn.com/ppt-hololenspresentation-170927124017/85/Experimenting-with-HoloLens-for-E-Commerce-54-320.jpg)
![API.js
function Get(url) {
var form = new WWWForm();
var headers = form.headers;
headers["Accept"] = "application/json";
headers["Content-Type"] = "application/json";
headers["Authorization"] = generatedToken;
return new WWW(url, null, headers);
}
function Post (url, payload : String) {
var form = new WWWForm();
var headers = form.headers;
var encoding = new System.Text.UTF8Encoding();
var rawData = encoding.GetBytes(payload);
headers["Accept"] = "application/json";
headers["Content-Type"] = "application/json";
headers["Authorization"] = generatedToken;
return new WWW(url, rawData, headers);
}
getProductInfo();
getToken();
getUserCart();
getHologramsList();
postRemoveLineItem();
postAddLineItem();](https://image.slidesharecdn.com/ppt-hololenspresentation-170927124017/85/Experimenting-with-HoloLens-for-E-Commerce-58-320.jpg)
Experimenting with HoloLens for E-Commerce
- 1. EXPERIMENTING WITH HOLOLENS FEATURING: HOLOLENS APP CASE FOR ECOMMERCE
- 2. Luis Gomes @_lufego Frontend Engineer at commercetools gmbH
- 7. CURIOUSITY
- 10. UNDERSTANDING THE CONCEPTS VR Virtual Reality AR Augmented Reality MR Mixed Reality
- 11. VIRTUAL REALITY “…A computer-generated simulation of a three-dimensional image or environment that can be interacted with in a seemingly real or physical way by a person using special electronic equipment.”
- 12. UNDERSTANDING THE CONCEPTS VR AR MR Virtual Reality Augmented Reality Mixed Reality
- 13. AUGMENTED REALITY The real-world content and the CG content are not able to respond to each other.
- 14. UNDERSTANDING THE CONCEPTS VR AR MR Virtual Reality Augmented Reality Mixed Reality
- 15. Mixed Reality “…Is the merging of real and virtual worlds to produce new environments and visualisations where physical and digital objects co-exist and interact in real time.”
- 16. UNDERSTANDING THE CONCEPTS VR AR MR Virtual Reality Augmented Reality Mixed Reality
- 17. UNDERSTANDING THE CONCEPTS VR Virtual Reality AR Augmented Reality
- 18. What does it mean for ecommerce?
- 19. IN ECOMMERCE AUGMENTED REALITY IS ALREADY A REALITY
- 20. Mobile Augmented Reality could become the primary driver of a $108 billion VR/AR market by 2021 (underperform $94 billion, outperform $122 billion) https://www.digi-capital.com/news/2017/01/after-mixed-year-mobile-ar-to-drive-108-billion-vrar-market-by-2021
- 21. Ikea Place APP
- 22. WHY?
- 24. Expectation is the root of all heartache - William Shakespeare
- 25. Expectation is the mother of all frustration - Unknown
- 28. WHY HOLOLENS
- 29. WHY - It’s much more immersive than AR/VR - The commercetools API is flexible and allows us to - We wanted to experiment something New; Never done before - Why not?
- 36. DEMO TIME
- 37. HOW IT CONNECTS TO OUR API
- 38. LEARNINGS
- 40. CollisionAPIRequest.js function OnTriggerEnter (product: Collider) { } function OnTriggerExit (product: Collider) { removeLineItem(product.name); } addLineItem(product.name);
- 45. function OnTriggerEnter (product: Collider) { } addLineItem(product.name);
- 47. CollisionAPIRequest.js function addLineItem(productId) { changeTextAndColor("Loading...", Color.yellow); var requestUrl = "https://api.sphere.io/medimux-shop/carts/" + loggedUserCartId; var getUserCart = gameObject.Find("API").GetComponent.<GetAPI>().Get(requestUrl); yield getUserCart; if (getUserCart.error) { // If it fails to return the information, logs the error in the console Debug.Log(getUserCart.error); } else { var currentCartVersion = JSON.Parse(getUserCart.text)["version"]; var cartVersionNumber = int.Parse(currentCartVersion); // Builds body for the POST request var requestBody = "{"version":" + cartVersionNumber + ", "actions": [{ "action": "addLineItem"," + ""productId": "" + productId + "", "variantId": 1 }]}"; var postAddLineItem = gameObject.Find("API").GetComponent.<GetAPI>().Post(requestUrl, requestBody); yield postAddLineItem; if (!postAddLineItem.error) { gameObject.Find("cartInSuccessSound").GetComponent.<AudioSource>().Play(); changeTextAndColor("Product added", Color.green); } else { // Plays feedback Audio gameObject.Find("cartInErrorSound").GetComponent.<AudioSource>().Play(); changeTextAndColor("Product cannot be added", Color.red); }; } } addLineItem
- 49. CollisionAPIRequest.js addLineItem var requestUrl = "https://api.sphere.io/medimux-shop/carts/" + loggedUserCartId;
- 50. CollisionAPIRequest.js addLineItem var getUserCart = Get(requestUrl);
- 53. CollisionAPIRequest.js addLineItem var currentCartVersion = JSON.Parse(getUserCart.text)["version"]
- 54. CollisionAPIRequest.js addLineItem var requestBody = "{"version":" + cartVersionNumber + ", "actions": [{ "action": "addLineItem", + ""productId": "" + productId + "", "variantId": 1 }]}";
- 55. CollisionAPIRequest.js addLineItem var postAddLineItem = Post(requestUrl, requestBody); yield postAddLineItem;
- 56. CollisionAPIRequest.js addLineItem var getUserCart = Get(requestUrl); var postAddLineItem = Post(requestUrl, requestBody);
- 58. API.js function Get(url) { var form = new WWWForm(); var headers = form.headers; headers["Accept"] = "application/json"; headers["Content-Type"] = "application/json"; headers["Authorization"] = generatedToken; return new WWW(url, null, headers); } function Post (url, payload : String) { var form = new WWWForm(); var headers = form.headers; var encoding = new System.Text.UTF8Encoding(); var rawData = encoding.GetBytes(payload); headers["Accept"] = "application/json"; headers["Content-Type"] = "application/json"; headers["Authorization"] = generatedToken; return new WWW(url, rawData, headers); } getProductInfo(); getToken(); getUserCart(); getHologramsList(); postRemoveLineItem(); postAddLineItem();
- 59. WHERE TO START
- 60. DEVELOPING FOR HOLOLENS WHERE TO START - Follow step-by-step tutorials https://developer.microsoft.com/en-us/windows/mixed-reality/academy - Grab the tools Unity, Visual Studio, Windows OS - Deep dive on the documentation https://docs.microsoft.com/en-us/hololens/
- 61. LEARNINGS
- 62. LEARNINGS - You don’t need to know everything - Start small. Increase progressively - Don’t be afraid to try new things
- 63. BE CURIOUS