1. Introduction

1.1 Introduction

Welcome to Tuts+. My name is José Mota. In this course we're going to build a very small project. We'll build an image gallery. An image gallery is a perfect example on how to use a small set of gems to accomplish the scenario. It also a very practical example, because many people want to showcase their images, their photography, or their portfolio, anything goes. For this specific project, we'll use just a couple of gems. Namely, Sinatra will be the framework of choice because it is a lot smaller than Rails, a lot more light weight and it will accomplish the task just right. We're also going to be using a small dose of JavaScript, just to make the page look a little more appealing. We'll use some open source libraries to do so, and also it will assist us in a minor set of social features, such as sharing a particular image on Twitter or Facebook. Let's jump in right to the next lesson. We'll bootstrap our project with the minimum set of files and folders. I'll see you soon.

2. Creating the Image Gallery

2.1 Bootstrap the Sinatra Project

Let's begin by bootstrapping our project. We're going to need some sort of a folder structure that will hold the code, the templates, and the assets. Let's quickly create a folder to hold all of those. I'll create an image gallery folder, this looks just fine. Let's enter it and begin the set of files in folders. As you know, there's really no such thing as a Sinatra generator. I mean, you can use Padrino if you want. I'm actually going to post a link to the description below so you can know about it. I really don't like it as much as I would do with standard Sinatra. We want to keep thing simple. So actually, I'm going to open my vim editor. And from here, I'll create the files and folders that I need. I'll start with a Gemfile. A Gemfile will hold all of our gem dependencies. So, let's begin with that. I'll create a source directive, which should point out to RubyGems.org, the standard repository for all of the gems. Now, I'm going to indicate some gems. So here is the list of all of the gems that we'll be using. We'll begin with Sinatra, since this is the framework that we'll be using. We'll use CarrierWve to store our images into our own disk. We could be using something like S3, but that's a paid option. Go ahead and check how you can use S3 with CarrierWave. I usually like to run Puma as my server, because it's really fast, and also it supports threads. As always, I use Haml for my markup. You can use this gem if you're not comfortable with it. But it should be pretty easy to understand the code that's going to be built. The sequel gem will allow us to interact with a database wnd carrierwave-SQL will handle the interaction between SQL and carrierwave. We'll use the sqlite3 gem to interact with sqlite databases. Then the pry-byebug gem will allow of us to send debugging incase we need to. The time encoding words gem is really fun. It allows us to create a natural language, so to speak, for our timestamps. So instead of having the timestamp coded hard, we use a helper method provided with a gem that will allow us for a more social kind of speech, tell us when the image was posted. The arm metric gem will allow us to do some operations with the images. You see, when we upload an image, we would like to have some sort of a thumb version, a smaller version of the original one, to showcase it off in the list of images in the gallery. So we use this gem to interact with that. You will need ImageMagick installed already in your computer. If you don't know how to do it, go ahead and check the link in the description below to install ImageMagick. With this, I'm going to go ahead and type in bundle, and this command will install all of those gems and our machine. So we just need to wait a little while. Well, it seems that I already have those, so we're good to go. All of the gems are in place. We can create the remaining folder structure. We'll need an app.rb file which will hold the actual Sinatra app. We're also going to need a config.rule file which will boot the application. We won't separate the application from the configuration to run it. Also, we're going to need a public directory, a views directory, a lib directory as well to hold the ruby code, and also a db folder. The DB folder will just store the database. You can actually skip this step if you wan to just paste the database file in the route. I like to keep it separated, so there's that. So, this is basically it. The public folder will hold all of the CSS and JavaScript files, as well as, the images, really. Then, we'll have our views folder which will contain all of our Haml templates. The lib directory will contain, for example, the image model and some other files that we might need such as a carrier wave uploader and the db, which I've just mentioned. So that's basically it. So, as for deconfig.ru file, we'll just need to require some stuff and run the application. Let's start by requiring bundler, because it holds all of the jams to be required. We use bundler.require and all of those gems will be loaded. You can see that the particular case of carrierwave SQL requires carrier wave/SQL to be loaded. So when using the require instruction, it will take that into consideration. Also, we're going to need to require the actual application. So, we use ./app, which will go to the current folder and retrieve this file. Now, we can just run the app. Also, we're gonna need to require many different files from the lib directory. Well, we still don't have any, so I'm just going to comment this out really quick, and bootstrap the application, per say. Let's go to the app folder, I'll open it in a new tab, and from here, I'll type in the app class which will inherit from Sinatra:base. I like to use this notation rather than just writing the code without any class. I like to keep the state. So from here, I can type in get and then a forward slash for the root page. From here, I will type in hello image gallery. There, this should provide us with a simple bootstrapping of the application. We'll know for sure that the app will be running and that the content will be delivered. So let's recap. This config.record file will require all the gems, the application file, and all of the files in the lib directory, and then the application. The application is in it's own file, and from here, we can go ahead and open a new tab under tmax. You can just create a new window. Go to that Image Gallery folder, and type in rackup. If you have all of the gems necessary, this should be available. So type that in, the Kuma server will be up, and from here, we can open our browser, type in localhost:9292. There you go. Our image gallery is right there. Our application is serving the content that we were expecting. Awesome work. Now we can jump in straight to the next lesson and start developing the process of storing our images. We'll create a model and an uploader to store those images.