programa-con-google: 'Hablando' con Google Calendar

Friday, February 29, 2008

La versión en inglés de Google Calendar tiene una funcionalidad (Quick Add) que permite añadir eventos describiéndolos tal y como lo haríamos a otra persona (ejem... anglosajona): "Lunch at new restaurant Friday at 1pm".

Bastante cool... pero no está disponible en castellano. Podríamos quejarnos, pero en la Web 2.0 (signifique lo que signifique el "2.0"...) sucede a menudo que en lugar de eso puedes hacer las cosas tú mismo. En este post incluímos un pequeño ejemplo de Quick Add que entiende (un poco de) castellano, como muestra de lo que cualquiera puede hacer con el API de Google Calendar

El API de Calendar esta basado en el protocolo GData para leer y escribir datos en formato XML a través de peticiones HTTP. Esto permite tratar los datos en una gran cantidad de lenguajes de programación. Para este ejemplo, usaremos la librería de Javascript, que ofrece algunas funciones útiles.

Podemos obtener los eventos en un calendario, modificarlos, borrarlos, o añadir eventos nuevos. Para un ejemplo de cómo obtener los eventos de un calendario, puedes ver el código de esta página, que obtiene los eventos de un calendario público. También podemos obtener los de un calendario privado, con la correspondiente autorización. De hecho este post usa prácticamente el mismo código para mostrarte los eventos de tu calendario.

Si haces click en 'Entrar' a continuación, deberás hacer login en tu cuenta de Google (si no lo has hecho aún) y permitir el acceso a tu calendario a esta página. Entonces se te mostrarán tus próximos eventos en el cuadro de abajo. Además, podrás crear nuevos eventos con el cuadro de texto que aparecerá.

Siendo sólo una muestra, tiene una funcionalidad bastante limitada, y sólo entiende eventos de la forma QUÉ [en DÓNDE] CUÁNDO. Ejemplos:

Puedes probar con frases similares en el cuadro de texto. (Sólo entiende eventos para hoy, y el formato de hora debe ser HH:MM con la hora de 0 a 23)

Y ahora lo siento pero debo irme. Al estar probando el código se me ha llenado el calendario de asuntos que tengo que atender...

Tomàs Lloretvar EVENT_FEED_URL = "http://www.google.com/calendar/feeds/default/private/full";var DEFAULT_PANE = "default-pane";var AUTHENTICATED_PANE = "authenticated-pane";var AUTH_BUTTON = "auth-button"; var LOGOUT_BUTTON = "logout-button"; var SAVE_BUTTON = "save-button";var myService;var myEventsFeed;/* Loads the Google data JavaScript client library */try {if(navigator.vendor.indexOf('Apple')==-1) google.load("gdata", "1");else var SAFARI = true;} catch(e) { google.load("gdata", "1");}/** * Sets the global calendar service to a new instance. Also resets the form * fields to clear out any information that may have been cached. */function init() { google.gdata.client.init(handleGDError); var token = google.accounts.user.checkLogin(EVENT_FEED_URL); myService = new google.gdata.calendar.CalendarService("Google-quickadd-sp"); var authButton = document.getElementById(AUTH_BUTTON); if (google.accounts.user.checkLogin(EVENT_FEED_URL)) { document.getElementById(DEFAULT_PANE).style.display = "none"; document.getElementById(AUTHENTICATED_PANE).style.display = "inline"; var saveButton = document.getElementById(SAVE_BUTTON); saveButton.disabled = false; loadCalendar(); } else { document.getElementById(DEFAULT_PANE).style.display = "inline"; document.getElementById(AUTHENTICATED_PANE).style.display = "none"; } };google.setOnLoadCallback(init);/** * Requests an AuthSub token for interaction with the Calendar service. */function login() { var token = google.accounts.user.login(EVENT_FEED_URL);};/** * Revokes the AuthSub token and resets the page. */function logout(){ google.accounts.user.logout(); init();};/** * Adds a leading zero to a single-digit number. Used for displaying dates. */function padNumber(num) { if (num <= 9) { return "0" + num; } return num;}/** * Determines the full calendarUrl based upon the calendarAddress * argument and calls loadCalendar with the calendarUrl value. * * @param {string} calendarAddress is the email-style address for the calendar */ function loadCalendarByAddress(calendarAddress) { var calendarUrl = 'http://www.google.com/calendar/feeds/' + calendarAddress + '/public/full'; loadCalendar(calendarUrl);}/** * Uses Google data JS client library to retrieve a calendar feed from the specified * URL. The feed is controlled by several query parameters and a callback * function is called to process the feed results. * * @param {string} calendarUrl is the URL for a public calendar feed */ function loadCalendar() { var service = new google.gdata.calendar.CalendarService('gdata-js-client-samples-simple'); var query = new google.gdata.calendar.CalendarEventQuery(EVENT_FEED_URL); query.setOrderBy('starttime'); query.setSortOrder('ascending'); query.setFutureEvents(true); query.setSingleEvents(true); query.setMaxResults(10); service.getEventsFeed(query, listEvents, handleGDError);}/** * Callback function for the Google data JS client library to call when an error * occurs during the retrieval of the feed. Details available depend partly * on the web browser, but this shows a few basic examples. In the case of * a privileged environment using ClientLogin authentication, there may also * be an e.type attribute in some cases. * * @param {Error} e is an instance of an Error */function handleGDError(e) { if (e instanceof Error) { /* alert with the error line number, file and message */ alert('Error at line ' + e.lineNumber + ' in ' + e.fileName + '\n' + 'Message: ' + e.message); /* if available, output HTTP error code and status text */ if (e.cause) { var status = e.cause.status; var statusText = e.cause.statusText; alert('Root cause: HTTP error ' + status + ' with status text of: ' + statusText); } } else { alert(e.toString()); }}/** * Callback function for the Google data JS client library to call with a feed * of events retrieved. * * Creates an unordered list of events in a human-readable form. This list of * events is added into a div called 'events'. The title for the calendar is * placed in a div called 'calendarTitle' * * @param {json} feedRoot is the root of the feed, containing all entries */ function listEvents(feedRoot) { var entries = feedRoot.feed.getEntries(); var eventDiv = document.getElementById('events'); if (eventDiv.childNodes.length > 0) { eventDiv.removeChild(eventDiv.childNodes[0]); } /* create a new unordered list */ var ul = document.createElement('ul'); /* set the calendarTitle div with the name of the calendar */ document.getElementById('calendarTitle').innerHTML = "Calendar: " + feedRoot.feed.title.$t; /* loop through each event in the feed */ var len = entries.length; for (var i = 0; i < len; i++) { var entry = entries[i]; var title = entry.getTitle().getText(); var startDateTime = null; var startJSDate = null; var times = entry.getTimes(); if (times.length > 0) { startDateTime = times[0].getStartTime(); startJSDate = startDateTime.getDate(); } var entryLinkHref = null; if (entry.getHtmlLink() != null) { entryLinkHref = entry.getHtmlLink().getHref(); } var dateString = (startJSDate.getMonth() + 1) + "/" + startJSDate.getDate(); if (!startDateTime.isDateOnly()) { dateString += " " + startJSDate.getHours() + ":" + padNumber(startJSDate.getMinutes()); } var li = document.createElement('li'); /* if we have a link to the event, create an 'a' element */ if (entryLinkHref != null) { entryLink = document.createElement('a'); entryLink.setAttribute('href', entryLinkHref); entryLink.appendChild(document.createTextNode(title)); li.appendChild(entryLink); li.appendChild(document.createTextNode(' - ' + dateString)); } else { li.appendChild(document.createTextNode(title + ' - ' + dateString)); } /* append the list item onto the unordered list */ ul.appendChild(li); } eventDiv.appendChild(ul);}function reset() { var saveButton = document.getElementById(SAVE_BUTTON); saveButton.disabled = true;};function saveEvent(s) { if (!google.accounts.user.checkLogin(EVENT_FEED_URL)) { alert('Primero debes hacer click en "Entrar"'); return; } var event = new google.gdata.calendar.CalendarEventEntry(); var w = s.split(' '); today = new Date(); date = new Date(today.getFullYear() + '/' + formatNumber(today.getMonth()+1) + '/' + today.getDate() + ' ' + w[w.length - 1]); event_title = w[0]; var end = w.length-1; for(;end>=0;--end) { if(w[end]=='a') break; } var loc = end; for(i = end - 1; i>=0;--i) { if(w[i]=='en') {loc=i;break;} } for(i=1;i < loc;++i) event_title += ' ' + w[i]; if(loc!=end) { dnd = w[loc+1]; for(i=loc+2;i < end;++i) dnd+=' ' +w[i]; } else dnd=""; var times = new google.gdata.When(); times.setStartTime(date); times.setEndTime(new Date(date.getTime() + 3600*1000)); event.addTime(times); event.setTitle(google.gdata.Text.create(event_title)); var where = new google.gdata.Where(); where.setValueString(dnd); event.addLocation(where); myService.insertEntry(EVENT_FEED_URL, event, loadCalendar, handleGDError);}/** * Utility function to format numbers so that * single digits have a 0 in front. */function formatNumber(num) { num=''+num+''; if (num.length == 1) { return '0' + num; } return num;}google.setOnLoadCallback(init);La versión en inglés de Google Calendar tiene una funcionalidad (Quick Add) que permite añadir eventos describiéndolos tal y como lo haríamos a otra persona (ejem... anglosajona): "Lunch at new restaurant Friday at 1pm".Bastante cool... pero no está disponible en castellano. Podríamos quejarnos, pero en la Web 2.0 (signifique lo que signifique el "2.0"...) sucede a menudo que en lugar de eso puedes hacer las cosas tú mismo. En este post incluímos un pequeño ejemplo de Quick Add que entiende (un poco de) castellano, como muestra de lo que cualquiera puede hacer con el API de Google CalendarEl API de Calendar esta basado en el protocolo GData para leer y escribir datos en formato XML a través de peticiones HTTP. Esto permite tratar los datos en una gran cantidad de lenguajes de programación. Para este ejemplo, usaremos la librería de Javascript, que ofrece algunas funciones útiles.Podemos obtener los eventos en un calendario, modificarlos, borrarlos, o añadir eventos nuevos. Para un ejemplo de cómo obtener los eventos de un calendario, puedes ver el código de esta página, que obtiene los eventos de un calendario público. También podemos obtener los de un calendario privado, con la correspondiente autorización. De hecho este post usa prácticamente el mismo código para mostrarte los eventos de tu calendario.Si haces click en 'Entrar' a continuación, deberás hacer login en tu cuenta de Google (si no lo has hecho aún) y permitir el acceso a tu calendario a esta página. Entonces se te mostrarán tus próximos eventos en el cuadro de abajo. Además, podrás crear nuevos eventos con el cuadro de texto que aparecerá.Siendo sólo una muestra, tiene una funcionalidad bastante limitada, y sólo entiende eventos de la forma QUÉ [en DÓNDE] CUÁNDO. Ejemplos:

Comida en el restaurante nuevo a las 13:00

Reunión del grupo a las 18:30

Sesión nocturna en el gimnasio a las 23:15

Puedes probar con frases similares en el cuadro de texto. (Sólo entiende eventos para hoy, y el formato de hora debe ser HH:MM con la hora de 0 a 23)if(SAFARI) {document.write("<p style='color: red;'>[ Parece que este ejemplo no funciona en tu navegador. ]</p>");}

Estos son buenos puntos de partida para empezar a programar con el API de Google Calendar: Google Calendar API: Home, Documentation, Samples, Developer's guide: Javascript, Javascript client library API reference.Y ahora lo siento pero debo irme. Al estar probando el código se me ha llenado el calendario de asuntos que tengo que atender...

Programa con Google

'Hablando' con Google Calendar

2 comments :

Labels

Archive

Feed

Company-wide

Products

Developers