A series of steps to create portfolio deliverables with Rails

To such people

-** Those who want to develop apps with Rails ** but stumble in terms of environment construction -** Those who are not very familiar with Git / GitHub **

Introduction

I'm @million_momoban, a 22-year-old college student who aims to become a back-end engineer from inexperienced. In addition to web application development and programming learning, I will also provide job hunting and internship information.

Status

I made a mistake while creating the Rails app (solved later), and I couldn't manage it with Git, so I thought it was a good opportunity and decided to start the project from 1.

It's a waste of time to follow the same rut, so keep a record of how one web application can be done.

As a beginner, I often stumble ** "Environment construction" ** and ** "Git management" ** to record the flow of application development.

** Comments are welcome on the content of the article, technically, and beyond! ** **

environment

• Mac --Xcode / Homebrew / rbenv installed
• VSCode / iTerm2 --Registered on GitHub / SSH connected

From securing work space

I will make a project immediately.

~

$ mkdir sample_app

$ cd sample_appMove with and specify the version of ruby to install.

~/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. After adapting to the environment with $ rbenv local 2.6.5, proceed to the next.

~/sample_app

$ bundle init
・ ・ ・
Writing new Gemfile to /Users/foo/sample_app/Gemfile

Open the generated Gemfile either vim or directly from the Finder. Remove the # from `# gem" rails "` at the bottom to make it ``` gem "rails" `` `.

~/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 you can, go back to the terminal and install rails with the following command.

~/sample_app

$ bundle install --path vendor/bundle

Reference: Think again if you really need to add --path vendor / bundle when installing bundle

Start Rails project

Let's check the Rails that can be installed.

~/sample_app

$ gem list rails

*** LOCAL GEMS ***

If you don't have the version of rails you want to use, specify the version and install the gem. If you do not specify it, 6 series will be installed. The 6 series is still unstable in terms of compatibility, and because of the newness, there may be little information, so beginners should avoid it.

~/sample_app

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

*** LOCAL GEMS ***

rails (5.2.4.2)
...

Now that gem is installed, it looks like 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
・ ・ ・

new .By giving as sample_You can deploy a Rails project to your app.

 The explanation of the command is as follows. Add or remove as the case may be.

- ```rails _○.○.○.○_```
 --Install by specifying the version
-  ```-d mysql```
 --Changed database from default SQLite to fast and stable MySQL.
-  ```--skip-turbolinks```
 --Turbo link off. It seems that the page transition will be faster.
-  ```--skip-test```
 --Skip the default minitest because you plan to use RSpec.
-  ```--skip-bundle```
 --Because Rails version may be overwritten if `` `bundle install``` is done without permission. But actually, it has a deeper meaning.

---


 When finished, write the necessary gems in the Gemfile in the project name directory.

#### **`'= 5.2.4.2'By giving it as, it will be fixed so that it will not become another version without permission.`**

~/sample_app/Gemfile

・ ・ ・

ruby '2.6.5'

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

・ ・ ・

After writing the required gem, `$ bundle install`

~/sample_app

$ 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 various things, but I was able to solve it with Rails5 gem cannot install mysql2.

$ 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 is successful.

Create the database with create.

 In the operation check, do ``` $ rails s``` and access localhost: 3000 ,,,

 <img width="617" alt="スクリーンショット 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 with Git.
 The tool that comes with VS Code from the beginning is more than enough, so I will use it.
 An extension called GitHistory is convenient, so install that as well.

## Try

 Start a new project from New in Repositories on [GitHub](https://github.com/).
 For Repository name, enter any name you like, check Private and pass through the others.
 <img width="776" alt="スクリーンショット 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 ">

 If you press Create repository, the screen will be left temporarily and you will 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.


#### **`~/sample_app`**
```terminal

$ 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 well, you can go through.

• git init --Start management with git
• git add . --Add to the staging environment for committing the edited file. All files are staged by setting `` `.```.
• git commit -m "first commit" --Commit the staging file with the message " first commit " . The message XX is added with `` -m" XX "``` `.
• 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 so.
• git push -u origin master --Push to sync local changes to a remote repository. You already know that origin master is the remote `master branch`.

Development

Let's take a look at VS Code's Git History. As shown in the image, you can see the history by clicking 1 and 2, and you can check the first commit you made first.

From 3 you can see that we are currently in a branch called master. A branch is for flexibly advancing development by branching the development environment into "for modification" and "for adding functions" without affecting each other.

master and topic

It's common practice to keep stables and finished products in 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 typing `` `git status``` in the terminal to see the current Git status.

~/sample_app

$ git status
On branch topic
nothing to commit, working tree clean

I'm in the topic branch, I have nothing to commit to, and my workspace is clean.

Try to add

After making sure you're in the development topic branch, play around with the files a bit. I reconfigured `gitignore``` and changed `README.mda little. If you click the Git mark on the sidebar and look at the contents, the above two files are in the workspace, so click the + button to move them to the staging environment. This is the same as $ git add``` in the terminal.

You've been staged and you're ready to commit. Then write the commit in the text box above it and press the check button above to commit your changes. This is also equivalent to $ git commit -m" operation check " in the terminal.

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

By the way, it seems that there is no problem if the change is reflected in the local master branch as it is, so I would like to merge it. First, press topic at the bottom left to select the master branch and confirm that you have moved it.

Click More just below the green topic and select Merge this. After selecting topic and completing the final confirmation ...

The contents changed in topic are properly reflected in master! !!

Push and pull request

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

But think about this. It's like syncing changes to the master branch, which you've been developing as a team and suddenly decided to work only with the finished product, without confirmation from other members.

If you make a pull request, you can ask the team members to review the code to see if it is worth merging, and if you get permission, you can do something like merging and prevent accidents. Although it is a personal development, it will not hurt to get used to it.

manner

Suppose you proceed with development in the topic branch and there are three file changes. Use the + button to add to the staging and add a commit message as appropriate.

Also commit and switch to the master branch as before and merge the topic branch. Yeah, as expected. I will push to the remote repository from here, but the flow is as follows.

Push from the master branch of the local repository to the origin / topic branch of the remote repository (honestly topic → origin / topic feels good) ↓ Make a pull request from the origin / topic branch of the remote repository to origin / master on GitHub ↓ Have the repository administrator merge it.

Let's start from the continuation of the previous one. Push to orign / topic. Oh, the remote repository still only has a master branch, right? If you think, don't worry. If you don't have a branch, it will create a new one depending on the situation.

~/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 -> topicIstopic -> origin/topicabout it~.

Pseudo team development

If you take a look at GitHub and go to the top page of the project, it says 'topic' Compare & pull request` ``, so click it to create a pull request. If not, select `` `topic from `` `Branch``` and it should appear.

The top frame shows that the topic-to-master pull request is being compared and that it can be merged. If you can confirm it, write the title and message. I think that the title is the message from the beginning when you committed.

Write the message so that it can be understood by anyone other than yourself. This person's article was very helpful for how to write Pururiku. → GitHub "I will teach you how to write a perfect pull request"

If you can write a message, do'Create pull request'. This time it is a personal development and the repository administrator is also the only one, so I can merge it immediately, but since it is a big deal, I will try various things. Click File changed from the tab.

Here you can review the files that have changed. Be proactive in leaving questions, suggestions, and praise comments. After writing all the details, review from'Review changes' in the upper right corner with'Submit review'.

When you return to the'Conversion'tab, the reviews etc. are reflected.

After completing the final confirmation, complete the merge with'Merge pull request'and'Confirm merge'.

When you return to the top page, the previous merge is reflected!

This completes the flow. I think this is the reason why the act of making it look as if it is being developed by multiple people is called pseudo-pull request.

Summary

By writing this article, I learned a lot of things that seemed to be understood but not done. Even so, I often found it suspicious to write (especially when operating a branch), and I thought that I still needed to study.

I wrote such a long sentence for the first time, so I think there are some strange parts! I will continue to write down records while proceeding with development in the ongoing system. I will write it again when the project is completed or completed. Next is RSpec? ??

Whether you live in a rural area, self-taught, or information-based, even if you don't have any friends around you who are programming, you can complete some deliverables and prove that you can get a job as a back-end engineer! !!

As a student, I plan to publish articles about job hunting information and experiences such as internships. Any content, whether it's an article or something other than an article, is welcome to comment! !!

Reference article

-Summary of procedure for creating a new Rails project -Think again if you really need to add --path vendor / bundle when installing bundle -Summary of basic operations of Git in VS Code