With these last two tasks completed now we are ready to start calling our data from the modules. This is going to be a fun one. We're actually going to create a new page on our application and it is going to be where our tweets are eventually shown.

Let's come into Sublime Text and start off with going to the route's because we know we're going to have to create a route and then we're going to have to map a controller action and a view template. I'm going to just duplicate this route and we'll call this tech news. This is going to be then our root application slash tech news. And this is going to be mapped to a method called Tech underscore news.

Copy that, saved the file and let's open up our pages controller. Inside of this we just need to create a new action called tech news and this is where we're going to store our tweets. I can say tweets equals, and if you want to know what to pull in it's social tool. This is exactly what we called from the console. So I'm going to use social tool dot Twitter search. This is going to give us initially what we need.

So now that we have this, let's come down into app, views, pages, and we'll create a new file here called tech_news.html.erb

And before we do anything else let's just see exactly if we have access to this. I'm going to say tweets dot inspect and let's verify that all of this is working and that we're calling in our tweets.

<%= @tweets.inspect %>

So now running the rails server. Let's wait till it actually gets up and running, make sure we don't have a syntax errors or anything like that. And it looks like everything is going properly. So we should now be able to go to localhost:3000/tech-news. And if I go to this it should be contacting the API and look at that that is working.

So here we have the user's name and then here we have all of the tweets. We have url's, we have all kinds of good stuff. So far, so good. Let's also talk about how we want this structured.

If I open up Sublime Text this is fine but it's not exactly what we really want. We can go look at one of our other pages such as the home page to get a little bit better idea of what we're going to want, and putting that above here. I know that we want the inner cover and I want the cover heading and this is going to say tech news for mine. I could probably put Rail's news or developer news or something like that. I'm going to get rid of everything else that was on the home page. And now from here we can put in however we want our content to be structured. I'm going to create a div that is going to be a class of row and inside of that I'm going to come down and grab our tweets. And now we have something that we can iterate over. So get rid of the little equals sign because we do not want the actual loop to be printed out. I'm going to say tweets.each do and then select the tweet. Make sure that you give an ending tag here. Now everything inside of this is what we actually want shown. So I'm going to create another div. This is going to be a class column md 6 which means that we are going to have each one of these tweets printed out side by side. So essentially what I'm going for is the tweet to be here then next one to be here then drop down on to another row and go down. And since we have six of them we should have three rows of two. So there that should be what we need. I'm going to create another div here and this one is going to be for a custom class that I want to build and for a custom set of styles. I'm going to call this text news. It's not going to do anything right now. We obviously need to implement those styles. Now another div inside of here and this is going to be of class card. And finally we can actually print out our tweet.

<div class="inner cover">
  <h1 class="cover-heading">Rails News</h1>

  <div class="row">
    <% @tweets.each do |tweet| %>
      <div class-"col-md-6">
        <div class="tech-news">
          <div class="card">
            <%= tweet %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>

OK let's now come and see how this looks. Come and hit refresh.

Not bad. Definitely not what we want yet but at least it is broken each one of these tweets into its own separate card. And it's hard to see because by default the card on these pages is using the color white but we'll be able to override that. I'm not going to worry about it right now. Instead what I want to do is focus on one other thing that needs to be built out.

So you may notice, it's kind of hard to notice, but if you look through your own, and you're going to have a different set of tweets obviously. These are all coming in real time. So whenever you're watching this you're going to see a different set of them. But what you are going to see is that there are links here. And what I would like to do is to be able to click on the link and have a new tab open up so that whoever is coming to the site can click on it and go to that news item. I think that would be a helpful thing to do.

In the next guide we're going to build a view helper that is going to parse this content and it's going to make all of these links clickable, which will be, I think, a pretty cool little feature and even more important than that is also something that you'll find that you're asked to do quite a bit. So that is a good thing to learn, being able to build view helpers that can be dynamic and can parse content and give a little bit different behavior. I'm going to say git commit. Implemented Twitter call on tech news page. We can push this up to our branch.

In the next guide we will walk through how we can turn each of the url's inside of our Twitter post into clickable links.

Resources

• Source Code