How to Generate Data in a Rails 5 Application
This guide shows how to generate the data that we're going to make available to the Angular front end.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

So now that we have the basic components of the application ready to go now we can create our actual data; and the easiest way to do that would be to go to the seeds.rb file here and we can get rid of all of the comments and I'm going to copy over the freelance document table in the schema.rb file and paste it in to the seeds.rb file just so we have access to it and I'll comment it out.

And now we can create our documents. So for the case of what we have here we're going to have FreelanceDocument.create! and I'm going to pass an exclamation mark so if there are any errors it's going to throw them right here. And then I can pass in title: "Documents 1". Then we're going to have a description now for the description I want something a little bit better than me typing "asdf" a few times so I'm going to go to lipsum.com and get some nice Latin here. This is going to give us our description so passing in a string we have our description and I'm going to also structure this a little bit better. Just so it's easier to read. So there's the description, add a comma and the next thing we're going to have is the file_url now this one it doesn't really matter what we plug in there because we're just going to be pointing them to either a gist or some kind of file to go download.

I'll go to my google drive just so we can pull something up. So I'll say freelance and we'll go to the template. Obviously we already have a proposal template that's going to work a lot better than this one because it will be dynamic. And for the actual freelancer course that I'm working on these type of documents will be more like contracts and different things like that. So I'm going to make it shareable and I'm going to click Advanced so that this is going to be public so anybody on the web will be able to see it then hit save and just so they can view it. So if you go to this you're not going to be able make any changes.

OK. So this is the link to share. And now if I open up an incognito window you can see that I can still access this even if I'm not logged into my Gmail account. So this is going to be the file_url and as you can see it's a pretty long character here. So this is the reason why I wanted this to be of the text data type just because it will get pretty long. The next thing is our image_url. So for the image_url. I had an image made in Photoshop and let me go pull this in. It's going to be coming in from Amazon AWS. And then that is it.

FreelanceDocument.create!(
  title: "Document 1",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
    veniam, quis nostrud exercitation",
  file_url: "https://docs.google.com/document/d/1UUgAob6ZpivgkgCbMD84JMMRc1flrzCPKybtQoAfASo/edit?usp=sharing",
  image_url: 'https://s3.amazonaws.com/devcamp-static/images/freelance-img.jpg'
)

So this is our document one. Let's create a few more of these. Right here I'm going to say 10.times do |d |. This is going to create 10 of them and I'll use some string interpolation here and there we go.

10.times do |d|
  FreelanceDocument.create!(
    title: "Document #{d}",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
      veniam, quis nostrud exercitation",
    file_url: "https://docs.google.com/document/d/1UUgAob6ZpivgkgCbMD84JMMRc1flrzCPKybtQoAfASo/edit?usp=sharing",
    image_url: 'https://s3.amazonaws.com/devcamp-static/images/freelance-img.jpg'
  )
end

So it's going to say document 0 through 9 because it starts at zero. And let's test this out so we can open up the terminal. And if I run

bundle exec rake db:setup

This is going to run that file. And if everything works then it's going to create these items and we can test this out by opening up the rails console. rails c.

Then enter

FreelanceDocument.last

And there you go.

large

So we do have an id of 10 which means 10 of these were created. So everything on this side is good.

Now let's take a look at what this is going to look like as far as the other application and what it's going to get if I type in rails s and I'm going to pass in a P flag. So I'm gonna do

rails s -p 3001

Now what this is going to do is it's going to start the server but it's going to override the default server settings. I'm not sure if you noticed but on the freelance camp application, NPM uses the port 3000 as the default and so does rails. So in order for our applications to work, they all have to be able to run at the same time. So when we finished building out all of our apps we're actually going to have three servers running simultaneously on this one machine. The freelance camp front end is going to be on port 3000 and our documents are going to be running on 3001. Then I'll put our new one that we'lll create our proposal that will be on 3002.

So now if I hit return this is going to start the rails server and it's going to start at 3001. Now in order to test this out, I'm going to open up the browser and navigate to localhost:3001/freelance_documents. And as you can see right here we have our data.

So this doesn't look very helpful right now because you're so used to being able to go to an application and have the items rendered in a way that you can view them on the screen. But actually, this is exactly what our freelance front-end needs. So this is going to provide us with everything that we need and if we look at it you can see that we have an ID, we have a title and we have a description. All of the data parameters that we put in the seeds file is right here. And if you're wondering why it needs to be in this kind of format it's because JSON is one of the most universal data transfer systems out there or a format option and what it does is it gives a standardized way that applications can talk to each other.

So pretend that we didn't make JSON this convoluted in terms of you know how easy it is to read and everyone created their own version. It would be very challenging for applications to communicate with each other because every application would need to come up with its own format. So JSON is one of the standard formats that people use for being able to send and then parse API data. Another one that's pretty standard but it's a little bit older is XML and there are some additional ones so that you can use however if you're working with modern development ninety-nine times out of 100 you're probably going to be working with JSON data. And that's exactly what we have here.

So now that we have this, in our next guide we're going to go back to our angular application and we're going to start building services in that can read this data and then display it to the user.

Resources