2. @mordonez_me
Marco Ordoñez
Apasionado de las nuevas tecnologías.
Usuario de las tecnologías de Scala desde hace ~3 años.
Fundador de la empresa Evolbit (www.teamevolbit.com).
Promotor del uso de los principios reactivos en el desarrollo de Software.
4. Perú users group
Play, creación y estructura del proyecto
Para crear una nueva aplicación Play ejecutamos el comando “activator new”, para este ejemplo
seleccionaremos la opción 6 (play-scala) para crear un proyecto Play basado en Scala.
5. Perú users group
Play, creación y estructura del proyecto
Una vez creado el proyecto podemos ver la estructura básica del mismo.
app: Todos el código fuente relacionado al proyecto
app/controllers: Todos los controladores de la aplicación
app/views: Vistas (html)
conf: Archivos de configuración del proyecto
project: Archivos de configuración, por ejemplo versión de
play, sbt, plugins.
public: Todos los archivos estáticos
test: Archivos de tests
7. Perú users group
Play, conociendo los controladores
En la forma mas básica un controlador es definido como se ve a continuación.
Ya que Play es un framework asíncrono por defecto, el bloque de código dentro Action es una
función anónima que se llamará internamente y se envolverá en un Future.
8. Perú users group
Play, conociendo los controladores
Todos los controladores se definen como clases y deben heredar del trait Controller
Cada metodo del controller que devuelva un Action está preparado para recibir un request y
puede ser declarado en nuestro archivo de rutas (conf/routes)
Con el valor Ok podemos crear un result con código http 200.
views.html.index es una plantilla en el paquete views. Todas las plantillas son convertidas a funciones, por esa razón se les
puede llamar como una función pasando parámetros.
10. Perú users group
Play, conociendo las vistas
Las vistas son plantillas html que son convertidas a funciones. Se pueden agregar parámetros a
las plantillas para enviar datos desde el controlador.
11. Perú users group
Play, conociendo las vistas
Las vistas pueden incluir otras vistas solo incluyéndolas en su contenido. Se utiliza @ para
escribir código en las plantillas.
main es otra plantilla que se encuentra en el mismo paquete (views) y que recibe dos valores, el
primero es el titulo como String y el segundo es el contenido como Html. La imagen que vimos
en la lamina anterior es la plantilla main.
13. Perú users group
Play, integrando reactive mongo
Reactive mongo es un driver para MongoDB, para integrarlo en Play utilizaríamos la librería creada
para Play. Para eso agregamos en nuestro archivo build.sbt la dependencia y agregamos el módulo
a nuestro archivo de configuración.
libraryDependencies ++= Seq(
"org.reactivemongo" %% "play2-reactivemongo" % "0.11.2.play24")
Recargar la aplicación (reload) para descargar la dependencia.
Instalando la librería
14. Perú users group
Play, integrando reactive mongo
Antes de usar la librería debemos configurar los datos de conexión, para eso agregaremos en el
archivo application.conf los datos necesarios para la conexión.
mongodb.uri = “mongodb://localhost:27017/play-reactive-mongo“
Configurando la librería
16. Perú users group
Creando una página de traducción de texto
Crearemos una clase que serializará a BSON automáticamente, solo necesitamos tener un
serializador implícito de nuestra clase a JSON.
Creando el modelo para guardar las búsquedas
17. Perú users group
Creando una página de traducción de texto
Primero importaremos todas las clases necesarias para ReactiveMongo, WS, nuestro modelo y la
librería de JSON de Play.
Creando el controlador de servicio de traducción
18. Perú users group
Creando una página de traducción de texto
Luego inyectaremos las respectivas dependencias a nuestro controladores y lo extenderemos con
los traits necesarios.
Creando el controlador de servicio de traducción
Tambien incluiremos una función que nos devuelva la colección de mongo que queremos usar.
19. Perú users group
Creando una página de traducción de texto
Ahora crearemos el método para el servicio de traducción, la analizaremos por partes.
Creando el controlador de servicio de traducción
url: /translate
El metodo recibirá datos en formato json, por esa razón se debe agregar el parser (parse.json).
Al recibir el request queremos saber si es un json válido, para eso usamos validate y fold para obtener el resultado
20. Perú users group
Creando una página de traducción de texto
Si el json es válido obtendremos el path “text” y nuevamente con validate nos aseguramos que el
dato sea correcto.
Creando el controlador de servicio de traducción
21. Perú users group
Creando una página de traducción de texto
Si el path existe y es String procederemos a realizar el request al servicio de traducción.
Creando el controlador de servicio de traducción
Cuando el servicio retorne los datos accederemos en el json al key del valor traducido, como es un array nos devuelve un ListBuffer
que transformaremos a List y obtendremos opcionalmente el head (headOption).
Si el servicio falla devolveremos un None que luego podremos identificar más adelante.
22. Perú users group
Creando una página de traducción de texto
Si el path existe y es String procederemos a realizar el request al servicio de traducción.
Creando el controlador de servicio de traducción
Validamos si el texto devuelto del servicio no es vacío (match) y si es correcto guardamos los datos en MongoDB, caso contrario
retornados un json con un key error para decirle a la vista que hubo un error al traducir el texto.
Al guardar los datos en MongoDB también sabremos si ocurre un error con “ok”, si así fuera retornamos el error a la vista también.
23. Perú users group
Creando una página de traducción de texto
Ahora crearemos el endpoint para la vista de nuestra aplicación.
Creando el controlador de servicio de traducción
url: /
En esta vista recuperaremos de la base de datos la lista de búsquedas que se han almacenado para mostrarlas en la lista como
búsquedas recientes.
24. Perú users group
Creando una página de traducción de texto
Agregando los controladores a las rutas
Ahora que ya tenemos 2 métodos en nuestro controlador debemos exponerlos agregándolos a
nuestro archivo de rutas (conf/routes).
25. Perú users group
Creando una página de traducción de texto
Agregando WebJars
Con webjars podemos tener dependencias de javascript como si fueran librerías de Scala. Para
utilizar webjars con play de forma fácil debemos de agregar a nuestras dependencias la librería de
webjars.
Las librerías a incluir se pueden ver en http://webjars.org, en nuestro caso solo incluiremos jQuery (linea 17).
26. Perú users group
Creando una página de traducción de texto
Agregando los webjars a las rutas
Agregamos el helper de Webjars para estáticos a nuestro archivos de rutas para luego poder usarlo
en nuestras vistas.
27. Perú users group
Creando una página de traducción de texto
Agregando WebJars a la vista
Ahora que ya tenemos webjars en nuestras rutas podemos usarlo para encontrar nuestros archivos
estáticos.
28. Perú users group
Creando una página de traducción de texto
Creando la vista
Ya que tenemos todo listo del lado del servidor ahora debemos crear la conexión desde el cliente.
Para eso play ofrece un helper que permite acceder a las rutas del servidor desde Javascript de una
forma natural.
29. Perú users group
Creando una página de traducción de texto
Creando la vista
Ya tenemos todo listo y lo único que nos falta hacer es realizar la llamada al servicio de traducción
con ajax, para eso utilizamos $.ajax de jquery.
30. Perú users group
Creando una página de traducción de texto
El resultado!
Una vez que ejecutemos el proyecto podremos realizar traducciones desde nuestra vista.
31. Perú users group
Creando una página de traducción de texto
Links de interés
https://github.com/evolbit/play-reactivemongo-translator (El proyecto de la presentación)
https://www.playframework.com/documentation/2.4.x/ScalaWS
http://www.webjars.org/documentation
https://cloud.google.com/translate
http://reactivemongo.org/
https://www.typesafe.com/community/core-tools/activator-and-sbt