Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Elixir

Erlang y Elixir, Parte 5: Framework Phoenix

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Introduction to Erlang and Elixir.
Erlang and Elixir, Part 4: Control Flow

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Hasta ahora hemos visto como usar los tipos de datos básicos y principios de código para el Erlang VM vía el lenguaje Elixir. Ahora vamos a completar el círculo y crear una aplicación web funcional usando el Framework Phoenix Web.

Phoenix usa el patrón del lado del servidor MVC y es de hecho la capa superior de un sistema modular multi-capa abarcando Plug (la especificación modular usada para Enrutado, Controladores, etc.), Ecto (envoltorio DB para MongoDB, MySQL, SQLite3, PostgreSQL y MSSQL) y el servidor HTTP (Cowboy).

La estructura de Phoenix parecerá familiar a Django para Python o Ruby on Rails. Tanto el desempeño de la app como velocidad de desarrollo fueron factores claves en el diseño de Phoenix y después combinados con sus características en tiempo real, dan un potencial poderoso como framework de web-app de calidad de producción.

Comenzando

Elixir es requerido, así que por favor refierete a las instrucciones de instalación al comienzo de esta serie.

También requeriremos Hex para tener Phoenix funcionando (para instalar dependencias). Aquí está el comando para instalar Hex (si ya tienes Hex instalado, actualizará Hex a la última versión):

Si aún no te has familiarizado con el lenguaje Elixir, te recomendaría continuar leyendo los primeros pasos de esta guía antes de continuar en esta parte.

Nota que si deseas leer una guía corta, también te puedes referir a la Guía de Aprendizaje de Elixir y Erlang que es provista por el equipo de Phoenix.

Erlang

Nota: Por defecto, esto está incluido en una instalación Elixir.

Para ejecutar Elixir, necesitamos la máquina virtual Erlang porque el código Elixir se compila a código byte Erlang.

Si estás usando un sistema basado en Debian, podrías necesitar instalar Erlang explícitamente para obtener todos los paquetes necesarios.

Phoenix

Así que ahora que nos hemos encargado de Elixir y Erlang, estás listo para instalar el archivo Mix.

Un archivo mix es como un archivo Zip realmente, excepto que contiene una aplicación así como los archivos BEAM compilados y está atado a una versión específica de la app.

¡El archivo mix es lo que usaremos para generar una nueva aplicación Phoenix base de la cuál podemos construir nuestra app!

Ejecuta lo siguiente en tu terminal:

Si el archivo Phoenix Mix no se instala correctamente con este comando, podemos descargar el paquete desde los archivos Phoenix, guardarlo al sistema de archivos y después ejecutar: mix archive.install /path/to/local/phoenix_new.ez.

Node

Necesitaremos node.js versión 5 o mayor, ya que Phoenix usará el paquete brunch.io para compilar recursos estáticos tales como css y js, los cuáles usan npm.

Descarga Node.js desde la página de descarga. Cuando selecciones un paquete para descargar, es importante notar que Phoenix requiere versión 5.0.0 o mayor.

Los usuarios de Mac OS X también pueden instalar Node.js vía homebrew.

Si tienes cualquier problema instalando Node, refiérete a la guía de ayuda oficial de Phoenix.

PostgreSQL

Por defecto, Phoenix configura aplicaciones para usar la base de datos relacional PostgreSQL, pero podemos cambiar a MySQL pasando la bandera --database mysql cuando creamos una nueva aplicación.

Continuando, mientras trabajamos con modelos Ecto en esta guía, usaremos PostgreSQL y el adaptador Postgrex.

Así que para seguir los ejemplos, deberías instalar PostgreSQL. El wiki de PostgreSQL tiene guías de instalación para un número de diferentes sistemas operativos.

Nota que Postgrex es una dependencia directa de Phoenix, y será instalada automáticamente junto con el resto de nuestras dependencias mientras comenzamos nuestra app.

El Usuario Por Defecto

Phoenix asume que nuestra base de datos PostgreSQL tendrá una cuenta de usuario postgres con los permisos correctos y una contraseña de "postgres". Si no es así como quieres configurar, por favor ve las instrucciones para la tarea mix ecto.create para presonalizar las credenciales.

Instalación Skeleton

Si solo quieres la estructura para tener tu aplicación phoenix corriendo, sin Ecto o Plug (sin db o brunch.io), crea tu app con las siguientes banderas --no-brunch--no-ecto:

Revisión Pre-Vuelo

Para este punto, deberías tener:

  • Elixir
  • Erlang (por defecto proporcionado por la instalación Elixir)
  • Hex
  • Archivo mix Phoenix instalado
  • De manera adicional, si has optado por BD y soporte de recursos estáticos, también tendrás PostgreSQL y Node.js >=5.0.0, en cuyo caso ahora estarás listo para crear tu aplicación.

Crea Tu Aplicación

Puedes ejecutar mix phoenix.new desde cualquier directorio para facilitar una aplicación Phoenix.

Para tu nuevo proyecto, Phoenix aceptará una ruta absoluta o relativa; asumiendo que el nombre de nuestra aplicación es hello_world, cualquier de estas funcionará bien:

Cuando estés listo, ejecuta el comando create y obtendrás algo similar al siguiente resultado:

Así que aquí Phoenix se ha encargado de toda la estructura de directorio y archivos para tu app. Puedes echar un vistazo a lo que está creando navegando directamente a los archivos en el editor de código de tu elección.

Cuando esté hecho, vemos se nos pregunta que dependencias será instaladas. Procede con yes:

Ahora que todo ha sido descargado, podemos hacer cd al directorio en el que Elixir ha estado poblando los archivos del proyecto y crear la base de datos vía mix ecto.create.

Nota: si esta es la primera vez que estás ejecutando este comando, Phoenix también te pedirá instalar Rebar. Continua con la instalación ya que Rebar es usado para construir paquetes Erlang.

Problemas de Base de Datos

Si ves el siguiente error:

Por favor asegúrate de que el servicio PostgreSQL está corriendo y es accesible por las credenciales de usuario provistas (por defecto se usa el usuario postgres con una contraseña "postgres".)

¡Inicia el Servidor Web Phoenix!

¡Ahora podemos comenzar el servidor desde nuestra aplicación Elixir! Ejecuta lo siguiente:

Por defecto, Phoenix está aceptando peticiones en el puerto 4000.

Visita http://localhost:4000,y verás la página de bienvenida del Framework Phoenix.

The Phoenix Framework Welcome Page

Si no puedes ver la página de arriba, intenta accediendo vía http://127.0.0.1:4000 (en caso de que localhost no esté definido en tu SO).

Localmente, ahora podemos ver peticiones siendo procesadas en nuestra sesión terminal mientras nuestra aplicación se está ejecutando en una sesión iex. Para detenerlo, presionamos ctrl-c dos veces, igual que lo haríamos para detener iex normalmente.

Personalizando Tu Aplicación

Cuando Phoenix genera una nueva aplicación para nosotros, construye una estructura de directorio de nivel superior, como vemos en la siguiente sección de abajo.

Creamos una nueva aplicación vía el comando mix phoenix.new, el cuál generó una nueva aplicación, incluyendo la estructura de directorio como:

Por ahora estaremos trabajando en el directorio web, el cuál contiene lo siguiente:

Para cambiar el logo en la parte superior de la página, necesitamos editar los recursos estáticos, los cuáles están contenidos en priv/static. El logo es mantenido en el directorio como: priv/static/images/phoenix.png.

Siéntete libre de agregar tus propios gráficos aquí; los enlazaremos en el css y estaremos modificando la plantilla a continuación. Por defecto, Phoenix compilará cualquier recurso estático (por ejemplo aquí en el directorio de imágenes) para el paquete de producción.

Para cuando necesitamos construir una fase para js o css, colocamos recursos en web/static, y los archivos fuente son construidos en sus respectivos paquetes app.js / app.css dentro de priv/static.

Modificando el CSS

La ruta para tu css es web/static/css/phoenix.css. Para cambiar el logo, busca en las líneas 29-36.

Haz tu cambio y guarda el archivo, y los cambios serán actualizados automáticamente.

Recarga tu navegador web o carga http://localhost:4000.

An Updated Landing Page

Modificando Plantillas

Para cambiar los contenidos de tu plantilla, solo busca en los archivos en web/templates/layout y web/templates/page. Puedes comenzar modificando los archivos para ver los cambios en tu aplicación.

El motor de plantillas estándar de Phoenix usa EEx, el cuál significa Embedded Elixir. Todos los archivos de plantilla tienen la extensión .eex.

Las plantillas tienen alcance a una vista, la cuál se vuelve el alcance a un controlador.

Phoenix crea un directorio web/templates en donde podemos poner todas estas. Por el bien de la organización, es mejor dar namespace a estas, así se si quieres crear una nueva página, eso significa que necesitas crear un nuevo directorio bajo web/templates y después crear un archivo index.html.eex dentro de el (ej.web/templates//index.html.eex).

Hagamos eso ahora. Crea web/templates/about/index.html.eex u hazlo lucir así:

Vistas

En Phoenix, la parte de las vistas del paradigma de diseño MVC desempeña varios trabajos importantes.

Para empezar, las vistas generan plantillas. Adicionalmente, estas actúan como capa de presentación para datos crudos desde el controlador, actuando como intermediario preparándolos para usar en una plantilla.

Por ejemplo, toma una estructura de datos hipotética común la cuál representa a un usuario con un campo first_name y un campo last_name. Ahora, para la plantilla, queremos mostrar el nombre completo del usuario.

Para la mejor aproximación, escribimos una función para concatenar first_name y last_name y proporcionarnos un ayudante en la vista para poder escribir código de plantilla conciso y de fácil lectura.

Para generar cualquier plantilla para nuestro AboutController, necesitamos un AboutView.

Nota: Los nombres son significativos aquí--la primera parte de los nombres de la vista y controlador deben coincidir.

Crea web/views/about_view.ex y hazlo lucir como esto:

Entutado

Para ver una nueva página, necesitarás configurar una ruta y un controlador para tu vista y plantilla.

Ya que Phoenix trabaja sobre el paradigma MVC, necesitamos rellenar todas las partes. No es mucho trabajo, sin embargo.

En Español: Las rutas mapean pares HTTP verb/path únicos a pares controller/action para ejecución futura.

Phoenix genera automáticamente un archivo enrutador por nosotros en una nueva aplicación en web/router.ex. Aquí es donde estaremos trabajando para esta siguiente sección.

La ruta para la página por defecto "Welcome to Phoenix!" se ve así.

Esto significa atrapar todas las peticiones hechas visitando http://localhost:4000/ en un navegador (el cuál otorga una petición HTTP GET) a la ruta root / de la aplicación y envía todas esas peticiones a la función index en el módulo HelloPhoenix.PageController definido en web/controllers/page_controller.ex.

La página que vamos a construir simplemente dirá "Acerca de mi app" cuando apuntemos nuestro navegador a http://localhost:4000/about. Puedes rellenar más información para ajustar tu aplicación en la plantilla, ¡así que adelante y escribe tu HTML!

Una Nueva Ruta

Para nuestra página about, necesitamos definir una ruta. Así que abre web/router.ex en un editor de texto. Por defecto, este contendrá lo siguiente; para más información sobre enrutamiento, refierete a la Guía Oficial de Enrutamiento.

Para nuestra sección about, agreguemos la nueva ruta al enrutador para una petición GET a /about. Esta será procesada por un HelloPhoenix.AboutController, el cual construiremos en la siguiente parte.

Para el GET al /about, agrega esta línea al bloque scope "/" del router.ex:

El bloque completo se verá como:

El Controlador

Hemos establecido la ruta, la vista y la plantilla. Así que juntemos todas las partes para que podamos verlo en el navegador.

Los controladores están definidos como módulos Elixir, y las acciones dentro de un controlador son funciones Elixir. El propósito de las acciones es reunir cualquier información y desempeñar cualquier tarea necesaria para generación.

Para la ruta /about, necesitamos un módulo HelloWorld.AboutController con una acción index/2.

Para eso, necesitamos crear un web/controllers/about_controller.ex y poner lo siguiente adentro:

Para más información sobre Controladores, refierete a la Guía oficial de Controladores.

Estructura de Control

Todas las acciones de controlador toman dos argumentos. El primero de estos es conn, que contiene una carga de información sobre la petición.

El segundo es params, que son los parámetros de la petición. Aquí, no estamos usando params, y evitamos advertencias de compilador agregando antes _.

El núcleo de esta acción es render conn, "index.html". Esto le dice a Phoenix que encuentre una plantilla llamada index.html.eex y la genere. Phoenix buscará la plantilla en un directorio llamado como nuestro controlador, así qué web/templates/hello.

Nota: Usando un átomo como el nombre de la plantilla también funcionará aquí: render conn, :index, por ejemplo cuando se usa un átomo :index. Pero la plantilla será elegida basada en los encabezados Accept, así que por ejemplo "index.html" o "index.json".

Probando la Nueva Ruta

¡Visitar la URL http://localhost:4000/about ahora generará la plantilla, controlador, vista y ruta que hemos definido hasta ahora!

The About My App Page

Acciones

Así que ahora hemos creado una página y personalizado el título de la aplicación. ¿Pero cómo hacemos realmente algo con la entrada de usuario? Acciones.

Las peticiones para nuestra página about serán manejadas por el HelloWorld.AboutController usando la acción mostrada. Como ya hemos definido el controlador en los pasos anteriores, solo necesitamos agregar al código una manera de retener la variable que es pasada vía la URL como: http://localhost:4000/about/weather.

Ahora modificaremos el código para mapear el nuevo parámetro URL de petición GET a través del controlador y eventualmente a la plantilla, vía usando el emparejador de patrón de Elixir.

Agrega lo siguiente al módulo en web/controllers/about_controller.ex:

Unos cuantos puntos de interés aquí:

  • Emparejamos patrones contra los parámetros pasados en la función show de manera que la variable appName será ligada al valor de la URL.
  • Para nuestra URL de ejemplo (http://localhost:4000/about/weather), la variable appName contendría el valor weather.
  • Dentro de la acción show, también hay un argumento pasado para la función render: un par key/value en donde el átomo :appName es el key y la variable appName es pasada como el valor.

El listado completo de web/controllers/about_controller.ex se lee como:

Elixir Embebido

Para finalmente usar la variable en nuestra plantilla primero, necesitamos crear un archivo para nuestra acción show.

Crea el archivo web/templates/about/show.html.eex y agrega lo siguiente:

Usamos la sintaxis especial EEx <%= %> para Elixir Embebido. La etiqueta de apertura tiene un signo =, significando que el código Elixir entre esto será ejecutado y el resultado reemplazará a la etiqueta.

Nuestra variable para el nombre de la app aparece como @appName. En este caso, no es un atributo de módulo, sino que de hehco es un pedazo especial de sintaxis meta-programada la cuál significa Map.get(assigns, :appName). El resultado es mucho más agradable a la vista y mucho más fácil de trabajar en una plantilla.

Definiendo la Ruta

Para que podamos ver la ruta http://localhost:4000/about/weather, por ejemplo, necesitamos definir la ruta para enlazar con la acción show para el controlador que acabamos de definir.

¡Ahora nuestro trabajo está completo! Prueba visitando la URL http://localhost:4000/about/weather.

The Landing Page for Weather

Conclusión

Ahora tienes el conocimiento fundamental para crear una aplicación Phoenix, personalizarla gráficamente y crear rutas, acciones, controladores y vistas para tu aplicación.

Vimos la configuración para las características PosgreSQL de Ecto, pero para entrar a más detalle en la parte del Modelo en el paradigma MVC, por favor continua tu lectura de la guía Ecto.

Y para interacciones de usuario y crear autenticación, por ejemplo, por favor continua tu aprendizaje en la guía Plug en la documentación oficial Phoenix.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.