One-person full-time, this project is one-person full-time, including product – prototype – design – development. Posted on the site cool design summary and real machine demo GIF: address

Technology selection

The front end

Official site: the React + Ant Design source address Small program: MPX (across the end frame, support WeChat small procedures, pay treasure to program) + Vant weapp + iview weapp client source address The background system: Vue + Ant Design source code address back-end API: FastAPI source code address (incomplete version, no database config)

MPX is not a very mature framework, the overall development experience is better than Taro (personally), Taro Cli stuck me in the first step of Taro, and the components in Taro’s UI framework are also a little poor (maybe now that the update is not poor). What surprised me most about MPX, the app’s official framework, is the ability to use both iView Appeable AND Vant appeable UI frameworks, which greatly enrich developers’ options.

MPX documentation is also very perfect, but if you use a third-party framework to develop small programs, you have to turn over the development documents of multiple frameworks and wechat official development documents, otherwise it will take a lot of detours. I once encountered the problem of not being able to introduce Vant Dialog. Later, I found that it was simply because I introduced the Vant Dialog in the wrong way, and the front end team of Didi was really efficient. The issue I sent in the morning was replied in the afternoon (details 🔎).

I personally prefer Vant syndrome, a UI framework that is somewhat more complex than iView syndrome, so I use Vant syndrome for most of my components.

Later, I saw Reamx’s React framework. Personally, I felt it was simpler than Taro. Unfortunately, its UI framework was more barren. Chances are high that the next project will use Remax.

Attached is a small program design

There’s nothing official about React, it’s just Flex layout, it’s not technical, it’s static.

The vUe-based backend system has nothing to say, no particularly difficult problems.

Attached background system design drawing

The back-end

Framework: Python FastAPI database: Postgresql 12 Python operations: Postgresql: Psycopg2 Python virtual environment management: Anaconda

I was thinking about using RESTFul apis. I had used Node and other Python frameworks such as Django/Flask, but they were not RESTFul apis, so I searched the Internet to see if there were any others, and I found FastAPI. The official Chinese version has also been updated, which is fantastic, with a bunch of useful features built in, and the Pydantic gadget. You basically don’t need to define error codes, data validation, and setup management yourself.

The structure of the project can be very clear, it’s kind of, you know, easy to understand structure, and the code style is very simple, because most of the functionality is already wrapped up and you can just call it.

Postgresql is a bit of a pain in the neck, I didn’t think twice about using it when I saw that it was the official database, and later found out that it also had jSONb as a data format. Using Psycopg2 to operate Postgresql is a long story… To return key-value data, you don’t need a data format like JSON/JSONB. It only takes a few lines of code, but I’ve been searching for a long time and haven’t found any, whether it’s GitHub, Stack Overflow, Segment or nuggets… I wanted to give up Postgresql for a while, but I got rid of it, and I’m comfortable with it. Postgresql reads and writes are really fast. The overall style, semantically, is easy to understand.

(Some other development notes are in the boiling point of my Nuggets account, notes)

Attached is the back-end API demo diagram

The environment

Docker container system: CentOS 7 Nginx version: 1.16.1 Docker version: 19.03.13

I have wanted to play Dokcer for a long time, and I finally got to play it this time. Docker is not a very difficult thing, many things are very human. However, without taking notes, it is still easy to forget what service you have opened. Once, when I opened multiple screens, the CPU of the server soared to 120% and almost died suddenly. I’m afraid to open code-Server and program with the iPad remote connection.

The configuration of Nginx is also very simple, but if you don’t hide it, it can be very easy to figure out what the URL is on the back end.

(Back-end details 🔎 configuration description, extranet accessible: address)

Develop insight

This development, I learned a truth, oneself a person is do not complete a project, even if done, the consumed time is not, I personally is extremely easy to consider the details from the start, skeleton diagram, error reminder, choose what UI framework such as trivial problems, while ignoring the data structures, code style, whether easy maintenance and so on important issues. But at the same time, because of the total service, the amount of knowledge acquired is unmatched in ordinary work, but the pressure is also full, so I will deliberately avoid many times, do not face the problems in the development. Many important functions were cut off in the late stage, and development tasks and development time had to be reasonably allocated.

Thank you 🙏, see you next time 👋.