Volt taller

CREA TU PRIMERA
APLICACIÓN WEB
CON VOLT!!
/José Añasco @merongivian

POR QUE?
Convenciones sobre configuraciones
Desarrollo interactivo
Scaffolding
Active Record
MVC

POR QUE?
Single Page Applications

PROBLEMA: (FRONT-END +
BACK-END)
Duplicación de lógica
Distintos Lenguajes
Complejidad

SOLUCIÓN:
Único lenguaje: necesariamente javascript
Único framework
?

VOLT
Ruby web framework (servidor y cliente)
Compila ruby a javascript (Opal)
Actualización de datos en DOM (programación reactiva)

COLECCIONES
store, page, params,
Operaciones en DB
Variables underscore
...
# Rails
rails > User.new name: "juan"
# Volt
volt > store.users.create name: "jose"
volt > juan = store.users.create(name: "juan", estado_civil: "soltero").value
volt > juan._estado_civil
= > "soltero"

Manejo de Éxito/Error con promises
volt > juan = store.users.first
=> Promise..
volt > juan.value
=> User...
store.users.where(name: 'juan').first.then do
# exito
end.fail do
# fallo
end

BINDINGS
Binding Each
Bindings de Atributos
Bindings de Eventos
{{ _items.each do |item| }}
<p>{{ item }}</p>
{{ end }}
<input type="text" value="{{ _name }}">
<button e-click="alert">Alert Me</button>

WORKSHOP
Vamos a crear un Chat
...Pero primero copiemos el repositorio

LEVANTAR APLICACIÓN
Comandos consola
Instalar gemas
$ bundle install
Crear usuario en consola
$ bundle exec volt console
volt > jose = { name: "jose", email: "jose@mail.com", password: "password" }
=> {:name=>"jose", :email=>"jose@mail.com", :password=>"password"}
volt > store.users << jose
=> Promise ...
volt > store.users.all
Correr Aplicación e ingresar al url localhost:3000
$ bundle exec volt server

....Si la app tarda en arrancar usar flag NO_FORKING
$ NO_FORKING=true bundle exec volt server

Volt incluye autenticación y boostrap por defecto
yDocumentación usuarios componentes

CHAT
FEATURES:
Mensajes entre múltiples usuarios
Validar longitud mínima de mensajes
Múltiples Chats

MODELO MESSAGE
Crear modelo con generador
$ bundle exec volt generate model message
Añadir campo body y atar mensajes a usuarios por medio de
permisos
class Message < Volt::Model
own_by_user
field :body, String
end

VISTA CHAT
Crear ruta en archivo route.rb
client '/chat', action: 'chat'
Crear vista chat.html dentro la carpeta main de vistas (cargados
por medio de )tags
<:Title>
Chat
<:Body>
<h1>Chat</h1>
Añadir link en main.html
<:Body>
<div class="container">
<div class="header">
<ul class="nav nav-pills pull-right">
.
<:nav href="/chat">Chat
</ul>
</div>
</div>

Añadir acción chat en controlador main
module Main
class MainController < Volt::ModelController
..
def chat
# codigo
end
..
end
end

Link para página nueva activada en menú de navegador

FORMULARIO DE MENSAJES
Crear formulario con en chat.htmlbindings de eventos
<:Body>
...
<form e-submit="send_message">
<label>Message</label>
<input type="text" class="form-control" value="{{ page._message_body }}">
</form>
A continuación mostrar todos los mensajes guardados con sus
respectivos usuarios
<:Body>
form...
.
.
{{ store.messages.reverse.each do |message| }}
<div>
<strong>{{ message.user.name }} :</strong>
<span>{{ message.body }}</span>
</div>
{{ end }}

MÉTODOS DE CONTROLADOR
Implementar reset_message y usarlo al ejecutar la acción chat
module Main
.
def chat
reset_message
end
private
def reset_message
page._message_body = ''
end
.
end
end
A continuación implementar send_message
def send_message
store.messages.create(body: page._message_body)
reset_message
end

PERMISO DE ACCESO
Anadir para permitir acceso al chat solo a usuarios
logeados
before_action
module Main
before_action :require_login, only: :chat
.
.

mensajes se actualizan automáticamente

Mensajes entre múltiples Usuarios

MESSAGE TAG
Crear tag message con el código que contiene el nombre del
usuario y el mensaje
<:Body>
...
<:Message>
<div>
<strong>{{ attrs.user }} :</strong>
<span>{{ attrs.message }}</span>
</div>
Usar tag en el bloque each
<:Body>
...
{{ current_chat.messages.reverse.each do |message| }}
<:message user="{{ message.user.name }}" message="{{ message.body }}" />
{{ end }}
<:Message>
...
Correr tests

FEATURE 1: VALIDAR MENSAJES

CAPTURA DE ERRORES
Añadir validación de longitud para el campo body
.
.
validate :body, length: 2
end
Crear bloques de éxito y fallo al momento de crear el mensaje
private
def send_message
current_chat.messages.create(body: page._message_body)
.then { reset_message }
.fail do |errors|
# manejo de error
end
end

MENSAJES DE ERROR
Enviar todos los errores a la colección flash
private
def send_message
current_chat...
...
.fail do |errors|
errors.each { |k, v| flash._errors << "#{k}: #{v}" }
end
end

errores por medio de notificaciones bootstrap

FEATURE 2: MÚLTIPLES CHATS

MODELO CHAT CON MÚLTIPLES MENSAJES
Crear modelo chat
$ bundle exec volt generate model chat
Relacionar con message
class Chat < Volt::Model
has_many :messages
end
Relacionar modelo message con chat
...
belongs_to :chat
...
field :chat_id
...
end

LISTA DE CHATS
Listar chats con links que guarden el indice actual en params
<:Body>
{{ store.chats.each_with_index do |chat, index| }}
<div>
{{ chat._name }} |
<a e-click="params._index = index">Join chat</a>
</div>
{{ end }}
Cambiar store por el chat a escoger: current_chat
{{ current_chat.messages.reverse.each do |message| }}
<:message user="{{ message.user.name }}" message="{{ message.body }}" />
{{ end }}

CURRENT CHAT
Escoger el chat por medio de params._index
module Main
...
private
...
def current_chat
current_index = (params._index || 0).to_i
store.chats[current_index]
end
Guardar el mensaje en el chat escogido
...
private
...
def send_message
current_chat.messages.create(body: page._message_body)
...
...

Crear nuevos chats en consola
volt > store.chats.create(name: 'funny chat')
... store.chats.create(name: 'cool chat')

LINKS PARA CHATS
Remover links de chat.html
Crear links con en indexurl_with
<:Title>
Home
<:Body>
<h1>Home</h1>
{{ store.chats.each_with_index do |chat, index| }}
<div class="chat-link">
{{ chat._name }} |
<a href="{{ url_with(action: 'chat', index: index) }}">Join chat</a>
</div>
{{ end }}

QUE FALTA?
Soporte para bases de datos SQL
has_many through & polymorphic queries

Volt taller

Más contenido relacionado

La actualidad más candente (18)

Similar a Volt taller (20)

Último (20)

Volt taller