Unity VR

Tu primera app de realidad virtual móvil con Unity

Muy buenas, actualmente estoy realizando un curso para alumnos en realidad virtual, y en el proceso de realizar una pequeña muestra de lo fácil y rápìdo que es crear una primera idea de app en realidad virtual me surgió la idea de crear un post de repaso para ellos y que además ayude a los demás… Y me pareció genial, así que preparad los equipos que allá vamos.

Para realizar esta aplicación usamos Unity Engine, que podéis descargar desde su página, al cual le añadimos las capacidades para compilar para teléfonos y dispositivos Android. Para esto último podéis seguir esta guía

Una vez tenemos Unity instalado y con el Android SDK configurado procedemos a crear un nuevo proyecto en Unity, al que llamaremos como nos apetezca, en mi caso, que no tiene porqué ser el vuestro se llamará: «Mi App VR»

Una vez creado, Unity nos llevará directamente a la ventana de escena de nuestro proyecto. Cuya interfaz puede variar dependiendo de la configuración del editor, yo actualmente he dejado la interfaz por defecto.

Ahora nos tocará indicar que el proyecto que vamos a realizar está destinado a dispositivos Android por lo que vamos a File -> Build Settings…

Se nos abrirá la pantalla de configuración de Build (compilación, o generación de nuestra app), abajo en las plataformas disponibles debemos seleccionar Android y hacer click en el botón Switch Platform.

Tras esto, tardará un poco en adaptar los archivos del proyecto a Android. Pero en seguida terminará, es entonces cuando haremos click en el botón que se ecnuentra a la derecha de Switch Platform, en el que pone Player Settings… Esto nos abrirá una sección para configurar las propiedades de nuestra aplicación Android. De entre todos los deplegables abriremos Other Settings.

En lo alto de la sección, vemos que pone Company Name (creador de la app) y Product Name (nombre de nuestra app), podemos cambiarlos a lo que queramos. En el desplegable Other Settings encontraréis en la sección Identification dos puntos interesantes para nosotros: Package NameMinimum API Level.

Package Name debe seguir un formato estilo com.xaviscript.miappvr indicando al principio el origen de la app o de su creador (com.xaviscript en mi caso) y después el ID que le queramos dar a nuestra app. La idea de este Package Name es dar a la aplicación un identificador único dentro de la tienda de apps (Play Store, Amazon Appstore…) por lo que si ponéis algo rollo minombre.miapp debería valer si con suerte nadie ha registrado una app con ese nombre antes en las tiendas.

Minimum API Level será la versión mínima de Android en la que funcionará nuestra aplicación, para facilitar las cosas lo pondermos en Android 5. En mi caso, trads terminar la configuración, se queda así la cosa.

Ahora, plegaremos de nuevo Other Settings y desplegaremos el apartado XR Settings (XR, eXtended Realities que engloba realidad virtual, aumentada y mixta). Ahí activaremos donde pone Virtual Reality Supported y pinchando en el pequeño símbolo + que aparece bajo List is Empty añadiremos  Cardboard y Daydream.

Para los que no lo sepáis Cardboard hace referencia a las típicas gafas de realidad virtual para móvil hechas tanto de cartón como de plástico que encontráis a día de hoy en las típicas tiendas como Tiger, Ale Hop, o múltiples bazares (hablando de territorio español, imagino que en otros países también estaréis hartos de verlas).

Daydream por su lado hace referencia a un dispositivo de Google que se vende en su web para su uso con un número limitado de teléfonos, en este caso, el visor viene acompañado de un mando puntero que nos permite señalar cosas y hacer click. Importante:Si seleccionas DayDream como SDK, es posible que Unity te pida una versión superior de Minimum API Level en Other Settings, así que tenlo en cuenta.

Oculus es un SDK que sirve para preparar la aplicación para su compatibilidad con dispositivosd como los Samsung Galaxy S7, S8, S9 y sus variaciones, así como con dispositivos como Oculus Go y Oculus Quest. Por lo que si te interesa desarrollar para estos dispositivos, tenlo en cuenta. Es posible que también te pidan cambiar la Minimum API Level de Other Settings.

Principalmente, para facilitar el desarrollo con la inmensa mayoría de dispositivos del mercado, vamos a enfocar este tutorial en el uso de Cardboard, aunque puede que usemos Daydream en algún momento para probar las opciones de interactuado.

Una vez lo tenemos todo lo anterior configurado, procederemos a descargarnos el paquete de Google VR para Unity que ofrece el propio Google desde Github. Para esto, entraremos a la web del repositorio y descargaremos el unitypackage de la última versión.

Tras descargarlo, lo arrastraremos a nuestro proyecto Unity (junto a la carpeta Scenes que aparece por defecto), si tenemos el proyecto ya abierto en Unity, también podemos hacer doble click e importarlo todo.

Tras importarlo vemos que tenemos una nueva carpeta en nuestro proyecto llamada GoogleVR. Esta carpeta nos ofrece muchos scripts (archivos de código) hechos por la gente de Google para facilitarnos la vida durante el proceso de desarrollo de aplicaciones de Realidad Virtual, así como algunas escenas de Unity ya preparadas para probar su funcionamiento.

En la mayoría de aplicaciones de Realidad Virtual que desarrollo, suelo seguir un procedimiento similar. Hago todo lo anterior, abro una de las escenas por defecto que trae GoogleVR, y la edito para ajustarla a mi programa. Con esto, nos ahorramos tener que estar lidiando con cámaras, configuraciones, objetos de control de eventos… Google nos da todo eso ya montado, así que vamos a proceder a realizarlo de ese modo, para esto seguimos los siguientes pasos:

  1. Vamos a la carpeta GoogleVR/Demos/Scenes/
  2. Pinchamos sobre la escena HelloVR que encontramos en esa carpeta.
  3. La duplicamos pulsando Control+D.
  4. Cambiamos el nombre a la creada HelloVR 1, por un nombre más interesante, en mi caso será MiApp. (F2 o click derecho -> Rename).
  5. Arrastramos nuestra nueva escena a la carpeta Scenes que tenemos en el directorio raíz de nuestro proyecto (donde estaban GoogleVR y Scenes, pues en esa Scenes).
  6. Y una vez allí, si no lo hemos hecho ya que sois muy rápidos, le hacemos doble click a nuestra nueva escena para abrirla.

Si lo hemos hecho todo como he descrito, tras abrir la escena deberíamos tener algo tal que así.

Como veis, de repente nuestras vistas de escena y juego se han vuelto más coloridas, esto es una mini aplicación que Google nos da por defecto para poder usarla y jugar en nuestro proceso de investigación de su kit para VR. Vamos a jugar un poco con ella para habituarnos a los controles de Realidad Virtual que nos ofrecen en el kit.

Lo primero será darle al Play, y cuando la aplicación se haya ejecutado (el cartel negro de la ventana Game habrá desaparecido) podremos interactuar con ella. Lo primero es mover la cámara, al ser una app para realidad virtual, está claro que el poder mirar para todos lados es algo muy importante, eso es algo que se nos ofrece pulsando Alt y moviendo el ratón. Como véis, podéis mover la cámara y mirar para distintos lados sin problema, en caso de que no os funcione, podéis hacer click en la ventana de Game, para señalarla como foco de los eventos del ratón.

Para girar la cámara como si ladeásemos la cabeza procedemos a pulsar Control y realizar los mismo gestos de ratón.

Bueno, y ahora lo más importante, hacer click. En principio vemos que hacer click en la pantalla o en el objeto no funciona, esto es porque Google VR no reacciona ante los clicks cuando Carboard ha sido seleccionado. Aunque al lanzar la aplicación en un teléfono real sí que funciona el pinchar en la pantalla. ¯\_(ツ)_/¯

Así que para simular el click tenemos que volver a Player Settings -> XR Settings como comentábamos anteriormente en el tutorial, y añadimos Daydream como SDK si no lo teníamos, y lo configuramos para que se quede por delante de Cardboard.

Ahora volvemos a darle a Play, y veremos que si pulsamos Shift se producirá un nuevo comportamiento que es que aparecerá un mando que al mover el ratón apuntará donde digamos (esto a veces se vuelve un poco lioso porque al final estamos simulando una rotación 3D con el movimiento 2D del ratón en la mesa, pero con paciencia conseguiréis ver el puntero). Al hacer click veremos que el objeto desaparece, ¡pero aparecerá otro! Y este es el jueguecito que Google nos ofrece.

Vale, pues con esto ya tenemos entendido como cargar el SDK de GoogleVR y lo que podemos y no hacer con la cámara.

Así que ahora procederemos a crear nosotros a modificar la escena para crear la nuestra propia.

Lo primero será borrar los siguientes objetos de la escena:

Al eliminarlos veremos que se queda todo con fondo azul, y la escena queda prácticamente vacía en la vista Scene.

Así que ahora toca… ¡montarnos nuestro mundo 3D! Para esto podéis usar modelos vuestros o descargados de internet. Yo, cuando estoy prototipando algo lo que suelo hacer es entrar a Google Poly que tiene un montón de objetos 3D de descarga gratuita y con licencias Creative Commons que sólo nos piden mencionar al autor o la fuente del objeto en nuestra app para su libre utilización.

En mi caso voy a descargar el siguiente escenario:

https://poly.google.com/view/brPPFuwJz8R

Podemos descargarlo en el botón Descargar y elegimos el formato OBJ. Al descomprimir el zip que bajamos vemos que tiene dos archivos, un .obj y un .mtl. El .obj contiene la información tridimensional del objeto: sus vértices, sus caras, qué material se pone dónde… Mientras que el .mtl, describe esos materiales a los que hace referencia el .obj. Puede que el objeto que vosotros hayáis elegido además lleve imágenes, que son las texturas que el .mtl utilizará en sus materiales para darle estilo al modelo 3D.

Lo que tenemos que hacer es añadir todo el contenido de este zip a Unity, por lo que descomprimimos el contenido del zip, creamos una carpeta Models en Unity haciendo click derecho en el área del proyecto y Create -> Folder (así podemos mantenerlo todo ordenadito, que siempre es bueno) y arrastramos dentro los archivos.

Una vez arrastrados, podremos arrastrar el modelo a la escena y así añadirlo a nuestra aplicación. Como se ve muy oscuro vamos a añadir también una luz direccional (que aplica luz en una dirección desde el infinito, simulando el sol), así que hacemos click derecho Light -> Directional light y una vez en la escena la giramos para que quede enfocando el escenario en un ángulo que nos guste. Y movemos la cámara para situarla encima del escenario.


¡Bien! Ya tenemos nuestro escenario creado, ahora probaremos a crear un cubo y a interactuar con él, de manera que podamos tener un mínimo comportamiento con algún objeto.

Al igual que hemos creado la luz, creamos un cubo con 3D Object -> Cube y lo situamos delante de la cámara.

Y ahora al cubo le añadimos un componente Box Collider (Colisionador de cubo), para que nuestro puntero sea capaz de chocar con el (colisionar).

Y también le añadimos un componente Event Trigger (Detonador de eventos) de manera que sea capaz de detectar eventos de interacción con nuestro puntero.

Vale, una vez tenemos el escenario y tenemos nuestro objeto con el que queremos interactuar (podrían ser varios), llega el momento de decidir, en caso de que no lo tuviésemos decidido ya, qué quremos que haga nuestra aplicación. Para este tutorial vamos a hacer un comportamiento básico, queremos que al pinchar en el cubo, este desaparezca sin más.

Para esto, simplemente vamos al componente Event Trigger que acabamos de añadir en el Inspector de nuestro cubo, y le damos a Add New Event Type -> PointerClick este evento nos permitirá asignar una función a nuestro cubo para que al hacer click sobre él suceda algo en la aplicación.

Ahora atención, a la hora de añadir eventos a unity se usan unos elementos llamados Unity Events que rompen un poco el flujo de programación tradicional, aunque facilitan mucho las cosas para la gente sin experiencia en programación. En ellos, un evento tiene 3 valores claves: un objeto, un componente y una función. Y la relación sería decir, por ejemplo en este caso que vamos a detectar un click en el cubo:

Al hacer click en este cuboo, voy a hacer que él objeto seleccionado, lance de su componente seleccionado, la función seleccionada. De manera que podemos lanzar un evento desde un objeto y que afecte a cualquier objeto de nuestra escena, incluyendo claro el propio objeto con el Event Trigger.

Así que, vamos a crear nuestro Unity Event para el evento PointerClick. Para eso le damos al botón + que aparece casi diminuto a la derecha del recuadro creado de Pointer Click en Event Trigger y se creará una ranura de Unity Event. Una vez creada esa ranura añadimos el objeto Cube que hemos creado, su script GameObject y la función SetActive que ponemos a desactivado (false en lenguaje de programación). Os dejo un GIF describiéndolo.

Con esto, lo que hemos hecho es darle a nuestro Cubo la capacidad de que al hacer click sobre él, se elige la función SetActive en GameObject que se encarga de mostrar u ocultar el objeto, y la ponemos a falso, por lo que estamos diciéndole que desactive. Los componentes GameObject y Transform se encuentran en todos los objetos presentes en una escena de Unity, y cada uno tienes sus funciones propias que son de las más usadas en el mundo del desarrollo con Unity. Por lo que, si estáis aprendiendo, con el tiempo las iréis aprendiendo todas o casi todas.

Bueno, ha llegado el momento de probar si funciona lo que hemos hecho, le damos al Play de Unity y pulsando Shift apuntando con el circulito blanco al cubo y haciendo click… comprobamos si el cubo desaparece. Y, si todo se ha hecho correctamente, ¡debería funcionar! (Lo acabo de comprobar y funciona).

Pues hasta aquí lo que tenía pensado para mi primer tutorial de VR, pero antes de cerrar quiero añadir un contenido más para que os quede más claro el poder de los Unity Event. Lo que vamos a hacer es que al hacer click en el cubo, en vez del cubo desaparezca el escenario (WTF!! Sí, vamos a hacer que «pulsando aquí pase algo allá»).

Para eso lo único que tenemos que hacer es, seguir los mismos pasos que habéis hecho para añadir el cubo como objeto al Event Trigger del propio cubo, pero en vez de arrastrar el cubo, arrastráis el escenario. Y ya seleccionáis GameObject -> SetActive y lo dejáis desactivado. ¡Y pum! Ya estaría hecho. Os dejo un gif mostrandoos el enorme poder de lo que hemos hecho este último paso.


¡Genial! Pues si quisiésemos lanzar esto en nuestro teléfono móvil, tendríamos que configurar nuestro móvil en modo desarrollador y adctivar la depuración USB (podéis buscar como hacer esto en Google, que cada modelo Android puede variar ligeramente), conectamos el móvil al PC, aceptamos el aviso de confianza con el PC desde el móvil, eliminamos Daydream de las Player Options para asegurarnos de usar el Cardboard (a no ser que tengamos un Daydream o un Oculus, en ese caso dejamos el que más nos guste).

Entonces en File -> Build Settings hacemos un Add Open Scenes, para añadir nuestra nueva escena creada a partir de la de GoogleVR, eliminamos la anterior y hacemos Build and Run. Le damos un nombre a nuestro archivo .apk que es el formato de las aplicaciones Android y, si todo va bien, debería construir y lanzar la aplicación en nuestro teléfono, ¡esto puede tardar un ratito!

A partir de aquí, si queremos compilar y lanzar nuestra aplicación, simplemente podemos hacer Control+B o ir a File-> Build And Run

¡Y este es el resultado de nuestra aplicación en un teléfono móvil!

Próximamente añadiré más tutoriales para ir avanzando en nuestra aplicación de RV.

Solucionar Windows 10 / 8 Instalación: No se puede crear una partición nueva ni encontrar una que ya exista

Hola de nuevo gente,

El pasado fin de semana tuve algunos problemas instalando Windows 10 desde una unidad USB en lugar de un tradicional DVD en un portátil algo viejo (> 8 años).

Creé el USB booteable desde la utilidad de Windows 10 Media Creation Tool, y me dispuse a instalarlo. Conseguí ejecutar el pendrive sin problema y realizar los pasos bien hasta llegar al paso de selección de partición, donde al seleccionar el disco me aparecía: «No se puede crear una partición nueva ni encontrar una que ya exista».

Después de algunas horas jugueteando con la BIOS y alo de paciencia finalmente lo conseguí, pero antes de nada estas son las soluciones que encontré por internet:

  • Cambiar el pendrive de puerto USB en la pantalla de particiones y darle a actualizar. Esto a mí no me sirvió.
  • Acceder a CMD presionando Shift+F10 (Tampoco me funcionó):
    • una vez en CMD escribir ‘DISKPART’.
    • Y luego ‘list disk’ y apuntar el número del disco duro en el que queramos instalar nuestro Windows.
    • Escribir ‘select disk *’ (donde * será el número de nuestro disco).
    • Entonces lo borramos con ‘clean’
    • y creamos una partición: ‘create partition primary’
    • La hacemos objetivo de nuetras operaciones: ‘active’
    • Y la formateamos: ‘format fs=ntfs quick’
    • Y la damos de alta en el sistema: ‘assign’.
    • Entonces salir de la consola y probar a instalar Windows.
  • Ir a la BIOS y cambiar las configuraciones SATA de AHCI a IDE. (No me funcionó).
  • Cambiar el orden de Boot de los dispositivos, poniendo primero el disco duro en el que queramos instalar Windows, guardar y reiniciar. Volver a entrar a la BIOS y ejecutar desde el pendrive (sin cambiar el orden, simplemente lanzandolo desde ahí). (Tampoco me funcionó…).

Como véis estuve un buen rato haciendo pruebas, y otras cuantas de idea propia que dan para escribir un libro de leyendas informáticas. Pero finalmente lo conseguí realizando este último paso:

  • Teniendo SATA como IDE y el disco duro como primera opción de Boot, activé el Legacy USB en la BIOS y el UEFI boot, y entonces en la opción de guardar opciones de la BIOS me daba la opción de correr el Pendrive con y sin UEFI, elegí la opción UEFI y… ¡todo fue sin problemas!

Así que espero que este artículo ayude a pobres almas perdidas como yo en la ardua tarea de instlar una nueva versión de Windows en un portátil y disfrutar de maravillosas aventuras informáticas como esta.

Un saludo, y disfrutad de vuestro nuevo sistema.

Unity rotation

Rotando un objeto sobre su propio centro en Unity

Unity y yo

Hola a todos. Hoy añado al blog una nueva tecnología en la que he estado trabajando el último año. Es Unity, un motor de juegos que puede hacer muy fácil crear un juego cotidiando y, además, ofrece un conjunto de herramientas con alto potencial para crear proyectos más complejos. Un ejemplo actual sería el videojuego Yooka-Laylee de Platonic Games que ha sido creado usando este motor y ha sido mundialmente famoso y lanzado para múltiples consolas.

Actualmente, estoy usando el motor para crear aplicaciones de Realidad aumentada para la compañía en la que actualmente trabajo: ANSWARETECH. Y mientras lo voy usando me estreso con problemas que cuya solución iré comentando en otros artículos del blog.

Rotando el objeto

Bueno, no me extenderé más y pasaré a lo que importa. Estaba intentando hacer rotar un modelo 3D en formato OBJ que cargué dinámicamente en tiempo de ejecución desde un servidor web usando el paquete Simple .OBJ y le añadí a un Trackable Object de Vuforia, que es lo que nos permite crear la experiencia de realidad aumentada sobre un marcador.

Tras conseguirlo, decidí que sería chulo ofrecer la posibilidad de interactuar un poco con el modelo 3D, por lo que empecé añadir botones de transformación: escalar+, escalar-, rotarX, rotarY (lo siento, no hay rotarZ).

Pero encontré algunos problemas con el resultado de las rotaciones, por lo que tras estar probando y jugando con alternativas y funciones como Transform.Rotate, Transform.RotateAround, los Quaternion de Transform.rotation… Tuve la idea de crear un GameObject vacío para situarlo justo en el centro de mi modelo 3D, hacer el modelo su hijo y apliar las transformaciones sobre el padre cómodamente olvidandome de los problemas de mi maldito OBJ que no estaba bien alineado en 0,0,0.

Así que finalmente conseguí lo que deseaba usando un código como este:

using UnityEngine;
using System.Collections;

// ...

public static class Load3D {

// ...

    public void loadModel() {
    // ... En mi función de carga del modelo 3D

        model.transform.parent = marker.transform; //model es mi modeloObj. Marker es el objeto de Vuforia

        model.transform.rotation = new Quaternion(0,0,0,0); //Resetea la rotación del objeto tras añadirlo al padre

        Vector3 objCenter = model.GetComponent<Renderer>().bounds.center;

        GameObject container = new GameObject(); //Creo el objeto padre vacío

        container.transform.parent = marker.transform;

        container.transform.rotation = new Quaternion(0,0,0,0);

        container.transform.Position = objCenter;

        model.transform.parent = container.transform;
    }

    public void RotateMyModel() {
        // ... En mi función de rotación
        model.transform.parent.Rotate(Vector.up * 90);
        //o
        model.transform.parent.Rotate(Vector.right * 90);
        //o
        model.transform.parent.Rotate(Vector.forward * 90);
    }
}

 

Bien, y eso es todo.

Espero que ayude a alguien y evita algunos dolores de cabeza.

¡Que pases un buen día programando!

Usar el smartphone como modem USB para portátil

Hoy me he encontrado con el problema de tener que acceder a una WiFi que era 5ghz y encontrarme con que mi antiguo portátil no era compatible, ¿no es maravillosa la informática? Tras intentar encontrar algún adaptador usb o una alternativa para conseguir conectarme a la red finalmente se me ocurrió conectarme a la red inalámbrica utilizando mi smartphone Android y usarlo como módem en mi ordenador.

Sorprendentemente funcionó mejor de lo que pensaba que lo haría y he podido trabajar conectado, así que aquí os cuelgo un minivideo de cómo hacerlo.Aunque no es una cosa realmente complicada, a lo mejor alguien se lía.

Buscar en una cadena HTML el título y meta tags

Esta semana he trabajado en un pequeño proyecto en el que he necesitado obtener el título y la descripción de un sitio web realizando una llamada HTTP.

Finalmente, saqué el título de la etiqueta ≶title> y la descripción de la etiqueta meta, ambas en ≶head>.

Pensé que a alguien más podría serle útil por lo que os dejo aquí la manera en la que lo hice con JavaScript.

//////
// 'response' es el resultado de la petición HTTP
// 'content' es el código HTML del sitio web completo
//////

//Para obtener el título:

results.content.match(/<title[^>]*>([^<]+)<\/title>/)[1]


//Para encontrar la descripción en la etiqueta meta: (jQuery)

$(results.content).filter('meta[name="description"]').attr("content")
$(results.content).filter('meta[name="Description"]').attr("content")


Espero que a alguien le sirva =)

Guía rápida y fácil para usar Git

¡Muy buenas a todos! He estado pensando sobre mis objetivos para este 2016 y decidí hacer un post para el blog cada dos semanas, así que vamos a empezar, a ver si lo consigo.

En esta entrada mostraré el flujo de trabajo básico y los comandos que cualquier persona debería seguir para empezar a usar Git en sus proyectos.

Empezando

Git es un software de control de versiones que nos ayuda a añadir «puntos de guardado» en nuestro código que nos permite volver a ellos en caso de que cometamos errores o queramos recuperar algo perdido. Esta funcionalidad nos ayudará en otras tareas corrientes en la vida de un programador como pueden ser trabajar en equipo o testear nuevas características de nuestros proyectos. Empecemos.

Git comúnmente se utiliza como utilidad de consola de comandos (CLI) pero hay gran cantidad de programas que te ofrecerán una interfaz más o menos amigable según cual elijáis así que podéis probarlas si queréis. Yo mostraré como usar la línea de comandos.

Cuando estás trabajando con Git necesitas inicializar un repositorio en tu proyecto, para hacerlo simplemente navegaremos en la terminal al directorio donde tenemos el proyecto y lanzamos:

$ git init

Una vez el repositorio esté listo podremos crear un archivo que nos permita definir que archivos y carpetas no queremos que se añadan a las copias de seguridad. Este archivo se denomina .gitignore y puedes crearlo siguiendo la guía oficial.

Una vez creado, es el momento de añadir archivos al repositorio, Git ofrece un comando bastante simple para esto: add. Con este comando puedes añadir tanto archivos individuales como añadir todos los archivos disponibles en el proyecto de golpe o seleccionarlos mediante wildcards. Lo normal sería añadir todos los archivos que tenemos en el proyecto, por lo que para hacer esto corremos:

$ git add .

(Hay varios comandos para añadir múltiples archivos a la vez, puedes ver las diferencias en esta pregunta de StackOverflow)

Verás en la salida de la terminal los archivos que se han añadido.

Cuando tengas todos los archivos nuevos y modificados añadidos usando add llega el momento de guardar su estado. El comando para esto es commit y permite añadir un mensaje para comprender qué se está modificando en esa copia.

$ git commit

Al lanzar esto, se nos pedirá un mensaje para diferenciar el commit de otros anteriores, puedes evitar esto usando el flag -m al lanzar el comando así:

$ git commit -m "Fix problema bucle infinito"

Se recomienda muchísimo para cualquier desarrollador seguir buenas prácticas escribiendo mensajes de commit. Seguir un estándar establecido de manera externa o por nuestro equipo de trabajo nos permitirá reconocer más rápido el tipo de commit (nueva funcionalidad, arreglos, cambios de responsabilidad…). Una buena lectura para tener una buena idea sobre como escribir buenos mensajes de commit es esta guía.

Ramas

Una rama es una manera de «congelar» tu código actual en un punto mientras sigues desarrollando otra característica o funcionalidad. Puedes cambiar entre el código congelado y el nuevo sin peligro ninguno y de manera muy rápida y, una vez termines, puedes fusionarlos para cerrar los cambios.

Para manejar las ramas hay dos comandos básicos a conocer: branch y checkout.

Git branch

Con este comando puedes crear, renombrar y eliminar ramas. Veamos como se hace.

Añadir una nueva rama:

$ git branch <nombre>

$ git branch bugfix

Para cambiar el nombre de una rama debes estar en ella y escribir:

$ git branch <nuevo_nombre>

Y para borrarla simplemente:

$ git branch -d <nombre_rama>

Esto mostrará una alerta si es que tiene cambios sin registrar (commit) así que si quieres borrarlos igualmente puedes forzarlo con:

$ git branch -D <branch_name>

Git checkout

Con checkout puedes navegar entre ramas y crearlas.

Para navegar debes lanzar checkout junto al nombre de la rama a la que ir:

$ git checkout <nombre_rama>

$ git checkout bugfix

Puedes crear e ir a la nueva rama en un solo comando usando:

$ git checkout -b <nombre_rama>

Si esa rama ya existía te quedarás en la misma rama en la que estabas y recibirás un mensaje de alerta que se mostrará en el terminal. Puedes forzar la rama a borrarse y recrearse usando -B, de la siguiente manera:
$ git checkout -B <branch_name>

Git merge

Cuando has terminado tu tarea en una rama y quieres actualizar master (la rama principal en Git) o cualquier otra rama debes usar merge. Este comando mezclará el código de ambas ramas automáticamente y, en caso de que algún error ocurra, mostrará los archivos con errores en el terminal para proceder a su modificación y commitear los cambios finales.

Para hacer merge a una rama debes moverte a la rama que quieres actualizar (master o una desactualizada) y ejecutar merge con el nombre de la rama a fusionar:

$ git checkout master

$ git merge bugfix

Bueno, y con esto deberías estar más o menos listo para usar Git aunque sea muy básico, en el futuro explicaré como conectarse a repositorios remotos y algunos comandos más útiles cuando trabajas en equipo.

¡Ánimo y mucha suerte!

Trabajando con arrays en JavaScript: Map y Reduce

Hola a todos, hoy voy a explicar como usar dos de las funciones más geniales para trabajar con operar con arrayis en JavaScript: reduce y map. Así que vamos ya manos a la obra con los ejemplos.

Array.prototype.map (callback [, thisArg])

Map es una función que nos permite crear un nuevo array como resultado de operar con los elementos de otro array existente. El array resultante tendrá la misma longitud que el array original usado.

La función callback tiene tres argumentos:

  • El elemento actual del array.
  • El índice actual que se está recorriendo del array.
  • El array original que estamos usando como entrada.

Puedes usar thisArg para indicar que objeto será accedido al usar this en la función de callback.

Una vez sabemos esto podemos escribir un breve ejemplo:

 


var arr = [{a:5, b:2}, {a:7, b:1}, {a:2, b:7}, {a:12, b:6}];

var restas = arr.map(function( element, index, array) {
     return element.a - element.b;
});

console.log(restas); // Mostrará un array que contiene [3, 6, -5, 6]

Como puedes ver el array resultante tiene la misma longitud que el primero que hemos usado y sus valores corresponden al valor devuelto por la función callback. ¡Muy fácil de usar y además útil! Y además mucho más cómodo de leer que un bucle.

 

Array.prototype.reduce(callback [, initValue])

Reduce es una función que nos permite crear un nuevo valor como resultado de operar con los elementos de un array.

La función callback tiene 4 argumentos:

  • Elemento anterior
  • Elemento actual
  • El índice actual que estamos recorriendo en el array
  • El array de entrada completo

Puedes usar el argumento initValue para indicar cual será el primer valor del atributo del callback Element anterior, en este caso el atributo Elemento actual tomará el valor del primer elemento del array recorrido. En el caso de que no se haya inicializado con ningún valor, se usará el primer elemento del array como elemento previo y se empezará recorriendo el segundo elemento en Elemento actual. El atributo Elemento anterior tomará a partir de la segunda iteración el valor devuelto en el callback. El resultado de reduce puede ser una variable que desees: una cadena, un número, un array, un objeto… ¡Tú decides!

Veamos un ejemplo. esta vez generaremos un objeto que cuenta las veces que aparece cada caracter en una cadena:


var str = "Hello, this is just a reduce test!";
var strArr = str.split("");

var charCount = strArr.reduce(function( valorAnterior, valorActual, index, array) {
    if(valorAnterior[valorActual]){ 
      valorAnterior[valorActual]++; //Si el valor actual ha aparecido en iteraciones anteriores simplemente incrementamos su valor en nuestro objeto
    } else { previousValue[actualValue] = 1; // Si no ha aparecido, inicializamos la cuenta de ese caracter con 1
}
    return valorAnterior; //Devolvemos valorAnterior para usarlo de nuevo como valorAnterior en la siguiente iteración
}, {});  //Usamos un objeto vacío como primer valorAnterior 

console.log(charCount); // En la consola se mostrará algo lo siguiente: "Object { H: 1, e: 4, l: 2, o: 1, ,: 1,  : 6, t: 4, h: 1, i: 2, s: 4, 7 more… }"

What a magic experience!

With this short post I hope you have understood correctly how this great functions work and now it only depends on what you do and how you use it in your awesome applications.

See you in future posts!