tecnología

Como instalar Laravel Homestead en Windows

Anteriormente había escrito como podemos aprovechar las ventajas de PuPHPet para construir de forma rápida ambientes de desarrollo enfocado en PHP. PuPHPet sigue siendo un gran proyecto y actualmente la cantidad de configuraciones que podemos generar a través de su aplicación web es impresionante.

Otra plataforma que podemos adoptar como ambiente de desarrollo para PHP es Laravel Homestead. Homestead es el virtual box oficial para crear aplicaciones utilizando el framework Laravel. Esta máquina virtual posee todo lo necesario para el desarrollo local de aplicaciones web e incluye PHP, HHVM, Nginx, MySQL y más (hasta NodeJS).

Existen un sin número de tutoriales de como instalar Homestead, inclusive unos de los puntos fuertes de usar un producto derivado de Laravel es su extensa y muy elaborada documentación. En este caso vamos a enfocarnos en como configurar Homestead en Windows.

Vamos a definir cuáles son los pre-requisitos. Antes de usar Homestead necesitamos instalar, Virtual Box, Vagrant y Git. Prácticamente vamos a ejecutar el instalador de cada una de las aplicaciones ciegamente instalando todo y aceptando las propiedades y parámetros que ofrecen como estándar. Estas 3 herramientas proveen las bases para poder levantar el vm de Homestead sin problemas.

windows-homestead-01

Una vez terminen las instalaciones vamos a confirmar que las herramientas hayan instalado sin muchos contratiempos. Vamos a utilizar el Git Bash que incluye Git y verifiquemos que hayamos instalado Vagrant escribiendo:

$ vagrant -v

La version que estoy usando es Vagrant 1.7.2. Hagamos la misma verificación para Virtual Box.

$ "C:\Program Files\Oracle\VirtualBox\VBoxManage.exe" -v

Para Virtual Box estaremos usando la versión 4.3.12r93733.

Ahora vamos a seguir las instrucciones que se encuentran en la documentación de Homestead. Lo primero será añadir el box de HomesteadVagrant.

$ vagrant box add laravel/homestead

Este comando te preguntará que tipo de proveedor deseas usar,

1) virtualbox 2) vmware_desktop

Aquí es donde se descarga la máquina virtual a nuestra laptop o PC. Escojamos le opción de virtualbox y dejemos que el archivo baje. En una conexión decente esta acción puede tomar hasta 5 minutos.

Para comprobar que el box ha bajado correctamente lo verificamos listando los box que tenemos configurados en Vagrant. Ahí debe aparecer laravel/homestead.

$ vagrant box list
laravel/homestead       (virtualbox, 0.2.5)
precise32               (virtualbox, 0)
trusty64                (virtualbox, 0)

Ahora vamos a clonar el repositorio de Homesetead.

git clone https://github.com/laravel/homestead.git MyProject

Esto creará un folder MyProject que será el root de nuestros archivos. Vamos a entrar al folder MyProject y de ahí vamos a ejecutar:

bash init.sh

Este script creará el archivo Homestead.yaml en c:\.homestead. El archivo Homestead.yaml contiene la siguiente configuración:

---
ip: "192.168.10.10"
memory: 2048
cpus: 1
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: ~/Code
      to: /home/vagrant/Code

sites:
    - map: homestead.app
      to: /home/vagrant/Code/Laravel/public

databases:
    - homestead

variables:
    - key: APP_ENV
      value: local
...

Aquí es donde cambiaremos un poco las cosas para que adaptarlas a Windows. Lo primero que vamos a modificar es el SSH key. Si has usado Github de seguro ya tienes una de lo contrario obtener una a través de Git Bash es fácil. Solo necesitas copiar el siguiente código en el Git Bash:

ssh-keygen -t rsa -C "tu-nombre@homestead"
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Jaime/.ssh/id_rsa):
...

El lugar en donde guardes la llave es importante porque luego lo vamos a utilizar para configurarlo en nuestro archivo Homestead.yaml. Es importante destacar que el archivo Homestead.yaml utiliza la notación de Unix para definir la localidad de los archivos. El uso de ~/ indica que este será nuestro home o root path. En Windows podemos encontrar nuestro equivalente verificando el path que contiene la variable HOME. Averiguar es muy fácil, vamos a System >> Advanced system settings >> Environment Variables…

windows-homestead-02Una vez aparezca la ventana de Environment Variables buscamos la variable HOME.

windows-homestead-03

En mi caso vemos que el path definido en la variable HOME apunta a C:\Users\Jaime. Por el contrarios, si deseamos utilizar al path completo tenemos que invertir los \ por /. Dicho esto los siguientes comandos son equivalentes:

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa
authorize: C:/Users/Jaime/.ssh/id_rsa.pub

keys:
    - C:/Users/Jaime/.ssh/id_rsa

Por último vamos a cambiar la configuración del parámetro map para apuntar al folder MyProject,

folders:
    - map: ~/Documents/Code/MyProject
      to: /home/vagrant/Code

Una vez hayas configurado por completo el archivo Homestead.yaml puedes ejecutar el comando vagrant up desde el folder MyProject y listo.
Ahora desde tu navegador puedes visitar la dirección de ip http://192.168.10.10 y si ves la siguiente oración, “No input file specified.” es que todo está listo para comenzar el desarrollo o para instalar Laravel.

diseño

Y qué tal si añadimos los test como parte del diseño

Nuevamente Sandijs Ruluks nos presenta un interesante artículo acerca de métodos para hacer test como parte del proceso de diseño, What if testing was a part of the design. Este artículo junto a Positioning in web design y 9 basic principles of responsive web design son referencias definitivas a la hora de hablar sobre diseño web.

tecnología

Tecnologías que definirán el futuro

Si tuviera que explicar que tecnologías transformaran muchas de nuestras actividades en el futuro no tengo duda que puedo tomar de referencia y partir de los temas mencionados en el artículo Mis Apuntes de Singularity University de Eduardo Salles. Eduardo es la persona detrás de Cinismo Ilustrado, una colección de imágenes irreverentes pero geniales sobre cultura  y temas de actualidad. Había visto algunas de sus viñetas navegando por ahí pero me había detenido a indagar en la personalidad del diseñador. Después  de haber leído el artículo creo que le sigo en todo sus medios sociales.

En palabras simples, Singularity University es una entidad que se dedica a educar sobre tecnologías que poseen el potencial de causar un impacto exponencial a millones de personas alrededor del mundo. Singularity University evangeliza sobre tecnologías que pueden construir el futuro a través de nuevas tecnologías.

Eduardo tuvo la oportunidad de participar en una serie de talleres intensivo en Mountain View sobre cómo se está construyendo el futuro a través de nuevas tecnologías exponenciales. El artículo desataca de forma muy creativa a través de doodles los temas a los que Eduardo fue bombardeado a lo largo de los talleres. No pretendo detallar cada tema ni repetir sus notas pero me interesa listar los temas que como mencione al principio son dignos de cualquier conversación nerdista.

  • Inteligencia Artificial
  • Quantified Self
  • Big Data (Forecasting)
  • Internet of Things
  • Singularidad y Abundancia
  • Ingeniería Genética
  • 3D Printing
  • La Revolución Maker
  • Design Thinking
  • Data Science
  • Robótica
  • Innovación Corporativa
  • Tecnologías Exponenciales

El artículo está lleno de referencias a libros que complementan perfectamente los temas tocados en las notas. Lo interesante de haber leído el artículo es que prácticamente en cada tecnología se refleja la necesidad del programador y/o analista. No cabe duda que el éxito para lograr la implementación de la mayoría de las tecnologías destacadas en las notas es bajo el fundamento de la computación y el análisis intenso de la data. El futuro para nosotros los programadores es realmente prometedor.

micro notas

Micro notas #8

Esta micro nota recorre varios temas enfocados a dar pasos sólidos en nuestro desarrollo como programador y al final tocamos un poco de historia, o más bien curiosidades.

Gitly – Gitly.co es un boletín semanal de los proyectos de código abierto más hablados en Github. La peculiaridad de este servicio es que el boletín es filtrado según los lenguajes de programación de tu preferencia. La subscripción es sencilla ya que solo tienes que mencionar cuales son esos lenguajes de programación y proveer tu correo electrónico. Me parece un buen servicio para descubrir nuevos proyectos en los cuales se pueda aportar algo. O simplemente mantenerse al día de lo que está pasando según el o los lenguajes que más domines o llamen tu atención.

A Good User Interface – Todo buen desarrollador debe tener un conocimiento básico sobre user interfaces. Esta referencia es una colección de ideas que han sido probadas y garantizan cierto grado de resultado. La documentación es sumamente clara y sin duda un buen lugar para tomar ideas y retar nuestras propios conceptos relacionados al UX/UI (así es los dos deben andar juntitos).

Getting Git Right – Si además de la excelente documentación disponible en el website de Git necesitaras alguna otra referencia sobre el tema, te comento que Getting Git Right es lo mejor que vas a encontrar. No creo que haya otra guía más completa que esta.

The Scientific 7-Minute Workout – Veo la palabra ciencia junto a rutina de ejercicio físico y no puedo dejar de compartir. El sedentarismo físico que experimentamos aquellos que viven casi detrás de un monitor es de dañino. Siempre ando buscando métodos que puedan ayudar a mejorar la calidad de vida y los tips mencionados en estos artículos son exactamente lo que a veces necesitamos para salir de la rutina. En fin nada mejor que estirarnos y comenzar el día en buena aptitud.

CodeNewbie – Comunidad de programadores y personas que están aprendiendo código. Muy buen recurso para comenzar a empaparse sobre el tema de la programación y el estilo de vida alrededor de esta profesión.

The hamburger icon (☰) – Esto es mas bien una curiosidad que quise compartir. Nunca imagine que el origen de las famosas barras que vemos en cada opción de menú hoy en día tuviera un origen tan remoto y épico. Aunque tengo mis sospechas que originalmente el autor de dicho icon, Norm Cox, pudo haberse inspirado en algo más mistico.

programación

Como usar Git para hacer deploy de nuestro website

No hay duda de las ventajas de un sistema de version control en nuestro flujo de trabajo. Servicios como Github y Bitbucket son eco de cómo ha evolucionado la manera en que escribimos y compartimos código entre colegas. Inclusive si eres un desarrollador solitario estos servicios son de gran ayuda a la hora de crear nuestros proyectos.

De eso se trata precisamente esta nota, vamos a configurar un ambiente de desarrollo en donde podamos utilizar Git para realizar el deployment de nuestro proyecto. Antes de comenzar a presionar teclas a diestra y siniestra vamos a detenernos a pensar en lo que vamos a configurar.

Vamos a crear un repositorio vacío en nuestro web hosting. Luego crearemos un repositorio en nuestro ambiente local y lo sincronizaremos al repositorio remoto. Por último crearemos la lógica para que cada vez que publiquemos un cambio, el mismo se actualice automáticamente en nuestro repositorio principal y a su vez en el folder público de nuestro website. La siguiente gráfica nos presenta un panorama de lo que acabamos de describir.

website-workflow-using-git

Para poder simplificar el proceso hay algunas cosas que vamos a asumir.

  1. Voy asumir que ya tenemos instalado Git y Git Bash en nuestro ambiente local. Git Bash lo vamos a utilizar para realizar los comandos de SSH.
  2. Voy asumir que tenemos acceso a nuestro provedor de hosting a través de SSH. Para este tutorial voy a utilizar Dreamhost como hosting. Antes de proseguir te recomiendo que verifiques y te empapes sobre como accesar tu hosting server usando SSH.
  3. Voy asumir que ya tenemos instalado Git en nuestro hosting server. Aunque para estar 100% seguros vamos a verificarlo.

Vamos a realizar una conexión SSH a nuestro servidor. Para eso vamos a usar el Git Bash.
Normalmente podemos hacer una conexión SSH usando el siguiente comando:

ssh <tu-username>@<tu-domain-name>

Una vez autentiquemos con el hosting server procedamos a verificar si Git está instalado.

$ git --version
git version 1.7.9.5

Si puedes ver el número de versión estamos más que seguro que tenemos instalado Git. De no tenerlo te recomiendo que visites el siguiente tutorial antes de proseguir con los pasos aquí mencionaos.

Vamos a comenzar creando el repositorio en nuestro hosting server. Este repositorio fungirá como repositorio principal. Para tener cierto control sobre los cambios que ocurrirán en este repositorio vamos a utilizar el flag –bare junto al comando git init. Admás, por conveniencia vamos a terminar el nombre del repositorio usando .git.

$ git init --bare website.git

Está instrucción va a devolver el siguiente mensaje:

Initialized empty Git repository in /home/<tu-username>/website.git/

Hemos utilizado website como nombre para el repositorio. O sea que el repositorio se llamará webiste.git. Cabe destacar que este repositorio debe ser creado en el directorio home y no en el public folder. La intención de esto es mantener segura y privada la configuración de nuestro repositorio. Hasta el momento hemos creado un repositorio en el home folder de nuestro hosting.
Para verificar que todo está en orden vamos a entrar a nuestro repositorio y verificar el status.

$ cd website.git/
$ git status

Si vemos la siguiente línea, no te asuste, es lo que debemos ver ya que el repositorio esta vacio y es tipo bare.

fatal: This operation must be run in a work tree

Antes de continuar con nuestro repositorio local vamos a configurar un server-side hook como parte de nuestro repositorio remoto para configurar la actualización de nuestro public-folder. Aquí es donde técnicamente ocurre toda la magia. Los hooks son rutinas que se ejecutan automáticamente cada vez que ocurre un evento particular en el repositorio. A través de estas rutinas podemos extender las funcionalidades de Git y adaptarlas a nuestro ambiente de desarrollo. En este caso vamos a configurar un hook para que cada vez que ocurra un git push a nuestro repositorio remoto se publiquen los cambios al public-folder. Para lograr eso vamos utilizar el siguiente comando:

$ nano > hooks/post-receive

Y escribimos el siguiente script la ventana de nano:

#!/bin/sh
GIT_WORK_TREE=/home/<tu-username>/<tu-dominio.com>/public-folder git checkout -f

Para terminar presionamos Ctrl+X y guardamos el archivo. Ahora aplicamos el siguiente permiso al archivo del script que acabamos de crear:

$ chmod +x hooks/post-receive

Ahora pasamos a trabajar en nuestro repositorio local. Te recomiendo que abras otra ventana de Git Bash para trabajar localmente. Lo primero que vamos hacer es ir a nuestro working folder. En mi caso mi working folder se llama code y se encuentra dentro de Documents.

$ cd /c/users/<tu-username>/Documents/code

Ahora aprovechando que tenemos Git vamos a utiliza la función de git init para crear un proyecto a nuestro folder local. Para este tutorial voy a crear un folder llamado website-project.

$ git init website-project

Atención, si ya tienes un proyecto que deseas utilizar como para este tutorial, lo único que tienes que hacer es utilizar el comando de git init en tu folder de tu proyecto. Por el momento vamos a seguir trabajando dentro del folder website-project.

$ cd website-project

Como estamos usando Git vamos a clonar un repositorio localizado en Github. Vamos a usar el template de HTML 5 Boilerplate como base para nuestro website.

$ git clone https://github.com/h5bp/html5-boilerplate.git

Vamos a mover el código que nos interesa al working folder o sea al folder website-project. Como estamos en el Git Bash hagámoslo usando el siguiente comando:

$ mv html5-boilerplate/dist/* ./

El resto del código que no vamos a utilizar lo vamos a borrar.

$ rm -r -f html5-boilerplate/

Ahora nuestro repositorio local está casi listo para hacer commits. Actualmente nuestros archivos están listos para ser añadidos al version control. Si ejecutamos el comando git status vamos a ver que el siguiente mensaje:

Untracked files:
  (use "git add ..." to include in what will be committed)… etc
        404.html
        apple-touch-icon.png
        browserconfig.xml
        crossdomain.xml
        css/
        doc/
        favicon.ico
        humans.txt
        img/
        index.html
        js/
        robots.txt
        tile-wide.png
        tile.png

nothing added to commit but untracked files present (use "git add" to track)

Vamos bien. Procedamos a añadir los files al version control del repositorio. Para esto vamos a realizar la siguiente instrucción:

$ git add *

Ahora cuando hagamos git status vamos a ver que nuestros files están en la fase staged, o sea listos para commit. Para realizar nuestro commit vamos a utilizar el siguiente comando:

$ git commit -m “Configuración inicial.”

Si revisamos el repositorio usando git status veremos lo siguiente:

On branch master
nothing to commit, working directory clean

Ahora vamos a añadir la conexión de nuestro repositorio remoto al repositorio local. Pasemos a crear la conexión usando el siguiente comando:

$ git remote add <nombre-creativo> ssh://<tu-username>@<tu-domain-name>/home/<tu-username>/website.git

El nombre creativo puede ser algo tan sencillo como deploy. Ya con esta configuración podemos hacer nuestro primer push. Este push será el responsable de sincronizar el repositorio local con el remoto.

$ git push <nombre-creativo> +master:refs/heads/master

Listo!
Ahora cada vez que hagamos un cambio a nuestro projecto lo único que tenemos que hacer es utilizar la instrucción de push usando el nombre que hayamos asignado:

$ git push <nombre-creativo>

Recuerda que antes de hacer el push debe hacer commit del cambio. Una atajo para añadir el cambio y hacer el commit es a través del siguiente comando:

$ git commit -a -m “<descripción-del-commit>”

Esto es todo por el momento. Cabe destacar que el 80% de los problemas que puedas encontrar siguiente el tutorial probablemente sea relacionado a SSH y a la configuración de tu hosting server. Recuerda que para este tutorial se utilizó como hosting provider Dreamhost y es muy probable que tu proveedor tenga otra configuración similiar a la que aquí se mencionó.

Gran parte de este tutorial está inspirado en el trabajo de Abhijit Menon-Sen, Using Git to manage a web site. Si deseas profundizar en el tema de Git te recomiendo la guía Getting Git Right muy elegantemente mantenida por Atlassian que es la compañía detrás de Bitbucket.

diseño

Cuando se mezcla el User Experience con la física

Después de haber estudiado un poco los trabajos de Bret Victor (y digo un poco porque la visión de este señor es muy ambiciosa) sobre el potencial del user experience, encuentro igual de interesante la siguiente presentación de Ralph Thomas, Creating Animations and Interactions with Physical Models. Me parece impresionante la presentación y como utiliza términos como velocidad y momentum (cantidad de movimiento) y las entrelaza con la animación e interacción de elementos que comúnmente vemos en las interfaces de hoy en día. A través del artículo puedes interactuar con varias simulaciones cada una debidamente explicada. Lo mejor de todo es que cada simulación se encuentra disponible para experimentación en su cuenta de Github. Y si eres desarrollador en Java puedes verificar la librería Gravitas que también es de su autoría y utilizó para el juego Letterplex disponible para Android.