Full stack development of a small group purchase application

The author has been concerned about cloud development for a long time, recently began to do a group purchase small program before the reconstruction and migration to cloud development, at the same time the source open source, this paper sorted out the selection of technology, technical points, welcome interested friends to exchange.

  • Code warehouse
  • Print screen
  • The case shows

Technology selection

Small program

  • Taro 3.0 (React)

  • Interface: Vant

  • State machine: SWR

Management Background Interface

  • Underlying framework: React
  • Interface: eui
  • State machine: SWR

The service side

  • CloudBase cloud development

Taro has now entered the 3.X era, allowing developers to use the complete React, Vue and other frameworks for development. As a heavy React user, I naturally chose Taro among many frameworks (I will try Kbone later).

Because this time to develop the shopping class small program so will choose the open source Vant control library.

In terms of State Machines, a more lightweight Hook scheme is chosen. Two libraries, React – Query and SWR, are investigated in Hook scheme. Generally speaking, SWR is more lightweight and convenient.

In terms of the management side control library, the vast majority of domestic React system will choose Antd control library. To be honest, I am an early adopter and tried Microsoft open source FabricUI library in my last open source project (Lucky_bilibili_Web). This time I have been looking at The Open source EUI of Elastic, and I feel very experienced after using it. Using this control library to develop some pure tool class applications is too convenient.

At the end of this article, I will post a figure 1 that uses this control library as a tool class application, which is completely combined with EUI controls, so you can feel it.

Server side, I pay attention to serverless for a long time, early are a lot of foreign resources, in addition, also very greedy Google Firebase. The author before the development of small programs are from the purchase of the server, self-built server, but also need to daily server operation and maintenance, trouble. Now thank you very much for Tencent Cloud to join in the construction of Serverless ecosystem, so that domestic developers can also use serverless services barrier-free. CloudBase cloud development team has repackaged Serverless to reduce the complexity of serverless learning and achieve out-of-the-box, one-click deployment.

Database design

Related table of commodity and interface display

User, order, payment related table

Administrator related table

Key Technical points

The author also encountered various problems and difficulties in the development of this small program. After consulting a large number of materials in the community and conducting various tests, the answer was found. I really want to put the summary here at one time. Talk is cheap,Show me the code. After there will be some of the author’s own summary of the technical implementation of the plan to take private goods issued alone.

Applets related:

Use the like Vant control library in Taro

See source code:

/mini/src/app.config.ts
/mini/config/index.js   //line 51
/mini/config/index.js   //line 16
Copy the code

Markdown renders in the applet

See the source code

/mini/src/components/wemark
/mini/config/index.js   //line 74
/mini/src/hooks/useProducts.ts   //line 40
/mini/src/lib/b64.ts
/mini/src/pages/detail/detail.config.ts
/mini/src/pages/detail/detail.tsx   //line 165
/mini/global.d.ts
Copy the code

pay

See the source code

/mini/src/pages/order/detail/detail.tsx     //line 71

/cloud/functions/pay
/cloud/functions/pay_cb
Copy the code

Taro uses CSS in JS

See the source code

/mini/config/index.js   //line 39
/mini/src/conponents/product-list/index.tsx   //line 10
/mini/linaria.config.js
/mini/babel.config.js
Copy the code

Custom Nav and Tabber

See the source code

/mini/src/app.config.ts    //line 41
/mini/src/app.config.ts    //line 95
/mini/src/components/nav
/mini/src/components/tabbar
Copy the code

CI CD continuous integration

See the source code

/mini/wx_ci.js
Copy the code

Management background Related

Subject switch

See the source code

/manage/src/theme/niceup
/manage/src/lib/theme.ts
Copy the code

Integrated CloudBase

See the source code

/manage/src/lib/tcb.ts
Copy the code

The management implements refund

Note: The refund developed by procedural cloud only supports the request initiated by the Chinese mobile phone. I have made a workaround here and realized the refund in the form of HTTP API

See the source code

/manage/src/lib/tcb.ts   //line 18
/manage/src/hook/useOrderMuation.ts   //line 81

/cloud/functions/mini-proxy
/cloud/functions/refund
Copy the code

Statistical analysis of data

See the source code

/manage/src/routes/index.tsx

/cloud/functions/aggregate-psn
/cloud/functions/aggregate-sales
Copy the code

EUI implements convenient operations similar to ANTD Form

Note: I left an ext folder in the source code and re-wrapped the EUI form controls. The core library used is RC-field-form, thanks to the original author

See the source code

/manage/src/routes/ext
/manage/src/components/formList
/manage/src/components/formRow
/manage/src/components/formControls
Copy the code

Subscribe to news

See the source code

/cloud/functions/subscribe-message
/manage/src/hook/useMessageMuation.ts   
Copy the code

Cloud development custom login, custom permissions, and initialization data

See the source code

/cloudbaserc.json //line 8
/cloudbaserc.json //line 18
/cloudbaserc.json //line 192

/cloud/functions/db-init
/cloud/functions/auth

/manage/src/hook/useUser.ts   //line 33
Copy the code

These are some of the key technical points in the source code annotation.

A key deployment

Finally, you are welcome to try one-click deployment of this project to cloud development.

There are a number of environment variables that are used during deployment, and refer to this article for information on environment variables.

In order for applets to be available, the cloud development environment must be a cloud development environment with applets enabled.

If the deployment fails, check whether the pay-per-quantity mode is enabled.

When all the variables are ready, click the button below to deploy

The management end:

Small program:

The appendix

  • The user manual
  • Print screen
  • The case shows

  1. The toolclass application developed with EUI is shown at ↩