Creando una calculadora – introducción a Electronjs

Ejemplo Calculadora con electron.js

El siguiente post es el inicio de un manual que nos llevará paso a paso por el desarrollo de una aplicación con electron.js, la intensión es llegar asta la producción, publicación y el sistema de actualizaciones:

 

Electronjs (intro y un poquito de historia):

El proyecto Electron.js inicialmente concebido como Atom-Shell ya que inicialmente fue la herramienta que permitía al equipo de github generar el binario de Atom el cual es un editor de código multiplataforma.

Comenta la historia que los miembros de github tenían problemas con integrar su desarrollo ya que tienen un gente muy eficiente en lenguajes de bajo nivel (p.e. Scott Chacon) y por otra parte tienen excelente elementos en el manejo del UX (p.e. Mark Otto).

Todo esto genero algo de conflicto ya que querían llevar todo el look and feel de la web en una aplicación de escritorio, fue entonces cuando a Cheng Zhao se le ocurrió la maravillosa de crear Atom-Shell partiendo de :

  • Realizar la  aplicación utilizando un  webView de código abierto (utilizaron Chromium).
  • Programar la lógica desde Javascript utilizando nodejs (con todos los módulos compatibles).

funcionamiento de electron.js

Instalando electronjs.

Una ves explicado que es electronjs y que hace uso de nodejs por lo tanto para empezar a construir aplicaciones con electron.js necesitamos:

Creando un programa electron.js

Electronjs define varios elementos de los cuales los elementos mas basicos son dos:

  • browserWindow: que es la ventana gráfica, de este objeto abra una instancia para cada ventana de la aplicación.
  • app: es la aplicación de electron.js de esta solo existe una instancia que contiene la aplicación(solo hay una única instancia).

La siguiente estructura de directorios es la que tendra inicialmente el proyecto:

|--package.json        <-- Def. del proyecto, p.e. la lista de dependencias
|--disparador.js       <-- Se encarga de arrancar electron
`--src/
   |-- estilo.css      <-- Contiene el diseño de la aplicación
   |-- icon.png        <-- El icono de la aplicación
   |-- index.html      <-- Contiene la interfaz de la aplicación
   `-- logica.js       <-- Administrar la lógica de la aplicación

El funcionamiento de la aplicación la trataré de describir con el siguiente diagrama:

Diagrama de flujo de la aplicación

En la siguiente imagen se muestra a grandes rasgos como esta construida la interfaz.

Elementos que componen el UI de la aplicacición

 

Me gustaría explicar como crear una aplicación básica en electrón pero creo que la documentación oficial es muy buena así que me delimitaré a dejar el enlace:

https://electronjs.org/docs/tutorial/first-app#installing-electron/

 

Por otra parte agregue el proyecto a un repositorio al cual le iré creando una etiqueta que apunte a cada uno de los siguientes posts, de momento esta la versión 0.1:

https://github.com/fitorec/calculadora-electron/tree/v0.1

 

¿Que sigue?

En el siguiente post vamos hablar sobre el uso de eventos en electron.js de tal forma que podamos cachar la acción de las teclas.

Por otra parte me gustaría que me dejarán en los comentarios que tema les gustaría que se tratara en las próximas sesiones.

Contribuciónes al plugin de jQuery prettyDay

Hace un tiempo en un post anterior había comentado a cerca de un plugin de jQuery que muestra la fecha bonita y de como echarlo andar en wordpress.

El «detalle» del post es que para que tuviera soporte completo para la lengua española los invitaba a descargar el plugin desde mi «versión« ya que de momento se encontraba abierto  un ticket de cambios propuestos(un pull request).

Pues bien hace un par de días dicho cambio ya fue agregado, ahora para que tengas soporte completo en la lengua española + soporte de meses y años, no se requiere de otra cosa mas que seguir la documentación oficial del plugin.

O descargar el plugin desde el repositorio principal(ya no del mío) y jugar con el demo:

https://github.com/jzaefferer/jquery-prettydate/pull/12

Me encanta esto del git y el github clonar repositorios jugar con ellos como si fuesen recetas de cocina, mismas recetas que «heackeamos» para compartir y de repente cuando te das cuenta  estas discutiendo con ciertos chefs que te alientan a ser mas exigentes con uno mismo cada día.

Resaltando textos seleccionados con Fokus.js en nuestros sitios web

El  Fokus es un proyecto en javascript que básicamente nos sirve para resaltar el texto seleccionado en un sitio, ayudando ha hacer una navegación mas explicita:

Probando Fokus

Probando Fokus

Si desea obtener mas información pude consultar el sitio oficial del proyecto:

http://lab.hakim.se/fokus/
Ó consultar directamente el repositorio de código fuente:
https://github.com/hakimel/fokus

Usando fokus corriendo fokus en nuestras páginas web

Para usar fokus primero tenemos que descargar la librería y posteriormente agregarla en nuestro sitio web que queremos que tenga el efecto fokus, p.e.:

<script type="text/javascript" src="js/fokus.js"></script>

Una vez que hicimos esto lo único que nos hace falta es probar con seleccionar algún texto sobre la página en cuestión.

Fecha en formato bonito un plugin de jQuery corriendo en wordpress

Hace un par de años John Resig el autor de jQuery escribió un árticulo muy bonito donde anunciaba una pequeña función que imprimía el día en un formato mas humano al cual denomino pretty-date , la función básicamente es la siguiente:

/*  prettyDate
 * 
 * recibe una fecha en formato ISO8601
 * y devuelve la fecha en formato bonito
 */

function prettyDate(time){
	// Lo primero que hace es obtener la diferencia
	// de la fecha pasada con la fecha actual
	var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
	    diff = (((new Date()).getTime() - date.getTime()) / 1000),
	    day_diff = Math.floor(diff / 86400);

	//Si la diferencia es invalida, quiere decir que el argumento pasado por el
	// usuario es invalido por lo cual regresa null
	if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
		return;

 //Finalmente va atrapando el rango de los las diferencias para así devolver el resultado
	return day_diff == 0 && (
			diff < 60 && "just now" ||
			diff < 120 && "1 minute ago" ||
			diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
			diff < 7200 && "1 hour ago" ||
			diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
		day_diff == 1 && "Yesterday" ||
		day_diff < 7 && day_diff + " days ago" ||
		day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}

Posteriormente esta función se convirtió en un plugin de jQuery mantenido por jzaefferer (uno de los dev. del nucleo de jQuery). Pero… si analizamos detenidamente el código anterior del cual esta basado el  plugin nos daremos cuenta que  cuando la fechas rebasaba la semana el plugin truena, como se puede ver en el siguiente demo :S.

Este plugin lo empece a utilizar para la página de la Academia de Software Libre , sin mas me decidí a agregarle el soporte para meses y años, ademas de agregarle soporte para la lengua española (ver detalles de la confirmación), algunos de estos cambios están disponibles en la versión 1.1 disponible en el repositorio de jzaefferer sin embargo de momento la traducción completa esta disponible en mi repositorio (aunque quizás cuando lea esto mis cambios ya se hayan integrado).

Como usar este plugin es muy simple y personalizable

Una vez que obtengamos el plugin podemos usarlo de la siguiente manera:

<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.prettydate.js"></script>
    <script type="text/javascript" src="js/jquery.prettydate-es.js"></script>
    <script>
        jQuery(function ($) {
            $(".entryDate").prettyDate({attribute: "datetime"});
        });
    </script>
</head>
<body>
  <time datetime="2012-10-29T18:12:02+00:00" itemprop="dateCreated">
  </time>
</body>

Veamos lo primero que hacemos es cargar la librería jQuery, posteriormente el plugin (prettydate.js) y finalmente su traducción al español (jquery.prettydate-es.js ojo el orden importa).

Luego en el ready de jQuery mandamos a llamar a los elementos que pertenezcan a la clase .entryDate para aplicarles el plugin, al momento de mandarle el argumento {attribute: "datetime"} estamos indicando que el atributo a convertir sera el datetime, si no indicamos esto por defecto buscaría el atributo title

   $(".entryDate").prettyDate({attribute: "datetime"});

Hechando andar este plugin en WordPress

Bien lo primero que tenemos que hacer es mandar a llamar las librerias necesarias, por ejemplo deberíamos agregar en el header.php o footer.php de nuestra plantilla las siguientes lineas:

<?php
$rootPath = get_bloginfo('template_directory');
?>
<script src="<?php echo $rootPath; ?>js/jquery.js"></script>
<script src="<?php echo $rootPath; ?>js/jquery.prettydate/jquery.prettydate.js"></script>
<script src="<?php echo $rootPath; ?>js/jquery.prettydate/jquery.prettydate-es.js"></script>
<script language="Javascript"  type="text/javascript">
$(function() {
    $(".entry-date").prettyDate({attribute: "datetime"});
});
</script>

Una vez que tenemos esto estamos diciendo que le muestre la fecha en formato bonito a los elementos que pertenezcan a la clase entry-date y que a la vez tengan atributo datetime en formato ISO-8601 correcto, por lo cual faltaría generar dicha la salida desde nuestro tema de worpdress.

Finalmente en la cabecera del código de nuestro artículos agregamos el siguiente código en php:

<?php

printf( 
     '<a href="%1$s" title="%2$s" rel="bookmark">'.
     '<time itemprop="dateCreated" datetime="%3$s">%4$s</time></a>',
     get_bloginfo('url') . '/' . get_the_time('Y/m/d'),//Aqui la liga deberia de ir a los posts de ese día
     'Artículos del día ' . get_the_date(),
     get_the_time( 'c' ),
     get_the_date()
    );

Sólo como dato informativo la funcion

get_the_time

con el argumento ‘c’ regresa la fecha en formato ISO como lo indica en su API wordpress.
Quizás esto lo debería de meter en alguna función y agregarlo en su archivo function.php de la manera siguiente:

 if ( ! function_exists( 'mitema_pretty_date_post' ) ) :
function mitema_pretty_date_post() {
    // el código mostrado anteriormente
}
endif;

De esta forma solo bastaría con mandar a llamar la función para re-utilizarla, en el single.php o en el loop.php, content.php, etc… podría agregar:

mitema_pretty_date_post();