Gori Gori’s SE tried to create a web service by personal development The continuation of
Last time I wrote about “I tried to make a Web service”. When I saw the one I wrote, I thought, but most of the introductions of Web services do not include much SIer elements. As for the previous intention, rather than appealing the Web service itself, I sometimes hear a voice saying “SIer just throws it at BP and does not program”, so SE who has only SIer experience is programming and it is like a Web service I wanted to show you one experimental result, which makes it look like this.
It doesn’t matter if it succeeds or fails.
However, I feel that I wrote only “I made it like this”, so I will outline the process in which the development was carried out, so I think it would be helpful for something.
It’s really rough. It’s not modern. It feels like a read. It is a “poem” tag.
This time, “what I want to make” was the catalyst for my development. It is good to learn systematically from scratch like tracing, but what is the function required for “what you want to make” and what technology is required for that function? As I proceeded while thinking about it, I forgot about the time and became more and more shaped. However, I don’t think that “what I want to make” does not come out so easily, so I think it’s a good idea to ask various people “what I want”. If you make it “what you want to make”, I think that your hands will move freely.
2. Development environment
With that in mind, what should I start with? I imagined a production environment. I have no modern experience. “Well, it’s the first personal development server, is it OK to use one server, and Apache Tomcat for the Web/AP server, and MySQL for the DB, but MariaDB who has never touched this time!” Like The rest is the language. As I wrote before, I chose Vue for the front end and Java (Spring Boot) for the back end, with the intention of learning in a well-balanced way with inexperienced Vue and experienced Java. And the editor. I have experience with C# and Java, and I have experience working with Visual Studio and Eclipse. I don’t have a Visual Studio license. From my experience, I’m worried that Eclipse was heavy and occasionally moss on startup. The VS Code that I often see is light and easy to use for Java, so I chose VS Code. I don’t do source version control. There is no such thing as a container.
3.Start development with Java
First, I started making it from the login screen. First of all, the login screen is not so interesting. Implemented using the Spring Boot function.
Next is the SIer basic and master maintenance screen. The image that the mass men screen is first created for SIer to learn development. Since I have experience, implementation is completed for the time being. At this time, it has not yet been decorated. I showed him the login screen and mass screen, saying “I could do this.” The reaction was something like “how many hours do you take for this?” It seems that the impact of the appearance was strong rather than the function. This has reduced my motivation So at this point I introduced Vue,
- Later, when I looked at the official website, it said, “It is not recommended for beginners to start with vue-cli” … For the time being, I wanted to get rid of the appearance, so I thought that I should put in Bootstrap that I have dealt with in business, but when I looked it up, I often saw an article that the component library called Element is a set with Vue, so I adopted Element. .. I often saw the word “reactive” at the beginning of Vue’s explanation, but it didn’t make sense at first. Now I think it means “dynamically changing”.
4. Development flow
In my work, I write a specification, have it reviewed, fix it, and then review it again. This time, I haven’t done it in detail. As a SIer, I have been experiencing everything from “requirement definition -> external design -> internal design -> implementation -> various tests -> release”, so I might have been doing various things in my head. As for this time, for each function ・Screen image memo ・Memo of screen transition diagram ・ DB table design memo I made it. Moreover, they are not at hand right now. I’m lost. At the time of business transfer, it is necessary to tell “There is no specification. Please see the source”. Even if the screen image or screen transition changed, it was closed within the function, so the effect was small, but when the table item changed, the effect on other functions was large and it was a lot of trouble, so I thought about it a little more properly. I should have had… I think now.
5. Sudden API
Now, we have two execution environments, Node.js and Tomcat. Even now, the image of converting the back end to REST API has solidified here and there. At the time of development, I put a Vue project in a Java project and started both Node.js and Tomcat. In the production environment, the built Vue files were included in the war file and all were put on Tomcat. *If you do not start the API URL with /api/…, the problem that the URL will be covered by Vue will occur later…
6. Start development with Vue + Java (Spring Boot)
Recreate the login screen and mass men screen with Vue + Spring Boot (REST API). There are various ways to search around here, so I didn’t get stuck.
Initially I used Element for validation, but when I tried to handle server-side errors it didn’t work, so I switched to VeeValidate. I’m doing something with Vee Validate.
The implementation flow was generally routine. Create screen (Vue) → Create table (DB) → Create repository class (Java) → Create service class (Java) → Create controller class (Java) → Create REST API access part (Vue) → Adjust screen (Vue) I feel like repeating this for each function.
By the way, in my experience as a SIer, I have worked with designers a little, and I have little knowledge of design. So the design is indescribable.
7. Creation of other functions
The creation of each function was based on experience and world-class services. The exclusive control was finely done… Also, there were many sites that taught me how to implement chat, etc. without referring to the services that are abundant in the world. However, since there are many simple chats, I decided on my own whether the members were online, the delete function, or the display of icons.
Later, when I tried to implement the function to delete chat messages, it turned out that the structure of the table could not be erased. At that time, I had a lot of time to review the structure of the chat table, so the range of influence was great. I thought it would be okay to delete the message later, but I also thought that the structure of the table should have been taken into consideration to some extent.
I showed it to Yome often, but he said something quite harsh. Especially the design and operability. Do you say that far? About. That’s what’s important for users, isn’t it? I am grateful that there are parts that have improved while suffering damage due to the point that the body and lid of the omelet are not covered.
8. The approaching negative
During development, he comes from time to time. “Who uses such a service…?” It becomes a big shadow and wraps the view in darkness. Review “It’s a fucking service” Review “cannot be used” Review “too many bugs” Negative evaluations run around in my head. And I want to stop and throw everything away. The half-finished apps that are stopped and left in the middle will be sleeping everywhere.
In such a case, it may be necessary to regain the satisfaction from the user’s point of view, but I escaped to the fun of programming. Then, when the feeling is calmed down, we will return to the user’s point of view. I managed to keep myself motivated by repeating it.
9. Task management that synchronizes between users who struggled a little
I thought that I would like to add the function of synchronizing the screens of users with WebSocket like chat to task management, and I thought that I would realize it with Vue.Draggable + WebSocket, but one delicate, no Phenomenon has occurred.
The movement is subtle. Eventually, I was suffering for about two days and managed to treat it with symptomatic treatment.
10. Preparation for publication
The server used AWS EC2. At first, I was using an instance of the free tier, but since the memory was too small, the performance was affected, so I made the specifications a little better even for a fee. Study fee, study fee… Just set up the DB and Web/AP server here, and put the built module.
After making all the functions, we started to acquire the domain necessary for publication and make it HTTPS. I was wondering if something would be difficult, but the domain acquisition and HTTPS conversion were completed easily on AWS. The .com domain seems to cost around 1,000 yen a year, but… Prioritized ease of use over free.
When you’re ready, just tell the rest. This time I announced on the SNS that I have an account. When I thought that if I press this button, I will announce… It was quite a finger pull.
There is not much difference. Sometimes I get harsh comments and sink. I think it’s very difficult to get people to use it. I haven’t decided what to do in the future. I think it’s the most important since it was published.
Let’s develop! It is roughly like this from the decision to release it to the public. There are few technical elements, but it’s a poem. What I was thinking about was that even if I thought “Oh, this seems to never be solved!”, it will be manageable within a week at the longest. It will be solved unexpectedly. It’s solid, but I can think of it in the bath or toilet.
I’ve always had the question, “Who do you use such a service…?” I feel that no one actually uses it. But I think it’s important to experience it up to once. If it doesn’t work, just make it again. I’m not a mentally strong man with a bristle-hearted heart, but I feel like I can somehow move forward while denting. So if you’ve never made a public application before, why not try it once?