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: "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

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