Google Apps Script

Prof. Sérgio Souza Costa

Aprenda na prática - Parte 2

Sobre mim

Sérgio Souza CostaProfessor - UFMADoutor em Computação Aplicada (INPE)

prof.sergio.costa@gmail.com

https://sites.google.com/site/profsergiocosta/home

https://twitter.com/profsergiocosta

http://gplus.to/sergiosouzacosta

http://www.slideshare.net/skosta/presentations?order=popular

Link para a primeira parte;http://www.slideshare.net/skosta/google-apps-script-parte-1

Google Apps Script

Ui Service

Like GWT (not all items)

Some elements have been deprecated (hyperlink,..)

Fast to develop, difficult to maintain

IMHO: It’s the past

HTML Service

Like HTML5 (not all benefits)

HTML through compiler Caja (HTML is limited :(

Only jQuery as ext library

IMHO: It’s the future!

Criando aplicação web

No google drive, click em criar e depois em script

Criando aplicação web

Escolha projeto em branco

Criando aplicação web

Copie o código abaixo no editor.

function doGet() {var output = HtmlService.createHtmlOutput('');

output.append("<h1>JINF13 - Google Apps Script</h1>")output.append("<p> Ola Mundo </p>")return output;

}

Criando aplicação web

Selecione Publicar -> Implantar como aplicativo Web

Implantando aplicação web

Digite um nome para a versão, e click em salvar nova versão.

Implantando aplicação web

Click em implementar.

Implantando aplicação web

URL para a ultima versão implantada, copie e cole em um navegador web

Implantando aplicação web

URL para a ultima versão implantada, copie e cole em um navegador web

Implantando aplicação web

Gerenciando modificações

Após a implantação da primeira versão, o google disponibiliza uma URL para a versão em desenvolvimento. Para entender como funciona, edite o código anterior adicionando o seu nome, como abaixo:

function doGet() {var output = HtmlService.createHtmlOutput('');

output.append("<h1>JINF13 - Google Apps Script</h1>") output.append("<h2>Sérgio Souza Costa</h2>")

output.append("<p> Ola Mundo </p>")return output;

}

Gerenciando modificações

Gerenciando modificações

URL para a versão em desenvolvimento. Click nela

Gerenciando modificações

Gerenciando modificações

O resultado saiu como esperado ? Então pode criar uma nova versão, como a seguir:

Gerenciando modificações

Gerenciando modificações

Gerenciando modificações

Gerenciando modificações

Gerenciando modificações

Escolha a versão 2, a última criada

Gerenciando modificações

Click em atualizar

Copie e cole novamente a url atual em um navegador

Gerenciando modificações

Em arquivos separados

Em arquivos separados

function doGet() {return HtmlService.createHtmlOutputFromFile('index').

setSandboxMode(HtmlService.SandboxMode.NATIVE);}

Em arquivos separados

function doGet() {return HtmlService.createHtmlOutputFromFile('index').

setSandboxMode(HtmlService.SandboxMode.NATIVE);}

Em arquivos separados

function doGet() {return HtmlService.createHtmlOutputFromFile('index').

setSandboxMode(HtmlService.SandboxMode.NATIVE);}

https://script.google.com/d/16zsXAUUmQYCGyYIhDbMmr_CzrrAc9quNuj-MnFaGBPlJoh87K3eFRHbF/edit?usp=sharing

Em arquivos separados

Acesse o projeto neste link

<div id="g1"> Google Apps Script</div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" >$( function(){ $("#g1").animate({ "fontSize": "400%" }, 1000);

})</script>

function doGet() { return HtmlService.createHtmlOutputFromFile('index2').

setSandboxMode(HtmlService.SandboxMode.NATIVE);}

Em arquivos separados

Usando JavaScript e JQuery

<div id="g1"> Google Apps Script</div><script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" >$( function(){ $("#g1").animate({ "fontSize": "400%" }, 1000);

})</script>

function doGet() { return HtmlService.createHtmlOutputFromFile('index2').

setSandboxMode(HtmlService.SandboxMode.NATIVE);}

Em arquivos separados

Usando JavaScript e JQuery

No link abaixo tenho disponível uma aula detalhada sobre JQuery:

http://www.slideshare.net/skosta/cliente-side-javascriptpptx

Boas práticas

Separar os arquivos, HTML, JavaScript e CSS.

Mostrando dados de uma planilha

Considere uma planilha com nomes e três notas de cada aluno, como no link a seguir:

https://docs.google.com/spreadsheet/ccc?key=0Avv93GPSzr6FdDRiNWlCREZnLVkzQ1VnTmpJaDJJU2c&usp=sharing

Este é o id da planilha 0Avv93GPSzr6FdDRiNWlCREZnLVkzQ1VnTmpJaDJJU2c

Id (ou key)

function doGet() { var output = HtmlService.createHtmlOutput(''); output.append("<h1>Notas Alunos</h1>") var sheet = SpreadsheetApp.openById(

"0Avv93GPSzr6FdDRiNWlCREZnLVkzQ1VnTmpJaDJJU2c") var data = sheet.getDataRange().getValues() output.append("<table>") for (var i in data) { output.append("<tr>") for (var j in data[i]) { output.append("<td>").append(data[i][j]).append("</td>") } output.append("</tr>") } output.append("<table>") return output;}

Crie um novo projeto em branco, depois copie e cole o código abaixo:

O id da planilha anterior, alunos e notas.

Mostrando dados de uma planilha

Como o aplicativo esta acessando uma planilha, é necessário autorizá-lo antes de publicar:

Mostrando dados de uma planilha

Click em executar,

Como o aplicativo esta acessando uma planilha, é necessário autorizá-lo antes de publicar:

Mostrando dados de uma planilha

Depois em continuar

Como o aplicativo esta acessando uma planilha, é necessário autorizá-lo antes de publicar:

Mostrando dados de uma planilha

Depois em aceitar.

Depois de implantado, podera ser acessado em um navegador como abaixo:

Mostrando dados de uma planilha

function doGet() { return HtmlService .createTemplateFromFile('index') .evaluate();}

function getData() { return SpreadsheetApp.openById('0Avv93GPSzr6FdDhGR3ZqbHpDTHJCMXotQUFWcEstcGc').getDataRange().getValues();}

<? var data = getData(); ?><table> <? for (var i = 0; i < data.length; i++) { ?> <tr> <? for (var j = 0; j < data[i].length; j++) { ?> <td><?= data[i][j] ?></td> <? } ?> </tr> <? } ?></table>

index.html

Codigo.gs

Versão usando Scriptlets

Mostrando dados de uma planilha

Mostrando dados de uma planilha para uma página no google sites

function atualizaPagina () { var output = HtmlService.createHtmlOutput(''); output.append("<h1>Notas Alunos</h1>") var sheet = SpreadsheetApp.getActiveSpreadsheet()

var data = sheet.getDataRange().getValues() output.append("<table>")

for (var i in data) {output.append("<tr>")for (var j in data[i]) {

output.append("<td>").append(data[i][j]).append("</td>") } output.append("</tr>")

} output.append("<table>") var page SitesApp.getPageByUrl('URLDAPAGINA”'); page.setHtmlContent (output.getContent())

}

Esta função pode ser criada em um script da planilha.

Mostrando dados de uma planilha para uma página no google sites

Crie uma cópia da planilha com as notas dos alunos:

Mostrando dados de uma planilha para uma página no google sites

Para manter a página atualizada, crie um acionador (trigger) que será executado a cada hora.

Mostrando dados de uma planilha para uma página no google sites

Para manter a página atualizada, crie um acionador (trigger) que será executado a cada hora.

Os scripts podem usar um grande número de elementos de interfaces (widgets):

● Push buttons

● Radio buttons

● Toggle buttons

● Check boxes

● Text fields

● Labels

● Titles

● List boxes

● Dialog boxes

● Panels of many types

UI service

UI service

Exemplo de interface:

function criaApp () { var myapp = UiApp.createApplication().setTitle('Aplicativo UI'); var mygrid = myapp.createGrid(3, 2); mygrid.setWidget(0, 0, myapp.createLabel('Name:')); mygrid.setWidget(0, 1, myapp.createTextBox()); mygrid.setWidget(1, 0, myapp.createLabel('Idade:')); mygrid.setWidget(1, 1, myapp.createTextBox()); mygrid.setWidget(2, 0, myapp.createLabel('Cidade')); mygrid.setWidget(2, 1, myapp.createTextBox()); var mybutton = myapp.createButton('Click'); var handler = myapp.createServerHandler('myClickHandler'); mybutton.addClickHandler(handler); var mypanel = myapp.createVerticalPanel(); mypanel.add(mygrid); mypanel.add(mybutton); var label = myapp.createLabel('O botão foi clicado.') .setId('statusLabel') .setVisible(false); mypanel.add(label); myapp.add(mypanel); return myapp; }

UI service

function myClickHandler (e) { var app = UiApp.getActiveApplication();

var label = app.getElementById('statusLabel'); label.setVisible(true);

app.close(); return app;}

function doGet (e) { return criaApp(e);}

UI service

Custom Menus e Sidebar

http://sergioscosta.blogspot.com.br/2013/09/incorporando-videos-do-youtube-no.html

var xml = UrlFetchApp.fetch(youtubeURL).getContentText();var document = XmlService.parse(xml);

Acessando serviços externos

Carregando vídeos do youtube, a partir dos dados do XML.

Acesse https://dev.twitter.com/ e crie um novo aplicativo:

Acessando serviços externos com autenticação

https://script.google.com/macros

Acessando serviços externos com autenticação

https://developers.google.com/apps-script/guides/services/external

var consumerKey = 'XXXXX'; // Register your app with Twitter.var consumerSecret = 'XXXXX'; // Register your app with Twitter.var oauthConfig = UrlFetchApp.addOAuthService('twitter');oauthConfig.setAccessTokenUrl( 'http://api.twitter.com/oauth/access_token');oauthConfig.setRequestTokenUrl( 'http://api.twitter.com/oauth/request_token');oauthConfig.setAuthorizationUrl( 'http://api.twitter.com/oauth/authorize');oauthConfig.setConsumerKey(consumerKey);oauthConfig.setConsumerSecret(consumerSecret);var options = { 'oAuthServiceName' : 'twitter', 'oAuthUseToken' : 'always'};var url = 'http://api.twitter.com/1.1/statuses/user_timeline.json';var response = UrlFetchApp.fetch(url, options);var tweets = JSON.parse(response.getContentText());

Acessando serviços externos com autenticação

Acessando serviços externos com autenticação (twitter)

https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline

var result = UrlFetchApp.fetch("https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=profsergiocosta&count=5", options);var o = Utilities.jsonParse(result.getContentText()); var output = HtmlService.createHtmlOutput(''); output.append("<h1>Oficina - GAS</h1>")var index = 0; for (var i in o) { var post = o[i]; output.append("<p>").append(post.text).append ("</p>") }

return output;

Acessando serviços externos com autenticação (twitter)

var result = UrlFetchApp.fetch("https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=profsergiocosta&count=5", options);var o = Utilities.jsonParse(result.getContentText()); var output = HtmlService.createHtmlOutput(''); output.append("<h1>Oficina - GAS</h1>")var index = 0; for (var i in o) { var post = o[i]; output.append("<p>").append(post.text).append ("</p>") }

return output;

Acessando serviços externos com autenticação (twitter)