DEV Community: Jesse Sousa

Learning Rails #2 - Migrations

Jesse Sousa — Mon, 21 Mar 2022 00:14:45 +0000

The role of these series, is to be used as a refresher and a place where beginners can discuss.
If you're also learning (or intend to learn) Rails, I highly recommend that you follow the Getting Started section of the Rails Guides.

When creating a model, a migration file is also generated. You should see a file like 20130924230504_create_users.rb in thedb/migrate folder (this giant number is a timestamp). This is the migration file of your model and if you click it, you see that inside that are all attributes that you made and its types.
After creating a model you have to run the migration, in order to update the database, creating a new table for the model.

What is a Migration?

A Migration basically is a script that will have all the code needed to change your database. Basically every change you make to the database should be through a migration.

For example: Let's say you created a model for users, and ran its migrations, then you realize you forgot the email attribute, you can solve this problem by creating a new migration file.

rails generate migration AddEmailToUsers

And in the migration file, you can add any changes, in our case we need to add an email attribute, so we'll do:

# In the migration file
class AddEmailToUsers < ActiveRecord::Migration[7.0]

  def change
    add_column :users, :email, :string
  end

end

Now:

rails db:migrate

Now all migrations will run, hence the database will be updated.

How to use Migrate and Rollback

rails db:migrate
As we've seen before, this will run all the migrations.
rails db:rollback
It will run the inverse command for everything a migration did, sometimes you'll need to write it yourself check the documentation for more information.

By default, the commands above will run all the migrations you have, using the timestamp to track the order of when which script should run. To run only the migrations you want, use the STEP parameter. Ex.: rails db:migrate STEP=2, this will run only two migrations files.

Learning Rails #1 - MVC

Jesse Sousa — Mon, 14 Mar 2022 23:27:16 +0000

This is the first post of a series called Learning Rails, where I explain everything I learn during my journey to mastering Rails. The role of these series, is to work as a refresher and a place where beginners can discuss.
If you're also learning (or intend to learn) Rails, I highly recommend that you follow the Getting Started with Rails Guide.

Before we start, here are some things to note about Rails:

"Convention over configuration" - You'll realize that Rails does a lot of things implicitly for us, it happens because Rails defaults to a set of conventions. So we can spend more time coding rather than configuring.
No need for importing files - Rails utilizes autoload, meaning that it loads all necessary files during execution.
Naming matters - All my examples follow the naming conventions, but I won't be focusing on explaining them here, the Guides has everything you need to know.

What is MVC?

MVC stands for Model View Controller and is the architecture used by the framework. In order to learn Rails, you have to understand MVC. I'll give a brief explanation of what each component does (and how to create them), but remember to always read the documentation if you need a deeper understanding.

When creating a project with rails in the command line ($ rails new <project-name>), a bunch of folders will be generated. For now, we'll be focusing on the app/ folder. You can see an explanation for each directory, on the Rails Guide.

Model

The Model class is responsible for our data, it represents an object of our application and it also connects to the database by inheriting the ActiveRecord class. Here we can validate, query, add, update and delete our data from the database.

The Active Record class

The Active Record class is responsible for handling the connection and queries of our database. It is the magic behind writing ruby code for manipulating our database.

Creating a Model
On the terminal, run:

$ rails generate model Article title:string body:text

Here we're saying the name of our Model and its attributes joined by : with the attribute type.

View

This is the most straightforward one, it is the visual part of our application, so it includes all of our files that renders the visual part of our application.

On rails, we generally use ERB(Embedded Ruby) for our views, which is a template engine. This allows us for rendering static pages with all information we want in a easier way, for example, rather than creating manually a list with all articles, we can use Ruby's #each method to do that, soon you'll better understand how this works.

To create a View, simply go to the app/views/<Controller Name> and create a new .html.erb file. The filename should match with a controller action.

Controller

Here is where we bind all of this together, the controller class contains various methods (usually called actions in the context of Rails) responsible for rendering views and handling our models. It acts as the middleman, since it handles requests and responses in our application.

Creating a Controller
On the terminal, run:

$ rails generate controller Articles

Remember to always create it with a plural name, following the naming convention.

Routes

The routes file is where we map all our requests and responses, to create a new route we define the path, HTTP verb and action for our route. The action is actually a method for a determined controller, as I've mentioned before.

Here is the syntax for creating a new route:

# In `config/routes.rb`
Rails.application.routes.draw do
  # Every time a GET request is made to the `/articles` path the
  # `#index` method from the articles controller will be called
  get '/articles', to: 'articles#index'
end

RESTful routes

For our routes we'll be using the REST(Representational State Transfer) architecture, which has to do on how we implement our routes. REST consists of 7 routes needed to create a CRUD for our application.
To better illustrate these routes, let's imagine we have a blog and we want routes to create/read/update/delete(CRUD) our articles. By using the REST architecture to create our routes, it will result in the following:

# In `config/routes.rb`
Rails.application.routes.draw do
  # Get all articles
  get '/articles', to: 'articles#index'

  # Get one single article
  get '/articles/:id', to: 'articles#show'

  # Get form view for creating a new article
  get '/articles/new', to: 'articles#new'

  # Create new article
  post '/articles', to: 'articles#create'

  # Get form view for editing an article
  get '/articles/:id/edit', to: 'articles#edit'

  # Update our article
  put '/articles/:id', to: 'articles#update'

  # Delete an article
  delete '/articles/:id', to: 'articles#delete'
end

Notice how all the actions follow a naming convention, these are not random, it is actually the standard naming for such routes. We can replace the code above by using the keyword resources:

# In `config/routes.rb`
Rails.application.routes.draw do
  # This creates all 7 RESTful routes
  resources :articles
end

By doing this, ruby will use the naming convention, I've mentioned above, to implicitly create all the 7 RESTful routes and its action calls.

The Rails Console

The Rails Console is a way of accessing our application via the Command Line, here we can create components and test them.

In the command line, run:

$ rails console

This will open an IRB(Interactive Ruby) instance with Rails and the application code loaded. So we can create a new article by using the Article Model class.

# Here I'm assuming there is an article model that contains a
# `title:string` and `body:text`

# Inside Rails console, run:

# This creates a new Article object
article = Article.new('New Article', 'This is a new article.')

# This save our object to the database
article.save

# Quit the Rails console
quit

Great! Now that we have an article, we can render it on our page.

Handling Requests in our Controller

To send a response, we'll need to map the request to the right action. If the resources keyword was used, the route GET /articles will call the #index action.

We want the response to be a page rendering all the articles our blog currently has. To do that we can create the #index action in our controller, get all our articles and store it into an instance variable.

# Inside `app/articles_controller.rb`
class TasksController < ApplicationController
  def index
    @articles = Article.all
  end 
end

Here's one thing to notice, Rails implicitly calls a render (and passes our instances variables) for a view with the same name of our action, so a call for #index in the articles controller will render the file app/views/articles/index.html.erb, remember "Convention over Configuration" now you're seeing this in action. So let's create that file.

<%# In `app/views/articles/index.html.erb` %>
<h1>Index</h1>
<%# Here we can use: `@articles` %> 
<% @articles.each do |article| %>
  <div>
    <h2><%= article.title %></h2>
    <p><%= article.body %></p>
  </div>
<% end %>

And that's it. That's pretty much how the MVC architecture works in Rails.

Remember these series should only be used as a refresher, the way of really learning Rails is by reading the Guides.

Don't forget to like, save and ask questions (I'll be answering everything I can, just remember I'm not an expert YET). Also, if you have experience with Rails, feel free to point out topics that I might be missing and suggestions you might have.

How to deploy your React App with Github Pages

Jesse Sousa — Sat, 22 Aug 2020 21:26:50 +0000

Github Pages is a nice way to host your website, it's completely free and very easy to deploy, and you can use it with any framework not only React. I didn't know that when I was a beginner and I thought it would be nice to share it.

Before starting, make sure your app is hosted in a Github Repository.

1. Install gh-pages

In your terminal type, npm install gh-pages --save-dev or if you're using yarn yarn add gh-pages --dev. The gh-pages dependency is what you're going to be using to deploy your app.

2. Add the scripts and the homepage URL

In your package.json file add:

"homepage": "https://[your github username].github.io/[your project name]"

Make sure that your project name is the same used in your GitHub repository.
Then add to scripts:

"predeploy": "npm build", "deploy": "gh-pages -d build"

3. Time to deploy

Finally, on your terminal type, npm run deploy and that's it, as I said, very simple. It may take a couple of minutes before your app gets hosted but if everything works fine you should be able to see your app with the URL that you used for the homepage.

Create your own Markdown Previewer with React

Jesse Sousa — Sat, 15 Aug 2020 20:47:40 +0000

When I was starting to learn how to code I never thought I could do my own Markdown Previewer. I thought it was too advanced and that it would be impossible to do it on my own. But later I learned that it is quite simple, I mean it is not simple to parse Markdown code, but we can use packages to do all the hard work for us. And only care about the styling.

And that's what we're gonna be building today, in this tutorial, I'll be using React, but it can be easily done with vanilla js.

1. Create your React project

On your terminal type the following commands:

npx create-react-app markdown-previewer
npm install --save react-markdown

The first command will generate our app, and the second command will add react-markdown to our dependencies. The react-markdown is the dependency that will parse markdown to jsx for us.

2. Planning and Creating our first components

Our App is gonna be very simple, the UI will be divided into 2 panels. The left one being the input, and the right one being the output.

So let's create them. On your src folder create both components, with MarkdownInput being a textarea and the MarkdownOutput a div tag. Inside App.js let's add markdownInput to our state, then assign it with an empty string, like so:

this.state = {
    markdownInput: ''
}

Every time a user types on the form we want to update the markdown input value, to do so let's create a function that sets the state for us.

handleChange = (evt) => {
    this.setState({ markdownInput: evt.target.value});
}

Now let's pass it down as a prop to the MarkdownInput component and also pass markdownInput to our MarkdownOutput component. On App.js inside the render function:

<MarkdownInput handleChange={this.handleChange} />
<MarkdownOutput source={markdownInput} />

On MarkdownInput.js, add the handleChange function:

handleChange = (evt) => {
    this.props.handleChange(evt);
}

And inside the render function, add a textarea element and add a onChange event listener.

<textarea onChange={this.handleChange}></textarea>

On MarkdownOutput.js, import the ReactMarkdown component from react markdown:

import ReactMarkdown from 'react-markdown';

And inside the render function, add a div element wrapping the ReactMarkdown component. To our ReactMarkdown component render our markdown we need to pass our markdown to the source prop:

<div>
    <ReactMarkdown source={this.props.source} />
</div>

And that's it! Now, all we need to do is to add our styles. Here's the link to my repository in case you want the same styles that I'm using.