Volt taller
-
Upload
jose-anasco -
Category
Engineering
-
view
162 -
download
1
Transcript of Volt taller
CREA TU PRIMERAAPLICACIÓN WEB
CON VOLT!! / José Añasco @merongivian
DESARROLLO BACK END
SOLUCIÓN: RAILS
POR QUE?Convenciones sobre configuracionesDesarrollo interactivoScaffoldingActive RecordMVC
DESARROLLO FRONT END
SOLUCIÓN: ...
etc...
POR QUE?Single Page Applications
PROBLEMA: (FRONT-END +BACK-END)
Duplicación de lógicaDistintos LenguajesComplejidad
SOLUCIÓN:Único lenguaje: necesariamente javascriptÚnico framework
?
CONOCE A VOLT
VOLTRuby web framework (servidor y cliente)Compila ruby a javascript (Opal)Actualización de datos en DOM (programación reactiva)
CONCEPTOS VOLT
MVC VS MVVM
MVC VS MVVM
COLECCIONESstore, page, params, Operaciones en DB
Variables underscore
...
# Railsrails > User.new name: "juan"# Voltvolt > store.users.create name: "jose"
volt > juan = store.users.create(name: "juan", estado_civil: "soltero").valuevolt > 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 # exitoend.fail do # falloend
BINDINGSBinding 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>
WORKSHOPVamos a crear un Chat
...Pero primero copiemos el repositorio
LEVANTAR APLICACIÓNComandos consola
Instalar gemas
$ bundle install
Crear usuario en consola
$ bundle exec volt consolevolt > jose = { name: "jose", email: "[email protected]", password: "password" }=> {:name=>"jose", :email=>"[email protected]", :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
y Documentación usuarios componentes
CHATFEATURES:
Mensajes entre múltiples usuariosValidar longitud mínima de mensajesMúltiples Chats
FEATURE 0: MENSAJES
MODELO MESSAGECrear modelo con generador
$ bundle exec volt generate model message
Añadir campo body y atar mensajes a usuarios por medio depermisos
class Message < Volt::Model own_by_user
field :body, Stringend
VISTA CHATCrear ruta en archivo route.rb
client '/chat', action: 'chat'
Crear vista chat.html dentro la carpeta main de vistas (cargadospor 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<!--:nav--> </ul> </div> </div>
Añadir acción chat en controlador main
module Main class MainController < Volt::ModelController .. def chat # codigo end .. endend
Link para página nueva activada en menú de navegador
FORMULARIO DE MENSAJESCrear 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 susrespectivos usuarios
<:Body> form... . . {{ store.messages.reverse.each do |message| }} <div> <strong>{{ message.user.name }} :</strong> <span>{{ message.body }}</span> </div> {{ end }}
MÉTODOS DE CONTROLADORImplementar reset_message y usarlo al ejecutar la acción chat
module Main class MainController < Volt::ModelController . def chat reset_message end
private
def reset_message page._message_body = '' end . endend
A continuación implementar send_message
def send_message store.messages.create(body: page._message_body) reset_messageend
PERMISO DE ACCESOAnadir para permitir acceso al chat solo a usuarios
logeadosbefore_action
module Main class MainController < Volt::ModelController before_action :require_login, only: :chat . .
CHECKPOINT 0
mensajes se actualizan automáticamente
Mensajes entre múltiples Usuarios
MESSAGE TAGCrear 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 ERRORESAñadir validación de longitud para el campo body
class Message < Volt::Model . . validate :body, length: 2end
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 endend
MENSAJES DE ERROREnviar 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}" } endend
CHECKPOINT 1
errores por medio de notificaciones bootstrap
FEATURE 2: MÚLTIPLES CHATS
MODELO CHAT CON MÚLTIPLES MENSAJESCrear modelo chat
$ bundle exec volt generate model chat
Relacionar con message
class Chat < Volt::Model has_many :messagesend
Relacionar modelo message con chat
class Message < Volt::Model ...
belongs_to :chat
... field :chat_id ...end
LISTA DE CHATSListar 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 CHATEscoger el chat por medio de params._index
module Main class MainController < Volt::ModelController...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')
mensajes filtrados por chat
LINKS PARA CHATSRemover links de chat.htmlCrear 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 }}
CHECKPOINT 2
QUE FALTA?Soporte para bases de datos SQLhas_many through & polymorphic queries
GRACIAS :)