Building Ribbit in Rails

jieforest

For the username field, we want to ensure that it exists and is unique; no two users can have the same username:

1. 1        validates :username, uniqueness: true, presence: true

复制代码

Finally, the email field not only needs to exist and be unique, but it also needs to match a regular expression:

1. 1        validates :email, uniqueness: true, presence: true, format: { with: /^[\w.+-]+@([\w]+.)+\w+$/ }

复制代码

jieforest

This is a very simplistic email regex, but it should do for our purposes.

Now, what about that avatar_url field  We want to use the user’s email address and pull their associatedGravatar, so we have to generate this URL. We could do this on the fly, but it will be more efficient to store it in the database. First, we need to make sure that we have a clean email address. Let’s add a method to ourUser class:

1. private
   
2. def prep_email
   
3.     self.email = self.email.strip.downcase if self.email
   
4. end

复制代码

That private keyword means that all the methods defined after the keyword are defined as private methods; they cannot be accessed from outside the class (on instances).

jieforest

This prep_email method trims the whitespace at the beginning and end of the string, and then converts all characters to lowercase.

This is necessary because we’re going to generate a hash for this value.

We want this method to run just before the validation process; add the following line of code near the top of the class.

1. before_validation :prep_email

复制代码

Next, let’s generate the URL for the avatar by writing another method (put it under the one above):

1. def create_avatar_url
   
2.     self.avatar_url = "http://www.gravatar.com/avatar/#{Digest::MD5.hexdigest(self.email)} s=50"
   
3. end

复制代码

jieforest

We need to call this method before we save the user to the database. Add this call to the top of the file:

1. before_save :create_avatar_url

复制代码

And that’s it! Now we have the mechanics of our user functionality in place. Before writing the UI for creating users, let’s commit our work so far:

1. git add .
   
2. git commit -m 'Create user resource'

复制代码

jieforest

Step 5: Writing The User UI

Building a UI in Rails means that we need to be aware of the routes that render our views. If you openconfig/routes.rb, you’ll find a line like this:

1. resources :users

复制代码

This was added to the routes.rb file when we generated the user resource, and it sets up the default REST routes. Right now, the route we’re interested in is the route that displays the form for creating new users: /users/new. When someone goes to this route, the new method on the users controller will execute, so that’s where we’ll start.
The users controller is found in app/controllers/users_controller.rb. It has no methods by default, so let’s add the new method within the UsersController class.

1. def new
   
2.     @user = User.new
   
3. end

复制代码

jieforest

Step 5: Writing The User UI

Building a UI in Rails means that we need to be aware of the routes that render our views. If you openconfig/routes.rb, you’ll find a line like this:

1. resources :users

复制代码

This was added to the routes.rb file when we generated the user resource, and it sets up the default REST routes. Right now, the route we’re interested in is the route that displays the form for creating new users: /users/new. When someone goes to this route, the new method on the users controller will execute, so that’s where we’ll start.

The users controller is found in app/controllers/users_controller.rb. It has no methods by default, so let’s add the new method within the UsersController class.

1. def new
   
2.     @user = User.new
   
3. end

复制代码

jieforest

As you know, Ruby instance variables begin with @ – making @user available from inside our view. Let’s head over to the view by creating a file, named new.html.erb in the app/views/users folder. Here’s what goes in that view:

1. <img src="/gfx/frog.jpg">
   
2. <div class="panel right">
   
3.   <h1>New to Ribbit </h1>
   
4.   <%= form_for @user do |f| %>
   
5.     <% if @user.errors.any  %>
   
6.       <ul>
   
7.         <% @user.errors.full_messages.each do |message| %>
   
8.           <li><%= message %></li>
   
9.         <% end %>
   
10.       </ul>
    
11.     <% end %>
    
12.     <%= f.text_field :email, placeholder: "email" %>
    
13.     <%= f.text_field :username, placeholder: "username" %>
    
14.     <%= f.text_field :name, placeholder: "name" %>
    
15.     <%= f.password_field :password, placeholder: "password" %>
    
16.     <%= f.password_field :password_confirmation, placeholder: "password" %>
    
17.     <%= f.submit "Create Account" %>
    
18.   <% end %>
    
19. </div>

复制代码

jieforest

This is actually the view that serves as the home page view, when a user is not logged in. We use the form_for helper method to create a form and pass it the @user variable as a parameter. Then, inside the form (which is inside the Ruby block), we first print out errors. Of course, there won’t be any errors on the page the first time around.

However, any input that fails our validation rules results in an error message that is displayed in a list item.

Then, we have the fields for our user properties. Since this design doesn’t have any labels for the text boxes, I’ve put what would be label text as the fields’ placeholder (using the placeholder attribute). These won’t display in older browsers, but that’s not relevant to our main goal here.

Now, what happens when the user clicks the “Create Account” button  This form will POST to the /usersroute, resulting in the execution of the create method in the users controller. Back to that controller, then:

1. def create
   
2.   @user = User.new(params[:user])
   
3.   if @user.save
   
4.     redirect_to @user, notice: "Thank you for signing up for Ribbit!"
   
5.   else
   
6.     render 'new'
   
7.   end
   
8. end

复制代码

jieforest

We start by creating a new user, passing the new method the values from our form. Then, we call the savemethod. This method first validates the input; if the data is in the correct format, the method inserts the record into the database and returns true. Otherwise, it returns false.

If @user.save returns true, we redirect the viewer to… the@user object itself?
This actually redirects to the path for that user, which will be /users/. If @user.save returns false, we re-render the /users/new path and display any validation errors. We also pre-populate the form fields with the the user’s previously provided information. Clever, eh?

Well, if we direct the viewer to their new user profile, we need to create that page next. This triggers theshow method in the users controller, so we’ll add that first:

1. def show
   
2.   @user = User.find(params[:id])
   
3. end

复制代码

jieforest

This method looks at the id number in the route (for example, /users/4) and finds the associated user in the database. Just as before, we can now use this @user variable from the view.

Create the app/views/users/show.html.erb file, and add the following code:

1. <div id="createRibbit" class="panel right">
   
2.     <h1>Create a Ribbit</h1>
   
3.     <p>
   
4.     <form>
   
5.         <textarea name="text" class="ribbitText"></textarea>
   
6.         <input type="submit" value="Ribbit!">
   
7.     </form>
   
8.     </p>
   
9. </div>
   
10. <div id="ribbits" class="panel left">
    
11.     <h1>Your Ribbit Profile</h1>
    
12.     <div class="ribbitWrapper">
    
13.         <img class="avatar" src="<%= @user.avatar_url %>">
    
14.         <span class="name"><%= @user.name %></span> @<%= @user.username %>
    
15.         <p>
    
16.         XX Ribbits
    
17.         <span class="spacing">XX Followers</span>
    
18.         <span class="spacing">XX Following</span>
    
19.         </p>
    
20.     </div>
    
21. </div>
    
22. <div class="panel left">
    
23.     <h1>Your Ribbits</h1>
    
24.     <div class="ribbitWrapper">
    
25.         Ribbits coming . . .
    
26.     </div>
    
27. </div>
    

复制代码