- Read Tutorial
- Watch Guide Video
With our angular 2 app all prepped to go now we're going to get into the rails component of our application. So I'm going to start off with documents and the reason why I'm starting with our documents application is because I think it's probably the most straightforward and it will be an easier transition once we get into proposals. Because remember our documents are simply going to be the model or the architecture component that is going to store and manage the data and then the angular 2 app is going to query it and show it on the screen. It's pretty much as straightforward as you can get from a microservice standpoint.
We're not creating new documents from the angular app we're simply rendering them as they appear. And the nice thing about this is that you can imagine having some kind of administrative dashboard that an admin can go and they could upload documents and it could be completely separate from the angular component. And that's one of the beautiful things about using microservices is it's a lot easier to manage and the items don't all have to be communicating with each other. They only have to talk to the different components that they need to have access to.
So with all of that being said let us now get started on building our application. Now it's very important on this side that you start off and you have rails installed and also that you have rails 5 installed because this is going to be a Rails 5 app. You can check this by typing rails -v
And this is going to tell you which version of rails that you're working with. And right now we have Rails 5.001
. And if you look all the way to the right it shows that I have ruby 2.3.0
and that's what I'm using at the moment.
The way I usually like to do my naming structures for microservices is to have one kind of master name such as freelance just like we have for freelance_camp_fe
. And then to have documents. And some of the things that we want to pass in is to add two dashes and then say API. This is going set up our application. So it's an API only app, which means that when we run generators for example, it's not going to create all of the form code and all of the different elements related to that. It's simply going to create a JSON API that we can read into the application. So I'm going to do that. I'm also going to bypass the tests because the tests slow down the installation. So if you add that you're not going to have the tests installed. And then for the database I'm going to use postgresql
because we want to use postgresql instead of SQL Lite. So to create this application. I'm going to run this command in the terminal.
rails new freelance_camp_documents --api -T -d postgresql
Now if I hit return this is going to generate the application and I already can see that I made one mistake but it's an easy one to fix. If you notice the spot the path where I saved this I actually saved our rails application inside of the freelance camp application which is not what we want whatsoever but we can fix it. I'm going to open it by typing open .
.
And as you can see right here we have our application but we also have our freelance_camp_documents
application nested inside of it.
This is not the kind of structure we're looking for. What I actually want is I'm going to go back with cd ..
and then open again with open .
. And as you can see here what we have is the master location.
So I created this directory called angular rails and this is where I want everything to reside. So what I can do is I can just copy my freelance_camp_documents
file; then past it into my angular-rails
directory. Then I can delete the one that was in the wrong spot. So if you happen to be at the wrong spot when you generate the application it's an easy fix. (This is what your angular-rails
directory should look like.)
So now we have our two applications that we built so far and they're inside the same directory not inside of each other. Now if I type LS
you can see that I can see both of these directories.
Now let's change directories so we're at freelance_camp_documents
and now we can run bundle install
just to make sure everything is installed properly.
Now let's also create the database. We have a new syntax in rails five for doing this so we can type
rails db:create
Before we had to type bundle exec rails rake db:create
. Now we have a little bit easier syntax in rails 5. So I'm going to hit return. This will create the database.
Now what we can do is we can set up our scaffold. So for this one I am going to use a scaffold usually in a full on application I wouldn't use a scaffold i'd use a resource generator or something like that. But for this case I want to show you very quickly how we're going to access everything. So I'm going to create a scaffold. This is going to be rails g scaffold
and I don't want to call this document because if I call it document there are a number of naming conflicts and namespace issues.
So instead, what I want to call this is FreelanceDocument
and that's going to be our model name and we have to pass in the values that we want. So for this let's actually take a look at our interface. This is one of the nice things about already creating an interface.
So if I come here and open up our document.ts
file. Right here you can see that we already have all of the items needed so this is nice.
I can say title
is going to be a string then description
is going to be a string and file_url
is going to be of type text. And the reason for this is because Rails has text which is going to give us a near infinite supply of characters we can use so if we end up with a really long url for a file then we can still use it if we use just the plain string and the file url was too long then we'd get an error. So we want text for the file_url
. updated_at
we'll get for free so we don't need to add that in and then image_url
, this one is also going to be of type text. This is the code.
rails g scaffold FreelanceDocument title:string description:string file_url:text image_url:text
So I'll hit return and we can see exactly what this generates for us.
So let's open this up in sublime and actually take a look. So pulling up freelance_camp_documents
we have a full Rails application. We have our app and inside we have all of our different things such as controllers and models everything like that. Now I need to migrate the database in order for this to be updated.
rake db:migrate
This should update our schema file. And if I go and look at schema.rb
you can see we have freelance documents with a title, description, file_url, image_url and then we also get this updated_at just for free.
Now before we end and we go into the next guide I want to show you some of the things that are different about this application compared with just a normal one and the main component is (you remember that we just ran a scaffold). Usually if we ran a scaffold if you went in the views files you would see all kinds of items related to our freelance documents, because you would have the forms, you'd have everything like that. But notice how it didn't do any of that. It created a controller. And if you go to freelance_documents_controller.rb
, you can see that it has all of these items. However instead of views it's just rendering JSON.
So that's the biggest difference. That instead of the application having views and the normal kind of structure there especially with scaffolds and things like that here it just knows that we want to return JSON and that's going to be what happens when we call the API. So in the next guide we're going to set up our database and create some sample data so that we can have that shown and then have the angular app connect to it. So it can pull those documents in.