Internet of Things, Magento and v.zero, the perfect mix for a crazy idea: a candy machine. Talk during Meet Magento Italia 2015, speaking about Battlehack Venice 2015, Braintree, v.zero, Magento, Spark Core and showing code and live demo on the stage

2. Candies for everybody:
hacking from 9 to 6
Alberto López
Braintree_Dev.
<Advocate/>
https://flic.kr/p/6kFQBc

3. ciao
source

4. @AlbertusLM@Braintree_Dev

5. This is me
@AlbertusLM@Braintree_Dev

6. I am here!
my current office
@AlbertusLM@Braintree_Dev

7. @PayPalDev @AlbertusLM
@AlbertusLM@Braintree_Dev

8. battlehack.org
@AlbertusLM@Braintree_Dev

9. battlehack.org
@AlbertusLM@Braintree_Dev

10. battlehack.org
@AlbertusLM@Braintree_Dev

11. battlehack.org
100.000 USD
@AlbertusLM@Braintree_Dev

12. we <3 hackers
@AlbertusLM@Braintree_Dev

13. we <3 hacking
@AlbertusLM@Braintree_Dev

14. we <3 hacking 9-6
@AlbertusLM@Braintree_Dev

15. what is my story?
@AlbertusLM@Braintree_Dev

16. @AlbertusLM@Braintree_Dev

17. internet of things everything
@AlbertusLM@Braintree_Dev

18. 4.9 Billion Connected "Things" by 2015
http://www.gartner.com/newsroom/id/2905717
Gartner Symposium/ITxpo 2014, November 9-13 in Barcelona, Spain
@AlbertusLM@Braintree_Dev

19. everybody <3 chocolate
@AlbertusLM@Braintree_Dev

20. few months of hard work…
@AlbertusLM@Braintree_Dev

21. Candy Machine 1.0!
@AlbertusLM@Braintree_Dev

22. @AlbertusLM@Braintree_Dev

23. @AlbertusLM@Braintree_Dev

24. technologies
Braintree v.zero SDK
<frontend> <backend>
@AlbertusLM@Braintree_Dev

25. goo.gl/CTnv8U
efficient BUT rudimentary
@AlbertusLM@Braintree_Dev

26. few months of hard work…
@AlbertusLM@Braintree_Dev

27. Candy Machine 2.0!
@AlbertusLM@Braintree_Dev

28. Candy Machine 2.0!ALPHA
@AlbertusLM@Braintree_Dev

29. technologies
Braintree v.zero SDK
@AlbertusLM@Braintree_Dev

30. why Braintree v.zero SDK?
v.zero
OFF
ON
ON
ON
ON
OFF
ON
ON
ON
ON
FUTURE
Payment Method
C&D Cards
@AlbertusLM@Braintree_Dev

31. why Braintree v.zero SDK?
v.zero
Ultra Slim
Invisible
Elegant
@AlbertusLM@Braintree_Dev

32. why Braintree v.zero SDK?
v.zero
<frontend/>
<backend/>
@AlbertusLM@Braintree_Dev

33. why Magento?
> open source
> created for eCommerce
> fully scalable
> high performance
> great look&feel
@AlbertusLM@Braintree_Dev

34. why spark core?
> open source
> wifi connected
> tiny size
> code on private cloud
> multi-language
@AlbertusLM@Braintree_Dev

35. Ouch!
> Old Braintree module
> v.zero not available yet
(official plugin in development)
@AlbertusLM@Braintree_Dev

36. BUSTED
@AlbertusLM@Braintree_Dev

37. dem
@AlbertusLM@Braintree_Dev

38. @AlbertusLM@Braintree_Dev
backup
plan:
video
J

39. LET’S CODE OUR MODULE
CHALLENGE ACCEPTED

40. Frontend: <templateFile>.phtml
[…]
<form id="Braintree_vzero">
</form>
<script src=“https://js.braintreegateway.com/v2/braintree.js"></script>
<script type="text/javascript">
braintree.setup(
"<?php echo $clientToken;?>",
'dropin', {
container: ‘Braintree_vzero’,
}
});
</script>
[…]
@AlbertusLM@Braintree_Dev

41. Frontend: <templateFile>.phtml
[…]
<form id="Braintree_vzero">
</form>
<script src=“https://js.braintreegateway.com/v2/braintree.js"></script>
<script type="text/javascript">
braintree.setup(
"<?php echo $clientToken;?>",
'dropin', {
container: ‘Braintree_vzero’,
}
});
</script>
[…]
@AlbertusLM@Braintree_Dev

42. Frontend: <templateFile>.phtml
[…]
<form id="Braintree_vzero">
</form>
<script src=“https://js.braintreegateway.com/v2/braintree.js"></script>
<script type="text/javascript">
braintree.setup(
"<?php echo $clientToken;?>",
'dropin', {
container: ‘Braintree_vzero’,
}
});
</script>
[…]
@AlbertusLM@Braintree_Dev

43. Frontend: <templateFile>.phtml
[…]
<form id="Braintree_vzero">
</form>
<script src=“https://js.braintreegateway.com/v2/braintree.js"></script>
<script type="text/javascript">
braintree.setup(
"<?php echo $clientToken;?>",
'dropin', {
container: ‘Braintree_vzero’,
}
});
</script>
[…]
@AlbertusLM@Braintree_Dev

44. Backend: <ModelFile>.php
[…]
Braintree_Configuration::merchantId(‘YOUR_MERCHANT_ID’);
Braintree_Configuration::publicKey(‘YOUR_PUBLIC_KEY');
Braintree_Configuration::privateKey(‘YOUR_PRIVATE_KEY’);
[...]
Security: Setting API Credentials
@AlbertusLM@Braintree_Dev

45. Backend: <ModelFile>.php
[...]
class Braintree_Vzero_Block_Form extends Mage_Payment_Block_Form
{
protected function _construct()
{
parent::_construct();
$this->setTemplate('vzero/form.phtml');
}
[…]
public function getClientToken()
{
$clientToken = Braintree_ClientToken::generate(array());
$this->setData('clientToken', $clientToken);
return $clientToken;
}
}
[...]
Asking for ClientToken (creating UI payment form)
@AlbertusLM@Braintree_Dev

46. Backend: <ModelFile>.php
[...]
class Braintree_Vzero_Block_Form extends Mage_Payment_Block_Form
{
protected function _construct()
{
parent::_construct();
$this->setTemplate('vzero/form.phtml');
}
[…]
public function getClientToken()
{
$clientToken = Braintree_ClientToken::generate(array());
$this->setData('clientToken', $clientToken);
return $clientToken;
}
}
[...]
Asking for ClientToken (creating UI payment form)
@AlbertusLM@Braintree_Dev

47. Backend: <ModelFile>.php
[...]
$result = Braintree_Transaction::sale(array(
'amount' => $grandTotal,
'paymentMethodNonce' => $paymentNonce,
'shipping' => array(
'firstName' => $firstName,
'lastName' => $lastName,
'streetAddress' => $streetAddress,
'locality' => $locality,
'region' => $stateOrProvince,
'countryName' => $countryName
),
'customFields' => array(
'cart' => $cart
)
));
$transactionID = $result->transaction->id;
[...]
NOTE
Getting previously these parameters from
the checkout:
• 'cart'-> array with the cart details
• 'grandTotal'-> total amount
• 'paymentNonce'->payment_method_nonce
Finishing the transaction
@AlbertusLM@Braintree_Dev

48. Backend: <ModelFile>.php
[...]
$result = Braintree_Transaction::sale(array(
'amount' => $grandTotal,
'paymentMethodNonce' => $paymentNonce,
'shipping' => array(
'firstName' => $firstName,
'lastName' => $lastName,
'streetAddress' => $streetAddress,
'locality' => $locality,
'region' => $stateOrProvince,
'countryName' => $countryName
),
'customFields' => array(
'cart' => $cart
)
));
$transactionID = $result->transaction->id;
[...]
NOTE
v.zero form doesn’t send to backend
personal information. You only have a
nonce to finish the transaction.
Finishing the transaction
@AlbertusLM@Braintree_Dev

49. Backend: <ModelFile>.php
[...]
$result = Braintree_Transaction::sale(array(
'amount' => $grandTotal,
'paymentMethodNonce' => $paymentNonce,
'shipping' => array(
'firstName' => $firstName,
'lastName' => $lastName,
'streetAddress' => $streetAddress,
'locality' => $locality,
'region' => $stateOrProvince,
'countryName' => $countryName
),
'customFields' => array(
'cart' => $cart
)
));
$transactionID = $result->transaction->id;
[...]
Finishing the transaction
@AlbertusLM@Braintree_Dev

50. Backend: <ModelFile>.php
[...]
$accessToken = ‘your_access_token';
$core = SparkCore::make($accessToken);
$core->setDeviceId('your_device_id');
$core->setFunction('movemotor');
$core->setParams(array(‘transactionID'));
$result = $core->run();
echo $result->return_value;
[...]
Sending info to Candy Machine
NOTE
Library: garethtdavies/SparkPHP
Enjoy!
Tr.ID:
dfr43
@AlbertusLM@Braintree_Dev

51. Spark Core: <filename>.ino
void setup()
{
[…]
//setup TFT
tft.begin();
//setup SD
SD.begin(SD_CS);
//setup DC Motor
pinMode(MOTOR, OUTPUT);
//Register our Spark function here
Spark.function("candy", moveMotorCandy);
[…]
}
Setting up the device
NOTE
TFT/SD: pkourany/ILI9341_SPI_LCD
Enjoy!
Tr.ID:
dfr43
@AlbertusLM@Braintree_Dev

52. Spark Core: <filename>.ino
[…]
int moveMotorCandy(String command)
{
//Adjustment to present correctly the text on the screen
String textToPrint = " Enjoy! n Tr.ID: "+ command;
//Printing the MotorMovement screen
bmpDraw("motor.bmp", 0, 0);
showTextInScreen (textToPrint,10,160);
delay(1000);
digitalWrite(MOTOR, 1); // Turn ON the motor
delay(milisecsMovingMotor);
digitalWrite(MOTOR, 0); // Turn OFF the motor
delay(3000);
setScreenToStandBy();
}
[…]
}
Expending the candies
NOTE
TFT/SD: pkourany/ILI9341_SPI_LCD
Enjoy!
Tr.ID:
dfr43
@AlbertusLM@Braintree_Dev

53. dem
ALPHA
v.zero +
@AlbertusLM@Braintree_Dev

54. problems happen…
@AlbertusLM@Braintree_Dev

55. only available the fronted
@AlbertusLM@Braintree_Dev

56. Braintree:
braintreepayments.com
v.zero:
braintreepayments.com/v.zero
Dev Braintree Portal:
developers.braintreepayments.com
Demo in Hackster.io:
hackster.io/AlbertoLopez/candy-machine-with-v-zero-sdk
@AlbertusLM@Braintree_Dev

57. >questions?_
@AlbertusLM@Braintree_Dev

58. ask him
Source
photo

59. Alberto López
alberto.lopez@getbraintree.com
@AlbertusLM / @Braintree_Dev