• Author / Uploaded
• josealmena

Citation preview

2014

José Julián Ariza Valderrama +10y Aplications Developer Madrid - Spain [email protected] http://jjdrone.blogspot.com.es

@JJArizaV @impactotecno https://www.youtube.com/user/jjdroneariza

I'm a Senior software developer with 10-years background in the technology industry. My strong experience is working with java in different levels like front-end, back-end, mobile (Android), social network interaction and database connections. I like to work with high-end technology this the why I was working with NoSQL dbs, raspberry pi devices and other nice technologies... like drones! I can fly it!

https://www.youtube.com/watch?v=15zSL5infoc





Google Apps es un paquete de productividad basado en la nube Aplicaciones ◦ ◦ ◦ ◦ ◦

Gmail Calendario Drive Gtalk Sites

 



 

Google Apps Script te permite extender la experiencia de uso de Google Apps Lenguaje de scripting basado en la nube que ofrece maneras fáciles de automatizar las tareas a través de productos de Google y servicios de terceros Liberado desde 2009 Basado en JavaScript, sintaxis muy similar y fácil de aprender Google Apps Script utiliza el Google Web Toolkit (GWT) para crear y mostrar los elementos de la interfaz de usuario. Google Web Toolkit es fácil de aprender, y completamente abstrae la complejidad de AJAX / HTML.

● Una manera fácil de automatizar tareas en los productos de Google ● Javascript pero no en el navegador ● Editor en browser, almacenadas y compartidas ● Runtime de Javascript en la nube ● Conjunto de APIs y puntos de entrada a múltiples productos de google.







Es compatible con 11 Google Apps como inicio, pero además ofrece comunicarnos con servicios avanzados como Analytics, BigQuery, Youtube, Prediction API, AdSense u otros servicios externos ajenos a Google como JDBC, SOAP, XML y URL Fecth. Basado en la nube, tenemos las herramientas de desarrollo como el debbuguer en el propio navegador web, todo de manera online. Puede ser utilizado para crear herramientas sencillas para el consumo interno de una organización, realizar tareas simples de administración del sistema, así como tareas mas complejas, pero de forma muy sencilla



Dashboard



https://script.google.com/dashboard

 

   

Automatizar tareas repetitivas y flujos de trabajo Automatizar aprobaciones de gastos, gestión de la compra de entradas de pedidos Enlace productos de Google con los servicios de terceros Crear funciones personalizadas de hoja de cálculo Construir ricas interfaces gráficas de usuario y los menús “Casi todo", es de uso libre y gratuito

  

Tener una cuenta google Acceso a internet Usar un navegador que soporte Javascript, de preferencia Google Chrome



Google desarrolló este navegador teniendo por objetivos ser seguro, rápido, sencillo y estable. Google Chrome se diferencia de sus competidores por su interfaz de usuario sencilla, minimalista. En cuanto a velocidad Google Chrome goza de la fama de ser el más rápido procesando código de JavaScript, que es frecuentemente usado en páginas web.



El inspector de elementos es una herramienta genial para resolver problemas de diseño. Hay varios exploradores que la tienen, este tutorial utilizará el inspector de elementos de Google Chrome. Para usar el inspector de elementos hay 2 formas: ◦ F12 ◦ O hacer click segundario encima de cualquier elemento de una pagina web





El inspector de elementos se abrirá por defecto abajo de la pantalla. En el lado izquierdo está el HTML de la página. Si pasan el cursor por el HTML se va a destacar en la página web visualizada en el navegador el elemento que corresponde. Esto sirve para que puedan reconocer cual elemento van a editar. El inspector de elementos sirve para muchísimas cosas ◦ ◦ ◦ ◦

Descubrir errores Reutilizar atributos CSS Modificar la apariencia de elementos Reutilizar selectores CSS





Los cambios que se hacen en el Inspector de Elementos no se guardan, por lo que al recargar la pagina, toda la apariencia volverá a como estaba Imaginemos un problema: ◦ hay un problema en mi código css: tiene una imagen de fondo que no se está cargando.



Para solucionar este problema abrimos el Inspector de Elementos, apretando F12 o haciendo click con el botón secundario. Cuando se abra el Inspector de Elementos vamos a seleccionar la consola (Console).



En la consola podemos ver que el error es que el archivo no está encontrado. Entonces hay que revisar la ruta del archivo



Ejemplo práctico: ◦ Vamos a cambiar el logo de Google en www.google.es al logo de nuestra empresa







JavaScript dispone de fuertes capacidades de programación orientada a objetos La programación orientada a objetos es un paradigma de programación que utiliza la abstracción para crear modelos basados ​en el mundo real La programación orientada a objetos puede considerarse como el diseño de software a través de una conjunto de objetos que cooperan, a diferencia de un punto de vista tradicional en el que un programa puede considerarse como un conjunto de funciones, o simplemente como una lista de instrucciones







En la programación orientada a objetos, cada objeto es capaz de recibir mensajes, procesar datos y enviar mensajes a otros objetos Cada objeto puede verse como una pequeña máquina independiente con un papel o responsabilidad definida El código orientado al objetos está concebido para ser más fácil de desarrollar y más fácil de entender posteriormente, prestándose a un análisis más directo, a una mayor codificación y comprensión de situaciones y procedimientos complejos que otros métodos de programación menos modulares



Terminología ◦ ◦ ◦ ◦ ◦ ◦ ◦

Clase: Define las características del Objeto Objeto: Una instancia de una Clase Constructor: Un método llamado en el momento de la instanciación Propiedad: Una característica del Objeto, como el color Método o función: Una capacidad del Objeto, como caminar Herencia: Una Clase puede heredar características de otra Clase Encapsulamiento: Una Clase sólo define las características del Objeto, un Método sólo define cómo se ejecuta el Método



Funciones



Una función con nombre es aquella a la que se hace referencia en el script antes o después de definirla, mientras que una función anónima es una función sin nombre que hace referencia a ella misma; se hace referencia a la función anónima al crearla. Las funciones anónimas se utilizan habitualmente al manipular controladores de eventos. Para escribir una función anónima, puede almacenarse un literal de función dentro de una variable. Por consiguiente, posteriormente podrá hacer referencia a la función en el código.





Funciones anonimas





var myWidth = function () { trace(my_mc._width); }; //posteriormente en el código:



myWidth();

 



Estándares de codificación



Sangría La unidad de sangría es de cuatro espacios. El uso de pestañas debe ser evitada porque todavía no hay un estándar para el tamaño de los tabuladores. El uso de espacios puede producir un tamaño de archivo más grande, pero el tamaño no es significativo sobre las redes locales, y la diferencia se elimina por minificación.





Estándares de codificación



Longitud de la línea Evite líneas de más de 80 caracteres. Cuando una instrucción no cabe en una sola línea, puede ser necesario para separarla. Coloque el espacio en blanco después de un operador, idealmente después de una coma. Un espacio en blanco después de un operador disminuye la probabilidad de que un error al reutilizar el script.







Estándares de codificación



Comentarios Sea generoso con sus comentarios. Es conveniente dejar la información que será leída posteriormente por personas (posiblemente usted) que se necesitan para comprender lo que ha hecho. Los comentarios deben estar bien escritos y ser claros, al igual que el código que están anotando. Una punto de humor ocasional puede ser apreciado. Las frustraciones y resentimientos no. Es importante que los comentarios se mantegan al día. Comentarios erróneos pueden hacer que los programas aún más difícil de leer y entender. Haga comentarios significativos. Concéntrese en lo que no es inmediatamente visible.









Estándares de codificación



Declaraciones de variables Todas las variables deben ser declaradas antes de utilizar. JavaScript no requiere esto, pero esto hace que el programa sea más fácil de leer y hace que sea más fácil detectar las variables no declaradas que pueden convertirse en variables globales implícitas. Se prefiere que cada variable se le dará su propia línea y comentario. Ellos deben ser listadas en orden alfabético.







Estándares de codificación



Declaraciones de función Todas las funciones deben ser declaradas antes de ser utilizado. Funciones internas deben seguir la declaración var. Esto ayuda a aclarar qué variables se incluyen en su ámbito de aplicación. No debe haber ningún espacio entre el nombre de una función y el paréntesis izquierdo de su lista de parámetros. Debe haber un espacio entre el paréntesis derecho y la llave izquierda que empieza de que el cuerpo de la instrucción. El propio cuerpo debe separarse con cuatro espacios. La llave de cierre está alineada con la línea que contiene el principio de la declaración de la función.





Estándares de codificación  





Nombres Los nombres deben formarse a partir mayúsculas y minúsculas (A .. Z, a .. z), los 10 dígitos (0 .. 9) y _ (guión bajo). Evite el uso de caracteres internacionales, ya que no pueden leer bien o entender en todas partes. No utilice $ (signo de dólar) o \ (barra invertida) en los nombres. No utilice _ (subrayado) como el primer carácter de un nombre. A veces se usa para indicar la privacidad, pero en realidad no ofrecen privacidad.. La mayoría de las variables y funciones deben empezar con una letra minúscula, se recomienda usar camelCase





JavaScript tiene varios objetos incluidos en su núcleo, como Math, Object, Array y String Ejemplo 1:

Hola mundo JS





Clase con propiedad y constructor

function Person(gender) { this.gender = gender; alert('Person instantiated'); } var person1 = new Person('Hombre'); var person2 = new Person('Mujer'); alert ('person1 is a' + person1.gender);



Acrónimo de JavaScript Object Notation, es un formato ligero para el intercambio de datos

{ "menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } } }



JSON Object a partir de String:

var the_object = eval("(" + myJson + ")"); alert (the_object.menu.id);

  

          

 





Tutorial JSON (JavaScript Object Notation)









El interés de los scripts JavaScript reside en gestionar localmente los eventos detectados. Los eventos son el resultado de una acción del usuario. Por ejemplo, hacer clic sobre un botón o seleccionar un campo de un formulario son eventos. La importancia de los eventos radica en que nos posibilita modificar el contenido de un documento HTML sin intercambio de datos a través de la red





La gestión de eventos se efectúa mediante scripts ejecutados automáticamente cuando se produce un evento dado. Tiene 3 elementos principales ◦ Listener ◦ Handlers ◦ Callbacks



MailApp: ◦ https://developers.google.com/apps-script/reference/mail/mailapp ◦ Los mails se envían a nombre de quien hizo el script ◦ Hay un límite diario de envíos de mails impuesto por Google ◦ Métodos:     

getRemainingDailyQuota() sendEmail(message) sendEmail(recipient, subject, body) sendEmail(recipient, subject, body, options) sendEmail(to, replyTo, subject, body)

 



UiApp Crea interfaces de usuario para su uso dentro de Google Apps o como servicios independientes. Métodos  createApplication()  getActiveApplication()  getUserAgent()



Widgets: componentes de una interfaz de usuario: ◦ ◦ ◦ ◦ ◦ ◦ ◦

 

Textbox Label Buttons Check box Radio buttons Text Area …

Panels: Permiten organizar los widgets en una ventana Logger nos permite añadir losgs a nuestros scripts ◦ Logger.log('A test of the Log');

Cuadro de dialogo simple

Texto

Button







Para generar nuestro primer Script nos dirigimos a Google Drive, de ahí elegimos la opción de Script (Si no aparece, ve a la parte de abajo que dice Connect more Apps y busca Script) De inmediato, se mostrará una pantalla con algunas opciones para crear un Script, unos siendo plantillas, otros tutoriales, en todos los ejemplos nosotros crearemos un proyecto desde cero En la vista general del editor, tendremos las opciones suficientes para trabajar con nuestros scripts, como debugger y autocompletado (Los métodos estan descritos en la documentación oficial: developers.google.com/appsscript/reference/spreadsheet/)



El siguiente código, nos permite crear un documento que se llame “Hola mundo de AppScript” con un cuerpo de mensaje “Este Documento fue creado a partir de AppScript”, además que la URL del documento la mandamos a un correo electrónico, en este ejemplo en particular lo manda al email del usuario que edita el Script

function createAndSendDocument() { //Crear un nuevo Documento de Nombre Hola Mundo de AppScript var doc = DocumentApp.create('Hola Mundo de AppScript'); //Obtenemos el Body del Documento y agregamos un Parrafo doc.getBody().appendParagraph('Este Documento fue creado a Partir de AppScript'); //URL del Documento Generado var url = doc.getUrl(); //Obtenemos nuestro Correo Electronico var email = Session.getActiveUser().getEmail(); //El asunto es el nombre del Documento var subject = doc.getName(); //El cuerpo del correo max 20kb indica la URL de nuestro documento var body = 'Link con tu Documento: ' + url; //Enviamos el correo (: GmailApp.sendEmail(email, subject, body); }



Para correr el script nos dirigimos a la barra superior del editor. El botón en forma de Play será el encargado de correr el script, seguido también tenemos la opción de correr en modo Debugger (los breakpoints se agregan dando click en donde aparece el número de línea) y el selector de la parte derecha, que en este caso solo contiene “createAndSendDocument”, servirá para correr la función que queramos (en este caso solo tenemos una, pero pueden ser “n”).



La primera vez que lo corremos, por seguridad, se pide autorización a la cuenta que creó el script, esto para que solo el dueño de la cuenta sea el encargado de manejar el script.



Vamos a ver como actualizar dinámicamente elementos de nuestra propia aplicación google script



Crearemos una sencilla calculadora de sumas para ver como se actualiza dinamicamente el campo de resultados

function doGet() { var app = UiApp.createApplication().setTitle('Change Box'); var horizontalPanel = app.createHorizontalPanel().setId('horizontalPanel'); app.add(horizontalPanel); horizontalPanel.add(app.createTextBox().setId('textBox1') .setName('textBox1').setWidth('25px')

.addKeyUpHandler(app.createServerKeyHandler('changeBox') .addCallbackElement(horizontalPanel))); horizontalPanel.add(app.createLabel(' + '));

horizontalPanel.add(app.createTextBox().setId('textBox2') .setName('textBox2').setWidth('25px') .addKeyUpHandler(app.createServerKeyHandler('changeBox') .addCallbackElement(horizontalPanel))); horizontalPanel.add(app.createLabel(' = ')); horizontalPanel.add(app.createTextBox().setId('textBox3')

.setName('textBox3').setWidth('25px')); return app; }

function changeBox(e){ var app = UiApp.createApplication(); if(e.parameter.textBox1 !='' && e.parameter.textBox2 !=''){ // && e.parameter.keyCode == 13 var tb3 = parseInt(e.parameter.textBox1) + parseInt(e.parameter.textBox2); app.getElementById('textBox3').setValue(tb3.toString()); }

return app; }









Google Script puede usarse desde las propias aplicaciones Google, por ejemplo Spreadsheet o Documents GAS nos permite crear aplicaciones basandonos en un archivo html que creamos a nuestro gusto y luego podemos publicar en las aplicaciones Google La clase HtmlService nos permite levantar el archivo html para presentarlo como una web Veamos el ejemplo…

   



Primero creamos un nuevo Document Estando en él vamos al menú Herramientas -> Scripts Creamos un nuevo proyecto Añadimos un nuevo “Html file” desde el menú File y personalizamos el contenido a nuestro gusto Vamos al script Code.gs y le añadimos contenido:

function htmlServiceTest() { // obtenemos la instancia de la app Documents var ui = DocumentApp.getUi(); // cargamos el template de nombre 'sideBar' y añadimos detalles var html = HtmlService.createTemplateFromFile('sideBar').eva luate() .setTitle('Sidebar Example').setWidth(300) .setSandboxMode(HtmlService.SandboxMode.NATIVE); // presentamos el archivo ui.showSidebar(html); }



Spreadsheet… Veamos un primer ejemplo:



Crear una nueva spreadsheet ◦ ◦ ◦ ◦ ◦

Poner nombre a nuestra hoja Crear un nuevo script: menú tools -> Script Editor Seleccionar: Black Project Crear una nueva función: mostrarDialogo() Obtener objeto principal de la aplicación:  var app = UiApp.createApplication();

◦ Crear un panel:  var panel = app.createVerticalPanel();

◦ Añadir widgets:  var textBox = app.createTextBox();  textBox.setName('myTextBox').setId('myTextBox');  var button = app.createButton('Submit');

◦ Añadir al panel:  panel.add(textBox);  panel.add(button);

◦ Añadir gestión de eventos….



Añadir gestión de eventos…. ◦ var clickHandler = app.createServerClickHandler("respondToSubmit"); ◦ button.addClickHandler(clickHandler); ◦ clickHandler.addCallbackElement(panel);



Ensamblar ◦ app.add(panel); ◦ var doc = SpreadsheetApp.getActive(); ◦ doc.show(app); // mostrar la app



Crear función de click handler: function respondToSubmit(e) ◦ Obtener la aplicación activa  var app = UiApp.getActiveApplication();



Obtener el valor del campo de texto: ◦ var textBoxValue = e.parameter.myTextBox;



Obtener la hoja activa ◦ var sheet = SpreadsheetApp.getActiveSheet();



Añadir los datos obtenidos en la última fila: ◦ var lastRow = sheet.getLastRow()+1; ◦ var lastCell = sheet.getRange("A"+lastRow); ◦ lastCell.setValue(textBoxValue);



Cerrar la aplicación ◦ return app.close();



A probar!!!





Ejecutar aplicaciones hechas en Google Script solicita autorización de ejecución La autorización se vincula a la cuenta del usuario en ejecución



 

Hagamos un segundo ejemplo creando un gráfico de manera dinámica leyendo datos de un spreadsheet Demos crear un spreadsheet con los datos a usar Finalmente publicaremos el script como una web

function doGet(){ // Leer la data de un spreadsheet var SS = SpreadsheetApp.openById('SpreadsheetID'); var sheet = SS.getSheets()[0]; var data = sheet.getRange('A1:G7').getValues(); // construir tabla var dataTable = Charts.newDataTable(); //Añadir tipos de dolumnas dataTable.addColumn(Charts.ColumnType.STRING, data[0][0]); for(var i=1; i