RubyWebDev

From ITPedia

Jump to: navigation, search

Meeting times TBA.

RubyWebDev is a drive-in, drop-in student run "class" taught by Frankie Cheung, Miguel Bermudez and Steve Klise.

There is a companion site at http://itpwebdev.github.com

  • 9/14: HTML/CSS
  • 9/21: jQuery & the DOM
  • 9/28: Ruby + HTTP = Sinatra
  • 10/5: Sinatra + Datamapper
  • 10/12: Sinatra + Datamapper
  • 10/19: AJAX with jQuery

Contents

Intro to Ruby

TBA

- getting started with the Ruby programming language

- understanding rubygems and installing libraries

Links:

Learn To Program by Chris Pine

_why's Poignant Guide To Ruby, especially Chapter 3: A Quick (and Hopefully Painless) Ride Through Ruby (with Cartoon Foxes)

(well-formatted PDF of the above article)

Intro to Sinatra and Datamapper

TBA

- intro to HTTP verbs: get, post, put, delete

- basics of web application building with Sinatra

- storing data with Datamapper

DataMapper documentation

Greg's Color example

Links:

Sinatra Readme

Whirlwind Tour of DataMapper

More Sinatra and Datamapper

TBA

- more advanced Sinatra techniques:

- templates, authentication

Deploying Sinatra apps with Heroku and storing images with Amazon S3

TBA

  • Talk about deploying to Heroku
    • walk people through turning their project into a git repo
    • config.ru
    • create heroku account
    • heroku gem usage to create new heroku project
    • .gems file for listing gems
  • Intro to Amazing Web Services
    • what it is, what's available
    • S3, EC2, etc.
    • getting credentials setup
  • Basic send image to S3 from ruby example
    • create a bucket
  • Integrate that with Sinatra
    • multipart post
    • in Sinatra action send it to S3

Links:

Post an image to s3 Sinatra app

Layout with CSS

TBA

- understanding the box model

- using Blueprint CSS for easy grid-based layout

Links:

Blueprint CSS


Intro to jQuery

TBA

- selectors

- style manipulation

- events

Links:

live-jquery example and slides

jquery.com

Ajax with jQuery

TBA

- client and server role in AJAX requests

- intro to XML and JSON data formats

- the jQuery AJAX methods

- callbacks that receive data

- GETting data from the Flickr API

- explanation of JSON-P

- POSTing data to our color app

- success and failure


Links:

json.org

Other Tips and Tricks

Sending email from Sinatra on Heroku

Is pretty easy using the Pony gem and the Sendgrid add-on. Example app here: Sinatra Heroku Email Demo with Pony. Documentation about Sendgrid is here: heroku sendgrid docs and details about the Pony gem are here: benprew/pony

Running code occasionally with cron on Heroku

"cron" is a unix utility for scheduling a program to run regularly, eg. once an hour or once a day. Heroku offers a similar feature via their cron addon. You put your ruby code in a Rakefile and it Heroku automatically runs it. See my example app for details: Heroku Cron Example

Keeping your databases in sync between Heroku and your local machine

Here's one way to keep your data in sync. On your local machine, you can use a sqlite database by adding the following line to setup DataMapper.

DataMapper.setup(:default, ENV['DATABASE_URL'] || 'sqlite3://my.db')

Everything done with DataMapper goes into your "my.db" sqlite database when you are working locally. However, when you push your app to Heroku, your Heroku database will be empty, but your app will be using it.

To sync your Heroku database with your local database, you can follow the directions here: Importing and Exporting Your Heroku Data. After you set things up, you can use "heroku db:push" to export your data into the Heroku database, or "heroku db:pull" to get the data from the Heroku database back into your local sqlite3 database.

Doing geo-search with DataMapper

dm-geokit looks promising

Project Showcase

istheflooropen.com

istheflooropen.com is a simple app that tweets and updates a web status of when the floor is open and closed as determined by a big knife switch installed near the elevators. It is designed to be accessed by an arduino with an ethernet shield to update the status. source on GitHub

Conway's Game of Life

Conway's Game of Life is a simulation of the cellular automaton describe by John Conway in 1970. The front end is served up mostly with Processing.js with jQuery while the backend is handled by Sinatra and DataMapper. Source on Github.

As Always

As Always is a 'zine. Uses Amazon S3 services to serve up images. Source on Github

EXEgist

EXEgist was built for Designing Conversation Spaces class. The idea behind EXEgist is to provide an interface that encourages long-form, in-depth, position-specific text annotation, inspired by exegetic paradigms like the Talmud and old-school approaches to footnotes, but with the dynamic filtering and view controls afforded by the web browser. Source on Github

All comments are attached to specific sentences, including both sentences in the main body text and sentences within other comments. Clicking a sentence reveals or hides the attached comments. Blue asterisks indicate sentences with attached comments.

Urban Insider

Urban Insider is a mobile web app that culls user-generated tips&tricks about NYC and allows users to gather offline to test them out in organized crawls. The front end is basic html and jQuery while the backend is handled by Sinatra and DataMapper. Wireframes and user experience have been mapped out and the code and interface are TK.

Link is not working

Trade Them

Trade Them is a game where players can trade shares in each other. The free market of Trade Them is based around people's every day activities and publicizing them on Twitter. Source on Github.

Destinations

A globe trotting big game. Travelers pick flights around the globe and accrue points based on the countries they control. Destinations

Playground Society

Playground Society is a web app that encourages more play in people's lives by sending them "play missions" 2-3 times per week via SMS. Players can upload photos and write about how they accomplished their play missions and connect with others who have gone through the same experience.

Personal tools