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://si...
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 ha...
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('');
...
Implantando 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
Gerenciando modificações
Após a implantação da primeira versão, o google
disponibiliza uma URL para a versão em
desenvolvi...
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
Gerenciando modificações

Copie e cole
novamente a url
atual em um
navegador
Em arquivos separados
Em arquivos separados
Em arquivos separados

function doGet() {
return HtmlService.createHtmlOutputFromFile('index').
setSandboxMode(HtmlService...
Em arquivos separados

function doGet() {
return HtmlService.createHtmlOutputFromFile('index').
setSandboxMode(HtmlService...
Em arquivos separados

Acesse o projeto
neste link
https://script.google.com/d/16zsXAUUmQYCGyYIhDbMmr_CzrrAc9quNujMnFaGBPl...
Em arquivos separados
Usando JavaScript e JQuery
<div id="g1">
Google Apps Script
</div>
<script src="//ajax.googleapis.co...
Em arquivos separados
Usando JavaScript e JQuery
<div id="g1">
Google Apps Script
</div>
No link abaixo tenho disponível
<...
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:...
Mostrando dados de uma planilha
Crie um novo projeto em branco, depois copie e
cole o código abaixo:
function doGet() {
va...
Mostrando dados de uma planilha
Como o aplicativo esta acessando uma planilha,
é necessário autorizá-lo antes de publicar:...
Mostrando dados de uma planilha
Como o aplicativo esta acessando uma planilha,
é necessário autorizá-lo antes de publicar:...
Mostrando dados de uma planilha
Como o aplicativo esta acessando uma planilha,
é necessário autorizá-lo antes de publicar:...
Mostrando dados de uma planilha
Depois de implantado, podera ser acessado em
um navegador como abaixo:
Mostrando dados de uma planilha
index.html

Versão usando Scriptlets
Codigo.gs
function doGet() {
return HtmlService
.crea...
Mostrando dados de uma planilha
para uma página no google sites
function atualizaPagina () {
var output = HtmlService.crea...
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
(trigge...
Mostrando dados de uma planilha
para uma página no google sites
Para manter a página atualizada, crie um acionador
(trigge...
UI service
Os scripts podem usar um grande número de elementos de interfaces (widgets):
●

Push buttons

●

Radio buttons
...
UI service
Exemplo de interface:
UI service
function criaApp () {
var myapp = UiApp.createApplication().setTitle('Aplicativo UI');
var mygrid = myapp.creat...
UI service

function myClickHandler (e) {
var app = UiApp.getActiveApplication();
var label = app.getElementById('statusLa...
Custom Menus e Sidebar
Acessando serviços externos
Carregando vídeos do youtube, a partir dos dados do
XML.
var xml = UrlFetchApp.fetch(youtubeUR...
Acessando serviços externos com
autenticação
Acesse https://dev.twitter.com/ e crie um novo
aplicativo:

https://script.go...
Acessando serviços externos com
autenticação
Acessando serviços externos com
autenticação
var consumerKey = 'XXXXX'; // Register your app with Twitter.
var consumerSec...
Acessando serviços externos com
autenticação (twitter)
https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline
Acessando serviços externos com
autenticação (twitter)

var result = UrlFetchApp.fetch("https://api.twitter.com/1.1/status...
Acessando serviços externos com
autenticação (twitter)

var result = UrlFetchApp.fetch("https://api.twitter.com/1.1/status...
Upcoming SlideShare
Loading in...5
×

Google apps script - Parte 2

1,697

Published on

3 Comments
4 Likes
Statistics
Notes
  • @undefined Obrigado, Sergio.Bom, tentarei resolver o problema desta maneira.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Eduardo, obrigado. Não sei se entendi bem a sua dúvida. Contudo, não é possível chamar uma função específica a partir de uma pagina html qualquer (não está no teu projeto). Uma possibilidade é criar um aplicativo Web que retorna dados no formato JSON. Deste modo, basta fazer uma requisição ao app criado e manipular os dados JSON.

    Espero que ajude.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Olá Sergio!
    Bom, inicialmente quero te parabenizar pelo trabalho que você tem desenvolvido.
    Agora a dúvida, tem como um arquivo HTML externo ao projeto no Apps Script 'chamar' as funções script deste projeto?
    Desde de já agradeço, e aguardo vossa resposta.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,697
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
58
Comments
3
Likes
4
Embeds 0
No embeds

No notes for slide

Google apps script - Parte 2

  1. 1. Google Apps Script Aprenda na prática - Parte 2 Prof. Sérgio Souza Costa
  2. 2. 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
  3. 3. Google Apps Script Link para a primeira parte; http://www.slideshare.net/skosta/google-apps-script-parte-1
  4. 4. 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!
  5. 5. Criando aplicação web No google drive, click em criar e depois em script
  6. 6. Criando aplicação web Escolha projeto em branco
  7. 7. 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; }
  8. 8. Implantando aplicação web Selecione Publicar -> Implantar como aplicativo Web
  9. 9. Implantando aplicação web Digite um nome para a versão, e click em salvar nova versão.
  10. 10. Implantando aplicação web Click em implementar.
  11. 11. Implantando aplicação web URL para a ultima versão implantada, copie e cole em um navegador web
  12. 12. Implantando aplicação web URL para a ultima versão implantada, copie e cole em um navegador web
  13. 13. 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; }
  14. 14. Gerenciando modificações
  15. 15. Gerenciando modificações URL para a versão em desenvolvimento. Click nela
  16. 16. Gerenciando modificações
  17. 17. Gerenciando modificações O resultado saiu como esperado ? Então pode criar uma nova versão, como a seguir:
  18. 18. Gerenciando modificações
  19. 19. Gerenciando modificações
  20. 20. Gerenciando modificações
  21. 21. Gerenciando modificações
  22. 22. Gerenciando modificações Escolha a versão 2, a última criada
  23. 23. Gerenciando modificações Click em atualizar
  24. 24. Gerenciando modificações Copie e cole novamente a url atual em um navegador
  25. 25. Em arquivos separados
  26. 26. Em arquivos separados
  27. 27. Em arquivos separados function doGet() { return HtmlService.createHtmlOutputFromFile('index'). setSandboxMode(HtmlService.SandboxMode.NATIVE); }
  28. 28. Em arquivos separados function doGet() { return HtmlService.createHtmlOutputFromFile('index'). setSandboxMode(HtmlService.SandboxMode.NATIVE); }
  29. 29. Em arquivos separados Acesse o projeto neste link https://script.google.com/d/16zsXAUUmQYCGyYIhDbMmr_CzrrAc9quNujMnFaGBPlJoh87K3eFRHbF/edit?usp=sharing function doGet() { return HtmlService.createHtmlOutputFromFile('index'). setSandboxMode(HtmlService.SandboxMode.NATIVE); }
  30. 30. 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); }
  31. 31. Em arquivos separados 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'). setSandboxMode(HtmlService.SandboxMode.NATIVE); }
  32. 32. Boas práticas Separar os arquivos, HTML, JavaScript e CSS.
  33. 33. 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)
  34. 34. Mostrando dados de uma planilha Crie um novo projeto em branco, depois copie e cole o código abaixo: 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; } O id da planilha anterior, alunos e notas.
  35. 35. Mostrando dados de uma planilha Como o aplicativo esta acessando uma planilha, é necessário autorizá-lo antes de publicar: Click em executar,
  36. 36. Mostrando dados de uma planilha Como o aplicativo esta acessando uma planilha, é necessário autorizá-lo antes de publicar: Depois em continuar
  37. 37. Mostrando dados de uma planilha Como o aplicativo esta acessando uma planilha, é necessário autorizá-lo antes de publicar: Depois em aceitar.
  38. 38. Mostrando dados de uma planilha Depois de implantado, podera ser acessado em um navegador como abaixo:
  39. 39. Mostrando dados de uma planilha 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>
  40. 40. 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.
  41. 41. Mostrando dados de uma planilha para uma página no google sites Crie uma cópia da planilha com as notas dos alunos:
  42. 42. 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.
  43. 43. 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.
  44. 44. 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
  45. 45. UI service Exemplo de interface:
  46. 46. 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(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; }
  47. 47. 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); }
  48. 48. Custom Menus e Sidebar
  49. 49. 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
  50. 50. Acessando serviços externos com autenticação Acesse https://dev.twitter.com/ e crie um novo aplicativo: https://script.google.com/macros
  51. 51. Acessando serviços externos com autenticação
  52. 52. Acessando serviços externos com 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());
  53. 53. Acessando serviços externos com autenticação (twitter) https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline
  54. 54. 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;
  55. 55. 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;
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×