Google Apps Script Aprenda na prática - Parte 2

Google Apps Script
Aprenda na prática - Parte 2

Prof. Sérgio Souza Costa

Sobre mim
Sérgio Souza Costa
Professor - UFMA
Doutor em Computação Aplicada (INPE)
prof.sergio.costa@gmail.com

https://sites.google.com/site/profsergiocosta/home
http://www.slideshare.net/skosta/presentations?order=popular
https://twitter.com/profsergiocosta
http://gplus.to/sergiosouzacosta

Google Apps Script

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

Criando aplicação web

Ui Service

HTML Service

Like GWT (not all items)

Like HTML5 (not all benefits)

Some elements have been
deprecated (hyperlink,..)

HTML through compiler Caja
(HTML is limited :(

Fast to develop, difficult to maintain

Only jQuery as ext library

IMHO: It’s the past

IMHO: It’s the future!

No google drive,
click em criar e
depois em script


Escolha projeto
em branco

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;
}

Implantando aplicação web
Selecione
Publicar ->
Implantar como
aplicativo Web


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


Click em
implementar.

URL para a
ultima versão
implantada,
copie e cole em
um navegador
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() {
output.append("<h1>JINF13 - Google Apps Script</h1>")
output.append("<h2>Sérgio Souza Costa</h2>")
output.append("<p> Ola Mundo </p>")
return output;
}


URL para a versão em
desenvolvimento.
Click nela


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


Escolha a versão
2, a última criada


Click em atualizar


Copie e cole
novamente a url
atual em um
navegador

Em arquivos separados

function doGet() {
return HtmlService.createHtmlOutputFromFile('index').
setSandboxMode(HtmlService.SandboxMode.NATIVE);
}


Acesse o projeto
neste link
https://script.google.com/d/16zsXAUUmQYCGyYIhDbMmr_CzrrAc9quNujMnFaGBPlJoh87K3eFRHbF/edit?usp=sharing

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

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').
}

Usando JavaScript e JQuery
<div id="g1">
Google Apps Script
</div>
No link abaixo tenho disponível
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
uma aula detalhada sobre JQuery:
<script type="text/javascript" >
$(
http://www.slideshare.
function(){
net/skosta/cliente-side$("#g1").animate({ "fontSize": "400%" }, javascriptpptx
1000);
}
)
</script>

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

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)

Crie um novo projeto em branco, depois copie e
cole o código abaixo:
function doGet() {
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>")
}
return output;
}

O id da
planilha
anterior,
alunos e
notas.

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

Click em
executar,


Depois em
continuar


Depois em
aceitar.

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

index.html

Versão usando Scriptlets
Codigo.gs
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>

para uma página no google sites
function atualizaPagina () {
output.append("<h1>Notas Alunos</h1>")
var sheet = SpreadsheetApp.getActiveSpreadsheet()
var data = sheet.getDataRange().getValues()
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>")
}
var page SitesApp.getPageByUrl('URLDAPAGINA”');
page.setHtmlContent (output.getContent())
}

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

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

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

UI service
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
Exemplo de interface:

UI service
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(2, 0, myapp.createLabel('Cidade'));
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);
}

Acessando serviços externos
Carregando vídeos do youtube, a partir dos dados do
XML.
var xml = UrlFetchApp.fetch(youtubeURL).getContentText();
var document = XmlService.parse(xml);

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

Acessando serviços externos com
autenticação
Acesse https://dev.twitter.com/ e crie um novo
aplicativo:

https://script.google.com/macros

autenticação

autenticação
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');
https://developers.google.com/appsoauthConfig.setRequestTokenUrl(
script/guides/services/external
'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());

autenticação (twitter)
https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline

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());
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;

Google Apps Script Aprenda na prática - Parte 2

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Google Apps Script Aprenda na prática - Parte 2

Ähnlich wie Google Apps Script Aprenda na prática - Parte 2 (20)

Mehr von Sérgio Souza Costa

Mehr von Sérgio Souza Costa (20)

Google Apps Script Aprenda na prática - Parte 2