Embed Size (px)
Citation preview
Location Tracker
Maciej Mensfeld
Presented by:
Maciej Mensfeld
Location Tracker
github.com/mensfeld
Location Tracker
Maciej Mensfeld
Please…
• …ask me to slow down, if I speak to quickly;• …ask me again, if I forget;
• …ask questions, if anything i say is not clear;• …feel free to share your own observations
Location Tracker
Location Tracker
Maciej Mensfeld
• Ruby on Rails•MongoDB• Mongoid
• Google Maps• Jquery• Bootstrap• JSON API
Location Tracker
Location Tracker
Maciej Mensfeld
• Map with locations• API
• Map should be searchable• Nice UI
• Way to distinct devices• Auto locations reloading (refresh)
Requirements
Location Tracker
Maciej Mensfeld
Location Tracker
Maciej Mensfeld
New Rails project
rails new LocationTracker --skip-active-record
Remove some stuff that we won’t use:• tests :-(• doc• lib
• app/helpers• db
Location Tracker
Maciej Mensfeld
Gemfilevim Gemfile << https://gist.github.com/mensfeld/10711795
source 'https://rubygems.org'
gem 'rails', '4.0.4'gem 'sass-rails', '~> 4.0.2'gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'gem 'pry'
gem 'bson_ext'gem 'mongoid', '~> 4.0.0.beta1', github: 'mongoid/mongoid'
gem 'execjs'gem 'responders'
gem 'haml'gem 'twitter-bootstrap-rails'
bundle install
Location Tracker
Maciej Mensfeld
Mongoid + Modelbundle exec rails g mongoid:config
vim config/mongodb.yml
What do we need to store?
• Current location (lat and lng)• Point color• Timestamps
vim app/models/location.rb
Location Tracker
Maciej Mensfeld
Location.rb
bundle exec rails console
Location Tracker
Maciej Mensfeld
Check it out!
Location Tracker
Maciej Mensfeld
Routes and controllers
Routes can tell us a lot about application
vim config/routes.rb
Routes should be resource based
Routes should RESTful (as much as they can be)
Location Tracker
Maciej Mensfeld
Routes and controllers
vim controllers/application_controller.rb
vim controllers/main_controller.rb
Location Tracker
Maciej Mensfeld
Routes and controllers
vim controllers/locations_controller.rb
Location Tracker
Maciej Mensfeld
RoR: Bootstrap
GRID:FLUIDGRID:FIXEDLAYOUT/FLUIDLAYOUTRESPONSIVEDESIGN:TYPOGRAPHY:CODEVIEWTABLES:FORMS:BUTTONS:ICONS:BUTTONGROUPS:TABS:PILLS:NAVLISTS:NAVBARBREADCRUMBS:PAGINATION:PAGER:INLINELABELSBADGES:PAGEHEADERUNIT:HEROUNITTHUMBNAILS:ALERTS:PROGRESSBARS:WELLSCLOSEICON:MODALS:DROPDOWNS:SCROLLS
PYTOGGLABLETABS:TOOLTIPS:POPOVERS:COLLAPSECAROUSEL:TYPEAHEAD
Sleek, intuitive, and powerful front-end framework for faster and easier web development.
github.com/twitter/bootstraptwitter.github.io/bootstrap
builtwithbootstrap.comwrapbootstrap.com
Chapter 3.2 – RoR: easier, faster, better
Maciej Mensfeld
Bootstrap installation
bundle install
Gemfile:gem "less-rails"
gem "twitter-bootstrap-rails"
rails generate bootstrap:install less
rails g bootstrap:layout application fluid
Location Tracker
Maciej Mensfeld
Bootstrap basics: grids
The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below
767px viewports, the columns become fluid and stack vertically.
Location Tracker
Maciej Mensfeld
Bootstrap basics: gridsFor a simple two column layout, create a .row and add the appropriate number
of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in
the parent).
Make any row "fluid" by changing .row to .row-fluid. The column classes stay the exact same, making it easy to flip between fixed and
fluid grids.
The fluid grid system uses percents instead of pixels for column widths. It has the same responsive capabilities as our fixed grid system, ensuring proper proportions for key
screen resolutions and devices.
Location Tracker
Maciej Mensfeld
Bootstrap basics: grids
Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example, .offset4 moves .span4 over
four columns.
Location Tracker
Maciej Mensfeld
Responsive bootstrap
For faster mobile-friendly development, use these utility classes for showing and hiding content by device. Below is a table of the available classes and their effect
on a given media query layout (labeled by device).
Location Tracker
Maciej Mensfeld
Responsive bootstrap
http://twitter.github.io/bootstrap/base-css.html
Location Tracker
Maciej Mensfeld
UI - Views
Location Tracker
Maciej Mensfeld
UI - Views
Location Tracker
Maciej Mensfeld
UI - Views
And a blank vim views/main/index.html.haml
Location Tracker
Maciej Mensfeld
Make it good looking and make it fast!
RoR: Bootstrap
Location Tracker
Maciej Mensfeld
Assets
•app/assets/fonts and app •app/assets/stylesheets• app/assets/javacripts
Copy them from Pendrive ;) there’s whole UI and Bootstrap there
But we still need some JS magic… ;)
Location Tracker
Maciej Mensfeld
Live long and prosper!
Presented by:
Maciej Mensfeld
github.com/mensfeld
