The Viewfinder

http://www.meetup.com/nyc-on-rails/

Presentation by Eugene, Erin & Jesse for NYC on Rails, on April 4th, 2013. Introducing ViewFinder, our instagram powered game. ViewFinder turns your Instagram feed into a location guessing game. Drag & drop map markers to where you think a photo was taken. Try to get as close to the photo location as possible and challenge your friends to beat your guess. Get to know New York City through the eyes of New Yorkers.

Gems used: Geocoder, Figaro, Instagram, Sidekiq, Twitter Bootstrap

https://github.com/eewang/view_finder

Transcript

1. DESIGNING AN INSTAGRAM GAME.
2. VFYW CREDITS
3. viewfinder.io wheresthatgram.com
4. THE PROCESS
5. IMAGE SLIDERS Trial & Error : 1. Twitter Bootstrap’s Carousel •  https://github.com/seyhunak/twitter-bootstrap-rails 2. Foundation’s Orbit •  http://foundation.zurb.com/docs/rails.html 3. ResponsiveslideJs •  http://responsive-slides.viljamis.com/
6. TEST 1 html
7. TEST 2 html
8. TEST 3 rails
9. VERSION 1
10. VERSION 2
11. VERSION 3
12. SO YOU WANT TO MAKE YOUR OWN INSTAGRAM APP??
13. INSTAGRAM API Register •  http://instagram.com/developer/ •  Assign Oauth client_id and client_secret for your application Authenticate •  User authenticates & authorizes application with Instagram Start making requests! •  Make requests to Instagram API Endpoints
14. CONFIG/ROUTES.RB: match '/auth/instagram/callback' => ’sessions#callback'
15. Hide your kids, Hide your wife, Hide your So dumb, so dumb, so dumb
16. FIGARO GEM INSTAGRAM_APP_ID: (randomrandomrandom) INSTAGRAM_SECRET: (randomrandomrandom) INSTAGRAM_TOKEN: (randomrandomrandom) https://github.com/laserlemon/figaro
17. class InstagramController < ApplicationController def index Instagram.configure do |config| config.client_id = ENV['INSTAGRAM_APP_ID'] config.client_secret = ENV['INSTAGRAM_SECRET'] config.access_token = ENV['INSTAGRAM_TOKEN'] end end end Good info: http://railsapps.github.com/rails-environment-variables.html 'INSTAGRAM_APP_ID' 'INSTAGRAM_SECRET' 'INSTAGRAM_TOKEN'
18. https://github.com/Instagram/instagram-ruby-gem
19. Instagram.client(:access_token => session[:access_token]) .images .standard_resolution .url
20. VIEW <ul> <% @yourfeed.each do |f| %> <li style="list-style: none;"> <%= image_tag f.images.standard_resolution.url %> <% end %> </ul> Instagram API Gem: instagram-ruby-gem / lib / instagram / client / users.rb CONTROLLER session[:access_token] = response.access_token # access token from user who just logged in client = Instagram.client(:access_token => session[:access_token]) @yourfeed = client.user_media_feed
21. LET’S MAKE A GUESS
22. GAME PLAY
23. META-WHA?
24. ASYCHRONOUS TASKS
25. location demo
26. authentication demo
27. (audience clap)
28. eewang77 erinandiphone rojblakex @view_finder_io Follow Us on Instagram: Twitter: viewfinderflatiron