Making money with Phonegap and Angular apps

06.23.15

@braintree_dev @demianborba

Making money with Phonegap and Angular appsDemian Borba <developer-advocate/>

@demianborba

github.com/demianborba

http://twitter.com/braintree_dev

http://twitter.com/demianborba


http://github.com/demianborba

Demian Borba <developer-advocate/>

San Francisco & Bay Area

06.23.15




06.23.15

Making money with Phonegap and Angular appsCordovaDemian Borba <developer-advocate/>

@demianborba




06.23.15




URL: http://phonegapbootcamp.io 06.23.15


http://phonegapbootcamp.io



06.23.15


Your Developer Toolbox



• Mobile Commerce

• Getting started with Cordova

• Powerful libraries and frameworks

• Accepting cards, PayPal and Bitcoin

>Chapters

06.23.15




Chapter one:Mobile Commerce

06.23.15




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


$31.6BMOBILE COMMERCE IN THE US, 2014

11.8% OF TOTAL DIGITAL COMMERCE

http://www.comscore.com/Insights/Presentations-and-Whitepapers/2015/The-MCommerce-Gap-Why-Dollars-Continue-to-Lag-Shopping-Behavior-on-Mobile




06.23.15


$11.1BMOBILE COMMERCE IN THE US, Q1 2015

15.4% OF TOTAL DIGITAL COMMERCE





06.23.15


Desktop

Mobile

Share of Online Retail Browsing





06.23.15


Desktop

Mobile

Online Retail Browsing vs. Spending by Platform

GAP





06.23.15


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




06.23.15




Chapter two:Getting started with Cordova

06.23.15




based on a true story...

06.23.15




06.23.15




06.23.15




06.23.15


Source: http://speedtest.net



http://speedtest.net

06.23.15




Source: http://cordova.apache.org06.23.15


http://cordova.apache.org



Source: http://cordova.apache.org/docs/en/5.0.0//guide_cli_index.md.html#The%20Command-Line%20Interface 06.23.15


http://cordova.apache.org/docs/en/5.0.0//guide_cli_index.md.html#The%20Command-Line%20Interface













Source: https://nodejs.org/download/ 06.23.15


8MB

16MB

https://nodejs.org/download/



06.23.15


DEVELOPER DEVELOPER DEVELOPER



06.23.15





06.23.15




06.23.15





06.23.15




Source: http://git-scm.com/06.23.15


17MB

http://git-scm.com/



06.23.15





Source: http://git-scm.com/06.23.15


23MB

http://git-scm.com/



06.23.15





06.23.15




06.23.15





npm install -g cordova

06.23.15




06.23.15





06.23.15





sudo chown -R {{whoami}} /usr/local/

06.23.15


Source: https://docs.npmjs.com/getting-started/fixing-npm-permissions



https://docs.npmjs.com/getting-started/fixing-npm-permissions

06.23.15



Source: https://docs.npmjs.com/getting-started/fixing-npm-permissions



https://docs.npmjs.com/getting-started/fixing-npm-permissions

06.23.15




06.23.15


demo (create app + add platforms) cordova create app_folder io.demian.app AppName cordova platform add ios android








06.23.15




• 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




06.23.15


Source: http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html



http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

06.23.15


Source: http://developer.android.com/sdk/installing/index.html?pkg=studio



http://developer.android.com/sdk/installing/index.html?pkg=studio

06.23.15




06.23.15




06.23.15




demo (build + deploy + debug) cordova build android cordova run androidchrome://inspect

06.23.15




06.23.15




06.23.15


Xcode Command Line Tools



06.23.15


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




Chapter three:Powerful libraries and frameworks

06.23.15




• 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


Source: http://ionicframework.com/



http://ionicframework.com/

06.23.15


Source: http://blog.ionic.io/ionic-lab/



http://blog.ionic.io/ionic-lab/

> _material

06.23.15


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



https://material.angularjs.org

• 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


Source: http://ngcordova.com/



http://ngcordova.com/

Chapter four:Accepting cards, PayPal and Bitcoin

06.23.15




06.23.15


consumers (card holders)

merchants

gateways

acquiring banks

processors

card associations

issuing banks

PCI Compliance (Payment Card Industry)



06.23.15




06.23.15




06.23.15




06.23.15


Client-side libraries for iOS, Android, and Web. Server-side libraries in the language of your choice.

Source: https://www.braintreepayments.com/v.zero



https://www.braintreepayments.com/v.zero

The regular way

06.23.15




06.23.15


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



https://developers.braintreepayments.com/javascript+node/start/overview

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


Source: https://developers.braintreepayments.com/javascript+node/start/hello-server

app.js



https://developers.braintreepayments.com/javascript+node/start/hello-server

app.get('/', function (request, response) {

gateway.clientToken.generate({}, function (err, res) { response.render('index', { clientToken: res.clientToken }); });

});

06.23.15


app.js



 <div id="checkout"></div>

<script src="braintree.js"></script> <script> braintree.setup('<%- clientToken %>', 'dropin', { container: ‘checkout' }); </script>

06.23.15


index.ejs



The Angular way

06.23.15




06.23.15


Source: https://developers.braintreepayments.com/javascript+node/start/overview

npm install braintree

var braintree = require('braintree')

npm install braintree-web

bower install braintree-web



https://developers.braintreepayments.com/javascript+node/start/overview

 <div id="checkout"></div>

<script src="braintree.js"></script>

06.23.15


Source: https://developers.braintreepayments.com/javascript+node/start/hello-client



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


Source: https://developers.braintreepayments.com/javascript+node/start/hello-server



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




$http({ method: 'POST', url: 'http://localhost:3000/api/v1/token' }).success(function (data) { // handle response}

06.23.15




// 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




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




demo (angular app taking cards, PayPal and Bitcoin)

06.23.15




• Mobile Commerce

• Getting started with Cordova

• Powerful libraries and frameworks

• Accepting cards, PayPal and Bitcoin

>Chapters

06.23.15




06.23.15


Your Developer Toolbox



The end.Thank you, questions?Demian Borba <developer-advocate/>

@demianborba

github.com/demianborba

06.23.15



http://github.com/demianborba

Technology

Making money with Phonegap and Angular apps