Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

Cancel

Free Preview: Build a Bookmark Manager With Rails and Vue

Introduction

00:44
  • Overview
  • Transcript

A bookmark manager is a great tool for storing and sharing links to web resources. It's a great project for learning Ruby on Rails too—a simple web app, but one that uses the full stack, from database to interactive JavaScript!

In this course, Envato Tuts+ instructor José Mota will teach you how to build a custom bookmark manager in Ruby on Rails. You'll create a data model, an interface for editing bookmarks, a link shortener, a scraper to get basic information about each linked resource, and even some front-end JavaScript to improve interactivity. You'll also get to create some unusual custom controllers and custom actions.

1. Introduction

1.1 Introduction

Have you ever wanted to build your own bookmark manager? Do you wanna use Ruby on Rails to improve your learning on the framework? Hi, I'm just a José Mota. I'm gonna be your tutor in this course on how to build a bookmark manager using Rails and Vue.js. We're gonna include a small snippet of JavaScript in order to improve our overall experience. Also we're gonna use that to provide information to the bookmarks. Join me as we build a real supplication that goes a little off the textbook. We're gonna create custom controllers with custom actions that you might not really be used to. Jump right into the next lesson to begin.

2. Build a Bookmark Manager

2.1 Bootstrap the Application

Let's start by creating our project. First of all, you need to ensure you have the Bundler and the Rails gems. At the time of the recording,you still need to pass in the --pre option to Rails. So you would have to install Rails first, and Bundler next. For the time being, I'm gonna do this and also I have Bundler already installed, so I don't need to do that. Now I can start creating the project using Rails new, like so. I'm going to start with the main bookmarks and I'm going to shove in a template file. As you know, Rails has the ability to reach to a file and have specific configurations that you find constantly using. If you want to check the link in the description, you can use that to read the contents of it and we'll use it in this command. So press Enter. It will create everything for you and then will bundle everything, create a git commit and all of that, along with some other configurations as well. One thing to notice though, is that I tend to use Haml in my projects. So if you're uncomfortable with using Haml, you can always go to the file, copy it into your own machine, perform the changes to omit Haml altogether and then create the application but specify your local file. Local files are also available in this command. Okay, there you go, everything is set up. We can just go to see the bookmarks and this is our project. If you type in Rail server or s for short, we will boot up our very own version of the project. Now we can go to local host 3,000 and will have a Rails application up and running. Now, I want to go straight away to creating a resource. It is the only one that we'll need for now. And for that, I'm going to use the rails generate command with a scaffold. The scaffold will revolve around a bookmark which will have a URL and a title to begin with. So let's start by doing that. It seems, that I have made a mistake. Let's see, let's go to the actual Bookmarks folder and call the command. Okay, very nice now. Let's check the migrate folder really quick, let's check the file, the actual migration. So we'll create a bookmarks table with a URL and a title. Okay, that's reasonable enough. Let's type in the rake db:migrate command right away. Let's open our editor. I tend to use vim, as you know, and I'm going to go to config/routes and create a root instruction to bookmarks/index, just like so. This way, we'll be able to reach out to the list of bookmarks without typing in a URL. So reloading this page. It will go straight to listing bookmarks. Let's create a bookmark right away. I'm going to type in for example the Tutsplus website, and the title will be Tutsplus. I think that's good enough or even just like so. Hit Save and you will have that specific bookmark. Great stuff. Now, let's go ahead and turn this a little bit around by using Bootstrap. I've already included this gem in the gem file. Let me just do something really quick. I want to remove every single comment in this file, so let me just grab each and every comment and just delete them. Okay, this is a lot better, let me just remove some of this clutter and there you go. A lot nicer. So, we have a lot of gems here but I want to focus on this one. Let's see bootstrap-sass. So I already have that, I don't need to include it all together. Let's just go straight to the application.css file. Under app > assets > stylesheets, we have the application.css file and I also haven this scaffold generator. And I'm gonna take this file and choose to import Bootstrap by using Bootstrap Sprockets. And the next thing is to import Bootstrap itself. In Bootstrap and Rails, you need to have this instruction first. Otherwise, Bootstrap won't be able to load within Rails. Let me just remove some of this clutter. It's really not necessary. Let's see. Okay, just keep this one, in specific, and this one as well. Let me just remove that, this one as well. Now, as you will see here, this is just a simple cleanup so that Bootstrap can work on its own without any interference. With that, we can reload the page, just wait a little bit and you will see Bootstrap in its glory. Now we just need to tweak a little bit around this. For example, we need to make sure that we have at least a container to center our content. So let's go to our layout. Under views > layouts > application.html.erb. Let me create a container div and shove the U command in there. Reload the page and much more comfortable. Let's progress even further. Let's go to bookmarks.index.html.haml, and maybe, add in the table and table hover classes. Pre loading this. This will look a lot nicer. I really like this. I think, that we can safely remove this header because it will make things a lot simpler. And also, let's take the chance to create a navigation bar on top. Let's go to the layouts again and choose to render a navigation bar right here. I'll call it render nav and this will require the application folder to exist. And after, that we're gonna have the _nav.html.haml file. I'm gonna paste a snippet of code that will include all of the navigation that I want. Basically, it will just have a single title, just in case we want to navigate further down and wanna go back home without much effort. So let's just copy that snippet. So we're going to have a navigation bar on top with a container and a header. It will have a link to our root path and then we will have the navigation on the left and on the right in case you want to progress further in your own app. We're not gonna include anything in this course in specific but you can always choose to create any kind of navigation here. Maybe the hottest bookmarks, maybe the ones that have been clicked the most, or something like that. We can definitely do that. So be sure to take advantage of these two navigation bars and add in the links yourself. For now, we don't need them, so let's just reload the page, and you will see a nice looking bookmarks navigation. Now, as far as a table goes, we can just leave it like this for now. We're gonna have more information in the next following lessons. If you choose to create a bookmark, you'll see something like this which we can always improve as well. Let's go to bookmarks form and instead of having all these fields, I'm actually going to switch these with a small paragraph. So just do something like this. Great, so replace all of these with paragraphs and add in a class maybe called button primary there you go. Let's save this and see how it looks like. Okay, a little better, but I want to do something even better. Let's create another paragraph here and choose to add in the form control class and the same goes for the title field. So copy that. Okay, and add in another paragraph, like so. Let's save this and reload this page and now, you will see something a lot better looking. So we have the URL here and the title here. We can choose to save, but I'm not gonna do it just yet. I want to make sure that we enforce some validation rules in our bookmarks. So let's see, we have the models folder and let's check the bookmark class. This one will include some validations such as, validates, presence of, and we want the URL and the title. Both of these need to be mandatory, and also, ensure that the URL is unique. This is just to enforce the idea that the URL doesn't already exist. Since we are dealing with a single user, we can do this without too much issue. However, if you're having a multi user account, meaning each one of them can have their own URLs, then maybe the validation needs to be a little more considerate. So not include URLs that are unique in between users. So with this, we can go straight back to the browser and hit Save and this will fail. We have URL can't be blank, and title cannot be blank as well. So this is a good start. We have bookmarks with a URL and a title. The last thing we can do is actually to create a link onto that. So let's go there. Let's go to bookmarks.index.html and then create a link here to the actual bookmarks URL. So bookmark.url just like that. Reload the page and we'll be able to go there. Just click on that and there you go, we're on the website. So that's some great stuff. Let's jump into the next lesson, to learn how we can progress further in the application. This is just the very bare bones.