Come creare un sito web con Google Drive – Parte 2

Di - 30 August 2013 - in
Post image for Come creare un sito web con Google Drive – Parte 2

Nel precedente articolo abbiamo cominciato a vedere la struttura delle cartelle che compongono il sito, la struttura della pagina e gli stili CSS applicati; vediamo ora il codice Javascript che è il vero cuore dell’applicazione.

Codice Javascript – tutto lato client

È qui che si svolge il lavoro sporco e pesante, anche se il codice Javascript non è particolarmente complesso grazie all’utilizzo di JQuery e della Google Client API per Javascript. Ma prima di vedere il codice, capiamo cosa deve fare:

  1. Caricare i Javascript in maniera dinamica per permettere una più veloce visualizzazione della pagina
  2. Ottenere l’autorizzazione a leggere i metadati (solo “Titolo” del documento e identificativo univoco)
  3. Leggere la lista dei possibili documenti pubblicati
  4. Capire quali documenti sono realmente pubblicati
  5. Aggiornare la lista degli articoli
  6. Generare il codice per visualizzare gli articoli all’interno della pagina

Caricamento Dinamico dei Javascript

Il file Javascript base.js si occupa principalmente di:

1. caricamento dinamico dello script di accesso a Google Drive

var resource = document.createElement('script');
var script = document.getElementsByTagName('script')[0];
//Drive Helper script Loading
resource.src = "scripts/driveHelper.js";
script.parentNode.insertBefore(resource, script);

2. registrazione eventi sui menù dei blog post

$('#blogHead_it').click(function() {
$('#blogPostList_it').fadeToggle("slow", "linear");
});
$('#blogHead_en').click(function() {
$('#blogPostList_en').fadeToggle("slow", "linear");
});

3. Funzioni di visualizzazione dei post

function ShowPost(fileId, blogTitle) {
var headerContent = '<span>' + HTMLEncode(blogTitle) + '</span>';
$('.header').html(headerContent);

var aboutFrame = '<iframe src="https://docs.google.com/document/d/' + fileId + '/pub?embedded=true" style="border:none;width:120%;height:100%" id="currentEmbed"></iframe>';

$('.content').html(aboutFrame);

resizePost();

}

Sono presenti anche altre funzioni di utilità quali:

  • resizePost() (adatta l’altezza del post in modo che sia sempre visibile il footer)
  • ShowAbout()( visualizza il documento di “about”)
  • addResponsive() (aggiunge la funzione di click sul bottone visualizzato al posto del menú quando le dimensioni della pagina sono inferiori a quanto specificato nel CSS)

Autorizzazione alla Google Drive SDK

Se vogliamo fare un sito che acceda ai dati della Google Drive SDK dobbiamo registrarlo come applicazione all’interno della Google API Console (maggiori informazionie nella video guida), e ogni utente che utilizza il nostro sito dovrà autorizzare l’applicazione.

Ma il sito è pubblico, i miei documenti sono pubblici, ho pubblicato il documento… che autorizzazioni devo chiedere all’utente? Non accedo ai suoi dati!

Tutto verissimo, ma per come funziona il Google API Client JS, quello che realmente succede è che l’utente chiede informazioni relative ai nostri file pubblici presenti nella sua cartella “File Condivisi con me”.

Sembra un ragionamento un po’ contorto, e in questi casi in cui vorremmo “simulare” che tutte le richieste avvengano dal nostro account, l’ideale sarebbe utilizzare un servizio che ci faccia da intermediario (proxy), magari con Google AppsScript.

Sfortunatamente con Google AppScript non è al momento, possibile accedere alle revisioni/versioni dei file e quindi non riusciamo a sapere quale file è pubblicato… forse in un futuro non troppo remoto…

La parte di autenticazione é molto simile quella del javascript quick start di Google Drive, ad eccezione del caricamento dinamico della Google API Client Library, quindi vi rimando alla documentazione ufficiale per maggiori informazioni.

Lista dei documenti

La funzione retrieveBlogPosts (o meglio retrieveBlogPostsIT per i post in Italiano e retrieveBlogPostsEN per quelli in inglese) si occupa di ottenere tutti i file presenti nella cartella con il seguente codice:

var initialRequest = gapi.client.drive.children.list({
'folderId': BLOG_FOLDER_ID_IT
});
retrievePageOfFiles(initialRequest, []);

La funzione retrievePageOfFiles si occupa di eseguire la chiamata asincorna alla API e creare una funzione di callback per gestire il completamento della richiesta, e la successiva operazione sulla lista di file risultanti

var retrievePageOfFiles = function(request, result) {
    request.execute(function(resp) {

        if (resp.items) {
        //For every file check if they are published
        for (var i = 0; i < resp.items.length; i++) {

            checkRevision(resp.items[i], 'IT');

        }
        var nextPageToken = resp.nextPageToken;
        if (nextPageToken) {
            request = gapi.client.drive.children.list({
                'folderId': BLOG_FOLDER_ID_IT,
                'pageToken': nextPageToken
            });
            retrievePageOfFiles(request, result);
        } else {
           //Nothing to do... I have to wait for the revisions check
        }
    }
});
};

In caso si abbiano molti risultati (nell’ordine delle centinaia di file presenti in cartella) può valere la pena gestire la paginazione dei risultati in modo da eseguire più chiamate, ma aggiornare in maniera più repentina la pagina visualizzata dall’utente senza lasciarlo attendere decine di secondi (consumando batteria se da mobile).

Verifica dell’effettiva pubblicazione di un documento

Per quanto logicamente possiamo pubblicare un documento, realmente non pubblichiamo il documento in sè, ma una specifica versione; ne consegue che, quando richiediamo i metadati di un file, è corretto che non sia presente l’informazione di “file pubblicato”.

La funzione checkRevision si occupa di verificare se l’ultima versione/revisione del file é pubblicata

function checkRevision(childItem, language) {
    var requestRevision = gapi.client.drive.revisions.list({
            'fileId': childItem.id,
            'fields': 'items(published)'
        });

    var fileId = childItem.id;
    requestRevision.execute(function(revisions) {

        //Check if the latest revision is published
        if (revisions && !revisions.error) {
            if (revisions.items[revisions.items.length - 1].published) {
                addBlogPostToMenu(fileId, language);
            }
        }
    });
}

Nel caso in cui il file sia pubblicato viene chiamata la funzione addBlogPostToMenu che richiede il titolo del documento ed infine lo aggiunge alla corretta voce del menu:

function addBlogPostToMenu(fileId, language) {

    var reqFields = 'id,modifiedDate,titlé;
    var request = gapi.client.drive.files.get({
                      'fileId': fileId,
                      'fields': reqFields
        });
    request.execute(function(resp) {
        blogItem = resp;
        var blogPostDiv;
        if (language == 'EN') {
            fileListEN = fileListEN.concat(blogItem);
            blogPostDiv = $('#blogPostItems_en');
            $('#blogHead_en').html('Articles - EN - ' + fileListEN.length);
        } else {
            fileListIT = fileListIT.concat(blogItem);
            blogPostDiv = $('#blogPostItems_it');
            $('#blogHead_it').html('Articoli - IT - ' + fileListIT.length);
        }
        var blogPostMenuHTML = "<li><a href='javascript:ShowPost(" + '"' + blogItem.id + '","' + HTMLEncode(blogItem.title) + '"' + ");'>" + HTMLEncode(blogItem.title) + "</a></li>";

        //blogPostDiv.prepend(blogPostMenuHTML);
        blogPostDiv.append(blogPostMenuHTML);

    });
}

Ogni nuovo elemento del menù chiamerà la funzione ShowPost descritta sopra che si occuperà di rimuovere l’eventuale articolo visualizzato ed inserire il codice di embed del documento richiesto.

Conclusioni

Questa non è sicuramente una delle soluzioni più semplici per effettuare blogging, ma mostra molto bene quanto Google Drive non sia semplicemente un deposito di file online, ma decisamente di più.

La cartella di Google Drive contenente tutto il codice e gli articoli è pubblica, potete quindi vedere i file che compongono il sito e future modifiche che verranno apportate, oppure potete accedere alla versione live e leggere gli attuali articoli presenti.

Leave a Reply

Articolo scritto da

Techy, sviluppatore .Net per professione, sviluppatore Android per passione.
All Around Android Lover e Google Enthusiast

Contatta l'autore

Previous post:

Next post: