Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
http://www.welinux.cl/wordpress/alawelinux/
Welinux Blog
El dicho hay muchas formas de pelar un gato nos ha motivado a mostrar como pelamos el gato del
desarrollo web con Play.
Llevamos un ao desarrollando con play usando un conjunto especfico de herramientas de Software
Libre. En este tutorial aprenderas a instalar y utilizar este entorno de desarrollo:
Lenguaje de programacin Java, framework de desarrollo web Play, entorno de desarrollo integrado:
Eclipse, base de datos PostgreSQL, control de versiones con Mercurial, gestin de incidencias con
Redmine, y sistema operativo Linux distribucin Ubuntu, la ltima edicin hasta este momento 12.04
LTS.
Copiar trozos de cdigo: Para copiar los trozos de cdigo, haz doble click en ellos, presiona el botn derecho del mouse y
selecciona Copiar. El shortcut/atajo de teclado para pegar luego en el terminal es Shift + Control + V.
Java 6
Abrimos un terminal e instalamos el openjdk de java con:
1
Play 1.2.5
Podemos instalar en nuestra carpeta $HOME, o para todo el sistema, haremos lo segundo. En general los comandos de play los
ejecutaremos en un terminal. Trabajaramos en la carpeta Descargas, abrir un terminal y ejecutar:
1
1 de 13
cd ~/Descargas
12/03/14 09:29
http://www.welinux.cl/wordpress/alawelinux/
La colita de chancho: ~, se reemplaza por tu carpeta home, de este modo el cdigo que estamos mostrando queda ms
genrico, este smbolo normalmente sale con Alt + 4 en los teclados espaoles, tu carpeta home tambin est disponible en la
variable de entorno $HOME.
Recomendamos colocar la aplicacin Terminal en el lanzador de Unity en la parte superior.
Descargamos el framework, podemos descargarlo con firefox o ejecutar lo siguiente desde la lnea de comandos:
1
wget http://download.playframework.org/releases/play1.2.5.zip
Descomprimimos y movemos al lugar por defecto para los programas agregados manualmente al sistema: /usr/local en
nuestro computador:
1
2
unzip play1.2.5.zip
sudo mv play1.2.5 /usr/local/
Configuramos el acceso al framework travs de un enlace simblico para manejar de manera ms comoda sus actualizaciones:
1
Creamos un enlace al ejecutable play que dejamos en /usr/local/bin, de este modo el comando play quedar disponible
inmediatamente desde el terminal:
1
cd ~/Descargas
wget http://download.playframework.org/releases/play1.2.5.zip
unzip play1.2.5.zip
sudo mv play1.2.5 /usr/local/
sudo ln s /usr/local/play1.2.5/ /usr/local/play
sudo ln s /usr/local/play/play /usr/local/bin/play
Eclipse Indigo
Ir al enlace de descarga de eclise indigo http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/indigosr2, en
la barra de la derecha titulada Download Links y descargar la versin que corresponda de 32 o 64 bits Linux. Si no ha quedado en
la carpeta $HOME/Descargas, muvelo ah, luego lo descomprimimos desde la linea de comandos:
1
2
cd ~/Descargas
tar xzvf eclipsejeeindigoSR2linuxgtkx86_64.tar.gz
Creamos un archivo para que podamos ejecutar eclipse desde el lanzador de Unity.
1
2
3
4
5
6
7
8
9
10
11
12
2 de 13
mkdir p ~/.local/share/applications
cat<<EOF>~/.local/share/applications/eclipse.desktop
[Desktop Entry]
Type=Application
Name=Eclipse
Comment=Eclipse Integrated Development Environment
Icon=$HOME/Descargas/eclipse/icon.xpm
Exec=$HOME/Descargas/eclipse/eclipse
Terminal=false
Categories=Development;IDE;Java
EOF
12/03/14 09:29
http://www.welinux.cl/wordpress/alawelinux/
Copiar el lanzador recin creado a la barra de unity: Abre la carpeta donde ha quedado el lanzador con el siguiente comando:
1
nautilus ~/.local/share/applications/
cd $HOME/workspace
Creamos el proyecto play, copia y pega el siguiente comando en el terminal y presiona Enter cuando te pida confirmar el nombre
del proyecto:
1
Anda a firefox e ingresa a http://localhost:9000, luego ve al terminal presiona Control + C para finalizar la aplicacin.
El comando play run levanta el play y ejecuta tu proyecto desde el terminal, por eso lo pudimos terminar con Control + C, si
usas play start en vez de play run, el programa quedar ejecutando en el background como servicio y lo puedes monitorear
mirando el archivo logs/system.out, en este caso para finalizarlo debes usar play stop desde la carpeta del proyecto. Esta
ltima es la forma ms comn de ejecutarlo en produccin.
Seguimos, nos cambiamos a la carpeta del proyecto recin creada:
1
cd agenda
La codificacin de caracteres de la respuestas es dinmica en play y en las plantillas html, donde debe ir el encoding play ha
dejado una variable, el problema es que los editores HTML de eclipse tienen problemas cuando ven este valor, por tanto la
dejamos fija en UTF-8:
1
3 de 13
12/03/14 09:29
http://www.welinux.cl/wordpress/alawelinux/
Creamos el archivo de ignore para Mercurial .hgignore apropiado para proyectos play usando here documents, tambin lo
pueden hacer con cualquier editor:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
cat<<EOF>.hgignore
^modules
^tmp
^precompiled
^testresult
^logs
^eclipse
^data
.*\.log$
\.classpath$
\.project$
.*\.pyc$
.*\.orig$
.*\.swp$
EOF
Configuracin bsica de mercurial, archivo .hgrc, copia el siguiente cdigo y luego abre el programa gedit (que te recomendamos
agregar a tu barra de Unity), pgalo ah, y modificalo para colocar tu nombre y correo electrnico, luego lo copias usando Control
+ A y luego Control + C, luego lo pegas en el terminal.
1
2
3
4
cat<<EOF>~/.hgrc
[ui]
username = Hans
EOF
hg init
hg add .
hg commit m'Inicializacin del repo'
Mercurial al ser un DVCS (Sistema de control de versiones distribuido) tiene la Copia de Trabajo y el Repositorio siempre juntos, a
diferencia de subversion (centralizado) donde siempre haba un slo repositorio y muchas copias de trabajo. El comando init
convierte la carpeta actual en un repositorio mercurial vacio, a nivel de sistema de archivos, crea la carpeta .hg que representa el
Repositorio Mercurial.
Con el comando add colocamos toda el contenido de la carpeta actual y sus hijos en control de versiones.
Puedes visualizar siempre el estado de la copia de trabajo actual con hg status. Puedes revisar el log de todas las revisiones con
hg log.
No se crea una nueva revisin hasta que no haces un commit, que representa la unidad de modificacin de datos, de gestin.
Eclipsificar
Eclipsificamos el proyecto play, esto hace que eclipse pueda importar y trabajar en forma nativa con nuestro proyecto play. En
trminos concretos crea una carpeta llamada eclipse y coloca entro otros archivos el .project y .settings de eclipse. Luego
veremos que la carpeta .eclipse debe dejarse fuera de control de versiones por contener rutas absolutas de nuestro computador.
Si usas java 7 es necesario hacer el siguiente ajuste una (slo una vez por computador) para agregar un parmetro a los archivos
que genera play.
4 de 13
12/03/14 09:29
http://www.welinux.cl/wordpress/alawelinux/
El comando que eclipsifica el proyecto es el siguiente, recuerda repetirlo cada vez que modifiquemos las dependencias del
proyecto.
1
play ec
Ejecutar el proyecto
Activa la vista Navigator con un click. Dentro del proyecto, la cuarta carpeta se llama eclipse, en ella estan los archivos
de comandos para ejecutar y depurar nuestra aplicacin sin salir del eclipse, por el momento nos interesan dos archivos uno
para ejecutar el proyecto desde dentro de eclipse llamado: agenda.launch y otro para conectarle el debugger: Connect JPDA to
agenda.launch, ojo que el debugger no levanta el proyecto, si el proyecto no est en ejecucin y deseas debugear, debes
levantarlo primero.
Haz click con el botn derecho del mouse en el archivo agenda.launch y elige la opcin Run As > agenda con esto el proyecto
comenzar su ejecucin. Para debugear debes hacer click con el botn derecho en Connect JPDA to agenda.launch y
seleccionar Debug as > Connect JPDA to agenda.
Configurar PostgreSQL
Para ser ordenado hay que crear para cada proyecto un usuario en el sistema operativo y en la base de datos; para postgreSQL,
recomendamos dejar el usuario postgres slo para administrar el cluster.
Crear usuario en el sistema operativo para el proyecto:
5 de 13
12/03/14 09:29
http://www.welinux.cl/wordpress/alawelinux/
Instalar postgresql.
1
Crear usuario agenda que ser el dueo de la base de datos, cuando pida la password para efectos de pruebas colocar 123.
1
La idea es que todo el trabajo que deban hacer con la base de datos lo realizan conectandose en el terminal con esa cuenta
haciendo sudo su - agenda.
Modificar application.conf para que play use la base de datos que acabamos de crear.
1
2
cd $HOME/workspace/agenda
echo "db=postgres://agenda:123@localhost/agenda" >> conf/application.conf
(avanzado, opcional)
Como corresponde en la actualidad, play usa el estndar de persistencia de java JPA, los diseadores de play han decidido utilizar
Hibernate como proveedor de persistencia. Por defecto el adaptador de PostgreSQL de Hibernate crear una sla secuencia para
toda la base de datos, nos parece mejor tener una secuencia por cada tabla, por lo tanto estamos usando el siguiente adaptador
de postgreSQL ligeramente modificado (creado por Burt).
En la vista Project Explorer (normalmente a la izquierda), hacer click con el botn derecho sobre app, luego seleccionar New
> Package luego tipear utils como nombre del nuevo paquete y presionar Finish.
En el package utils recin creado haz click con el botn derecho del mouse, elige en el menu New > Class dale el nombre
TableNameSequencePostgresDialect, y presiona Finish.
Haz doble click en el cdigo siguiente, presiona el botn derecho del mouse y selecciona Copiar. Luego haz doble click en eclipse
en la clase TableNameSequencePostgresDialect recin creada y presiona Control + A para seleccionar todo su contenido, y
luego haz Control + V para reemplazar todo el cdigo de la clase con lo que acabamos de copiar.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
6 de 13
package utils;
import java.util.Properties;
import
import
import
import
import
org.hibernate.dialect.Dialect;
org.hibernate.dialect.PostgreSQLDialect;
org.hibernate.id.PersistentIdentifierGenerator;
org.hibernate.id.SequenceGenerator;
org.hibernate.type.Type;
/**
* Creates a sequence per table instead of the default behavior of one sequence.
*
* From <a href=
* 'http://www.hibernate.org/296.html'>http://www.hibernate.org/296.html</a>
*
* @author Burt
*/
public class TableNameSequencePostgresDialect extends PostgreSQLDialect {
12/03/14 09:29
http://www.welinux.cl/wordpress/alawelinux/
/**
* Get the native identifier generator class.
*
* @return TableNameSequenceGenerator.
*/
@Override
public Class<?> getNativeIdentifierGeneratorClass() {
return TableNameSequenceGenerator.class;
}
/**
* Creates a sequence per table instead of the default behavior of one
* sequence.
*/
public static class TableNameSequenceGenerator extends SequenceGenerator {
/**
* {@inheritDoc} If the parameters do not contain a
* {@link SequenceGenerator#SEQUENCE} name, we assign one based on the
* table name.
*/
@Override
public void configure(final Type type, final Properties params,
final Dialect dialect) {
if (params.getProperty(SEQUENCE) == null
|| params.getProperty(SEQUENCE).length() == 0) {
String tableName = params
.getProperty(PersistentIdentifierGenerator.TABLE);
if (tableName != null) {
params.setProperty(SEQUENCE, "seq_" + tableName);
}
}
super.configure(type, params, dialect);
}
}
}
Desde el terminal ejecuta el siguiente comando, que modifica la configuracin de play para que hibernate utilice el Adaptador
que acabamos de crear:
1
cp /usr/local/play/support/eclipse/org.playframework.playclipse_0.7.0.jar ~/Descargas/eclipse/dropins/
Luego reiniciar eclipse con File > Restart y ya tendremos los botones mencionados.
7 de 13
12/03/14 09:29
http://www.welinux.cl/wordpress/alawelinux/
Todo el html dinmico en play va en forma de templates o tags bajo la carpeta app/views. El punto de entrada a play esta
manejado por las rutas, que finalmente te envan a un mtodo esttico (llamado Action) definido en un Controller. Al entrar al
puerto 9000 estamos viendo la ejecucin del action index en el controller Application, lo explicado anteriormente se ejemplifica
observando el cdigo del controller Application ubicado en app/controllers/Application.java que play ha creado:
1
2
3
4
5
6
7
8
9
10
11
package controllers;
import play.mvc.Controller;
public class Application extends Controller {
public static void index() {
render();
}
}
El template que se renderea se puede pasar al mtodo render, pero por defecto busca en la carpeta views/ControllerName en
este caso views/Application el archivo llamado igual que el mtodo, pero con extensin html, en este caso el metodo es index,
por tanto el template a usar es index.html.
En eclipse hay dos shortcuts infaltables que levantan un live search de bsqueda, el Shift + Control +T para buscar Tipos y Clases
Java, y Shift + Control + R para buscar cualquier recurso archivo html, javascript, etc.
Hello World
y presiona Control + S o haz click en el botn del diskette para salvar. Luego anda al navegador y recarga la pgina
http://localhost:9000.
Captura de Parmetros
8 de 13
12/03/14 09:29
http://www.welinux.cl/wordpress/alawelinux/
Como es clsico en el Hello World, el primer ajuste es para para que diga Hello Juan, Hello Pedro, etc; pasaremos un parmetro
llamado nombre directamente en la URL, y veremos como capturarlo y mostrarlo en el template. Copia la siguiente direccin en
tu navegador:
http://localhost:9000/application/index?nombre=Player.
La pgina sigue mostrando Hello World, claro, para capturar un parmetro lo debemos declarar como argumento del Action,
Activa el Project Explorer y haz doble click en la clase app/controllers/Application.java, cambia la declaracin del Action por la
siguiente:
1
Luego para que el template lo reciba debemos pasarlo como argumento al mtodo render:
1
render(nombre);
La clase Application queda de la siguiente manera, puedes copiar este codigo y reemplazar todo el cdigo de Application.java.
1
2
3
4
5
6
7
8
9
10
11
package controllers;
import play.mvc.Controller;
public class Application extends Controller {
public static void index(String nombre) {
render(nombre);
}
}
Hello ${nombre}
.. y recargamos la pgina http://localhost:9000/application/index?nombre=Player, para ver que ahora dice Hello Player.
Si mantienen una sesin de terminal como usuario agenda basta que ejecuten psql -c create schema agenda;. Si estas dentro
del interprete de comandos de postgres psql, bastara con ejecutar create schema agenda;.
JPA/Hibernate no crea automticamente los esquemas en la base de datos, hay que hacerlo manualmente como acabamos de
ver con la instruccin create schema.
9 de 13
12/03/14 09:29
http://www.welinux.cl/wordpress/alawelinux/
Copia y pega lo siguiente en la clase Galeria, recuerda antes de pegar seleccionar todo el cdigo con Shift + Control + A:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
package models.fotos;
import java.util.List;
import javax.persistence.*;
import play.db.jpa.*;
@Entity
@Table(schema = "fotos")
public class Galeria extends Model {
@OneToMany(cascade = CascadeType.ALL, mappedBy = "galeria")
public List fotos;
}
Con el editor de la clase Galeria an activo aprovechamos de introducir dos shortcuts fundamentales. Ejecuta Shift + Control + F
para formatear el cdigo, y Shift + Control + O para organizar los imports. Luego copia y pega lo siguiente en la clase Foto:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package models.fotos;
import javax.persistence.Entity;
import javax.persistence.ManyToOne;
import javax.persistence.Table;
import play.db.jpa.Blob;
import play.db.jpa.Model;
@Entity
@Table(schema = "fotos")
public class Foto extends Model {
public String descripcion;
public Blob image;
@ManyToOne
public Galeria galeria;
}
No vamos a hacer un tutorial del API de persistencia de Java JPA, que debern estudiar por separado, pero destaquemos la
anotacin:
1
@Table(schema = "fotos")
Que permite indicar en que esquema de la base de datos se crear la tabla asociada a esta clase.
En este caso estamos viendo una composicin, Foto est amarrada a Galera, la expresin de esto es el atributo mappedBy del
10 de 13
12/03/14 09:29
http://www.welinux.cl/wordpress/alawelinux/
@OneToMany de galera y la existencia del @ManyToOne en Foto, hay slo dos tablas en la base de datos, no se ha creado una
tabla para la asociacin.
package models.fotos;
import java.util.List;
import
import
import
import
javax.persistence.CascadeType;
javax.persistence.Entity;
javax.persistence.OneToMany;
javax.persistence.Table;
import play.db.jpa.Model;
@Entity
@Table(schema = "fotos")
public class Galeria extends Model {
@OneToMany
@JoinTable(schema = "fotos")
public List<Foto> fotos;
}
package models.fotos;
import javax.persistence.Entity;
import javax.persistence.ManyToOne;
import javax.persistence.Table;
import play.db.jpa.Blob;
import play.db.jpa.Model;
@Entity
@Table(schema = "fotos")
public class Foto extends Model {
public String descripcion;
public Blob image;
}
Recomendamos experimentar dropeando y creando el esquema de la base de datos, y ejecutando nuevamente el servidor play,
para luego explorar con alguna herramienta como SQLPower o SQLEonardo, las distintas formas en que las antotaciones de JPA
impactan en la creacin de las tablas.
hg status
Los archivos que salen con ? al principio es porque no estaban versionados, mercurial maneja las modificaciones en forma
automatica pero los nuevos archivos hay que agregarlos con add y luego comitear todo.
11 de 13
12/03/14 09:29
http://www.welinux.cl/wordpress/alawelinux/
hg add *
hg commit m"Primeros cambios"
Supongamos que estamos en el servidor de produccin, ya le han colocado un id a la mquina de produccin usando play id
prod, y que han configurado los parmetros en conf/application.conf, prefijando con %prod. las variables que cambian en
produccin. Supongamos tambin que el puerto sigue siendo el 9000, y que el servidor apache es compartido por varios hosts
virtuales y por tanto desean ejecutar bajo una subcarpeta de apache ej http://www.miservidor.com/agenda/. Entonces
debemos agregar las siguientes claves en application.conf:
1
2
%prod.application.mode=prod
%prod.http.path=/agenda
Modificar configuracn de apache, dentro de la definicin del host virtual por defecto de apache /etc/apache2/sites-enabled
/000-default y antes de cerrar la etiqueta VirtualHost colocar.
1
2
3
4
5
6
7
ProxyPreserveHost On
<Location /agenda>
Allow from all
ProxyPass http://localhost:9000/agenda retry=0
ProxyPassReverse http://localhost:9000/agenda
</Location>
cd /var/www/playapps/agenda
play stop; play start
sudo /etc/init.d/apache2 restart
Felicitaciones,
Haz completado el tutorial, te invitamos a realizar el tutorial oficial de play en http://playdoces.appspot.com/documentation/1.2.4
/guide1. En Yabe, el tutorial que vas a realizar hay una Clase llamada User, User es una palabra reservada de postgreSQL y de
otros motores de bases de datos, para que Hibernate cree correctamente la tabla debemos agregar una anotacin @Table con
comillas invertidas en el nombre a la declaracin; debe quedar as:
1
2
3
12 de 13
@Entity
@Table(name = "`user`")
public class User extends Model {
12/03/14 09:29
http://www.welinux.cl/wordpress/alawelinux/
....
}
Nuestra empresa promociona el software libre, ofrecemos charlas y presentaciones gratuitas a las instituciones de
educacin, y cursos de capacitacin y transferencia tecnolgica a empresas.
Preparado por Hans Poo, hans@welinux.cl, Santiago de Chile, Septiembre de 2012.
Juan Almendras O.
22 octubre, 2012 at 18:07
Felicitaciones por el trabajo, sin duda un gran aporte al proyecto mundial de software libre!
Chand
3 diciembre, 2012 at 9:14
Good Work !!
13 de 13
12/03/14 09:29