Code for Startup MVP (Ruby on Rails) Session 1

Learning to Code for
Startup MVP

Presented by Henry Shi

Introduction
Overview of Sessions

Goals and Expectations

What this session is Not

My background and experiences

Resources
Ruby on Rails Tutorial - Michael Hartl

CS 169: Software Engineering for Software as
a Service - Berkeley Course on Coursera

Rails for Zombies - CodeSchool

Various resources around the web

About Me
• Henry Shi
o CTO, BetterU (Rails powered ☺)
o Tech:
Bloomberg Sports
• Statistics and Predictive Analytics for MLB
• Rails Powered App, Java/C++ services
Scotia Capital
• Worked on Derivative Trading Engine (Interest rate swaps)
• Java, J2EE
o Teachings:
Student Leadership Program Facilitator
Calculus Teaching Assistant

Agenda - Monday October 29
1. The Web and How it Works

2. Git/Github

3. Rails and Ruby

4. Heroku

Prework – Setup
• Windows (not recommended if possible):
o http://railsinstaller.org/
• OSX:
o http://railsinstaller.org/
o This includes osx-gcc-installer (200mb)
• Linux:
o http://blog.sudobits.com/2012/05/02/how-to-install-
ruby-on-rails-in-ubuntu-12-04-lts/

Note: this may take some time

Prework - Git
Install git if not already included:
http://www.git-scm.com/book/en/Getting-
Started-Installing-Git

Configure Git:
git config --global user.name "Your Name“
git config --global user.email
your.email@example.com

The Web
Client-Server
HTTP, URI
HTML, CSS
3 Tier Architecture
MVC

The Web - Client Server
The web is fundamentally request/reply
oriented

Client: ask questions on behalf of users
Server: wait for & respond to questions, serve
many clients
Web browser Web site
Internet

Contrast to P2P

The Web - HTTP
Hypertext Transfer Protocol: an ASCII-based
request/reply protocol for transferring information on the Web

HTTP request includes:
• Request method (GET, POST, etc.) curl –IL “www.betteru.org”

• Uniform Resource Identifier (URI)
• HTTP protocol version
• Headers
HTTPstatus codes:
HTTP response from server: 2xx — all is well
• Protocol version and Status Code 3xx — resource moved
• Response Header 4xx — access problem
• Response Body 5xx — server error

The Web - HTTP
• Problems in HTTP:
o HTTP is Stateless
How to guide use through a flow of pages?
IP? String in URI?
Cookies
o URI naming
http://www.amazon.com/gp/product/B0000262LH/ref=s9subs_c3_img1-
rfc_p_19_32_31_9_9?pf_rd_m=A1IDDPB1NC5TQ&pf_rd_s=center-
&pf_rd_r=1FMGVYJN44H7WQD9YCR9&frd_t=101&pf_rd_p=139524591&pf_rd_i=301128

^ WTFF?
http://www.amazon.com/cd/attwenger/dog

REST

HTML
• Hypertext Markup Language
<p>This is an element</p>

<br />

<img src="welcome.jpg" id="welcome"/>

<h1 class=”foo”>
This is an element with an attribute
</h1>

• Document = Hierarchical collection of elements
• Element can have attributes (many optional) – id, class

HTML5
• HTML5 is the future
http://slides.html5rocks.com

Current support is not complete
Different Browswers = Different Results
Don’t use IE

The Web - CSS
• Cascading Style Sheets
o visual appearance of page described in separate
document (stylesheet)
o separate designers’ & developers’ concerns

• HTML markup should contain NO visual
styling information

CSS
• HTML id & class attributes important in CSS
o ( # ) id – must be unique on page
o (.) class – can be attached to many elements
o element
// id selector
#main { background-color: orange;}

// class selector
.sidebar { color: black; }

// element selector
span { font-size: 24px;}

// mixed
span.sidebar { color: #C5C5C5; }

The Web – 3Tiered Architecture

3Tiered Architecture
• Old Days:
o Web pages were collection of text files (eg. CS course websites)
• Web 1.0:
o run a program to generate the “page”
o Template embedded with code snippets (Php sites)
o Eventually, code became “tail that wagged the dog”
and moved out of the Web server
• Web 2.0:
o Sites that are really programs (SaaS)
o Separation of duties, structured

3Tiered Architecture
• Frameworks helps you to: Filesystem
persistence
o “map” URI to correct programs or database

& function?
o pass arguments? your app logic (app)
o invoke program on server? Common Gateway
o handle persistent storage? Interface (CGI)

o handle cookies? presentation (Web
server)
o handle errors?
o package output back to user? client (browser)

3Tiered Architecture - Summary
• Browser requests web resource (URI) using HTTP
– HTTP is a simple request-reply protocol that relies on TCP/IP
– In SaaS, most URI’s cause a program to be run, rather than a
static file to be fetched
• HTML is used to encode content, CSS to style it visually
• Cookies allow server to track client
Browser automatically passes cookie to server on each request
Server may change cookie on each response
Typical usage: cookie includes a handle to server-side information
That’s why some sites don’t work if cookies are completely disabled
• Frameworks make all these abstractions convenient for
programmers to use, without sweating the details
• ...and help map SaaS to 3-tier, shared-nothing architecture

MVC
• Goal: separate organization of data (model)
from UI & presentation (view) by introducing
controller
o mediates user actions requesting access to data
o presents data for rendering by the view
• User actions Controller • Update data
• Directives for
rendering data

View Model

• Data provided to views
through controller

MVC
• Can I see it?
o View
• Is it business logic?
o Controller
• Is it a reusable class logic?
o Model

• More later….

GIT/GITHUB
• What is GIT?
• Distributed Version Control System (DVCS)
• Why should I care?
o Never lose data or accidentally overwrite, delete files
o Collaborate with peers anywhere and stay in sync
automatically (no more _v1, _v2, _final, _final_final…)
o Compare and track changes over time, and easily
revert changes
o Deploy code to real web

Git - Distributed
• Better than CVS, SVN, etc

GitHub – Social Coding
GitHub will be our
central repository

Contains the master
version of our code

GitHub account is the
LinkedIn for
developers

Git – Basics
Git init
o Start a git repository in current directory

• Make changes
o Eg. Touch readme.txt

Git status
o Check what has changed since previous commit

Git add (filename)
o Adds files to staging area (about to be committed)
o Git add . To add everything

Git commit –m “my message”
o Commits changes

Git - Intermediate
Git Branch branch_name
o Create a new branch (parallel code) from current
commit point
Git checkout branch_name
o Switch to another branch
Git Merge branch_name
o Merge branch_name to current branch

Git – Working Remotely and
Collaboration
• git remote add origin
git@github.com:henrythe9th/foo.git
o add a remote repository (named origin) to the repo
o In this case, our GitHub repo is the origin

Git pull
o Pull latest changes from origin

Git push
o Push changes to origin

Code for Startup MVP (Ruby on Rails) Session 1

Rails and Ruby

Programming Web Framework
Language

Our focus is on Rails and how to rapidly
prototype Startup MVPs

Rails
• Ruby on Rails is an open-source web
framework that’s optimized for programmer
happiness and sustainable productivity.

• It lets you write beautiful code by favoring
convention over configuration.

• 80/20 Rule =>great for Startup MVP

Rails – Opinionated Software
• Convention over Conﬁguration
o Decrease the number of decisions needed
gaining simplicity but without losing ﬂexibility

• Donʼt Repeat Yourself (DRY)
Don’t reinvent the wheel

• Architecture:
o MVC (Model – View – Controller)
o ORM (Object Relational Mapping)
o RESTful (Representational State Transfer)

Ruby – Programmer’s Best Friend
• Ruby is a dynamic, open source
programming language with a focus on
simplicity and productivity. It has an
elegant syntax that is natural to read and
easy to write.

Ruby – Rocks!
• See slides 44 – 92 of slides:
http://www.slideshare.net/madrobby/ruby-on-
rails-introduction

Ruby on Rails – First App
• Generators to make first application!
• Mkdir first_app
• Cd first_app
• rails new first_app
o You will see that a bunch of files created by Rails
automatically – this is the generator scaffolding at work

First App – Gemfile
• Open Gemfile
• Change line: gem 'sqlite3‘ to
group :development do
gem 'sqlite3', '1.3.5‘
end
• Add:
group :production do
gem 'pg', '0.12.2'
end
• Run:
bundle install --without production

First App – Running Server
• Run:
• rails server

First App - GitHub
• Create new repo on GitHub – First App

First App – Git Commit and Push
git init
git add .
git commit –m “Initial Commit of First App”
git remote add origin
git@github.com:<username>/first_app.git
git push –u origin master

First App - Users
git checkout –b users
o Create and switch to new branch called users
rails generate scaffold User name:string
email:string
o Use rails scaffolding to generate users!
bundle exec rake db:migrate
o Apply the user changes to the database
rails s

Commit your code using Git!

First App - Users
Visit localhost:3000/users

Localhost:3000/users/new

Everything was created automatically by rails
generator! And it all just works!

First App – Users MVC
• Model: /app/models/user.rb
• Controller: /app/controllers/users_controller.rb

• View: /app/views/users/

First App - Microposts
rails generate scaffold Micropost content:string
user_id:integer
o Use rails scaffolding to generate microposts!
bundle exec rake db:migrate
Edit: app/models/micropost.rb

Rails s
o Submitting a micropost with more than 140 chars will
give error (Automatically handled by Rails!)

First App – Microposts & Users

• One of Rail’s most powerful features is ability
to form associations between data model
• each user potentially has many microposts

• Edit: app/models/user.rb
• Edit: app/models/micropost.rb

First App – Microposts and Users
• That’s it! Rails automagically set up the
association for us. Watch how powerful it is:

Rails console

first_user = User.first
first_user.microposts
o Rails automagically knows to find all of the first user’s
microposts!

First App – Final Commit & Merge
Commit your code using git

Merge back into master:
Git checkout master
Git merge users

First App - Heroku
What is Heroku?
•a hosted platform built specifically for
deploying Rails and other web applications in
1 command
•Best thing since sliced bread
•YC Class 08 (sold for $212M to Salesforce)

• Interestingly, they are built on top of Amazon
AWS, they just provide an easy abstraction

First App – Heroku Setup
• Sign up for Heroku (it’s Free!) http://api.heroku.com/signup

• Install the Heroku Toolbelt https://toolbelt.heroku.com/

• Heroku login
• Heroku create
o This will create a heroku app and tell you the url of
your app
• Git push heroku master
o This’ll deploy your code to Heroku. Let it do its magic!
• Heroku run rake db:migrate
• Heroku open ☺

Rails Motivation
• Basecamp (the origin of Rails)
• Twitter (still using it for frontend)
• Scribd/Slideshare
• Hulu
• GitHub
• Shopify
• Groupon/Livingsocial
• YellowPages

Next Time…
• Understanding Ruby
• Exploring Rails deeper
• Building toward our Twitter app with user
signup/sign in, posts, friends, followers,
feeds, etc
• Stay Tuned….

• Thanks!
• Suggestions, Feedback, Contact:
henrythe9th@gmail.com

Code for Startup MVP (Ruby on Rails) Session 1

More Related Content

What's hot (20)

Similar to Code for Startup MVP (Ruby on Rails) Session 1 (20)

Recently uploaded (20)

Code for Startup MVP (Ruby on Rails) Session 1