Post on 21-Jan-2015
description
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)