groopify for groopies 
Principios básicos de programación web
groopify for groopies 
• ¿Qué partes forman el servicio 
web groopify? 
• ¿Qué lenguajes usamos en 
groopify? 
• ¿Por qué Rails?
¿Qué forma el servicio de groopify? 
• Host/Servidor: Es un ordenador en el que 
están almacenadas 3 partes: 
• Código de nuestra aplicación (HTML, CSS, 
javascript, MySQL, Ruby, Rails) 
• Assets (Imágenes, vídeos) 
• Base de datos de la aplicación (MySQL) 
• Web server (Apache) -> App server 
(Passenger)
¿Qué forma el servicio de groopify? 
• Usuarios que interactúan con la web. 
• Servicios de terceros -> APIs (application 
programming interface): 
Es un componente para que distintos 
sistemas en distintos lenguajes se puedan 
comunicar. El truco es separar la 
funcionalidad de su implementación. Por 
ejemplo: /api/v1/users -> 
[{"id": 1, "name": "Manuel Pérez"}, {"id": 2, "name": "María García"}]
¿Qué lenguajes usamos? 
• HTML: Sistema de etiquetas que interpretan los 
navegadores: ¿HAML? 
<head>Esto es la cabecera</head> 
<body> 
<h1>Esto es un título del body</h1> 
<p>Esto un párrafo</p> 
<img src=”ruta/de/la/imagen.png” /> 
<a href=”www.groopify.me/blog” alt=”blog de groopify” 
title=”blog de groopify”>Blog</a> 
</body> 
<footer>Nuestro pie de página maravilloso</footer>
¿Qué lenguajes usamos? 
• CSS: Lenguaje estructurado que describe el formato y 
aspecto del HTML 
h1 { font-size: 150%; color: red; text-align: center; } 
p {font-size: 80%; color: black: text-align: right; } 
-> Sass (Syntactically Awesome StyleSheets): 
h1 
font-size: 150% 
color: $red
¿Qué lenguajes usamos? 
• JavaScript: Lenguaje dinámico que se carga en el 
cliente y nos permite mayor interactuación con él: 
Hacer que las barras de referrals se rellenen al tiempo, hacer, aparecer y 
desaparecer elementos en el tiempo. Invitaciones de Facebook, etc. 
-> jQuery 
if (opposite) { 
number = -42; 
} 
-> CoffeeScript 
number = -42 if opposite
¿Qué lenguajes usamos? 
• MySQL: Sistema relacional de base datos. Lo usamos 
porque es de los más extendidos, pero podríamos 
cambiar a otro relacional de forma sencilla. 
Intentamos para esto no usar la sintáxis propia de 
MySQL en casi ningún lugar.
¿Qué lenguajes usamos? 
• Ruby: es un lenguaje de programación interpretado, 
reflexivo y orientado a objetos. 
“I hope to see Ruby help every programmer in the 
world to be productive, and to enjoy programming, and 
to be happy. That is the primary purpose of Ruby 
language”
say = "I love Ruby" 
puts say 
say['love'] = "*love*" 
puts say.upcase 
5.times { puts say } 
I love Ruby 
I *LOVE* RUBY 
I *love* Ruby 
I *love* Ruby 
I *love* Ruby 
I *love* Ruby 
I *love* Ruby
¿Qué lenguajes usamos? 
• Ruby on Rails: es un framework de aplicaciones web 
full-stack. (Diciembre 2005) 
link_to “blog”, blog_path 
<a href=”www.groopify.me/blog” alt=”blog”>Blog</a> 
<a href=”localhost:3000/blog” alt=”blog”>Blog</a>
La magia de Rails I 
• Framework orientado a productividad 
• Lenguaje fácilmente legible 
• Principios de Ruby on Rails 
1. Convención sobre configuración 
2. Don’t repeat yourself (DRY) 
3. Patrón modelo vista control (MVC)
La magia de Rails II 
• Publicación rápida y configurable 
• Comunidad 
1. Comunidad muy activa 
2. Más de 650.000 repositorios en github 
3. Más de 90.000 gemas en ruby gems
Ejemplo funcional: 
Creamos la app nueva: 
rails new groopiejemplo 
Entramos a la carpeta: 
cd groopiejemplo 
Generamos el campo en la base de datos, la vista, el modelo y el controlador: 
rails g scaffold groopies name:string address:string phone:string groopify_at:date 
Migramos la base de datos: 
rake db:migrate 
Arrancamos el servidor: 
rails s 
Entramos a nuestra app funcional: 
http://localhost:3000

Groopify para groopies

  • 1.
    groopify for groopies Principios básicos de programación web
  • 2.
    groopify for groopies • ¿Qué partes forman el servicio web groopify? • ¿Qué lenguajes usamos en groopify? • ¿Por qué Rails?
  • 3.
    ¿Qué forma elservicio de groopify? • Host/Servidor: Es un ordenador en el que están almacenadas 3 partes: • Código de nuestra aplicación (HTML, CSS, javascript, MySQL, Ruby, Rails) • Assets (Imágenes, vídeos) • Base de datos de la aplicación (MySQL) • Web server (Apache) -> App server (Passenger)
  • 4.
    ¿Qué forma elservicio de groopify? • Usuarios que interactúan con la web. • Servicios de terceros -> APIs (application programming interface): Es un componente para que distintos sistemas en distintos lenguajes se puedan comunicar. El truco es separar la funcionalidad de su implementación. Por ejemplo: /api/v1/users -> [{"id": 1, "name": "Manuel Pérez"}, {"id": 2, "name": "María García"}]
  • 5.
    ¿Qué lenguajes usamos? • HTML: Sistema de etiquetas que interpretan los navegadores: ¿HAML? <head>Esto es la cabecera</head> <body> <h1>Esto es un título del body</h1> <p>Esto un párrafo</p> <img src=”ruta/de/la/imagen.png” /> <a href=”www.groopify.me/blog” alt=”blog de groopify” title=”blog de groopify”>Blog</a> </body> <footer>Nuestro pie de página maravilloso</footer>
  • 6.
    ¿Qué lenguajes usamos? • CSS: Lenguaje estructurado que describe el formato y aspecto del HTML h1 { font-size: 150%; color: red; text-align: center; } p {font-size: 80%; color: black: text-align: right; } -> Sass (Syntactically Awesome StyleSheets): h1 font-size: 150% color: $red
  • 7.
    ¿Qué lenguajes usamos? • JavaScript: Lenguaje dinámico que se carga en el cliente y nos permite mayor interactuación con él: Hacer que las barras de referrals se rellenen al tiempo, hacer, aparecer y desaparecer elementos en el tiempo. Invitaciones de Facebook, etc. -> jQuery if (opposite) { number = -42; } -> CoffeeScript number = -42 if opposite
  • 8.
    ¿Qué lenguajes usamos? • MySQL: Sistema relacional de base datos. Lo usamos porque es de los más extendidos, pero podríamos cambiar a otro relacional de forma sencilla. Intentamos para esto no usar la sintáxis propia de MySQL en casi ningún lugar.
  • 9.
    ¿Qué lenguajes usamos? • Ruby: es un lenguaje de programación interpretado, reflexivo y orientado a objetos. “I hope to see Ruby help every programmer in the world to be productive, and to enjoy programming, and to be happy. That is the primary purpose of Ruby language”
  • 10.
    say = "Ilove Ruby" puts say say['love'] = "*love*" puts say.upcase 5.times { puts say } I love Ruby I *LOVE* RUBY I *love* Ruby I *love* Ruby I *love* Ruby I *love* Ruby I *love* Ruby
  • 11.
    ¿Qué lenguajes usamos? • Ruby on Rails: es un framework de aplicaciones web full-stack. (Diciembre 2005) link_to “blog”, blog_path <a href=”www.groopify.me/blog” alt=”blog”>Blog</a> <a href=”localhost:3000/blog” alt=”blog”>Blog</a>
  • 12.
    La magia deRails I • Framework orientado a productividad • Lenguaje fácilmente legible • Principios de Ruby on Rails 1. Convención sobre configuración 2. Don’t repeat yourself (DRY) 3. Patrón modelo vista control (MVC)
  • 13.
    La magia deRails II • Publicación rápida y configurable • Comunidad 1. Comunidad muy activa 2. Más de 650.000 repositorios en github 3. Más de 90.000 gemas en ruby gems
  • 14.
    Ejemplo funcional: Creamosla app nueva: rails new groopiejemplo Entramos a la carpeta: cd groopiejemplo Generamos el campo en la base de datos, la vista, el modelo y el controlador: rails g scaffold groopies name:string address:string phone:string groopify_at:date Migramos la base de datos: rake db:migrate Arrancamos el servidor: rails s Entramos a nuestra app funcional: http://localhost:3000