Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
TDC 2014 - Solucionando o problema de Uploads e...
Search
Rafael Macedo
August 07, 2014
Programming
1
150
TDC 2014 - Solucionando o problema de Uploads em Apps no Heroku
Rafael Macedo
August 07, 2014
Tweet
Share
More Decks by Rafael Macedo
See All by Rafael Macedo
Modularização de código JS
macedorafael
0
210
GuruSP - Solucionando o problema de Uploads em Apps no Heroku
macedorafael
2
96
Aplicações Realtime com XMPP
macedorafael
3
200
Web in the cloud with ruby
macedorafael
2
370
Other Decks in Programming
See All in Programming
Ebitengineの1vs1ゲーム WebRTCの活用
ponyo877
0
380
オートマトン学習しろ / Do automata learning
makenowjust
3
130
REXML改善のその後
naitoh
0
190
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
320
GraphQLとGigaViewer for Apps
numeroanddev
2
110
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
280
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
1k
Swiftコードバトル必勝法
toshi0383
0
170
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
890
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
420
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
32k
Facilitating Awesome Meetings
lara
49
6k
How to train your dragon (web standard)
notwaldorf
85
5.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Why Our Code Smells
bkeepers
PRO
334
56k
We Have a Design System, Now What?
morganepeng
48
7.1k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
Web development in the modern age
philhawksworth
205
10k
Building an army of robots
kneath
302
42k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
24
610
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.8k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
36
2.1k
Transcript
Solucionando o problema de Uploads em Apps no Heroku
@macedorafael http://github.com/macedo Rafael Macedo
@macedorafael http://github.com/macedo Macedo
None
None
“O que pode dar errado num mero upload de uma
foto?”
None
None
heroku create
heroku create git push heroku
None
None
30 segundos
! ! ! ! “comum” Web Browser
! ! ! ! “comum” Web Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
None
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
! ! ! ! Heroku Rails AWS S3 Image Magick
Browser ! ! ! ! Resque/Sidekiq Worker
None
Processamento background
Processamento background Direct Upload to S3
heroku addons
None
None
None
http://cloudinary.com/
upload
•JPG, PNG, GIF, BMP, ICO, TIFF and PDF •API simples
de upload •Upload pelo servidor ou diretamento pelo browser
storage
•Storage redundante e com alta disponibilidade •Backups automáticos
delivery
•CDN •Caching
Manipulação e Processamento
resize filter crop rotate face detection effects
resize filter crop rotate face detection effects …
Gerenciamento
None
None
None
“A little less conversation a little more ACTION
/tmp/carlos-mexicano.jpg
gem 'cloudinary'
# config/cloudinary.yml development: cloud_name: 'dwqsgdejq' api_key: '91230987435979324' api_secret: '**********************'
Cloudinary::Uploader.upload( '/tmp/carlos-mexicano.jpg' )
{ "public_id"=>"babtchij80xduih97me0", "version"=>1407375612, "signature"=>"00b0721d1af7fd0c69eb3bc112e89022406bd027", "width"=>3096, "height"=>4128, "format"=>"jpg", "resource_type"=>"image", "created_at"=>"2014-08-07T01:40:12Z", "bytes"=>4280618,
"type"=>"upload", "etag"=>"97358d56df90e5ea49e64d76c1108533", "url"=>"http://res.cloudinary.com/dwqsgdejq/image/ upload/v1407375612/babtchij80xduih97me0.jpg", "secure_url"=>"https://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/babtchij80xduih97me0.jpg" } Cloudinary::Uploader.upload( '/tmp/carlos-mexicano.jpg' )
\o/
http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
http://res.cloudinary.com/dwqsgdejq/ image/upload/v1407375612/ babtchij80xduih97me0.jpg
None
w_160,h_160,c_thumb, g_face
w_160,h_160,c_thumb, g_face Processa mento
w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia
w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia Direct Upload
w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia Direct Upload h_160,w_160,c_thumb, e_blur_faces,g_face
w_160,h_160,c_thumb, g_face Processa mento w_400,h_160,c_scale, r_max,e_sepia Direct Upload h_160,w_160,c_thumb, e_blur_faces,g_face
http://cloudinary.com/documentation/ image_transformations
None
None
gem 'attachinary'
# config/application.rb require File.expand_path('../boot', __FILE__) require ‘rails/all' #active_record or
mongoid require ‘attachinary/orm/active_record' …
# config/application.rb require File.expand_path('../boot', __FILE__) require ‘rails/all' #active_record or
mongoid require ‘attachinary/orm/active_record' …
$ rake attachinary:install:migrations $ rake db:migrate
# config/routes.rb Rails.application.routes.draw do devise_for :users resources :users, only: [:update]
root to: 'album#show' mount Attachinary::Engine => '/attachinary' end
# config/routes.rb Rails.application.routes.draw do devise_for :users resources :users, only: [:update]
root to: 'album#show' mount Attachinary::Engine => '/attachinary' end
# app/models/user.rb class User < ActiveRecord::Base ... has_attachment :avatar,
accept: [:gif, :jpg, :png] has_attachments :photos, maximum: 10 end
<%= simple_form_for @user do |f| %> <%= f.attachinary_file_field :avatar %>
<%= f.attachinary_file_field :photos %> <%= f.submit %> <% end %> # app/views/users/_form.html.erb
/* app/assets/javascript/application.js */ //= require jquery //= require cloudinary //=
require attachinary //= require_self $(function() { $('.attachinary-input').attachinary(); });
<%= cloudinary_js_config %> # app/views/layouts/application.html.erb
None
<%= cl_image_tag(@photo.path, width: 160, height: 160) %>
<%= cl_image_tag(@photo.path, width: 160, height: 160) %>
<%= cl_image_tag(@photo.path, width: 160, height: 160) %> <%= cl_image_tag(@photo.path, width:
160, height: 160, crop: :fit) %>
<%= cl_image_tag(@photo.path, width: 160, height: 160) %> <%= cl_image_tag(@photo.path, width:
160, height: 160, crop: :fit) %>
<%= cl_image_tag(@photo.path, width: 160, height: 160) %> <%= cl_image_tag(@photo.path, width:
160, height: 160, crop: :fit) %> <%= cl_image_tag(@photo.path, width: 160, height: 160, crop: :thumb, gravity: :face) %>
<%= cl_image_tag(@photo.path, width: 160, height: 160) %> <%= cl_image_tag(@photo.path, width:
160, height: 160, crop: :fit) %> <%= cl_image_tag(@photo.path, width: 160, height: 160, crop: :thumb, gravity: :face) %>
None
None
None
$$$
None
10 GB Storage
10 GB Storage 40 GB Bandwidth
Cloudinary
$35
S3
$7
None
???
None
None
$7
$42
Conclusão
“O que pode dar errado num mero upload de uma
foto?”
Muita coisa!
None
Processamento background
Processamento background Direct Upload
http://fileupload-tdc2014- example.herokuapp.com/
https://github.com/macedo/ cloudinary_image_uploader_example
http://www.akitaonrails.com/2014/03/26/ heroku-tips-s3-direct-upload-carrierwave- sidekiq
None
OBRIGADO
OBRIGADO ?