$30 off During Our Annual Pro Sale. View Details »

Iniciandose con Play y reactive mongo

mordonez
December 15, 2015

Iniciandose con Play y reactive mongo

Esta presentación es un vistazo rápido a Play y como empezar un proyecto con Reactive Mongo.

mordonez

December 15, 2015
Tweet

More Decks by mordonez

Other Decks in Programming

Transcript

  1. @mordonez_me
    Marco Ordoñez
    Scala Perú
    Primeros pasos en el framework Play
    con reactive mongo

    View Slide

  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.

    View Slide

  3. Perú users group
    Play
    Creación y estructura del proyecto

    View Slide

  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.

    View Slide

  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

    View Slide

  6. Perú users group
    Play
    Conociendo los controladores

    View Slide

  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.

    View Slide

  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.

    View Slide

  9. Perú users group
    Play
    Conociendo las vistas

    View Slide

  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.

    View Slide

  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.

    View Slide

  12. Perú users group
    Play
    Integrando Reactive Mongo

    View Slide

  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

    View Slide

  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

    View Slide

  15. Perú user group
    Creando una página de traducción de texto

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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).

    View Slide

  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).

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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

    View Slide

  32. Perú users group
    Gracias

    View Slide