Hello.

In the training of engineers of the company I joined, there was a theme "Make an app!", So Although this was my first experience developing a full-scale web application, I would like to introduce a web application that I created while struggling.

Training content

The title of the training is as follows. (Excerpt)

・ Develop and deliver a simple WEB application x 2 laps
・ IPhone/Develop and deliver a simple native application that runs on both Android and exchanges data with the server x2 laps
【element】
   -Product planning, screen design, requirement definition
   -Technology selection
   -Infrastructure (cloud) design
   -Documents such as construction procedure, architecture, design policy, delivery method (readme)
   -Test code
   -Github flow
   - UI/UX
   -Security ・ N+1 problem
[Clearing conditions]
   -How lightweight and quick to make the first lap
   -Clear when the members of the development department on the second lap no longer point out

I wrote it for a long time, but the point is, "Make two web apps and two smartphone apps, for a total of four!"

・ What kind of app will you make? ・ Selection of development technology ・ App design

We have developed all the configurations related to application development from scratch.

What i made

I will introduce the app I made immediately, but We have developed leo app to fix knowledge without missing information.

Currently, the server is down and cannot be used. If you are interested, please leave a comment and we will contact you if you would like to recover.

It is a service that allows you to save those articles along with your notes so that you can remember the site you want to read later and what the article was written about.

demo

List of unread articles

Adding articles from Extension

Add article from URL

You can also save articles with the touch of a button using the chrome extension! You can download the Extension here: https://chrome.google.com/webstore/search/abjbdfpgihfnefpneobealjogmckkllm

Supplementary explanation of app behavior

-You can add categories from "Add" on the left, and you can save articles by category. ・ If you open an unread article, it will be automatically sorted to read articles. -In the extension, you can save the memo by pressing "Add memo" and entering the memo. If you have not written a memo, "og: description" will be saved as a memo. -In extension, you can change the category and unread / read status by pressing "Other options".

Why did you develop it

I think that I touch many articles every day through SNS and the Internet, ** ・ I try to read those articles later in Bookmarks and tabs, and eventually the articles accumulate more and more ** ** ・ If you save an article for too long, you will not understand why you decided to read the article ** ** ・ The article does not come out suddenly when I want to read it again later ** And so on I had a problem that I couldn't digest the article I wanted to read.

There are already some services that you will read later, but those services can be "accumulated" smoothly,

- I felt that I didn't focus much on the "read" ** part.

So, I decided to create an app that focuses on the parts ** "read" and "remember what I read" **.

How it works

front

I used Nuxt for the front. I didn't pay attention to the development method, and I created it simply, so it may not be the code that seems to be nuxt. I am running it on AWS EC2.

Back end

I have launched rails, database (MySQL) and Redis with docker. rails is used as an api to connect to mysql, and redies is used to acquire and save session information.

Where it was difficult to develop

cron execution environment

Although it has not been implemented in the production environment, we have implemented a function to send reminders of articles accumulated at the time set by the user in the development environment. I tried to use cron, which runs regularly, to implement reminders, but I stumbled quite a bit.

I once tried to implement cron directly under the local as a development environment, but I could not execute it well due to a problem of access authority system to the file, and it took a long time.

Why don't you try running cron on docker when you have trouble? I received the advice, so I decided to try it on docker for the time being.

Understanding docker

I wanted to use cron on rails, so in order to use cron with docker, rails also had to be run on docker.

I read an article about docker in an article such as Qiita, but I couldn't keep up with the contents, so I copied and pasted Dockfile and docker-compose.yml and executed it for the time being. It's natural that copying doesn't work, so after a lot of trial and error, I managed to understand docker.

It was a good study because I was able to understand what the "container", "image", and "volume" are.

Other

・ Since the front was developed with Nuxt and the back with Rails, cross-origin support and how to hold a session ・ Https conversion of sites using EC2 and load balancer I had a hard time implementing it for the first time, but now I can handle it to some extent.

Future development

We will implement the reminding function that was implemented in the development environment in the production environment as well. I haven't been able to implement the core functions of ** "reading" and "remembering what I read" ** of articles. We also need to pursue that.

Also, I'm thinking of developing it with flutter and releasing a native app.

Please use it! !!

I'd like to say, but the Rails server is not starting up and is doing recovery work ... If you are interested, please comment and we will let you know when it is restored! !!

I'm very sorry ...

The training for newcomers was "Make an app!", So I made an app for the time being.