Build a Basic Web App Using Ruby on Rails

Getting Ready to Code

Get Inspired
Get Inspired
The app we'll create will mirror very basic Pinterest functionality. Think about what you want to do with that framework next. What do you want to build?
Take a look at past students' projects for some awesome inspiration. Brainstorm your idea for the app you want to make.

Creating Your First Application

Get Your Code Up on Heroku
Get Your Code Up on Heroku
- If you're on a mac, remember to add the specific files you don't need to .gitignore. You can find the list of files in the lecture notes.
Share a link to your Github and Heroku pages like this:
- Github: https://github.com/mattangriffel/omrails
- Heroku: http://floating-island-7978.herokuapp.com/
Get Setup to Code
Get Setup to Code
- Choose your browser: I'm using Chrome but Firefox or IE will work, too.
- Download a Text Editor, I recommend Sublime Text which works for both Mac and Windows and is free.
Get Familiar with Your Command Line
Get Familiar with Your Command Line
- Find and open your command line.
- Try making a directory, changing a directory, going into a folder and back out of it. Also try deleting a folder.
- Note: the command line will be slightly different for Mac vs. Windows, I cover both in the video lesson.
Install Rails
Install Rails
- Go to RailsInstaller.com to install rails and follow the instructions for download. Make sure you have at least version 1.9.3 set up for Ruby and 3.2 set up for Rails.
- If the Rails Installer doesn't work for you, follow the steps in Michael Hartl's guide, in section 1.2.2.
Create Your Application
Create Your Application
- Open up your command line and make sure you're in the folder you've created for your code.
- Run the Rails command for creating a new application, you'll see I call it OMRails but feel free to name yours whatever you'd like.
- Find all the folders you created by creating the application - what I call the "skeleton" in the lesson and familiarize yourself with each.
- Run your application on a local server to see it inside your browser. (You have to be in the OMRails folder for this to work!).
- Type localhost:3000 in the URL bar of your browser. You have your first live application!

Adding Pages and Styling

Add your About Page.
Add your About Page.
Specifically, add an about page to accompany the home page you have. For initial content, include a header navigation between pages and a footer.
Make it Pretty.
Make it Pretty.
Install Bootstrap to make your app look great and be responsive.
We're going to be using the Bootstrap Sass gem to let us use Bootstrap in our application.
Create the stylesheet you'll need to import the bootstrap.
Customizing the Header.
Customizing the Header.
Add in the responsive nav bar within your header and optionally, wrap your content in Hero Unit.
Use Bootstrap to set your button styles, and your font and background styles and colors, too. Feel free to mess around here a bunch looking at different components you can use
Save and Commit.
Save and Commit.
Save a commit to git and then push up to GitHub. Push your code to Heroku and refresh your app URL to see your live app with all changes made.

Adding Users

Add Sign Up.
Add Sign Up.
Add the gem to let users sign up and sign in to your application. Use devise to add sign in and edit profile functionality.
Customize the View.
Customize the View.
Use the simple form gem to customize the views of the sign in form you just added.
Save and Commit.
Save and Commit.
Save a commit to git and then push up to GitHub. Push your code to Heroku and refresh your app URL to see your live app with all changes updated.

Adding Pins

Generate a Scaffold.
Generate a Scaffold.
Generate a pins scaffold that will allow for the following actions: index action, show action, new action, edit action, create, action, update action and destroy action.
Formatting.
Formatting.
- Use Bootstrap to format your pin description (column width, well etc.).
- Use Bootstrap to format your Pins index page
Adding Validations.
Adding Validations.
Add in validations for adding a pin (ex. empty state, length min. or max.)
Add a Pins Association.
Add a Pins Association.
Add pins association to let your app track the user associated with each pin created.
Save and Commit.
Save and Commit.
Save a commit to git and then push up to GitHub. Push your code to Heroku and refresh your app URL to see your live app with all changes updated.

Adding Images to Our Pins

Image Uploading via Paperclip.
Image Uploading via Paperclip.
Add image uploading to the application using the Paperclip gem. Remember to include validations.
Styling Your Images w jQuery.
Styling Your Images w jQuery.
- Use the paperclip gem to add styling for images.
- Make the page layout look more Pinterest-y using jQuery. Download jQuery Masonry - a script that lets you do the Pinterest style images that are floating and get resized when you move the page size around.
Connect Amazon S3.
Connect Amazon S3.
Create and connect an Amazon S3 account to make sure your images don't live on Heroku which isn't really an image storing service.
Image Uploading via URL.
Image Uploading via URL.
Optional: Add image uploading from URL functionality.
Save and Commit.
Save and Commit.
Save and commit to git and then push up to GitHub. Push your code to Heroku and refresh your app URL to see your live app with all changes updated.

Populating Your App

Generate Fake Data.
Generate Fake Data.
Use the faker gem to generate fake data, specifically, fake users and fake pins (images) so you can test larger scale styling and functionality. This lets you get a better sense of what a fully populated app would look like to see if it breaks any of your assumptions.
Save and Commit.
Save and Commit.
Save and commit to git and then push up to GitHub. Push your code to Heroku and refresh your app URL to see your live app with all changes updated.

Paginating Your App

Installing Pagination Gem
Installing Pagination Gem
- Install the will_paginate gem, add to your gem file. This lets us take a bunch of anything and paginate it.
Find all the code for this step in the lecture notes.
Navigating Between Pages
Navigating Between Pages
Now that we have 20 pins on our first page, we need to add something in our index view to be able to get to the rest of the pins.
- Open up index view and paste in <%= will_paginate @pins %> to be able to navigate between pages.
Find all the code for this step in the lecture notes.
Add Pages
Use the Will Paginate gem and the Bootstrap Will Paginate gem to add pages functionality to your app (including styling).
Updating Our Pins Controller
Updating Our Pins Controller
The place we actually call all the images is in our pins controller.
Pins are called here: @pins = Pin.order("created_at desc") so this is where we'll need to append a method on to be able to paginate.
- Append .page with a parameter. Specifically, .page (params [:page] ).per_page(20) This gets us 20 pins per page.
Find all the code for this step in the lecture notes.
Stylize Page Navigation
Stylize Page Navigation
- Next, install the bootstrap-will_paginate gem and refresh your application to see the effect.
Find all the code for this step in the lecture notes.
Save and Commit
Save and Commit
Save and commit to git and then push up to GitHub. Push your code to Heroku and refresh your app URL to see your live app with all changes updated.

Creating User Profiles

Build a User Show Page
Create a user "show page". We won't need to generate a whole scaffold for users like we did with pins, since all we want to do is view the user page.
Create a Users Controller
Create a Users Controller
We don't have the ability to view user's profile pages yet, or the ability to view the pins that a specific user has pinned. Let's change that.
- Run rails generate controller Users show
- Edit our view
- Edit our routes file to avoid that routing error! Under devise_for :users add match 'users/:id' => 'users#show'
Find all the code for this step in the lecture notes.
Show the User's Pins
Show the User's Pins
First we need to pull out the pins. Use @pins = @user.pins to do so. Under the user's show page render those pins using
<h1><%= @user.name %></h1>
<div id="pins">
<%= render @pins %>
</div>
<%= will_paginate @pins %>
Find all the code for this step in the lecture notes.
Getting Back and Forth from User's Page
Getting Back and Forth from User's Page
- Turn "Posted by" on each pin into a link so you can click on a user to get to their show page.
- Inside the _pins.html.erb edited the "posted by" line to match the below. Don't forget to edit the route file to pass in a specific "as: :user argument".
<strong> Posted by <%= link_to pin.user.name, pin.user %> </strong>
Find all the code for this step in the lecture notes.
Save and Commit
Save and Commit
Save and commit to git and then push up to GitHub. Push your code to Heroku and refresh your app URL to see your live app with all changes updated.

Advanced: Endless Scrolling

Set Up Endless Scroll
Set Up Endless Scroll

What's next?

Customize Your Application
Sketch What You'll Make.
Sketch or outline how you'll take the app in its current state to the application you plan to build. Take a look at the additional resources to see what you can do in terms of design and functionality.
Take it to the next level
Are you interested in adding additional functionality and exploring the ins and outs of Rails? If so, check out onemonthrails.com, where you can access part 2 of this class and learn how to turn your app into something amazing.

Additional Resources

Ruby on Rails 3 Essential Training by Kevin Skoglund
Ruby on Rails Tutorial by Michael Hartl
Web Applications by John Ousterhout at Stanford University
RailsCasts by Ryan Bates
Additional Resources
Installing Rails Lecture Notes
Creating a New App Lecture Notes
Adding Pages Lecture Notes
Adding Bootstrap Lecture Notes
Adding Pages Lecture Notes
Adding Bootstrap Lecture Notes
Adding Users With Devise Lecture Notes
Customizing Devise Lecture Notes
Generate a Pins Scaffold Lecture Notes
Add Associations Lecture Notes
Generate a Pins Scaffold Lecture Notes
Add Associations Lecture Notes
Image Uploading with Paperclip Lecture Notes
Styling with jQuery Lecture Notes
Connecting Amazon S3 Lecture Notes
Image Uploading via URL Lecture Notes and
Trevor Turk: Easy Upload via URL with Paperclip
Image Uploading via URL Lecture Notes and
Trevor Turk: Easy Upload via URL with Paperclip
Populating Your Database with Faker Gem Lecture Notes and
Populating a Database with Faker
HTML5 & CSS3 Fundamentals
User Profile Lecture Notes
Ruby Toolbox
Pagination Lecture Notes
Creating a User Show Page with Devise
Pagination Lecture Notes
User Profile Lecture Notes
Creating a User Show Page with Devise
Endless Scroll Lecture Notes
RailsCasts: Endless Page

Andrew Mercando

Product Designer

5,375

416

Company

Community

Teaching

Mobile

Company

Community

Teaching