Location Tracker Maciej Mensfeld Presented by: Maciej Mensfeld Location Tracker dev.mensfeld.pl 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

Maciej Mensfeld Ruby on Rails MongoDB Mongoid Google Maps Jquery Bootstrap JSON API 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 Gemfile vim Gemfile << source ' 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', '~> beta1', github: 'mongoid/mongoid' gem 'execjs' gem 'responders' gem 'haml' gem 'twitter-bootstrap-rails' bundle install

Location Tracker Maciej Mensfeld Mongoid + Model bundle 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:NAVLIS TS:NAVBARBREADCRUMBS:PAGINATION:PAGER:INLINELABELSBADGES:PAGEHEA DERUNIT:HEROUNITTHUMBNAILS:ALERTS:PROGRESSBARS:WELLSCLOSEICON:M ODALS:DROPDOWNS:SCROLLSPYTOGGLABLETABS:TOOLTIPS:POPOVERS:COLLAPS ECAROUSEL:TYPEAHEAD Sleek, intuitive, and powerful front-end framework for faster and easier web development. github.com/twitter/bootstrap twitter.github.io/bootstrap builtwithbootstrap.com wrapbootstrap.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: grids For 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

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 dev.mensfeld.pl github.com/mensfeld