Google apps script - Parte 2

2.811 visualizações

Publicada em

3 comentários
6 gostaram
Estatísticas
Notas
  • @undefined Obrigado, Sergio.Bom, tentarei resolver o problema desta maneira.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • 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.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • 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.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
Sem downloads
Visualizações
Visualizações totais
2.811
No SlideShare
0
A partir de incorporações
0
Número de incorporações
67
Ações
Compartilhamentos
0
Downloads
81
Comentários
3
Gostaram
6
Incorporações 0
Nenhuma incorporação

Nenhuma nota no 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;

×