We talk about the Microsoft HoloLens, its underlying technology and how it communicates with the commercetools platform.

1. EXPERIMENTING
WITH HOLOLENS
FEATURING: HOLOLENS APP CASE
FOR ECOMMERCE

2. Luis Gomes
@_lufego
Frontend Engineer
at commercetools gmbH

3. Frontend Engineer

4. Frontend Engineer

5. Frontend Engineer
?
?
?

7. CURIOUSITY

8. C#
Windows OS

9. HOLOLENS APP
THE
CASE

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?

23. & Online Shopping
Expectation

24. Expectation is the
root of all heartache
- William Shakespeare

25. Expectation is the
mother of all frustration
- Unknown

26. Expectation Reality

27. Expectation Reality

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?

35. commercetools API

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);

46. 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

48. CollisionAPIRequest.js
addLineItem
productId

49. CollisionAPIRequest.js
addLineItem
var requestUrl = "https://api.sphere.io/medimux-shop/carts/" + loggedUserCartId;

50. CollisionAPIRequest.js
addLineItem
var getUserCart = Get(requestUrl);

51. CollisionAPIRequest.js
addLineItem
yield getUserCart;

52. CollisionAPIRequest.js
addLineItem
} else {
}

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);

57. CollisionAPIRequest.js
addLineItem
gameObject.Find("API").GetComponent.<GetAPI>().Get( );
gameObject.Find("API").GetComponent.<GetAPI>().Post( );

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

64. Thank you!
@_lufego
luis.gomes@commercetools.de