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.
【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
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.
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 **
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.
- 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.
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 **
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 |
| 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 |
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 **
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.
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.
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.
** ・ 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 **
** ・ 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