making money with phonegap and angular apps
TRANSCRIPT
06.23.15
@braintree_dev @demianborba
Making money with Phonegap and Angular appsDemian Borba <developer-advocate/>
@demianborba
github.com/demianborba
Demian Borba <developer-advocate/>
San Francisco & Bay Area
06.23.15
@braintree_dev @demianborba
06.23.15
Making money with Phonegap and Angular appsCordovaDemian Borba <developer-advocate/>
@demianborba
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
URL: http://phonegapbootcamp.io 06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
Your Developer Toolbox
• Mobile Commerce
• Getting started with Cordova
• Powerful libraries and frameworks
• Accepting cards, PayPal and Bitcoin
>Chapters
06.23.15
@braintree_dev @demianborba
Chapter one:Mobile Commerce
06.23.15
@braintree_dev @demianborba
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.6BMOBILE COMMERCE IN THE US, 2014
11.8% OF TOTAL DIGITAL COMMERCE
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.1BMOBILE COMMERCE IN THE US, Q1 2015
15.4% OF TOTAL DIGITAL COMMERCE
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
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
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
SOLUTION?
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
Chapter two:Getting started with Cordova
06.23.15
@braintree_dev @demianborba
based on a true story...
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
Source: http://speedtest.net
06.23.15
@braintree_dev @demianborba
Source: http://cordova.apache.org06.23.15
@braintree_dev @demianborba
Source: http://cordova.apache.org/docs/en/5.0.0//guide_cli_index.md.html#The%20Command-Line%20Interface 06.23.15
@braintree_dev @demianborba
Source: http://cordova.apache.org/docs/en/5.0.0//guide_cli_index.md.html#The%20Command-Line%20Interface 06.23.15
@braintree_dev @demianborba
Source: http://cordova.apache.org/docs/en/5.0.0//guide_cli_index.md.html#The%20Command-Line%20Interface 06.23.15
@braintree_dev @demianborba
Source: https://nodejs.org/download/ 06.23.15
@braintree_dev @demianborba
8MB
16MB
06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DEVELOPER
06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DEVELOPER
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DEVELOPER
06.23.15
@braintree_dev @demianborba
Source: http://git-scm.com/06.23.15
@braintree_dev @demianborba
17MB
06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DEVELOPER
Source: http://git-scm.com/06.23.15
@braintree_dev @demianborba
23MB
06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DEVELOPER
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DEVELOPER
npm install -g cordova
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DEVELOPER
06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DEVELOPER
sudo chown -R {{whoami}} /usr/local/
06.23.15
@braintree_dev @demianborba
Source: https://docs.npmjs.com/getting-started/fixing-npm-permissions
06.23.15
@braintree_dev @demianborba
DEVELOPER DEVELOPER DEVELOPER
Source: https://docs.npmjs.com/getting-started/fixing-npm-permissions
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
demo (create app + add platforms) cordova create app_folder io.demian.app AppName cordova platform add ios android
Source: http://cordova.apache.org/docs/en/5.0.0//guide_cli_index.md.html#The%20Command-Line%20Interface 06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
• 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
06.23.15
@braintree_dev @demianborba
Source: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html
06.23.15
@braintree_dev @demianborba
Source: http://developer.android.com/sdk/installing/index.html?pkg=studio
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
demo (build + deploy + debug) cordova build android cordova run androidchrome://inspect
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
Xcode Command Line Tools
06.23.15
@braintree_dev @demianborba
xcode-select --install npm install -g ios-sim npm install -g ios-deploy
demo (build + deploy + debug) cordova build ios cordova run ios --simulator cordova run ios --device
06.23.15
@braintree_dev @demianborba
Chapter three:Powerful libraries and frameworks
06.23.15
@braintree_dev @demianborba
• 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/
06.23.15
@braintree_dev @demianborba
Source: http://blog.ionic.io/ionic-lab/
> _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
• 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/
Chapter four:Accepting cards, PayPal and Bitcoin
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
consumers (card holders)
merchants
gateways
acquiring banks
processors
card associations
issuing banks
PCI Compliance (Payment Card Industry)
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
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
The regular way
06.23.15
@braintree_dev @demianborba
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
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
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
<!-- 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
The Angular way
06.23.15
@braintree_dev @demianborba
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
<!-- 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
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.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
$http({ method: 'POST', url: 'http://localhost:3000/api/v1/token' }).success(function (data) { // handle response}
06.23.15
@braintree_dev @demianborba
// 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
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
demo (angular app taking cards, PayPal and Bitcoin)
06.23.15
@braintree_dev @demianborba
• Mobile Commerce
• Getting started with Cordova
• Powerful libraries and frameworks
• Accepting cards, PayPal and Bitcoin
>Chapters
06.23.15
@braintree_dev @demianborba
06.23.15
@braintree_dev @demianborba
Your Developer Toolbox
The end.Thank you, questions?Demian Borba <developer-advocate/>
@demianborba
github.com/demianborba
06.23.15
@braintree_dev @demianborba