First Session on Learning to Code for Startup MVP's using Ruby on Rails.
This session covers the web architecture, Git/GitHub and makes a real rails app that is deployed to Heroku at the end.
Thanks,
Henry
3. 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
4. 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
5. Agenda - Monday October 29
1. The Web and How it Works
2. Git/Github
3. Rails and Ruby
4. Heroku
6. 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
10. 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
11. 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
12. 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
14. HTML
• Hypertext Markup Language
<p>This is an element</p>
<br /><!-- comment-->
<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
16. HTML5
• HTML5 is the future
http://slides.html5rocks.com
Current support is not complete
Different Browswers = Different Results
Don’t use IE
17. 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
18. 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; }
20. 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
21. 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)
23. 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
25. 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
26. MVC
• Can I see it?
o View
• Is it business logic?
o Controller
• Is it a reusable class logic?
o Model
• More later….
27. 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
29. GitHub – Social Coding
GitHub will be our
central repository
Contains the master
version of our code
GitHub account is the
LinkedIn for
developers
30. 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
31. 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
32. 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
33.
34. Rails and Ruby
Programming Web Framework
Language
Our focus is on Rails and how to rapidly
prototype Startup MVPs
35. 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
36. Rails – Opinionated Software
• Convention over Configuration
o Decrease the number of decisions needed
gaining simplicity but without losing flexibility
• 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)
37. 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.
38. Ruby – Rocks!
• See slides 44 – 92 of slides:
http://www.slideshare.net/madrobby/ruby-on-
rails-introduction
39. 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
42. 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
43. First App – Running Server
• Run:
• rails server
44. First App - GitHub
• Create new repo on GitHub – First App
45. 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
46. 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!
47. First App - Users
Visit localhost:3000/users
Localhost:3000/users/new
Everything was created automatically by rails
generator! And it all just works!
50. 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!)
51. 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
52. 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!
53. First App – Final Commit & Merge
Commit your code using git
Merge back into master:
Git checkout master
Git merge users
54. 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
55. 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 ☺
56. Rails Motivation
• Basecamp (the origin of Rails)
• Twitter (still using it for frontend)
• Scribd/Slideshare
• Hulu
• GitHub
• Shopify
• Groupon/Livingsocial
• YellowPages
57. 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