Making money with Phonegap and Angular apps
•
5 likes•1,570 views
How about creating an awesome mobile app, for iOS and Android, using just HTML, JS and CSS? How about using Angular to create an amazing UI that looks and behaves like a native app? And on top of all that, how about make it take Bitcoin, PayPal, as well as credit and debit cards? In this talk, we will go over all the steps necessary to configure your environment (Mac or Windows), to develop/debug/deploy a mobile app built with Cordova and Angular, offering multiple payment options to users, all at once! Are you ready? Fasten your seat belts...
Report
Share
Making money with Phonegap and Angular apps
- 1. 06.23.15 @braintree_dev @demianborba Making money with Phonegap and Angular apps Demian Borba <developer-advocate/> @demianborba github.com/demianborba
- 2. Demian Borba <developer-advocate/> San Francisco & Bay Area 06.23.15 @braintree_dev @demianborba
- 3. 06.23.15 Making money with Phonegap and Angular appsCordova Demian Borba <developer-advocate/> @demianborba @braintree_dev @demianborba
- 7. • Mobile Commerce • Getting started with Cordova • Powerful libraries and frameworks • Accepting cards, PayPal and Bitcoin >Chapters 06.23.15 @braintree_dev @demianborba
- 8. Chapter one: Mobile Commerce 06.23.15 @braintree_dev @demianborba
- 9. Source: http://www.comscore.com/Insights/Presentations-and-Whitepapers/2015/The- MCommerce-Gap-Why-Dollars-Continue-to-Lag-Shopping-Behavior-on-Mobile 06.23.15 @braintree_dev @demianborba $31.6B MOBILE COMMERCE IN THE US, 2014 11.8% OF TOTAL DIGITAL COMMERCE
- 10. Source: http://www.comscore.com/Insights/Presentations-and-Whitepapers/2015/The- MCommerce-Gap-Why-Dollars-Continue-to-Lag-Shopping-Behavior-on-Mobile 06.23.15 @braintree_dev @demianborba $11.1B MOBILE COMMERCE IN THE US, Q1 2015 15.4% OF TOTAL DIGITAL COMMERCE
- 11. Source: http://www.comscore.com/Insights/Presentations-and-Whitepapers/2015/The- MCommerce-Gap-Why-Dollars-Continue-to-Lag-Shopping-Behavior-on-Mobile 06.23.15 @braintree_dev @demianborba Desktop Mobile Share of Online Retail Browsing
- 12. Source: http://www.comscore.com/Insights/Presentations-and-Whitepapers/2015/The- MCommerce-Gap-Why-Dollars-Continue-to-Lag-Shopping-Behavior-on-Mobile 06.23.15 @braintree_dev @demianborba Desktop Mobile Online Retail Browsing vs. Spending by Platform GAP
- 13. Source: http://www.comscore.com/Insights/Presentations-and-Whitepapers/2015/The- MCommerce-Gap-Why-Dollars-Continue-to-Lag-Shopping-Behavior-on-Mobile 06.23.15 @braintree_dev @demianborba Smartphone Tablet Do not feel secure providing payment information over mobile devices Cannot see the product detail Navigating between screens is too difficult/slow Cannot browse between multiple screens easily to comparison shop Too difficult to input my name, address, and payment information Cannot navigate to coupons/discounts easily Connection speeds/spotty service slows down the browsing process
- 16. Chapter two: Getting started with Cordova 06.23.15 @braintree_dev @demianborba
- 17. based on a true story... 06.23.15 @braintree_dev @demianborba
- 27. 06.23.15 @braintree_dev @demianborba DEVELOPER DEVELOPER DEVELOPER
- 28. 06.23.15 @braintree_dev @demianborba DEVELOPER DEVELOPER DEVELOPER
- 31. DEVELOPER DEVELOPER DEVELOPER 06.23.15 @braintree_dev @demianborba
- 35. 06.23.15 @braintree_dev @demianborba DEVELOPER DEVELOPER DEVELOPER
- 38. npm install -g cordova 06.23.15 @braintree_dev @demianborba
- 40. 06.23.15 @braintree_dev @demianborba DEVELOPER DEVELOPER DEVELOPER
- 41. sudo chown -R {{whoami}} /usr/local/ 06.23.15 @braintree_dev @demianborba Source: https://docs.npmjs.com/getting-started/fixing-npm-permissions
- 42. 06.23.15 @braintree_dev @demianborba DEVELOPER DEVELOPER D Source: https://docs.npmjs.com/getting-started/fixing-npm-permissions
- 44. 06.23.15 @braintree_dev @demianborba demo (create app + add platforms) cordova create app_folder io.demian.app AppName cordova platform add ios android
- 47. • Download and install JDK 7+ • Download and install Android Studio • Add /tools and /platform-tools to PATH • Install SDK packages (API 22 & Build Tools 19+) >Steps to configure Android 06.23.15 @braintree_dev @demianborba
- 53. demo (build + deploy + debug) cordova build android cordova run android chrome://inspect 06.23.15 @braintree_dev @demianborba
- 55. 06.23.15 @braintree_dev @demianborba Xcode Command Line Tools
- 56. 06.23.15 @braintree_dev @demianborba xcode-select --install npm install -g ios-sim npm install -g ios-deploy
- 57. demo (build + deploy + debug) cordova build ios cordova run ios --simulator cordova run ios --device 06.23.15 @braintree_dev @demianborba
- 58. Chapter three: Powerful libraries and frameworks 06.23.15 @braintree_dev @demianborba
- 59. • Pixel-perfect UI for iOS and Android (Windows soon) • Powerful cli (ionic resources, lab, live reload etc) • Amazing services (analytics, deploy, push etc) • Focus on performance, built on top of Angular and Cordova 06.23.15 @braintree_dev @demianborba Source: http://ionicframework.com/
- 61. > _material 06.23.15 @braintree_dev @demianborba Source: https://material.angularjs.org • Following Google Material Design principles and guidelines • Powerful components (autocomplete, chips, fab, grid list, input, menu, subheader, tabs etc) • Great documentation and sample code
- 62. • Simple AngularJS wrappers for the most popular Cordova and PhoneGap plugins available (camera, touch id, oauth, geolocation, bar scanner, contacts, device orientation, vibration etc) • ng-cordova custom build: Great integrations with Cordova plugins using Angular Services (factories) > _ng-cordova 06.23.15 @braintree_dev @demianborba Source: http://ngcordova.com/
- 63. Chapter four: Accepting cards, PayPal and Bitcoin 06.23.15 @braintree_dev @demianborba
- 64. 06.23.15 @braintree_dev @demianborba consumers (card holders) merchants gateways acquiring banks processors card associations issuing banks PCI Compliance (Payment Card Industry)
- 68. 06.23.15 @braintree_dev @demianborba Client-side libraries for iOS, Android, and Web. Server-side libraries in the language of your choice. Source: https://www.braintreepayments.com/v.zero
- 69. The regular way 06.23.15 @braintree_dev @demianborba
- 70. 06.23.15 @braintree_dev @demianborba Source: https://developers.braintreepayments.com/javascript+node/start/overview npm install braintree var braintree = require(‘braintree') example: ejs npm install braintree-web bower install braintree-web braintree.js
- 71. var gateway = braintree.connect({ environment: braintree.Environment.Sandbox, merchantId: ‘your_merchant_id’, publicKey: ‘your_merchant_public_key’, privateKey: ‘your_merchant_private_key’ }); 06.23.15 @braintree_dev @demianborba Source: https://developers.braintreepayments.com/javascript+node/start/hello-server app.js
- 72. app.get('/', function (request, response) { gateway.clientToken.generate({}, function (err, res) { response.render('index', { clientToken: res.clientToken }); }); }); 06.23.15 @braintree_dev @demianborba app.js
- 73. <!-- Add Dropin here --> <div id="checkout"></div> <script src="braintree.js"></script> <script> braintree.setup('<%- clientToken %>', 'dropin', { container: ‘checkout' }); </script> 06.23.15 @braintree_dev @demianborba index.ejs
- 74. The Angular way 06.23.15 @braintree_dev @demianborba
- 75. 06.23.15 @braintree_dev @demianborba Source: https://developers.braintreepayments.com/javascript+node/start/overview npm install braintree var braintree = require('braintree') npm install braintree-web bower install braintree-web
- 76. <!-- Add Dropin here --> <div id="checkout"></div> <script src="braintree.js"></script> 06.23.15 @braintree_dev @demianborba Source: https://developers.braintreepayments.com/javascript+node/start/hello-client
- 77. var gateway = braintree.connect({ environment: braintree.Environment.Sandbox, merchantId: ‘your_merchant_id’, publicKey: ‘your_merchant_public_key’, privateKey: ‘your_merchant_private_key’ }); 06.23.15 @braintree_dev @demianborba Source: https://developers.braintreepayments.com/javascript+node/start/hello-server
- 78. app.post('/api/v1/token', function (request, response) { gateway.clientToken.generate({}, function (err, res) { if (err) throw err; response.json({ "client_token": res.clientToken }); }); }); 06.23.15 @braintree_dev @demianborba
- 79. $http({ method: 'POST', url: 'http://localhost:3000/api/v1/token' }).success(function (data) { // handle response } 06.23.15 @braintree_dev @demianborba
- 80. // handle response braintree.setup(data.client_token, 'dropin', { container: 'checkout', paymentMethodNonceReceived: function (event, nonce) { $http({ method: 'POST', url: 'http://localhost:3000/api/v1/process', data: { amount: $scope.amount, payment_method_nonce: nonce } 06.23.15 @braintree_dev @demianborba
- 81. app.post('/api/v1/process', function (request, response) { var transaction = request.body; gateway.transaction.sale({ amount: transaction.amount, paymentMethodNonce: transaction.payment_method_nonce }, function (err, result) { if (err) throw err; response.json(result); }); }); 06.23.15 @braintree_dev @demianborba
- 82. demo (angular app taking cards, PayPal and Bitcoin) 06.23.15 @braintree_dev @demianborba
- 83. • Mobile Commerce • Getting started with Cordova • Powerful libraries and frameworks • Accepting cards, PayPal and Bitcoin >Chapters 06.23.15 @braintree_dev @demianborba
- 85. The end. Thank you, questions? Demian Borba <developer-advocate/> @demianborba github.com/demianborba 06.23.15 @braintree_dev @demianborba