Try to create a server-client app

About this page

For the purpose of learning, I built a server-client smartphone application. This article is a reference article that summarizes the sites that were referred to when implementing. It's 1 screen, 1GetAPI, but there are many things to do and it was a great learning experience.

【Overall view】

Prepare the development environment

　 The Server development environment is Eclipse, which I always use. No comment in particular.

• Summary of cooperation between GitHub and Eclipse

Bootstrap Studio is used as a design tool. I don't think it's for professional designers, When designed by a non-designer like me

• Various design templates are available
• Automatically outputs HTML / CSS of GUI-based design

These two points are very useful.

It's about 3000 yen shareware, but it's also a permanent license with no additional cost.

• Maybe the best mockup tool Bootstrap Studio

This time, front-end development adopted CORDOVA. There are two reasons.

• I want to release an application for both iOS and Android
• Since it can be built based on conventional Web technology, learning costs can be expected to be reduced.

Monaca is an integrated development environment for front-end development and can be executed from implementation to build. There is a free frame. God.

• Let's make a smartphone app with monaca # 1

circleci is a build tool like Jenkins etc. There is a free tier. Actually it was planned for Docker & Jenkins, but it died to reduce the server cost burden. This time, only the CI tool of Server was implemented.

• Official HP * It is quick to try and understand the tutorial.
• I've just started CircleCI, so I've summarized it in an easy-to-understand manner

Build Rest API Service with Spring Boot

I started by running Hello World with Spring Boot and then extended it to Rest API.

• Introduction to Spring Boot ... It's good, so I'm sure!
• Implementing REST API with Spring Boot and JPA (Application Layer)
• Try to make Rest API (GET)
• Spring MVC controller arguments

The naming convention has become appropriate due to the development by one person, but I think it should have been practiced first.

• Naming -Name-

Pack the source and test code while looking at the coverage

　 I used Spock for the test code and Jacoco for coverage measurement. I used the test code and coverage report for the first time, but it is very useful. I was happy and enjoyed the process of the source code and test code becoming more robust to each other.

JUnit chose Spock because it has readability issues, but it was also very easy to handle.

• Java test Groovy is okay
• Apply Spock to Java unit tests
• A brief summary of Spock know-how

Coverage was an opportunity to think about the range of activity and test cases to be supplemented.

• Get coverage with Jacoco ... Gradle JaCoCo plugin
• Why the quality does not improve even if 100% test coverage is pursued and the recommended coverage target value

Create API documentation

Ask Swagger. It's OK if you write SpringFOX in Gradle and explanatory text in main class.

• I tried to get started with Swagger using Spring Boot

Build a deployment environment

　 AWS was ideal, but I decided to rent a monthly CentOS server that was handled due to learning costs.

• Sakura's VPS 1GB 2 core about 990 yen / month

What to do 1. Make it possible to work with Teraterm and WinSPC

• Even beginners can understand! Sakura VPS | Sakura VPS Manual
• CentOS 7 with Sakura VPS 7. sftp connection

What to do 2. Install the JDK for Spring Boot to work

• Java: How to uninstall JDK (RPM PKG version) from Linux (CentOS)
• When updating the latest version of JDK and Tomcat installed on CentOS with yum
• [CentOS7 + OpenJDK11 + Tomcat9 operating environment construction](https://ufirst.jp/memo/2019/03/18/centos7-openjdk11-tomcat%E3%80%80%E5%8B%95%E4%BD% 9C% E7% 92% B0% E5% A2% 83% E6% A7% 8B% E7% AF% 89 /)

What to do 3. Deploy Spring Boot Jar & check operation

SpringBoot includes Tomcat and can be executed by jar alone without setting up a Tomcat server.

[Step 1. Try moving it for the time being] ① Transfer the jar to the server (send by WinSCP) (2) Execute the service with java jar (path of the jar sent by hand) ③ Confirm operation at http: // (server IP): 8080 /

[Step 2. Register as a resident service] In the actual service in, the following work is done to make it resident.

• Spring Boot 2 application daemonization

Corresponds to CORS

If you proceed to this point, implementation will proceed for each server and client. On the other hand, in order to actually combine and communicate, it is necessary to support CORS (Cross-Origin Resource Sharing).

• I encountered the error "No'Access-Control-Allow-Origin' header is present on the requested resource."

When sending such as POST, it is necessary to be aware of the preflight request.

• Cross Origin Resource Sharing by Spring

Supports SSL communication

　 It seems that Chrome on Android does not allow communication with the API unless it is HTTPS. Since there is no help for it, I set SSL on the Server side to enable HTTPS communication.

What to do 1. Set your own domain

• Original domain settings

What to do 2. Get an SSL certificate

I used Let's Encrypt, which is provided free of charge by a non-profit organization in the United States. The Let's Encrypt certificate expires in 3 months, so it's a good idea to add cron.

• This time, we will ask nginx to manage it instead of Apache, so please ignore the Apache installation part in the following article.

• What is Let ’s Encrypt for free SSL certificate?

• Even cats can understand! Sakura's VPS Course-The 6th "Let's Encrypt Free SSL Certificate"

• Introduce Let's Encrypt SSL certificate to CentOS

What to do 3. Install nginx and link with SSL certificate

The reason I introduced nginx was because I couldn't understand how to incorporate SSL directly into Spring Boot. ..

• CentOS 7.0 --SSL connection with web server Nginx!

Submit to the App Store

If you want to submit to the App Store, you need a Mac (Xcode) to build the release version in principle. I used Monaca's build service for Windows users. It will run the release version build for 3300 yen for one application.

You will also be asked to register the device as build information. I bought a used iPhone 6 (B rank) for debugging the actual machine. About 9000 yen. If you're a communicator, get old from your Apple user friends.

To publish the iOS app, you need to pass the review. Even if it is NG, it will politely comment on the chat, so please correct and resubmit according to the instructions.

• [2018 Edition] I understand well! Summary of iOS app release procedure
• Personal developer writes privacy policy for App Store

Submit to Google Play

There is no app review on Google Play, just add the necessary information and submit.

• How to release an Android app on Google Play [I can't ask you anymore! ]

The finished product

An app that returns Mecab morpheme results and some words with meaning when you enter a classic sentence. I really got the idea that came out when I was watching TV with my wife.

• [Kotetsu Classic Reading Comprehension Support App (App Store)](https://apps.apple.com/us/app/kotetsu-%E5%8F%A4%E5%85%B8%E6%96%87%E7 % AB% A0% E3% 81% AE% E8% AA% AD% E8% A7% A3% E6% 94% AF% E6% 8F% B4% E3% 82% A2% E3% 83% 97% E3% 83 % AA / id1481741983? l = ja & ls = 1)
• Kotetsu Classic Reading Comprehension Support App (Google Play)

Finally (time and money spent)

• Monaca used one plan only in the month when builds are frequently used.

Although it is a single pella in the article, it took a long time to work while stumbling on the first one. I had some money, but (in terms of efficiency) I stopped sticking to no cost and tried to put it out.

That is all for the introduction. Now that I've got it right, I want to make enhancements and new apps again.