Stripe Example - index.ejs

Embedded JS templates look like standard HTML.
We escape into Javascript using: <% /*javascript code %>
To echo a Javascript property's value from the render call, we use <%=property_name %> (escaped) or <%-property_name %> (unescaped)
To include one template in another <% include('some_other_template_name') %>

<!DOCTYPE html>
<html>
<head><title>Credit Card Test</title></head>
<body>
<form id="purchase-stuff-form" method="post" action="/charge">
<input type="hidden" id="credit-token"  name="credit_token" value="" />
<p><label for="amount">Amount:</label><input type="text" id="amount"
    size="2" name="amount" /></p>
<p><label for="card-number">Card Number:</label><input type="text"
    id="card-number" size="20" data-stripe='number'
    name="card-number" /></p>
<p><label for="cvc">CVC:</label><input type="text" id="cvc" size="4"
    data-stripe='cvc' name="cvc" /></p>
<p><label for="exp-month">Expiration Month:</label><input type="text"
    id="exp-month" size="2" data-stripe='exp-month' name="exp-month" /></p>
<p><label for="exp-year">Expiration Year:</label><input type="text"
    id="exp-year" size="2" data-stripe='exp-year' name="exp-year" /></p>
<p><input type="submit" id="purchase" name="Purchase" value="Purchase"></p>
</form>
<script>
function elt(id)
{
    return document.getElementById(id);
}
elt('purchase').onclick = function(event) {
    var purchase_form = elt('purchase-stuff-form');
    elt('purchase').disabled = true; // prevent additional clicks
    Stripe.card.createToken(purchase_form, tokenResponseHandler);
    event.preventDefault(); //prevent form submitting till get all clear
}
function tokenResponseHandler(status, response) 
{
    var purchase_form = elt('purchase-stuff-form');
    if (response.error) {
        alert(response.error.message);
        elt('purchase').disabled = false;
    } else {
        elt('credit-token').value = response.id;
        purchase_form.submit();
    }
}
</script>
<script src="https://js.stripe.com/v2/"  ></script>
<script>
Stripe.setPublishableKey('<%=PUBLISHABLE_KEY %>');
</script>
</body>
</html>

Stripe Example - message.ejs

<!DOCTYPE html>
<html>
<head><title>Credit Card Test - <%=message %></title></head>
<body>
<h1><%=message %></h1>
</body>
</html>

Stripe Example - config.js

var config = {
    "SECRET_KEY": "sk_test_key",
    "PUBLISHABLE_KEY": "pk_test_key",
    "CHARGE_URL": "https://api.stripe.com/v1/charges",
    "CHARGE_CURRENCY": "usd",
    "CHARGE_DESCRIPTION": "Buyer sees this on their statement",
    "CHARGE_USERAGENT": "CreditCardTester",
    "TIMEOUT": 20
}
module.exports = config;

Stripe Example - app.js

var express = require('express');

var body_parser = require('body-parser'); //to handle posted data
var path = require('path'); // for directory paths
var config = require(path.join(__dirname, 'config')); // has our keys
var request = require('request'); // to make backend requests to stripe

var app = express();
app.use(body_parser.urlencoded({extended: true}));

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.get('/', function(req, res) {
  res.render('index', { 'PUBLISHABLE_KEY': config.PUBLISHABLE_KEY });
});
app.post('/charge', function(req, res) {
    /*here we use the request module to make a stripe request using
      the token we received from our form*/
    request.post({
        url:config.CHARGE_URL, 
        form: {
            //swipe charges in cents * 100 to convert to dollars
            "amount": req.body.amount * 100,
            "currency": config.CHARGE_CURRENCY,
            "source": req.body.credit_token,
            "description": config.CHARGE_DESCRIPTION
            },
        auth: {
            'user': config.SECRET_KEY,
            'pass': ''
            }
        },
        function(err, http_response, body) {
            stripe_result = JSON.parse(body);
            if (typeof stripe_result.status === 'undefined') {
                if (typeof stripe_result.message === 'undefined') {
                    res.render('message', { 'message': req.body.amount +
                        "charge did not do through!<br />" +
                        stripe_result.credit_message});
                }
            } else if (stripe_result.status == 'succeeded') {
                res.render('message', { 'message': req.body.amount +
                    "charged" });
            }
        }
    );
});
app.listen(8888, function () {
    console.log('Credit Server up!')
})

In-Class Exercise

Write a short Express app.js that listens to 8888. On a route /*foo*, it should output a validating HTML 5 page which is the result of interpolating, the value of the config.foo coming from an exported object from the module in config.js. On all other routes, it should output the value of config.goo.

Your project should use a middleware function to console.log the ip address of any request coming into your app.

Post your solutions to the May 10 In-Class Exercise Thread.

Multimedia and HTML 5

For the rest of today, we are going to look at some of the multimedia features of HTML.
Many of these features are designed to make HTML work well with phones and tablets.
In particular, HTML and Javascript can make use of a device's sensors like current location and the accelerometer and it has a local storage mechanism.
As we've seen, the canvas tag allows drawing of 2d objects.
HTML 5 supports audio and video playback.
Web 3D provides an interface to OpenGL 3D graphics from HTML 5
WebRTC provides support for video conferencing.
We start with how to make our web apps a little more mobile friendly, along the way learning a little jQuery...

Mobile HTML 5

A mobile app created with HTML 5 is essentially a web page which employs features of HTML 5 to make it render nicely and to render rich content in a mobile device.
Such an app typically makes use of the Javascript language for networking as well as for persistence.
When coding such an app, often one makes use of an existing Javascript framework (a library written in Javascript and CSS) to provide a palette of pre-made, useful widgets which are cross-platform. Otherwise, you would have to code these yourself.
For this class, we are going to make use of jQuery Mobile.

A Template HTML 5 Document with jQuery Mobile

<!DOCTYPE html>
<html> 
    <head> 
    <title>Hello HTML 5</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script></head> 
<body> 

<div data-role="page">

    <div data-role="header">
        <h1>My First HTML APP!</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <p>This is an HTML 5 app.</p>        
    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>

Hello HTML 5 app.

The Head of a Document

In our example, the head of the document also uses the script tag to include the jQuery framework, and the jQuery mobile framework.
The link tag in our example is used to include jQuery's Cascading Style Sheet file. Stylesheets are used to specify how a tag should render in the browser.
In our example, we have the name attribute given the value viewport. This is a new HTML 5 name value.
The viewport of a browser is the virtual window area in which it renders a web page. This may be larger than the devices screen size (for example, you might need to scroll left or right or up down on the desktop to see the whole viewport).
The viewport affects how lines wrap, etc.
The area of the browser which is not rendered into ( the area containing the url, etc) is often called browser chrome).
The reason for the viewport meta tag is on a mobile device we often don't have scroll-bars -- we use pinch and zoom. The default viewport on a iOS device has a width of 980. Safari draws this whole width within the actual screen-width (in terms of calculation, not underlying pixels) of 320/640/736 pixels (on a 3GS, iphone 4, iphone 6 or higher) by scaling. There is more variety on android devices but similar numbers hold.
The content attribute associated with the name attribute viewport in the meta directive says how the browser should render the page within the viewport. For example, width=device-width. Says that the viewport width should be the actual devices width rather than 980. initial-scale controls the zoom level of the page when initially loaded (1 means no zoom).
We could have given a number of pixels rather than device-width. We could also have specified height as device-height or some number of pixels. Other possible directives are minimum-scale, maximum-scale, as well as user-scalable (yes/no as values).

Remarks on the Body of our Example

Notice in our example, the div tag has a data-role attribute. data-* attributes are user-defined attributes which were introduced with HTML 5.
HTML 5 supporting Javascript engines have a document object model including a dataset field for their elements. This allows Javascript to easily get at elements that have data-* attributes and manipulate them. This is what jQuery is using as part of how it draws things.
In CSS, we can also select such tags using selectors like div[data-role=header] .

Where to Find Examples

The jQuery Mobile Getting Started page has a lot of quick examples you can try out to get started with creating HTML 5 apps.
We conclude by showing one of the widgets from that page for displaying unordered lists.

The code you would put within your data-role="content" div tag would look like:

<ul data-role="listview" data-inset="true" data-filter="true">
    <li><a href="#">Red</a></li>
    <li><a href="#">Green</a></li>
    <li><a href="#">Blue</a></li>
    <li><a href="#">Violet</a></li>
    <li><a href="#">Ultra-Violet</a></li>
</ul>

This would render as this Unordered List Page.

jQuery

jQuery was developed by John Resig in 2006 and is used in 52% of the top 10,000 web sites.
Different Browsers implement Javascript slightly differently.
The syntax for referring to elements on a web page in DOM as well as the syntax for doing Ajax varies at little bit between browsers.
jQuery aims to solve these two problems.

For example, rather than doing:

document.getElementById("yo").onclick = function() {alert("yo");}

in jQuery we could do:

$("#yo").onclick = function() {alert("yo");}

To add an onload event handler to a document, we can do:
```
$(document).ready(handler)
// or
$(handler)
```

Detecting Orientation Changes in HTML 5

As a first application of jQuery, let's write a little app which can detect the browser's orientation.
When the browser detect that there has been a switch from portrait to landscape mode, it generates an orientationchange event.
This event has an orientation property which is one of "portrait" or "landscape"
In the next example, we use jQuery to bind this event to a function changeOrientation which changes the way a div tag is styled.
We set up this binding after the onload event. The function for the onload event is set-up with a call to $(handler);, where as you'll see on the next slide handler is actually an anonymous function.
To set up the orientationchange event handler we make use of jQuery's bind function.
To get the screen set up correctly initially, even though no orientation change has occurred yet, we make use of jQuery's trigger function to trigger an event.
The way the basic page is drawn will still be done using jQuery Mobile.

Orientation Change Code

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Portrait or Landscape</title> 
    <meta id="myview" name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script>
    $(function(){
        // Orientation Change
        // When orientation changes event is triggered
        // exposing an orientation property of either
        // landscape or portrait
        $('body').bind('orientationchange', function(event){
            changeOrientation(event.orientation)
        })

        // Change the style depending on orientation
        function changeOrientation(ori) {
            // Remove all classes
            $("#orientation").removeClass('portrait landscape');
            $("#orientation").addClass(ori);
            $("#orientation").html("<p>"+ori.toUpperCase()+"</p>");
        }

        $("body").trigger("orientationchange");
    })
    </script>
    <style>
    div.portrait {
      background-color: blue;
      width: 100%;
      height: 100%;
    }
    div.landscape {
      background-color: red;
      width: 100%;
      height: 100%;
    }
    p {
        font-size:24px;
        color:white;
    }
    </style>
</head> 
<body> 

<div data-role="page">
 
    <div data-role="header">
        <h1>Orientation</h1>
    </div><!-- /header -->
 
    <div data-role="content">
    <div id="orientation" class="portrait" ></div>
    </div><!-- /content -->
 
    <div data-role="footer">
        <h4>My Footer</h4>
    </div><!-- /footer -->
</div><!-- /page -->

</body>
</html>

HTML 5 Local Storage

There was an attempt to standardize the use of sqlite in browsers: WebSQL.
Although browsers to varying degrees support this standard, since the standardization has been halted, I would like to discuss a different way to get persistence in HTML 5.
Local Storage is an enhancement to the key-value storage system known as cookies available in HTTP.
Whereas, in the cookie specification the official capacity/domain is something like 4KB, all modern browsers support 5MB/domain of local storage.

Here is a simple demo app showing how to use local storage:

<html>
<head>
<title>Local Storage Test</title>
</head>
<body>
<script type="text/javascript">
    if (localStorage) {
        document.write("<h1>Local Storage is Working!</h1>");
        testStorage();
    } else {
        document.write("<h1>Local Storage is Unavailable!</h1>");
    }

    function testStorage() 
    {
        myvalue = localStorage.getItem("mykey1");
        myvalue2 = localStorage["mykey2"];

        if(myvalue) {
            document.write("<p>Found stored value for mykey1 ="+
                myvalue+"</p>");
            localStorage.removeItem("mykey1");
            //can use localStorage.clear();  to get rid of everything
        } else {
            localStorage.setItem("mykey1", "hello");
        }
        if(myvalue2) {
            document.write("<p>Found stored value for mykey2 ="+
                myvalue2+"</p>");
        } else {
            localStorage["mykey2"] = "yo";
        }

        document.write("<h1>List all that's stored after update</h1>");
        for (i=0; i<=localStorage.length-1; i++)
        {  
            key = localStorage.key(i);  
            value = localStorage.getItem(key);
            document.write("<p>("+key+", "+value+")</p>");
        }
    }
</script>
</body>
</html>

Ajax in jQuery

We've already learned how to use Ajax with standard HTML.
However, syntax was a little awkward, and in some older browsers XMLHttpRequest() was a little flaky (IE6).

jQuery can come to the rescue by making a cross platform request which doesn't have to much code overhead. For example,

function  downloadDelayed()
{
    $.ajax({
        url : "myscript.php",
        success : function (data) {
           $("#contentArea").html(data);
        }
    });
}
setTimeout("downloadDelayed()", 1000);

This downloads myscript.php and displays it's contents into the tag with id contentArea.

Two-Dimensional Graphics in HTML

We now look at some of the new 2D graphics capabilities of HTML 5. HTML 5 also supports 3D graphics via Web3D, but we won't talk about that in this class.
Since Netscape 2, which introduced Javascript in 1996, there have been different techniques to get crude 2D graphics in browsers -- the very earliest techniques were very hackish involving drawing single pixel images over and over again.
Starting with IE 5 in 1998, an XML, tag-based language approach to 2D graphics called VML became available to web designers.
About a year later another tag-based, this time non-Microsoft language, called SVG appeared, and this eventually was supported by all major browsers.
Tag-based (vector/scene-based) approaches to 2D-graphics can often be inconvenient for scripting, writing games, etc as they are a little higher level and so slower.
In 2004, Apple introduced the canvas tag in its Safari browser to support a more low-level, raster, programmatic approach to graphics. This is now supported by all major browsers, is a WHATWG standard, and it is this tag that we will briefly introduce.

Canvas Tag

A basic canvas tag usage might look like:

<canvas id="drawpad" ></canvas>
<style type="text/css">
#drawpad {
    width: 200px;
    height: 100px;
    background-color: light-gray;
}
</style>

We can then refer to this object in Javascript, using document.getElementById("drawpad") or in jQuery using $("#drawpad"), use it to get a context and then start drawing:

<script type="text/javascript">
   drawpad_object = document.getElementById("drawpad");
   drawpad_context = drawpad_object.getContext("2d");
   drawpad_context.strokeStyle = "blue";
   drawpad_context.strokeRect(10,10,50,50);
   drawpad_context.fillStyle = "green";
   drawpad_context.font = "32pt Arial";
   max_width = 100;
   drawpad_context.rotate(3.14/3); //pi/3
   drawpad_context.fillText("hello", 80, -10, max_width);
 
</script>

In the above, besides 2d we could also have used webgl if we wanted a more OpenGL-like, 3D-type canvas.
Notice coordinates for the fillText are relative to the rotated canvas.
Context also supports methods for clearing areas clearRect, drawing images using drawImage. To specify more complex shapes, you call drawpad_context.beginPath(), give your path instructions, then drawpad_context.closePath(), and finally call fill(path) or stroke(path). Here path instructions can be moveTo, lineTo, arc, quadraticCurveTo, bezierCurveTo, etc.
To do double buffering with canvas, make a page with two canvas tags. Style them so they are the same size, but have one with visibility hidden. Draw your graphics into this one, then toggle which one is hidden.

Touch Events HTML5

In HTML 5 there are four main touch events which can be applied to any tag: touchStart, touchMove, touchEnd, touchCancel

As an example of setting up such events, consider

<canvas id="drawpad"

  ontouchstart="startHandler(event);"

  ontouchmove="moveHandler(event);"

  ontouchend="endHandler(event);"

  ontouchcancel="cancelHandler(event);"

></canvas>

You can also add events programmatically with:

drawpad_object.addEventListener("touchstart", startHandler2, false);

These events are easier to test on a mobile device or using the iPhone Simulator / Android Emulator.

Finish Stripe App, Multimedia HTML

Outline