SlideShare una empresa de Scribd logo
1 de 32
Descargar para leer sin conexión
@mordonez_me
Marco Ordoñez
Scala Perú
Primeros pasos en el framework Play
con reactive mongo
@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.
Perú users group
Play
Creación y estructura del proyecto
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.
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
Perú users group
Play
Conociendo los controladores
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.
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.
Perú users group
Play
Conociendo las vistas
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.
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.
Perú users group
Play
Integrando Reactive Mongo
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
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
Perú user group
Creando una página de traducción de texto
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
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
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.
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
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
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.
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.
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.
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).
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).
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.
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.
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.
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.
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.
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
Perú users group
Gracias

Más contenido relacionado

La actualidad más candente

Manual programacion - java - jsp & xml
Manual   programacion - java - jsp & xmlManual   programacion - java - jsp & xml
Manual programacion - java - jsp & xmlgilhorak
 
5 plataforma servidora para aplicaciones web
5 plataforma servidora para aplicaciones web5 plataforma servidora para aplicaciones web
5 plataforma servidora para aplicaciones webUVM
 
2009_asp.net_capitulo_1
2009_asp.net_capitulo_12009_asp.net_capitulo_1
2009_asp.net_capitulo_1zhylz Zevallos
 

La actualidad más candente (6)

Manual programacion - java - jsp & xml
Manual   programacion - java - jsp & xmlManual   programacion - java - jsp & xml
Manual programacion - java - jsp & xml
 
Asp.net
Asp.netAsp.net
Asp.net
 
5 plataforma servidora para aplicaciones web
5 plataforma servidora para aplicaciones web5 plataforma servidora para aplicaciones web
5 plataforma servidora para aplicaciones web
 
2009_asp.net_capitulo_1
2009_asp.net_capitulo_12009_asp.net_capitulo_1
2009_asp.net_capitulo_1
 
Servicios web
Servicios webServicios web
Servicios web
 
Apache Camel - Parte II
Apache Camel - Parte IIApache Camel - Parte II
Apache Camel - Parte II
 

Similar a Empezando con Play y reactive mongo (Segundo meetup Scala Perú Dec 2015)

Aprendiendo AWS Lambda con API Gateway y DynamoDB
Aprendiendo AWS Lambda con API Gateway y DynamoDBAprendiendo AWS Lambda con API Gateway y DynamoDB
Aprendiendo AWS Lambda con API Gateway y DynamoDBAbimael Desales López
 
Manual de usuario crud django
Manual de usuario crud djangoManual de usuario crud django
Manual de usuario crud djangoDaniel Arevalo
 
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS...
GUIA DE  LABORATORIO  PHONE GAP JQUERY  MOBILE  CARGADO DE_DATOS_DE_REGISTROS...GUIA DE  LABORATORIO  PHONE GAP JQUERY  MOBILE  CARGADO DE_DATOS_DE_REGISTROS...
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS...Ivan Petrlik
 
Desarrollo de Apps Web en Ruby on Rails
Desarrollo de Apps Web en Ruby on RailsDesarrollo de Apps Web en Ruby on Rails
Desarrollo de Apps Web en Ruby on RailsFreelancer
 
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...Corporacion de Industrias Tecnologicas S.A.
 
Java Primeros Pasos Revista- Edición 2
Java Primeros Pasos Revista- Edición 2Java Primeros Pasos Revista- Edición 2
Java Primeros Pasos Revista- Edición 2guest39ff1b
 
Pleased to meet you, Laravel
Pleased to meet you, LaravelPleased to meet you, Laravel
Pleased to meet you, LaravelRolando Caldas
 
Web 2.0 ajax con SharePoint
Web 2.0 ajax con SharePointWeb 2.0 ajax con SharePoint
Web 2.0 ajax con SharePointgoreorti
 
Servicios web
Servicios webServicios web
Servicios webitoomac02
 
Creación de un sitio web en wordpress
Creación de un sitio web en wordpressCreación de un sitio web en wordpress
Creación de un sitio web en wordpressMilton González
 
Conociendo el Patron Modelo Vista Controlador
Conociendo el Patron   Modelo Vista ControladorConociendo el Patron   Modelo Vista Controlador
Conociendo el Patron Modelo Vista Controladorlissette_torrealba
 
Estructuras de repetición en JAVA For.pdf
Estructuras de repetición en JAVA For.pdfEstructuras de repetición en JAVA For.pdf
Estructuras de repetición en JAVA For.pdfLeonardoQuevedo18
 
Servicios web en php, perl, java
Servicios web en php, perl, javaServicios web en php, perl, java
Servicios web en php, perl, javaFaby Marcos Solis
 

Similar a Empezando con Play y reactive mongo (Segundo meetup Scala Perú Dec 2015) (20)

Aprendiendo AWS Lambda con API Gateway y DynamoDB
Aprendiendo AWS Lambda con API Gateway y DynamoDBAprendiendo AWS Lambda con API Gateway y DynamoDB
Aprendiendo AWS Lambda con API Gateway y DynamoDB
 
Ruby on Rails Workshop
Ruby on Rails WorkshopRuby on Rails Workshop
Ruby on Rails Workshop
 
Manual de usuario crud django
Manual de usuario crud djangoManual de usuario crud django
Manual de usuario crud django
 
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS...
GUIA DE  LABORATORIO  PHONE GAP JQUERY  MOBILE  CARGADO DE_DATOS_DE_REGISTROS...GUIA DE  LABORATORIO  PHONE GAP JQUERY  MOBILE  CARGADO DE_DATOS_DE_REGISTROS...
GUIA DE LABORATORIO PHONE GAP JQUERY MOBILE CARGADO DE_DATOS_DE_REGISTROS...
 
Desarrollo de Apps Web en Ruby on Rails
Desarrollo de Apps Web en Ruby on RailsDesarrollo de Apps Web en Ruby on Rails
Desarrollo de Apps Web en Ruby on Rails
 
Consumiendo servicios Restful en Xamarin.Forms
Consumiendo servicios Restful en Xamarin.FormsConsumiendo servicios Restful en Xamarin.Forms
Consumiendo servicios Restful en Xamarin.Forms
 
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
Corp. In. Tec. S.A. - Capacitaciones en Informática - Programación con CodeIg...
 
GWT - Una introducción
GWT - Una introducciónGWT - Una introducción
GWT - Una introducción
 
Node js mongo crud tareas
Node js mongo crud tareasNode js mongo crud tareas
Node js mongo crud tareas
 
Java Primeros Pasos Revista- Edición 2
Java Primeros Pasos Revista- Edición 2Java Primeros Pasos Revista- Edición 2
Java Primeros Pasos Revista- Edición 2
 
REPORTES
REPORTESREPORTES
REPORTES
 
Pleased to meet you, Laravel
Pleased to meet you, LaravelPleased to meet you, Laravel
Pleased to meet you, Laravel
 
Web 2.0 ajax con SharePoint
Web 2.0 ajax con SharePointWeb 2.0 ajax con SharePoint
Web 2.0 ajax con SharePoint
 
PROGRAMACIÓN DE CÓDIGOS CON PHP
PROGRAMACIÓN DE CÓDIGOS CON PHPPROGRAMACIÓN DE CÓDIGOS CON PHP
PROGRAMACIÓN DE CÓDIGOS CON PHP
 
Servicios web
Servicios webServicios web
Servicios web
 
Creación de un sitio web en wordpress
Creación de un sitio web en wordpressCreación de un sitio web en wordpress
Creación de un sitio web en wordpress
 
Presentacion node
Presentacion nodePresentacion node
Presentacion node
 
Conociendo el Patron Modelo Vista Controlador
Conociendo el Patron   Modelo Vista ControladorConociendo el Patron   Modelo Vista Controlador
Conociendo el Patron Modelo Vista Controlador
 
Estructuras de repetición en JAVA For.pdf
Estructuras de repetición en JAVA For.pdfEstructuras de repetición en JAVA For.pdf
Estructuras de repetición en JAVA For.pdf
 
Servicios web en php, perl, java
Servicios web en php, perl, javaServicios web en php, perl, java
Servicios web en php, perl, java
 

Empezando con Play y reactive mongo (Segundo meetup Scala Perú Dec 2015)

  • 1. @mordonez_me Marco Ordoñez Scala Perú Primeros pasos en el framework Play con reactive mongo
  • 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.
  • 3. Perú users group Play Creación y estructura del proyecto
  • 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
  • 15. Perú user group Creando una página de traducción de texto
  • 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