Learning to Code forStartup MVPPresented by Henry Shi
IntroductionOverview of SessionsGoals and ExpectationsWhat this session is NotMy background and experiences
ResourcesRuby on Rails Tutorial - Michael HartlCS 169: Software Engineering for Software as a Service - Berkeley Course on...
About Me• Henry Shi  o CTO, BetterU (Rails powered ☺)  o Tech:      Bloomberg Sports        • Statistics and Predictive An...
Agenda - Monday October 291. The Web and How it Works2. Git/Github3. Rails and Ruby4. Heroku
Prework – Setup• Windows (not recommended if possible):  o http://railsinstaller.org/• OSX:  o http://railsinstaller.org/ ...
Prework - GitInstall git if not already included:http://www.git-scm.com/book/en/Getting-  Started-Installing-GitConfigure ...
The WebClient-ServerHTTP, URIHTML, CSS3 Tier ArchitectureMVC
The Web - Overview
The Web - Client ServerThe web is fundamentally request/reply  orientedClient: ask questions on behalf of usersServer: wai...
The Web - HTTPHypertext Transfer Protocol: an ASCII-based    request/reply protocol for transferring information on the We...
The Web - HTTP• Problems in HTTP:  o HTTP is Stateless      How to guide use through a flow of pages?      IP? String in U...
The Web – HTML & CSS
HTML• Hypertext Markup Language         <p>This is an element</p>         <br /><!-- comment-->         <img src="welcome....
HTML - DOM
HTML5• HTML5 is the futurehttp://slides.html5rocks.comCurrent support is not completeDifferent Browswers = Different Resul...
The Web - CSS• Cascading Style Sheets  o visual appearance of page described in separate    document (stylesheet)  o separ...
CSS• HTML id & class attributes important in CSS  o ( # ) id – must be unique on page  o (.) class – can be attached to ma...
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 pro...
3Tiered Architecture• Frameworks helps you to:          Filesystem                                                     per...
3Tiered Architecture
3Tiered Architecture - Summary• Browser requests web resource (URI) using HTTP   – HTTP is a simple request-reply protocol...
The Web - MVC
MVC• Goal: separate organization of data (model)  from UI & presentation (view) by introducing  controller  o mediates use...
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...
Git - Distributed• Better than CVS, SVN, etc
GitHub – Social Coding                         GitHub will be our                         central repository              ...
Git – BasicsGit init     o   Start a git repository in current directory•   Make changes     o   Eg. Touch readme.txtGit s...
Git - IntermediateGit Branch branch_name  o Create a new branch (parallel code) from current    commit pointGit checkout b...
Git – Working Remotely andCollaboration• git remote add origin  git@github.com:henrythe9th/foo.git  o add a remote reposit...
Rails and Ruby Programming               Web Framework  LanguageOur focus is on Rails and how to rapidly prototype Startup...
Rails• Ruby on Rails is an open-source web  framework that’s optimized for programmer  happiness and sustainable productiv...
Rails – Opinionated Software• Convention over Configuration  o Decrease the number of decisions needed  gaining simplicity ...
Ruby – Programmer’s Best Friend• Ruby is a dynamic, open source programming language with a focus on simplicity and produc...
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 Yo...
RoR – First App
RoR – Directory Structure
First App – Gemfile• Open Gemfile• Change line: gem sqlite3‘ togroup :development do       gem sqlite3, 1.3.5‘end• Add:gro...
First App – Running Server• Run:• rails server
First App - GitHub• Create new repo on GitHub – First App
First App – Git Commit and Pushgit initgit add .git commit –m “Initial Commit of First App”git remote add origin  git@gith...
First App - Usersgit checkout –b users   o Create and switch to new branch called usersrails generate scaffold User name:s...
First App - UsersVisit localhost:3000/usersLocalhost:3000/users/newEverything was created automatically by rails generator...
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 - Micropostsrails generate scaffold Micropost content:string  user_id:integer  o Use rails scaffolding to genera...
First App – Microposts & Users• One of Rail’s most powerful features is ability    to form associations between data model...
First App – Microposts and Users• That’s it! Rails automagically set up the  association for us. Watch how powerful it is:...
First App – Final Commit & MergeCommit your code using gitMerge back into master:Git checkout masterGit merge users
First App - HerokuWhat is Heroku?•a hosted platform built specifically for deploying Rails and other web applications in 1...
First App – Heroku Setup• Sign up for Heroku (it’s Free!)           http://api.heroku.com/signup• Install the Heroku Toolb...
Rails Motivation• Basecamp (the origin of Rails)• Twitter (still using it for frontend)• Scribd/Slideshare• Hulu• GitHub• ...
Next Time…• Understanding Ruby• Exploring Rails deeper• Building toward our Twitter app with user    signup/sign in, posts...
Code for Startup MVP (Ruby on Rails) Session 1
Upcoming SlideShare
Loading in …5
×

Code for Startup MVP (Ruby on Rails) Session 1

6,140 views
5,950 views

Published on

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

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,140
On SlideShare
0
From Embeds
0
Number of Embeds
359
Actions
Shares
0
Downloads
53
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Code for Startup MVP (Ruby on Rails) Session 1

  1. 1. Learning to Code forStartup MVPPresented by Henry Shi
  2. 2. IntroductionOverview of SessionsGoals and ExpectationsWhat this session is NotMy background and experiences
  3. 3. ResourcesRuby on Rails Tutorial - Michael HartlCS 169: Software Engineering for Software as a Service - Berkeley Course on CourseraRails for Zombies - CodeSchoolVarious resources around the web
  4. 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. 5. Agenda - Monday October 291. The Web and How it Works2. Git/Github3. Rails and Ruby4. Heroku
  6. 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
  7. 7. Prework - GitInstall git if not already included:http://www.git-scm.com/book/en/Getting- Started-Installing-GitConfigure Git:git config --global user.name "Your Name“git config --global user.email your.email@example.com
  8. 8. The WebClient-ServerHTTP, URIHTML, CSS3 Tier ArchitectureMVC
  9. 9. The Web - Overview
  10. 10. The Web - Client ServerThe web is fundamentally request/reply orientedClient: ask questions on behalf of usersServer: wait for & respond to questions, serve many clients Web browser Web site InternetContrast to P2P
  11. 11. The Web - HTTPHypertext Transfer Protocol: an ASCII-based request/reply protocol for transferring information on the WebHTTP 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. 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
  13. 13. The Web – HTML & CSS
  14. 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
  15. 15. HTML - DOM
  16. 16. HTML5• HTML5 is the futurehttp://slides.html5rocks.comCurrent support is not completeDifferent Browswers = Different ResultsDon’t use IE
  17. 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. 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; }
  19. 19. The Web – 3Tiered Architecture
  20. 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. 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)
  22. 22. 3Tiered Architecture
  23. 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
  24. 24. The Web - MVC
  25. 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. 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. 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
  28. 28. Git - Distributed• Better than CVS, SVN, etc
  29. 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. 30. Git – BasicsGit init o Start a git repository in current directory• Make changes o Eg. Touch readme.txtGit status o Check what has changed since previous commitGit add (filename) o Adds files to staging area (about to be committed) o Git add . To add everythingGit commit –m “my message” o Commits changes
  31. 31. Git - IntermediateGit Branch branch_name o Create a new branch (parallel code) from current commit pointGit checkout branch_name o Switch to another branchGit Merge branch_name o Merge branch_name to current branch
  32. 32. Git – Working Remotely andCollaboration• 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 originGit pull o Pull latest changes from originGit push o Push changes to origin
  33. 33. Rails and Ruby Programming Web Framework LanguageOur focus is on Rails and how to rapidly prototype Startup MVPs
  34. 34. 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
  35. 35. 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)
  36. 36. 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.
  37. 37. Ruby – Rocks!• See slides 44 – 92 of slides:http://www.slideshare.net/madrobby/ruby-on- rails-introduction
  38. 38. 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
  39. 39. RoR – First App
  40. 40. RoR – Directory Structure
  41. 41. First App – Gemfile• Open Gemfile• Change line: gem sqlite3‘ togroup :development do gem sqlite3, 1.3.5‘end• Add:group :production do gem pg, 0.12.2end• Run:bundle install --without production
  42. 42. First App – Running Server• Run:• rails server
  43. 43. First App - GitHub• Create new repo on GitHub – First App
  44. 44. First App – Git Commit and Pushgit initgit add .git commit –m “Initial Commit of First App”git remote add origin git@github.com:<username>/first_app.gitgit push –u origin master
  45. 45. First App - Usersgit checkout –b users o Create and switch to new branch called usersrails 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 databaserails sCommit your code using Git!
  46. 46. First App - UsersVisit localhost:3000/usersLocalhost:3000/users/newEverything was created automatically by rails generator! And it all just works!
  47. 47. First App – Users MVC
  48. 48. First App – Users MVC• Model: /app/models/user.rb• Controller: /app/controllers/users_controller.rb• View: /app/views/users/
  49. 49. First App - Micropostsrails generate scaffold Micropost content:string user_id:integer o Use rails scaffolding to generate microposts!bundle exec rake db:migrateEdit: app/models/micropost.rbRails s o Submitting a micropost with more than 140 chars will give error (Automatically handled by Rails!)
  50. 50. 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
  51. 51. First App – Microposts and Users• That’s it! Rails automagically set up the association for us. Watch how powerful it is:Rails consolefirst_user = User.firstfirst_user.microposts o Rails automagically knows to find all of the first user’s microposts!
  52. 52. First App – Final Commit & MergeCommit your code using gitMerge back into master:Git checkout masterGit merge users
  53. 53. First App - HerokuWhat 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
  54. 54. 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 ☺
  55. 55. Rails Motivation• Basecamp (the origin of Rails)• Twitter (still using it for frontend)• Scribd/Slideshare• Hulu• GitHub• Shopify• Groupon/Livingsocial• YellowPages
  56. 56. 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

×