Come join us on #hackpack-web on Slack to get help, hang out, and show off your project!
Welcome to the TreeHacks web development hackpack! We're going to make an app called TreeYaks, which lets people post content and upvote/downvote what other people posted.
Windows users: Install Ruby by downloading the Ruby installer: http://rubyinstaller.org/.
Mac users: Ruby should already be installed on your computer.
All platforms: After downloading the hackpack, navigate to the treeyaks/ folder and type bundle install. Then, type ruby app.rb. Now, go to http://localhost:4567. If you see the TreeYaks page, then you're all set and everything is installed correctly! If not, it probably means something went wrong when installing Ruby and/or running bundle install. Feel free to ping a mentor on Slack to troubleshoot.
We'll build TreeYaks in Ruby using a framework called Sinatra. Sinatra is a web framework written in Ruby to help you develop web applications. If you've never used Ruby before, don't worry! We'll explain the syntax as we go along. If you want to learn more about Ruby, however, check out these interactive Ruby tutorials:
https://www.codecademy.com/learn/ruby
The first milestone we'll tackle is viewing all posts. In app.rb, there's a class Yak. A class in Ruby has instance variables and methods, just like a class in Java or C++. Each Yak object will represent one yak a user has posted.
class Yak < ActiveRecord::Base
end
Let's assign all the yaks to a variable called yaks in the get '/' method. This will make all the yaks appear on the homepage. You can get all the Yaks every user has posted by calling the all method on the Yak class.
get '/' do
# BEGIN YOUR CODE HERE
# Here, you should store all the Yak's in the database in a variable called yaks.
# END YOUR CODE HERE
erb :index, locals: { yaks: yaks }
end
There should already be a line that calls the erb function. erb is a special function that will render the HTML that shows the yaks. That's why we pass in the yaks variable to it - it will take all the yaks we loaded from the database and return the rendered HTML to the browser. The HTML it renders is in the views/index.erb file. You don't need to edit this file, but feel free to change the styles around to customize the look and feel of the homepage!
Next, let's let users add posts. You'll notice there's already a "Create Yak" link on the homepage for TreeYaks. However, filling out the form won't actually do anything right now.
In the post '/new_yak' method, the contents of the form the user filled out is already in the contents variable. To complete the rest of the method, add code that makes a new Yak, sets up the instance variables, and calls the save method on the object to save it to the database.
post '/new_yak' do
contents = params['contents']
# BEGIN YOUR CODE HERE
# Here, you should create a new yak, initialize it with the data from the form, and then save it to the database.
# END YOUR CODE HERE
redirect to('/')
end
The call to redirect_to at the end of the method means that after the user has posted a new yak, we'll take them back to the homepage - that way they can see the yak they just posted!
Now, you should be able to test everything out. Go to the homepage, and you should already see some yaks. Click on "Create Yak", add a new yak, and go back to the homepage. If you see the yak you just posted, you're in good shape!
Now, let's add the ability for users to upvote or downvote yaks. The code for both will be very similar, so let's first handle upvoting. You'll notice that there are already some links for Upvote and Downvote in each yak's card. Clicking on the Upvote link will call the post '/upvote' method in app.rb.
post '/upvote' do
yak_id = params['yak_id']
# BEGIN YOUR CODE HERE
# In this section, you should increment the yak's upvotes by 1 and return the new number of upvotes in json.
# (Note: This will be called via AJAX, so you don't need to render any html or redirect to any other page.)
# END YOUR CODE HERE
end
The yak_id variable is an integer containing the ID of the yak that the user clicked upvote on. Fill in the rest of the method, which should find the yak, increment the number of upvotes on it, and save it to the database.
Now, do something similar for downvote, except decremenet the number of upvotes by one rather than increasing it. This method should look pretty similar to the post '/upvote' method.
post '/downvote' do
yak_id = params['yak_id']
# BEGIN YOUR CODE HERE
# In this section, you should decrement the yak's upvotes by 1.
# This will be called via AJAX, so you don't need to render any html or redirect to any other page.
# Hint: You should be able to reuse some code from the '/upvote' method.
# END YOUR CODE HERE
end
For the last feature, we'll had the ability to sort yaks by the number of upvotes, so users can easily find the most popular yaks. Take a look at the get '/hot'method. This will get called when the user wants to view all the yaks, but sorted in descending order of number of upvotes.
get '/hot' do
# BEGIN YOUR CODE HERE
# Here, you should use the order method on the Yak class to get all the Yaks ordered by upvotes.
# The order method takes one parameter, which is the field you want to order by.
# END YOUR CODE HERE
end
get '/new' do
# BEGIN YOUR CODE HERE
# Here, you should use the order method on the Yak class to get all the Yaks ordered by it's created_at field.
# The order method takes one parameter, which is the field you want to order by.
# END YOUR CODE HERE
end
Congratulations! You've now built a fully functional app with the ability to create new yaks, upvote and downvote, and sort. If you're really feeling ambitious, add the ability to comment on yaks. This is pretty challenging and will require you to do a little bit of research of your own, so don't be afraid to ask for help on Slack if you get stuck or want a hint!
MIT