Javascript, HTML, CSS e... !
0 commenti

Creazione programmatica di una presentazione in Google Slides

Creare un Report in Google Slides generato automaticamente con Google Apps Script

Recentemente mi sono cimentato in uno strumento della G Suite a mio avviso ancora poco sfruttato rispetto alle potenzialità che offre, ovvero, Google Slide, un tool per creare presentazioni che si avvicina molto al conosciutissimo Power Point.
Lo strumento si adatta bene per la realizzazione di report da condividere con i clienti tuttavia, nonostante la possibilità di prendere visione del report e collaborare online, un uso dello strumento alla pari di un Power Point non basta a giustificarne la sua sostituzione.

Per dare un valore aggiunto è necessario andare a colmare uno degli aspetti critici dei report, ovvero l'aggiornamento dei dati spesso effettuato manualmente.
Ecco quindi che ci viene incontro Google Apps Script che, tramite i Slides Service (insieme agli Extending Google Slides) e le relative Slides API, permette di realizzare e modificare in modo programmatico (da codice), una presentazione in Google Slides recuperando i dati dalle fonti opportune (ad esempio uno Spreadsheet così come da altri servizi quali Google Analytics o ancora da sorgenti terze come può essere un database).

Ho realizzato a tal scopo una presentazione esemplificativa, di poche slide, dove tramite Google Apps Script vengono utilizzati diversi metodi ed API.

Di seguito una lista non esaustiva di quello che viene effettuato dal codice di esempio che riporto poco sotto:

- Creazione di una presentazione, aggiunta di nuove slide e gestione di elementi (testo, colore di fondo, ...);
- Inserimento, ridimensionamento e posizionamento di elementi (testi, immagini, link, ...) all'interno delle slide;
- Elaborazione dei testi e relative modifiche agli stili (dimensione dei caratteri, grassetto, colore, ...);
- Importazione di grafici da Spreadsheet all'interno delle slide e relativa elaborazione.

Alcuni screenshot rappresentativi:

Slide contenente immagini recuperate tramite URL, con valori inseriti da array (allo stesso modo potrebbero essere recuperati da uno Spreadsheet o da altri servizi), Fig. 1:



Presentazione in Google Slide creata con Google Apps Script

Fi. 1 - Presentazione in Google Slide creata con Google Apps Script, slide di esempio


Grafico creato all'interno di uno Spreadsheet, Fig. 2:



Grafico creato in uno Spreadsheet

Fig. 2 - Grafico creato in uno Spreadsheet


Slide nella quale è stato importato il grafico creato nello Spreadsheet, Fig. 3:



Grafico importato da uno Spreadsheet in una slide di Google Slides con Apps Script

Grafico importato da uno Spreadsheet in una slide di Google Slides con Apps Script


Chi volesse prendere visione della presentazione in Google Slides realizzata con Google Apps Script descritta nel seguente tutorial può farlo tramite il seguente link: https://docs.google.com/presentation/d/1MyUOpS2ogYFN4pgKXnXuZIOmLYlmTCnrNPuJcE0MeFg/edit?usp=sharing

L'intero codice per l'ottenimento del risultato:

var scriptProperties = PropertiesService.getScriptProperties();

var ss_id = '1V8f9tFDPyGZ9v0EfI-F9ZVOovZzGrMvgOdoz9xbHEvI';

var images = [
  "http://media.bigbossweb.com/...path.../gas_slides_sessions1.png",
  "http://media.bigbossweb.com/..path.../gas_slides_timer1.png",
  "http://media.bigbossweb.com/..path.../gas_slides_bounce1.png",
  "http://media.bigbossweb.com/..path.../michele_pisani_apps_script_italia.jpg"
];

var data_overview = ['2.830', '00:02:20', '26,46%'];

function addImageSlide(slide_sel, image_url, page_width_pos, page_heigth_pos, scale_xy) {
  var image = slide_sel.insertImage(image_url);
  image.scaleWidth(scale_xy).scaleHeight(scale_xy);
  var imgWidth = image.getWidth();
  var imgHeight = image.getHeight();
  var newX = page_width_pos/2. - imgWidth/2.;
  var newY = page_heigth_pos/2. - imgHeight/2.;
  image.setLeft(newX).setTop(newY);
}

function appendTextInTop(deck) {
  var slides = deck.getSlides();
  slides.forEach(function(slide) {
    
    var shape_top = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, deck.getPageWidth() - 450, 10, 450, 20); // left; top; width; height
    var textRange_top = shape_top.getText();
    textRange_top.setText('Disclaimer: I dati contenuti in questo report...')
    .getTextStyle()
    .setBold(true)
    .setItalic(true)
    .setFontSize(8)
    .setForegroundColor('#BBBBBB');
  });
}

function appendTextInBottomLeft(deck) {
  var slides = deck.getSlides();
  slides.forEach(function(slide) {

    var shape_bottom_left = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, 40, deck.getPageHeight() - 40, 280, 20);
    shape_bottom_left.getText().setText('Periodo di riferimento: ').getTextStyle().setFontSize(10);
    shape_bottom_left.getText().appendText('mese precedente').getTextStyle().setBold(true);
  });
}

function appendTextInBottomRight(deck) {
  var slides = deck.getSlides();
  slides.forEach(function(slide) {

    var shape_bottom_right = slide.insertShape(SlidesApp.ShapeType.TEXT_BOX, deck.getPageWidth() - 280, deck.getPageHeight() - 40, 280, 20);
    shape_bottom_right.getText().setText('Realizzato da ').getTextStyle().setFontSize(10);
    shape_bottom_right.getText().appendText('Michele Pisani, ').getTextStyle().setBold(true);
    shape_bottom_right.getText().appendText('www.appsscript.it')
    .getTextStyle()
    .setBold(false)
    .setLinkUrl('www.appsscript.it')
    .setForegroundColor('#4b95d4');
  });
}

function importChartFromSheet(slide_id, ss_id, ss_chart_id, deck_id) {
  var emu4M = {
    magnitude: 4000000,
    unit: 'EMU'
  };
  var presentationChartId = 'grafico_importato';
  var requests = [{
    createSheetsChart: {
      objectId: presentationChartId,
      spreadsheetId: ss_id,
      chartId: ss_chart_id,
      linkingMode: 'LINKED',
      elementProperties: {
        pageObjectId: slide_id.getObjectId(),
        size: {
          height: emu4M,
          width: emu4M
        },
        transform: {
          scaleX: 1,
          scaleY: 1,
          translateX: 100000,
          translateY: 100000,
          unit: 'EMU'
        }
      }
    }
  }];
  
  var batchUpdateResponse = Slides.Presentations.batchUpdate({
    requests: requests
  }, deck_id); 
}

function main() {
  
  var deck_name = "AppsScript.it";
  var deck = SlidesApp.create(deck_name); // SlidesApp.getActivePresentation();
  var deck_id = deck.getId();
  scriptProperties.setProperty('deck_id', deck_id);
  
  var pageWidth = deck.getPageWidth();
  var pageHeight = deck.getPageHeight();   
  
  // SLIDE 1 (creata di default)
  deck.getSlides()[0].getBackground().setSolidFill('#4b95d4', 0.3);
  var [title, subtitle] = deck.getSlides()[0].getPageElements();
  title.asShape().getText().setText(deck_name);
  subtitle.asShape().getText().setText("Report in Google Slides generato automaticamente...");
  
  // SLIDE 2
  var slide_two = deck.appendSlide(SlidesApp.PredefinedLayout.TITLE_AND_TWO_COLUMNS);
  var [title, left, right] = deck.getSlides()[1].getPageElements();
  title.asShape().getText().setText("Google Analytics: panoramica metriche principali");
  left.asShape().getText().setText("Sessioni").getTextStyle().setForegroundColor('#000000');
  right.asShape().getText().setText("Frequenza di rimbalzo").getTextStyle().setForegroundColor('#000000');

  // ...

  // Trovate il codice integrale e scaricabile nel mio libro "Punta in alto con... Google Apps Script"
  // Disponibile su AMAZON: https://www.amazon.it/Punta-alto-Google-Apps-Script/dp/1794059393/

Il codice completo e molte altre informazioni su come creare un report automatico con grafico in Google Slides con Google Apps Script continuano nel mio libro "Punta in alto con... Google Apps Script" (gli script sono scaricabili, funzionanti e liberamente utilizzabili nelle proprie applicazioni):



punta in alto con google apps script - creare un report automatico in google slides

Fig. A - Il libro in italiano - Punta in alto con... Google Apps Script - pag 300 e 301


Troverai altre informazioni a riguardo come:

- l'esempio completo e dovutamente commentato;
- l'abilitazione dei servizi avanzati;
- l'uso delle API per la corretta generazione ed importazione del grafico in Google Slides;
- come collegare Google Sheets e Google Slides e farli dialogare;
- errori tipici che possono presentarsi in questa situazione e la relativa soluzione;
operazioni di rifinitura come il posizionamento del grafico ed il suo ridimensionamento nella slide;
- e tutta una serie di accorgimenti utili.

...E QUESTO È SOLO QUANTO RIFERITO ALLA CREAZIONE DI UN REPORT AUTOMATIZZATO IN GOOGLE SLIDES CON GOOGLE APPS SCRIPT!

ACQUISTA ORA IL LIBRO SU AMAZON:

punta in alto con google apps script libro italiano

Se sei pronto a diventare un esperto nella programmazione in Google Apps Script non posso fare altro che augurarti una buona lettura e soprattutto... Buon divertimento!

Tags

Michele Pisani

Michele Pisani

Sviluppatore Javascript ed esperto in Digital Analytics

L'esperienza nel settore Digital Analytics unita ad anni di sviluppo in Javascript ha trovato la massima espressione in Google Apps Script che mi ha permesso, con estrema facilità e poche righe di codice, di realizzare potenti applicazioni interattive e processi automatizzati integrati con i prodotti della G Suite.

Come contattarmi
scrivi un commento

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

scrivi un commento

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato.I campi contrassegnati da un * sono obbligatori
Puoi utilizzare i seguenti tag nei commenti:
[bold]testo[/bold] se vuoi evidenziare un testo con il grassetto[code]function helloworld() { }[/code] se vuoi pubblicare una porzione di codice[url]http://www.appsscript.it[/url] se devi riferirti ad un indirizzo web