Web Development with Cuba - Ruby Fun Day 2014

Francesco (frodsan) [email protected]

The Guide to Cuba

Desarrollo Web 101

… con Cuba

Setup https://gist.github.com/frodsan/028e511a98ec220c291e

¿Qué es Cuba?

¿Qué vamos a hacer hoy?

github.com/frodsan/cuba101

$ terminal git clone [email protected]:frodsan/cuba101.git

Hola RFD!

app.rb require "cuba" ! Cuba.define do on("bienvenido") do res.write("Hola Ruby
Fun Day!") end end

conﬁg.ru require "./app" ! run(Cuba)

$ terminal rackup conﬁg.ru

http://localhost:9292/bienvenido

app.rb require "cuba" ! Cuba.define do on("bienvenido") do res.write("Hola Ruby
Fun Day!") end end

Qué pasa si … • Ingresas a una ruta diferente
a “/bienvenido”,   por ejemplo: “/talks”.  • Agrega una condición (`on`) si la ruta “/talks”  no existe y retorna el siguiente mensaje:   “Muy pronto podrás ver las charlas aquí”.

Mote https://github.com/soveran/mote https://github.com/harmoni-io/mote-render

app.rb require "cuba" require "mote" require "mote/render" ! Cuba.plugin(Mote::Render) !

Plantillas

Layout

views/layout.mote <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ruby Fun Day
2014</title> </head> <body> <header> <h1>Ruby Fun Day 2014</h1> </header> ! <div id="content"> {{ content }} </div> </body> </html>

views/talks.mote <div class="panel"> <h1>New talk</h1> ! <form action="/talks" method="post"> <input
type="text" name="talk[title]" placeholder="title"> <textarea name="talk[description]" placeholder="description"></textarea> <input type="submit" value="Create talk"> </form> </div>

Mostrando la plantilla

app.rb ! Cuba.plugin(Mote::Render) ! Cuba.define do on("talks") do render("talks") end
end

http://localhost:9292/talks

views/layout.mote ! <body> <header> <h1>Ruby Fun Day 2014</h1> </header> !
<div id="content"> {{ content }} </div> </body>

Qué pasa si … • Elimino la línea `{{ content
}}`.

Añadiendo un poco de estilo

app.rb require "cuba" require "mote" require "mote/render" ! Cuba.plugin(Mote::Render) !
Cuba.use(Rack::Static,  urls: %w(/js /css /img),  root: "./public")

views/layout.mote ! <head> <meta charset="utf-8"> <title>Ruby Fun Day 2014</title> <link
href="/css/styles.css"  rel="stylesheet"> </head>

Ohm (Redis) https://github.com/soveran/ohm

app.rb require "cuba" require "mote" require "mote/render" require "ohm" !
Cuba.plugin(Mote::Render) !

Modelos

models/talk.rb class Talk < Ohm::Model attribute :title attribute :description end

Añadiendo el modelo a   la aplicación

app.rb require "mote/render"  require "ohm" ! Dir["./models/**/*.rb"].each do |f|  require(f) 
end ! Cuba.plugin(Mote::Render)

$ terminal irb -r ./app

Qué pasa si … • Pruebo los métodos: `Talk.create()`, `Talk.[]`,
  `Talk.all`, `Talk.update`, etc … en la consola   de Ruby.

Métodos HTTP:  GET y POST

app.rb ! Cuba.define do on("talks") do on(get) do render("talks") end
! on(post) do # ... end end end

Qué pasa si … • Imprime un mensaje con `res.write()`
cuando  el método post.

Atributos del Formulario

Capturas

app.rb Cuba.define do on("talks") do on(get) do render("talks") end !
on(post, param("talk")) do |params| # ... end end end

Qué pasa si … • Imprime un mensaje con `res.write()`
con el  valor de `params`.

Crear registros

app.rb ! Cuba.define do on("talks") do on(get) do render("talks") end
! on(post, param("talk")) do |params| talk = Talk.create(params) ! res.redirect("/tasks") end end end

$ terminal irb -r ./app

Mostrar charlas

views/talks.mote ! <div class="panel"> <h1>Talks</h1> ! % talks.each do |talk|
<p> <a href="#">{{ talk.title }}</a> </p> <p> {{ talk.description }} </p> % end </div>

cuba.is

gracias ʕ•ᴥ•ʔ

Web Development with Cuba - Ruby Fun Day 2014

Web Development with Cuba - Ruby Fun Day 2014

More Decks by Francesco Rodríguez

Other Decks in Programming

Featured

Transcript