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

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.

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
Extensionからの記事の追加
Add article from URL
Extensionからの記事の追加 既読記事の一覧

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,

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

How it works

architecture.png

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 ...

Recommended Posts

The training for newcomers was "Make an app!", So I made an app for the time being.
Java14 came out, so I tried record for the time being
Java12 came out, so I tried the switch expression for the time being
I made an app for myself! (Reading management app)
I was inspired by the article for newcomers, so make a note of it so that you don't forget your original intentions.
I want to make an ios.android app
I was in trouble at work, so I made a plugin for IntelliJ
Glassfish tuning list that I want to keep for the time being
[First Java] Make something that works with Intellij for the time being
Let's experience the authorization code grant flow with Spring Security OAuth-Part 2: Creating an app for the time being
Creating an app and deploying it for the first time on heroku
I was a little addicted to the S3 Checksum comparison, so I made a note.
I want you to use Scala as Better Java for the time being
I tried using Docker for the first time
I made an API client for Nature Remo
I tried touching Docker for the first time
Install Amazon Corretto (preview) for the time being
Use Java external library for the time being
Run Dataflow, Java, streaming for the time being
I read the readable code, so make a note
Try running Spring Cloud Config for the time being
Command to try using Docker for the time being
I made the server side of an online card game ①
I tried to introduce Bootstrap 4 to the Rails 6 app [for beginners]
[Rails] I tried using the button_to method for the first time
Hello World with Ruby extension library for the time being
I want to push an app made with Rails 6 to GitHub
I made an adapter for communication class with Retrofit2 + Rx2
Technical causes and countermeasures for the points I was addicted to with the first Android app & Kotlin
When I made a bar graph with MPAndroidChart, the x-axis label was misaligned for some reason
[Memo] Run Node.js v4.4.5 on CentOS 4.9 / RHEL4 (i386) for the time being (gcc-4.8 and glibc2.11 on LinuxKernel 2.6.9)
I made an app to solve "Eh !? When did the new issue come out !?" [Portfolio commentary]