[Ruby] A series of workflows to create artifacts for portfolio with Rails

10 minute read

For those who

  • ** Those who want to develop applications with Rails ** but stumble on the environment construction
  • Those who are not very familiar with Git・GitHub

Introduction

My name is @million_momoban, a college student with 22 graduates who is aiming to become a backend engineer. In addition to web application development and programming learning, I plan to send information about job hunting and internship.

Situation

I made a mistake while creating a Rails app (later solved) and it was a situation where I could not manage it with Git, so I decided to start the project from 1 because it was a good opportunity.

It’s a waste of time to step on the same rut, so I’ll keep a record of how one web app can be done.

As a beginner, I often stumbled upon the “environment building” ** and ** “Git management” ** to record a series of app development flows.

**Comments are welcome, whether in article content, technical or otherwise! **

Environment

  • Mac
  • Xcode / Homebrew / rbenv installed
  • VSCode / iTerm2
  • GitHub registration/SSH connection already

From securing work space

I will make a project immediately.

$ mkdir sample_app

Move with ```$ cd sample_app

and specify the Ruby version to install.



```terminal:~/sample_app
$ rbenv install 2.6.5
...
Installed ruby-2.6.5 to /Users/foo/.rbenv/versions/2.6.5

I waited for a few minutes. Once you have adapted it to your environment with ```$ rbenv local 2.6.5

, you can proceed.



```terminal:~/sample_app
$ bundle init
...
Writing new Gemfile to /Users/foo/sample_app/Gemfile

Open the generated Gemfile, either vim or directly from Finder. Remove the # of # gem "rails" described at the bottom to ```gem “rails”

.



```ruby:~/sample_app/Gemfile
# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}"}

gem "rails" # uncomment

If possible, return to the terminal and install rails with the following command.

$ bundle install --path vendor/bundle

Reference: [Is it really necessary to add –path vendor/bundle when installing bundle] Let’s think twice again (https://qiita.com/jnchito/items/99b1dbea1767a5095d85)

Start Rails project

Let’s check Rails that can be installed.

$ gem list rails

*** LOCAL GEMS ***

If you do not have the version of rails you want to use, specify the version and install the gem. If you do not specify it, I think that 6 series will be installed. 6 series is still unstable in terms of compatibility, and there is little information due to new information, so it is better to avoid beginners.

$ gem install -v 5.2.4.2 rails
...
$ gem list rails

*** LOCAL GEMS ***

rails (5.2.4.2)
...

Now that the gem is installed, we can finally start the project.

Portfolio


$ rails _5.2.4.2_ new .-d mysql --skip-turbolinks --skip-test --skip-bundle
create
      create README.md
      create Rakefile
...

You can deploy the Rails project to the existing sample_app by giving it as ```new .

.


The explanation of the command is as follows. Please add or remove depending on the situation.

- ```rails _○.○.○.○_```
    -Specify version and install
- ```-d mysql```
    -Change database from default SQLite to fast and stable MySQL.
- ```--skip-turbolinks```
    -Turn off Turbo Link. It seems that page transition will be faster.
- ```--skip-test```
    -Skip the default minitest as we plan to use RSpec.
- ```--skip-bundle```
    -Because Rails version may be overwritten if you do ```bundle install
#### **`.`**

But it seems that it has a deeper meaning.


When finished, write the necessary gems in the Gemfile in the project name directory. By fixing it as ```’= 5.2.4.2’

, it will be fixed so that it will not be the other version.



```ruby:~/sample_app/Gemfile
...

ruby '2.6.5'

gem'rails','= 5.2.4.2'
gem'mysql2','>= 0.4.4','< 0.6.0'

...

After writing the necessary gem, $ bundle install

$ bundle install
...

An error occurred while installing mysql2 (0.5.3), and Bundler cannot continue.
Make sure that `gem install mysql2 -v '0.5.3' --source'https://rubygems.org/'` succeeds before bundling.

Somehow an error occurred in mysql2. I tried it variously, but it was solved by Webbook’s Cannot install mysql2 with Rails 5 gem.

$ bundle config --local build.mysql2 "--with-cppflags=-I/usr/local/opt/openssl/include"
$ bundle config --local build.mysql2 "--with-ldflags=-L/usr/local/opt/openssl/lib"

```$ bundle install

again and the next succeeds.


Create a database with ```$ rails db:create
#### **`.`**

In operation check, do ```$ rails s

and access localhost:3000...



<img width="617" alt=" Screenshot 2020-06-20 13.25.58.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597061/67e14813-f7c8-a972-7f47-e92f0ffe34b0.png">

You can connect and the version is perfect!


## Git management and GitHub
Next, we will manage the project using Git.
The tools that are already on VS Code from the beginning are more than enough, so I will use them.
An extension called GitHistory is convenient, so install that as well.

## Try

Start a new project from Repositories New on [GitHub](https://github.com/).
Put your favorite name in Repository name, check Private and pass the others.
<img width="776" alt="Screenshots 2020-06-20 16.20.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597061/99e2077a-c09a-062e-6ceb-6fe84526688d.png">

After pressing Create repository, leave that screen temporarily and move to VS Code.
After starting VS Code, open ```sample_app``` from "Open folder".
From the terminal, enter the five lines of commands displayed on the previous screen in order.

```terminal:~/sample_app
$ git init
$ git add.
$ git commit -m "first commit"
$ git remote add origin https://github.com/******/sample.git
$ git push -u origin master

The explanation of the command is as follows. If you don’t understand, you can go through.

  • git init -Start management with git
  • git add . -Add the edited file to the staging environment for committing. All files are staged by using

    .

    ```

.


- ```git commit -m "first commit"```
    -Commit the files on staging with the message ```"first commit"
#### **`.`**

The message “○○” is added by ```-m “○○”

.


- ```git remote add origin https...''`
    -It seems that the remote server ```(https...)
#### **` is given the short name origin. It seems that the origin is customarily decided.`**
  • git push -u origin master -Push to sync local changes to remote repository. You can see that the origin master is the remote ```master branch

    .

    ```

Development

Let’s take a look at VS Code’s Git History. You can see the history by clicking 1, 2 as shown in the image, and you can check the first commit you made first.Screenshot 2020-06-20 17.08.13.png

You can see from 3 that you are currently in the branch called master. A branch is a branch for branching “for modification” or “for adding functions” without affecting each other’s development environment, and for flexible development.

master and topic

It’s customary to put stable versions and finished products on the default master branch and not develop on the master branch. So let’s create a new development branch. Create a new branch from 3. This time I named it’topic’.

Try ```git status

in the terminal to see the current status of Git.



```terminal:~/sample_app
$ git status
On branch topic
nothing to commit, working tree clean

You’re on the topic branch, there’s nothing to commit, and your workspace is clean.

add

Once you’re sure you’re on the topic branch for development, let’s play with the files a bit. I reset gitignore and changed ```README.md

a little. If you click the Git mark on the sidebar and look at the contents, the two files above are in the workspace, so click the + button to move to the staging environment.


This does the same thing as ```$ git add
#### **` in the terminal.`**

 screenshot 2020-06-20 17.38.33.png

It’s staged and ready to commit. Then write the commit content in the text box above it and press the check button above to commit the changes. This is also equivalent to ```$ git commit -m “operation check”

in the terminal.


<img width="458" alt=" Screenshot 2020-06-20 17.40.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597061/d33db270-2cc5-7459-81ca-63bee6297986.png">

Let's look at the history again. Looking at the next photo, you can see the latest state, the green topic branch in the upper row, the green master branch and the red origin/master branch in the lower row (before change). Since we are developing in the topic branch, you can understand that the time series is the latest.

<img width="314" alt="Screenshots 2020-06-20 18.19.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597061/a3de6e39-f0a6-6acd-f7cf-479119c41950.png">

Now, it seems to be okay to reflect the changes to the local master branch, so I'd like to merge them. First, press topic at the bottom left to select the master branch, and confirm that you have moved.
<img width="314" alt=" Screenshot 2020-06-20 18.16.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597061/d4f7c6c3-8ed2-6837-94ed-e29e7eb7a3bf.png">

Click More just below the green topic and select Merge this.
When you select the topic and complete the final confirmation...
<img width="1168" alt="Screenshot 2020-06-20 17.55.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597061/4597b0e5-3679-28dc-2d5e-8be219d09e2c.png">

The contents changed in topic have been properly reflected in master! !!

## Push and pull requests

Actually, I think that there is a cloud mark or a button with two arrows in a circle to the right of the button written by topic or master that was pressed when switching the branch. You can easily sync your current changes to a remote repository by clicking on it.

But think about this. It's like suddenly syncing changes to a master branch that you've been working on as a team and decided to only handle the finished product without confirmation from other members.

If you make a pull request, you can ask a team member to review the code whether it is worth merging, and if it is approved, it can be merged and you can prevent accidents. It's a personal development, but it's probably worth getting used to.

### way
Let's say you proceed with development on the topic branch and there are changes to three files. Use the + button to add to staging and add a commit message appropriately.
<img width="246" alt="Screenshots 2020-06-20 19.00.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597061/f15685c0-8546-d830-feb9-1b5bcec1d3b1.png">

Also commit, switch to the master branch as before and merge the topic branch.
<img width="916" alt=" Screenshot 2020-06-20 19.02.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597061/66c42c7f-4952-c20e-07a3-e648d2ae06a9.png">
Yeah, as expected.
From here, we will push to the remote repository, but the flow is as follows.

Push from the master branch of the local repository to the origin/topic branch of the remote repository (to be honest, it feels fine to use origin → origin/topic)
↓
Make a pull request from origin/topic branch of remote repository to origin/master on GitHub
↓
Ask the repository administrator to merge it.

Let's continue from the previous step. Push to orign/topic.
Oh, the remote repository only has the master branch, right? If you think that, please rest assured. If there is no branch, a new branch will be created depending on the situation.


```terminal:~/sample_app
$ git push origin topic

...
remote: Create a pull request for'topic' on GitHub by visiting:
remote: https://github.com/******/sample/pull/new/topic
remote:
To https://github.com/******/sample.git
 * [new branch] topic -> topic

Make a pull request to topic on GitHub. topic -> topic means topic -> origin/topic ~.

Pseudo team development

Looking at GitHub and going to the top page of the project, there is 'topic' Compare & pull request, so click to create a pull request. If not, select topic from ```Branch

and it should appear.

```

Screenshots 2020-06-21 10.03.07.png

The top box compares the pull request from topic to master and shows that it can be merged. If you can confirm it, write the title and message. I think that the message when committing is assigned to the title from the beginning. Screenshot 2020-06-21 10.08.16.png

Try to write a message that other people can understand. This article was very helpful for how to write Pluriku. →GitHub “Tell me how to write perfect Plurique”

If you can write a message, do’Create pull request’. This time it is an individual development, so the repository administrator is only me, so I can merge it immediately, but I will try it variously because it is impatient. Click File changed from the tab. Screenshot 2020-06-21 10.32.41.png

Here you can review the files that have changed. Leave questions, suggestions and praise comments proactively. After writing all the details, go to’Review changes’ in the upper right corner and click’Submit review’. Screenshots 2020-06-21 10.30.40.pngWhen you go back to the’Conversion’ tab, the reviews etc. are reflected. Screenshots 2020-06-21 10.42.34.png

After finishing the final confirmation, complete the merge with’Confirm merge’ from’Merge pull request’. Screenshot 2020-06-21 10.46.02.png

When you go back to the top page, the merge is reflected! Screenshots 2020-06-21 10.51.24.png

This completes the series of steps. I think that the act of making it look as if it was being developed by multiple people is called pseudo pull-like.

Summary

By writing this article, I was able to know a lot of things that seemed to be understood but were not done. Even so, there are many things that I find suspicious to write (especially for branch operations), and I still need to study.

Since I wrote such a long sentence for the first time, I think there is something wrong! From now on, I am keeping a record while continuing the development in the ongoing system. I will write more once the project is complete or completed. Is it RSpec next? ?

Whether you live in a local area, study by yourself, or are not an information system, you can prove that you can get a job as a back-end engineer by completing some work products without having friends who are programming around you! !!

As a student, I plan to publish articles about job hunting information and internships as articles. Please feel free to comment, as it can be any article or non-article content! !!

Reference article