Como Gestionar Uploads en backbone con rails, paperclip, jquery file upload y amazon aws (Parte 1)

29 Jan Como Gestionar Uploads en backbone con rails, paperclip, jquery file upload y amazon aws (Parte 1)

En esta ocasion dado los pocos ejemplos que encontre sobre como subir imagenes o archivos en nuestro servidor desde backbone, me decidi a realizar esta guia desde cero como ha mi me hubiera gustado encontrar. Para lo cual vamos a utilizar por supuesto backbone, coffescript, Maml, Eco templates, jQuery File Upload, Ruby On Rails, Paperclip, Amazon aws.

$ rails new jqueryfileuploadbackbone

$ cd jqueryfileuploadbackbone


La configuracion de mi archivo Gemfile es la siguiente:
source 'https://rubygems.org'
# Bundle edge Rails instead:
# gem 'rails', :git =>; 'git://github.com/rails/rails.git'

gem 'haml'
gem 'jquery-rails'
gem 'rails', '3.2.11'
gem 'paperclip', '~>; 3.4.0'
gem 'aws-sdk', '~>; 1.6.0'
gem 'aws-s3'
#gem 'mysql2'
gem 'pg'
gem 'devise'
gem 'jquery-fileupload-rails'
gem 'rb-readline'
gem 'debugger'
 # Gems used only for assets and not required
# in production environments by default.
group :assets do
 gem 'backbone-on-rails'
 gem 'backbone-support'
 gem 'coffee-rails', '~>; 3.2.1'
 gem 'eco'
 gem 'haml_assets'
 gem 'sass-rails', '~>; 3.2.3'
 gem 'sass'

# See https://github.com/sstephenson/execjs#readme for more supported runtimes
 # gem 'therubyracer', :platforms =>; :ruby

gem 'uglifier', '>= 1.0.3'
end

group :test, :development do
 gem 'fabrication'
 gem 'guard-rspec'
 gem 'rspec-rails'
end

# To use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~>; 3.0.0'

# To use Jbuilder templates for JSON
# gem 'jbuilder'

# Use unicorn as the app server
# gem 'unicorn'

# Deploy with Capistrano
# gem 'capistrano'

# To use debugger
# gem 'debugger'

Para utilizar las gemas ejecutamos en nuestra consola

$ bundle install



Ahora vamos a crear un modelo para poder guardar nuestras imagenes, para lo cual creamos nuestro modelo de qrcode donde image sera el attributo en donde guardaremos el nombre de la imagen.

En nuestra consola ejecutamos el siguiente comando

$ rails generate model Qrcode description:string
$ rake db:setup



Ahora necesitamos habilitar nuestra gema Paperclip para la gestion de imagenes en nuestro servidor, para lo cual necesitamos hacer lo siguiente:
Donde tenemos que especificar el modelo y el campo donde se guardara el nombre de la imagen:
$ rails generate paperclip Qrcode image

Despues debemos de correr nuestra migraciones generadas por Paperclip
$ rake db:migrate

Ahora vamos a crear nuestra estructura de archivos en backbone, los cual se crearan en la carpeta:
app/assets/javascripts
y se crearan las carpetas de modelos, colecciones, vistas y templates:
app/assets
, con el siguiente comando creamos nuestra estructura.
$ rails g backbone:install
Si todo funciono correctamente despues de esto al correr nuestra aplicacion con

$ rails server


Ahora podremos ver la tipica pagina de Ruby on Rails. Despues de esto tenemos que crear nuestro controlador de qrcodes donde podremos subir y mostrar las imagenes que hemos subido a nuestro servidor, para lo cual vamos a utilizar los generadores de rails de la siguiente manera:
$ rails g controller qrcodes index create --skip javascript

En nuestro codigo anterior creamos el qrcodes_controller.rb y dos metodos que seran para subir y para mostrar todas nuestras imagenes en el server.
Y ahora debemos de modificar nuestro archivo:
config/routes.rb
Y cambiamos las lineas para que lo primero que se muestre en nuestra aplicacion sea la vista de qrcodes_controller index, entonces para eso modificamos lo siguiente en el archivo:
get 'qrcodes/index'
root to: 'qrcodes#index'

Borramos el archivo ubicado en:
public/index.html.erb
Hasta que borremos este archivo se nos mostrara la vista de qrcodes index, si hasta este momento todo lo hemos hecho correctamente o algo no omiti en el tutorial debemos de recibir una alerta de “hello from backbone” y veremos nuestra vista de qrcodes index. Ahora vamos a crear nuestros archivos necesarios para la aplicacion y gestion de imagenes en backbone con lo cual vamos a utilizar el Scaffold de Backbone para que nos genere los archivos necesarios.
$ rails g backbone:scaffold qrcodes

Despues de esto modificamos el archivo ubicado en:
app/assets/javascripts/jqueryfileuploadbackbone.js.coffee
Y su contenido en mi caso que mi aplicacion se llama jqueryfileuploadbackbone:
window.Jqueryfileuploadbackbone =
 Models: {}
 Collections: {}
 Views: {}
 Routers: {}
 ManageImages: ->
 new Jqueryfileuploadbackbone.Routers.Qrcodes()
 alert 'in backbone'
 Backbone.history.start()

 $(document).ready ->
 Jqueryfileuploadbackbone.ManageImages()

Y listo ya tenemos todo y el primer archivo que debemos de modificar sera el router el cual esta ubicado en: Asi quedo mi archivo application.js el cual si lo dejaba original marcaba errores de backbone y que no reconocia ciertos archivos y no los cargaba correctamente:
//= require jquery
//= require jquery_ujs
//= require_self
//= require underscore
//= require backbone
//= require jqueryfileuploadbackbone
//= require_tree ../templates/
//= require_tree .//models
//= require_tree .//collections
//= require_tree .//views
//= require_tree .//routers


Ahora vamos a gestionar nuestra vista QrcodesIndex Para lo cual vamos a utilizarla en nuestro router en el cual vamos a declarar nuestras rutas que vamos a utilizar para mostrar nuestro listado de imagenes. Modificamos nuestro archivo
app/assets/javascripts/routers/qrcodes_router.js.coffee

Su contenido es el siguiente:

class Jqueryfileuploadbackbone.Routers.Qrcodes extends Backbone.Router
 routes:
 '' : 'showManageImages'

 showManageImages: ->
 @collection = new Jqueryfileuploadbackbone.Collections.Qrcodes()
 @collection.fetch()
 view = new Jqueryfileuploadbackbone.Views.QrcodesIndex collection: @collection
 $('#container-app').html view.render().el

En nuestro codigo anterior utilizaremos nuestro model y collection para mostrar todas nuestras imagenes guardadas en el servidor para lo cual ahora tenemos que declarar nuestras rutas, configurar nuestra collection y nuestro modelo de la siguiente manera:Ahora en nuestro archivo
 config/routes.rb

Agregamos la siguiente ruta para poder utilizarla en backbone para traer todas nuestras imagenes guardadas

scope 'api' do
 resources :qrcodes, format: false
end


Ahora toca modificar nuestro modelo en backbone para poder traer toda la informacion de las imagenes, para lo cual tenemos que modificar el archivo
app/assets/javascripts/models/qrcode.js.coffee

El contenido de este archivo es el siguiente:
class Jqueryfileuploadbackbone.Models.Qrcode extends Backbone.Model
 urlRoot: 'api/qrcodes'

Despues de esto ahora toca tambien modificar nuestro archivo de la collection el cual esta ubicado en
app/assets/javacripts/collections/qrcodes.js.coffee

Y el contenido tambien quedara de la siguiente manera:
class Jqueryfileuploadbackbone.Collections.Qrcodes extends Backbone.Collection
 url: 'api/qrcodes'
 model: Jqueryfileuploadbackbone.Models.Qrcode

Nota Importante:Les recuerdo que deben de ser muy cuidadosos con los espacios y la identacion cualquier mal identado podria resultar en que no funciona correctamente nuestra aplicacion, es muy muy importante al final compartire el repo y el demo en heroku para que lo prueben y puedan ver en que se equivocaron y puedan hacerlo funcionar correctamente. Ahora como recordamos en nuestro router declaramos un div container-app que es donde se colgara toda nuestra aplicacion backbone en las vistas de rails para ello entonces debemos de agregar dicho div id en nuestra vista de index Archivo a modificar

app/views/qrcodes/index.html.erb


El cual vamos a modificar para poder utilizar haml(ya incluimos inicialmente la gema en Gemfile para poder hacerlo) con lo cual en lugar de la extension .erb vamos a renombrarlo para que se llame

app/views/qrcodes/index.html.haml


El contenido de nuestro nuevo archivo sera algo como lo siguiente:
%h1 List of Images
#container-app

Ahora queremos que se muestre algo desde nuestro template de backbone para lo cual vamos a trabajar con nuestra vista:
app/assets/javascripts/views/qrcodes_index.js.coffee

 
class Jqueryfileuploadbackbone.Views.QrcodesIndex extends Backbone.View

 template: JST['qrcodes/index']

 render: ->
 @$el.html @template
 @

Ahora vamos a cambiarle el nombre a nuestro template que usa esta vista para utilize haml para lo cual modificamos el siguiente archivo para cambiarle la extension el archivo original es:
app/assets/templates/qrcodes/index.jst.eco

Y lo renombramos para que quede de la siguiente manera:
app/assets/templates/qrcodes/index.jst.eco.haml

Ahora ingresamos un poco de informacion y texto para que se refleje en nuestra aplicacion en mi caso mi template queda con el siguiente codigo de ejemplo:

=link_to 'Add new Image', '#qrcode/add'


Despues de esto podremos ver nuestro mensaje en de some content.
Ahora vamos a pasar a lo que realmente debe de interesarnos que es el subir la imagen al servidor, para lo cual vamos a crear una nueva vista para subir imagenes para lo cual crearemos la siguiente vista ubicada en:

app/assets/javascripts/views/qrcodes/add_view.js.coffee


Con el siguiente contenido para poder utilizar jquery file upload en nuestra vista de backbone

class Jqueryfileuploadbackbone.Views.QrcodesAddView extends Backbone.View


 template: JST['qrcodes/add']

 render: ->
   @$el.html @template
   @uploadQrcode()
   @

 uploadQrcode: =>
   @$el.fileupload
   add: (e, data) ->
     $('#qrcode_image').hide()
     $('#fileupload-loading').html 'Cargando...'
     data.submit()

#We need to add this line to avoid close session in internet explorer
  formData: [
    name: 'authenticity_token'
    value: $("meta[name=\"csrf-token\"]").attr("content")
  ]

 done: (e, data) =>
   window.location = "/"


Ahora nuestra ruta a nuestro archivo qrcodes_router.js.coffee con el siguiente contenido queda actualizado

class Jqueryfileuploadbackbone.Routers.Qrcodes extends Backbone.Router
  routes:
    '' : 'showManageImages'
    'qrcode/add' : 'addNewImage'
showManageImages: -> @collection = new Jqueryfileuploadbackbone.Collections.Qrcodes()
 @collection.fetch() view = new Jqueryfileuploadbackbone.Views.QrcodesIndex collection: @collection
 $('#container-app').html view.render().el


addNewImage : ->
 view = new Jqueryfileuploadbackbone.Views.QrcodesAddView
 $('#container-app').html view.render().el


Despues de eso tenemos que crear nuestro template de la vista donde ira nuestro formulario de alta nuestro archivo de template queda ubicado en la siguiente direccion:

app/assets/templates/qrcodes/add.jst.eco.haml



= form_tag 'api/qrcodes', :multipart => true, :id => 'fileupload' do
  .fields
    = file_field(:qrcode, :image)
  #fileupload-loading{style: 'height: 50px; width: 200px;'}
  %br



Hasta este punto debemos de tener una imagen como esta en nuestra aplicacion en backbone [poner aqui imagen] Ahora si le damos click al link de agregar nueva imagen podremos ver que va a marcar un error por que todavia no hemos definido nuestro plugin para subir imagenes en backbone para lo cual lo que tenemos que hacer ahora es lo siguiente: Vamos a modificar el siguiente archivo:
app/assets/javascripts/application.js

Y agregamos la siguiente linea que es para poder utilizar el plugin en nuestra aplicacion pero usamos el basico por que si queremos usar el completo me encontre con problemas de que se quieren mandar llamar unos templates de javascript y en mi caso no los queria utilizar de esta forma nomas se utiliza lo basico que es suficiente para este ejemplo y aplicacion.
//=require jquery-fileupload/basic

Ahora para poder lo que hemos hecho tenemos que corre nuestro servidor con el siguiente comando:

$ rails server


Y podremos dar click en el link y nos mandara al formulario donde podremos examinar por una nueva imagen para subir pero hasta el momento nos falta todavia configurar algunos detalles para nuestra gema de paperclip para que podamos utilizarla en nuestra aplicacion en backbone, rails y jquery file upload. Ahora debemos de configurar el archivo

app/models/qrcode.rb


Y nuestro archivo modificado queda de la siguiente manera que es la configuracion mas basica de paperclip:
class Qrcode < ActiveRecord::Base
 attr_accessible :description, :image
 has_attached_file :image,
 :url => '/system/qrcodes/:filename'
end

Y modificamos nuestro controlador qrcodes_controller.rb para que pueda subir las imagenes al servidor y que guarde el registro  con el sugiente codigo es suficiente por ahora:
class QrcodesController < ApplicationController
 respond_to :json

 def index
 end

 def create
   respond_with Qrcode.create(params[:qrcode])
 end
end

Antes de que probemos nuestros uploads tenemos que correr nuevamente nuestras migraciones pendientes si no lo hicimos cuando instalamos paperclip
$ rake db:migrate

Si todo lo hicimos bien despues de examinar y subir una imagen al igual que yo podran verla en la carpeta public/qrcodes/nombresdeimagen.jpg por ejemplo.

En el siguiente post publicare como listar dichas imagenes que subimos al servidor
El repo se encuentra en https://github.com/heridev/jqueryfileuploadbackbone