[Ruby] Until a programming inexperienced person creates a portfolio in 3 months

7 minute read


This is a summary of what I was working on in 3 months until I created a portfolio. The portfolio was created in a total of 3 months: basic learning (1 month) and portfolio creation (2 months). I’d be happy if it would be useful as a reference for those who are aiming to be engineers from inexperienced people like me.

Created portfolio

【Overview】 It is a posting application for golf beginners. It was created as a tool to solve the problems that golf beginners have from their experience as a student. [URL] https://golfour.herokuapp.com [GitHub] https://github.com/matao0214/golfour [Language/Technology used] ・Ruby 2.5.1 ・Ruby on Rails 5.2.4 ・HTML(Slim) ・CSS(Sass) ・Bootstrap4 ・JavaScript ・JQuery ・PostgreSQL 12.2 ・GoogleMaps API ・Heroku ・Git ・GitHub

Basic learning (1 month)

First, I proceeded with learning using the following books to input basic knowledge. The HTML&CSS and JavaScript of people who start the web from now on Introduction to Ruby for Professionals [Ruby on Rails 5 Quick Learning Practice Guide that can be used in the field](https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B-Ruby-Rails-5%E9%80%9F%E7%BF%92%E5%AE%9F%E8%B7%B5%E3%82%AC%E3(%82%A4%E3%83%89-%E5%A4%A7%E5%A0%B4%E5%AF%A7%E5%AD%90/dp/4839962227)

It’s been a tough month for the past month, but I’ve worked on the following two habits.

1. Continue to google until you don’t know any unknown words When I checked what I didn’t understand, a word I didn’t know appeared in the description, and I looked it up again. However, if you continue to do so, the amount of knowledge will definitely increase and the amount of research will decrease, so it is important to continue researching without giving up.

2. Input contents are output in Qiita The input knowledge was put together in the Qiita article and output in order to improve understanding. Even if I read a book and thought, “I understand!”, I couldn’t fully understand it because I couldn’t translate it when I tried to output it. I think that the output to Qiita is very effective for checking and fixing the level of understanding **, so I recommend it.

Write easy-to-understand sentences! It is important to try writing without thinking! If you manage the numbers, you will get used to writing, so I think it is good to actively output and make it a habit.

Portfolio creation (2 months)

When the basic learning was completed, I moved to portfolio creation. The portfolio was created by the following procedure. 1. Portfolio Idea Creation 2. Function/DB design 3. Portfolio creation

1. Creating a portfolio idea

Portfolio *What was the concept/background of creating the portfolio? It was designed with the point ** in mind.

Write out the problems you (or your) people have (or had) so far, I thought about what kind of function/mechanism could solve the problem and put it in the portfolio.

Specifically, I put out the ideas in the following order and put them into shape.

When I was a college student, I started playing golf when I entered the laboratory. So far, I have had two impressive experiences with golf.

  1. There were two seniors who started playing golf at the company where I used to work. Both of them couldn’t make a good progress and were about to quit on the way, but as a result of continuing to practice while giving advice, they gradually improved and continue to enjoy golf.
  2. There were quite a few people who said, “I want to start playing golf, but there are not many people in my twenties (20’s) who want to go to practice together with me” at the university.

From this experience, I felt that golf beginners have the following ** challenges. ** Golf beginners find it difficult to improve and often give up on the way. ** ** There are a certain number of people in their twenties who want to start playing golf, but there are no people who can start playing together. ** ↓ ** Solution to the problem: If a younger generation with the same circumstances (I want to start golf or just started playing golf) is nearby, would it be possible to create an environment where golf is easy to start and a mechanism that is not frustrated? ** ↓ ** Service Type: An application to post and share golf practice records **

2. Function/DB design

When the idea of the portfolio was fixed, I designed the function/DB. With a focus on the ability to post and share golf practice records, we also designed a function that keeps you motivated to practice.

** Functional design ** New posting function List display function Detailed display function Editing function Delete function Login function Search function Like function Location information posting function (using GoogleMap API) Graph creation function from posted data

DB design Users table

Column name Data type Constraints
nickname string NOT NULL,1 0 characters or less
email string NOT NULL,UNIQUE
password_digest string NOT NULL
golf_reki string up to 5 characters
goal string up to 50 characters

TrainingPosts table

Column name Data type Constraints
training_place string NOT NULL, up to 50 characters
training_task string NOT NULL, within 150 characters
training_impression string up to 150 characters
user_id integer NOT NULL, FOREIGN KEY

TrainingContents table

Column name Data type Constraints
training_post_id integer NOT NULL,Foreign_key
training_time integer NOT NULL
training_hits integer NOT NULL

Likes table

Column name Data type Constraints
user_id integer NOT NULL, FOREIGN KEY
training_post_id integer NOT NULL, FOREIGN KEY

Spots table

Column name Data type Constraints
address integer NOT NULL, up to 50 characters
latitude float NOT NULL
longitude float NOT NULL
training_post_id integer NOT NULL, FOREIGN KEY

3. Portfolio creation

At the end of function/DB design, we finally started to write code. The procedure for creating a portfolio is as follows. **1. Implement CRUD function based on the books used in basic learning

  1. Implement the function you want to implement by referring to Qiita articles, official documents, etc.
  2. UI/UX-conscious design**

1. Implement CRUD function based on books used in basic learning

Immediately after completing the basic learning, I am still not accustomed to coding, so I thought “I will implement this function!” ** ・How to implement? ・I don’t know what I don’t know Since it was in such a state, I referred to the book with a sense of getting used to the code.

As a result, I was able to review the basic knowledge and become familiar with the structure of the entire program. Also, **you can do this much yourself! I can be confident with ** I think it’s good to take some steps to maintain motivation because it is difficult.

2. Implement the function you want to implement by referring to Qiita articles and official documents

After implementing the CRUD function, we worked on implementing the like function and using the Google MAP API.

While implementing the function, I implemented it by referring to Qiita and the official document while googled, One thing that I found most important in my research was to read the official documentation.

If you read the official document, it is often written that There are also such options! in addition to the description of the function you want to implement. There were many times when the features were enhanced more than I had planned by incorporating such options.

The Qiita articles are organized and easy to read and are very readable and convenient. However, of course, the reliability of the source is lower than the official document, and unnecessary information cannot be touched, so you should read the official document as well as the Qiita article.###3. UI/UX conscious design After implementing all the functions, I started designing with UI/UX in mind. Introduction to UI/UX improvement: “Differences between UI and UX” to “3 points of UX improvement” explained.

Specifically, I was aware of the following three points. ・Design that considers the target (20’s) ・Design that you want to continue using ・Intuitive design

And I put it into the portfolio in the following form. ** · Pop backgrounds and fonts for young people ・Change the input field of the post content to a selection formula from concrete choices (eliminate the trouble of thinking about the input content) ・Intuitive visualization of practice records using graphs**

Of these, it was especially good to incorporate visualization using graphs. At first, the user’s practice record was displayed with letters and numbers, but by graphing the data, we were able to achieve a design in which the desired information was easily obtained visually. It is recommended that you can easily create graphs by using a jem called chartkick.

Thoughts and ideas in creating portfolio

・You can get used to the code by moving your hand because you can do it anyway ・Implementation of functions that you want to continue to use and construction of mechanisms ・Target-conscious design ・Easy to use from the user’s perspective ・Highly maintainable coding

What you learned and grew through portfolio creation

・The fun of getting your idea into shape (I realized the most: smile:) ・Self-running ability as an engineer who can create services from scratch ・Ability to verbalize what you do not understand (guguru power) ・How to select references (official document is required) ・Importance of output


Through the creation of the portfolio, I have learned a lot and have grown in the last three months. I gained the confidence that I could make this far even if I had never touched programming at all, and above all, I learned the fun of making a service with my own idea.

There are still things I want to do such as infrastructure building with AWS, but first I will start job hunting for engineers. I would like to do my best for job hunting while updating the portfolio!