[Portfolio commentary] "Share-read" -Share and own the knowledge of books-

Introduction

We have created a portfolio of web apps as an output for learning programming. The name of the created web application is "Share-read". The concept is "share and own the knowledge of books".

In this article, we will describe the entire portfolio, from the production background to future issues. Please see until the end if you like!

Production background

After becoming a member of society, I started reading business books and personal development books. However, when I read it, it became clear, and I didn't remember much about the contents of the book I read.

At one point, I read a book called "Complete Output" and was made to think about the importance of the output of the book. Therefore, I decided to participate in a book club to output the contents of the book. Even just taking the process of sharing the books I read together with others was different from the reading I had done so far, and my knowledge of books remained deep in my mind. In addition, I have come to be able to utilize my knowledge of books during work.

I thought that there are not a few people who have finished reading books like I used to. I think that reading is not the end of reading, but the goal is to make the knowledge of the book usable as one's own knowledge. With that in mind, I decided to develop a web application "Share-read" that outputs the contents of the book.

concept

"Share and own the knowledge of books" The purpose is to output the contents of the book so that the knowledge can be used as one's own.

target

"Young businessmen in their 20s and early 30s" We targeted business people who want to read business books, especially young business people who are inexperienced.

Persona

In the actual development, I thought that I would set more personas from the target group and match the recognition between the people in charge, so I also set the persona in this application development (almost my profile, but lol).

Age: 26 years old Occupation: Belongs to the R & D department of the manufacturer Residence: In Tokyo Family: Single Hobbies: Muscle training, walking, karaoke

On holidays, I read while taking a walk or taking a walk in my spare time. As for reading, I only read books and have no particular output. SNS uses Twitter and Facebook. I use Twitter almost every day, but I don't use Facebook very often. I like watching YouTube, and recently I'm watching the channels that people who are appearing in SASUKE are working on.

positioning

There are several web apps for books, but I've clarified the differences by mapping them. It turned out that the area of ​​output specialized for business books does not exist in existing services, and it is firmly differentiated.

Image of using web application

--Book search

--Book review

function

--User related --New registration function / Registration information editing function (image registration possible) --Login function / Guest login function (You can log in without registration) --Follow function (use of ajax) --Notification function

--Book related --Book search function (using Rakuten API) --Bookshelf registration function (using ajax) --Added a link to Rakuten's purchase page

--Review related --Review posting function/review editing function --Review draft function --Favorite function (using ajax) --Comment posting / deleting function (using ajax) --Comment editing function

Technology / environment

front end

• Bootstarp 4.50
• HTML/CSS
• JavaScript、jQuery

Back end

• Ruby 2.7.2
• Rails 6.0.3.4

Development environment

• Docker/Docker-compose
• MySQL 5.7

Production environment

• AWS(VPC、EC2、RDS for MySQL、S3、ALB、 IAM、Route53）
• MySQL 5.7
• Nginx、puma
• Capistrano

ER diagram

Infrastructure configuration diagram

Ingenuity

UI/UX --The site design (color scheme and layout) was based on a site that is expected to have a similar target audience. ――In consideration of the ease of posting, the review posting screen is displayed in modal. --A draft function has been added so that you can review while examining the content.

Environmental technology

――Being aware of team development, when pushing to Git, I always put out a pull request and tried to merge it on Github. --Assuming actual development, the test code is described in Rspec.

Difficulties

I would like to mention the following two points that I had a particularly difficult time with.

Use of Rakuten API

I used Rakuten API as an external API, but I had a lot of trouble in storing it in a table. I was able to implement it while referring to the articles on the Rakuten API site and the web. I also wrote an article on Qiita as an output. https://qiita.com/Hiroaki_jr/items/983b11a45e2b42c8f3dc

Using Docker

I used Docker for the development environment this time, but I suffered from various errors such as not being able to install the necessary tools and a database problem. I proceeded while thinking about why the error occurred while reading and examining the error statement. I also wrote an article on Qiita as an output. https://qiita.com/Hiroaki_jr/items/b447cc055bc8a4e882c1 https://qiita.com/Hiroaki_jr/items/05d19d97ebdb38e41527

Challenges for the current app

We are deploying the app because it is ready for use, but we consider the following points to be issues and are currently solving them.

Functional aspect

-~~ ** Responsive full support ** ~~ ~~ I think it is better to implement it because there are some places where responsive support is insufficient. ~~ ⇨ 2021/01/14 Correspondence is completed.

-** Twitter login ** The target is young business people, and there are many people who use Twitter. Therefore, considering the actual use, I think it is better to have a Twitter login.

Technology / environment

-** Implementation of automatic deployment by circle CI ** Currently, we are implementing deployment using Capistrano. At the actual development site, I think CircleCI is the mainstream, so I think this is also an issue.

-** Brush up the production environment ** In the future, I think it will be necessary to use container technology even in production environments using ECS ​​and other means.

-~~ ** Refactoring ** ~~ ~~ Currently, refactoring is being carried out using a code analysis tool such as rubocop. ~~ ⇨ 2021/01/16 Correspondence is completed.

-** Integration test, integration test code description ** In this portfolio, we are only unit testing the model, so we plan to continue learning Rspec and include integration and integration testing.

-** Use of vue.js and react ** I'm currently using jQuery, but I plan to learn more about modern technology such as vue.js or react.

Impressions

Thank you for reading this far! When I developed the app, I thought, "It's fun to think about new value and realize it!" When I actually deployed the app, I was grinning while doing a guts pose (at Gusto). However, current web apps still have challenges. I think we will always brush up on the actual service. Therefore, we will improve the current issues with this application and brush up the web application!