In this article, the points that I had a hard time developing the application, I would like to introduce the articles and teaching materials that I referred to when implementing each function.

App overview

It is an SNS application with the theme of morning activities.

• Make morning activity friends and continue "steadily"
• Share the "knack" of morning activities to prevent frustration of morning activities

Based on this concept, we have developed a service called ** "Asa Kotsu" ** with the letters "morning activity". The URL is here ↓. If you like, feel free to move it ^^

App URL: https://pf.asakotsu.com/ (* Since smartphone support has not been completed yet, it is recommended to browse on a PC ^^;)

URL of GitHub: https://github.com/ngsw877/asakotsu

Image of usage screen

Top page (post list and ranking, etc.)

Post list by tag

Post details and comment list

Zoom meeting list

User details screen

When getting up early

Infinite scroll

Features of this app

Basically, it is an SNS with posts, comments, likes, and follow functions like twitter, In addition, it is an application with the following features.

• You can create, edit, and delete morning activity Zoom meetings from the app (Zoom API integration)
• You can set a target wake-up time and record the number of days you can get up early.
• Ranking function for the number of days to get up early (aggregated monthly)
• You can tag posts (category) and share morning activity tips with "morning tips" tags, etc.

Technology used

• front end

• Vue.js 2.6.11

• jQuery 3.4.1

• HTML / CSS / Sass / MDBootstrap

• __ Backend __

• PHP 7.4.9

• Laravel 6.18.36

• PHPUnit 8.5.8

• ZoomAPI (guzzlehttp/guzzle 7.0.1)

• infrastructure

• CircleCi

• Docker 19.03.12 / docker-compose 1.26.2

• nginx 1.18

• mysql 5.7.31 / PHPMyAdmin

• AWS ( EC2, ALB, ACM, S3, RDS, CodeDeploy, SNS, Chatbot, CloudFormation, Route53, VPC, EIP, IAM )

Server-side logic is programmed in PHP / Laravel, The detailed design of the front end was arranged with Sass, and when I wanted to add movement, I implemented it with Vue.js and jQuery. Use Docker / docker-compose for your development environment For the CI / CD pipeline, we did an automated test build with CircleCI and I am trying to realize automatic deployment with CodeDeploy of AWS.

Infrastructure configuration diagram

About development environment and production environment

I am using Docker / docker-compose for the development environment, and I am using containers for the following four purposes.

1. Web server container: Nginx
2. Application container: PHP / Laravel / Vue.js
3. DB container: MySQL
4. Container for DB management: PHPMyAdmin

Reference link:

-[How to build Laravel + Vue execution environment (LEMP environment) with Docker that never fails ~ Part 1 ~](https://qiita.com/shimotaroo/items/29f7878b01ee4b99b951#8docker-composeyml%E3%82%B3 % E3% 83% B3% E3% 83% 86% E3% 83% 8A% E3% 81% AE% E8% A8% AD% E5% AE% 9A% E3% 83% 95% E3% 82% A1% E3 % 82% A4% E3% 83% AB% E3% 82% 92% E4% BD% 9C% E6% 88% 90% E3% 81% 99% E3% 82% 8B)

-How to build Laravel 6.8 + Vue execution environment (LEMP environment) with Docker that never fails ~ Part 2 ~

-phpMyAdmin on docker is too useful

I wanted to deploy with ECS on AWS in the production environment, Abandoned due to high difficulty ... For the time being, I got used to the experience of deploying on EC2, so this time I proceeded by building an environment on EC2.

Issuance of SSL certificate

I am using ACM (AWS Certificate Manager) because I wanted to issue an SSL certificate and make it HTTPS.

In order to use ACM, in addition to EC2, ALB (ELB) and CloudFront are also required, so I decided to introduce ALB this time. Although I am using ALB, ~~ To save money ~~ Currently, I do not expect access to load distribution or scale out, so I have prepared only one EC2 instance. In addition, even if there is a key mark in the address bar **, if you do not set the proxy on the Laravel side, the css and js files will not be read and the routing will not be https **, so be careful. ..

Reference link: -AWS: How to get an SSL certificate for free --Trusted Proxy Settings

Upload to S3 bucket

S3 is prepared for the following two purposes.

1. Store the source built with CircleCI

2. Store the image data uploaded by the application on EC2

Regarding 2, there was something unexpected to do, such as setting the bucket policy of S3 and installing the package for S3 on the Laravel side.

Reference link:

-AWS (IAM: User, S3: Bucket) settings for Rails, Laravel (image upload) -Upload images to AWS S3 with Laravel

Notification settings for Slack

By linking CodeDeploy with SNS and Chatbot, notifications will be sent to your Slack account at the start and end of automatic deployment. Very convenient.

Functions list

• __ User registration related __

• New registration, profile editing function

• Login and logout functions

• Easy login function (guest user login)

• __ Zoom API integration __

• Morning activity Zoom meeting function (CRUD)

• New meeting, list, edit, delete function

• __ Judgment function for achieving early rising __

• Target wake-up time can be set for each user (from 4:00 to 10:00)

• If you can post before the target wake-up time, the early rising achievement record will increase by one day.
  

• • If you post after midnight, you will not get up early and succeed.
    Even if you post 3 hours before the target wake-up time, it will be invalid.
    (Example) If you set the target wake-up time to 07:00, you can get up early if you can post from 04:00 to 07:00.

• __ Ranking function for the number of days that users get up early (every month) __

• __ Infinite scroll function __ (jQuery / inview.js / ajax)

• __ User Post Related (CRUD) __

• __ Comment function __

• __ Tag function __ (Vue.js / Vue Tags Input)

• __ Like function __ (Vue.js / ajax)

• __ Follow function __ --Following / Follower list (pagination)

• __ Flash message display function __ (jQuery / Toastr)

• Show flash message when posting, editing, deleting, logging in, logging out

• __ Image upload function __ (AWS S3 bucket)

• __PHPUnit test __

DB design

ER diagram

About each table

Points related to the early rising achievement function

The wake_up_time in the ** users table ** means the user's ** target wake-up time **. If users can post earlier than this time, the early riser of the day will be achieved. In addition, it should be noted "The target wake-up time is 07:00, and I posted at 1:00 at midnight." And so on, users posted too early Even in some cases, it is set so that it will not be achieved early. As a mechanism, the value of range_of_success in the ** users table ** is used. this is, "An integer value that indicates the range of how many hours before the target wake-up time should be posted to achieve early rising." is. The default is 3, for example, if the target wake-up time is set to ** 07: 00 **, 3 hours before that. If you can post between ** 04:00 and 07: 00 **, you will get up early.

If you can achieve early rising in this way, the date of the achievement date will be recorded as a history in date of the ** achievement_days table **. Example) 2020-11-22 The following functions are realized by using this date data.

** ① Calculate the number of days to get up early every month ** ** ② Ranking function using the number of days in ① **

At first, I was thinking about getting up early ** continuing ** in the ranking of the number of days, but From the viewpoint of maintaining user motivation, we decided to adopt ** monthly ** early rising ** achievement ** days.

What I had a hard time

I struggled with errors in every process from development to deployment, but w, Here are some of the most memorable points.

What I struggled with at CircleCI

• Settings in ** config.yml **, which is a CircleCI configuration file
• Understanding the flow of automated builds and tests

I was suffering from a lot of errors when setting up config.yml. .. Especially when specifying commands and paths, it is important to understand where the root of the path starts. As a countermeasure when the test failed, I tried to solve the cause by SSH logging in to the built container and checking the error log.

Reference link: Debugging with SSH

Difficulties with AWS deployment

• Issuing SSL certificate with ACM
• Setting to upload images to S3 with Laravel
• Auto-deploy settings in CodeDeploy (especially appspec.yml)
• EC2 instance setup

As mentioned above, [Issuing SSL Certificate](#### Issuing SSL Certificate) [Upload to S3 bucket](#### Upload to S3 bucket) I tended to get addicted to errors around me. Also, this time I decided to deploy with EC2 instead of ECS, but after SSH login to EC2 There were many files to install and configure, and the work around them was difficult. Considering this process, I wanted to be able to handle ECS more and more ^^;

What I struggled with at the front end

• UI / UX adjustment (Sass)
• Ajax in general

Struggle on the back end

• DB design
• DB relation related processing
• General testing with PHPUnit

At first, I had a hard time around the relations. Which table is associated with which table, and how to get the associated information? Also,

• $article->user()
• $article->user

For example, I felt that the difference between the two was also an important point.

As for the PHPUnit test code, I had a hard time collecting information because I couldn't find any information that could be systematically learned.

Difficulties in linking with Zoom API

• Understanding Guzzle
• Understanding Zoom API

I decided to add a function to create and edit Zoom meetings from the app, Since I had never used an external API before, I found it difficult to understand the grammatical things and the mechanism of API communication.

In implementation, it is a PHP HTTP client to communicate with Zoom API in Laravel. I have installed ** Guzzle **.

Reference link:

• Guzzle 7 Official Documentation
• I tried using Guzzle, the PHP HTTP client of today

Next, register the app on the Zoom App Marketplace and read the official document, but in English, what page should I look at at the beginning? I had a hard time without knowing. .. ^^;

Laravel introduces sample code of the process to communicate with Zoom API While referring to overseas articles, I gradually became able to find the necessary information from the official documents.

Reference link:

• ZoomAPI Official Document (English)
• Manage Zoom Meeting Rooms through Zoom API with Laravel

However, since I was developing an application with Laravel 6 series this time, I also had a hard time because I could not use the Guzzle wrapper that can normally be used with Laravel 7 series, and I had to rewrite the code a little.

Referenced learning materials, etc.

Basically, I've learned with ** Udemy ** and ** Techpit **. These two are very easy to understand. Personally, I felt that it would be better to learn the basics at Udemy and then move your hands with Techpit as an advanced version.

Docker / docker-compose

• [Udemy] Docker course taught by US AI developers from scratch

PHPUnit / CircleCI / AWS

• [Techpit] Laravel × CircleCI × CI / CD learned on AWS

AWS

• [Udemy] AWS: Amazon Web Services practiced from scratch. Learn the basics of infrastructure while moving your hands
• [Udemy] This is all you need! AWS Certified Solutions Architect – Associate Exam Breakthrough Course (SAA-C02 Exam Compatible Version)
• [[Book] Network & Server Construction from the Basics of Amazon Web Services Revised 3rd Edition](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% EF% BC% 86% E3% 82% B5% E3% 83% BC% E3% 83% 90% E3% 83% BC% E6% A7% 8B% E7% AF% 89-% E6% 94% B9% E8% A8% 823% E7% 89% 88-% E5% A4% A7% E6% BE% A4-ebook / dp / B084QQ7TCF / ref = sr_1_2? __ mk_ja_JP =% E3% 82% AB% E3% 82% BF% E3% 82% AB% E3% 83% 8A & dchild = 1 & keywords = aws & qid = 1606093752 & sr = 8-2)

Laravel

• [Udemy] Let's do everything from PHP to Laravel on the server side [From beginners to beginners] [Emphasis on comprehensibility]

Laravel / Vue.js

• [Techpit] Let's create an SNS-like Web service with Laravel (+ Vue.js)!

Sass

• [Udemy] Write CSS efficiently! "Sass" course for front-end engineers ~ From basics to practice ~

Future tasks

• Responsive web design (smartphone compatible)
• Design improvements
• Fixed a bug of infinite scrolling (Like button of loaded post disappears)
• Add Auto Scaling to ALB to make EC2 redundant
• Deploy with ECS (EKS)
• RDS redundancy
• Infrastructure coding
• Addition of search function
• Enrichment of test code
• Make the input form modal instead of transitioning to another screen when posting
• Sort function for Zoom meeting before start and end meeting

There are still many issues, but I would like to improve them one by one and brush them up.

It's been a long article, but thank you for reading this far! ^^