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

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

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

Recently uploaded

Code for Startup MVP (Ruby on Rails) Session 1