Until a person with no programming experience creates a portfolio in 3 months


As a completely inexperienced person in programming, I summarized what I worked on in the three months before creating the portfolio. The portfolio was created in a total of 3 months: basic learning (1 month) and portfolio creation (2 months). I hope it will be helpful for those who want to become engineers from inexperienced people like me.

Created portfolio

【Overview】 This is a posting app for golf beginners. I created it as a tool to solve the problems that golf beginners have from my 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 ・ GoogleMapsAPI ・ Heroku ・ Git ・ GitHub

Basic learning (1 month)

First of all, I proceeded with learning using the following books in order to input basic knowledge. [HTML & CSS for people starting the Web, JavaScript](https://www.amazon.co.jp/%E3%81%93%E3%82%8C%E3%81%8B%E3% 82% 89Web% E3% 82% 92% E3% 81% AF% E3% 81% 98% E3% 82% 81% E3% 82% 8B% E4% BA% BA% E3% 81% AEHTML-CSS% E3% 80% 81JavaScript% E3% 81% AE% E3% 81% 8D% E3% 81% BB% E3% 82% 93% E3% 81% AE% E3% 81% 8D% E3% 81% BB% E3% 82% 93-% E3% 81% 9F% E3% 81% AB% E3% 81% 90% E3% 81% A1% E3% 81% BE% E3% 81% 93% E3% 81% A8 / dp / 4839959714) [Introduction to Ruby for those who aim to become professionals](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%92%E7%9B%AE%E6 % 8C% 87% E3% 81% 99% E4% BA% BA% E3% 81% AE% E3% 81% 9F% E3% 82% 81% E3% 81% AERuby% E5% 85% A5% E9% 96 % 80-% E8% A8% 80% E8% AA% 9E% E4% BB% 95% E6% A7% 98% E3% 81% 8B% E3% 82% 89% E3% 83% 86% E3% 82% B9% E3% 83% 88% E9% A7% 86% E5% 8B% 95% E9% 96% 8B% E7% 99% BA% E3% 83% BB% E3% 83% 87% E3% 83% 90% E3% 83% 83% E3% 82% B0% E6% 8A% 80% E6% B3% 95% E3% 81% BE% E3% 81% A7-Software-Design-plus% E3% 82% B7% E3% 83% AA% E3% 83% BC% E3% 82% BA / dp / 4774193976) [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, but I've made the following two points a habit.

** 1. Keep googled until there are no unknown words ** When I searched for something I didn't understand, a word I didn't know appeared in the explanation, and I searched for it further, and so on. However, if you continue to do so, the amount of knowledge will surely increase and the amount of research will decrease, so it is important to continue research without giving up.

** 2. Input contents are output by Qiita ** The input knowledge was output in a Qiita article in order to improve understanding. When I read a book and thought ** "I understand!" **, but when I tried to output it, I couldn't verbalize it, and in many cases I couldn't fully understand it. I think that the output to Qiita is very effective for ** confirmation and fixation of understanding **, so I recommend it.

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

Portfolio creation (2 months)

After completing the basic learning, I moved on to portfolio creation. The portfolio was created by the following procedure. ** 1. Portfolio ideas ** ** 2. Function / DB design ** ** 3. Creating a portfolio **

1. Portfolio ideas

Portfolio ** What kind of concept / background did you create the portfolio? It was designed with ** in mind.

** Write down the problems you or someone close to you (have) ** ** I thought about what kind of function / mechanism would be needed to solve the problem ** and put it in my portfolio.

Specifically, I came up with 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. And so far, I have had two memorable experiences with golf.

  1. There were two seniors who started playing golf at the company I used to work for. Both of them didn't improve and were about to quit, but as a result of continuing to practice while giving advice, they gradually improved and are still enjoying golf.
  1. At the same time as the university, there were quite a few people who said, "I want to start playing golf, but there aren't many people of the same age (20's) who go to practice with me."

From this experience, I felt that golf beginners have the following ** challenges **. ・ ** Golf beginners have difficulty improving and often give up on the way. ** ** ・ ** There are a certain number of people in their twenties who want to start playing golf, but no one is close to them. ** ** ↓ ** Solution to the problem: If young people in the same situation (want to start playing golf / just started playing golf) are close to us, can we create an environment where it is easy to start playing golf and a mechanism that is less likely to be frustrated? ** ** ↓ ** Form of service: An application for posting and sharing golf practice records **

2. Function / DB design

When the idea of the portfolio was settled, I designed the function and DB. Focusing on the function of posting and sharing golf practice records, we also designed the function to maintain motivation for practice.

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

** DB design ** ** Users table **

Column name Data type Constraint
nickname string NOT NULL,Within 10 characters
email string NOT NULL,UNIQUE
password_digest string NOT NULL
golf_reki string Within 5 characters
goal string Within 50 characters

** Training Posts table **

Column name Data type Constraint
training_place string NOT NULL,Within 50 characters
training_task string NOT NULL,Within 150 characters
training_impression string Within 150 characters
user_id integer NOT NULL, FOREIGN KEY

** TrainingContents table **

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

** Likes table **

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

** Spots table **

Column name Data type Constraint
address integer NOT NULL,Within 50 characters
latitude float NOT NULL
longitude float NOT NULL
training_post_id integer NOT NULL, FOREIGN KEY

3. Portfolio creation

Function / DB design finished I finally started writing code. The procedure for creating a portfolio is as follows. ** 1. Implement CRUD function based on the books used in basic learning 2. Implement the function you want to implement by referring to Qiita articles and official documents. 3. UI / UX conscious design **

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

Immediately after finishing the basic learning, I'm still not used to coding, so even if I think ** "Let's implement this function!" ** ** ・ How to implement? ・ I don't know what I don't understand ** Because it was in such a state, I referred to the book with the meaning of getting used to the code.

As a result, I was able to review the basic knowledge and get used to the structure of the entire program. Also, ** I can do this myself! I can be confident with ** I think it's a good idea to start with the low difficulty level to maintain motivation.

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

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

In implementing the function, I implemented it with reference to Qiita and the official document while googled. What I found important in my research was ** absolutely read the official documentation **.

When you read the official documentation, it often says ** There are options like this! ** In addition to the description of the features you want to implement. By incorporating such options, there were many times when the functions were more fulfilling than planned.

Qiita's articles are organized in an easy-to-understand manner and are very easy to read and convenient. However, as a matter of course, the reliability of the source is lower than the official document, and ** I can not touch more information than necessary **, so I should read not only the Qiita article but also the official document.

3. UI / UX conscious design

After implementing all the functions, I started designing with UI / UX in mind. Introduction to UI / UX Improvement: A big commentary on "3 points of UX improvement" from "Differences between UI and UX"!

Specifically, I was conscious of the following three points. ** ・ Designed with the target (20's) in mind ・ Design that makes you want to continue using ・ Intuitive design **

And I put it in the portfolio in the following form. **-Pop backgrounds and fonts for young people -Changed the input field of the posted content to a selection formula from specific options (eliminating the trouble of thinking about the input content) ・ Intuitive visualization of practice records using graphs **

Of these, it was particularly good to incorporate graph visualization. At first, the user's practice record was displayed in letters and numbers, but by graphing the data, we were able to realize a design that makes it easy to visually obtain the desired information. It is recommended to use the jem chartkick because you can easily create a graph.

What I was aware of and devised when creating the portfolio

** ・ Because you can do it anyway, move your hand to get used to the code ・ Implementation of functions and construction of mechanisms that make you want to continue using ・ Target-conscious design ・ Ease of use from the user's perspective ・ Maintainable coding **

What I learned and grew through portfolio creation

** ・ The fun of putting your ideas into shape (I realized the most: smile :) ・ Self-propelled ability as an engineer who can create services from scratch ・ Ability to verbalize and investigate what you do not understand (ability to google) ・ How to select references (official document is required) ・ Importance of output **


Through portfolio creation, I have learned and grown a lot in the last three months. I was confident that I could make this much even if I had never touched programming, and above all, I was able to know ** the fun of creating a service with my own ideas **.

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

Recommended Posts

Until a person with no programming experience creates a portfolio in 3 months
A college student who has just graduated from a programming school creates a portfolio with Rails!
How to make a jar file with no dependencies in Maven
A record of a graduate student in chemistry who has no programming experience until he gets a job offer from a web company as a new graduate.
How to master programming in 3 months
What is a snippet in programming?