"Blind Box Lottery" Creative Marketing Practice

By Hanxie & Jiangyu

What is the value of Serverless and low code when they intersect in the same business? This article uses blind box lottery, a creative marketing activity done by Serverless Devs, as an example. It aims to tell how Serverless and low code are matched to meet the business demand.

Preface

Online H5 creative animation combined with offline entity rewards is a common means of Internet marketing activities. The cycle from planning to the landing of activities is short to grasp the key time nodes. Landing online services in a short period poses a big challenge to those who do technology development.

The challenge is often doubled, especially when there are many requirements, such as adding background management and key frontend access data tracking points. For development, in addition to completing the core business demands, it is often necessary to pay attention to other situations other than non-business demands. They include system access security, high concurrent traffic response, and observable system operation indicators.

In the past, such requirements often involved many roles, such as product, frontend, backend, design, testing, and operation and maintenance. It makes the input-output ratio low and the activity continuity poor. Today, we can reduce the cost of doing such activities and make them continuous using Serverless + low code technology, thus improving the operation effect.

Serverless Devs only invested 3.5 people in this blind box lottery. It completed the activity planning, product design, front and backend implementation, system deployment and operation and maintenance, etc. These non-business challenges (such as system access security, high concurrent traffic, and system observability) are easily met with the help of Serverless service capabilities. The completion of functionality and the improvement of efficiency have enabled this operation to achieve more. The templated precipitation of activity services has laid a good foundation for subsequent similar activities.

The following is the overall process of the blind box lottery:

Requirement Design (including business and interaction logic)
Design Draft
Low Code Frontend Implementation
Encoding to Implement Serverless Services
Joint Debugging and Testing
Deployment Launched
Fix Problems in Activities
Review After Activity

Application Effect Preview

Architecture Preview

This deployment architecture does not use Alibaba Cloud API Gateway but uses the Function Compute Custom Runtime as the hosting form. It is because of the particularity of this requirement. We deploy our own, which means the end-side access is decentralized, and the end-side access services are thin. Only the data processing interface calls and provides static rendering services. After that, a centralized logical background processes the winning probability and manages the prize query database.

If you design the centralized activity background, it is recommended to refer to the following architecture mode. You can use API Gateway as the traffic entrance to facilitate more security restrictions and flexible expansion.

Implement Parsing

Low Code Implementation of Frontend Interaction

This frontend implementation uses low code to work hype4. The specific use of hype4 will not be described in detail here. You can search for it if interested.

In addition to cutting out the required drawings, the design draft realizes the animation effect just like processing Flash. Finally, js code is added to realize the capabilities of interface access and scene switching. The whole process will be faster than full coding, especially when the dynamic effect is 2-3 times more efficient than pure handwriting.

Data Layer Serverless Services

As shown in the architecture, the data layer here is SSF. This layer only does data forwarding and static rendering. The code implementation is simple. It uses the express framework and deploys it as a Function Compute Custom Runtime.

The purpose is to host both static content and dynamic data forwarding. Note: The information acquisition of users is also realized at this level.

Here, we obtain the accountId of Alibaba Cloud users, which is convenient to align the winning information and distribute prizes. This parameter does not make much sense to ordinary developers.

We will deploy the lottery background in advance. Next, after each user has deployed this layer of services, they will access the deployed services and pass basic information (such as uid) to the lottery background to launch the lottery. The final result is passed to the frontend display. As an administrator, you can set prizes and probabilities through background operations.

Implementation of Background Lottery Logic

The backend service is implemented with the Python Web framework: Django. The main methods are:

Obtain the user's uid information and verify the uid information to ensure:

The accuracy of uid information
The client service is deployed through Serverless Devs developer tools.

Build the prize pool on that day
Preliminary determination of the user's winning information
Review the user's winning information
Return the final result to the client

Flowchart

1. The user deploys the client service of the blind box lottery locally and deploys it to his account through the Serverless Devs developer tool.

You need to issue a temporary domain name to the user during the deployment period. (This temporary domain name requires the uid of users.) Serverless Devs generates some client tokens during the temporary domain name issuance process. It is recorded in the Serverless Devs backend service. This token is an important mark for identifying users.

(If users declare in YAML that they do not use the domain name information issued by the system, they may not be able to participate in this activity.)

2. After the user is deployed, a temporary domain name issued by Serverless Devs is returned for users to learn and test.

3. Next, you can open the temporary domain name through your browser to see the relevant page of the lottery. Users can click to participate in the lottery.

4. After clicking, the user will initiate a request for Serverless service under the user account. The service will process the user's uid information and initiate a real lottery request to the backend Serverless service of this activity.

5. When the backend Serverless service of this activity receives the lottery request from the user, it will:

Obtain the uid information passed by the Serverless service under the user account when initiating the lottery request
Use the obtained uid information to match data in the temporary domain name distribution system. It determines that the user has used the temporary domain name distribution system this time and issued the corresponding domain name.
Realize lottery operation

Core Implementation of Lottery

It makes a preliminary evaluation of the current system in the process of lottery operation. A simple and easy lottery function that can be used for small-scale lottery activities is designed:

This is the Django project implementation method:

@csrf_exempt
def prize(request):
   uid = request.POST.get("uid", None)
   if not uid:
       return JsonResponse({"Error": "Uid is required."})

   temp_url = "<The validity of obtaining uid, important judgment basis>?uid=" + str(uid)
   if json.loads(urllib.request.urlopen(temp_url).read().decode("utf-8"))["Response"] == '0':
       return JsonResponse({"Error": "Uid is required."})

   token = randomStr(10)
   # Get the prize of the day
   prizes = {}
   for eve_prize in PrizeModel.objects.filter(date=time.strftime("%Y-%m-%d", time.localtime())):
       prizes[eve_prize.name] = {
           "count": eve_prize.count,
           "rate": eve_prize.rate
       }
   # Build a lottery pool
   prize_list = []
   for evePrize, eveInfo in prizes.items():
       temp_prize_list = [evePrize, ] * int((100 * eveInfo['rate']))
       prize_list = prize_list + temp_prize_list
   none_list = [None, ] * (100 - len(prize_list))
   prize_list = prize_list + none_list
   pre_prize = random.choice(prize_list)
   # Data warehousing
   try:
       UserModel.objects.create(uid=uid,
                                token=token,
                                pre_prize=pre_prize,
                                result=False)
   except:
       try:
           if not UserModel.objects.get(uid=uid).result:
               return JsonResponse({"Result": "0"})
       except:
           pass
       return JsonResponse({"Error": "Everyone can only participate once."})
   if not pre_prize:
       return JsonResponse({"Result": "0"})
   user_id = UserModel.objects.get(uid=uid, token=token).id
   users_count = UserModel.objects.filter(pre_prize=pre_prize, id__lt=user_id, date=time.strftime("%Y-%m-%d", time.localtime())).count()
   # Final judgment of whether to win the prize
   if users_count >= prizes.get(pre_prize, {}).get("count", 0):
       return JsonResponse({"Result": "0"})
   UserModel.objects.filter(uid=uid, token=token).update(result=True)

   return JsonResponse({"Result": {
       "token": token,
       "prize": pre_prize
   }})

System Security Settings

When the user wins the lottery, the system will generate a token. The combination of the token and the uid is an important basis for judging whether the user wins the lottery. There may be a question involved here. Why should a token be added to make the combination judgment when there is a uid?

The reason is simple. The winning information is submitted and queried. If the winning information is processed through uid, it is likely that users will illegally obtain the information submitted by other users through traversal and other means. This part of the information possibly involves the receiving address submitted by the user. Therefore, a token has been added to increase the complexity of being traversed by violence (to a certain extent) and for the sake of safety overall. This part of the method is simple:


@csrf_exempt
def information(request):
   uid = request.GET.get("uid", None)
   token = request.GET.get("token", None)
   if None in [uid, token]:
       return JsonResponse({"Error": "Uid and token are required."})
   userInfor = UserModel.objects.filter(uid=uid, token=token)
   if userInfor.count() == 0:
       return JsonResponse({"Error": "No information found yet."})
   if not userInfor[0].result:
       return JsonResponse({"Error": "No winning information has been found yet."})
   if request.method == "GET":
       return JsonResponse({
           "Result": {
               "prize": userInfor[0].pre_prize,
               "name": userInfor[0].name,
               "phone": userInfor[0].phone,
               "address": userInfor[0].address
           }
       })
   elif request.method == "POST":
       name = request.POST.get("name", None)
       phone = request.POST.get("phone", None)
       address = request.POST.get("address", None)
       if None in [name, phone, address]:
           return JsonResponse({"Error": "Name, phone and address are required."})
       userInfor.update(name=name,
                        phone=phone,
                        address=address)
       return JsonResponse({"Result": "Saved successfully."})

The whole process is:

Relevant user information can be obtained through the uid and token of users.
If the request method is the GET method, the user's winning information (referring to receiving information) is directly returned.
If the request method is the POST method, the user is allowed to modify the winning information (referring to the receiving information).

Other security-related supplementary instruction:

How can we ensure the uniqueness and non-forgery of the user's token? This is not easy to realize on the browser side because the user may change the browser. However, it is easy for the user to realize it in the function service of the Function Compute platform. Therefore, the domain name issuing stage is adopted to record the domain name information issued in the specified period and compare it in the later stage. It issues a temporary domain name and participates in the activity within the specified time to ensure the user does deploy the project through the Serverless Devs developer tool. (If the user has registered multiple Alibaba Cloud accounts, it is allowed to participate in the activity.)
How can we ensure that the prizes will not be overissued? In this part of the system, a less efficient method is adopted, but it is an easier method to implement for small platforms. The user is given a prize mark first and then the final winning information is judged according to the timing position of the user's prize in the database. For example, the user wins a mechanical keyboard, which is the 6th position of the mechanical keyboard in the database. However, there are only five mechanical keyboards in total, so the winning information of the user will be checked twice, and the winning information will be marked as not winning. (This approach is possible for small-scale activities, but it is not desirable for large-scale activities. Whether the user wins the lottery or not will lead to multiple database read and write operations, which is unreasonable to a certain extent.)
After winning the prize, the user submits the prize mailing information. How to ensure the security of the information and not be violently traversed by others is a problem worthy of attention. A random token is added here to increase the complexity of being traversed by violence and ensure safety.

Deployment Preparations

This deployment does not require a domain name. You can use the custom domain name generated by Function Compute, but you still need to install the Serverless Devs tool. This time, you only need to activate Function Compute.

Procedure

Some templates in the background of the lottery are still in preparation. Only the deployment of frontend and data layer services is demonstrated.

Step 1: Configure the Secret Key

Reference: Serverless Devs Alibaba Cloud Secret Key Configuration (please see the end of this article)

Step 2: Initialize

Use the Serverless Devs command line tool to execute:

s init blindbox-game

Enter guided operation:

Step 3: Build and Deploy

Modify the relevant configuration information and execute the s deploy:

View the Effect

Function Deployment

Page Effect

The application template for the lottery is being prepared and will be displayed in this application template.

Conclusion

After the practice, I would like to expand the topic of low code and Serverless. The following parts will be mainly theoretical, which will bring different benefits to readers.

Serverless + Low Code from the Developer Perspective

As far as I am concerned, the clear conclusion is that I do not reject the compatibility of the two. On the contrary, I hope that the combination of the two can make my work efficient and safe.

My biggest feeling in this activity is that it would be nice if the low code platform could seamlessly connect with Serverless. For example, if I call the interface on low code, it can only be tested after it is built and sent online. This naturally integrated platform has advantages. In addition, it will have to be assembled with the backend interface after the frontend is built. If this is a unified platform, it can be released with one click after the requirements are completed, which will save a lot of trouble. However, there is also a contradiction here. I am worried that once the frontend of the low code is coupled with the backend of Serverless, it will become inflexible and locked by the service provider.

Serverless + Low Code from Vendor Perspective

Serverless and low code service providers of cloud service providers are merging. For example, outsystem, a leader in low code platforms, started using AWS services as early as 2016. For example, Lambda provides its customers with the construction of native APP services.

Trillo is a low code platform that uses serverless and model-driven applications as the main service. It is based on the Google cloud service structure to help its users build Serverless services and frontend applications. Various cloud vendors domestically and internationally have done a lot. Azure integrates its low code product Power Apps into Serverless's ability. It forms Serverless Power Apps, fully integrating the advantages of the two.

AWS handed over the integration of the frontend to its partners and focused on Serverless integration on the service side. It launched Step Functions Workflow Studio products to connect Serverless with almost all of its products.

Chinese Tencent has launched a micro-build low code platform, which is the main Serverless + low code platform. It is exerting its power in small program scenarios. The follow-up by various manufacturers shows the importance attached to this field.

Envisioning a Serverless + Low Code Platform

The value of Serverless + low code platform is clear. Efficiency, safety, and cost are all keywords. What considerations do we need to make to build such a platform?

First of all, from the platform capability, it should be able to cover all aspects of application development from front to back. For example:

Data Modeling
Data Model API
Use Serverless to Build Backend Application Logic
Backend Services that Support the Deployment of Long-Running
Extensible External Service Integration
NAS
Logic Orchestration
Various Security Capabilities (such as Authentication and Permission Control)
UI Orchestration
CI/CD
Application Observability

The functional design of this platform can be clarified. It builds corresponding capabilities based on the infrastructure of cloud vendors.

Some open-source products are related to the low code capability, which are listed below:

Page Build of UI: https://github.com/alibaba/designable
Database Modeling: https://gitee.com/robergroup/chiner
Process Orchestration: https://github.com/i5ting/imove

In addition, you can use the Iac capability of Serverless Devs to connect with cloud infrastructure. The integration with FC is mature, which can manage the full lifecycle of functions.

The sections above are only some of the author's ideas. I know it is not easy to realize such a system. This is intended to be the beginning of it.

Pursuing the improvement of production efficiency has been an important topic in enterprise production. Serverless and low code have an independent division of labor in their respective technical fields, but they share the characteristics of improving production efficiency. It may be important competitiveness for those engaged in the information industry to master and make good use of these two productivity tools at the same time.

Links in the Article

Alibaba Cloud API Gateway: https://www.alibabacloud.com/product/api-gateway

Function Compute Custom Runtime: https://www.alibabacloud.com/help/en/function-compute/latest/custom-runtime-overview

Django: https://www.djangoproject.com/

Serverless Devs Alibaba Cloud Secret Key: https://docs.serverless-devs.com/en/serverless-devs/default_provider_config/alibabacloud

Community