Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rails Rookies Bootcamp - Blogger

504 views

Published on

Presented at Rails Rookies Bootcamp, East Tennessee State University in association with the ETSU chapter of the Association of Computing Machinery (ACM), April 13, 2013

Published in: Software
  • Login to see the comments

  • Be the first to like this

Rails Rookies Bootcamp - Blogger

  1. 1. Rails Rookies Bootcamp Blogger
  2. 2. What is Ruby? Dynamic, reflective, general-purpose object-oriented programming language Designed/developed in 1995 by Yukihiro Matsumoto in Japan Syntax inspired by Perl with Smalltalk-like features and influenced by Eiffel and Lisp Supports function, object-oriented, and imperative paradigms Dynamic type system and automatic memory management
  3. 3. What is Rails? Ruby on Rails is an open-source web application framework for Ruby Full-stack framework Routing system independent of the web server
  4. 4. Patterns and Principles Active record pattern Convention over configuration DRY (Don’t Repeat Yourself) MVC (Model-View-Controller)
  5. 5. MVC
  6. 6. Agile Software development methodology Iterative and incremental development Requirements and solutions evolve through collaboration between self-organizing, cross- functional teams Adaptive planning, evolutionary development and delivery, and a rapid and flexible response to change
  7. 7. Agile Agile Manifesto We are uncovering better ways of developing software by doing it and helping other do it Through this work we have come to value: Individuals and interactions over processes and tools Working software over comprehensive documentation Customer collaboration over contract negotiation Responding to change over following a plan That is, while there is value in the items on the right, we value the items on the left more
  8. 8. Git Git is a distributed revision control and source code management (SCM) system with an emphasis on speed Every Git working directory is a full-fledged repository with complete history and full revision tracking capabilities, not dependent on network access or a central server
  9. 9. Git Explained You’ll use git to record the changes you make to your project over time. In git, these changes are called “commits” Commits contain a change a user has made to the code and some additional useful metadata, including the time that the change was made, your name, and a message you add to describe the change
  10. 10. Why Git (or SCM at all)? Allows more than one developer to make changes and stay in sync Allows you to maintain and access different versions of a project Allows you to retrieve past versions of a project
  11. 11. GitHub GitHub is a web-based hosting service for software development projects that use the Git revision control system The most popular open source repository site
  12. 12. Setting Up GitHub https://github.com/ Log in or sign up for an account git config --global user.name “Your Name Here” git config --global user.email “your_email@example.com”
  13. 13. Generating a SSH Key ssh-keygen -t rsa -C “your_email@example.com” Enter a passphrase (if you wish) pbcopy < ~/.ssh/id_rsa.pub
  14. 14. Adding SSH Key to GitHub Go to your Account Settings Click “SSH Keys” in the left sidebar Click “Add SSH Key” Paste your key into the “Key” field Click “Add key” Confirm the action by entering your GitHub password
  15. 15. Test Everything Out ssh -T git@github.com Accept (“yes”) the RSA key fingerprint Get authentication confirmation.
  16. 16. Learning Git Pro Git by Scott Chacon Interactive Tutorial by GitHub Git Immersion by EdgeCase Understanding Git Conceptually by Charles Duan Version Control with Git from Michael Hartl’s Rails Tutorial
  17. 17. Git Workflow Initialize new repository (repo) Create a GitHub repo Add GitHub as a remote repo Initial commit Create a git branch each time you begin to work on implementing a new feature Commit changes as you work on the feature When your new feature is complete, merge the branch and “squash” the commits so your comrades see just one commit for the entire feature
  18. 18. Blogger A simple blog system Allows users to read articles Allows users to comment on articles Allows users to locate articles by tags Allows authenticated users to create, update, and delete articles Allows authenticated users to create, update, and delete users
  19. 19. Iteration 1 Up and Running Up and Running Ruby on Rails takes a lot of the hard work off your hands, especially when starting up a project Rails practices the idea of “sensible defaults” and will, with one command, create a working application ready for your customization
  20. 20. Setting the Stage
  21. 21. Git Workflow Initialize New Repo Initialize New Repo git init git add . git commit -m “initial commit” git status
  22. 22. Add GitHub Remote Repo Add GitHub Remote Repo Create new repo on GitHub git remote add origin git@github.com :YOUR_GITHUB_ACCOUNT/YOUR_PROJECT_NAME.git git push origin master git commit -am “some helpful comment”
  23. 23. Git Workflow Checkout New Branch Checkout New Branch git checkout -b up-and-running
  24. 24. Project Tour
  25. 25. Project Tour app - This is where 98% of your effort will go. It contains subdirectories which will host most of the code you write, including Models, Views, Controllers, Helpers, JavaScripts, etc config - Control the environment settings for your application. It also includes the initializers subdirectory which holds items to be run on startup
  26. 26. Project Tour db - Will eventually have a migrations subdirectory where your migrations, used to structure the database, will be stored. When using SQLite3, as is the Rails default, the database file will be stored in this directory doc - Who writes documentation? If you did, it’d go here. Someday
  27. 27. Project Tour lib - Not commonly used, this directory is to store code you control that is reusable outside the project. Instead of storing code here, consider packaging it as a gem log - Log files, one for each environment
  28. 28. Project Tour public - The “root” of your application. Static files can be stored and accessed from here, but all the interesting things (JavaScript, Images, CSS) have been moved up to app since Rails 3.1 script - Nothing of interest
  29. 29. Project Tour test - If your project is using the default Test::Unit testing library, the tests will live here tmp - Temporary cached files vendor - Infrequently used, this directory is to store code you do not control. With Bundler and RubyGems, we generally don’t need anything in here during development
  30. 30. Configuring the Database Look in the config directory and open the file database.yml This file controls how Rails’ database connection system will access your database You can configure many different databases, including SQLite3, MySQL, PostgreSQL, SQL Server, and Oracle
  31. 31. Configuring the Database If you were connecting to an existing database, you would enter the database configuration parameters here. Since we’re using SQLite3 and starting from scratch, we can leave the defaults to create a new database, which will happen automatically The database will be stored in db/development.sqlite3
  32. 32. Starting the Server
  33. 33. Accessing the Server
  34. 34. Creating the Article Model Our blog will be centered around “articles” Need a table in the database to store all the articles Need a model to allow our Rails app to work with that data rails generate model Article
  35. 35. Working with the Database Rails uses migration files to perform modifications to the database Killer feature!! Rails migrations are generally database agnostic Open db/migrate/(some_time_stamp)_create_articles.rb
  36. 36. Modifying change
  37. 37. Timestamps t.timestamps will create two columns inside our tables, automatically managed by Rails, to track when an object is created or updated
  38. 38. Running the Migration rake db:migrate
  39. 39. Working with a Model in the Console Rails console is a command-line interface to your application Allows you to access and work with almost any part of your application directly instead of going through the web interface Can greatly simplify your development process
  40. 40. Looking at the Model app/models/article.rb Contains all the code for the Article model
  41. 41. Setting up the Router config/routes.rb When a Rails server gets request from a web browser, it first goes to the router Router decides what the request is trying to do, what resources it is trying to interact with
  42. 42. Looking at the Routing Table rake routes
  43. 43. Creating the Articles Controller rails g controller articles app/controllers/articles_controller.rb
  44. 44. Defining the Index Action http://localhost:3000/articles/ Add index action to the articles controller
  45. 45. Instance Variables @articles @ marks a variable as an “instance level variable”
  46. 46. Creating the Template Create app/views/articles/index.html.erb ERB is a templating language allowing us to mix Ruby into our HTML ERB clause starts with <% or <%= and ends with %> <% will hide the result of the Ruby code <%= will output the result of the Ruby code
  47. 47. Index Template Content
  48. 48. Adding Navigation to the Index
  49. 49. Looking at the Routing Table
  50. 50. Completing the Article Links
  51. 51. New Article Link
  52. 52. Review the Results
  53. 53. Creating the Show Action
  54. 54. A Bit on Parameters
  55. 55. Back to the Template
  56. 56. Styling
  57. 57. Iteration 1 Complete!
  58. 58. Git Workflow git add . git commit -am “a meaningful message” git push origin up-and-running git checkout master git merge --squash up-and-running git commit -am “implement ‘up and running’ feature” git push origin master
  59. 59. Iteration 2 Form-Based Workflow Form-Based Workflow Creating articles from the console isn’t a viable long-term solution Users will expect to add content through a web interface Create an HTML form to submit the article and all the back-end processing to get it into the database
  60. 60. Git Workflow Checkout New Branch Checkout New Branch git checkout -b form-based-workflow
  61. 61. Creating the New Action and View
  62. 62. Starting the Template
  63. 63. Writing a Form
  64. 64. Does it Work?
  65. 65. Setting up for Reflection
  66. 66. The Create Action
  67. 67. Processing the Data
  68. 68. Understanding Form Parameters
  69. 69. Pulling Out Form Data
  70. 70. More Body
  71. 71. Fragile Controllers
  72. 72. Fragile Controllers
  73. 73. Uh-oh! An Error!
  74. 74. Less Fragile Controllers
  75. 75. Deleting Articles
  76. 76. REST is About Path and Verb Representational State Transfer (REST) is a software architectural style for distributed systems (e.g. World Wide Web) Predominant web API design model Collection URI http://example.com/resources/ Element URI http://example.com/resources/item17 Action URI http://example.com/resources/new
  77. 77. The Destroy Action
  78. 78. Adding the Edit Link
  79. 79. Implementing the Edit Action
  80. 80. An Edit Form
  81. 81. Creating a Form Partial
  82. 82. Implementing Update
  83. 83. Adding a Flash
  84. 84. Testing the Flash
  85. 85. Setting the Site Root
  86. 86. Iteration 2 Complete!
  87. 87. Git Workflow git add . git commit -am “a meaningful message” git push origin form-based-workflow git checkout master git merge --squash form-based-workflow git commit -am “implement ‘form-based-workflow’ feature” git push origin master
  88. 88. Iteration 3 Adding Comments Adding Comments A comment... Is attached to an article Has an author name Has a body
  89. 89. Git Workflow Checkout New Branch Checkout New Branch git checkout -b adding-comments
  90. 90. Generating the Comment Model
  91. 91. Setting Up the Migration
  92. 92. Relationships
  93. 93. Relationships
  94. 94. Testing in the Console
  95. 95. Displaying Comments for an Article
  96. 96. Creating the Comments Partial
  97. 97. Web-Based Comment Creation
  98. 98. In the ArticlesController
  99. 99. Improving the Comment Form
  100. 100. Trying the Comment Form
  101. 101. Creating a Comments Controller
  102. 102. Writing the Create Action
  103. 103. Cleaning Up
  104. 104. Iteration 3 Complete!
  105. 105. Git Workflow git add . git commit -am “a meaningful message” git push origin adding-comments git checkout master git merge --squash adding-comments git commit -am “implement ‘adding-comments’ feature” git push origin master
  106. 106. Iteration 4 Tagging Tagging An article has many taggings A tag has many taggings A tagging belongs to an article and belongs to a tag
  107. 107. Git Workflow Checkout New Branch Checkout New Branch git checkout -b tagging
  108. 108. Making Models
  109. 109. Expressing Relationships
  110. 110. Tags in Action
  111. 111. An Interface for Tagging Articles
  112. 112. Fixing tag_list
  113. 113. Not So Fast
  114. 114. Pseudo-Code Split the tags_string into an array of strings with leading and trailing whitespace removed For each of those strings... Ensure each one of these strings are unique Look for a tag object with that name. If there isn’t one, create it Add the tag object to a list of tags for the article Set the article’s tags to the list of tags that we have found and/or created
  115. 115. Working with Strings
  116. 116. Fixing tag_list=
  117. 117. Testing in the Console
  118. 118. Adding Tags to Our Display
  119. 119. Listing Articles by Tag
  120. 120. Listing All Tags
  121. 121. Iteration 4 Complete!
  122. 122. Git Workflow git add . git commit -am “a meaningful message” git push origin tagging git checkout master git merge --squash tagging git commit -am “implement ‘tagging’ feature” git push origin master
  123. 123. Iteration 5 Using Gems Using Gems
  124. 124. Git Workflow Checkout New Branch Checkout New Branch git checkout -b using-gems
  125. 125. Setting Up the Database for Paperclip
  126. 126. Adding to the Model
  127. 127. Modifying the Form Template
  128. 128. Trying It Out
  129. 129. Improving the Form
  130. 130. Further Notes about Paperclip
  131. 131. A Few Sass Examples https://www.dropbox.com/s/4wl3qdjd9ht5y2o/styles.cs Put in app/assets/stylesheets/ Details about Sass can be found here: http://sass-lang.com
  132. 132. Working with Layouts <%= stylesheet_link_tag ‘styles’ %> DRY - Don’t Repeat Yourself
  133. 133. Iteration 5 Complete!
  134. 134. Git Workflow git add . git commit -am “a meaningful message” git push origin using-gems git checkout master git merge --squash using-gems git commit -am “implement ‘using-gems’ feature” git push origin master
  135. 135. Iteration 6 Authentication Authentication gem ‘sorcery’ When specifying & installing a new gem, you will need to restart your Rails Server
  136. 136. Git Workflow Checkout New Branch Checkout New Branch git checkout -b authentication
  137. 137. Running the Generator
  138. 138. Creating a First Account
  139. 139. Form Validation
  140. 140. Creating a New Author
  141. 141. Are We Logged In?
  142. 142. Logging In
  143. 143. New Session Form
  144. 144. Configuring Routes
  145. 145. Editing Layout
  146. 146. Securing New Users
  147. 147. Securing the Rest of the Application
  148. 148. Securing the Rest of the Application
  149. 149. Iteration 6 Complete!
  150. 150. Git Workflow git add . git commit -am “a meaningful message” git push origin authentication git checkout master git merge --squash authentication git commit -am “implement ‘authentication’ feature” git push origin master
  151. 151. Iteration 7 Extras Extras Add a site-wide sidebar that holds navigation links Create date-based navigation links. For instance, there would be a list of links with the names of the months and when you click on the month, it shows you all the articles published in that month. Track the number of times an article has been viewed. Add a view_count column to the article, then in the show method of articles_controller.rb just increment that counter. Or, better yet, add a method in the article.rb model that increments the counter and call that method from the controller. Once you are tracking views, create a list of the three “most popular” articles. Create a simple RSS feed for articles using the respond_to method and XML view templates.

×