diegocaxito · January 6, 2012 03:14 · diegocaxito · Jan 6, 2012
diff --git a/html5SqlDataBaseAPITest.html b/html5SqlDataBaseAPITest.html
 <!DOCTYPE html >
 <html lang="en">
 <head>
    <meta charset="utf-8" />
    <title>Teste de HTML5 Web Sql Database API com pesquisa e inserção de dados a partir do twitter</title>
    <style>
        body
        {
            font-family: helvetica, arial;
        }
    </style>
 </head>
 <body>
    <form>
    <fieldset>
        <legend>Selecione um periodo de tempo recente para pesquisar sobre Narcisa que foi entrevistada por Danilo Gentili</legend>
        <input type="radio" value="5" id="t5m" name="timerange" />
        <label for="t5m">
            5 minutos</label>
        <input type="radio" value="30" id="t30m" name="timerange" />
        <label for="t30m">
            30 minutos</label>
        <input type="radio" value="120" id="t2h" name="timerange" />
        <label for="t2h">
            2 horas</label>
        <input type="radio" value="Tudo" id="tall" name="timerange" checked="checked" />
        <label for="tall">
            Tudo</label>
    </fieldset>
    </form>
    <ul id="tweets">
    </ul>
    <script type="text/javascript">
        var tweetEl = document.getElementById('tweets');
        var acessoDados = {
            baseDados: null,
            abrirBase: function () {
                acessoDados.baseDados;
                if (!window.openDatabase) {
                    tweetEl.innerHTML = '<li>Web SQL Database API não está disponível nesse browser, tente Opera, Webkit ou Chrome.</li>';
                    return;
                }
                else {
                    alert('Vai abrir a base de dados');
                    acessoDados.baseDados = openDatabase('mydb', '1.0', 'My first database', 2 * 1024 * 1024);
                    acessoDados.baseDados.transaction(function (tx) {
                        tx.executeSql('CREATE TABLE tweets(id unique, screen_name, date integer, text)', null, acessoDados.sucessoCriacaoTabela, acessoDados.erroCriacaoTabela);
                    });
                    acessoDados.obterTweets();
                }
            },
            sucessoCriacaoTabela: function () {
                alert('criou tabela');
            },
            erroCriacaoTabela: function () {
                alert('erro na criacao');
            },
            obterTweets: function () {
                var script = document.createElement('script');
                script.src = 'http://search.twitter.com/search.json?q=Narcisa&rpp=100&callback=salvarTweets';
                document.body.appendChild(script);
            },

            mostrarTweets: function (quantidade) {
                acessoDados.baseDados.transaction(function (tx) {
                    tx.executeSql('SELECT * FROM tweets' + (quantidade != 'Tudo' ? ' WHERE date > strftime("%s", "now", "-' + quantidade + ' minutes")' : ''), [],
                    function (tx, results) {
                        var html = [];
                        var len = results.rows.length;
                        for (var i = 0; i < len; i++) {
                            html.push('<li>' + results.rows.item(i).text + '</li>');
                        }
                        tweetEl.innerHTML = html.join('');
                    });
                });
            }
        };

        function salvarTweets(tweets) {
            tweets.results.forEach(function (tweet) {
                acessoDados.baseDados.transaction(function (tx) {
                    var time = (new Date(Date.parse(tweet.created_at))).getTime();
                    tx.executeSql('INSERT INTO tweets(id, screen_name, date, text) VALUES(?, ?, ?, ?)', [tweet.id, tweet.from_user, time / 1000, tweet.text]);
                });
            });
        }

        [].forEach.call(document.querySelectorAll('input[type=radio]'), function (el) {
            el.onclick = function () { acessoDados.mostrarTweets(this.value); }
        });

        acessoDados.abrirBase();
    </script>
 </body>
 </html>
	<!DOCTYPE html >
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>Teste de HTML5 Web Sql Database API com pesquisa e inserção de dados a partir do twitter</title>
	<style>
	body
	{
	font-family: helvetica, arial;
	}
	</style>
	</head>
	<body>
	<form>
	<fieldset>
	<legend>Selecione um periodo de tempo recente para pesquisar sobre Narcisa que foi entrevistada por Danilo Gentili</legend>
	<input type="radio" value="5" id="t5m" name="timerange" />
	<label for="t5m">
	5 minutos</label>
	<input type="radio" value="30" id="t30m" name="timerange" />
	<label for="t30m">
	30 minutos</label>
	<input type="radio" value="120" id="t2h" name="timerange" />
	<label for="t2h">
	2 horas</label>
	<input type="radio" value="Tudo" id="tall" name="timerange" checked="checked" />
	<label for="tall">
	Tudo</label>
	</fieldset>
	</form>
	<ul id="tweets">
	</ul>
	<script type="text/javascript">
	var tweetEl = document.getElementById('tweets');
	var acessoDados = {
	baseDados: null,
	abrirBase: function () {
	acessoDados.baseDados;
	if (!window.openDatabase) {
	tweetEl.innerHTML = '<li>Web SQL Database API não está disponível nesse browser, tente Opera, Webkit ou Chrome.</li>';
	return;
	}
	else {
	alert('Vai abrir a base de dados');
	acessoDados.baseDados = openDatabase('mydb', '1.0', 'My first database', 2 * 1024 * 1024);
	acessoDados.baseDados.transaction(function (tx) {
	tx.executeSql('CREATE TABLE tweets(id unique, screen_name, date integer, text)', null, acessoDados.sucessoCriacaoTabela, acessoDados.erroCriacaoTabela);
	});
	acessoDados.obterTweets();
	}
	},
	sucessoCriacaoTabela: function () {
	alert('criou tabela');
	},
	erroCriacaoTabela: function () {
	alert('erro na criacao');
	},
	obterTweets: function () {
	var script = document.createElement('script');
	script.src = 'http://search.twitter.com/search.json?q=Narcisa&rpp=100&callback=salvarTweets';
	document.body.appendChild(script);
	},

	mostrarTweets: function (quantidade) {
	acessoDados.baseDados.transaction(function (tx) {
	tx.executeSql('SELECT * FROM tweets' + (quantidade != 'Tudo' ? ' WHERE date > strftime("%s", "now", "-' + quantidade + ' minutes")' : ''), [],
	function (tx, results) {
	var html = [];
	var len = results.rows.length;
	for (var i = 0; i < len; i++) {
	html.push('<li>' + results.rows.item(i).text + '</li>');
	}
	tweetEl.innerHTML = html.join('');
	});
	});
	}
	};

	function salvarTweets(tweets) {
	tweets.results.forEach(function (tweet) {
	acessoDados.baseDados.transaction(function (tx) {
	var time = (new Date(Date.parse(tweet.created_at))).getTime();
	tx.executeSql('INSERT INTO tweets(id, screen_name, date, text) VALUES(?, ?, ?, ?)', [tweet.id, tweet.from_user, time / 1000, tweet.text]);
	});
	});
	}

	[].forEach.call(document.querySelectorAll('input[type=radio]'), function (el) {
	el.onclick = function () { acessoDados.mostrarTweets(this.value); }
	});

	acessoDados.abrirBase();
	</script>
	</body>
	</html>