Desarrollo de aplicaciones web

Vim el IDE para PHP: Xdebug (parte 4)

2008-10-14T09:43:00.000-07:00

Depurar código es la tarea cotidiana de todo programador y una buena herramienta de depuración es lo que se necesita para hacer este trabajo.

Para depurar código PHP en VIM, simplemente hay que seguir tres pasos:

Configurar el servidor
Configurar VIM
Chequear la conexión entre el servidor y VIM

Configurar el servidor:

Primero lo que debemos hacer es bajar el paquete XAMPP development en su ultima versión.
Lo bajamos desde acá

http://www.apachefriends.org/en/xampp-linux.html

Después lo que hacemos es descomprimirlo en modo consola apuntando a la carpeta /opt

sudo tar -zxvf xampp-linux-devel-1.6.8.tar.gz -C /opt

Ahora vamos a instalar unos paquetes en nuestro sistema que necesitamos para compilar el xdebug:

sudo apt-get install gcc autoconf make automake bison flex g++ libtool re2c

Bajamos Xdebug en su ultima versión desde la página oficial:

http://xdebug.org/install.php

Y procedemos a compilarlo:

tar -zxvf xdebug-2.0.0RC4.tgz
cd xdebug-2.0.0RC4
phpize
./configure --with-php-config=/opt/lampp/bin/php-config --enable-xdebug
make
sudo make install

Ahora vamos a habilitar Xdebug en el php.ini y agregamos las siguientes líneas:

zend_extension="/opt/lampp/lib/php/extensions/no-debug-non-zts-20060613/xdebug.so"
xdebug.remote_enable = 1
xdebug.remote_port = 9000
xdebug.remote_host = localhost

Nota: Para habilitar el Xdebug en php.ini simplemente deben descomentar la línea donde se encuentra el Xdebug.

Ahora vamos a reiniciar XAMPP:

sudo /opt/lampp/lampp restart

Y verificamos que Xdebug se halla instalado correctamente, para eso abrimos en nuestro explorador la dirección:

http://localhost/xampp/phpinfo.php

Buscamos la sección correspondiente a Xdebug:

Configurando VIM:

Debemos verificar que nuestro VIM esté configurado correctamente para trabajar con Xdebug y el plugin para VIM.
Para eso abrimos nuestro VIM y en modo visual tipeamos:

:version

Y verificamos que estén las siguientes características: +python y +signs.
Podría decirte que las veces que he instalado VIM siempre estaban habilitadas estas características, la única excepción es que no esté +python, si es tu caso simplemente debes de instalar el paquete en modo consola:

sudo apt-get install vim-python

Con eso quedaría solucionado.
Ahora bajamos el plugin Xdebug de acá.
Y procedemos a descomprimirlo y guardarlo en la carpeta /home/usuario/.vim/plugin.

Chequeando que todo este correctamente instalado:

Bueno con esto tendríamos configurado nuestro VIM, ahora veremos como depurar un archivo PHP a modo de ejemplo:

Abrimos nuestro archivoPrueba.php en VIM.
Abrimos nuestro navegador web.
En la barra de direcciones tipeamos: localhost/carpeta/archivoPrueba.php
Y agregamos al final: ?XDEBUG_SESSION_START=1.

Sería así:

localhost/carpeta/archivoPrueba.php?XDEBUG_SESSION_START=1

Mientras carga nuestra página, vamos a nuestro VIM y apretamos rápidamente F5.

Aquí vemos nuestro VIM, depurando:

Como podemos ver VIM es una opción muy tentadora a la hora de programar, ya que a parte de ser un excelente editor con muchas características, trae integrado su propio lenguaje para que los usuarios puedan crear scripts para todo tipo de tareas.

NOTA:
Si quieres configurar tu VIM en Windows y no sabes como simplemente mandame un mail y escribiré un tutorial de VIM para la plataforma Windows lo más rápido que pueda.

Vim el IDE para PHP (Parte 3)

2008-10-08T18:45:00.000-07:00

Ya tenemos configurado nuestro VIM, ahora vamos a crear una lista de las funcionalidades extras que desearíamos disponer:

Corrección de sintaxis para PHP.
Chequear la sintaxis de nuestro código con el interprete de PHP.
Estaría bueno ademas que podamos disponer de un explorador de código para encontrar rápidamente nuestras funciones o métodos en caso de una clase.
Autocompletar variables, nombres de funciones y palabras en general.

Y por último un IDE no sería tal, sino dispusiera de un depurador de código.

Antes de comenzar, vamos a crear una carpeta en /home/usuario, llamada .vim
Dentro de esta carpeta vamos a crear dos carpetas mas, llamadas syntax y plugin respectivamente.

Corrección de sintaxis:

Nos descargamos este plugin y guardamos el archivo php.vim en la carpeta syntax.
Veamos un ejemplo de como trabaja:

Cuando encuentra un error en la sintaxis de nuestro código este se marca en rojo como podemos ver, todo esto lo hace dinámicamente mientras vamos escribiendo.

Chequear la sintaxis de nuestro código con el intérprete de PHP:

Descargamos este plugin y guardamos el archivo php_check_syntax.vim en la carpeta plugin.
Si estas siguiendo las entradas anteriores de seguro deberas tener instalado XAMPP, para trabajar en modo local.
Si es asi deberemos editar la ruta de acceso en nuestro plugin para que ejecute el intérprete PHP, sino nos dara un error.
Para eso abrimos el php_check_syntax.vim en VIM y editamos la línea número 14.
Entonces cambiamos esto:

let g:php_check_syntax_cmd='php -l'

Por esto:

let g:php_check_syntax_cmd='/opt/lampp/bin/php -l'

Guardamos el archivo y lo probamos:
Este plugin chequea la sintaxis cuando abrimos y guardamos nuestro código.

En este ejemplo podemos ver que se encontró un error, y nos posiciona en el lugar donde se encuentra.

Explorador de código:

Cuando hay una librería de funciones o simplemente una clase muy extensa, sabemos lo tedioso que puede llegar a ser navegar en ella en busca de errores, modificaciones o correcciones.
Para solucionar esta pérdida de tiempo tenemos un plugin muy útil que lo que hace es leer todo nuestro código, para así generar en una ventana aparte (generalmente en la izquierda) donde nos muestra todas nuestras funciones resumidas; en caso de ser una clase nos muestra las propiedades y métodos que componen a esta.
Para navegar por nuestro código basta hacer click en la función que necesitamos y automáticamente quedamos sobre la línea que andabamos buscando modificar.
Más adelante veremos en una imagen como trabaja, pero ahora vamos a centrarnos en la instalación y configuración:
Para que este plugin funcione necesitamos de una utilidad que funciona tanto en linux como en windows, exuberant ctags.
Para instalar exuberant ctags en Debian (distribución Ubuntu), tenemos que tipear en consola:

sudo apt-get install ctags

Vamos a nuestro escritorio y creamos un lanzador, para hacer esto hacemos click derecho y seleccionamos crear un lanzador.
Este lanzador va a tener como nombre ctags-ex y donde dice comando, simplemente pegamos esta ruta:

/usr/bin/ctags-exuberant

Hecho esto abrimos nuestro explorador de archivos en modo root:

sudo nautilus

Ahora vamos a usr/local/bin y guardamos nuestro lanzador ctags-ex en esta carpeta.

Por último nos descargamos este plugin, al descomprimirlo lo guardamos en la carpeta de plugins.

Para llamar al explorador de clases debemos escribir en modo visual:

:TlistToggle

Mostrandonos una ventana como esta:

Autocompletado de código:

Agregar esta funcionalidad es muy sencillo, simplemente nos descargamos el plugin de aca y lo guardamos en la carpeta plugins, asi de sencillo.
Para usarlo vamos al menú y después en tools seleccionamos Word completion.

La ultima funcionalidad la dejaremos para la proxima entrada, ya que es un poco mas compleja.

Vim el IDE para PHP (Parte 2)

2008-10-08T17:22:00.000-07:00

Ya tenemos el VIM instalado, ahora vamos a configurarlo para que:

Nos muestre los números de línea a la izquierda.
Indentado de código.
Configurarlo para PHP (estandarización de ZEND).
Elegir un esquema de color que nos sea mas agradable a la vista.
Utilize codificación UTF-8 para nuestros archivos.
Y muchas opciones más, que enumerarlas todas sería absurdo.

Bien para eso, simplemente ejecutamos el VIM (acordate que en modo consola solo basta tipear gvim y apretar Enter).
Ahora con el VIM abierto simplemente pega estas líneas:

" ------ Global Configuration ------
" Line Number
set number

" Autoindent
set autoindent

" Indent for PHP
set shiftwidth=4
set softtabstop=4

" Syntax activate
syn on

" Type syntax
set syn=php

" Color
color desert

" Write contents of the file, if it has been modified, on buffer exit
set autowrite

" Allow backspacing over everything
set backspace=indent,eol,start

" Insert mode completion options
set completeopt=menu,longest,preview

" Use UTF-8 as the default buffer encoding
set enc=utf-8

" Remember up to 100 'colon' commmands and search patterns
set history=100

" Enable incremental search
set incsearch

" Always show status line, even for one window
set laststatus=2

" Jump to matching bracket for 2/10th of a second (works with showmatch)
set matchtime=2

" Don't highlight results of a search
set nohlsearch

" Enable CTRL-A/CTRL-X to work on octal and hex numbers, as well as characters
set nrformats=octal,hex,alpha

" Use F10 to toggle 'paste' mode
set pastetoggle=<F10>

" Show line, column number, and relative position within a file in the status line
set ruler

" Scroll when cursor gets within 3 characters of top/bottom edge
set scrolloff=3

" Round indent to multiple of 'shiftwidth' for > and < commands
set shiftround

" Show (partial) commands (or size of selection in Visual mode) in the status line
set showcmd

" When a bracket is inserted, briefly jump to a matching one
set showmatch

" Don't request terminal version string (for xterm)
set t_RV=

" Write swap file to disk after every 50 characters
set updatecount=50

" Remember things between sessions
" '20 - remember marks for 20 previous files
" \"50 - save 50 lines for each register
" :20 - remember 20 items in command-line history
" % - remember the buffer list (if vim started without a file arg)
" n - set name of viminfo file
set viminfo='20,\"50,:20,%,n~/.viminfo

" Use menu to show command-line completion (in 'full' case)
set wildmenu

" Set command-line completion mode:
" - on first <Tab>, when more than one match, list all matches and complete
" the longest common string
" - on second <Tab>, complete the next full match and show menu
set wildmode=list:longest,full

" Go back to the position the cursor was on the last time this file was edited
au BufReadPost * if line("'\"") > 0 && line("'\"") <= line("$")|execute("normal `\"")|endif

" netRW: Open files in a split window
let g:netrw_browse_split = 1

Y lo guardamos en /home/usuario/ con el nombre y extensión: .vimrc
Si te da error o tenes algun problema, simplemente descargate este archivo desde aca.
Renómbralo y guardalo como se explico antes.

Esta es mi configuración, si deseas, estas libre de modificarla a gusto, siempre y cuando sepas lo que haces.

Por último asi se debería ver nuestro mejorado VIM editando un archivo PHP:

Ya nos queda poco para disfrutar de un poderoso IDE, en la próxima entrada veremos como configurar VIM para explorar clases, autocompletado de código, depuración y mucho mas!

Vim el IDE para PHP (Parte 1)

2008-10-08T16:16:00.000-07:00

Vim es un editor con características casi únicas. Su disponibilidad en muchos sistemas operativos y la cantidad de plugins que son desarrollados por la comunidad, hace que Vim sea personalizable casi en su totalidad.

Todo esto nos hace pensar que todas estas ventajas pueden ser beneficiosas para un desarrollador de aplicaciones web y eso es lo que vamos a tratar de comprobar en esta entrada.

Antes de empezar quiero aclarar que lo que voy a exponer acá, solo es para el sistema operativo Linux, version Debian. Si estas interesado en como instalar y configurar Vim en Microsoft Windows, solo tienes que escribirme y con gusto elaboraré un tutorial para este sistema.

Vamos a instalar la version grafica de este editor. Para eso simplemente abrimos la consola y tipeamos lo siguiente:

sudo apt-get update

Con esto actualizamos nuestro repositorio de paquetes de software, por supuesto este paso se puede omitir.
Ahora si instalamos la version gráfica de vim, que se llama gvim

sudo apt-get install vim-gtk vim-gnome vim-python

Vamos a poner bajo lupa este comando:
Primero lo que hacemos es indicar que nos instale la version grafica gtk de vim con vim-gtk, siguiente paso, lo que hacemos es indicar que nos instale para el entorno grafico gnome, vim-gnome, y por ultimo la extension que hace que se comunique Vim con python, vim-python.

Terminada la instalacion tipeamos gvim en la consola para que se ejecute el editor.
El resultado es:

En la segunda parte aprenderemos como configurarlo, para despues instalar adecuadamente los plugins necesarios transformadolo en un IDE muy poderoso.

Instalando NetBeans Early Access for PHP en linux (version Sopa Instantanea)

2008-10-07T21:08:00.000-07:00

Instalar NetBeans Early Access for PHP en linux no es muy dificil pero si no lo hacemos bien, nos puede dar varios dolores de cabeza.

INSTALACION

NetBeans Early Access for PHP usa JDK para trabajar, entonces vamos a instalarlo:

Bajamos la ultima version del JDK aca.

Ejecutamos la consola, nos posicionamos en la carpeta donde esta el instalador y convertimos el archivo que bajamos en auto-ejecutable:

chmod +x jdk-6u10-rc2-bin-b32-linux-i586-12_sep_2008.bin

Ejecutamos el binario auto-ejecutable que recien creamos, nos aparecera en pantalla la licencia, despues de haberla leido aceptamos el contrato.

./jdk-6u10-rc2-bin-b32-linux-i586-12_sep_2008.bin

Movemos la carpeta jdk1.6.0_10

sudo mv jdk1.6.0_10 /usr/java

Pronto! ya tenemos nuestro JDK instalado. Ahora vamos a instalar NetBeans:

Bajamos la ultima version de NetBeans Early Access for PHP de aca

Nos posicionamos en la carpeta donde esta el instalador (archivo .sh) y convertimos el archivo que bajamos en auto-ejecutable:

chmod +x ./netbeans-6.1-ea-php-linux.sh

Ejecutamos el auto-ejecutable: ./netbeans-6.1-ea-php-linux.sh

Elegimos la carpeta donde lo queremos instalar
Seleccionamos la carpeta donde esta instalado nuestro JDK (ver arriba)
Terminamos la instalacion

Y listo!, nuestra sopa esta lista para servir caliente ;-)

La estación de trabajo definitiva (Parte 2 final)

2008-10-07T19:19:00.000-07:00

En la primera parte, habiamos instalado nuestro servidor local. Ahora vamos a estudiar las posibles herramientas que podríamos necesitar como desarrollador web:

Necesitamos una herramienta CASE para diseñar nuestras aplicaciones, en linux las mas populares son: Umbrello y BoUML. La primera presenta una interfaz mas amigable y la segunda se puede personalizar casi completamente. Quedara a criterio de cada uno escojer la que le parezca mas cómoda. Para instalar algunas de estas herramientas (en Debian) simplemente basta tipear en modo consola: sudo apt-get install umbrello para instalar Umbrello y sudo apt-get install BOUML para instalar BOUML respectivamente.
Necesitamos ahora un IDE o un editor para programar nuestro codigo. Esta etapa es una de las mas discutidas entre los programadores. La elección de nuestro IDE va a determinar el triunfo o el fracaso de nuestros proyectos. Como dijimos, nuestra estación de trabajo es nuestra aliada, por ende nuestro IDE también. En internet podemos encontrar multitudes de IDEs para el desarrollo web. La elección dependerá de nuestras habilidades y/o conocimientos. Los que mas se destacan son: Zend Studio, Eclipse PDT, NetBeans. Como siempre quedará a criterio de cada uno el IDE que mas le convenga. Pero antes de que te decidas, te recomendaría que sigas leyendo. Ahora bien hay un editor muy potente que trabaja con muchos lenguajes de programacion y que tiene multitud de plugins, transformandose en un IDE muy poderoso. Este editor se llama VIM, mas adelante le dedicaré varias entradas en este blog, donde lo configuraremos para que: nos corrija automáticamente nuestro código; nos autocomplete funciones, variables, metodos; nos depure nuestro código y mucho mas.
Vamos a necesitar tambien un explorador web, los mas populares son Internet Explorer ,Firefox (este cuenta con multitud de complementos especifícamente para el desarrollo web).
Por ultimo no nos vendría mal algun editor gráfico y/o editor vectorial. El gimp es un excelente editor gráfico. Para la edición vectorial tenemos Inkscape y también xaraXtreme. Para instalar estas tres herramientas hacemos lo mismo que hicimos anteriormente: sudo apt-get install gimp inkscape xaraxtreme

Boila!, tenemos nuestra estación de trabajo profesional sobre linux, pronta para enfrentar cualquier tipo de proyecto.

NOTA:
Para windows hay también muy buenas opciones (herramientas CASE, IDEs, editores gráficos), si quieres que explique mas sobre esta plataforma, simplemente escríbeme y elaboraré un tutorial lo mas pronto posible.

La estación de trabajo definitiva (Parte 1)

2008-10-07T18:05:00.000-07:00

Antes de ponernos a desarrollar nuestras aplicaciones web, tenemos que configurar nuestro equipo de la forma más conveniente.

Como bien se sabe cada programador es único y por eso nuestra estación de trabajo también lo es.

Empecemos con lo básico, ¿Que es una estación de trabajo?
Resumiendo rápidamente podemos decir que una estación de trabajo es una computadora que nos facilita ciertos accesos (como por ejemplo: nos permite acceder a un servidor) y esta optimizada para hacer algo.

Ahora que sabemos lo que significa, tenemos una idea de lo que necesitaremos para tener nuestra propia estación de trabajo:

Primero necesitamos un sistema operativo, en mi caso voy a usar Linux dentro de Linux tenemos varias distribuciones. Yo uso Ubuntu, pero es solo por cuestión de gusto, el lector puede escojer el sistema operativo que le parezca más conveniente o agradable.
Lo segundo que necesitamos es un servidor, trabajar con un servidor remoto no es una tarea muy rápida que digamos, por eso necesitamos un servidor local. Para instalar un servidor local en nuestro equipo tenemos varias opciones, la mas completa de seguro es XAMPP este servidor es multiplataforma y tiene muchas herramientas integradas. La instalación es muy sencilla en linux, simplemente basta con seguir los pasos en su página de instalación.

Listo ya tenemos nuestro servidor web!

En la segunda parte vamos a estudiar y configurar las herramientas necesarias para poder empezar a diseñar y programar nuestras aplicaciones web.