[RUBY] I tried to develop a web application from a month and a half of programming learning history

1. 1. Introduction

I have been studying programming since August 2020, and spent about a month developing a web application. It was like this before I studied.

** ・ I've heard the names of HTML and CSS slightly ** ** ・ Currently, I only use Word and Excel ** ** ・ I can't even clear the 3000 yen course with sushi. **

From this state, I developed a web application with ** almost self-study **.

(Although I have been taking lessons at SAMURAI ENGINEERING SCHOOL since October, I asked the instructor to learn the basic part before application development by self-education, answer technical questions in application development, and review the code. However, I used the term ** almost self-taught ** in consideration of my own thoughts, such as the direction of the app.)

I think there are more excellent people, but I wrote this article because I wanted to keep a record of my ability for one and a half months of study history.

2. Self-introduction

--Age: 32 years old

--Occupation: Plant design

――I am studying to change jobs as an engineer from inexperienced.

――April 2020 Became the father of one child during the Corona disaster. I took childcare leave for two months immediately after I was born.

--Prioritize childcare over programming learning. I hurt my arm by straining baby food.

Learning history

** August 1st-September 18th, 2020 **

-Progate: HTML, CSS, JavaScript, Ruby, Rails, Command Line, Git, SQL (2 weeks each)

-[Kitami-style Illustration IT School Basic Information Engineer Reiwa 2002](https://www.amazon.co.jp/%E3%82%AD%E3%82%BF%E3%83%9F%E5% BC% 8F% E3% 82% A4% E3% 83% A9% E3% 82% B9% E3% 83% 88IT% E5% A1% BE-% E5% 9F% BA% E6% 9C% AC% E6% 83 % 85% E5% A0% B1% E6% 8A% 80% E8% A1% 93% E8% 80% 85-% E4% BB% A4% E5% 92% 8C02% E5% B9% B4-% E6% 83 % 85% E5% A0% B1% E5% 87% A6% E7% 90% 86% E6% 8A% 80% E8% A1% 93% E8% 80% 85% E8% A9% A6% E9% A8% 93 -% E3% 81% 8D% E3% 81% 9F% E3% 81% BF% E3% 82% 8A% E3% 82% 85% E3% 81% 86% E3% 81% 98 / dp / 4297110210)

-Linux standard textbook

-Rails Tutorial

-[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) (up to about Chapter 5)

-[Building a network & server from AWS basics](https://www.amazon.co.jp/Amazon-Web-Services-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3 % 82% 89% E3% 81% AE% E3% 83% 8D% E3% 83% 83% E3% 83% 88% E3% 83% AF% E3% 83% BC% E3% 82% AF-% E3% 82% B5% E3% 83% BC% E3% 83% 90% E3% 83% BC% E6% A7% 8B% E7% AF% 89 / dp / 4822237443)

--Udemy: Git: First Git and GitHub, [Docker course taught by US AI developers from scratch](https://www.udemy. com / course / aidocker /)       September 19-Web application creation started

3. 3. App overview

This is a childcare-specific Q & A app to help you with your childcare concerns and anxieties.

** [Home screen] ** スクリーンショット 2020-10-25 8.33.22.png スクリーンショット 2020-10-25 14.15.10.png

Published on Heroku → ー SUKUSUKU ー (PC & Chrome recommended)

Github → https://github.com/SHOGOHORI/myapp

How to use

--You can browse the question list, question details, keyword search, and tag search without logging in.

--Easy login as a guest user (click the `` Login as a guest user'' button)

--Click the `` Post a question'' button to go to the post form screen

--Can be answered from the question details

4. Purpose of creation

Immediately after the birth of his eldest son, his wife had a high fever due to an infectious disease and was hospitalized or not. After all, I wasn't hospitalized, but my fever didn't go down for a week or two and I was bedridden, so I was raising my child by myself. I felt a tremendous responsibility to take care of my newborn life. It was a situation that seemed to be crushed by loneliness and anxiety. From that experience, I wanted to fill the anxieties of moms and dads in similar situations as much as possible, so I created a Q & A app that is similar to SNS.

Creation period

** September 19th to October 20th, 2020 (31 days) **

I spent about 6 to 8 hours a day creating it, so the creation time is about ** 180 to 200 hours **.

5. design

ER diagram


site map


Wire frame


6. Technology used

Framework: Rails 6.0.3 Front: HTML, Sass, JavaScript (jQuery) Server-side language: Ruby 2.7.1 Database: PostgreSQL Test framework: Minitest → Rspec Server construction: puma Development environment: Docker 19.3.12 → Local environment Production environment: Heroku Search function: ransack Version control: Git hub Pagination function: kaminari Machine used: Mac Catalina (10.15.7) Editor: VS Code

7. function

User features

・ New registration, login, logout, guest user login function ・ Login retention function ・ User profile editing function ・ List display of questions and answers posted by User My Page

Posting function

・ List display, article detail display, posting, image upload, editing, deletion function ・ Answer posting function

Question search function

・ Keyword search and tag search functions

Pagination function

・ Ajax compatible

Test function

・ Unit, integration test function

8. Difficulties

Development environment construction with Docker

Initially I introduced Docker to my development environment, but it was very heavy and took a lot of time to run rails db: migrate and tests. I researched various ways to make it lighter, but the situation did not improve and I eventually switched to the local environment. I would like to try again in Ver.2, which will be described later.

Test description by RSpec

I used Minitest in the Rails tutorial, so I learned about RSpec. I had a hard time understanding the grammar of Rspec and using Capybara.

Output of hard experience → RSpec directory structure and roles for each spec

Ajax compatible

What is Ajax in the first place because I lacked knowledge of JavaScript and did not understand how Ajax works in the first place? What can you do with JavaScript? I learned from the basic writing and grammar of jQuery.

Output of hard experience → [Rails] Make pagination compatible with Ajax

View coding

I had a hard time because I hadn't learned how to use the front part, design and HTML, Sass, and Bootstrap.

9. Reflections

Started app development starting from Rails tutorial

――I learned it as a review of the Rails tutorial, but I added some unnecessary functions. (A function to use e-mail for user registration, password reset function)

** Solution: Identify the required functions at the requirement definition stage. ** </ font>

--I was only familiar with the Gem used in the Rails tutorial. (At the beginning of creating the app, I didn't know about commonly used gems such as devise, kaminari, carrierwave, RSpec, and RuboCop)

** Solution: Select which gem is appropriate for the required function. Check the evaluation and update history at the time of selection. ** </ font>

――The layout looks like a Rails tutorial.

** Solution: At the wireframe creation stage, design with an awareness of which layer the web application is for. ** </ font>

There was no plan

――I thought that it would take time to make the requirement definition strict, so after creating a simple ER diagram and wireframe, I planned ad hoc while moving my hands for the time being, so I could not understand the goal well. .. On the contrary, I think it took too long.

** Solution: First, set a deadline for completion of creation. Create a Github issue for each function and turn off the branch. ** </ font>

The code has become complicated

--When I asked my instructor to review the code, I found trailing whitespace (space at the end), useless line breaks, and useless files.

** Solution: Set VScode to adhere to coding conventions before development. Perform detailed static code analysis with RuboCop. Examine and delete files that are not used frequently. ** </ font>

It has become just a Q & A site

――Since we are creating our own app for the first time, we have kept the functions to a minimum so as not to be frustrated. As a result, the app has become less unique.

** Solution: Create a lean canvas, which will be described later, to make it unique with other services of the same theme. ** </ font>

10. Towards Ver.2.

I thought about creating another web application, but I wanted to make use of my child-rearing experience in web application development, and ** "I want to fill the anxieties of new moms and dads as much as possible" **. I would like to create Ver.2, which is a brush-up of the current application. Taking advantage of this reflection, I have summarized what I want to do in Ver.2. (I don't know if I can do it all ...)

Define requirements concretely

We created Ver.1 and recognized the importance of requirement definition in terms of planning, service uniqueness, design, etc. In Ver.2, I will use lean canvas to define the requirements concretely. And I want to use that technology! Rather, I would like to choose the technology in the form that this technology is necessary to meet this requirement. Also, in my current position, I was in charge of design process control, so I would like to make use of that strength to create a development process chart.

[Lean canvas] スクリーンショット 2020-10-25 12.38.14.png

Requirements definition-Articles that can be human resources who can design systems

Use Git and Github with practicality in mind

In Ver.1, I only cut the branch and git push, so I used Github issues and Git-flow, and pulled with awareness of pseudo-co-development. I want to do version control.

What is Git-flow? GitHub Cheat Sheet (Japanese translation)

Deploy to AWS, build CI / CD pipeline

I want to create Ver.2 assuming actual operation, so I want to deploy it to AWS and even acquire a domain. Also for studying networks. Also, I would like to build a CI / CD pipeline in consideration of later work efficiency.

Talk to potential customers and experts

I would like to have new moms and dads actually use the service, hear and brush up, and ask experts for their opinions.

Other functions you want to implement

-Use devise for user registration -Set the template engine to haml or slim for performance. ・ Add child information (age, gender) to My Page ・ Answer reply function ・ Mini diary function ・ Bookmark function ・ Follow and unfollow functions ・ Questionnaire function ・ SNS share function ・ Enrich the design ・ MySQL database

11. Summary

After developing a web application, I found the following.

** ・ As is often said, input while outputting leads to growth ** ** ・ I had good experience of spending hours on one error, but it is also important to build an environment where I can ask questions ** **-Importance of spending time defining requirements **

I would like to make use of this experience in the future. If you have any problems or suggestions regarding the web application, please feel free to comment!

Recommended Posts