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 Courseraa Service - Berkeley Course on Coursera

Rails for Zombies - CodeSchool

Various resources around the web

About Me

• Henry Shio CTO, BetterU (Rails powered ☺)

o Tech:

� Bloomberg Sports•

� 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 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.emailyour.email@example.com

The Web

Client-Server

HTTP, URI

HTML, CSS

3 Tier Architecture3 Tier Architecture

MVC

The Web - Overview

The Web - Client Server

The web is fundamentally request/replyoriented

Client: ask questions on behalf of usersClient: ask questions on behalf of users

Server: wait for & respond to questions, serve many clients

Contrast to P2P

Web browser Web siteInternet

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”• Request method (GET, POST, etc.)

• Uniform Resource Identifier (URI)

• HTTP protocol version

• Headers

HTTP response from server:

• Protocol version and Status Code

• Response Header

• Response Body

HTTPstatus codes:

2xx — all is well

3xx — resource moved

4xx — access problem

5xx — server error

curl –IL “www.betteru.org”

The Web - HTTP

• Problems in HTTP:o HTTP is Stateless

� How to guide use through a flow of pages?

� IP? String in URI?� 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

The Web – HTML & CSS

HTML

• Hypertext Markup Language

<p>This is an element</p><br /><!-- comment-->

• Document = Hierarchical collection of elements

• Element can have attributes (many optional) – id, class

<br /><!-- comment--><img src="welcome.jpg" id="welcome"/><h1 class=”foo”>This is an element with an attribute</h1>

HTML - DOM

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 Sheetso 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 CSSo ( # ) 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 selectorspan { font-size: 24px;}// mixedspan.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 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:o “map” URI to correct programs

& function?

o pass arguments?

Filesystemor database

your app

persistence

logic (app)o pass arguments?

o invoke program on server?

o handle persistent storage?

o handle cookies?

o handle errors?

o package output back to user?

your app logic (app)

Common Gateway

Interface (CGI)

presentation (Web

server)

client (browser)

3Tiered Architecture

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• 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

The Web - MVC

MVC

• Goal: separate organization of data (model) from UI & presentation (view) by introducing controllero mediates user actions requesting access to datao mediates user actions requesting access to data

o presents data for rendering by the view

Controller• User actions

• Directives for

rendering data

• Update data

• Data provided to views

through controller

ModelView

MVC

• Can I see it?o View

• Is it business logic?o Controller

•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?• 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 inito Start a git repository in current directory

• Make changeso Eg. Touch readme.txt

Git statuso Check what has changed since previous commito 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_nameo Create a new branch (parallel code) from current

commit point

Git checkout branch_nameGit checkout branch_nameo Switch to another branch

Git Merge branch_nameo Merge branch_name to current branch

Git – Working Remotely and

Collaboration

• git remote add origin git@github.com:henrythe9th/foo.gito add a remote repository (named origin) to the repo

o In this case, our GitHub repo is the origino In this case, our GitHub repo is the origin

Git pullo Pull latest changes from origin

Git pusho Push changes to origin

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 programmerhappiness 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 Configurationo 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)

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 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• Cd first_app

• rails new first_appo You will see that a bunch of files created by Rails

automatically – this is the generator scaffolding at work

RoR – First App

RoR – Directory Structure

First App – Gemfile

• Open Gemfile• Change line: gem 'sqlite3‘ to

group :development do

gem 'sqlite3', '1.3.5‘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 remote add origin git@github.com:<username>/first_app.git

git push –u origin master

First App - Users

git checkout –b userso Create and switch to new branch called users

rails generate scaffold User name:stringemail:stringemail:stringo Use rails scaffolding to generate users!

bundle exec rake db:migrateo 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

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:stringuser_id:integero Use rails scaffolding to generate microposts!

bundle exec rake db:migratebundle exec rake db:migrate

Edit: app/models/micropost.rb

Rails so 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 consoleRails console

first_user = User.first

first_user.micropostso 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 masterGit 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 command1 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• Heroku createo This will create a heroku app and tell you the url of

your app

• Git push heroku mastero 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• 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, signup/sign in, posts, friends, followers, feeds, etc

• Stay Tuned….

• Thanks!

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